@plasmicapp/loader-react 1.0.205 → 1.0.206

package/dist/loader-react.esm.js

@@ -1,12 +1,12 @@
+'use client';import * as PlasmicDataSourcesContext from '@plasmicapp/data-sources-context';
 import * as PlasmicHost from '@plasmicapp/host';
 import { PageParamsProvider, registerComponent, registerGlobalContext, registerTrait } from '@plasmicapp/host';
 export { DataCtxReader, DataProvider, PageParamsProvider, PlasmicCanvasContext, PlasmicCanvasHost, repeatedElement, useDataEnv, usePlasmicCanvasContext, useSelector, useSelectors } from '@plasmicapp/host';
+import { getBundleSubset, Registry, PlasmicTracker, PlasmicModulesFetcher } from '@plasmicapp/loader-core';
+import { getExternalIds, getActiveVariation } from '@plasmicapp/loader-splits';
 import * as PlasmicQuery from '@plasmicapp/query';
 import { PlasmicQueryDataProvider, PlasmicPrepassContext } from '@plasmicapp/query';
 export { usePlasmicQueryData } from '@plasmicapp/query';
-import { getBundleSubset, Registry, PlasmicModulesFetcher, PlasmicTracker } from '@plasmicapp/loader-core';
-import * as PlasmicDataSourcesContext from '@plasmicapp/data-sources-context';
-import { getExternalIds, getActiveVariation } from '@plasmicapp/loader-splits';
 import React__default, { useState, useCallback, useEffect, useRef, useMemo, createElement, memo, useContext, createContext } from 'react';
 import ReactDOM from 'react-dom';
 import * as jsxDevRuntime from 'react/jsx-dev-runtime';
@@ -116,158 +116,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function getUsedComps(allComponents, entryCompIds) {
-  var q = [].concat(entryCompIds);
-  var seenIds = new Set(entryCompIds);
-  var componentMetaById = new Map(allComponents.map(function (meta) {
-    return [meta.id, meta];
-  }));
-  var usedComps = [];
-  while (q.length > 0) {
-    var _q$splice = q.splice(0, 1),
-      id = _q$splice[0];
-    var meta = componentMetaById.get(id);
-    if (!meta) {
-      continue;
-    }
-    usedComps.push(meta);
-    meta.usedComponents.forEach(function (usedCompId) {
-      if (!seenIds.has(usedCompId)) {
-        seenIds.add(usedCompId);
-        q.push(usedCompId);
-      }
-    });
-  }
-  return usedComps;
-}
-function prepComponentData(bundle, compMetas, opts) {
-  if (compMetas.length === 0) {
-    return {
-      entryCompMetas: bundle.components,
-      bundle: bundle,
-      remoteFontUrls: []
-    };
-  }
-  var usedComps = getUsedComps(bundle.components, compMetas.map(function (compMeta) {
-    return compMeta.id;
-  }));
-  var compPaths = usedComps.map(function (compMeta) {
-    return compMeta.entry;
-  });
-  var subBundle = getBundleSubset(bundle, ['entrypoint.css'].concat(compPaths, ['root-provider.js'], bundle.projects.map(function (x) {
-    return x.globalContextsProviderFileName;
-  }).filter(function (x) {
-    return !!x;
-  }), bundle.components.filter(function (c) {
-    return c.isGlobalContextProvider;
-  }).map(function (c) {
-    return c.entry;
-  }), bundle.globalGroups.map(function (g) {
-    return g.contextFile;
-  })), opts);
-  var remoteFontUrls = [];
-  subBundle.projects.forEach(function (p) {
-    return remoteFontUrls.push.apply(remoteFontUrls, p.remoteFonts.map(function (f) {
-      return f.url;
-    }));
-  });
-  return {
-    entryCompMetas: compMetas,
-    bundle: subBundle,
-    remoteFontUrls: remoteFontUrls
-  };
-}
-function mergeBundles(target, from) {
-  var _from$activeSplits$fi;
-  var existingCompIds = new Set(target.components.map(function (c) {
-    return c.id;
-  }));
-  var newCompMetas = from.components.filter(function (m) {
-    return !existingCompIds.has(m.id);
-  });
-  if (newCompMetas.length > 0) {
-    target = _extends({}, target, {
-      components: [].concat(target.components, newCompMetas)
-    });
-  }
-  var existingProjects = new Set(target.projects.map(function (p) {
-    return p.id;
-  }));
-  var newProjects = from.projects.filter(function (p) {
-    return !existingProjects.has(p.id);
-  });
-  if (newProjects.length > 0) {
-    target = _extends({}, target, {
-      projects: [].concat(target.projects, newProjects)
-    });
-  }
-  var existingModules = {
-    browser: new Set(target.modules.browser.map(function (m) {
-      return m.fileName;
-    })),
-    server: new Set(target.modules.server.map(function (m) {
-      return m.fileName;
-    }))
-  };
-  var newModules = {
-    browser: from.modules.browser.filter(function (m) {
-      return !existingModules.browser.has(m.fileName);
-    }),
-    server: from.modules.server.filter(function (m) {
-      return !existingModules.server.has(m.fileName);
-    })
-  };
-  if (newModules.browser.length > 0 || newModules.server.length > 0) {
-    target = _extends({}, target, {
-      modules: {
-        browser: [].concat(target.modules.browser, newModules.browser),
-        server: [].concat(target.modules.server, newModules.server)
-      }
-    });
-  }
-  var existingGlobalIds = new Set(target.globalGroups.map(function (g) {
-    return g.id;
-  }));
-  var newGlobals = from.globalGroups.filter(function (g) {
-    return !existingGlobalIds.has(g.id);
-  });
-  if (newGlobals.length > 0) {
-    target = _extends({}, target, {
-      globalGroups: [].concat(target.globalGroups, newGlobals)
-    });
-  }
-  var existingExternals = new Set(target.external);
-  var newExternals = target.external.filter(function (x) {
-    return !existingExternals.has(x);
-  });
-  if (newExternals.length > 0) {
-    target = _extends({}, target, {
-      external: [].concat(target.external, newExternals)
-    });
-  }
-  var existingSplitIds = new Set(target.activeSplits.map(function (s) {
-    return s.id;
-  }));
-  var newSplits = (_from$activeSplits$fi = from.activeSplits.filter(function (s) {
-    return !existingSplitIds.has(s.id);
-  })) != null ? _from$activeSplits$fi : [];
-  if (newSplits.length > 0) {
-    target = _extends({}, target, {
-      activeSplits: [].concat(target.activeSplits, newSplits)
-    });
-  }
-  return target;
-}
-var convertBundlesToComponentRenderData = function convertBundlesToComponentRenderData(bundles, compMetas) {
-  if (bundles.length === 0) {
-    return null;
-  }
-  var mergedBundles = bundles.reduce(function (prev, cur) {
-    return mergeBundles(prev, cur);
-  });
-  return prepComponentData(mergedBundles, compMetas);
-};
-
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -926,6 +774,7 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   }
 });
 
+var isBrowser = typeof window !== 'undefined';
 function useForceUpdate() {
   var _React$useState = useState(0),
     setTick = _React$useState[1];
@@ -1409,125 +1258,161 @@ function createUseGlobalVariant(name, projectId) {
   };
 }
 
-var isBrowser = typeof window !== 'undefined';
-function initPlasmicLoader(opts) {
-  var internal = new InternalPlasmicComponentLoader(opts);
-  return new PlasmicComponentLoader(internal);
-}
-var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
-  function InternalPlasmicComponentLoader(opts) {
-    this.opts = opts;
-    this.subs = [];
-    this.roots = [];
-    this.globalVariants = [];
-    this.bundle = {
-      modules: {
-        browser: [],
-        server: []
-      },
-      components: [],
-      globalGroups: [],
-      external: [],
-      projects: [],
-      activeSplits: []
-    };
-    this.substitutedComponents = {};
-    this.substitutedGlobalVariantHooks = {};
-    this.registry = Registry.getInstance();
-    this.fetcher = new PlasmicModulesFetcher(opts);
-    this.tracker = new PlasmicTracker({
-      projectIds: opts.projects.map(function (p) {
-        return p.id;
-      }),
-      platform: opts.platform,
-      preview: opts.preview
-    });
-    this.registerModules({
-      react: React__default,
-      'react-dom': ReactDOM,
-      '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: this.substitutedComponents,
-        globalVariantHooks: this.substitutedGlobalVariantHooks
+function getUsedComps(allComponents, entryCompIds) {
+  var q = [].concat(entryCompIds);
+  var seenIds = new Set(entryCompIds);
+  var componentMetaById = new Map(allComponents.map(function (meta) {
+    return [meta.id, meta];
+  }));
+  var usedComps = [];
+  while (q.length > 0) {
+    var _q$splice = q.splice(0, 1),
+      id = _q$splice[0];
+    var meta = componentMetaById.get(id);
+    if (!meta) {
+      continue;
+    }
+    usedComps.push(meta);
+    meta.usedComponents.forEach(function (usedCompId) {
+      if (!seenIds.has(usedCompId)) {
+        seenIds.add(usedCompId);
+        q.push(usedCompId);
       }
     });
   }
-  var _proto = InternalPlasmicComponentLoader.prototype;
-  _proto.setGlobalVariants = function setGlobalVariants(globalVariants) {
-    this.globalVariants = globalVariants;
-  };
-  _proto.getGlobalVariants = function getGlobalVariants() {
-    return this.globalVariants;
-  };
-  _proto.registerModules = function registerModules(modules) {
-    var _this = this;
-    if (Object.keys(modules).some(function (name) {
-      return _this.registry.getRegisteredModule(name) !== modules[name];
-    })) {
-      if (!this.registry.isEmpty()) {
-        console.warn('Calling PlasmicComponentLoader.registerModules() after Plasmic component has rendered; starting over.');
-        this.registry.clear();
-      }
-      for (var _i = 0, _Object$keys = Object.keys(modules); _i < _Object$keys.length; _i++) {
-        var key = _Object$keys[_i];
-        this.registry.register(key, modules[key]);
-      }
-    }
-  };
-  _proto.substituteComponent = function substituteComponent(component, name) {
-    if (!this.registry.isEmpty()) {
-      console.warn('Calling PlasmicComponentLoader.registerSubstitution() after Plasmic component has rendered; starting over.');
-      this.registry.clear();
-    }
-    this.subs.push({
-      lookup: name,
-      component: component
-    });
-  };
-  _proto.registerComponent = function registerComponent$1(component, meta) {
-    var _meta$importPath;
-    this.substituteComponent(component, {
-      name: meta.name,
-      isCode: true
-    });
-    // Import path is not used as we will use component substitution
-    registerComponent(component, _extends({}, meta, {
-      importPath: (_meta$importPath = meta.importPath) != null ? _meta$importPath : ''
+  return usedComps;
+}
+function prepComponentData(bundle, compMetas, opts) {
+  if (compMetas.length === 0) {
+    return {
+      entryCompMetas: bundle.components,
+      bundle: bundle,
+      remoteFontUrls: []
+    };
+  }
+  var usedComps = getUsedComps(bundle.components, compMetas.map(function (compMeta) {
+    return compMeta.id;
+  }));
+  var compPaths = usedComps.map(function (compMeta) {
+    return compMeta.entry;
+  });
+  var subBundle = getBundleSubset(bundle, ['entrypoint.css'].concat(compPaths, ['root-provider.js'], bundle.projects.map(function (x) {
+    return x.globalContextsProviderFileName;
+  }).filter(function (x) {
+    return !!x;
+  }), bundle.components.filter(function (c) {
+    return c.isGlobalContextProvider;
+  }).map(function (c) {
+    return c.entry;
+  }), bundle.globalGroups.map(function (g) {
+    return g.contextFile;
+  })), opts);
+  var remoteFontUrls = [];
+  subBundle.projects.forEach(function (p) {
+    return remoteFontUrls.push.apply(remoteFontUrls, p.remoteFonts.map(function (f) {
+      return f.url;
     }));
+  });
+  return {
+    entryCompMetas: compMetas,
+    bundle: subBundle,
+    remoteFontUrls: remoteFontUrls
   };
-  _proto.registerGlobalContext = function registerGlobalContext$1(context, meta) {
-    var _meta$importPath2;
-    this.substituteComponent(context, {
-      name: meta.name,
-      isCode: true
+}
+function mergeBundles(target, from) {
+  var _from$activeSplits$fi;
+  var existingCompIds = new Set(target.components.map(function (c) {
+    return c.id;
+  }));
+  var newCompMetas = from.components.filter(function (m) {
+    return !existingCompIds.has(m.id);
+  });
+  if (newCompMetas.length > 0) {
+    target = _extends({}, target, {
+      components: [].concat(target.components, newCompMetas)
     });
-    // Import path is not used as we will use component substitution
-    registerGlobalContext(context, _extends({}, meta, {
-      importPath: (_meta$importPath2 = meta.importPath) != null ? _meta$importPath2 : ''
-    }));
-  };
-  _proto.registerTrait = function registerTrait$1(trait, meta) {
-    registerTrait(trait, meta);
-  };
-  _proto.registerPrefetchedBundle = function registerPrefetchedBundle(bundle) {
-    this.mergeBundle(bundle);
-  };
-  _proto.subscribePlasmicRoot = function subscribePlasmicRoot(watcher) {
-    this.roots.push(watcher);
+  }
+  var existingProjects = new Set(target.projects.map(function (p) {
+    return p.id;
+  }));
+  var newProjects = from.projects.filter(function (p) {
+    return !existingProjects.has(p.id);
+  });
+  if (newProjects.length > 0) {
+    target = _extends({}, target, {
+      projects: [].concat(target.projects, newProjects)
+    });
+  }
+  var existingModules = {
+    browser: new Set(target.modules.browser.map(function (m) {
+      return m.fileName;
+    })),
+    server: new Set(target.modules.server.map(function (m) {
+      return m.fileName;
+    }))
   };
-  _proto.unsubscribePlasmicRoot = function unsubscribePlasmicRoot(watcher) {
-    var index = this.roots.indexOf(watcher);
-    if (index >= 0) {
-      this.roots.splice(index, 1);
-    }
+  var newModules = {
+    browser: from.modules.browser.filter(function (m) {
+      return !existingModules.browser.has(m.fileName);
+    }),
+    server: from.modules.server.filter(function (m) {
+      return !existingModules.server.has(m.fileName);
+    })
   };
-  _proto.clearCache = function clearCache() {
+  if (newModules.browser.length > 0 || newModules.server.length > 0) {
+    target = _extends({}, target, {
+      modules: {
+        browser: [].concat(target.modules.browser, newModules.browser),
+        server: [].concat(target.modules.server, newModules.server)
+      }
+    });
+  }
+  var existingGlobalIds = new Set(target.globalGroups.map(function (g) {
+    return g.id;
+  }));
+  var newGlobals = from.globalGroups.filter(function (g) {
+    return !existingGlobalIds.has(g.id);
+  });
+  if (newGlobals.length > 0) {
+    target = _extends({}, target, {
+      globalGroups: [].concat(target.globalGroups, newGlobals)
+    });
+  }
+  var existingExternals = new Set(target.external);
+  var newExternals = target.external.filter(function (x) {
+    return !existingExternals.has(x);
+  });
+  if (newExternals.length > 0) {
+    target = _extends({}, target, {
+      external: [].concat(target.external, newExternals)
+    });
+  }
+  var existingSplitIds = new Set(target.activeSplits.map(function (s) {
+    return s.id;
+  }));
+  var newSplits = (_from$activeSplits$fi = from.activeSplits.filter(function (s) {
+    return !existingSplitIds.has(s.id);
+  })) != null ? _from$activeSplits$fi : [];
+  if (newSplits.length > 0) {
+    target = _extends({}, target, {
+      activeSplits: [].concat(target.activeSplits, newSplits)
+    });
+  }
+  return target;
+}
+var convertBundlesToComponentRenderData = function convertBundlesToComponentRenderData(bundles, compMetas) {
+  if (bundles.length === 0) {
+    return null;
+  }
+  var mergedBundles = bundles.reduce(function (prev, cur) {
+    return mergeBundles(prev, cur);
+  });
+  return prepComponentData(mergedBundles, compMetas);
+};
+
+/** Subset of loader functionality that works on React Server Components. */
+var ReactServerPlasmicComponentLoader = /*#__PURE__*/function () {
+  function ReactServerPlasmicComponentLoader(args) {
     this.bundle = {
       modules: {
         browser: [],
@@ -1539,22 +1424,43 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
       projects: [],
       activeSplits: []
     };
-    this.registry.clear();
-  };
+    this.opts = args.opts;
+    this.fetcher = args.fetcher;
+    this.tracker = args.tracker;
+    this.onBundleMerged = args.onBundleMerged;
+    this.onBundleFetched = args.onBundleFetched;
+  }
+  var _proto = ReactServerPlasmicComponentLoader.prototype;
   _proto.maybeGetCompMetas = function maybeGetCompMetas() {
+    var found = new Set();
+    var missing = [];
     for (var _len = arguments.length, specs = new Array(_len), _key = 0; _key < _len; _key++) {
       specs[_key] = arguments[_key];
     }
-    return _maybeGetCompMetas(this.bundle.components, specs);
+    for (var _i = 0, _specs = specs; _i < _specs.length; _i++) {
+      var spec = _specs[_i];
+      var filteredMetas = getCompMetas(this.bundle.components, spec);
+      if (filteredMetas.length > 0) {
+        filteredMetas.forEach(function (meta) {
+          return found.add(meta);
+        });
+      } else {
+        missing.push(spec);
+      }
+    }
+    return {
+      found: Array.from(found.keys()),
+      missing: missing
+    };
   };
   _proto.maybeFetchComponentData = /*#__PURE__*/function () {
     var _maybeFetchComponentData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-      var _this2 = this;
+      var _this = this;
       var _parseFetchComponentD,
         specs,
         opts,
         returnWithSpecsToFetch,
-        _this$maybeGetCompMet,
+        _this$maybeGetCompMet2,
         existingMetas,
         missingSpecs,
         _args2 = arguments;
@@ -1565,24 +1471,24 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
               _parseFetchComponentD = parseFetchComponentDataArgs.apply(void 0, _args2), specs = _parseFetchComponentD.specs, opts = _parseFetchComponentD.opts;
               returnWithSpecsToFetch = /*#__PURE__*/function () {
                 var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(specsToFetch) {
-                  var _this2$maybeGetCompMe, existingMetas2, missingSpecs2;
+                  var _this$maybeGetCompMet, existingMetas2, missingSpecs2;
                   return runtime_1.wrap(function _callee$(_context) {
                     while (1) {
                       switch (_context.prev = _context.next) {
                         case 0:
                           _context.next = 2;
-                          return _this2.fetchMissingData({
+                          return _this.fetchMissingData({
                             missingSpecs: specsToFetch
                           });
                         case 2:
-                          _this2$maybeGetCompMe = _this2.maybeGetCompMetas.apply(_this2, specs), existingMetas2 = _this2$maybeGetCompMe.found, missingSpecs2 = _this2$maybeGetCompMe.missing;
+                          _this$maybeGetCompMet = _this.maybeGetCompMetas.apply(_this, specs), existingMetas2 = _this$maybeGetCompMet.found, missingSpecs2 = _this$maybeGetCompMet.missing;
                           if (!(missingSpecs2.length > 0)) {
                             _context.next = 5;
                             break;
                           }
                           return _context.abrupt("return", null);
                         case 5:
-                          return _context.abrupt("return", prepComponentData(_this2.bundle, existingMetas2, opts));
+                          return _context.abrupt("return", prepComponentData(_this.bundle, existingMetas2, opts));
                         case 6:
                         case "end":
                           return _context.stop();
@@ -1604,7 +1510,7 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
               return _context2.abrupt("return", _context2.sent);
             case 6:
               // Else we only fetch actually missing specs
-              _this$maybeGetCompMet = this.maybeGetCompMetas.apply(this, specs), existingMetas = _this$maybeGetCompMet.found, missingSpecs = _this$maybeGetCompMet.missing;
+              _this$maybeGetCompMet2 = this.maybeGetCompMetas.apply(this, specs), existingMetas = _this$maybeGetCompMet2.found, missingSpecs = _this$maybeGetCompMet2.missing;
               if (!(missingSpecs.length === 0)) {
                 _context2.next = 9;
                 break;
@@ -1633,7 +1539,7 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
         specs,
         opts,
         data,
-        _this$maybeGetCompMet2,
+        _this$maybeGetCompMet3,
         missingSpecs,
         _args3 = arguments;
       return runtime_1.wrap(function _callee3$(_context3) {
@@ -1649,7 +1555,7 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
                 _context3.next = 7;
                 break;
               }
-              _this$maybeGetCompMet2 = this.maybeGetCompMetas.apply(this, specs), missingSpecs = _this$maybeGetCompMet2.missing;
+              _this$maybeGetCompMet3 = this.maybeGetCompMetas.apply(this, specs), missingSpecs = _this$maybeGetCompMet3.missing;
               throw new Error("Unable to find components " + missingSpecs.map(getLookupSpecName).join(', '));
             case 7:
               return _context3.abrupt("return", data);
@@ -1721,23 +1627,10 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     }
     return fetchComponents;
   }();
-  _proto.getLookup = function getLookup() {
-    return new ComponentLookup(this.bundle, this.registry);
-  };
   _proto.getActiveSplits = function getActiveSplits() {
     return this.bundle.activeSplits;
   };
-  _proto.trackConversion = function trackConversion(value) {
-    if (value === void 0) {
-      value = 0;
-    }
-    this.tracker.trackConversion(value);
-  }
-  // @ts-ignore
-  ;
-  _proto.fetchMissingData =
-  /*#__PURE__*/
-  function () {
+  _proto.fetchMissingData = /*#__PURE__*/function () {
     var _fetchMissingData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(opts) {
       return runtime_1.wrap(function _callee6$(_context6) {
         while (1) {
@@ -1772,83 +1665,285 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
       }
     }
   };
-  _proto.getActiveVariation = /*#__PURE__*/function () {
-    var _getActiveVariation2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7(opts) {
+  _proto.fetchAllData = /*#__PURE__*/function () {
+    var _fetchAllData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7() {
+      var _this$onBundleFetched;
+      var bundle;
       return runtime_1.wrap(function _callee7$(_context7) {
         while (1) {
           switch (_context7.prev = _context7.next) {
             case 0:
               _context7.next = 2;
-              return this.fetchAllData();
+              return this.fetcher.fetchAllData();
             case 2:
-              return _context7.abrupt("return", getActiveVariation(_extends({}, opts, {
-                splits: this.bundle.activeSplits
-              })));
-            case 3:
+              bundle = _context7.sent;
+              this.tracker.trackFetch();
+              this.mergeBundle(bundle);
+              (_this$onBundleFetched = this.onBundleFetched) == null ? void 0 : _this$onBundleFetched.call(this);
+              return _context7.abrupt("return", bundle);
+            case 7:
             case "end":
               return _context7.stop();
           }
         }
       }, _callee7, this);
     }));
-    function getActiveVariation$1(_x4) {
-      return _getActiveVariation2.apply(this, arguments);
+    function fetchAllData() {
+      return _fetchAllData.apply(this, arguments);
     }
-    return getActiveVariation$1;
+    return fetchAllData;
   }();
-  _proto.getTeamIds = function getTeamIds() {
-    return uniq(this.bundle.projects.map(function (p) {
-      return p.teamId ? "" + p.teamId + (p.indirect ? '@indirect' : '') : null;
-    }).filter(function (x) {
-      return !!x;
+  _proto.mergeBundle = function mergeBundle(bundle) {
+    var _this$onBundleMerged;
+    this.bundle = mergeBundles(bundle, this.bundle);
+    (_this$onBundleMerged = this.onBundleMerged) == null ? void 0 : _this$onBundleMerged.call(this);
+  };
+  _proto.getBundle = function getBundle() {
+    return this.bundle;
+  };
+  _proto.clearCache = function clearCache() {
+    this.bundle = {
+      modules: {
+        browser: [],
+        server: []
+      },
+      components: [],
+      globalGroups: [],
+      external: [],
+      projects: [],
+      activeSplits: []
+    };
+  };
+  return ReactServerPlasmicComponentLoader;
+}();
+function parseFetchComponentDataArgs() {
+  var specs;
+  var opts;
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  if (Array.isArray(args[0])) {
+    specs = args[0];
+    opts = args[1];
+  } else {
+    specs = args;
+    opts = undefined;
+  }
+  return {
+    specs: specs,
+    opts: opts
+  };
+}
+
+var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
+  function InternalPlasmicComponentLoader(opts) {
+    var _this = this;
+    this.opts = opts;
+    this.subs = [];
+    this.roots = [];
+    this.globalVariants = [];
+    this.substitutedComponents = {};
+    this.substitutedGlobalVariantHooks = {};
+    this.registry = Registry.getInstance();
+    this.tracker = new PlasmicTracker({
+      projectIds: opts.projects.map(function (p) {
+        return p.id;
+      }),
+      platform: opts.platform,
+      preview: opts.preview
+    });
+    this.reactServerLoader = new ReactServerPlasmicComponentLoader({
+      opts: opts,
+      fetcher: new PlasmicModulesFetcher(opts),
+      tracker: this.tracker,
+      onBundleMerged: function onBundleMerged() {
+        _this.refreshRegistry();
+      },
+      onBundleFetched: function onBundleFetched() {
+        _this.roots.forEach(function (watcher) {
+          return watcher.onDataFetched == null ? void 0 : watcher.onDataFetched();
+        });
+      }
+    });
+    this.registerModules({
+      react: React__default,
+      'react-dom': ReactDOM,
+      '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: this.substitutedComponents,
+        globalVariantHooks: this.substitutedGlobalVariantHooks
+      }
+    });
+  }
+  var _proto = InternalPlasmicComponentLoader.prototype;
+  _proto.getBundle = function getBundle() {
+    return this.reactServerLoader.getBundle();
+  };
+  _proto.setGlobalVariants = function setGlobalVariants(globalVariants) {
+    this.globalVariants = globalVariants;
+  };
+  _proto.getGlobalVariants = function getGlobalVariants() {
+    return this.globalVariants;
+  };
+  _proto.registerModules = function registerModules(modules) {
+    var _this2 = this;
+    if (Object.keys(modules).some(function (name) {
+      return _this2.registry.getRegisteredModule(name) !== modules[name];
+    })) {
+      if (!this.registry.isEmpty()) {
+        console.warn('Calling PlasmicComponentLoader.registerModules() after Plasmic component has rendered; starting over.');
+        this.registry.clear();
+      }
+      for (var _i = 0, _Object$keys = Object.keys(modules); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        this.registry.register(key, modules[key]);
+      }
+    }
+  };
+  _proto.substituteComponent = function substituteComponent(component, name) {
+    if (!this.registry.isEmpty()) {
+      console.warn('Calling PlasmicComponentLoader.registerSubstitution() after Plasmic component has rendered; starting over.');
+      this.registry.clear();
+    }
+    this.subs.push({
+      lookup: name,
+      component: component
+    });
+  };
+  _proto.registerComponent = function registerComponent$1(component, meta) {
+    var _meta$importPath;
+    this.substituteComponent(component, {
+      name: meta.name,
+      isCode: true
+    });
+    // Import path is not used as we will use component substitution
+    registerComponent(component, _extends({}, meta, {
+      importPath: (_meta$importPath = meta.importPath) != null ? _meta$importPath : ''
     }));
   };
-  _proto.getProjectIds = function getProjectIds() {
-    return uniq(this.bundle.projects.map(function (p) {
-      return "" + p.id + (p.indirect ? '@indirect' : '');
+  _proto.registerGlobalContext = function registerGlobalContext$1(context, meta) {
+    var _meta$importPath2;
+    this.substituteComponent(context, {
+      name: meta.name,
+      isCode: true
+    });
+    // Import path is not used as we will use component substitution
+    registerGlobalContext(context, _extends({}, meta, {
+      importPath: (_meta$importPath2 = meta.importPath) != null ? _meta$importPath2 : ''
     }));
   };
-  _proto.trackRender = function trackRender(opts) {
-    this.tracker.trackRender(opts);
+  _proto.registerTrait = function registerTrait$1(trait, meta) {
+    registerTrait(trait, meta);
   };
-  _proto.fetchAllData = /*#__PURE__*/function () {
-    var _fetchAllData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8() {
-      var bundle;
-      return runtime_1.wrap(function _callee8$(_context8) {
+  _proto.registerPrefetchedBundle = function registerPrefetchedBundle(bundle) {
+    // For React Server Components (Next.js 13+),
+    // we need to pass server modules in LoaderBundleOutput from Server Components to Client Components.
+    // We don't want to pass them via normal page props because that will be serialized to the browser.
+    // Instead, we pass the bundle (including the server modules) via the Node `global` variable.
+    //
+    // This is the code that reads the stored bundle and merges it back into the loader.
+    if (!isBrowser) {
+      // Check if a bundle is stored with the corresponding ID.
+      if (bundle.localId !== undefined) {
+        var _global$__PLASMIC_BUN;
+        // If it's there, merge this bundle first.
+        var storedBundle = (_global$__PLASMIC_BUN = global.__PLASMIC_BUNDLES) == null ? void 0 : _global$__PLASMIC_BUN[bundle.localId];
+        if (storedBundle) {
+          this.reactServerLoader.mergeBundle(storedBundle);
+        }
+      }
+    }
+    this.reactServerLoader.mergeBundle(bundle);
+  };
+  _proto.subscribePlasmicRoot = function subscribePlasmicRoot(watcher) {
+    this.roots.push(watcher);
+  };
+  _proto.unsubscribePlasmicRoot = function unsubscribePlasmicRoot(watcher) {
+    var index = this.roots.indexOf(watcher);
+    if (index >= 0) {
+      this.roots.splice(index, 1);
+    }
+  };
+  _proto.clearCache = function clearCache() {
+    this.reactServerLoader.clearCache();
+    this.registry.clear();
+  };
+  _proto.getLookup = function getLookup() {
+    return new ComponentLookup(this.getBundle(), this.registry);
+  };
+  _proto.maybeFetchComponentData = function maybeFetchComponentData() {
+    var _this$reactServerLoad;
+    return (_this$reactServerLoad = this.reactServerLoader).maybeFetchComponentData.apply(_this$reactServerLoad, arguments);
+  };
+  _proto.fetchComponentData = function fetchComponentData() {
+    var _this$reactServerLoad2;
+    return (_this$reactServerLoad2 = this.reactServerLoader).fetchComponentData.apply(_this$reactServerLoad2, arguments);
+  };
+  _proto.fetchPages = function fetchPages(opts) {
+    return this.reactServerLoader.fetchPages(opts);
+  };
+  _proto.fetchComponents = function fetchComponents() {
+    return this.reactServerLoader.fetchComponents();
+  };
+  _proto.getActiveSplits = function getActiveSplits() {
+    return this.reactServerLoader.getActiveSplits();
+  };
+  _proto.trackConversion = function trackConversion(value) {
+    if (value === void 0) {
+      value = 0;
+    }
+    this.tracker.trackConversion(value);
+  };
+  _proto.getActiveVariation = /*#__PURE__*/function () {
+    var _getActiveVariation2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(opts) {
+      return runtime_1.wrap(function _callee$(_context) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context.prev = _context.next) {
             case 0:
-              _context8.next = 2;
-              return this.ensureFetcher().fetchAllData();
+              _context.next = 2;
+              return this.reactServerLoader.fetchComponents();
             case 2:
-              bundle = _context8.sent;
-              this.tracker.trackFetch();
-              this.mergeBundle(bundle);
-              this.roots.forEach(function (watcher) {
-                return watcher.onDataFetched == null ? void 0 : watcher.onDataFetched();
-              });
-              return _context8.abrupt("return", bundle);
-            case 7:
+              return _context.abrupt("return", getActiveVariation(_extends({}, opts, {
+                splits: this.getBundle().activeSplits
+              })));
+            case 3:
             case "end":
-              return _context8.stop();
+              return _context.stop();
           }
         }
-      }, _callee8, this);
+      }, _callee, this);
     }));
-    function fetchAllData() {
-      return _fetchAllData.apply(this, arguments);
+    function getActiveVariation$1(_x) {
+      return _getActiveVariation2.apply(this, arguments);
     }
-    return fetchAllData;
+    return getActiveVariation$1;
   }();
-  _proto.mergeBundle = function mergeBundle(bundle) {
-    this.bundle = mergeBundles(bundle, this.bundle);
-    this.refreshRegistry();
+  _proto.getTeamIds = function getTeamIds() {
+    return uniq(this.getBundle().projects.map(function (p) {
+      return p.teamId ? "" + p.teamId + (p.indirect ? '@indirect' : '') : null;
+    }).filter(function (x) {
+      return !!x;
+    }));
+  };
+  _proto.getProjectIds = function getProjectIds() {
+    return uniq(this.getBundle().projects.map(function (p) {
+      return "" + p.id + (p.indirect ? '@indirect' : '');
+    }));
+  };
+  _proto.trackRender = function trackRender(opts) {
+    this.tracker.trackRender(opts);
   };
   _proto.refreshRegistry = function refreshRegistry() {
     var _this3 = this;
     var _loop = function _loop() {
       var sub = _step.value;
-      var metas = getCompMetas(_this3.bundle.components, sub.lookup);
+      var metas = getCompMetas(_this3.getBundle().components, sub.lookup);
       metas.forEach(function (meta) {
         _this3.substitutedComponents[meta.id] = sub.component;
       });
@@ -1866,41 +1961,16 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     // context providers, but instead by <PlasmicRootProvider/> and by
     // PlasmicComponentLoader.setGlobalVariants(), we redirect these
     // hooks to read from them instead.
-    for (var _iterator2 = _createForOfIteratorHelperLoose(this.bundle.globalGroups), _step2; !(_step2 = _iterator2()).done;) {
+    for (var _iterator2 = _createForOfIteratorHelperLoose(this.getBundle().globalGroups), _step2; !(_step2 = _iterator2()).done;) {
       var globalGroup = _step2.value;
       if (globalGroup.type !== 'global-screen') {
         this.substitutedGlobalVariantHooks[globalGroup.id] = createUseGlobalVariant(globalGroup.name, globalGroup.projectId);
       }
     }
-    this.registry.updateModules(this.bundle);
-  };
-  _proto.ensureFetcher = function ensureFetcher() {
-    if (!this.fetcher) {
-      throw new Error("You must first call PlasmicComponentLoader.init()");
-    }
-    return this.fetcher;
+    this.registry.updateModules(this.getBundle());
   };
   return InternalPlasmicComponentLoader;
 }();
-function _maybeGetCompMetas(metas, specs) {
-  var found = new Set();
-  var missing = [];
-  for (var _iterator3 = _createForOfIteratorHelperLoose(specs), _step3; !(_step3 = _iterator3()).done;) {
-    var spec = _step3.value;
-    var filteredMetas = getCompMetas(metas, spec);
-    if (filteredMetas.length > 0) {
-      filteredMetas.forEach(function (meta) {
-        return found.add(meta);
-      });
-    } else {
-      missing.push(spec);
-    }
-  }
-  return {
-    found: Array.from(found.keys()),
-    missing: missing
-  };
-}
 /**
  * Library for fetching component data, and registering
  * custom components.
@@ -1970,23 +2040,23 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.fetchComponentData =
   /*#__PURE__*/
   function () {
-    var _fetchComponentData2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee9() {
+    var _fetchComponentData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
       var _this$__internal;
-      var _args9 = arguments;
-      return runtime_1.wrap(function _callee9$(_context9) {
+      var _args2 = arguments;
+      return runtime_1.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              return _context9.abrupt("return", (_this$__internal = this.__internal).fetchComponentData.apply(_this$__internal, _args9));
+              return _context2.abrupt("return", (_this$__internal = this.__internal).fetchComponentData.apply(_this$__internal, _args2));
             case 1:
             case "end":
-              return _context9.stop();
+              return _context2.stop();
           }
         }
-      }, _callee9, this);
+      }, _callee2, this);
     }));
     function fetchComponentData() {
-      return _fetchComponentData2.apply(this, arguments);
+      return _fetchComponentData.apply(this, arguments);
     }
     return fetchComponentData;
   }()
@@ -1999,23 +2069,23 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.maybeFetchComponentData =
   /*#__PURE__*/
   function () {
-    var _maybeFetchComponentData2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee10() {
+    var _maybeFetchComponentData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
       var _this$__internal2;
-      var _args10 = arguments;
-      return runtime_1.wrap(function _callee10$(_context10) {
+      var _args3 = arguments;
+      return runtime_1.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              return _context10.abrupt("return", (_this$__internal2 = this.__internal).maybeFetchComponentData.apply(_this$__internal2, _args10));
+              return _context3.abrupt("return", (_this$__internal2 = this.__internal).maybeFetchComponentData.apply(_this$__internal2, _args3));
             case 1:
             case "end":
-              return _context10.stop();
+              return _context3.stop();
           }
         }
-      }, _callee10, this);
+      }, _callee3, this);
     }));
     function maybeFetchComponentData() {
-      return _maybeFetchComponentData2.apply(this, arguments);
+      return _maybeFetchComponentData.apply(this, arguments);
     }
     return maybeFetchComponentData;
   }()
@@ -2026,21 +2096,21 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.fetchPages =
   /*#__PURE__*/
   function () {
-    var _fetchPages2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee11(opts) {
-      return runtime_1.wrap(function _callee11$(_context11) {
+    var _fetchPages = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4(opts) {
+      return runtime_1.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context11.prev = _context11.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              return _context11.abrupt("return", this.__internal.fetchPages(opts));
+              return _context4.abrupt("return", this.__internal.fetchPages(opts));
             case 1:
             case "end":
-              return _context11.stop();
+              return _context4.stop();
           }
         }
-      }, _callee11, this);
+      }, _callee4, this);
     }));
-    function fetchPages(_x5) {
-      return _fetchPages2.apply(this, arguments);
+    function fetchPages(_x2) {
+      return _fetchPages.apply(this, arguments);
     }
     return fetchPages;
   }()
@@ -2051,50 +2121,50 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.fetchComponents =
   /*#__PURE__*/
   function () {
-    var _fetchComponents2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee12() {
-      return runtime_1.wrap(function _callee12$(_context12) {
+    var _fetchComponents = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5() {
+      return runtime_1.wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
-              return _context12.abrupt("return", this.__internal.fetchComponents());
+              return _context5.abrupt("return", this.__internal.fetchComponents());
             case 1:
             case "end":
-              return _context12.stop();
+              return _context5.stop();
           }
         }
-      }, _callee12, this);
+      }, _callee5, this);
     }));
     function fetchComponents() {
-      return _fetchComponents2.apply(this, arguments);
+      return _fetchComponents.apply(this, arguments);
     }
     return fetchComponents;
   }();
   _proto2._getActiveVariation = /*#__PURE__*/function () {
-    var _getActiveVariation3 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee13(opts) {
-      return runtime_1.wrap(function _callee13$(_context13) {
+    var _getActiveVariation3 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(opts) {
+      return runtime_1.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context13.prev = _context13.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
-              return _context13.abrupt("return", this.__internal.getActiveVariation(opts));
+              return _context6.abrupt("return", this.__internal.getActiveVariation(opts));
             case 1:
             case "end":
-              return _context13.stop();
+              return _context6.stop();
           }
         }
-      }, _callee13, this);
+      }, _callee6, this);
     }));
-    function _getActiveVariation(_x6) {
+    function _getActiveVariation(_x3) {
       return _getActiveVariation3.apply(this, arguments);
     }
     return _getActiveVariation;
   }();
   _proto2.getActiveVariation = /*#__PURE__*/function () {
-    var _getActiveVariation4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee14(opts) {
-      return runtime_1.wrap(function _callee14$(_context14) {
+    var _getActiveVariation4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7(opts) {
+      return runtime_1.wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context14.prev = _context14.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
-              return _context14.abrupt("return", this._getActiveVariation({
+              return _context7.abrupt("return", this._getActiveVariation({
                 traits: opts.traits,
                 getKnownValue: function getKnownValue(key) {
                   if (opts.known) {
@@ -2112,12 +2182,12 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
               }));
             case 1:
             case "end":
-              return _context14.stop();
+              return _context7.stop();
           }
         }
-      }, _callee14, this);
+      }, _callee7, this);
     }));
-    function getActiveVariation(_x7) {
+    function getActiveVariation(_x4) {
       return _getActiveVariation4.apply(this, arguments);
     }
     return getActiveVariation;
@@ -2139,24 +2209,7 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   };
   return PlasmicComponentLoader;
 }();
-function parseFetchComponentDataArgs() {
-  var specs;
-  var opts;
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
-  if (Array.isArray(args[0])) {
-    specs = args[0];
-    opts = args[1];
-  } else {
-    specs = args;
-    opts = undefined;
-  }
-  return {
-    specs: specs,
-    opts: opts
-  };
-}
+var global = globalThis;
 
 /**
  * Hook that fetches and returns a React component for rendering the argument
@@ -2567,5 +2620,10 @@ function makeElement(loader, lookup, opts) {
   }));
 }
 
+function initPlasmicLoader(opts) {
+  var internal = new InternalPlasmicComponentLoader(opts);
+  return new PlasmicComponentLoader(internal);
+}
+
 export { InternalPlasmicComponentLoader, PlasmicComponent, PlasmicComponentLoader, PlasmicRootProvider, convertBundlesToComponentRenderData, extractPlasmicQueryData, extractPlasmicQueryDataFromElement, hydrateFromElement, initPlasmicLoader, matchesPagePath, plasmicPrepass, renderToElement, renderToString, usePlasmicComponent };
 //# sourceMappingURL=loader-react.esm.js.map