send appId in registry/package endpoints

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx

@@ -8,13 +8,16 @@ import {
 } from "types/remoteComp";
 
 async function npmLoader(
-  remoteInfo: RemoteCompInfo
+  {
+    appId,
+    ...remoteInfo
+  }: RemoteCompInfo & {appId?: string}
 ): Promise<CompConstructor | null> {
 
   // Falk: removed "packageVersion = "latest" as default value fir packageVersion - to ensure no automatic version jumping.
   const localPackageVersion = remoteInfo.packageVersion || "latest";
   const { packageName, packageVersion, compName } = remoteInfo;
-  const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${localPackageVersion}/index.js`;
+  const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${appId}/${packageName}@${localPackageVersion}/index.js`;
 
   try {
     const module = await import(
@@ -51,7 +54,7 @@ async function bundleLoader(
   return comp;
 }
 
-export const loaders: Record<RemoteCompSource, RemoteCompLoader> = {
+export const loaders: Record<RemoteCompSource, RemoteCompLoader<RemoteCompInfo & {appId?: string}>> = {
   npm: npmLoader,
   bundle: bundleLoader,
 };

client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx

@@ -16,6 +16,7 @@ import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
 import React from "react";
 import type { AppState } from "@lowcoder-ee/redux/reducers";
 import { useSelector } from "react-redux";
+import { useApplicationId } from "@lowcoder-ee/util/hooks";
 
 const ViewError = styled.div`
   display: flex;
@@ -51,7 +52,7 @@ interface RemoteCompReadyAction {
 
 interface RemoteCompViewProps {
   isLowcoderComp?: boolean;
-  loadComp: (packageVersion?: string) => Promise<void>;
+  loadComp: (packageVersion?: string, appId?: string) => Promise<void>;
   loadingElement?: () => React.ReactNode;
   errorElement?: (error: any) => React.ReactNode;
   source?: RemoteCompSource;
@@ -62,6 +63,7 @@ const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompView
   const [error, setError] = useState<any>("");
   const editorState = useContext(EditorContext);
   const compState = useContext(CompContext);
+  const appId = useApplicationId();
   const lowcoderCompPackageVersion = editorState?.getAppSettings().lowcoderCompVersion || 'latest';
   const latestLowcoderCompsVersion = useSelector((state: AppState) => state.npmPlugin.packageVersion['lowcoder-comps']);
 
@@ -79,7 +81,7 @@ const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompView
 
   useMount(() => {
     setError("");
-    loadComp(packageVersion).catch((e) => {
+    loadComp(packageVersion, appId).catch((e) => {
       setError(String(e));
     });
   });
@@ -117,7 +119,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
       this.compValue = params.value;
     }
 
-    private async load(packageVersion = 'latest') {
+    private async load(packageVersion = 'latest', appId = 'none') {
       if (!remoteInfo) {
         return;
       }
@@ -129,7 +131,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
         log.error("loader not found, remote info:", remoteInfo);
         return;
       }
-      const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion});
+      const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion, appId});
       if (!RemoteExportedComp) {
         return;
       }
@@ -159,7 +161,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
         <RemoteCompView
           key={key}
           isLowcoderComp={remoteInfo?.packageName === 'lowcoder-comps'}
-          loadComp={(packageVersion?: string) => this.load(packageVersion)}
+          loadComp={(packageVersion?: string, appId?: string) => this.load(packageVersion, appId)}
           loadingElement={loadingElement}
           source={remoteInfo?.source}
         />

client/packages/lowcoder/src/comps/utils/remote.ts

@@ -39,7 +39,7 @@ export function parseCompType(compType: string) {
 }
 
 export async function getNpmPackageMeta(packageName: string) {
-  const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${packageName}`);
+  const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/none/${packageName}`);
   if (res.status >= 400) {
     return null;
   }