@makeswift/runtime 0.9.4 → 0.9.6

package/dist/index.cjs.js

@@ -51,10 +51,8 @@ var types = require("./types.cjs.js");
 var state_breakpoints = require("./state/breakpoints.cjs.js");
 var boxModels = require("./box-models.cjs.js");
 var ColorHelper = require("color");
-var css = require("@emotion/css");
-require("@emotion/serialize");
-require("@emotion/utils");
 var scrollIntoView = require("scroll-into-view-if-needed");
+var css = require("@emotion/css");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
@@ -254,7 +252,7 @@ async function fetchJson(url) {
   }
   return response.json();
 }
-function fetchAPIResource(resourceType, resourceId) {
+function fetchAPIResource(resourceType, resourceId, locale) {
   return async (dispatch, getState) => {
     const state = getState();
     if (getHasAPIResource(state, resourceType, resourceId)) {
@@ -272,7 +270,7 @@ function fetchAPIResource(resourceType, resourceId) {
         resource = await fetchJson(`/api/makeswift/typographies/${resourceId}`);
         break;
       case types.APIResourceType.GlobalElement:
-        resource = await fetchJson(`/api/makeswift/global-elements/${resourceId}`);
+        resource = await fetchJson(`/api/makeswift/global-elements/${resourceId}?locale=${locale == null ? void 0 : locale.toString()}`);
         break;
       case types.APIResourceType.PagePathnameSlice:
         resource = await fetchJson(`/api/makeswift/page-pathname-slices/${resourceId}`);
@@ -366,6 +364,12 @@ const GlobalElementFragment = `
     __typename
     id
     data
+
+    localized(locale: $locale) {
+      __typename
+      id
+      data
+    }
   }
 `;
 const TableFragment = `
@@ -459,9 +463,15 @@ const TypographiesQuery = `
   ${TypographyFragment}
 `;
 const GlobalElementQuery = `
-  query GlobalElement($globalElementId: ID!) {
+  query GlobalElement($globalElementId: ID!, $locale: Locale) {
     globalElement(id: $globalElementId) {
       ...GlobalElement
+
+      localized(locale: $locale) {
+        __typename
+        id
+        data
+      }
     }
   }
 
@@ -479,16 +489,19 @@ const CreateTableRecordMutation = `
 class MakeswiftClient {
   constructor({
     uri,
-    cacheData
+    cacheData,
+    locale
   }) {
     __publicField(this, "graphqlClient");
     __publicField(this, "makeswiftApiClient");
     __publicField(this, "subscribe");
+    __publicField(this, "locale");
     this.graphqlClient = new GraphQLClient(uri);
     this.makeswiftApiClient = configureStore({
       serializedState: cacheData
     });
     this.subscribe = this.makeswiftApiClient.subscribe;
+    this.locale = locale;
   }
   readSwatch(swatchId) {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Swatch, swatchId);
@@ -512,7 +525,7 @@ class MakeswiftClient {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.GlobalElement, globalElementId);
   }
   async fetchGlobalElement(globalElementId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.GlobalElement, globalElementId));
+    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.GlobalElement, globalElementId, this.locale));
   }
   readPagePathnameSlice(pageId) {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.PagePathnameSlice, pageId);
@@ -599,7 +612,7 @@ const filterUsedSnippetProperties = ({
 function Page$1({
   document: page
 }) {
-  var _a;
+  var _a, _b;
   const isInBuilder = useIsInBuilder();
   const [snippets, setSnippets] = React.useState(page.snippets);
   const cachedPage = useCachedPage(isInBuilder ? page.id : null);
@@ -661,6 +674,10 @@ function Page$1({
     });
     previousHeadSnippets.current = headSnippets;
   }, [headSnippets]);
+  const baseLocalizedPage = page.localizedPages.find(({
+    parentId
+  }) => parentId == null);
+  const documentId = (_b = baseLocalizedPage == null ? void 0 : baseLocalizedPage.elementTreeId) != null ? _b : page.id;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsxs(Head__default["default"], {
       children: [/* @__PURE__ */ jsxRuntime.jsx("style", {
@@ -742,7 +759,7 @@ function Page$1({
         return null;
       }))]
     }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
-      documentReference: reactPage.createDocumentReference(page.id)
+      documentReference: reactPage.createDocumentReference(documentId)
     }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
       code: snippet.code,
       cleanup: snippet.cleanup
@@ -944,7 +961,8 @@ Received "${apiKey}" instead.`);
     const swatches = await this.getSwatches(swatchIds, preview);
     return __spreadProps(__spreadValues({}, result), { swatches });
   }
-  async introspect(element, preview) {
+  async introspect(element, preview, locale) {
+    var _a, _b;
     const runtime = this.runtime;
     const descriptors = reactPage.getPropControllerDescriptors(runtime.store.getState());
     const swatchIds = /* @__PURE__ */ new Set();
@@ -976,9 +994,9 @@ Received "${apiKey}" instead.`);
       };
       let element2;
       if (reactPage.isElementReference(current)) {
-        const globalElement = await this.getGlobalElement(current.value);
+        const globalElement = await this.getGlobalElement(current.value, locale);
         globalElements.set(current.value, globalElement);
-        const elementData = globalElement == null ? void 0 : globalElement.data;
+        const elementData = (_b = (_a = globalElement == null ? void 0 : globalElement.localized) == null ? void 0 : _a.data) != null ? _b : globalElement == null ? void 0 : globalElement.data;
         if (elementData == null)
           continue;
         element2 = elementData;
@@ -993,8 +1011,8 @@ Received "${apiKey}" instead.`);
     const typographies = await this.getTypographies([...typographyIds]);
     typographies.forEach((typography2) => {
       typography2 == null ? void 0 : typography2.style.forEach((style) => {
-        var _a;
-        const swatchId = (_a = style.value.color) == null ? void 0 : _a.swatchId;
+        var _a2;
+        const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
         if (swatchId != null)
           swatchIds.add(swatchId);
       });
@@ -1010,38 +1028,38 @@ Received "${apiKey}" instead.`);
     }));
     return {
       [types.APIResourceType.Swatch]: [...swatchIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a : null
+          value: (_a2 = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a2 : null
         };
       }),
       [types.APIResourceType.File]: [...fileIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a : null
+          value: (_a2 = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a2 : null
         };
       }),
       [types.APIResourceType.Typography]: [...typographyIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = typographies.find((typography2) => (typography2 == null ? void 0 : typography2.id) === id)) != null ? _a : null
+          value: (_a2 = typographies.find((typography2) => (typography2 == null ? void 0 : typography2.id) === id)) != null ? _a2 : null
         };
       }),
       [types.APIResourceType.Table]: [...tableIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a : null
+          value: (_a2 = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a2 : null
         };
       }),
       [types.APIResourceType.PagePathnameSlice]: [...pageIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a : null
+          value: (_a2 = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a2 : null
         };
       }),
       [types.APIResourceType.GlobalElement]: [...globalElements.entries()].map(([id, value]) => ({
@@ -1050,10 +1068,16 @@ Received "${apiKey}" instead.`);
       }))
     };
   }
-  async getPageSnapshot(pathname, { preview: previewOverride = false } = {}) {
+  async getPageSnapshot(pathname, {
+    preview: previewOverride = false,
+    unstable_locale
+  } = {}) {
     var _a;
     const siteVersion = (_a = this.siteVersion) != null ? _a : previewOverride ? MakeswiftSiteVersion.Working : MakeswiftSiteVersion.Live;
-    const response = await this.fetch(`/v2/pages/${encodeURIComponent(pathname)}/document`, {
+    const searchParams = new URLSearchParams();
+    if (unstable_locale)
+      searchParams.set("locale", unstable_locale);
+    const response = await this.fetch(`/v2/pages/${encodeURIComponent(pathname)}/document?${searchParams.toString()}`, {
       headers: { "Makeswift-Site-Version": siteVersion }
     });
     if (!response.ok) {
@@ -1063,10 +1087,10 @@ Received "${apiKey}" instead.`);
       throw new Error(`Failed to get page snapshot with error: "${response.statusText}"`);
     }
     const document2 = await response.json();
-    const cacheData = await this.introspect(document2.data, previewOverride);
+    const cacheData = await this.introspect(document2.data, previewOverride, unstable_locale);
     const apiOrigin = this.apiOrigin.href;
     const preview = siteVersion === MakeswiftSiteVersion.Working;
-    return { document: document2, cacheData, apiOrigin, preview };
+    return { document: document2, cacheData, apiOrigin, preview, locale: unstable_locale != null ? unstable_locale : null };
   }
   async getSwatch(swatchId) {
     const response = await this.fetch(`v1/swatches/${swatchId}`);
@@ -1086,8 +1110,8 @@ Received "${apiKey}" instead.`);
     const result = await this.graphqlClient.request(TypographyQuery, { typographyId });
     return result.typography;
   }
-  async getGlobalElement(globalElementId) {
-    const result = await this.graphqlClient.request(GlobalElementQuery, { globalElementId });
+  async getGlobalElement(globalElementId, locale) {
+    const result = await this.graphqlClient.request(GlobalElementQuery, { globalElementId, locale: locale != null ? locale : null });
     return result.globalElement;
   }
   async getPagePathnameSlice(pageId) {
@@ -1154,7 +1178,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.9.4";
+const version = "0.9.6";
 async function handler(req, res, { apiKey, unstable_siteVersions }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -1291,7 +1315,8 @@ Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/d
       return client.getTypography(m.params.id).then(handleResource);
     }
     if (m = matches("/global-elements/:id")) {
-      return client.getGlobalElement(m.params.id).then(handleResource);
+      const locale = typeof req.query.locale === "string" ? req.query.locale : void 0;
+      return client.getGlobalElement(m.params.id, locale).then(handleResource);
     }
     if (m = matches("/page-pathname-slices/:id")) {
       return client.getPagePathnameSlice(m.params.id).then(handleResource);
@@ -1423,11 +1448,16 @@ const Page = React.memo(({
 }) => {
   const client = React.useMemo(() => new MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
-    cacheData: snapshot.cacheData
+    cacheData: snapshot.cacheData,
+    locale: snapshot.locale == null ? void 0 : new Intl.Locale(snapshot.locale)
   }), [snapshot]);
+  const rootElements = /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]);
+  snapshot.document.localizedPages.forEach((localizedPage) => {
+    rootElements.set(localizedPage.elementTreeId, localizedPage.data);
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
     client,
-    rootElements: /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]),
+    rootElements,
     preview: snapshot.preview,
     runtime,
     children: /* @__PURE__ */ jsxRuntime.jsx(Page$1, {
@@ -3344,10 +3374,10 @@ function SlotPlaceholder({
 function useStyleControlCssObject(styleControlData, controlDefinition) {
   var _a;
   const breakpoints = useBreakpoints();
-  return __spreadValues(__spreadValues({}, controlDefinition.config.getStyle((_a = state_breakpoints.findBreakpointOverride(breakpoints, styleControlData, state_breakpoints.getBaseBreakpoint(breakpoints).id)) == null ? void 0 : _a.value)), breakpoints.reduce((styles, breakpoint) => {
+  return __spreadValues(__spreadValues({}, controlDefinition.config.getStyle((_a = state_breakpoints.findBreakpointOverride(breakpoints, styleControlData, state_breakpoints.getBaseBreakpoint(breakpoints).id, state_breakpoints.mergeOrCoalesceFallbacks)) == null ? void 0 : _a.value)), breakpoints.reduce((styles, breakpoint) => {
     var _a2;
     return __spreadProps(__spreadValues({}, styles), {
-      [state_breakpoints.getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle((_a2 = state_breakpoints.findBreakpointOverride(breakpoints, styleControlData, breakpoint.id)) == null ? void 0 : _a2.value)
+      [state_breakpoints.getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle((_a2 = state_breakpoints.findBreakpointOverride(breakpoints, styleControlData, breakpoint.id, state_breakpoints.mergeOrCoalesceFallbacks)) == null ? void 0 : _a2.value)
     });
   }, {}));
 }
@@ -3918,9 +3948,7 @@ class ReactRuntime {
     __publicField(this, "store");
     this.store = reactPage.configureStore({
       breakpoints: breakpoints ? state_breakpoints.parseBreakpointsInput(breakpoints) : void 0,
-      locales: unstable_i18n ? __spreadProps(__spreadValues({}, unstable_i18n), {
-        locale: null
-      }) : void 0
+      locales: unstable_i18n ? reactPage.parseLocalesInput(unstable_i18n) : void 0
     });
     registerBuiltinComponents(this);
   }
@@ -4085,8 +4113,9 @@ const DisableRegisterElement = React.createContext(false);
 const ElementReference = React.memo(React.forwardRef(function ElementReference2({
   elementReference
 }, ref) {
+  var _a, _b;
   const globalElement = useGlobalElement(elementReference.value);
-  const globalElementData = globalElement == null ? void 0 : globalElement.data;
+  const globalElementData = (_b = (_a = globalElement == null ? void 0 : globalElement.localized) == null ? void 0 : _a.data) != null ? _b : globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
   const documentKey = elementReference.key;
   const documentKeys = React.useContext(DocumentCyclesContext);
@@ -4220,6 +4249,7 @@ exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
 exports.getStaticProps = getStaticProps;
 exports.pollBoxModel = pollBoxModel;
+exports.shallowEqual = shallowEqual;
 exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
 exports.useBreakpoints = useBreakpoints;