@plasmicapp/loader-react 1.0.416 → 1.0.417

package/dist/index.js

@@ -126,15 +126,19 @@ var jsxRuntime = __toESM(require("react/jsx-runtime"));
 // src/PlasmicRootProvider.tsx
 var import_host = require("@plasmicapp/host");
 var import_query = require("@plasmicapp/query");
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
+
+// src/react-utils.ts
+var React = __toESM(require("react"));
+var REACT_MAJOR_VERSION = +React.version.split(".")[0];
 
 // src/utils.tsx
 var import_pascalcase = __toESM(require("pascalcase"));
-var React = __toESM(require("react"));
+var React2 = __toESM(require("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;
@@ -143,8 +147,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);
     }
@@ -190,9 +194,9 @@ function normalizeName(name) {
   return (0, import_pascalcase.default)(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;
@@ -329,7 +333,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,
@@ -356,9 +360,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());
@@ -367,13 +371,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];
@@ -433,7 +437,7 @@ function PlasmicRootProvider(props) {
     styleTokenOverridesProjectId,
     currentContextValue
   ]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     loader.trackRender({
       renderCtx: {
         // We track the provider as a single entity
@@ -444,48 +448,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(
     import_query.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(
       import_host.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);
@@ -494,11 +497,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;
@@ -517,7 +520,7 @@ function buildCss(loader, opts) {
   `;
 }
 function usePlasmicRootContext() {
-  return React2.useContext(PlasmicRootContext);
+  return React3.useContext(PlasmicRootContext);
 }
 
 // src/global-variants.ts
@@ -1352,10 +1355,10 @@ var import_host3 = require("@plasmicapp/host");
 var import_query2 = require("@plasmicapp/query");
 
 // src/PlasmicComponent.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 
 // src/usePlasmicComponent.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 function usePlasmicComponent(spec, opts = {}) {
   const rootContext = usePlasmicRootContext();
   if (!rootContext) {
@@ -1369,7 +1372,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);
@@ -1383,11 +1386,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`
@@ -1414,7 +1417,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) {
@@ -1431,12 +1434,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();
@@ -1451,7 +1454,7 @@ function PlasmicComponent(props) {
         name: component,
         projectId
       });
-      elt = /* @__PURE__ */ React5.createElement(
+      elt = /* @__PURE__ */ React6.createElement(
         ReactWebRootProvider,
         __spreadProps(__spreadValues({}, rest), {
           userAuthToken,
@@ -1462,19 +1465,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)
           )
         )
       );