@makeswift/runtime 0.9.8 → 0.9.10

package/dist/index.cjs.js

@@ -191,7 +191,8 @@ function getInitialState(serializedState = {
   Table: [],
   Snippet: [],
   Page: [],
-  Site: []
+  Site: [],
+  LocalizedGlobalElement: []
 }) {
   return new Map(Object.entries(serializedState).map(([apiResourceType, resources]) => [
     apiResourceType,
@@ -252,7 +253,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,6 +273,12 @@ function fetchAPIResource(resourceType, resourceId) {
       case types.APIResourceType.GlobalElement:
         resource = await fetchJson(`/api/makeswift/global-elements/${resourceId}`);
         break;
+      case types.APIResourceType.LocalizedGlobalElement: {
+        if (locale == null)
+          throw new Error("Locale is required to fetch LocalizedGlobalElement");
+        resource = await fetchJson(`/api/makeswift/localized-global-elements/${resourceId}/${locale}`);
+        break;
+      }
       case types.APIResourceType.PagePathnameSlice:
         resource = await fetchJson(`/api/makeswift/page-pathname-slices/${resourceId}`);
         break;
@@ -366,6 +373,13 @@ const GlobalElementFragment = `
     data
   }
 `;
+const LocalizedGlobalElementFragment = `
+  fragment LocalizedGlobalElement on LocalizedGlobalElement {
+    __typename
+    id
+    data
+  }
+`;
 const TableFragment = `
   fragment Table on Table {
     __typename
@@ -465,6 +479,15 @@ const GlobalElementQuery = `
 
   ${GlobalElementFragment}
 `;
+const LocalizedGlobalElementQuery = `
+  query LocalizedGlobalElement($globalElementId: ID!, $locale: Locale!) {
+    localizedGlobalElement(globalElementId: $globalElementId, locale: $locale) {
+      ...LocalizedGlobalElement
+    }
+  }
+
+  ${LocalizedGlobalElementFragment}
+`;
 const CreateTableRecordMutation = `
   mutation CreateTableRecord($input: CreateTableRecordInput!) {
     createTableRecord(input: $input) {
@@ -477,16 +500,22 @@ const CreateTableRecordMutation = `
 class MakeswiftClient {
   constructor({
     uri,
-    cacheData
+    cacheData,
+    localizedResourcesMap = {},
+    locale
   }) {
     __publicField(this, "graphqlClient");
     __publicField(this, "makeswiftApiClient");
     __publicField(this, "subscribe");
+    __publicField(this, "localizedResourcesMap");
+    __publicField(this, "locale");
     this.graphqlClient = new GraphQLClient(uri);
     this.makeswiftApiClient = configureStore({
       serializedState: cacheData
     });
     this.subscribe = this.makeswiftApiClient.subscribe;
+    this.localizedResourcesMap = new Map(Object.entries(localizedResourcesMap));
+    this.locale = locale;
   }
   readSwatch(swatchId) {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Swatch, swatchId);
@@ -512,6 +541,21 @@ class MakeswiftClient {
   async fetchGlobalElement(globalElementId) {
     return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.GlobalElement, globalElementId));
   }
+  readLocalizedGlobalElement(globalElementId) {
+    const localizedGlobalElementId = this.getLocalizedResourceId(globalElementId);
+    if (localizedGlobalElementId == null)
+      return null;
+    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.LocalizedGlobalElement, localizedGlobalElementId);
+  }
+  async fetchLocalizedGlobalElement(globalElementId) {
+    const locale = this.locale;
+    if (locale == null)
+      return null;
+    const result = await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.LocalizedGlobalElement, globalElementId, locale));
+    if (result != null)
+      this.setLocalizedResourceId(globalElementId, result.id);
+    return result;
+  }
   readPagePathnameSlice(pageId) {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.PagePathnameSlice, pageId);
   }
@@ -543,6 +587,13 @@ class MakeswiftClient {
   readSnippet(snippetId) {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Snippet, snippetId);
   }
+  getLocalizedResourceId(resourceId) {
+    var _a, _b;
+    return (_b = (_a = this.localizedResourcesMap) == null ? void 0 : _a.get(resourceId)) != null ? _b : null;
+  }
+  setLocalizedResourceId(resourceId, localizedResourceId) {
+    this.localizedResourcesMap.set(resourceId, localizedResourceId);
+  }
 }
 const Context$1 = React.createContext(new MakeswiftClient({
   uri: "https://api.makeswift.com/graphql"
@@ -597,7 +648,7 @@ const filterUsedSnippetProperties = ({
 function Page$1({
   document: page
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const isInBuilder = useIsInBuilder();
   const [snippets, setSnippets] = React.useState(page.snippets);
   const cachedPage = useCachedPage(isInBuilder ? page.id : null);
@@ -611,17 +662,16 @@ function Page$1({
     setSnippets(cachedPage.snippets);
   }, [cachedPage]);
   const site = useCachedSite(isInBuilder ? page.site.id : null);
+  const baseLocalizedPage = page.localizedPages.find(({
+    parentId
+  }) => parentId == null);
   const favicon = (_a = page.meta.favicon) != null ? _a : defaultFavicon;
-  const {
-    title,
-    description,
-    keywords,
-    socialImage
-  } = page.meta;
-  const {
-    canonicalUrl,
-    isIndexingBlocked
-  } = page.seo;
+  const title = (_b = baseLocalizedPage == null ? void 0 : baseLocalizedPage.meta.title) != null ? _b : page.meta.title;
+  const description = (_c = baseLocalizedPage == null ? void 0 : baseLocalizedPage.meta.description) != null ? _c : page.meta.description;
+  const keywords = (_d = baseLocalizedPage == null ? void 0 : baseLocalizedPage.meta.keywords) != null ? _d : page.meta.keywords;
+  const socialImage = (_e = baseLocalizedPage == null ? void 0 : baseLocalizedPage.meta.socialImage) != null ? _e : page.meta.socialImage;
+  const canonicalUrl = (_f = baseLocalizedPage == null ? void 0 : baseLocalizedPage.seo.canonicalUrl) != null ? _f : page.seo.canonicalUrl;
+  const isIndexingBlocked = (_g = baseLocalizedPage == null ? void 0 : baseLocalizedPage.seo.isIndexingBlocked) != null ? _g : page.seo.isIndexingBlocked;
   const fontFamilyParamValue = React.useMemo(() => {
     if (site == null) {
       return page.fonts.map(({
@@ -659,10 +709,7 @@ 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;
+  const documentId = (_h = baseLocalizedPage == null ? void 0 : baseLocalizedPage.elementTreeId) != null ? _h : page.id;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsxs(Head__default["default"], {
       children: [/* @__PURE__ */ jsxRuntime.jsx("style", {
@@ -946,7 +993,7 @@ Received "${apiKey}" instead.`);
     const swatches = await this.getSwatches(swatchIds, preview);
     return __spreadProps(__spreadValues({}, result), { swatches });
   }
-  async introspect(element, preview) {
+  async introspect(element, preview, locale) {
     const runtime = this.runtime;
     const descriptors = reactPage.getPropControllerDescriptors(runtime.store.getState());
     const swatchIds = /* @__PURE__ */ new Set();
@@ -955,6 +1002,8 @@ Received "${apiKey}" instead.`);
     const tableIds = /* @__PURE__ */ new Set();
     const pageIds = /* @__PURE__ */ new Set();
     const globalElements = /* @__PURE__ */ new Map();
+    const localizedGlobalElements = /* @__PURE__ */ new Map();
+    const localizedResourcesMap = /* @__PURE__ */ new Map();
     const remaining = [element];
     const seen = /* @__PURE__ */ new Set();
     let current;
@@ -978,9 +1027,18 @@ Received "${apiKey}" instead.`);
       };
       let element2;
       if (reactPage.isElementReference(current)) {
-        const globalElement = await this.getGlobalElement(current.value);
-        globalElements.set(current.value, globalElement);
-        const elementData = globalElement == null ? void 0 : globalElement.data;
+        const globalElementId = current.value;
+        const globalElement = await this.getGlobalElement(globalElementId);
+        let elementData = globalElement == null ? void 0 : globalElement.data;
+        if (locale) {
+          const localizedGlobalElement = await this.getLocalizedGlobalElement(globalElementId, locale);
+          if (localizedGlobalElement) {
+            elementData = localizedGlobalElement.data;
+            localizedResourcesMap.set(globalElementId, localizedGlobalElement.id);
+            localizedGlobalElements.set(localizedGlobalElement.id, localizedGlobalElement);
+          }
+        }
+        globalElements.set(globalElementId, globalElement);
         if (elementData == null)
           continue;
         element2 = elementData;
@@ -1010,7 +1068,7 @@ Received "${apiKey}" instead.`);
     const pagePathnameSlices = pagePathnamesById.map((pagePathnameSlice) => pagePathnameSlice && __spreadProps(__spreadValues({}, pagePathnameSlice), {
       id: Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64")
     }));
-    return {
+    const cacheData = {
       [types.APIResourceType.Swatch]: [...swatchIds].map((id) => {
         var _a;
         return {
@@ -1049,8 +1107,13 @@ Received "${apiKey}" instead.`);
       [types.APIResourceType.GlobalElement]: [...globalElements.entries()].map(([id, value]) => ({
         id,
         value
+      })),
+      [types.APIResourceType.LocalizedGlobalElement]: [...localizedGlobalElements.entries()].map(([id, value]) => ({
+        id,
+        value
       }))
     };
+    return { cacheData, localizedResourcesMap: Object.fromEntries(localizedResourcesMap.entries()) };
   }
   async getPageSnapshot(pathname, {
     preview: previewOverride = false,
@@ -1071,10 +1134,17 @@ 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, localizedResourcesMap } = 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,
+      localizedResourcesMap,
+      locale: unstable_locale != null ? unstable_locale : null
+    };
   }
   async getSwatch(swatchId) {
     const response = await this.fetch(`v1/swatches/${swatchId}`);
@@ -1098,6 +1168,10 @@ Received "${apiKey}" instead.`);
     const result = await this.graphqlClient.request(GlobalElementQuery, { globalElementId });
     return result.globalElement;
   }
+  async getLocalizedGlobalElement(globalElementId, locale) {
+    const result = await this.graphqlClient.request(LocalizedGlobalElementQuery, { globalElementId, locale });
+    return result.localizedGlobalElement;
+  }
   async getPagePathnameSlice(pageId) {
     var _a;
     const result = await this.graphqlClient.request(PagePathnamesByIdQuery, { pageIds: [pageId] });
@@ -1162,7 +1236,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.8";
+const version = "0.9.10";
 async function handler(req, res, { apiKey, unstable_siteVersions }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -1301,6 +1375,9 @@ Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/d
     if (m = matches("/global-elements/:id")) {
       return client.getGlobalElement(m.params.id).then(handleResource);
     }
+    if (m = matches("/localized-global-elements/:globalElementId/:locale")) {
+      return client.getLocalizedGlobalElement(m.params.globalElementId, m.params.locale).then(handleResource);
+    }
     if (m = matches("/page-pathname-slices/:id")) {
       return client.getPagePathnameSlice(m.params.id).then(handleResource);
     }
@@ -1431,7 +1508,8 @@ const Page = React.memo(({
 }) => {
   const client = React.useMemo(() => new MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
-    cacheData: snapshot.cacheData
+    cacheData: snapshot.cacheData,
+    localizedResourcesMap: snapshot.localizedResourcesMap
   }), [snapshot]);
   const rootElements = /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]);
   snapshot.document.localizedPages.forEach((localizedPage) => {
@@ -2587,6 +2665,17 @@ function useGlobalElement(globalElementId) {
   }, [client, globalElementId]);
   return globalElement;
 }
+function useLocalizedGlobalElement(globalElementId) {
+  const client = useMakeswiftClient();
+  const readLocalizedGlobalElement = () => globalElementId == null ? null : client.readLocalizedGlobalElement(globalElementId);
+  const localizedGlobalElement = shim.useSyncExternalStore(client.subscribe, readLocalizedGlobalElement, readLocalizedGlobalElement);
+  React.useEffect(() => {
+    if (globalElementId != null) {
+      client.fetchLocalizedGlobalElement(globalElementId).catch(console.error);
+    }
+  }, [client, globalElementId]);
+  return localizedGlobalElement;
+}
 function usePagePathnameSlice(pageId) {
   const client = useMakeswiftClient();
   const readPagePathnameSlice = () => pageId == null ? null : client.readPagePathnameSlice(pageId);
@@ -4103,8 +4192,10 @@ const DisableRegisterElement = React.createContext(false);
 const ElementReference = React.memo(React.forwardRef(function ElementReference2({
   elementReference
 }, ref) {
+  var _a;
   const globalElement = useGlobalElement(elementReference.value);
-  const globalElementData = globalElement == null ? void 0 : globalElement.data;
+  const localizedGlobalElement = useLocalizedGlobalElement(elementReference.value);
+  const globalElementData = (_a = localizedGlobalElement == null ? void 0 : localizedGlobalElement.data) != null ? _a : globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
   const documentKey = elementReference.key;
   const documentKeys = React.useContext(DocumentCyclesContext);