@plasmicapp/loader-react 1.0.40 → 1.0.44

package/dist/loader-react.esm.js

@@ -1,11 +1,15 @@
 import { registerComponent } from '@plasmicapp/host';
 export { PlasmicCanvasContext, PlasmicCanvasHost, repeatedElement } from '@plasmicapp/host';
+import { PlasmicQueryDataProvider, PrepassContext } from '@plasmicapp/query';
+export { usePlasmicQueryData } from '@plasmicapp/query';
 import { getBundleSubset, Registry, PlasmicModulesFetcher } from '@plasmicapp/loader-core';
 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';
 import * as jsxRuntime from 'react/jsx-runtime';
 import pascalcase from 'pascalcase';
+import { isFragment } from 'react-is';
+import prepass from 'react-ssr-prepass';
 import ReactDOMServer from 'react-dom/server';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -62,6 +66,22 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -1190,7 +1210,9 @@ function PlasmicRootProvider(props) {
       prefetchedData = props.prefetchedData,
       children = props.children,
       skipCss = props.skipCss,
-      skipFonts = props.skipFonts;
+      skipFonts = props.skipFonts,
+      prefetchedQueryData = props.prefetchedQueryData,
+      suspenseForQueryData = props.suspenseForQueryData;
   var loader = props.loader.__internal;
 
   if (prefetchedData) {
@@ -1203,13 +1225,16 @@ function PlasmicRootProvider(props) {
       loader: loader
     };
   }, [globalVariants, loader]);
-  return createElement(PlasmicRootContext.Provider, {
+  return createElement(PlasmicQueryDataProvider, {
+    prefetchedCache: prefetchedQueryData,
+    suspense: suspenseForQueryData
+  }, createElement(PlasmicRootContext.Provider, {
     value: value
   }, !skipCss && createElement(PlasmicCss, {
     loader: loader,
     prefetchedData: prefetchedData,
     skipFonts: skipFonts
-  }), children);
+  }), children));
 }
 /**
  * Inject all css modules as <style/> tags. We can't use the usual styleInjector postcss
@@ -2101,6 +2126,216 @@ function PlasmicComponent(props) {
   return element;
 }
 
+/**
+ * Performs a prepass over Plasmic content, kicking off the necessary
+ * data fetches, and populating the fetched data into a cache.  This
+ * cache can be passed as prefetchedQueryData into PlasmicRootProvider.
+ *
+ * To limit rendering errors that can occur when you do this, we recommend
+ * that you pass in _only_ the PlasmicComponents that you are planning to use
+ * as the argument.  For example:
+ *
+ *   const cache = await extractPlasmicQueryData(
+ *     <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
+ *       <PlasmicComponent component="Home" componentProps={{
+ *         // Specify the component prop overrides you are planning to use
+ *         // to render the page, as they may change what data is fetched.
+ *         ...
+ *       }} />
+ *       <PlasmicComponent component="NavBar" componentProps={{
+ *         ...
+ *       }} />
+ *       ...
+ *     </PlasmicRootProvider>
+ *   );
+ *
+ * If your PlasmicComponent will be wrapping components that require special
+ * context set up, you should also wrap the element above with those context
+ * providers.
+ *
+ * You should avoid passing in elements that are not related to Plasmic, as any
+ * rendering errors from those elements during the prepass may result in data
+ * not being populated in the cache.
+ *
+ * @param element a React element containing instances of PlasmicComponent.
+ *   Will attempt to satisfy all data needs from usePlasmicDataQuery()
+ *   in this element tree.
+ * @returns an object mapping query key to fetched data
+ */
+
+function extractPlasmicQueryData(_x) {
+  return _extractPlasmicQueryData.apply(this, arguments);
+}
+/**
+ * Runs react-ssr-prepass on `element`, while isolating rendering errors
+ * as much as possible for each PlasmicComponent instance.
+ */
+
+function _extractPlasmicQueryData() {
+  _extractPlasmicQueryData = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(element) {
+    var cache;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            cache = {};
+            _context.prev = 1;
+            _context.next = 4;
+            return plasmicPrepass(React__default.createElement(PrepassContext.Provider, {
+              value: {
+                cache: cache
+              }
+            }, element));
+
+          case 4:
+            _context.next = 9;
+            break;
+
+          case 6:
+            _context.prev = 6;
+            _context.t0 = _context["catch"](1);
+            console.warn("PLASMIC: Error encountered while pre-rendering", _context.t0);
+
+          case 9:
+            return _context.abrupt("return", Object.fromEntries(Array.from(Object.entries(cache)).map(function (_ref4) {
+              var key = _ref4[0],
+                  data = _ref4[1].data;
+              return [key, data];
+            }).filter(function (_ref5) {
+              var data = _ref5[1];
+              return !!data;
+            })));
+
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[1, 6]]);
+  }));
+  return _extractPlasmicQueryData.apply(this, arguments);
+}
+
+function plasmicPrepass(_x2) {
+  return _plasmicPrepass.apply(this, arguments);
+}
+/**
+ * Returns a clone of the element tree, where componentProps of PlasmicComponent
+ * has been processed such that any React elements found are wrapped in
+ * an error boundary. Makes it possible to isolate rendering errors while still
+ * finishing as much data fetched as possible.
+ */
+
+function _plasmicPrepass() {
+  _plasmicPrepass = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(element) {
+    return runtime_1.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return prepass(buildPlasmicPrepassElement(element));
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _plasmicPrepass.apply(this, arguments);
+}
+
+function buildPlasmicPrepassElement(element) {
+  return React__default.createElement(GenericErrorBoundary, null, processReactElement(element));
+}
+
+function processReactElement(element) {
+  if (element.type === PlasmicComponent) {
+    return React__default.cloneElement(element, processPlasmicComponentProps(element.props));
+  } else {
+    return React__default.cloneElement(element, processComponentProps(element.props));
+  }
+}
+
+function processComponentProps(props) {
+  if (!props || typeof props !== 'object') {
+    return props;
+  }
+
+  var processValue = function processValue(value) {
+    if (React__default.isValidElement(value)) {
+      return processReactElement(value);
+    } else if (Array.isArray(value)) {
+      return value.map(function (v) {
+        return processValue(v);
+      });
+    } else if (isLiteralObject(value)) {
+      return Object.fromEntries(Object.entries(value).map(function (_ref) {
+        var k = _ref[0],
+            v = _ref[1];
+        return [k, processValue(v)];
+      }));
+    } else {
+      return value;
+    }
+  };
+
+  return Object.fromEntries(Object.entries(props).map(function (_ref2) {
+    var k = _ref2[0],
+        v = _ref2[1];
+    return [k, processValue(v)];
+  }));
+}
+
+var GenericErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(GenericErrorBoundary, _React$Component);
+
+  function GenericErrorBoundary(props) {
+    return _React$Component.call(this, props) || this;
+  }
+
+  var _proto = GenericErrorBoundary.prototype;
+
+  _proto.componentDidCatch = function componentDidCatch(error) {
+    console.log("Plasmic: Encountered error while prepass rendering:", error);
+  };
+
+  _proto.render = function render() {
+    return this.props.children;
+  };
+
+  return GenericErrorBoundary;
+}(React__default.Component);
+/**
+ * To process the componentProps passed to PlasmicComponent, wrap any
+ * React element we find in <GenericErrorBoundary />.
+ */
+
+
+function processPlasmicComponentProps(x) {
+  if (!x) {
+    return x;
+  } else if (isFragment(x)) {
+    return React__default.createElement(React__default.Fragment, null, React__default.Children.map(x.props.children, processPlasmicComponentProps));
+  } else if (React__default.isValidElement(x)) {
+    return React__default.createElement(GenericErrorBoundary, null, x);
+  } else if (Array.isArray(x)) {
+    return x.map(processPlasmicComponentProps);
+  } else if (isLiteralObject(x)) {
+    return Object.fromEntries(Object.entries(x).map(function (_ref3) {
+      var key = _ref3[0],
+          val = _ref3[1];
+      return [key, processPlasmicComponentProps(val)];
+    }));
+  } else {
+    return x;
+  }
+}
+
+function isLiteralObject(obj) {
+  return !!obj && typeof obj === 'object' && obj.constructor === Object;
+}
+
 function renderToElement(_x, _x2, _x3, _x4) {
   return _renderToElement.apply(this, arguments);
 }
@@ -2187,5 +2422,5 @@ function makeElement(loader, lookup, opts) {
   }));
 }
 
-export { PlasmicComponent, PlasmicComponentLoader, PlasmicRootProvider, convertBundlesToComponentRenderData, hydrateFromElement, initPlasmicLoader, renderToElement, renderToString, usePlasmicComponent };
+export { PlasmicComponent, PlasmicComponentLoader, PlasmicRootProvider, convertBundlesToComponentRenderData, extractPlasmicQueryData, hydrateFromElement, initPlasmicLoader, plasmicPrepass, renderToElement, renderToString, usePlasmicComponent };
 //# sourceMappingURL=loader-react.esm.js.map