@makeswift/runtime 0.5.2 → 0.5.4

package/dist/index.cjs.js

@@ -39,7 +39,7 @@ var _c;
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var dynamic = require("next/dynamic");
-var reactPage = require("./react-page.cjs.js");
+var constants = require("./constants.cjs.js");
 var actions = require("./actions.cjs.js");
 var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
@@ -146,7 +146,7 @@ function BodySnippet({
   return null;
 }
 async function introspect(element, client, store) {
-  const descriptors = reactPage.getPropControllerDescriptors(store.getState());
+  const descriptors = constants.getPropControllerDescriptors(store.getState());
   const swatchIds = /* @__PURE__ */ new Set();
   const fileIds = /* @__PURE__ */ new Set();
   const typographyIds = /* @__PURE__ */ new Set();
@@ -157,14 +157,14 @@ async function introspect(element, client, store) {
   while (current = remaining.pop()) {
     let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
       Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
-        reactPage.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+        constants.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
           swatchIds.add(swatchId);
         });
-        reactPage.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
-        reactPage.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
-        reactPage.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
-        reactPage.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
-        reactPage.getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
+        constants.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+        constants.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
+        constants.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+        constants.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+        constants.getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
         if (descriptor.type === control.ShapeControlType) {
           const prop = props[propName];
           if (prop == null)
@@ -196,7 +196,7 @@ async function introspect(element, client, store) {
       });
     };
     let element2;
-    if (reactPage.isElementReference(current)) {
+    if (constants.isElementReference(current)) {
       const globalElement = await client.fetchGlobalElement(current.value);
       const elementData = globalElement == null ? void 0 : globalElement.data;
       if (elementData == null)
@@ -284,8 +284,6 @@ function getAPIResource$1(state, resourceType, resourceId) {
 }
 function reducer$1(state = getInitialState(), action) {
   switch (action.type) {
-    case actions.ActionTypes.RESTORE_API_RESOURCES_CACHE:
-      return getInitialState(action.payload.serializedState);
     case actions.ActionTypes.API_RESOURCE_FULFILLED: {
       const { resourceType, resourceId, resource } = action.payload;
       return new Map(state).set(resourceType, new Map(state.get(resourceType)).set(resourceId, resource));
@@ -661,9 +659,6 @@ class MakeswiftClient {
     slate.KeyUtils.resetGenerator();
     return getSerializedState(this.makeswiftApiClient.getState());
   }
-  updateCacheData(cacheData) {
-    this.makeswiftApiClient.dispatch(actions.restoreAPIResourcesCache(cacheData));
-  }
   readSwatch(swatchId) {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Swatch, swatchId);
   }
@@ -919,7 +914,7 @@ function Page$1({
         return null;
       }))]
     }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
-      documentReference: reactPage.createDocumentReference(page.id)
+      documentReference: constants.createDocumentReference(page.id)
     }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
       code: snippet.code,
       cleanup: snippet.cleanup
@@ -1089,7 +1084,7 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.5.2";
+const version = "0.5.4";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -1323,20 +1318,17 @@ async function getServerSideProps(ctx) {
 const Page = React.memo(({
   snapshot
 }) => {
-  const [client] = React.useState(() => new MakeswiftClient({
+  const client = React.useMemo(() => new MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
     cacheData: snapshot.cacheData
-  }));
-  React.useEffect(() => {
-    client.updateCacheData(snapshot.cacheData);
-  }, [client, snapshot]);
+  }), [snapshot]);
   return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
     client,
     rootElements: /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]),
     preview: snapshot.preview,
     children: /* @__PURE__ */ jsxRuntime.jsx(Page$1, {
       document: snapshot.document
-    })
+    }, snapshot.document.data.key)
   });
 });
 const keys = (o) => Object.keys(o);
@@ -1402,21 +1394,6 @@ const getDeviceMediaQuery = (device) => {
   }
   return parts.join(" and ");
 };
-const MakeswiftComponentType = {
-  Box: "./components/Box/index.js",
-  Button: "./components/Button/index.js",
-  Carousel: "./components/Carousel/index.js",
-  Countdown: "./components/Countdown/index.js",
-  Divider: "./components/Divider/index.js",
-  Embed: "./components/Embed/index.js",
-  Form: "./components/Form/index.js",
-  Image: "./components/Image/index.js",
-  Navigation: "./components/Navigation/index.js",
-  Root: "./components/Root/index.js",
-  SocialLinks: "./components/SocialLinks/index.js",
-  Text: "./components/Text/index.js",
-  Video: "./components/Video/index.js"
-};
 const DEFAULT_BOX_ANIMATE_TYPE = "none";
 const DEFAULT_BOX_ANIMATE_DELAY = 0;
 const DEFAULT_BOX_ANIMATE_DURATION = 0.75;
@@ -1435,7 +1412,7 @@ function registerComponent$c(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Box.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Box,
+    type: constants.MakeswiftComponentType.Box,
     label: "Box",
     props: {
       id: slot.ElementID(),
@@ -1571,7 +1548,7 @@ function registerComponent$b(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Button.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Button,
+    type: constants.MakeswiftComponentType.Button,
     label: "Button",
     props: {
       id: slot.ElementID(),
@@ -1637,7 +1614,7 @@ function registerComponent$a(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Carousel.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Carousel,
+    type: constants.MakeswiftComponentType.Carousel,
     label: "Carousel",
     icon: "Carousel40",
     props: {
@@ -1737,7 +1714,7 @@ function registerComponent$9(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Countdown.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Countdown,
+    type: constants.MakeswiftComponentType.Countdown,
     label: "Countdown",
     icon: "Countdown40",
     props: {
@@ -1826,7 +1803,7 @@ function registerComponent$8(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Divider.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Divider,
+    type: constants.MakeswiftComponentType.Divider,
     label: "Divider",
     icon: "Divider40",
     props: {
@@ -1860,7 +1837,7 @@ function registerComponent$7(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Embed.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Embed,
+    type: constants.MakeswiftComponentType.Embed,
     label: "Embed",
     icon: "Code40",
     props: {
@@ -1899,7 +1876,7 @@ function registerComponent$6(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Form.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Form,
+    type: constants.MakeswiftComponentType.Form,
     label: "Form",
     icon: "Form40",
     props: {
@@ -2017,7 +1994,7 @@ function registerComponent$5(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Image.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Image,
+    type: constants.MakeswiftComponentType.Image,
     label: "Image",
     props: {
       id: slot.ElementID(),
@@ -2038,7 +2015,7 @@ function registerComponent$4(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Navigation.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Navigation,
+    type: constants.MakeswiftComponentType.Navigation,
     label: "Navigation",
     icon: "Navigation40",
     props: {
@@ -2135,7 +2112,7 @@ function registerComponent$3(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Root.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Root,
+    type: constants.MakeswiftComponentType.Root,
     label: "Page",
     hidden: true,
     props: {
@@ -2150,7 +2127,7 @@ function registerComponent$2(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./SocialLinks.cjs.js");
   })))), {
-    type: MakeswiftComponentType.SocialLinks,
+    type: constants.MakeswiftComponentType.SocialLinks,
     label: "Social Links",
     icon: "SocialLinks40",
     props: {
@@ -2275,7 +2252,7 @@ function registerComponent$1(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Text.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Text,
+    type: constants.MakeswiftComponentType.Text,
     label: "Text",
     props: {
       id: slot.ElementID(),
@@ -2348,7 +2325,7 @@ function registerComponent(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Video.cjs.js");
   })))), {
-    type: MakeswiftComponentType.Video,
+    type: constants.MakeswiftComponentType.Video,
     label: "Video",
     icon: "Video40",
     props: {
@@ -2813,12 +2790,12 @@ function mapSideColor(swatches, _d) {
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
-      swatch: swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(constants.isNonNullable).find((s) => s && s.id === color.swatchId)
     }
   });
 }
 function useBorder(value) {
-  const swatchIds = reactPage.getBorderSwatchIds(value);
+  const swatchIds = constants.getBorderSwatchIds(value);
   const swatches = useSwatches(swatchIds);
   if (value == null)
     return null;
@@ -2843,7 +2820,7 @@ const ShadowDefaultValue = {
   color: null
 };
 function useBoxShadow(value) {
-  const swatchIds = reactPage.getBoxShadowsSwatchIds(value);
+  const swatchIds = constants.getBoxShadowsSwatchIds(value);
   const swatches = useSwatches(swatchIds);
   if (value == null)
     return null;
@@ -2859,7 +2836,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(constants.isNonNullable).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2874,7 +2851,7 @@ function useBoxShadow(value) {
   });
 }
 function useResponsiveColor(color) {
-  const swatchIds = reactPage.getResponsiveColorSwatchIds(color);
+  const swatchIds = constants.getResponsiveColorSwatchIds(color);
   const swatches = useSwatches(swatchIds);
   if (color == null)
     return null;
@@ -2883,7 +2860,7 @@ function useResponsiveColor(color) {
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
-  }).filter(reactPage.isNonNullable);
+  }).filter(constants.isNonNullable);
 }
 const DEVICE_QUERIES = DEVICES.map((device) => ({
   id: device.id,
@@ -3599,13 +3576,13 @@ function PropsValue({
 }) {
   var _a;
   const store = useStore();
-  const propControllerDescriptorsRef = React.useRef((_a = reactPage.getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
+  const propControllerDescriptorsRef = React.useRef((_a = constants.getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
   const props = element.props;
   const documentKey = useDocumentKey();
   const propControllers = useSelector((state) => {
     if (documentKey == null)
       return null;
-    return reactPage.getPropControllers(state, documentKey, element.key);
+    return constants.getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
     var _a2;
@@ -3791,7 +3768,7 @@ const FindDomNode = React.forwardRef(function FindDomNode2(props, ref) {
     innerRef: ref
   }));
 });
-const storeContextDefaultValue = reactPage.configureStore();
+const storeContextDefaultValue = constants.configureStore();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -3813,7 +3790,7 @@ function createReactRuntime(store) {
       };
     },
     copyElementTree(elementTree, replacementContext) {
-      return reactPage.copyElementTree(store.getState(), elementTree, replacementContext);
+      return constants.copyElementTree(store.getState(), elementTree, replacementContext);
     }
   };
 }
@@ -3865,17 +3842,17 @@ function useSelector(selector) {
   return withSelector.useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector);
 }
 function useComponent(type) {
-  return useSelector((state) => reactPage.getReactComponent(state, type));
+  return useSelector((state) => constants.getReactComponent(state, type));
 }
 function useElementId(elementKey) {
   const documentKey = useDocumentKey();
-  return useSelector((state) => documentKey == null || elementKey == null ? null : reactPage.getElementId(state, documentKey, elementKey));
+  return useSelector((state) => documentKey == null || elementKey == null ? null : constants.getElementId(state, documentKey, elementKey));
 }
 function useDocument(documentKey) {
-  return useSelector((state) => reactPage.getDocument(state, documentKey));
+  return useSelector((state) => constants.getDocument(state, documentKey));
 }
 function useIsInBuilder() {
-  return useSelector((state) => reactPage.getIsInBuilder(state));
+  return useSelector((state) => constants.getIsInBuilder(state));
 }
 function useDispatch() {
   const store = React.useContext(StoreContext);
@@ -3964,7 +3941,7 @@ const Element = React.memo(React.forwardRef(function Element2({
       return;
     return dispatch(actions.mountComponentEffect(documentKey, elementKey));
   }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
-  return reactPage.isElementReference(element) ? /* @__PURE__ */ jsxRuntime.jsx(ElementReference, {
+  return constants.isElementReference(element) ? /* @__PURE__ */ jsxRuntime.jsx(ElementReference, {
     ref: setHandle,
     elementReference: element
   }, elementKey) : /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
@@ -4014,7 +3991,6 @@ exports.Element = Element;
 exports.Makeswift = Makeswift;
 exports.MakeswiftApiHandler = MakeswiftApiHandler;
 exports.MakeswiftClient = MakeswiftClient;
-exports.MakeswiftComponentType = MakeswiftComponentType;
 exports.MakeswiftProvider = MakeswiftProvider;
 exports.Page = Page$1;
 exports.Page$1 = Page;