feat(sdk-js): add option to manually provide implementation for shared modules (#4042)

libs/sdk-js/src/react-ui/client.tsx

@@ -109,6 +109,7 @@ class ComponentStore {
 const COMPONENT_STORE = new ComponentStore();
 const EXT_STORE_SYMBOL = Symbol.for("LGUI_EXT_STORE");
 const REQUIRE_SYMBOL = Symbol.for("LGUI_REQUIRE");
+const REQUIRE_EXTRA_SYMBOL = Symbol.for("LGUI_REQUIRE_EXTRA");
 
 interface LoadExternalComponentProps
   extends Pick<React.HTMLAttributes<HTMLDivElement>, "style" | "className"> {
@@ -197,9 +198,17 @@ declare global {
   interface Window {
     [EXT_STORE_SYMBOL]: ComponentStore;
     [REQUIRE_SYMBOL]: (name: string) => unknown;
+    [REQUIRE_EXTRA_SYMBOL]: Record<string, unknown>;
   }
 }
 
+export function experimental_loadShare(name: string, module: unknown) {
+  if (typeof window === "undefined") return;
+
+  window[REQUIRE_EXTRA_SYMBOL] ??= {};
+  window[REQUIRE_EXTRA_SYMBOL][name] = module;
+}
+
 export function bootstrapUiContext() {
   if (typeof window === "undefined") {
     console.warn(
@@ -224,6 +233,14 @@ export function bootstrapUiContext() {
       };
     }
 
+    if (
+      window[REQUIRE_EXTRA_SYMBOL] != null &&
+      typeof window[REQUIRE_EXTRA_SYMBOL] === "object" &&
+      name in window[REQUIRE_EXTRA_SYMBOL]
+    ) {
+      return window[REQUIRE_EXTRA_SYMBOL][name];
+    }
+
     throw new Error(`Unknown module...: ${name}`);
   };
 }

libs/sdk-js/src/react-ui/index.ts

@@ -1,7 +1,11 @@
 import { bootstrapUiContext } from "./client.js";
 bootstrapUiContext();
 
-export { useStreamContext, LoadExternalComponent } from "./client.js";
+export {
+  useStreamContext,
+  LoadExternalComponent,
+  experimental_loadShare,
+} from "./client.js";
 export {
   uiMessageReducer,
   type UIMessage,