@plasmicapp/loader-react 1.0.43 → 1.0.44

package/dist/PlasmicRootProvider.d.ts

@@ -14,12 +14,6 @@ export interface GlobalVariantSpec {
  * or application.
  */
 export declare function PlasmicRootProvider(props: {
-    /**
-     * If you have pre-fetched component data via PlasmicComponentLoader,
-     * you can pass them in here; PlasmicComponent will avoid fetching
-     * component data that have already been pre-fetched.
-     */
-    prefetchedData?: ComponentRenderData;
     /**
      * The global PlasmicComponentLoader instance you created via
      * initPlasmicLoader().
@@ -38,6 +32,22 @@ export declare function PlasmicRootProvider(props: {
      * If true, will skip installing fonts
      */
     skipFonts?: boolean;
+    /**
+     * If you have pre-fetched component data via PlasmicComponentLoader,
+     * you can pass them in here; PlasmicComponent will avoid fetching
+     * component data that have already been pre-fetched.
+     */
+    prefetchedData?: ComponentRenderData;
+    /**
+     * If you have pre-fetched data that are needed by usePlasmicQueryData(),
+     * then pass in the pre-fetched cache here, mapping query key to fetched data.
+     */
+    prefetchedQueryData?: Record<string, any>;
+    /**
+     * Specifies whether usePlasmicQueryData() should be operating in suspense mode
+     * (throwing promises).
+     */
+    suspenseForQueryData?: boolean;
 }): JSX.Element;
 export declare function usePlasmicRootContext(): PlasmicRootContextValue | undefined;
 export {};

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { PlasmicCanvasContext, PlasmicCanvasHost, PrimitiveType, PropType, repeatedElement, } from '@plasmicapp/host';
 export { ComponentMeta, PageMeta, PageMetadata } from '@plasmicapp/loader-core';
+export { usePlasmicQueryData } from '@plasmicapp/query';
 export { convertBundlesToComponentRenderData } from './bundles';
 export { ComponentRenderData, InitOptions, initPlasmicLoader, PlasmicComponentLoader, } from './loader';
 export { PlasmicComponent } from './PlasmicComponent';
 export { GlobalVariantSpec, PlasmicRootProvider } from './PlasmicRootProvider';
+export { extractPlasmicQueryData, plasmicPrepass } from './prepass';
 export { hydrateFromElement, renderToElement, renderToString } from './render';
 export { usePlasmicComponent } from './usePlasmicComponent';

package/dist/loader-react.cjs.development.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var host = require('@plasmicapp/host');
+var query = require('@plasmicapp/query');
 var loaderCore = require('@plasmicapp/loader-core');
 var React = require('react');
 var React__default = _interopDefault(React);
@@ -12,6 +13,8 @@ var ReactDOM = _interopDefault(require('react-dom'));
 var jsxDevRuntime = require('react/jsx-dev-runtime');
 var jsxRuntime = require('react/jsx-runtime');
 var pascalcase = _interopDefault(require('pascalcase'));
+var reactIs = require('react-is');
+var prepass = _interopDefault(require('react-ssr-prepass'));
 var ReactDOMServer = _interopDefault(require('react-dom/server'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -68,6 +71,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);
@@ -1196,7 +1215,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) {
@@ -1209,13 +1230,16 @@ function PlasmicRootProvider(props) {
       loader: loader
     };
   }, [globalVariants, loader]);
-  return React.createElement(PlasmicRootContext.Provider, {
+  return React.createElement(query.PlasmicQueryDataProvider, {
+    prefetchedCache: prefetchedQueryData,
+    suspense: suspenseForQueryData
+  }, React.createElement(PlasmicRootContext.Provider, {
     value: value
   }, !skipCss && React.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
@@ -2107,6 +2131,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(query.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 (reactIs.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);
 }
@@ -2211,12 +2445,20 @@ Object.defineProperty(exports, 'repeatedElement', {
     return host.repeatedElement;
   }
 });
+Object.defineProperty(exports, 'usePlasmicQueryData', {
+  enumerable: true,
+  get: function () {
+    return query.usePlasmicQueryData;
+  }
+});
 exports.PlasmicComponent = PlasmicComponent;
 exports.PlasmicComponentLoader = PlasmicComponentLoader;
 exports.PlasmicRootProvider = PlasmicRootProvider;
 exports.convertBundlesToComponentRenderData = convertBundlesToComponentRenderData;
+exports.extractPlasmicQueryData = extractPlasmicQueryData;
 exports.hydrateFromElement = hydrateFromElement;
 exports.initPlasmicLoader = initPlasmicLoader;
+exports.plasmicPrepass = plasmicPrepass;
 exports.renderToElement = renderToElement;
 exports.renderToString = renderToString;
 exports.usePlasmicComponent = usePlasmicComponent;