@plasmicapp/loader-react 1.0.415 → 1.0.417

package/dist/index.esm.js

@@ -64,7 +64,7 @@ import {
 } from "@plasmicapp/host";
 import { PlasmicModulesFetcher as PlasmicModulesFetcher2 } from "@plasmicapp/loader-core";
 import * as PlasmicQuery from "@plasmicapp/query";
-import React3 from "react";
+import React4 from "react";
 import ReactDOM from "react-dom";
 import * as jsxDevRuntime from "react/jsx-dev-runtime";
 import * as jsxRuntime from "react/jsx-runtime";
@@ -72,15 +72,19 @@ import * as jsxRuntime from "react/jsx-runtime";
 // src/PlasmicRootProvider.tsx
 import { PageParamsProvider } from "@plasmicapp/host";
 import { PlasmicQueryDataProvider } from "@plasmicapp/query";
-import * as React2 from "react";
+import * as React3 from "react";
+
+// src/react-utils.ts
+import * as React from "react";
+var REACT_MAJOR_VERSION = +React.version.split(".")[0];
 
 // src/utils.tsx
 import pascalcase from "pascalcase";
-import * as React from "react";
+import * as React2 from "react";
 var isBrowser = typeof window !== "undefined";
 function useForceUpdate() {
-  const [, setTick] = React.useState(0);
-  const update = React.useCallback(() => {
+  const [, setTick] = React2.useState(0);
+  const update = React2.useCallback(() => {
     setTick((tick) => tick + 1);
   }, []);
   return update;
@@ -89,8 +93,8 @@ function useStableLookupSpec(spec) {
   return useStableLookupSpecs(spec)[0];
 }
 function useStableLookupSpecs(...specs) {
-  const [stableSpecs, setStableSpecs] = React.useState(specs);
-  React.useEffect(() => {
+  const [stableSpecs, setStableSpecs] = React2.useState(specs);
+  React2.useEffect(() => {
     if (specs.length !== stableSpecs.length || specs.some((s, i) => !areLookupSpecsEqual(s, stableSpecs[i]))) {
       setStableSpecs(specs);
     }
@@ -136,9 +140,9 @@ function normalizeName(name) {
   return pascalcase(name).trim();
 }
 function useIsMounted() {
-  const ref = React.useRef(false);
-  const isMounted = React.useCallback(() => ref.current, []);
-  React.useEffect(() => {
+  const ref = React2.useRef(false);
+  const isMounted = React2.useCallback(() => ref.current, []);
+  React2.useEffect(() => {
     ref.current = true;
     return () => {
       ref.current = false;
@@ -275,7 +279,7 @@ var mergeGlobalVariantsSpec = (target, from) => {
 };
 
 // src/PlasmicRootProvider.tsx
-var PlasmicRootContext = React2.createContext(void 0);
+var PlasmicRootContext = React3.createContext(void 0);
 function PlasmicRootProvider(props) {
   const {
     globalVariants,
@@ -302,9 +306,9 @@ function PlasmicRootProvider(props) {
   if (prefetchedData) {
     loader.registerPrefetchedBundle(prefetchedData.bundle);
   }
-  const [splits, setSplits] = React2.useState(loader.getActiveSplits());
+  const [splits, setSplits] = React3.useState(loader.getActiveSplits());
   const forceUpdate = useForceUpdate();
-  const watcher = React2.useMemo(
+  const watcher = React3.useMemo(
     () => ({
       onDataFetched: () => {
         setSplits(loader.getActiveSplits());
@@ -313,13 +317,13 @@ function PlasmicRootProvider(props) {
     }),
     [loader, forceUpdate]
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     loader.subscribePlasmicRoot(watcher);
     return () => loader.unsubscribePlasmicRoot(watcher);
   }, [watcher, loader]);
-  const currentContextValue = React2.useContext(PlasmicRootContext);
+  const currentContextValue = React3.useContext(PlasmicRootContext);
   const { user, userAuthToken, isUserLoading, authRedirectUri } = props;
-  const value = React2.useMemo(() => {
+  const value = React3.useMemo(() => {
     var _a, _b, _c;
     const withCurrentContextValueFallback = (v, key) => {
       return v !== void 0 ? v : currentContextValue == null ? void 0 : currentContextValue[key];
@@ -379,7 +383,7 @@ function PlasmicRootProvider(props) {
     styleTokenOverridesProjectId,
     currentContextValue
   ]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     loader.trackRender({
       renderCtx: {
         // We track the provider as a single entity
@@ -390,48 +394,47 @@ function PlasmicRootProvider(props) {
       variation: value.variation
     });
   }, [loader, value]);
-  const reactMajorVersion = +React2.version.split(".")[0];
   const shouldDisableRootLoadingBoundary = disableRootLoadingBoundary != null ? disableRootLoadingBoundary : loader.getBundle().disableRootLoadingBoundaryByDefault;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     PlasmicQueryDataProvider,
     {
       prefetchedCache: prefetchedQueryData,
       suspense: suspenseForQueryData
     },
-    /* @__PURE__ */ React2.createElement(PlasmicRootContext.Provider, { value }, !skipCss && /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement(PlasmicRootContext.Provider, { value }, !skipCss && /* @__PURE__ */ React3.createElement(
       PlasmicCss,
       {
         loader,
         prefetchedData,
         skipFonts
       }
-    ), /* @__PURE__ */ React2.createElement(
+    ), /* @__PURE__ */ React3.createElement(
       PageParamsProvider,
       {
         route: pageRoute,
         params: pageParams,
         query: pageQuery
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React3.createElement(
         MaybeWrap,
         {
-          cond: !shouldDisableRootLoadingBoundary && reactMajorVersion >= 18,
-          wrapper: (contents) => /* @__PURE__ */ React2.createElement(React2.Suspense, { fallback: suspenseFallback != null ? suspenseFallback : "Loading..." }, contents)
+          cond: !shouldDisableRootLoadingBoundary && REACT_MAJOR_VERSION >= 18,
+          wrapper: (contents) => /* @__PURE__ */ React3.createElement(React3.Suspense, { fallback: suspenseFallback != null ? suspenseFallback : "Loading..." }, contents)
         },
         children
       )
     ))
   );
 }
-var PlasmicCss = React2.memo(function PlasmicCss2(props) {
+var PlasmicCss = React3.memo(function PlasmicCss2(props) {
   const { loader, prefetchedData, skipFonts } = props;
-  const [useScopedCss, setUseScopedCss] = React2.useState(!!prefetchedData);
+  const [useScopedCss, setUseScopedCss] = React3.useState(!!prefetchedData);
   const builtCss = buildCss(loader, {
     scopedCompMetas: useScopedCss && prefetchedData ? prefetchedData.bundle.components : void 0,
     skipFonts
   });
   const forceUpdate = useForceUpdate();
-  const watcher = React2.useMemo(
+  const watcher = React3.useMemo(
     () => ({
       onDataFetched: () => {
         setUseScopedCss(false);
@@ -440,11 +443,11 @@ var PlasmicCss = React2.memo(function PlasmicCss2(props) {
     }),
     [loader, forceUpdate]
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     loader.subscribePlasmicRoot(watcher);
     return () => loader.unsubscribePlasmicRoot(watcher);
   }, [watcher, loader]);
-  return /* @__PURE__ */ React2.createElement("style", { dangerouslySetInnerHTML: { __html: builtCss } });
+  return /* @__PURE__ */ React3.createElement("style", { dangerouslySetInnerHTML: { __html: builtCss } });
 });
 function buildCss(loader, opts) {
   const { scopedCompMetas, skipFonts } = opts;
@@ -463,7 +466,7 @@ function buildCss(loader, opts) {
   `;
 }
 function usePlasmicRootContext() {
-  return React2.useContext(PlasmicRootContext);
+  return React3.useContext(PlasmicRootContext);
 }
 
 // src/global-variants.ts
@@ -1212,7 +1215,7 @@ var InternalPlasmicComponentLoader = class extends BaseInternalPlasmicComponentL
         });
       },
       builtinModules: {
-        react: React3,
+        react: React4,
         "react-dom": ReactDOM,
         "react/jsx-runtime": jsxRuntime,
         "react/jsx-dev-runtime": jsxDevRuntime,
@@ -1319,10 +1322,10 @@ import {
 import { usePlasmicQueryData } from "@plasmicapp/query";
 
 // src/PlasmicComponent.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 
 // src/usePlasmicComponent.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 function usePlasmicComponent(spec, opts = {}) {
   const rootContext = usePlasmicRootContext();
   if (!rootContext) {
@@ -1336,7 +1339,7 @@ function usePlasmicComponent(spec, opts = {}) {
   const stableSpec = useStableLookupSpec(spec);
   const isMounted = useIsMounted();
   const forceUpdate = useForceUpdate();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!component) {
       (() => __async(this, null, function* () {
         yield loader.fetchComponentData(stableSpec);
@@ -1350,11 +1353,11 @@ function usePlasmicComponent(spec, opts = {}) {
 }
 
 // src/PlasmicComponent.tsx
-var PlasmicComponentContext = React5.createContext(false);
+var PlasmicComponentContext = React6.createContext(false);
 function PlasmicComponent(props) {
   const { component, projectId, componentProps, forceOriginal } = props;
   const rootContext = usePlasmicRootContext();
-  const isRootLoader = !React5.useContext(PlasmicComponentContext);
+  const isRootLoader = !React6.useContext(PlasmicComponentContext);
   if (!rootContext) {
     throw new Error(
       `You must use <PlasmicRootProvider/> at the root of your app`
@@ -1381,7 +1384,7 @@ function PlasmicComponent(props) {
     { name: component, projectId, isCode: false },
     { forceOriginal }
   );
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (isRootLoader) {
       const meta = loader.getLookup().getComponentMeta({ name: component, projectId });
       if (meta) {
@@ -1398,12 +1401,12 @@ function PlasmicComponent(props) {
       }
     }
   }, [component, projectId, loader, variation]);
-  const element = React5.useMemo(() => {
+  const element = React6.useMemo(() => {
     var _a2;
     if (!Component) {
       return null;
     }
-    let elt = /* @__PURE__ */ React5.createElement(Component, __spreadValues({}, componentProps));
+    let elt = /* @__PURE__ */ React6.createElement(Component, __spreadValues({}, componentProps));
     if (isRootLoader) {
       const lookup = loader.getLookup();
       const ReactWebRootProvider = lookup.getRootProvider();
@@ -1418,7 +1421,7 @@ function PlasmicComponent(props) {
         name: component,
         projectId
       });
-      elt = /* @__PURE__ */ React5.createElement(
+      elt = /* @__PURE__ */ React6.createElement(
         ReactWebRootProvider,
         __spreadProps(__spreadValues({}, rest), {
           userAuthToken,
@@ -1429,19 +1432,19 @@ function PlasmicComponent(props) {
             tagPrefix: (_a2 = loader.opts.i18n) == null ? void 0 : _a2.tagPrefix
           }
         }),
-        /* @__PURE__ */ React5.createElement(
+        /* @__PURE__ */ React6.createElement(
           MaybeWrap,
           {
             cond: !!GlobalContextsProvider,
-            wrapper: (children) => /* @__PURE__ */ React5.createElement(GlobalContextsProvider, __spreadValues({}, globalContextsProps), children)
+            wrapper: (children) => /* @__PURE__ */ React6.createElement(GlobalContextsProvider, __spreadValues({}, globalContextsProps), children)
           },
-          /* @__PURE__ */ React5.createElement(
+          /* @__PURE__ */ React6.createElement(
             MaybeWrap,
             {
               cond: !!StyleTokensProvider,
-              wrapper: (children) => /* @__PURE__ */ React5.createElement(StyleTokensProvider, null, children)
+              wrapper: (children) => /* @__PURE__ */ React6.createElement(StyleTokensProvider, null, children)
             },
-            /* @__PURE__ */ React5.createElement(PlasmicComponentContext.Provider, { value: true }, elt)
+            /* @__PURE__ */ React6.createElement(PlasmicComponentContext.Provider, { value: true }, elt)
           )
         )
       );
@@ -1477,7 +1480,7 @@ function plasmicPrepass(element) {
 
 // src/render.tsx
 import { extractPlasmicQueryData as extractPlasmicQueryData2 } from "@plasmicapp/prepass";
-import React6 from "react";
+import React7 from "react";
 import ReactDOM2 from "react-dom";
 import { renderToString as reactRenderToString } from "react-dom/server";
 function renderToElement(_0, _1, _2) {
@@ -1507,7 +1510,7 @@ function hydrateFromElement(_0, _1, _2) {
   });
 }
 function makeElement(loader, lookup, opts = {}) {
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     PlasmicRootProvider,
     {
       loader,
@@ -1517,7 +1520,7 @@ function makeElement(loader, lookup, opts = {}) {
       pageParams: opts.pageParams,
       pageQuery: opts.pageQuery
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       PlasmicComponent,
       {
         component: typeof lookup === "string" ? lookup : lookup.name,