@makeswift/runtime 0.6.4 → 0.6.5

package/dist/index.cjs.js

@@ -265,14 +265,44 @@ const deepEqual = (a, b) => {
   }
   return true;
 };
-function getInitialState(serializedState = []) {
-  return new Map(serializedState.map(([resourceType, resources]) => [resourceType, new Map(resources)]));
+function getInitialState(serializedState = {
+  Swatch: [],
+  File: [],
+  Typography: [],
+  PagePathnameSlice: [],
+  GlobalElement: [],
+  Table: [],
+  Snippet: [],
+  Page: [],
+  Site: []
+}) {
+  return new Map(Object.entries(serializedState).map(([apiResourceType, resources]) => [
+    apiResourceType,
+    new Map(resources.map(({ id, value }) => [id, value]))
+  ]));
 }
 function getSerializedState$1(state) {
-  return Array.from(state.entries()).map(([resourceType, resources]) => [
-    resourceType,
-    Array.from(resources.entries())
-  ]);
+  const resourceMap = {
+    Swatch: [],
+    File: [],
+    Typography: [],
+    PagePathnameSlice: [],
+    GlobalElement: [],
+    Table: [],
+    Snippet: [],
+    Page: [],
+    Site: []
+  };
+  Array.from(state.entries()).forEach(([resourceType, resources]) => {
+    const particularResourceMap = [];
+    Array.from(resources.entries()).forEach(([id, value]) => {
+      if (value != null) {
+        particularResourceMap.push({ id, value });
+      }
+    });
+    resourceMap[resourceType] = particularResourceMap;
+  });
+  return resourceMap;
 }
 function getHasAPIResource$1(state, resourceType, resourceId) {
   var _a, _b;
@@ -921,6 +951,159 @@ function Page$1({
     }, snippet.id))]
   });
 }
+function unstable_Page$1({
+  pageData
+}) {
+  var _a;
+  const isInBuilder = useIsInBuilder();
+  const [snippets, setSnippets] = React.useState(pageData.snapshot.resources.snippets);
+  const cachedPage = useCachedPage(isInBuilder ? pageData.pageId : null);
+  React.useEffect(() => {
+    if (cachedPage == null)
+      return;
+    const oldSnippets = snippets.map(filterUsedSnippetProperties);
+    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
+    if (deepEqual(newSnippets, oldSnippets))
+      return;
+    setSnippets(cachedPage.snippets);
+  }, [cachedPage]);
+  const site = useCachedSite(isInBuilder ? pageData.siteId : null);
+  const favicon = (_a = pageData.snapshot.resources.meta.favicon) != null ? _a : defaultFavicon;
+  const {
+    title,
+    description,
+    keywords,
+    socialImage
+  } = pageData.snapshot.resources.meta;
+  const {
+    canonicalUrl,
+    isIndexingBlocked
+  } = pageData.snapshot.resources.seo;
+  const fontFamilyParamValue = React.useMemo(() => {
+    if (site == null) {
+      return pageData.snapshot.resources.fonts.map(({
+        family,
+        variants
+      }) => {
+        return `${family.replace(/ /g, "+")}:${variants.join()}`;
+      }).join("|");
+    }
+    return site.googleFonts.edges.filter((edge) => edge != null).map(({
+      activeVariants,
+      node: {
+        family,
+        variants
+      }
+    }) => {
+      const activeVariantSpecifiers = variants.filter((variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)).map((variant) => variant.specifier).join();
+      return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
+    }).join("|");
+  }, [site, pageData.snapshot.resources.fonts]);
+  const filteredSnippets = React.useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
+  const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
+  const previousHeadSnippets = React.useRef(null);
+  React.useEffect(() => {
+    var _a2;
+    const headSnippetsToCleanUp = ((_a2 = previousHeadSnippets.current) != null ? _a2 : []).filter((previousSnippet) => previousSnippet.cleanup != null).filter((previousSnippet) => !headSnippets.some((snippet) => previousSnippet.id === snippet.id));
+    headSnippetsToCleanUp.forEach((snippetToCleanUp) => {
+      if (snippetToCleanUp.cleanup == null)
+        return;
+      const cleanUp = new Function(snippetToCleanUp.cleanup);
+      try {
+        cleanUp();
+      } catch {
+      }
+    });
+    previousHeadSnippets.current = headSnippets;
+  }, [headSnippets]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs(Head__default["default"], {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("style", {
+        children: `
+            html {
+              font-family: sans-serif;
+            }
+            div#__next {
+              overflow: hidden;
+            }
+          `
+      }), /* @__PURE__ */ jsxRuntime.jsx("link", {
+        rel: "icon",
+        type: favicon.mimetype,
+        href: favicon.publicUrl
+      }), canonicalUrl && /* @__PURE__ */ jsxRuntime.jsx("link", {
+        rel: "canonical",
+        href: canonicalUrl
+      }), isIndexingBlocked && /* @__PURE__ */ jsxRuntime.jsx("meta", {
+        name: "robots",
+        content: "noindex"
+      }), title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("title", {
+          children: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:title",
+          content: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:title",
+          content: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "name",
+          content: title
+        })]
+      }), description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "description",
+          content: description
+        })]
+      }), keywords && /* @__PURE__ */ jsxRuntime.jsx("meta", {
+        name: "keywords",
+        content: keywords
+      }), socialImage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:image:type",
+          content: socialImage.mimetype
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:card",
+          content: "summary_large_image"
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "image",
+          content: socialImage.publicUrl
+        })]
+      }), fontFamilyParamValue !== "" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /* @__PURE__ */ jsxRuntime.jsx("link", {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
+        })
+      }), headSnippets.map(snippetToElement).map((children) => React.Children.map(children, (child) => {
+        if (typeof child === "string")
+          return child;
+        if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
+          return child;
+        return null;
+      }))]
+    }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
+      documentReference: constants.createDocumentReference(pageData.pageId)
+    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
+      code: snippet.code,
+      cleanup: snippet.cleanup
+    }, snippet.id))]
+  });
+}
 function useCachedPage(pageId) {
   const client = useMakeswiftClient();
   const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
@@ -933,6 +1116,7 @@ function useCachedSite(siteId) {
   const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
+const version = "0.6.5";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -986,6 +1170,199 @@ Received "${apiKey}" instead.`);
     const snapshot = this.getPageSnapshotByPageId(page.id, { preview });
     return snapshot;
   }
+  async unstable_getPageData(path, { preview } = {}) {
+    const [page] = await this.getPages({ path });
+    if (page == null)
+      return null;
+    const document2 = await this.getDocumentForPage(page.id);
+    const snapshot = await this.unstable_createSnapshotForPage({ document: document2, pageId: page.id });
+    return {
+      pageId: page.id,
+      siteId: document2.site.id,
+      snapshot,
+      options: { preview: preview || false, apiOrigin: this.apiOrigin.href }
+    };
+  }
+  async getDocumentForPage(pageId) {
+    const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
+    if (!response.ok) {
+      if (response.status === 404)
+        throw Error("bad");
+      throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
+    }
+    const document2 = await response.json();
+    return document2;
+  }
+  async unstable_createSnapshotForPage({
+    document: document2,
+    pageId
+  }) {
+    let fetchedDocument = document2;
+    if (fetchedDocument == null) {
+      const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error("Not found");
+        }
+        throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
+      }
+      fetchedDocument = await response.json();
+    }
+    if (fetchedDocument == null) {
+      throw Error("fetchedDocument should never be null");
+    }
+    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
+    const prefetchedResources = await client.prefetch(fetchedDocument.data);
+    const resources = __spreadProps(__spreadValues({}, prefetchedResources), {
+      snippets: fetchedDocument.snippets,
+      meta: fetchedDocument.meta,
+      seo: fetchedDocument.seo,
+      fonts: fetchedDocument.fonts
+    });
+    return { resources, elementTree: fetchedDocument.data, runtimeVersion: version };
+  }
+  async unstable_createSnapshot({
+    publishedResources,
+    deletedResources,
+    publishedElementTree,
+    currentSnapshot
+  }) {
+    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
+    function normalizeToMakeswiftResources(partialResources) {
+      const resources2 = {
+        Swatch: (partialResources == null ? void 0 : partialResources.Swatch) || [],
+        File: (partialResources == null ? void 0 : partialResources.File) || [],
+        Typography: (partialResources == null ? void 0 : partialResources.Typography) || [],
+        PagePathnameSlice: (partialResources == null ? void 0 : partialResources.PagePathnameSlice) || [],
+        GlobalElement: (partialResources == null ? void 0 : partialResources.GlobalElement) || [],
+        Table: (partialResources == null ? void 0 : partialResources.Table) || [],
+        Snippet: (partialResources == null ? void 0 : partialResources.Snippet) || [],
+        Page: (partialResources == null ? void 0 : partialResources.Page) || [],
+        Site: (partialResources == null ? void 0 : partialResources.Site) || [],
+        snippets: (partialResources == null ? void 0 : partialResources.snippets) || [],
+        fonts: (partialResources == null ? void 0 : partialResources.fonts) || [],
+        meta: (partialResources == null ? void 0 : partialResources.meta) || {},
+        seo: (partialResources == null ? void 0 : partialResources.seo) || {}
+      };
+      return resources2;
+    }
+    function mergeResources({
+      resourcesFromPublishedElementTree: resourcesFromPublishedElementTree2,
+      resourcesFromCurrentSnapshot: resourcesFromCurrentSnapshot2,
+      publishedResources: publishedResources2,
+      deletedResources: deletedResources2
+    }) {
+      function mergeElementTreeResource(resourceSet, deletedResources3) {
+        const map = new Map(resourceSet.map(({ id, value }) => [id, value]));
+        deletedResources3.forEach(({ id }) => map.delete(id));
+        const finalResourceSet = [];
+        Array.from(map.entries()).forEach(([id, value]) => {
+          if (value != null) {
+            finalResourceSet.push({ id, value });
+          }
+        });
+        return finalResourceSet;
+      }
+      function mergeSnippets(snippets, deletedSnippet) {
+        const map = new Map(snippets.map((value) => [value.id, value]));
+        deletedSnippet.forEach(({ id }) => map.delete(id));
+        const uniqueSnippets = [];
+        Array.from(map.entries()).forEach(([_, value]) => {
+          uniqueSnippets.push(value);
+        });
+        return uniqueSnippets;
+      }
+      function mergeFonts(fonts, deletedFonts) {
+        const map = new Map(fonts.map((value) => [value.family, value]));
+        deletedFonts.forEach(({ family }) => map.delete(family));
+        const uniqueFonts = [];
+        Array.from(map.entries()).forEach(([_, value]) => {
+          uniqueFonts.push(value);
+        });
+        return uniqueFonts;
+      }
+      const resources2 = {
+        Swatch: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.Swatch,
+          ...resourcesFromCurrentSnapshot2.Swatch,
+          ...publishedResources2.Swatch
+        ], deletedResources2.Swatch),
+        File: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.File,
+          ...resourcesFromCurrentSnapshot2.File,
+          ...publishedResources2.File
+        ], deletedResources2.File),
+        Typography: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.Typography,
+          ...resourcesFromCurrentSnapshot2.Typography,
+          ...publishedResources2.Typography
+        ], deletedResources2.Typography),
+        PagePathnameSlice: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.PagePathnameSlice,
+          ...resourcesFromCurrentSnapshot2.PagePathnameSlice,
+          ...publishedResources2.PagePathnameSlice
+        ], deletedResources2.PagePathnameSlice),
+        GlobalElement: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.GlobalElement,
+          ...resourcesFromCurrentSnapshot2.GlobalElement,
+          ...publishedResources2.GlobalElement
+        ], deletedResources2.GlobalElement),
+        Table: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.Table,
+          ...resourcesFromCurrentSnapshot2.Table,
+          ...publishedResources2.Table
+        ], deletedResources2.Table),
+        snippets: mergeSnippets([
+          ...resourcesFromCurrentSnapshot2.snippets,
+          ...resourcesFromPublishedElementTree2.snippets,
+          ...publishedResources2.snippets
+        ], deletedResources2.snippets),
+        fonts: mergeFonts([
+          ...resourcesFromCurrentSnapshot2.fonts,
+          ...resourcesFromPublishedElementTree2.fonts,
+          ...publishedResources2.fonts
+        ], deletedResources2.fonts),
+        meta: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.meta), publishedResources2.meta),
+        seo: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.seo), publishedResources2.seo),
+        Snippet: [],
+        Page: [],
+        Site: []
+      };
+      return resources2;
+    }
+    const resourcesFromPublishedElementTree = publishedElementTree != null ? normalizeToMakeswiftResources(await client.prefetch(publishedElementTree)) : normalizeToMakeswiftResources({});
+    const resourcesFromCurrentSnapshot = normalizeToMakeswiftResources((currentSnapshot == null ? void 0 : currentSnapshot.resources) || {});
+    const resources = mergeResources({
+      resourcesFromPublishedElementTree,
+      resourcesFromCurrentSnapshot,
+      publishedResources: normalizeToMakeswiftResources(publishedResources),
+      deletedResources: normalizeToMakeswiftResources(deletedResources)
+    });
+    const elementTree = publishedElementTree || (currentSnapshot == null ? void 0 : currentSnapshot.elementTree);
+    if (elementTree == null) {
+      throw Error("elementTree should not be null; something went wrong.");
+    }
+    return {
+      resources,
+      elementTree,
+      runtimeVersion: version
+    };
+  }
+  unstable_getSnapshotResourceMapping(snapshot) {
+    const resources = snapshot.resources;
+    function parseResourceIds({ id }) {
+      return id;
+    }
+    return [
+      ...resources.Swatch.map(parseResourceIds),
+      ...resources.File.map(parseResourceIds),
+      ...resources.Typography.map(parseResourceIds),
+      ...resources.PagePathnameSlice.map(parseResourceIds),
+      ...resources.GlobalElement.map(parseResourceIds),
+      ...resources.Table.map(parseResourceIds),
+      ...resources.snippets.map(parseResourceIds)
+    ];
+  }
 }
 function PreviewModeScript({
   isPreview = false,
@@ -1114,11 +1491,14 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.6.4";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
-function MakeswiftApiHandler(apiKey, { appOrigin = "https://app.makeswift.com", getFonts } = {}) {
+function MakeswiftApiHandler(apiKey, {
+  appOrigin = "https://app.makeswift.com",
+  apiOrigin = "https://api.makeswift.com",
+  getFonts
+} = {}) {
   const cors = Cors__default["default"]({ origin: appOrigin });
   const previewModeProxy = httpProxy.createProxyServer();
   previewModeProxy.on("proxyReq", (proxyReq) => {
@@ -1228,6 +1608,35 @@ Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-r
         const response = { elementTree: generatedElementTree };
         return res.json(response);
       }
+      case "snapshot": {
+        let validateBody = function(body2) {
+          if (body2.pageId == null) {
+            return res.status(400).json({ message: "Must define pageId." });
+          }
+          if (body2.currentSnapshot == null && body2.publishedElementTree == null) {
+            return res.status(400).json({ message: "Either currentSnapshot or publishedElementTree must be defined." });
+          }
+        };
+        const body = req.body;
+        validateBody(body);
+        const client = new Makeswift(apiKey, {
+          apiOrigin
+        });
+        const snapshot = await client.unstable_createSnapshot({
+          publishedResources: body.publishedResources,
+          deletedResources: body.deletedResources,
+          publishedElementTree: body.publishedElementTree,
+          currentSnapshot: body.currentSnapshot
+        });
+        const usedResources = client.unstable_getSnapshotResourceMapping(snapshot);
+        const response = {
+          pageId: body.pageId,
+          snapshot,
+          livePageChanges: body.livePageChanges,
+          usedResources
+        };
+        return res.json(response);
+      }
       default:
         return res.status(404).json({ message: "Not Found" });
     }
@@ -1362,6 +1771,37 @@ const Page = React.memo(({
     }, snapshot.document.data.key)
   });
 });
+const unstable_Page = React.memo(({
+  pageData
+}) => {
+  function resourcesToCacheData(resources) {
+    if (resources == null)
+      return void 0;
+    return {
+      Swatch: resources.Swatch,
+      File: resources.File,
+      Typography: resources.Typography,
+      PagePathnameSlice: resources.PagePathnameSlice,
+      GlobalElement: resources.GlobalElement,
+      Table: resources.Table,
+      Snippet: resources.Snippet,
+      Page: resources.Page,
+      Site: resources.Site
+    };
+  }
+  const client = React.useMemo(() => new MakeswiftClient({
+    uri: new URL("graphql", pageData.options.apiOrigin).href,
+    cacheData: resourcesToCacheData(pageData.snapshot.resources)
+  }), [pageData]);
+  return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
+    client,
+    rootElements: /* @__PURE__ */ new Map([[pageData.pageId, pageData.snapshot.elementTree]]),
+    preview: pageData.options.preview,
+    children: /* @__PURE__ */ jsxRuntime.jsx(unstable_Page$1, {
+      pageData
+    })
+  });
+});
 const keys = (o) => Object.keys(o);
 const coalesce = (...args) => {
   let i;
@@ -3849,6 +4289,8 @@ exports.responsiveTextStyle = responsiveTextStyle;
 exports.responsiveWidth = responsiveWidth;
 exports.shallowMergeFallbacks = shallowMergeFallbacks;
 exports.storeContextDefaultValue = storeContextDefaultValue;
+exports.unstable_Page = unstable_Page$1;
+exports.unstable_Page$1 = unstable_Page;
 exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
 exports.useBuilderEditMode = useBuilderEditMode;