@plasmicapp/loader-react 1.0.77 → 1.0.82

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { PlasmicCanvasContext, PlasmicCanvasHost, PrimitiveType, PropType, repeatedElement, } from '@plasmicapp/host';
+export { PlasmicCanvasContext, PlasmicCanvasHost, PrimitiveType, PropType, repeatedElement, usePlasmicCanvasContext, } from '@plasmicapp/host';
 export { ComponentMeta, PageMeta, PageMetadata } from '@plasmicapp/loader-core';
 export { usePlasmicQueryData } from '@plasmicapp/query';
 export { convertBundlesToComponentRenderData } from './bundles';

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

@@ -2140,44 +2140,48 @@ function PlasmicComponent(props) {
     throw new Error("You must use <PlasmicRootProvider/> at the root of your app");
   }
 
-  var lookup = rootContext.loader.getLookup();
+  var loader = rootContext.loader,
+      globalContextsProps = rootContext.globalContextsProps;
   var Component = usePlasmicComponent({
     name: component,
     projectId: projectId
   }, {
     forceOriginal: forceOriginal
   });
+  var element = React.useMemo(function () {
+    if (!Component) {
+      return null;
+    }
 
-  if (!Component) {
-    return null;
-  }
-
-  var element = React.createElement(Component, Object.assign({}, componentProps));
-
-  if (isRootLoader) {
-    // If this is the root PlasmicComponent, then wrap the content with the
-    // react-web's PlasmicRootProvider.  We are doing this here, instead of
-    // say PlasmicRootProvider, because we don't have access to this context
-    // provider until data has been loaded.  If we insert this provider into
-    // the tree at the root after data is loaded, then we'll invalidate the
-    // React tree and tree state, which is bad.  Instead, we do it at the
-    // "root-most PlasmicComponent"; we won't risk invalidating the sub-tree
-    // here because there were no children before the data came in.
-    var ReactWebRootProvider = lookup.getRootProvider();
-    var GlobalContextsProvider = lookup.getGlobalContextsProvider({
-      name: component,
-      projectId: projectId
-    });
-    element = React.createElement(ReactWebRootProvider, null, React.createElement(MaybeWrap, {
-      cond: !!GlobalContextsProvider,
-      wrapper: function wrapper(children) {
-        return React.createElement(GlobalContextsProvider, Object.assign({}, rootContext.globalContextsProps), children);
-      }
-    }, React.createElement(PlasmicComponentContext.Provider, {
-      value: true
-    }, element)));
-  }
+    var element = React.createElement(Component, Object.assign({}, componentProps));
+
+    if (isRootLoader) {
+      // If this is the root PlasmicComponent, then wrap the content with the
+      // react-web's PlasmicRootProvider.  We are doing this here, instead of
+      // say PlasmicRootProvider, because we don't have access to this context
+      // provider until data has been loaded.  If we insert this provider into
+      // the tree at the root after data is loaded, then we'll invalidate the
+      // React tree and tree state, which is bad.  Instead, we do it at the
+      // "root-most PlasmicComponent"; we won't risk invalidating the sub-tree
+      // here because there were no children before the data came in.
+      var lookup = loader.getLookup();
+      var ReactWebRootProvider = lookup.getRootProvider();
+      var GlobalContextsProvider = lookup.getGlobalContextsProvider({
+        name: component,
+        projectId: projectId
+      });
+      element = React.createElement(ReactWebRootProvider, null, React.createElement(MaybeWrap, {
+        cond: !!GlobalContextsProvider,
+        wrapper: function wrapper(children) {
+          return React.createElement(GlobalContextsProvider, Object.assign({}, globalContextsProps), children);
+        }
+      }, React.createElement(PlasmicComponentContext.Provider, {
+        value: true
+      }, element)));
+    }
 
+    return element;
+  }, [Component, componentProps, loader, isRootLoader, component, projectId, globalContextsProps]);
   return element;
 }
 
@@ -2481,6 +2485,12 @@ Object.defineProperty(exports, 'repeatedElement', {
     return host.repeatedElement;
   }
 });
+Object.defineProperty(exports, 'usePlasmicCanvasContext', {
+  enumerable: true,
+  get: function () {
+    return host.usePlasmicCanvasContext;
+  }
+});
 Object.defineProperty(exports, 'usePlasmicQueryData', {
   enumerable: true,
   get: function () {