@plasmicapp/loader-react 1.0.341 → 1.0.343

package/dist/index.js

@@ -92,12 +92,12 @@ __export(src_exports, {
   PlasmicComponentLoader: () => PlasmicComponentLoader,
   PlasmicRootProvider: () => PlasmicRootProvider,
   convertBundlesToComponentRenderData: () => convertBundlesToComponentRenderData,
-  extractPlasmicQueryData: () => import_prepass2.extractPlasmicQueryData,
+  extractPlasmicQueryData: () => extractPlasmicQueryData,
   extractPlasmicQueryDataFromElement: () => extractPlasmicQueryDataFromElement,
   hydrateFromElement: () => hydrateFromElement,
   initPlasmicLoader: () => initPlasmicLoader,
   matchesPagePath: () => matchesPagePath,
-  plasmicPrepass: () => import_prepass2.plasmicPrepass,
+  plasmicPrepass: () => plasmicPrepass,
   renderToElement: () => renderToElement,
   renderToString: () => renderToString,
   repeatedElement: () => import_host3.repeatedElement,
@@ -110,19 +110,22 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/loader.ts
+// src/loader-client.ts
 var PlasmicDataSourcesContext = __toESM(require("@plasmicapp/data-sources-context"));
 var PlasmicHost = __toESM(require("@plasmicapp/host"));
 var import_host2 = require("@plasmicapp/host");
-var import_loader_core2 = require("@plasmicapp/loader-core");
-var import_loader_fetcher = require("@plasmicapp/loader-fetcher");
-var import_loader_splits = require("@plasmicapp/loader-splits");
+var import_loader_core3 = require("@plasmicapp/loader-core");
 var PlasmicQuery = __toESM(require("@plasmicapp/query"));
 var import_react = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
 var jsxDevRuntime = __toESM(require("react/jsx-dev-runtime"));
 var jsxRuntime = __toESM(require("react/jsx-runtime"));
 
+// src/PlasmicRootProvider.tsx
+var import_host = require("@plasmicapp/host");
+var import_query = require("@plasmicapp/query");
+var React2 = __toESM(require("react"));
+
 // src/utils.tsx
 var import_pascalcase = __toESM(require("pascalcase"));
 var React = __toESM(require("react"));
@@ -266,80 +269,18 @@ function MaybeWrap(props) {
 function uniq(elements) {
   return Array.from(new Set(elements));
 }
-
-// src/component-lookup.ts
-function getFirstCompMeta(metas, lookup) {
-  const filtered = getCompMetas(metas, lookup);
-  return filtered.length === 0 ? void 0 : filtered[0];
-}
-var ComponentLookup = class {
-  constructor(bundle, registry) {
-    this.bundle = bundle;
-    this.registry = registry;
-  }
-  getComponentMeta(spec) {
-    const compMeta = getFirstCompMeta(this.bundle.components, spec);
-    return compMeta;
-  }
-  getComponent(spec, opts = {}) {
-    const compMeta = getFirstCompMeta(this.bundle.components, spec);
-    if (!compMeta) {
-      throw new Error(`Component not found: ${spec}`);
-    }
-    const moduleName = compMeta.entry;
-    if (!this.registry.hasModule(moduleName, opts)) {
-      throw new Error(`Component not yet fetched: ${compMeta.name}`);
+function uniqBy(elements, iterator) {
+  const vis = /* @__PURE__ */ new Set();
+  const filtered = [];
+  for (const elt of elements) {
+    const key = iterator(elt);
+    if (!vis.has(key)) {
+      vis.add(key);
+      filtered.push(elt);
     }
-    const entry = this.registry.load(moduleName, {
-      forceOriginal: opts.forceOriginal
-    });
-    return !opts.forceOriginal && typeof (entry == null ? void 0 : entry.getPlasmicComponent) === "function" ? entry.getPlasmicComponent() : entry.default;
-  }
-  hasComponent(spec) {
-    const compMeta = getFirstCompMeta(this.bundle.components, spec);
-    if (compMeta) {
-      return this.registry.hasModule(compMeta.entry);
-    }
-    return false;
-  }
-  getGlobalContexts() {
-    const customGlobalMetas = this.bundle.globalGroups.filter(
-      (m) => m.type === "global-user-defined"
-    );
-    return customGlobalMetas.map((meta) => ({
-      meta,
-      context: this.registry.load(meta.contextFile).default
-    }));
   }
-  getGlobalContextsProvider(spec) {
-    const compMeta = getFirstCompMeta(this.bundle.components, spec);
-    const projectMeta = compMeta ? this.bundle.projects.find((x) => x.id === compMeta.projectId) : void 0;
-    if (!projectMeta || !projectMeta.globalContextsProviderFileName || !this.registry.hasModule(projectMeta.globalContextsProviderFileName)) {
-      return void 0;
-    }
-    const entry = this.registry.load(
-      projectMeta.globalContextsProviderFileName
-    );
-    return typeof (entry == null ? void 0 : entry.getPlasmicComponent) === "function" ? entry.getPlasmicComponent() : entry.default;
-  }
-  getRootProvider() {
-    const entry = this.registry.load("root-provider.js");
-    return entry.default;
-  }
-  getCss() {
-    return this.bundle.modules.browser.filter(
-      (mod) => mod.type === "asset" && mod.fileName.endsWith("css")
-    );
-  }
-  getRemoteFonts() {
-    return this.bundle.projects.flatMap((p) => p.remoteFonts);
-  }
-};
-
-// src/PlasmicRootProvider.tsx
-var import_host = require("@plasmicapp/host");
-var import_query = require("@plasmicapp/query");
-var React2 = __toESM(require("react"));
+  return filtered;
+}
 
 // src/variation.ts
 function getPlasmicCookieValues() {
@@ -423,7 +364,7 @@ function PlasmicRootProvider(props) {
   } = props;
   const loader = props.loader.__internal;
   if (prefetchedData) {
-    loader.registerPrefetchedBundle(prefetchedData == null ? void 0 : prefetchedData.bundle);
+    loader.registerPrefetchedBundle(prefetchedData.bundle);
   }
   const [splits, setSplits] = React2.useState(loader.getActiveSplits());
   const forceUpdate = useForceUpdate();
@@ -440,6 +381,66 @@ function PlasmicRootProvider(props) {
     loader.subscribePlasmicRoot(watcher);
     return () => loader.unsubscribePlasmicRoot(watcher);
   }, [watcher, loader]);
+  const currentContextValue = React2.useContext(PlasmicRootContext);
+  const { user, userAuthToken, isUserLoading, authRedirectUri } = props;
+  const value = React2.useMemo(() => {
+    var _a, _b, _c;
+    const withCurrentContextValueFallback = (v, key) => {
+      return v !== void 0 ? v : currentContextValue == null ? void 0 : currentContextValue[key];
+    };
+    return {
+      globalVariants: [
+        ...mergeGlobalVariantsSpec(
+          globalVariants != null ? globalVariants : [],
+          getGlobalVariantsFromSplits(splits, variation != null ? variation : {})
+        ),
+        ...(_a = currentContextValue == null ? void 0 : currentContextValue.globalVariants) != null ? _a : []
+      ],
+      globalContextsProps: __spreadValues(__spreadValues({}, (_b = currentContextValue == null ? void 0 : currentContextValue.globalContextsProps) != null ? _b : {}), globalContextsProps != null ? globalContextsProps : {}),
+      loader: withCurrentContextValueFallback(loader, "loader"),
+      variation: __spreadValues(__spreadValues({}, (_c = currentContextValue == null ? void 0 : currentContextValue.variation) != null ? _c : {}), variation != null ? variation : {}),
+      translator: withCurrentContextValueFallback(translator, "translator"),
+      Head: withCurrentContextValueFallback(Head, "Head"),
+      Link: withCurrentContextValueFallback(Link, "Link"),
+      user: withCurrentContextValueFallback(user, "user"),
+      userAuthToken: withCurrentContextValueFallback(
+        userAuthToken,
+        "userAuthToken"
+      ),
+      isUserLoading: withCurrentContextValueFallback(
+        isUserLoading,
+        "isUserLoading"
+      ),
+      authRedirectUri: withCurrentContextValueFallback(
+        authRedirectUri,
+        "authRedirectUri"
+      ),
+      suspenseFallback: withCurrentContextValueFallback(
+        suspenseFallback,
+        "suspenseFallback"
+      ),
+      disableLoadingBoundary: withCurrentContextValueFallback(
+        disableLoadingBoundary,
+        "disableLoadingBoundary"
+      )
+    };
+  }, [
+    globalVariants,
+    variation,
+    globalContextsProps,
+    loader,
+    splits,
+    translator,
+    Head,
+    Link,
+    user,
+    userAuthToken,
+    isUserLoading,
+    authRedirectUri,
+    suspenseFallback,
+    disableLoadingBoundary,
+    currentContextValue
+  ]);
   React2.useEffect(() => {
     ensureVariationCookies(variation);
     loader.trackRender({
@@ -449,46 +450,9 @@ function PlasmicRootProvider(props) {
         teamIds: loader.getTeamIds(),
         projectIds: loader.getProjectIds()
       },
-      variation
+      variation: value.variation
     });
-  }, [loader, variation]);
-  const { user, userAuthToken, isUserLoading, authRedirectUri } = props;
-  const value = React2.useMemo(
-    () => ({
-      globalVariants: mergeGlobalVariantsSpec(
-        globalVariants != null ? globalVariants : [],
-        getGlobalVariantsFromSplits(splits, variation != null ? variation : {})
-      ),
-      globalContextsProps,
-      loader,
-      variation,
-      translator,
-      Head,
-      Link,
-      user,
-      userAuthToken,
-      isUserLoading,
-      authRedirectUri,
-      suspenseFallback,
-      disableLoadingBoundary
-    }),
-    [
-      globalVariants,
-      variation,
-      globalContextsProps,
-      loader,
-      splits,
-      translator,
-      Head,
-      Link,
-      user,
-      userAuthToken,
-      isUserLoading,
-      authRedirectUri,
-      suspenseFallback,
-      disableLoadingBoundary
-    ]
-  );
+  }, [loader, value]);
   const reactMajorVersion = +React2.version.split(".")[0];
   return /* @__PURE__ */ React2.createElement(
     import_query.PlasmicQueryDataProvider,
@@ -583,6 +547,11 @@ function createUseGlobalVariant(name, projectId) {
   };
 }
 
+// src/loader-shared.ts
+var import_loader_core2 = require("@plasmicapp/loader-core");
+var import_loader_fetcher = require("@plasmicapp/loader-fetcher");
+var import_loader_splits = require("@plasmicapp/loader-splits");
+
 // src/bundles.ts
 var import_loader_core = require("@plasmicapp/loader-core");
 function getUsedComps(allComponents, entryCompIds) {
@@ -697,11 +666,6 @@ function mergeBundles(target, from) {
       globalGroups: [...target.globalGroups, ...newGlobals]
     });
   }
-  const existingExternals = new Set(target.external);
-  const newExternals = target.external.filter((x) => !existingExternals.has(x));
-  if (newExternals.length > 0) {
-    target = __spreadProps(__spreadValues({}, target), { external: [...target.external, ...newExternals] });
-  }
   const existingSplitIds = new Set(target.activeSplits.map((s) => s.id));
   const newSplits = (_a = from.activeSplits.filter((s) => !existingSplitIds.has(s.id))) != null ? _a : [];
   if (newSplits.length > 0) {
@@ -719,9 +683,101 @@ var convertBundlesToComponentRenderData = (bundles, compMetas) => {
   return prepComponentData(mergedBundles, compMetas);
 };
 
-// src/loader-react-server.ts
-var ReactServerPlasmicComponentLoader = class {
+// src/component-lookup.ts
+function getFirstCompMeta(metas, lookup) {
+  const filtered = getCompMetas(metas, lookup);
+  return filtered.length === 0 ? void 0 : filtered[0];
+}
+var ComponentLookup = class {
+  constructor(bundle, registry) {
+    this.bundle = bundle;
+    this.registry = registry;
+  }
+  getComponentMeta(spec) {
+    const compMeta = getFirstCompMeta(this.bundle.components, spec);
+    return compMeta;
+  }
+  getComponent(spec, opts = {}) {
+    const compMeta = getFirstCompMeta(this.bundle.components, spec);
+    if (!compMeta) {
+      throw new Error(`Component not found: ${spec}`);
+    }
+    const moduleName = compMeta.entry;
+    if (!this.registry.hasModule(moduleName, opts)) {
+      throw new Error(`Component not yet fetched: ${compMeta.name}`);
+    }
+    const entry = this.registry.load(moduleName, {
+      forceOriginal: opts.forceOriginal
+    });
+    return !opts.forceOriginal && typeof (entry == null ? void 0 : entry.getPlasmicComponent) === "function" ? entry.getPlasmicComponent() : entry.default;
+  }
+  hasComponent(spec) {
+    const compMeta = getFirstCompMeta(this.bundle.components, spec);
+    if (compMeta) {
+      return this.registry.hasModule(compMeta.entry);
+    }
+    return false;
+  }
+  getGlobalContexts() {
+    const customGlobalMetas = this.bundle.globalGroups.filter(
+      (m) => m.type === "global-user-defined"
+    );
+    return customGlobalMetas.map((meta) => ({
+      meta,
+      context: this.registry.load(meta.contextFile).default
+    }));
+  }
+  getGlobalContextsProvider(spec) {
+    const compMeta = getFirstCompMeta(this.bundle.components, spec);
+    const projectMeta = compMeta ? this.bundle.projects.find((x) => x.id === compMeta.projectId) : void 0;
+    if (!projectMeta || !projectMeta.globalContextsProviderFileName || !this.registry.hasModule(projectMeta.globalContextsProviderFileName)) {
+      return void 0;
+    }
+    const entry = this.registry.load(
+      projectMeta.globalContextsProviderFileName
+    );
+    return typeof (entry == null ? void 0 : entry.getPlasmicComponent) === "function" ? entry.getPlasmicComponent() : entry.default;
+  }
+  getRootProvider() {
+    const entry = this.registry.load("root-provider.js");
+    return entry.default;
+  }
+  getCss() {
+    return this.bundle.modules.browser.filter(
+      (mod) => mod.type === "asset" && mod.fileName.endsWith("css")
+    );
+  }
+  getRemoteFonts() {
+    return this.bundle.projects.flatMap((p) => p.remoteFonts);
+  }
+};
+
+// src/loader-shared.ts
+var SUBSTITUTED_COMPONENTS = {};
+var REGISTERED_CODE_COMPONENT_HELPERS = {};
+var SUBSTITUTED_GLOBAL_VARIANT_HOOKS = {};
+var REGISTERED_CUSTOM_FUNCTIONS = {};
+function customFunctionImportAlias(meta) {
+  const customFunctionPrefix = `__fn_`;
+  return meta.namespace ? `${customFunctionPrefix}${meta.namespace}__${meta.name}` : `${customFunctionPrefix}${meta.name}`;
+}
+function parseFetchComponentDataArgs(...args) {
+  let specs;
+  let opts;
+  if (Array.isArray(args[0])) {
+    specs = args[0];
+    opts = args[1];
+  } else {
+    specs = args;
+    opts = void 0;
+  }
+  return { specs, opts };
+}
+var BaseInternalPlasmicComponentLoader = class {
   constructor(args) {
+    this.registry = new import_loader_core2.Registry();
+    this.globalVariants = [];
+    this.subs = [];
     this.bundle = {
       modules: {
         browser: [],
@@ -729,7 +785,6 @@ var ReactServerPlasmicComponentLoader = class {
       },
       components: [],
       globalGroups: [],
-      external: [],
       projects: [],
       activeSplits: [],
       bundleKey: null,
@@ -740,6 +795,7 @@ var ReactServerPlasmicComponentLoader = class {
     this.tracker = args.tracker;
     this.onBundleMerged = args.onBundleMerged;
     this.onBundleFetched = args.onBundleFetched;
+    this.registerModules(args.builtinModules);
   }
   maybeGetCompMetas(...specs) {
     const found = /* @__PURE__ */ new Set();
@@ -842,11 +898,50 @@ var ReactServerPlasmicComponentLoader = class {
       return bundle;
     });
   }
-  mergeBundle(bundle) {
-    var _a, _b;
-    this.bundle = bundle;
-    this.bundle.bundleKey = (_a = this.bundle.bundleKey) != null ? _a : null;
-    (_b = this.onBundleMerged) == null ? void 0 : _b.call(this);
+  mergeBundle(newBundle) {
+    var _a, _b, _c, _d, _e;
+    newBundle.bundleKey = (_a = newBundle.bundleKey) != null ? _a : null;
+    if (newBundle.bundleKey && this.bundle.bundleKey && newBundle.bundleKey !== this.bundle.bundleKey) {
+      console.warn(
+        `Plasmic Error: Different code export hashes. This can happen if your app is using different loaders with different project IDs or project versions.
+Conflicting values:
+${newBundle.bundleKey}
+${this.bundle.bundleKey}`
+      );
+    }
+    const bundles = [this.bundle, newBundle];
+    this.bundle = {
+      activeSplits: uniqBy(
+        bundles.flatMap((bundle) => bundle.activeSplits),
+        (split) => split.id
+      ),
+      components: uniqBy(
+        bundles.flatMap((bundle) => bundle.components),
+        (c) => c.id
+      ),
+      globalGroups: uniqBy(
+        bundles.flatMap((bundle) => bundle.globalGroups),
+        (g) => g.id
+      ),
+      modules: {
+        browser: uniqBy(
+          bundles.flatMap((bundle) => bundle.modules.browser),
+          (m) => m.fileName
+        ),
+        server: uniqBy(
+          bundles.flatMap((bundle) => bundle.modules.server),
+          (m) => m.fileName
+        )
+      },
+      projects: uniqBy(
+        bundles.flatMap((bundle) => bundle.projects),
+        (p) => p.id
+      ),
+      // Avoid `undefined` as it cannot be serialized as JSON
+      bundleKey: (_c = (_b = newBundle.bundleKey) != null ? _b : this.bundle.bundleKey) != null ? _c : null,
+      deferChunksByDefault: (_d = newBundle.deferChunksByDefault) != null ? _d : false
+    };
+    (_e = this.onBundleMerged) == null ? void 0 : _e.call(this);
   }
   getBundle() {
     return this.bundle;
@@ -859,89 +954,12 @@ var ReactServerPlasmicComponentLoader = class {
       },
       components: [],
       globalGroups: [],
-      external: [],
       projects: [],
       activeSplits: [],
       bundleKey: null,
       deferChunksByDefault: false
     };
-  }
-};
-function parseFetchComponentDataArgs(...args) {
-  let specs;
-  let opts;
-  if (Array.isArray(args[0])) {
-    specs = args[0];
-    opts = args[1];
-  } else {
-    specs = args;
-    opts = void 0;
-  }
-  return { specs, opts };
-}
-
-// src/loader.ts
-var SUBSTITUTED_COMPONENTS = {};
-var REGISTERED_CODE_COMPONENT_HELPERS = {};
-var SUBSTITUTED_GLOBAL_VARIANT_HOOKS = {};
-var REGISTERED_CUSTOM_FUNCTIONS = {};
-function customFunctionImportAlias(meta) {
-  const customFunctionPrefix = `__fn_`;
-  return meta.namespace ? `${customFunctionPrefix}${meta.namespace}__${meta.name}` : `${customFunctionPrefix}${meta.name}`;
-}
-var InternalPlasmicComponentLoader = class {
-  constructor(opts) {
-    this.opts = opts;
-    this.registry = new import_loader_core2.Registry();
-    this.subs = [];
-    this.roots = [];
-    this.globalVariants = [];
-    this.tracker = new import_loader_core2.PlasmicTracker({
-      projectIds: opts.projects.map((p) => p.id),
-      platform: opts.platform,
-      preview: opts.preview,
-      nativeFetch: opts.nativeFetch
-    });
-    this.reactServerLoader = new ReactServerPlasmicComponentLoader({
-      opts,
-      fetcher: new import_loader_core2.PlasmicModulesFetcher(opts),
-      tracker: this.tracker,
-      onBundleMerged: () => {
-        this.refreshRegistry();
-      },
-      onBundleFetched: () => {
-        this.roots.forEach((watcher) => {
-          var _a;
-          return (_a = watcher.onDataFetched) == null ? void 0 : _a.call(watcher);
-        });
-      }
-    });
-    this.registerModules({
-      react: import_react.default,
-      "react-dom": import_react_dom.default,
-      "react/jsx-runtime": jsxRuntime,
-      "react/jsx-dev-runtime": jsxDevRuntime,
-      // Also inject @plasmicapp/query and @plasmicapp/host to use the
-      // same contexts here and in loader-downloaded code.
-      "@plasmicapp/query": PlasmicQuery,
-      "@plasmicapp/data-sources-context": PlasmicDataSourcesContext,
-      "@plasmicapp/host": PlasmicHost,
-      "@plasmicapp/loader-runtime-registry": {
-        components: SUBSTITUTED_COMPONENTS,
-        globalVariantHooks: SUBSTITUTED_GLOBAL_VARIANT_HOOKS,
-        codeComponentHelpers: REGISTERED_CODE_COMPONENT_HELPERS,
-        functions: REGISTERED_CUSTOM_FUNCTIONS
-      }
-    });
-  }
-  getBundle() {
-    return this.reactServerLoader.getBundle();
-  }
-  setGlobalVariants(globalVariants) {
-    this.globalVariants = globalVariants;
-  }
-  getGlobalVariants() {
-    return this.globalVariants;
+    this.registry.clear();
   }
   registerModules(modules) {
     if (Object.keys(modules).some(
@@ -962,112 +980,56 @@ var InternalPlasmicComponentLoader = class {
     this.internalSubstituteComponent(component, name, void 0);
   }
   internalSubstituteComponent(component, name, codeComponentHelpers) {
-    if (!this.registry.isEmpty()) {
+    if (!this.isRegistryEmpty()) {
       console.warn(
         "Calling PlasmicComponentLoader.registerSubstitution() after Plasmic component has rendered; starting over."
       );
-      this.registry.clear();
+      this.clearRegistry();
     }
     this.subs.push({ lookup: name, component, codeComponentHelpers });
   }
-  registerComponent(component, meta) {
-    var _a, _b;
-    const stateHelpers = Object.fromEntries(
-      Object.entries((_a = meta.states) != null ? _a : {}).filter(
-        ([_, stateSpec]) => Object.keys(stateSpec).some((key) => import_host2.stateHelpersKeys.includes(key))
-      ).map(([stateName, stateSpec]) => [
-        stateName,
-        Object.fromEntries(
-          import_host2.stateHelpersKeys.filter((key) => key in stateSpec).map((key) => [key, stateSpec[key]])
-        )
-      ])
-    );
-    const helpers = { states: stateHelpers };
-    this.internalSubstituteComponent(
-      component,
-      { name: meta.name, isCode: true },
-      Object.keys(stateHelpers).length > 0 ? helpers : void 0
-    );
-    (0, import_host2.registerComponent)(component, __spreadValues(__spreadProps(__spreadValues({}, meta), {
-      // Import path is not used as we will use component substitution
-      importPath: (_b = meta.importPath) != null ? _b : ""
-    }), Object.keys(stateHelpers).length > 0 ? {
-      componentHelpers: {
-        helpers,
-        importPath: "",
-        importName: ""
-      }
-    } : {}));
+  refreshRegistry() {
+    for (const sub of this.subs) {
+      const metas = getCompMetas(this.getBundle().components, sub.lookup);
+      metas.forEach((meta) => {
+        SUBSTITUTED_COMPONENTS[meta.id] = sub.component;
+        if (sub.codeComponentHelpers) {
+          REGISTERED_CODE_COMPONENT_HELPERS[meta.id] = sub.codeComponentHelpers;
+        }
+      });
+    }
+    this.registry.updateModules(this.getBundle());
   }
-  registerFunction(fn, meta) {
-    var _a;
-    (0, import_host2.registerFunction)(fn, __spreadProps(__spreadValues({}, meta), {
-      importPath: (_a = meta.importPath) != null ? _a : ""
-    }));
-    REGISTERED_CUSTOM_FUNCTIONS[customFunctionImportAlias(meta)] = fn;
+  isRegistryEmpty() {
+    return this.registry.isEmpty();
   }
-  registerGlobalContext(context, meta) {
-    var _a;
-    this.substituteComponent(context, { name: meta.name, isCode: true });
-    (0, import_host2.registerGlobalContext)(context, __spreadProps(__spreadValues({}, meta), {
-      importPath: (_a = meta.importPath) != null ? _a : ""
-    }));
+  clearRegistry() {
+    this.registry.clear();
   }
-  registerTrait(trait, meta) {
-    (0, import_host2.registerTrait)(trait, meta);
+  setGlobalVariants(globalVariants) {
+    this.globalVariants = globalVariants;
   }
-  registerToken(token) {
-    (0, import_host2.registerToken)(token);
+  getGlobalVariants() {
+    return this.globalVariants;
   }
   registerPrefetchedBundle(bundle) {
     if (!isBrowser) {
       const cachedBundle = (0, import_loader_fetcher.internal_getCachedBundleInNodeServer)(this.opts);
       if (cachedBundle) {
-        this.reactServerLoader.mergeBundle(cachedBundle);
+        this.mergeBundle(cachedBundle);
       }
     }
-    this.reactServerLoader.mergeBundle(bundle);
-  }
-  subscribePlasmicRoot(watcher) {
-    this.roots.push(watcher);
-  }
-  unsubscribePlasmicRoot(watcher) {
-    const index = this.roots.indexOf(watcher);
-    if (index >= 0) {
-      this.roots.splice(index, 1);
-    }
-  }
-  clearCache() {
-    this.reactServerLoader.clearCache();
-    this.registry.clear();
+    this.mergeBundle(bundle);
   }
   getLookup() {
     return new ComponentLookup(this.getBundle(), this.registry);
   }
-  maybeFetchComponentData(...args) {
-    return this.reactServerLoader.maybeFetchComponentData(...args);
-  }
-  fetchComponentData(...args) {
-    return this.reactServerLoader.fetchComponentData(...args);
-  }
-  fetchPages(opts) {
-    return this.reactServerLoader.fetchPages(opts);
-  }
-  fetchComponents() {
-    return this.reactServerLoader.fetchComponents();
-  }
-  getActiveSplits() {
-    return this.reactServerLoader.getActiveSplits();
-  }
-  getChunksUrl(bundle, modules) {
-    return this.reactServerLoader.getChunksUrl(bundle, modules);
-  }
   trackConversion(value = 0) {
     this.tracker.trackConversion(value);
   }
   getActiveVariation(opts) {
     return __async(this, null, function* () {
-      yield this.reactServerLoader.fetchComponents();
+      yield this.fetchComponents();
       return (0, import_loader_splits.getActiveVariation)(__spreadProps(__spreadValues({}, opts), {
         splits: this.getBundle().activeSplits
       }));
@@ -1090,23 +1052,6 @@ var InternalPlasmicComponentLoader = class {
   trackRender(opts) {
     this.tracker.trackRender(opts);
   }
-  refreshRegistry() {
-    for (const sub of this.subs) {
-      const metas = getCompMetas(this.getBundle().components, sub.lookup);
-      metas.forEach((meta) => {
-        SUBSTITUTED_COMPONENTS[meta.id] = sub.component;
-        if (sub.codeComponentHelpers) {
-          REGISTERED_CODE_COMPONENT_HELPERS[meta.id] = sub.codeComponentHelpers;
-        }
-      });
-    }
-    for (const globalGroup of this.getBundle().globalGroups) {
-      if (globalGroup.type !== "global-screen") {
-        SUBSTITUTED_GLOBAL_VARIANT_HOOKS[globalGroup.id] = createUseGlobalVariant(globalGroup.name, globalGroup.projectId);
-      }
-    }
-    this.registry.updateModules(this.getBundle());
-  }
 };
 var PlasmicComponentLoader = class {
   constructor(internal) {
@@ -1226,9 +1171,118 @@ var PlasmicComponentLoader = class {
   }
 };
 
+// src/loader-client.ts
+var InternalPlasmicComponentLoader = class extends BaseInternalPlasmicComponentLoader {
+  constructor(opts) {
+    const tracker = new import_loader_core3.PlasmicTracker({
+      projectIds: opts.projects.map((p) => p.id),
+      platform: opts.platform,
+      preview: opts.preview,
+      nativeFetch: opts.nativeFetch
+    });
+    super({
+      opts,
+      tracker,
+      fetcher: new import_loader_core3.PlasmicModulesFetcher(opts),
+      onBundleMerged: () => {
+        this.refreshRegistry();
+      },
+      onBundleFetched: () => {
+        this.roots.forEach((watcher) => {
+          var _a;
+          return (_a = watcher.onDataFetched) == null ? void 0 : _a.call(watcher);
+        });
+      },
+      builtinModules: {
+        react: import_react.default,
+        "react-dom": import_react_dom.default,
+        "react/jsx-runtime": jsxRuntime,
+        "react/jsx-dev-runtime": jsxDevRuntime,
+        // Also inject @plasmicapp/query and @plasmicapp/host to use the
+        // same contexts here and in loader-downloaded code.
+        "@plasmicapp/query": PlasmicQuery,
+        "@plasmicapp/data-sources-context": PlasmicDataSourcesContext,
+        "@plasmicapp/host": PlasmicHost,
+        "@plasmicapp/loader-runtime-registry": {
+          components: SUBSTITUTED_COMPONENTS,
+          globalVariantHooks: SUBSTITUTED_GLOBAL_VARIANT_HOOKS,
+          codeComponentHelpers: REGISTERED_CODE_COMPONENT_HELPERS,
+          functions: REGISTERED_CUSTOM_FUNCTIONS
+        }
+      }
+    });
+    this.roots = [];
+  }
+  registerComponent(component, meta) {
+    var _a, _b;
+    const stateHelpers = Object.fromEntries(
+      Object.entries((_a = meta.states) != null ? _a : {}).filter(
+        ([_, stateSpec]) => Object.keys(stateSpec).some((key) => import_host2.stateHelpersKeys.includes(key))
+      ).map(([stateName, stateSpec]) => [
+        stateName,
+        Object.fromEntries(
+          import_host2.stateHelpersKeys.filter((key) => key in stateSpec).map((key) => [key, stateSpec[key]])
+        )
+      ])
+    );
+    const helpers = { states: stateHelpers };
+    this.internalSubstituteComponent(
+      component,
+      { name: meta.name, isCode: true },
+      Object.keys(stateHelpers).length > 0 ? helpers : void 0
+    );
+    (0, import_host2.registerComponent)(component, __spreadValues(__spreadProps(__spreadValues({}, meta), {
+      // Import path is not used as we will use component substitution
+      importPath: (_b = meta.importPath) != null ? _b : ""
+    }), Object.keys(stateHelpers).length > 0 ? {
+      componentHelpers: {
+        helpers,
+        importPath: "",
+        importName: ""
+      }
+    } : {}));
+  }
+  registerFunction(fn, meta) {
+    var _a;
+    (0, import_host2.registerFunction)(fn, __spreadProps(__spreadValues({}, meta), {
+      importPath: (_a = meta.importPath) != null ? _a : ""
+    }));
+    REGISTERED_CUSTOM_FUNCTIONS[customFunctionImportAlias(meta)] = fn;
+  }
+  registerGlobalContext(context, meta) {
+    var _a;
+    this.substituteComponent(context, { name: meta.name, isCode: true });
+    (0, import_host2.registerGlobalContext)(context, __spreadProps(__spreadValues({}, meta), {
+      importPath: (_a = meta.importPath) != null ? _a : ""
+    }));
+  }
+  registerTrait(trait, meta) {
+    (0, import_host2.registerTrait)(trait, meta);
+  }
+  registerToken(token) {
+    (0, import_host2.registerToken)(token);
+  }
+  subscribePlasmicRoot(watcher) {
+    this.roots.push(watcher);
+  }
+  unsubscribePlasmicRoot(watcher) {
+    const index = this.roots.indexOf(watcher);
+    if (index >= 0) {
+      this.roots.splice(index, 1);
+    }
+  }
+  refreshRegistry() {
+    for (const globalGroup of this.getBundle().globalGroups) {
+      if (globalGroup.type !== "global-screen") {
+        SUBSTITUTED_GLOBAL_VARIANT_HOOKS[globalGroup.id] = createUseGlobalVariant(globalGroup.name, globalGroup.projectId);
+      }
+    }
+    super.refreshRegistry();
+  }
+};
+
 // src/index.ts
 var import_host3 = require("@plasmicapp/host");
-var import_prepass2 = require("@plasmicapp/prepass");
 var import_query2 = require("@plasmicapp/query");
 
 // src/PlasmicComponent.tsx
@@ -1316,7 +1370,7 @@ function PlasmicComponent(props) {
     if (!Component) {
       return null;
     }
-    let element2 = /* @__PURE__ */ React5.createElement(Component, __spreadValues({}, componentProps));
+    let elt = /* @__PURE__ */ React5.createElement(Component, __spreadValues({}, componentProps));
     if (isRootLoader) {
       const lookup = loader.getLookup();
       const ReactWebRootProvider = lookup.getRootProvider();
@@ -1324,7 +1378,7 @@ function PlasmicComponent(props) {
         name: component,
         projectId
       });
-      element2 = /* @__PURE__ */ React5.createElement(
+      elt = /* @__PURE__ */ React5.createElement(
         ReactWebRootProvider,
         __spreadProps(__spreadValues({}, rest), {
           userAuthToken,
@@ -1341,11 +1395,11 @@ function PlasmicComponent(props) {
             cond: !!GlobalContextsProvider,
             wrapper: (children) => /* @__PURE__ */ React5.createElement(GlobalContextsProvider, __spreadValues({}, globalContextsProps), children)
           },
-          /* @__PURE__ */ React5.createElement(PlasmicComponentContext.Provider, { value: true }, element2)
+          /* @__PURE__ */ React5.createElement(PlasmicComponentContext.Provider, { value: true }, elt)
         )
       );
     }
-    return element2;
+    return elt;
   }, [
     Component,
     componentProps,
@@ -1362,11 +1416,20 @@ function PlasmicComponent(props) {
   return element;
 }
 
+// src/prepass-client.ts
+var import_prepass = require("@plasmicapp/prepass");
+function extractPlasmicQueryData(element) {
+  return (0, import_prepass.extractPlasmicQueryData)(element);
+}
+function plasmicPrepass(element) {
+  return (0, import_prepass.plasmicPrepass)(element);
+}
+
 // src/render.tsx
+var import_prepass2 = require("@plasmicapp/prepass");
 var import_react2 = __toESM(require("react"));
 var import_react_dom2 = __toESM(require("react-dom"));
 var import_server = require("react-dom/server");
-var import_prepass = require("@plasmicapp/prepass");
 function renderToElement(_0, _1, _2) {
   return __async(this, arguments, function* (loader, target, lookup, opts = {}) {
     return new Promise((resolve) => {
@@ -1382,7 +1445,7 @@ function renderToString(loader, lookup, opts = {}) {
 function extractPlasmicQueryDataFromElement(_0, _1) {
   return __async(this, arguments, function* (loader, lookup, opts = {}) {
     const element = makeElement(loader, lookup, opts);
-    return (0, import_prepass.extractPlasmicQueryData)(element);
+    return (0, import_prepass2.extractPlasmicQueryData)(element);
   });
 }
 function hydrateFromElement(_0, _1, _2) {