@plasmicapp/loader-react 1.0.36 → 1.0.37

package/dist/loader-react.esm.js

@@ -3,6 +3,8 @@ export { PlasmicCanvasContext, PlasmicCanvasHost, repeatedElement } from '@plasm
 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 ReactDOMServer from 'react-dom/server';
 
@@ -189,16 +191,29 @@ function mergeBundles(target, from) {
     });
   }
 
-  var existingModules = new Set(target.modules.map(function (m) {
-    return m.fileName;
-  }));
-  var newModules = from.modules.filter(function (m) {
-    return !existingModules.has(m.fileName);
-  });
+  var existingModules = {
+    browser: new Set(target.modules.browser.map(function (m) {
+      return m.fileName;
+    })),
+    server: new Set(target.modules.server.map(function (m) {
+      return m.fileName;
+    }))
+  };
+  var newModules = {
+    browser: from.modules.browser.filter(function (m) {
+      return !existingModules.browser.has(m.fileName);
+    }),
+    server: from.modules.server.filter(function (m) {
+      return !existingModules.server.has(m.fileName);
+    })
+  };
 
-  if (newModules.length > 0) {
+  if (newModules.browser.length > 0 || newModules.server.length > 0) {
     target = _extends({}, target, {
-      modules: [].concat(target.modules, newModules)
+      modules: {
+        browser: [].concat(target.modules.browser, newModules.browser),
+        server: [].concat(target.modules.server, newModules.server)
+      }
     });
   }
 
@@ -1149,7 +1164,8 @@ var ComponentLookup = /*#__PURE__*/function () {
   };
 
   _proto.getCss = function getCss() {
-    return this.bundle.modules.filter(function (mod) {
+    // We can probably always get the modules from the browser build
+    return this.bundle.modules.browser.filter(function (mod) {
       return mod.type === 'asset' && mod.fileName.endsWith('css');
     });
   };
@@ -1303,7 +1319,9 @@ function initPlasmicLoader(opts) {
   var internal = new InternalPlasmicComponentLoader(opts);
   internal.registerModules({
     react: React__default,
-    'react-dom': ReactDOM
+    'react-dom': ReactDOM,
+    'react/jsx-runtime': jsxRuntime,
+    'react/jsx-dev-runtime': jsxDevRuntime
   });
   return new PlasmicComponentLoader(internal);
 }
@@ -1314,13 +1332,16 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     this.roots = [];
     this.globalVariants = [];
     this.bundle = {
-      modules: [],
+      modules: {
+        browser: [],
+        server: []
+      },
       components: [],
       globalGroups: [],
       external: [],
       projects: []
     };
-    this.registry = new Registry();
+    this.registry = Registry.getInstance();
     this.fetcher = new PlasmicModulesFetcher(opts);
   }
 
@@ -1335,14 +1356,20 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
   };
 
   _proto.registerModules = function registerModules(modules) {
-    if (!this.registry.isEmpty()) {
-      console.warn('Calling PlasmicComponentLoader.registerModules() after Plasmic component has rendered; starting over.');
-      this.registry.clear();
-    }
+    var _this = this;
+
+    if (Object.keys(modules).some(function (name) {
+      return _this.registry.getRegisteredModule(name) !== modules[name];
+    })) {
+      if (!this.registry.isEmpty()) {
+        console.warn('Calling PlasmicComponentLoader.registerModules() after Plasmic component has rendered; starting over.');
+        this.registry.clear();
+      }
 
-    for (var _i = 0, _Object$keys = Object.keys(modules); _i < _Object$keys.length; _i++) {
-      var key = _Object$keys[_i];
-      this.registry.register(key, modules[key]);
+      for (var _i = 0, _Object$keys = Object.keys(modules); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        this.registry.register(key, modules[key]);
+      }
     }
   };
 
@@ -1389,7 +1416,10 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
 
   _proto.clearCache = function clearCache() {
     this.bundle = {
-      modules: [],
+      modules: {
+        browser: [],
+        server: []
+      },
       components: [],
       globalGroups: [],
       external: [],
@@ -1408,13 +1438,13 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
 
   _proto.maybeFetchComponentData = /*#__PURE__*/function () {
     var _maybeFetchComponentData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-      var _this = this;
+      var _this2 = this;
 
       var _len2,
           specs,
           _key2,
           returnWithSpecsToFetch,
-          _this$maybeGetCompMet2,
+          _this$maybeGetCompMet,
           existingMetas,
           missingSpecs,
           _args2 = arguments;
@@ -1429,19 +1459,19 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
 
               returnWithSpecsToFetch = /*#__PURE__*/function () {
                 var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(specsToFetch) {
-                  var _this$maybeGetCompMet, existingMetas2, missingSpecs2;
+                  var _this2$maybeGetCompMe, existingMetas2, missingSpecs2;
 
                   return runtime_1.wrap(function _callee$(_context) {
                     while (1) {
                       switch (_context.prev = _context.next) {
                         case 0:
                           _context.next = 2;
-                          return _this.fetchMissingData({
+                          return _this2.fetchMissingData({
                             missingSpecs: specsToFetch
                           });
 
                         case 2:
-                          _this$maybeGetCompMet = _this.maybeGetCompMetas.apply(_this, specs), existingMetas2 = _this$maybeGetCompMet.found, missingSpecs2 = _this$maybeGetCompMet.missing;
+                          _this2$maybeGetCompMe = _this2.maybeGetCompMetas.apply(_this2, specs), existingMetas2 = _this2$maybeGetCompMe.found, missingSpecs2 = _this2$maybeGetCompMe.missing;
 
                           if (!(missingSpecs2.length > 0)) {
                             _context.next = 5;
@@ -1451,7 +1481,7 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
                           return _context.abrupt("return", null);
 
                         case 5:
-                          return _context.abrupt("return", prepComponentData.apply(void 0, [_this.bundle].concat(existingMetas2)));
+                          return _context.abrupt("return", prepComponentData.apply(void 0, [_this2.bundle].concat(existingMetas2)));
 
                         case 6:
                         case "end":
@@ -1479,7 +1509,7 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
 
             case 6:
               // Else we only fetch actually missing specs
-              _this$maybeGetCompMet2 = this.maybeGetCompMetas.apply(this, specs), existingMetas = _this$maybeGetCompMet2.found, missingSpecs = _this$maybeGetCompMet2.missing;
+              _this$maybeGetCompMet = this.maybeGetCompMetas.apply(this, specs), existingMetas = _this$maybeGetCompMet.found, missingSpecs = _this$maybeGetCompMet.missing;
 
               if (!(missingSpecs.length === 0)) {
                 _context2.next = 9;
@@ -1513,7 +1543,7 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
   _proto.fetchComponentData = /*#__PURE__*/function () {
     var _fetchComponentData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
       var data,
-          _this$maybeGetCompMet3,
+          _this$maybeGetCompMet2,
           missingSpecs,
           _args3 = arguments;
 
@@ -1532,7 +1562,7 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
                 break;
               }
 
-              _this$maybeGetCompMet3 = this.maybeGetCompMetas.apply(this, _args3), missingSpecs = _this$maybeGetCompMet3.missing;
+              _this$maybeGetCompMet2 = this.maybeGetCompMetas.apply(this, _args3), missingSpecs = _this$maybeGetCompMet2.missing;
               throw new Error("Unable to find components " + missingSpecs.map(getLookupSpecName).join(', '));
 
             case 6: