@plasmicapp/loader-react 1.0.302 → 1.0.303

package/dist/index.esm.js

@@ -0,0 +1,1400 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/loader.ts
+import * as PlasmicDataSourcesContext from "@plasmicapp/data-sources-context";
+import * as PlasmicHost from "@plasmicapp/host";
+import {
+  registerComponent,
+  registerGlobalContext,
+  registerToken,
+  registerTrait,
+  stateHelpersKeys,
+  unstable_registerFunction
+} from "@plasmicapp/host";
+import {
+  PlasmicModulesFetcher,
+  PlasmicTracker,
+  Registry
+} from "@plasmicapp/loader-core";
+import { internal_getCachedBundleInNodeServer } from "@plasmicapp/loader-fetcher";
+import { getActiveVariation, getExternalIds } from "@plasmicapp/loader-splits";
+import * as PlasmicQuery from "@plasmicapp/query";
+import React3 from "react";
+import ReactDOM from "react-dom";
+import * as jsxDevRuntime from "react/jsx-dev-runtime";
+import * as jsxRuntime from "react/jsx-runtime";
+
+// src/utils.tsx
+import pascalcase from "pascalcase";
+import * as React from "react";
+var isBrowser = typeof window !== "undefined";
+function useForceUpdate() {
+  const [, setTick] = React.useState(0);
+  const update = React.useCallback(() => {
+    setTick((tick) => tick + 1);
+  }, []);
+  return update;
+}
+function useStableLookupSpec(spec) {
+  return useStableLookupSpecs(spec)[0];
+}
+function useStableLookupSpecs(...specs) {
+  const [stableSpecs, setStableSpecs] = React.useState(specs);
+  React.useEffect(() => {
+    if (specs.length !== stableSpecs.length || specs.some((s, i) => !areLookupSpecsEqual(s, stableSpecs[i]))) {
+      setStableSpecs(specs);
+    }
+  }, [specs, stableSpecs]);
+  return stableSpecs;
+}
+function areLookupSpecsEqual(spec1, spec2) {
+  if (spec1 === spec2) {
+    return true;
+  }
+  if (typeof spec1 !== typeof spec2) {
+    return false;
+  }
+  const fullSpec1 = toFullLookup(spec1);
+  const fullSpec2 = toFullLookup(spec2);
+  return (isNameSpec(fullSpec1) && isNameSpec(fullSpec2) && fullSpec1.name === fullSpec2.name && fullSpec1.isCode === fullSpec2.isCode || isPathSpec(fullSpec1) && isPathSpec(fullSpec2) && fullSpec1.path === fullSpec2.path) && fullSpec1.projectId === fullSpec2.projectId;
+}
+function isNameSpec(lookup) {
+  return "name" in lookup;
+}
+function isPathSpec(lookup) {
+  return "path" in lookup;
+}
+function toFullLookup(lookup) {
+  const namePart = typeof lookup === "string" ? lookup : lookup.name;
+  const projectId = typeof lookup === "string" ? void 0 : lookup.projectId;
+  const codeComponent = typeof lookup === "string" ? void 0 : lookup.isCode;
+  if (codeComponent !== true && namePart.startsWith("/")) {
+    return { path: normalizePath(namePart), projectId };
+  } else {
+    return {
+      name: codeComponent ? namePart : normalizeName(namePart),
+      rawName: namePart.trim(),
+      projectId,
+      isCode: codeComponent
+    };
+  }
+}
+function normalizePath(path) {
+  return path.trim();
+}
+function normalizeName(name) {
+  return pascalcase(name).trim();
+}
+function useIsMounted() {
+  const ref = React.useRef(false);
+  const isMounted = React.useCallback(() => ref.current, []);
+  React.useEffect(() => {
+    ref.current = true;
+    return () => {
+      ref.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+function matchesPagePath(pagePath, lookup) {
+  var _a;
+  pagePath = pagePath.replace(/^\/*/, "").replace(/\/*$/, "");
+  lookup = lookup.replace(/^\/*/, "").replace(/\/*$/, "");
+  const paramNames = (pagePath.match(/\[([^\]]*)\]/g) || []).map(
+    (group) => group.slice(1, -1)
+  );
+  const pagePathRegExp = new RegExp(
+    "^" + pagePath.replace(/\[[^\]]*\]/g, "([^/]+)") + "$"
+  );
+  const maybeVals = (_a = lookup.match(pagePathRegExp)) == null ? void 0 : _a.slice(1);
+  if (!maybeVals) {
+    return false;
+  }
+  const params = {};
+  for (let i = 0; i < paramNames.length; i++) {
+    params[paramNames[i]] = maybeVals[i];
+  }
+  return { params };
+}
+function isDynamicPagePath(path) {
+  return !!path.match(/\[[^/]*\]/);
+}
+function matchesCompMeta(lookup, meta) {
+  if (lookup.projectId && meta.projectId !== lookup.projectId) {
+    return false;
+  }
+  return isNameSpec(lookup) ? (lookup.name === meta.name || lookup.rawName === meta.name || lookup.rawName === meta.displayName) && (lookup.isCode == null || lookup.isCode === meta.isCode) : !!(meta.path && matchesPagePath(meta.path, lookup.path));
+}
+function getCompMetas(metas, lookup) {
+  const full = toFullLookup(lookup);
+  return metas.filter((meta) => matchesCompMeta(full, meta)).map((meta) => {
+    if (isNameSpec(full) || !meta.path) {
+      return meta;
+    }
+    const match = matchesPagePath(meta.path, full.path);
+    if (!match) {
+      return meta;
+    }
+    return __spreadProps(__spreadValues({}, meta), { params: match.params });
+  }).sort(
+    (meta1, meta2) => (
+      // We sort the matched component metas by the number of path params, so
+      // if there are two pages `/products/foo` and `/products/[slug]`,
+      // the first one will have higher precedence.
+      Array.from(Object.keys(meta1.params || {})).length - Array.from(Object.keys(meta2.params || {})).length
+    )
+  );
+}
+function getLookupSpecName(lookup) {
+  if (typeof lookup === "string") {
+    return lookup;
+  } else if (lookup.projectId) {
+    return `${lookup.name} (project ${lookup.projectId})`;
+  } else {
+    return lookup.name;
+  }
+}
+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}`);
+    }
+    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
+import { PageParamsProvider } from "@plasmicapp/host";
+import { PlasmicQueryDataProvider } from "@plasmicapp/query";
+import * as React2 from "react";
+
+// src/variation.ts
+function getPlasmicCookieValues() {
+  return Object.fromEntries(
+    document.cookie.split("; ").filter((cookie) => cookie.includes("plasmic:")).map((cookie) => cookie.split("=")).map(([key, value]) => [key.split(":")[1], value])
+  );
+}
+function updatePlasmicCookieValue(key, value) {
+  document.cookie = `plasmic:${key}=${value}`;
+}
+function ensureVariationCookies(variation = {}) {
+  Object.keys(variation).map((variationKey) => {
+    const sliceId = variation[variationKey];
+    updatePlasmicCookieValue(variationKey, sliceId);
+  });
+}
+var getGlobalVariantsFromSplits = (splits, variation) => {
+  const globalVariants = [];
+  Object.keys(variation).map((variationKey) => {
+    const [_type, splitId] = variationKey.split(".");
+    const sliceId = variation[variationKey];
+    const split = splits.find(
+      (s) => s.id === splitId || s.externalId === splitId
+    );
+    if (split) {
+      const slice = split.slices.find((s) => s.id === sliceId || s.externalId === sliceId);
+      if (slice) {
+        slice.contents.map((x) => {
+          globalVariants.push({
+            name: x.group,
+            value: x.variant,
+            projectId: x.projectId
+          });
+        });
+      }
+    }
+  });
+  return globalVariants;
+};
+var mergeGlobalVariantsSpec = (target, from) => {
+  let result = [...target];
+  const existingGlobalVariants = new Set(
+    target.map((t) => {
+      var _a;
+      return `${t.name}-${(_a = t.projectId) != null ? _a : ""}`;
+    })
+  );
+  const newGlobals = from.filter(
+    (t) => {
+      var _a;
+      return !existingGlobalVariants.has(`${t.name}-${(_a = t.projectId) != null ? _a : ""}`);
+    }
+  );
+  if (newGlobals.length > 0) {
+    result = [...result, ...newGlobals];
+  }
+  return result;
+};
+
+// src/PlasmicRootProvider.tsx
+var PlasmicRootContext = React2.createContext(void 0);
+function PlasmicRootProvider(props) {
+  const {
+    globalVariants,
+    prefetchedData,
+    children,
+    skipCss,
+    skipFonts,
+    prefetchedQueryData,
+    suspenseForQueryData,
+    globalContextsProps,
+    variation,
+    translator,
+    Head,
+    Link,
+    pageParams,
+    pageQuery,
+    suspenseFallback,
+    disableLoadingBoundary
+  } = props;
+  const loader = props.loader.__internal;
+  if (prefetchedData) {
+    loader.registerPrefetchedBundle(prefetchedData == null ? void 0 : prefetchedData.bundle);
+  }
+  const [splits, setSplits] = React2.useState(loader.getActiveSplits());
+  const forceUpdate = useForceUpdate();
+  const watcher = React2.useMemo(
+    () => ({
+      onDataFetched: () => {
+        setSplits(loader.getActiveSplits());
+        forceUpdate();
+      }
+    }),
+    [loader, forceUpdate]
+  );
+  React2.useEffect(() => {
+    loader.subscribePlasmicRoot(watcher);
+    return () => loader.unsubscribePlasmicRoot(watcher);
+  }, [watcher, loader]);
+  React2.useEffect(() => {
+    ensureVariationCookies(variation);
+    loader.trackRender({
+      renderCtx: {
+        // We track the provider as a single entity
+        rootComponentId: "provider",
+        teamIds: loader.getTeamIds(),
+        projectIds: loader.getProjectIds()
+      },
+      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
+    ]
+  );
+  return /* @__PURE__ */ React2.createElement(
+    PlasmicQueryDataProvider,
+    {
+      prefetchedCache: prefetchedQueryData,
+      suspense: suspenseForQueryData
+    },
+    /* @__PURE__ */ React2.createElement(PlasmicRootContext.Provider, { value }, !skipCss && /* @__PURE__ */ React2.createElement(
+      PlasmicCss,
+      {
+        loader,
+        prefetchedData,
+        skipFonts
+      }
+    ), /* @__PURE__ */ React2.createElement(PageParamsProvider, { params: pageParams, query: pageQuery }, children))
+  );
+}
+var PlasmicCss = React2.memo(function PlasmicCss2(props) {
+  const { loader, prefetchedData, skipFonts } = props;
+  const [useScopedCss, setUseScopedCss] = React2.useState(!!prefetchedData);
+  const builtCss = buildCss(loader, {
+    scopedCompMetas: useScopedCss && prefetchedData ? prefetchedData.bundle.components : void 0,
+    skipFonts
+  });
+  const forceUpdate = useForceUpdate();
+  const watcher = React2.useMemo(
+    () => ({
+      onDataFetched: () => {
+        setUseScopedCss(false);
+        forceUpdate();
+      }
+    }),
+    [loader, forceUpdate]
+  );
+  React2.useEffect(() => {
+    loader.subscribePlasmicRoot(watcher);
+    return () => loader.unsubscribePlasmicRoot(watcher);
+  }, [watcher, loader]);
+  return /* @__PURE__ */ React2.createElement("style", { dangerouslySetInnerHTML: { __html: builtCss } });
+});
+function buildCss(loader, opts) {
+  const { scopedCompMetas, skipFonts } = opts;
+  const cssFiles = scopedCompMetas && /* @__PURE__ */ new Set([
+    "entrypoint.css",
+    ...scopedCompMetas.map((c) => c.cssFile)
+  ]);
+  const cssModules = loader.getLookup().getCss().filter((f) => !cssFiles || cssFiles.has(f.fileName));
+  const getPri = (fileName) => fileName === "entrypoint.css" ? 0 : 1;
+  const compareModules = (a, b) => getPri(a.fileName) !== getPri(b.fileName) ? getPri(a.fileName) - getPri(b.fileName) : a.fileName.localeCompare(b.fileName);
+  cssModules.sort(compareModules);
+  const remoteFonts = loader.getLookup().getRemoteFonts();
+  return `
+    ${skipFonts ? "" : remoteFonts.map((f) => `@import url('${f.url}');`).join("\n")}
+    ${cssModules.map((mod) => mod.source).join("\n")}
+  `;
+}
+function usePlasmicRootContext() {
+  return React2.useContext(PlasmicRootContext);
+}
+
+// src/global-variants.ts
+function createUseGlobalVariant(name, projectId) {
+  return () => {
+    var _a;
+    const rootContext = usePlasmicRootContext();
+    if (!rootContext) {
+      return void 0;
+    }
+    const loader = rootContext.loader;
+    const spec = [
+      ...loader.getGlobalVariants(),
+      ...(_a = rootContext.globalVariants) != null ? _a : []
+    ].find(
+      (spec2) => spec2.name === name && (!spec2.projectId || spec2.projectId === projectId)
+    );
+    return spec ? spec.value : void 0;
+  };
+}
+
+// src/bundles.ts
+import {
+  getBundleSubset
+} from "@plasmicapp/loader-core";
+function getUsedComps(allComponents, entryCompIds) {
+  const q = [...entryCompIds];
+  const seenIds = new Set(entryCompIds);
+  const componentMetaById = new Map(
+    allComponents.map((meta) => [meta.id, meta])
+  );
+  const usedComps = [];
+  while (q.length > 0) {
+    const [id] = q.splice(0, 1);
+    const meta = componentMetaById.get(id);
+    if (!meta) {
+      continue;
+    }
+    usedComps.push(meta);
+    meta.usedComponents.forEach((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,
+      remoteFontUrls: []
+    };
+  }
+  const usedComps = getUsedComps(
+    bundle.components,
+    compMetas.map((compMeta) => compMeta.id)
+  );
+  const compPaths = usedComps.map((compMeta) => compMeta.entry);
+  const subBundle = getBundleSubset(
+    bundle,
+    [
+      "entrypoint.css",
+      ...compPaths,
+      "root-provider.js",
+      ...bundle.projects.map((x) => x.globalContextsProviderFileName).filter((x) => !!x),
+      // We need to explicitly include global context provider components
+      // to make sure they are kept in bundle.components. That's because
+      // for esbuild, just the globalContextsProviderFileName is not enough,
+      // because it will import a chunk that includes the global context
+      // component, instead of importing that global context component's
+      // entry file. And because nothing depends on the global context component's
+      // entry file, we end up excluding the global context component from
+      // bundle.components, which then makes its substitution not work.
+      // Instead, we forcibly include it here (we'll definitely need it anyway!).
+      ...bundle.components.filter((c) => c.isGlobalContextProvider).map((c) => c.entry),
+      ...bundle.globalGroups.map((g) => g.contextFile)
+    ],
+    opts
+  );
+  const remoteFontUrls = [];
+  subBundle.projects.forEach(
+    (p) => remoteFontUrls.push(...p.remoteFonts.map((f) => f.url))
+  );
+  return {
+    entryCompMetas: compMetas,
+    bundle: subBundle,
+    remoteFontUrls
+  };
+}
+function mergeBundles(target, from) {
+  var _a;
+  const existingCompIds = new Set(target.components.map((c) => c.id));
+  const newCompMetas = from.components.filter(
+    (m) => !existingCompIds.has(m.id)
+  );
+  if (newCompMetas.length > 0) {
+    target = __spreadProps(__spreadValues({}, target), { components: [...target.components, ...newCompMetas] });
+  }
+  const existingProjects = new Set(target.projects.map((p) => p.id));
+  const newProjects = from.projects.filter((p) => !existingProjects.has(p.id));
+  if (newProjects.length > 0) {
+    target = __spreadProps(__spreadValues({}, target), {
+      projects: [...target.projects, ...newProjects]
+    });
+  }
+  const existingModules = {
+    browser: new Set(target.modules.browser.map((m) => m.fileName)),
+    server: new Set(target.modules.server.map((m) => m.fileName))
+  };
+  const newModules = {
+    browser: from.modules.browser.filter(
+      (m) => !existingModules.browser.has(m.fileName)
+    ),
+    server: from.modules.server.filter(
+      (m) => !existingModules.server.has(m.fileName)
+    )
+  };
+  if (newModules.browser.length > 0 || newModules.server.length > 0) {
+    target = __spreadProps(__spreadValues({}, target), {
+      modules: {
+        browser: [...target.modules.browser, ...newModules.browser],
+        server: [...target.modules.server, ...newModules.server]
+      }
+    });
+  }
+  const existingGlobalIds = new Set(target.globalGroups.map((g) => g.id));
+  const newGlobals = from.globalGroups.filter(
+    (g) => !existingGlobalIds.has(g.id)
+  );
+  if (newGlobals.length > 0) {
+    target = __spreadProps(__spreadValues({}, target), {
+      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) {
+    target = __spreadProps(__spreadValues({}, target), {
+      activeSplits: [...target.activeSplits, ...newSplits]
+    });
+  }
+  return target;
+}
+var convertBundlesToComponentRenderData = (bundles, compMetas) => {
+  if (bundles.length === 0) {
+    return null;
+  }
+  const mergedBundles = bundles.reduce((prev, cur) => mergeBundles(prev, cur));
+  return prepComponentData(mergedBundles, compMetas);
+};
+
+// src/loader-react-server.ts
+var ReactServerPlasmicComponentLoader = class {
+  constructor(args) {
+    this.bundle = {
+      modules: {
+        browser: [],
+        server: []
+      },
+      components: [],
+      globalGroups: [],
+      external: [],
+      projects: [],
+      activeSplits: []
+    };
+    this.opts = args.opts;
+    this.fetcher = args.fetcher;
+    this.tracker = args.tracker;
+    this.onBundleMerged = args.onBundleMerged;
+    this.onBundleFetched = args.onBundleFetched;
+  }
+  maybeGetCompMetas(...specs) {
+    const found = /* @__PURE__ */ new Set();
+    const missing = [];
+    for (const spec of specs) {
+      const filteredMetas = getCompMetas(this.bundle.components, spec);
+      if (filteredMetas.length > 0) {
+        filteredMetas.forEach((meta) => found.add(meta));
+      } else {
+        missing.push(spec);
+      }
+    }
+    return { found: Array.from(found.keys()), missing };
+  }
+  maybeFetchComponentData(...args) {
+    return __async(this, null, function* () {
+      const { specs, opts } = parseFetchComponentDataArgs(...args);
+      const returnWithSpecsToFetch = (specsToFetch) => __async(this, null, function* () {
+        yield this.fetchMissingData({ missingSpecs: specsToFetch });
+        const { found: existingMetas2, missing: missingSpecs2 } = this.maybeGetCompMetas(...specs);
+        if (missingSpecs2.length > 0) {
+          return null;
+        }
+        return prepComponentData(this.bundle, existingMetas2, opts);
+      });
+      if (this.opts.alwaysFresh) {
+        return yield returnWithSpecsToFetch(specs);
+      }
+      const { found: existingMetas, missing: missingSpecs } = this.maybeGetCompMetas(...specs);
+      if (missingSpecs.length === 0) {
+        return prepComponentData(this.bundle, existingMetas, opts);
+      }
+      return yield returnWithSpecsToFetch(missingSpecs);
+    });
+  }
+  fetchComponentData(...args) {
+    return __async(this, null, function* () {
+      const { specs, opts } = parseFetchComponentDataArgs(...args);
+      const data = yield this.maybeFetchComponentData(specs, opts);
+      if (!data) {
+        const { missing: missingSpecs } = this.maybeGetCompMetas(...specs);
+        throw new Error(
+          `Unable to find components ${missingSpecs.map(getLookupSpecName).join(", ")}`
+        );
+      }
+      return data;
+    });
+  }
+  fetchPages(opts) {
+    return __async(this, null, function* () {
+      this.maybeReportClientSideFetch(
+        () => `Plasmic: fetching all page metadata in the browser`
+      );
+      const data = yield this.fetchAllData();
+      return data.components.filter(
+        (comp) => comp.isPage && comp.path && ((opts == null ? void 0 : opts.includeDynamicPages) || !isDynamicPagePath(comp.path))
+      );
+    });
+  }
+  fetchComponents() {
+    return __async(this, null, function* () {
+      this.maybeReportClientSideFetch(
+        () => `Plasmic: fetching all component metadata in the browser`
+      );
+      const data = yield this.fetchAllData();
+      return data.components;
+    });
+  }
+  getActiveSplits() {
+    return this.bundle.activeSplits;
+  }
+  fetchMissingData(opts) {
+    return __async(this, null, function* () {
+      this.maybeReportClientSideFetch(
+        () => `Plasmic: fetching missing components in the browser: ${opts.missingSpecs.map((spec) => getLookupSpecName(spec)).join(", ")}`
+      );
+      return this.fetchAllData();
+    });
+  }
+  maybeReportClientSideFetch(mkMsg) {
+    if (isBrowser && this.opts.onClientSideFetch) {
+      const msg = mkMsg();
+      if (this.opts.onClientSideFetch === "warn") {
+        console.warn(msg);
+      } else {
+        throw new Error(msg);
+      }
+    }
+  }
+  fetchAllData() {
+    return __async(this, null, function* () {
+      var _a;
+      const bundle = yield this.fetcher.fetchAllData();
+      this.tracker.trackFetch();
+      this.mergeBundle(bundle);
+      (_a = this.onBundleFetched) == null ? void 0 : _a.call(this);
+      return bundle;
+    });
+  }
+  mergeBundle(bundle) {
+    var _a;
+    this.bundle = mergeBundles(bundle, this.bundle);
+    (_a = this.onBundleMerged) == null ? void 0 : _a.call(this);
+  }
+  getBundle() {
+    return this.bundle;
+  }
+  clearCache() {
+    this.bundle = {
+      modules: {
+        browser: [],
+        server: []
+      },
+      components: [],
+      globalGroups: [],
+      external: [],
+      projects: [],
+      activeSplits: []
+    };
+  }
+};
+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 Registry();
+    this.subs = [];
+    this.roots = [];
+    this.globalVariants = [];
+    this.tracker = new PlasmicTracker({
+      projectIds: opts.projects.map((p) => p.id),
+      platform: opts.platform,
+      preview: opts.preview
+    });
+    this.reactServerLoader = new ReactServerPlasmicComponentLoader({
+      opts,
+      fetcher: new 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: React3,
+      "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: 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;
+  }
+  registerModules(modules) {
+    if (Object.keys(modules).some(
+      (name) => 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 (const key of Object.keys(modules)) {
+        this.registry.register(key, modules[key]);
+      }
+    }
+  }
+  substituteComponent(component, name) {
+    this.internalSubstituteComponent(component, name, void 0);
+  }
+  internalSubstituteComponent(component, name, codeComponentHelpers) {
+    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, 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) => stateHelpersKeys.includes(key))
+      ).map(([stateName, stateSpec]) => [
+        stateName,
+        Object.fromEntries(
+          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
+    );
+    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: ""
+      }
+    } : {}));
+  }
+  unstable_registerFunction(fn, meta) {
+    var _a;
+    unstable_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 });
+    registerGlobalContext(context, __spreadProps(__spreadValues({}, meta), {
+      importPath: (_a = meta.importPath) != null ? _a : ""
+    }));
+  }
+  registerTrait(trait, meta) {
+    registerTrait(trait, meta);
+  }
+  registerToken(token) {
+    registerToken(token);
+  }
+  registerPrefetchedBundle(bundle) {
+    if (!isBrowser) {
+      const cachedBundle = internal_getCachedBundleInNodeServer(this.opts);
+      if (cachedBundle) {
+        this.reactServerLoader.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();
+  }
+  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();
+  }
+  trackConversion(value = 0) {
+    this.tracker.trackConversion(value);
+  }
+  getActiveVariation(opts) {
+    return __async(this, null, function* () {
+      yield this.reactServerLoader.fetchComponents();
+      return getActiveVariation(__spreadProps(__spreadValues({}, opts), {
+        splits: this.getBundle().activeSplits
+      }));
+    });
+  }
+  getTeamIds() {
+    return uniq(
+      this.getBundle().projects.map(
+        (p) => p.teamId ? `${p.teamId}${p.indirect ? "@indirect" : ""}` : null
+      ).filter((x) => !!x)
+    );
+  }
+  getProjectIds() {
+    return uniq(
+      this.getBundle().projects.map(
+        (p) => `${p.id}${p.indirect ? "@indirect" : ""}`
+      )
+    );
+  }
+  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) {
+    this.warnedRegisterComponent = false;
+    this.__internal = internal;
+  }
+  /**
+   * Sets global variants to be used for all components.  Note that
+   * this is not reactive, and will not re-render all components
+   * already mounted; instead, it should be used to activate global
+   * variants that should always be activated for the lifetime of this
+   * app.  If you'd like to reactively change the global variants,
+   * you should specify them via <PlasmicRootProvider />
+   */
+  setGlobalVariants(globalVariants) {
+    this.__internal.setGlobalVariants(globalVariants);
+  }
+  registerModules(modules) {
+    this.__internal.registerModules(modules);
+  }
+  /**
+   * Register custom components that should be swapped in for
+   * components defined in your project.  You can use this to
+   * swap in / substitute a Plasmic component with a "real" component.
+   */
+  substituteComponent(component, name) {
+    this.__internal.substituteComponent(component, name);
+  }
+  registerComponent(component, metaOrName) {
+    if (metaOrName && typeof metaOrName === "object" && "props" in metaOrName) {
+      this.__internal.registerComponent(component, metaOrName);
+    } else {
+      if (process.env.NODE_ENV === "development" && !this.warnedRegisterComponent) {
+        console.warn(
+          `PlasmicLoader: Using deprecated method \`registerComponent\` for component substitution. Please consider using \`substituteComponent\` instead.`
+        );
+        this.warnedRegisterComponent = true;
+      }
+      this.substituteComponent(component, metaOrName);
+    }
+  }
+  unstable_registerFunction(fn, meta) {
+    this.__internal.unstable_registerFunction(fn, meta);
+  }
+  registerGlobalContext(context, meta) {
+    this.__internal.registerGlobalContext(context, meta);
+  }
+  registerTrait(trait, meta) {
+    this.__internal.registerTrait(trait, meta);
+  }
+  registerToken(token) {
+    this.__internal.registerToken(token);
+  }
+  /**
+   * Pre-fetches component data needed to for PlasmicLoader to render
+   * these components.  Should be passed into PlasmicRootProvider as
+   * the prefetchedData prop.
+   *
+   * You can look up a component either by:
+   * - the name of the component
+   * - the path for a page component
+   * - an array of strings that make up parts of the path
+   * - object { name: "name_or_path", projectId: ...}, to specify which project
+   *   to use, if multiple projects have the same component name
+   *
+   * Throws an Error if a specified component to fetch does not exist in
+   * the Plasmic project.
+   */
+  fetchComponentData(...specs) {
+    return __async(this, null, function* () {
+      return this.__internal.fetchComponentData(...specs);
+    });
+  }
+  /**
+   * Like fetchComponentData(), but returns null instead of throwing an Error
+   * when a component is not found.  Useful when you are implementing a catch-all
+   * page and want to check if a specific path had been defined for Plasmic.
+   */
+  maybeFetchComponentData(...specs) {
+    return __async(this, null, function* () {
+      return this.__internal.maybeFetchComponentData(...specs);
+    });
+  }
+  /**
+   * Returns all the page component metadata for these projects.
+   */
+  fetchPages(opts) {
+    return __async(this, null, function* () {
+      return this.__internal.fetchPages(opts);
+    });
+  }
+  /**
+   * Returns all components metadata for these projects.
+   */
+  fetchComponents() {
+    return __async(this, null, function* () {
+      return this.__internal.fetchComponents();
+    });
+  }
+  _getActiveVariation(opts) {
+    return __async(this, null, function* () {
+      return this.__internal.getActiveVariation(opts);
+    });
+  }
+  getActiveVariation(opts) {
+    return __async(this, null, function* () {
+      return this._getActiveVariation({
+        traits: opts.traits,
+        getKnownValue: (key) => {
+          if (opts.known) {
+            return opts.known[key];
+          } else {
+            const cookies = getPlasmicCookieValues();
+            return cookies[key];
+          }
+        },
+        updateKnownValue: (key, value) => {
+          if (!opts.known) {
+            updatePlasmicCookieValue(key, value);
+          }
+        }
+      });
+    });
+  }
+  getExternalVariation(variation) {
+    return getExternalIds(this.getActiveSplits(), variation);
+  }
+  getActiveSplits() {
+    return this.__internal.getActiveSplits();
+  }
+  trackConversion(value = 0) {
+    this.__internal.trackConversion(value);
+  }
+  clearCache() {
+    return this.__internal.clearCache();
+  }
+};
+
+// src/index.ts
+import {
+  DataCtxReader,
+  DataProvider,
+  PageParamsProvider as PageParamsProvider2,
+  PlasmicCanvasContext,
+  PlasmicCanvasHost,
+  repeatedElement,
+  useDataEnv,
+  usePlasmicCanvasContext,
+  useSelector,
+  useSelectors
+} from "@plasmicapp/host";
+import { usePlasmicQueryData } from "@plasmicapp/query";
+
+// src/PlasmicComponent.tsx
+import * as React5 from "react";
+
+// src/usePlasmicComponent.tsx
+import * as React4 from "react";
+function usePlasmicComponent(spec, opts = {}) {
+  const rootContext = usePlasmicRootContext();
+  if (!rootContext) {
+    throw new Error(
+      `You can only use usePlasmicComponent if wrapped in <PlasmicRootProvider />`
+    );
+  }
+  const loader = rootContext.loader;
+  const lookup = loader.getLookup();
+  const component = lookup.hasComponent(spec) ? lookup.getComponent(spec, opts) : void 0;
+  const stableSpec = useStableLookupSpec(spec);
+  const isMounted = useIsMounted();
+  const forceUpdate = useForceUpdate();
+  React4.useEffect(() => {
+    if (!component) {
+      (() => __async(this, null, function* () {
+        yield loader.fetchComponentData(stableSpec);
+        if (isMounted()) {
+          forceUpdate();
+        }
+      }))();
+    }
+  }, [component, stableSpec]);
+  return component;
+}
+
+// src/PlasmicComponent.tsx
+var PlasmicComponentContext = React5.createContext(false);
+function PlasmicComponent(props) {
+  const { component, projectId, componentProps, forceOriginal } = props;
+  const rootContext = usePlasmicRootContext();
+  const isRootLoader = !React5.useContext(PlasmicComponentContext);
+  if (!rootContext) {
+    throw new Error(
+      `You must use <PlasmicRootProvider/> at the root of your app`
+    );
+  }
+  const _a = rootContext, {
+    loader,
+    globalContextsProps,
+    variation,
+    userAuthToken,
+    isUserLoading,
+    authRedirectUri,
+    translator
+  } = _a, rest = __objRest(_a, [
+    "loader",
+    "globalContextsProps",
+    "variation",
+    "userAuthToken",
+    "isUserLoading",
+    "authRedirectUri",
+    "translator"
+  ]);
+  const Component = usePlasmicComponent(
+    { name: component, projectId, isCode: false },
+    { forceOriginal }
+  );
+  React5.useEffect(() => {
+    if (isRootLoader) {
+      const meta = loader.getLookup().getComponentMeta({ name: component, projectId });
+      if (meta) {
+        loader.trackRender({
+          renderCtx: {
+            rootProjectId: meta.projectId,
+            rootComponentId: meta.id,
+            rootComponentName: component,
+            teamIds: loader.getTeamIds(),
+            projectIds: loader.getProjectIds()
+          },
+          variation
+        });
+      }
+    }
+  }, [component, projectId, loader, variation]);
+  const element = React5.useMemo(() => {
+    var _a2;
+    if (!Component) {
+      return null;
+    }
+    let element2 = /* @__PURE__ */ React5.createElement(Component, __spreadValues({}, componentProps));
+    if (isRootLoader) {
+      const lookup = loader.getLookup();
+      const ReactWebRootProvider = lookup.getRootProvider();
+      const GlobalContextsProvider = lookup.getGlobalContextsProvider({
+        name: component,
+        projectId
+      });
+      element2 = /* @__PURE__ */ React5.createElement(
+        ReactWebRootProvider,
+        __spreadProps(__spreadValues({}, rest), {
+          userAuthToken,
+          isUserLoading,
+          authRedirectUri,
+          i18n: {
+            translator,
+            tagPrefix: (_a2 = loader.opts.i18n) == null ? void 0 : _a2.tagPrefix
+          }
+        }),
+        /* @__PURE__ */ React5.createElement(
+          MaybeWrap,
+          {
+            cond: !!GlobalContextsProvider,
+            wrapper: (children) => /* @__PURE__ */ React5.createElement(GlobalContextsProvider, __spreadValues({}, globalContextsProps), children)
+          },
+          /* @__PURE__ */ React5.createElement(PlasmicComponentContext.Provider, { value: true }, element2)
+        )
+      );
+    }
+    return element2;
+  }, [
+    Component,
+    componentProps,
+    loader,
+    isRootLoader,
+    component,
+    projectId,
+    globalContextsProps,
+    userAuthToken,
+    // Just use the token to memo, `user` should be derived from it
+    isUserLoading,
+    authRedirectUri
+  ]);
+  return element;
+}
+function MaybeWrap(props) {
+  return props.cond ? props.wrapper(props.children) : props.children;
+}
+
+// src/index.ts
+import { extractPlasmicQueryData as extractPlasmicQueryData2, plasmicPrepass } from "@plasmicapp/prepass";
+
+// src/render.tsx
+import React6 from "react";
+import ReactDOM2 from "react-dom";
+import { renderToString as reactRenderToString } from "react-dom/server";
+import { extractPlasmicQueryData } from "@plasmicapp/prepass";
+function renderToElement(_0, _1, _2) {
+  return __async(this, arguments, function* (loader, target, lookup, opts = {}) {
+    return new Promise((resolve) => {
+      const element = makeElement(loader, lookup, opts);
+      ReactDOM2.render(element, target, () => resolve());
+    });
+  });
+}
+function renderToString(loader, lookup, opts = {}) {
+  const element = makeElement(loader, lookup, opts);
+  return reactRenderToString(element);
+}
+function extractPlasmicQueryDataFromElement(_0, _1) {
+  return __async(this, arguments, function* (loader, lookup, opts = {}) {
+    const element = makeElement(loader, lookup, opts);
+    return extractPlasmicQueryData(element);
+  });
+}
+function hydrateFromElement(_0, _1, _2) {
+  return __async(this, arguments, function* (loader, target, lookup, opts = {}) {
+    return new Promise((resolve) => {
+      const element = makeElement(loader, lookup, opts);
+      ReactDOM2.hydrate(element, target, () => resolve());
+    });
+  });
+}
+function makeElement(loader, lookup, opts = {}) {
+  return /* @__PURE__ */ React6.createElement(
+    PlasmicRootProvider,
+    {
+      loader,
+      prefetchedData: opts.prefetchedData,
+      globalVariants: opts.globalVariants,
+      prefetchedQueryData: opts.prefetchedQueryData,
+      pageParams: opts.pageParams,
+      pageQuery: opts.pageQuery
+    },
+    /* @__PURE__ */ React6.createElement(
+      PlasmicComponent,
+      {
+        component: typeof lookup === "string" ? lookup : lookup.name,
+        projectId: typeof lookup === "string" ? void 0 : lookup.projectId,
+        componentProps: opts.componentProps
+      }
+    )
+  );
+}
+
+// src/index.ts
+function initPlasmicLoader(opts) {
+  const internal = new InternalPlasmicComponentLoader(opts);
+  return new PlasmicComponentLoader(internal);
+}
+export {
+  DataCtxReader,
+  DataProvider,
+  InternalPlasmicComponentLoader,
+  PageParamsProvider2 as PageParamsProvider,
+  PlasmicCanvasContext,
+  PlasmicCanvasHost,
+  PlasmicComponent,
+  PlasmicComponentLoader,
+  PlasmicRootProvider,
+  convertBundlesToComponentRenderData,
+  extractPlasmicQueryData2 as extractPlasmicQueryData,
+  extractPlasmicQueryDataFromElement,
+  hydrateFromElement,
+  initPlasmicLoader,
+  matchesPagePath,
+  plasmicPrepass,
+  renderToElement,
+  renderToString,
+  repeatedElement,
+  useDataEnv,
+  usePlasmicCanvasContext,
+  usePlasmicComponent,
+  usePlasmicQueryData,
+  useSelector,
+  useSelectors
+};
+//# sourceMappingURL=index.esm.js.map