@plasmicapp/loader-react 1.0.93 → 1.0.96

package/dist/PlasmicRootProvider.d.ts

@@ -4,6 +4,7 @@ interface PlasmicRootContextValue {
     globalVariants?: GlobalVariantSpec[];
     globalContextsProps?: Record<string, any>;
     loader: InternalPlasmicComponentLoader;
+    variation?: Record<string, string>;
 }
 export interface GlobalVariantSpec {
     name: string;
@@ -55,6 +56,10 @@ export declare function PlasmicRootProvider(props: {
      * component.
      */
     globalContextsProps?: Record<string, any>;
+    /**
+     * Specifies a mapping of split id to slice id that should be activated
+     */
+    variation?: Record<string, string>;
 }): JSX.Element;
 export declare function usePlasmicRootContext(): PlasmicRootContextValue | undefined;
 export {};

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { PlasmicCanvasContext, PlasmicCanvasHost, PrimitiveType, PropType, repea
 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 { ComponentRenderData, InitOptions, initPlasmicLoader, InternalPlasmicComponentLoader, PlasmicComponentLoader, } from './loader';
 export { PlasmicComponent } from './PlasmicComponent';
 export { GlobalVariantSpec, PlasmicRootProvider } from './PlasmicRootProvider';
 export { extractPlasmicQueryData, plasmicPrepass } from './prepass';

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

@@ -7,6 +7,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var host = require('@plasmicapp/host');
 var PlasmicQuery = require('@plasmicapp/query');
 var loaderCore = require('@plasmicapp/loader-core');
+var loaderSplits = require('@plasmicapp/loader-splits');
 var React = require('react');
 var React__default = _interopDefault(React);
 var ReactDOM = _interopDefault(require('react-dom'));
@@ -194,6 +195,8 @@ function prepComponentData(bundle) {
   };
 }
 function mergeBundles(target, from) {
+  var _from$activeSplits$fi;
+
   var existingCompIds = new Set(target.components.map(function (c) {
     return c.id;
   }));
@@ -270,6 +273,19 @@ function mergeBundles(target, from) {
     });
   }
 
+  var existingSplitIds = new Set(target.activeSplits.map(function (s) {
+    return s.id;
+  }));
+  var newSplits = (_from$activeSplits$fi = from.activeSplits.filter(function (s) {
+    return !existingSplitIds.has(s.id);
+  })) != null ? _from$activeSplits$fi : [];
+
+  if (newSplits.length > 0) {
+    target = _extends({}, target, {
+      activeSplits: [].concat(target.activeSplits, newSplits)
+    });
+  }
+
   return target;
 }
 var convertBundlesToComponentRenderData = function convertBundlesToComponentRenderData(bundles, compMetas) {
@@ -1223,6 +1239,69 @@ var ComponentLookup = /*#__PURE__*/function () {
   return ComponentLookup;
 }();
 
+function getPlasmicCookieValues() {
+  return Object.fromEntries(document.cookie.split('; ').filter(function (cookie) {
+    return cookie.includes('plasmic:');
+  }).map(function (cookie) {
+    return cookie.split('=');
+  }).map(function (_ref) {
+    var key = _ref[0],
+        value = _ref[1];
+    return [key.split(':')[1], value];
+  }));
+}
+function updatePlasmicCookieValue(key, value) {
+  document.cookie = "plasmic:" + key + "=" + value;
+}
+var getGlobalVariantsFromSplits = function getGlobalVariantsFromSplits(splits, variation) {
+  var globalVariants = [];
+  Object.keys(variation).map(function (variationKey) {
+    var _variationKey$split = variationKey.split('.'),
+        splitId = _variationKey$split[1];
+
+    var sliceId = variation[variationKey];
+    var split = splits.find(function (s) {
+      return s.id === splitId || s.externalId === splitId;
+    });
+
+    if (split) {
+      var slice = split.slices.find(function (s) {
+        return s.id === sliceId || s.externalId === sliceId;
+      });
+
+      if (slice) {
+        slice.contents.map(function (x) {
+          globalVariants.push({
+            name: x.group,
+            value: x.variant,
+            projectId: x.projectId
+          });
+        });
+      }
+    }
+  });
+  return globalVariants;
+};
+var mergeGlobalVariantsSpec = function mergeGlobalVariantsSpec(target, from) {
+  var result = [].concat(target);
+  var existingGlobalVariants = new Set(target.map(function (t) {
+    var _t$projectId;
+
+    return t.name + "-" + ((_t$projectId = t.projectId) != null ? _t$projectId : '');
+  }));
+  var newGlobals = from.filter(function (t) {
+    var _t$projectId2;
+
+    return !existingGlobalVariants.has(t.name + "-" + ((_t$projectId2 = t.projectId) != null ? _t$projectId2 : ''));
+  });
+
+  if (newGlobals.length > 0) {
+    result = [].concat(result, newGlobals);
+  }
+
+  return result;
+};
+
 var PlasmicRootContext = /*#__PURE__*/React.createContext(undefined);
 /**
  * PlasmicRootProvider should be used at the root of your page
@@ -1237,20 +1316,41 @@ function PlasmicRootProvider(props) {
       skipFonts = props.skipFonts,
       prefetchedQueryData = props.prefetchedQueryData,
       suspenseForQueryData = props.suspenseForQueryData,
-      globalContextsProps = props.globalContextsProps;
+      globalContextsProps = props.globalContextsProps,
+      variation = props.variation;
   var loader = props.loader.__internal;
 
   if (prefetchedData) {
     loader.registerPrefetchedBundle(prefetchedData == null ? void 0 : prefetchedData.bundle);
   }
 
+  var _React$useState = React.useState(loader.getActiveSplits()),
+      splits = _React$useState[0],
+      setSplits = _React$useState[1];
+
+  var forceUpdate = useForceUpdate();
+  var watcher = React.useMemo(function () {
+    return {
+      onDataFetched: function onDataFetched() {
+        setSplits(loader.getActiveSplits());
+        forceUpdate();
+      }
+    };
+  }, [loader, forceUpdate]);
+  React.useEffect(function () {
+    loader.subscribePlasmicRoot(watcher);
+    return function () {
+      return loader.unsubscribePlasmicRoot(watcher);
+    };
+  }, [watcher, loader]);
   var value = React.useMemo(function () {
     return {
-      globalVariants: globalVariants,
+      globalVariants: mergeGlobalVariantsSpec(globalVariants != null ? globalVariants : [], getGlobalVariantsFromSplits(splits, variation != null ? variation : {})),
       globalContextsProps: globalContextsProps,
-      loader: loader
+      loader: loader,
+      variation: variation
     };
-  }, [globalVariants, globalContextsProps, loader]);
+  }, [globalVariants, variation, globalContextsProps, loader, splits]);
   return React.createElement(PlasmicQuery.PlasmicQueryDataProvider, {
     prefetchedCache: prefetchedQueryData,
     suspense: suspenseForQueryData
@@ -1272,9 +1372,9 @@ var PlasmicCss = /*#__PURE__*/React.memo(function PlasmicCss(props) {
       prefetchedData = props.prefetchedData,
       skipFonts = props.skipFonts;
 
-  var _React$useState = React.useState(!!prefetchedData),
-      useScopedCss = _React$useState[0],
-      setUseScopedCss = _React$useState[1];
+  var _React$useState2 = React.useState(!!prefetchedData),
+      useScopedCss = _React$useState2[0],
+      setUseScopedCss = _React$useState2[1];
 
   var builtCss = buildCss(loader, {
     scopedCompMetas: useScopedCss && prefetchedData ? prefetchedData.bundle.components : undefined,
@@ -1393,7 +1493,8 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
       components: [],
       globalGroups: [],
       external: [],
-      projects: []
+      projects: [],
+      activeSplits: []
     };
     this.registry = loaderCore.Registry.getInstance();
     this.fetcher = new loaderCore.PlasmicModulesFetcher(opts);
@@ -1490,7 +1591,8 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
       components: [],
       globalGroups: [],
       external: [],
-      projects: []
+      projects: [],
+      activeSplits: []
     };
     this.registry.clear();
   };
@@ -1718,6 +1820,10 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
 
   _proto.getLookup = function getLookup() {
     return new ComponentLookup(this.bundle, this.registry);
+  };
+
+  _proto.getActiveSplits = function getActiveSplits() {
+    return this.bundle.activeSplits;
   } // @ts-ignore
   ;
 
@@ -1764,30 +1870,59 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     }
   };
 
-  _proto.fetchAllData = /*#__PURE__*/function () {
-    var _fetchAllData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7() {
-      var bundle;
+  _proto.getActiveVariation = /*#__PURE__*/function () {
+    var _getActiveVariation2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7(opts) {
       return runtime_1.wrap(function _callee7$(_context7) {
         while (1) {
           switch (_context7.prev = _context7.next) {
             case 0:
               _context7.next = 2;
+              return this.fetchAllData();
+
+            case 2:
+              return _context7.abrupt("return", loaderSplits.getActiveVariation(_extends({}, opts, {
+                splits: this.bundle.activeSplits
+              })));
+
+            case 3:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7, this);
+    }));
+
+    function getActiveVariation(_x3) {
+      return _getActiveVariation2.apply(this, arguments);
+    }
+
+    return getActiveVariation;
+  }();
+
+  _proto.fetchAllData = /*#__PURE__*/function () {
+    var _fetchAllData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8() {
+      var bundle;
+      return runtime_1.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              _context8.next = 2;
               return this.ensureFetcher().fetchAllData();
 
             case 2:
-              bundle = _context7.sent;
+              bundle = _context8.sent;
               this.mergeBundle(bundle);
               this.roots.forEach(function (watcher) {
                 return watcher.onDataFetched == null ? void 0 : watcher.onDataFetched();
               });
-              return _context7.abrupt("return", bundle);
+              return _context8.abrupt("return", bundle);
 
             case 6:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
         }
-      }, _callee7, this);
+      }, _callee8, this);
     }));
 
     function fetchAllData() {
@@ -1947,22 +2082,22 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.fetchComponentData =
   /*#__PURE__*/
   function () {
-    var _fetchComponentData2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8() {
+    var _fetchComponentData2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee9() {
       var _this$__internal;
 
-      var _args8 = arguments;
-      return runtime_1.wrap(function _callee8$(_context8) {
+      var _args9 = arguments;
+      return runtime_1.wrap(function _callee9$(_context9) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context9.prev = _context9.next) {
             case 0:
-              return _context8.abrupt("return", (_this$__internal = this.__internal).fetchComponentData.apply(_this$__internal, _args8));
+              return _context9.abrupt("return", (_this$__internal = this.__internal).fetchComponentData.apply(_this$__internal, _args9));
 
             case 1:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
         }
-      }, _callee8, this);
+      }, _callee9, this);
     }));
 
     function fetchComponentData() {
@@ -1981,22 +2116,22 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.maybeFetchComponentData =
   /*#__PURE__*/
   function () {
-    var _maybeFetchComponentData2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee9() {
+    var _maybeFetchComponentData2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee10() {
       var _this$__internal2;
 
-      var _args9 = arguments;
-      return runtime_1.wrap(function _callee9$(_context9) {
+      var _args10 = arguments;
+      return runtime_1.wrap(function _callee10$(_context10) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context10.prev = _context10.next) {
             case 0:
-              return _context9.abrupt("return", (_this$__internal2 = this.__internal).maybeFetchComponentData.apply(_this$__internal2, _args9));
+              return _context10.abrupt("return", (_this$__internal2 = this.__internal).maybeFetchComponentData.apply(_this$__internal2, _args10));
 
             case 1:
             case "end":
-              return _context9.stop();
+              return _context10.stop();
           }
         }
-      }, _callee9, this);
+      }, _callee10, this);
     }));
 
     function maybeFetchComponentData() {
@@ -2013,19 +2148,19 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.fetchPages =
   /*#__PURE__*/
   function () {
-    var _fetchPages2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee10() {
-      return runtime_1.wrap(function _callee10$(_context10) {
+    var _fetchPages2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee11() {
+      return runtime_1.wrap(function _callee11$(_context11) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context11.prev = _context11.next) {
             case 0:
-              return _context10.abrupt("return", this.__internal.fetchPages());
+              return _context11.abrupt("return", this.__internal.fetchPages());
 
             case 1:
             case "end":
-              return _context10.stop();
+              return _context11.stop();
           }
         }
-      }, _callee10, this);
+      }, _callee11, this);
     }));
 
     function fetchPages() {
@@ -2042,19 +2177,19 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
   _proto2.fetchComponents =
   /*#__PURE__*/
   function () {
-    var _fetchComponents2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee11() {
-      return runtime_1.wrap(function _callee11$(_context11) {
+    var _fetchComponents2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee12() {
+      return runtime_1.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context11.prev = _context11.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
-              return _context11.abrupt("return", this.__internal.fetchComponents());
+              return _context12.abrupt("return", this.__internal.fetchComponents());
 
             case 1:
             case "end":
-              return _context11.stop();
+              return _context12.stop();
           }
         }
-      }, _callee11, this);
+      }, _callee12, this);
     }));
 
     function fetchComponents() {
@@ -2064,6 +2199,71 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
     return fetchComponents;
   }();
 
+  _proto2._getActiveVariation = /*#__PURE__*/function () {
+    var _getActiveVariation3 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee13(opts) {
+      return runtime_1.wrap(function _callee13$(_context13) {
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              return _context13.abrupt("return", this.__internal.getActiveVariation(opts));
+
+            case 1:
+            case "end":
+              return _context13.stop();
+          }
+        }
+      }, _callee13, this);
+    }));
+
+    function _getActiveVariation(_x4) {
+      return _getActiveVariation3.apply(this, arguments);
+    }
+
+    return _getActiveVariation;
+  }();
+
+  _proto2.getActiveVariation = /*#__PURE__*/function () {
+    var _getActiveVariation4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee14(opts) {
+      return runtime_1.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              return _context14.abrupt("return", this._getActiveVariation({
+                traits: opts.traits,
+                getKnownValue: function getKnownValue(key) {
+                  if (opts.known) {
+                    return opts.known[key];
+                  } else {
+                    var cookies = getPlasmicCookieValues();
+                    return cookies[key];
+                  }
+                },
+                updateKnownValue: function updateKnownValue(key, value) {
+                  if (!opts.known) {
+                    updatePlasmicCookieValue(key, value);
+                  }
+                }
+              }));
+
+            case 1:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14, this);
+    }));
+
+    function getActiveVariation(_x5) {
+      return _getActiveVariation4.apply(this, arguments);
+    }
+
+    return getActiveVariation;
+  }();
+
+  _proto2.getActiveSplits = function getActiveSplits() {
+    return this.__internal.getActiveSplits();
+  };
+
   _proto2.clearCache = function clearCache() {
     return this.__internal.clearCache();
   };
@@ -2492,6 +2692,7 @@ Object.defineProperty(exports, 'usePlasmicQueryData', {
     return PlasmicQuery.usePlasmicQueryData;
   }
 });
+exports.InternalPlasmicComponentLoader = InternalPlasmicComponentLoader;
 exports.PlasmicComponent = PlasmicComponent;
 exports.PlasmicComponentLoader = PlasmicComponentLoader;
 exports.PlasmicRootProvider = PlasmicRootProvider;