@makeswift/runtime 0.24.7-canary.1 → 0.24.7-canary.2

package/dist/esm/client/index.js

@@ -0,0 +1,671 @@
+import { z } from "zod";
+import {
+  APIResourceType
+} from "../api";
+import { GraphQLClient } from "../api/graphql/client";
+import { FileQuery, IntrospectedResourcesQuery, TableQuery } from "../api/graphql/documents";
+import { CacheData } from "../api/react";
+import {
+  getElementChildren,
+  getSwatchIds,
+  getFileIds,
+  getPageIds,
+  getTableIds,
+  getTypographyIds
+} from "../prop-controllers/introspection";
+import {
+  getPropControllerDescriptors,
+  isElementReference
+} from "../state/react-page";
+import { MakeswiftSiteVersion } from "../api/site-version";
+import { toIterablePaginationResult } from "../utils/pagination";
+import { deterministicUUID } from "../utils/deterministic-uuid";
+import { Schema } from "@makeswift/controls";
+import { EMBEDDED_DOCUMENT_TYPE } from "../state/modules/read-only-documents";
+const makeswiftPageResultSchema = z.object({
+  id: z.string(),
+  path: z.string(),
+  title: z.string().nullable(),
+  description: z.string().nullable(),
+  canonicalUrl: z.string().nullable(),
+  socialImageUrl: z.string().nullable(),
+  sitemapPriority: z.number().nullable(),
+  sitemapFrequency: z.enum(["always", "hourly", "daily", "weekly", "monthly", "yearly", "never"]).nullable(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+  publishedAt: z.string().nullable(),
+  isOnline: z.boolean().nullable(),
+  excludedFromSearch: z.boolean().nullable(),
+  locale: z.string(),
+  localizedVariants: z.array(
+    z.object({
+      locale: z.string(),
+      path: z.string()
+    })
+  )
+});
+const makeswiftGetPagesResultAPISchema = z.object({
+  data: z.array(makeswiftPageResultSchema),
+  hasMore: z.boolean()
+});
+const makeswiftGetPagesParamsSchema = z.object({
+  limit: z.number().optional(),
+  after: z.string().optional(),
+  sortBy: z.enum(["title", "path", "description", "createdAt", "updatedAt"]).optional(),
+  sortDirection: z.enum(["asc", "desc"]).optional(),
+  includeOffline: z.boolean().optional(),
+  pathPrefix: z.string().optional(),
+  locale: z.string().optional()
+});
+function getPagesQueryParams({
+  limit = 20,
+  after,
+  sortBy,
+  sortDirection,
+  includeOffline,
+  pathPrefix,
+  locale
+}) {
+  const params = new URLSearchParams();
+  if (limit != null)
+    params.set("limit", limit.toString());
+  if (after != null)
+    params.set("after", after);
+  if (sortBy != null)
+    params.set("sortBy", sortBy);
+  if (sortDirection != null)
+    params.set("sortDirection", sortDirection);
+  if (includeOffline != null)
+    params.set("includeOffline", includeOffline.toString());
+  if (pathPrefix != null)
+    params.set("pathPrefix", pathPrefix);
+  if (locale != null)
+    params.set("locale", locale);
+  return params;
+}
+function pageToRootDocument(pageDocument) {
+  const { locale, localizedPages, id, data } = pageDocument;
+  const localizedPage = localizedPages.find(({ parentId }) => parentId == null);
+  return localizedPage ? { key: localizedPage.elementTreeId, rootElement: localizedPage.data, locale } : { key: id, rootElement: data, locale };
+}
+const makeswiftComponentDocumentSchema = z.object({
+  id: z.string(),
+  name: z.string().nullable(),
+  locale: z.string().nullable(),
+  data: Schema.element,
+  siteId: z.string(),
+  inheritsFromParent: z.boolean()
+});
+const makeswiftComponentDocumentFallbackSchema = z.object({
+  id: z.string(),
+  locale: z.string().nullable(),
+  data: z.null()
+});
+function componentDocumentToRootEmbeddedDocument({
+  document,
+  documentKey,
+  name,
+  type,
+  meta
+}) {
+  const { data: rootElement, locale, id } = document;
+  if (rootElement != null && rootElement.type !== type) {
+    throw new Error(
+      `Type "${rootElement.type}" does not match the expected type "${type}" from the snapshot`
+    );
+  }
+  const rootDocument = {
+    key: documentKey,
+    rootElement: rootElement ?? {
+      // Fallback rootElement
+      // Create a stable uuid so two different clients will have the same empty element data.
+      // This is needed to make presence feature work for an element that is not yet created.
+      key: deterministicUUID({ id, locale, seed: documentKey }),
+      type,
+      props: {}
+    },
+    locale,
+    id,
+    type,
+    name,
+    meta,
+    __type: EMBEDDED_DOCUMENT_TYPE
+  };
+  return rootDocument;
+}
+async function failedResponseBody(response) {
+  try {
+    const text = await response.text();
+    try {
+      return JSON.parse(text);
+    } catch {
+      return text;
+    }
+  } catch (e) {
+    return `Failed to extract response body: ${e}`;
+  }
+}
+function responseError(response) {
+  return `${response.status} ${response.statusText}`;
+}
+const pagePathnameSlicesAPISchema = z.array(
+  z.object({
+    id: z.string(),
+    basePageId: z.string(),
+    pathname: z.string(),
+    localizedPathname: z.string().optional(),
+    __typename: z.literal("PagePathnameSlice")
+  }).nullable()
+);
+const getPageAPISchema = z.object({
+  pathname: z.string(),
+  locale: z.string(),
+  alternate: z.array(
+    z.object({
+      pathname: z.string(),
+      locale: z.string()
+    })
+  )
+});
+class MakeswiftClient {
+  graphqlClient;
+  runtime;
+  apiKey;
+  apiOrigin;
+  constructor(apiKey, { apiOrigin = "https://api.makeswift.com", runtime }) {
+    if (typeof apiKey !== "string") {
+      throw new Error(
+        `The Makeswift client must be passed a valid Makeswift site API key: \`new Makeswift('<makeswift_site_api_key>')\`
+Received "${apiKey}" instead.`
+      );
+    }
+    this.apiKey = apiKey;
+    try {
+      this.apiOrigin = new URL(apiOrigin);
+    } catch {
+      throw new Error(
+        `The Makeswift client received an invalid \`apiOrigin\` parameter: "${apiOrigin}".`
+      );
+    }
+    this.graphqlClient = new GraphQLClient(new URL("graphql", apiOrigin).href);
+    this.runtime = runtime;
+  }
+  async fetch(path, siteVersion) {
+    const response = await fetch(new URL(path, this.apiOrigin).toString(), {
+      headers: {
+        ["X-API-Key"]: this.apiKey,
+        "Makeswift-Site-API-Key": this.apiKey,
+        "Makeswift-Site-Version": siteVersion
+      },
+      ...siteVersion === MakeswiftSiteVersion.Working ? { cache: "no-store" } : {},
+      ...this.fetchOptions(siteVersion)
+    });
+    return response;
+  }
+  /**
+   * Override this method to provide additional fetch options, e.g. revalidation, cache tags, etc.
+   */
+  fetchOptions(_siteVersion) {
+    return {};
+  }
+  getPagesInternal = async ({
+    siteVersion = MakeswiftSiteVersion.Live,
+    ...params
+  } = {}) => {
+    const queryParams = getPagesQueryParams(params);
+    const response = await this.fetch(`v4/pages?${queryParams.toString()}`, siteVersion);
+    if (!response.ok) {
+      console.error("Failed to get pages", {
+        response: await failedResponseBody(response),
+        siteVersion,
+        params
+      });
+      throw new Error(`Failed to get pages: ${responseError(response)}`);
+    }
+    const result = await response.json();
+    const parsedResponse = makeswiftGetPagesResultAPISchema.safeParse(result);
+    if (!parsedResponse.success) {
+      throw new Error(
+        `Failed to parse 'getPages' response: ${parsedResponse.error.errors.map((e) => e.message).join("; ")}`
+      );
+    }
+    return parsedResponse.data;
+  };
+  getPages = toIterablePaginationResult(this.getPagesInternal);
+  async getPage(pathname, {
+    siteVersion = MakeswiftSiteVersion.Live,
+    locale
+  } = {}) {
+    const url = new URL(`v2/pages/${encodeURIComponent(pathname)}`, this.apiOrigin);
+    if (locale)
+      url.searchParams.set("locale", locale);
+    const response = await this.fetch(url.pathname + url.search, siteVersion);
+    if (!response.ok) {
+      if (response.status === 404)
+        return null;
+      console.error(`Failed to get page snapshot for '${pathname}'`, {
+        response: await failedResponseBody(response),
+        siteVersion,
+        locale
+      });
+      throw new Error(`Failed to get page snapshot for '${pathname}': ${responseError(response)}`);
+    }
+    const json = await response.json();
+    return getPageAPISchema.parse(json);
+  }
+  async getTypographies(typographyIds, siteVersion) {
+    if (typographyIds.length === 0)
+      return [];
+    const url = new URL(`v2/typographies/bulk`, this.apiOrigin);
+    typographyIds.forEach((id) => {
+      url.searchParams.append("ids", id);
+    });
+    const response = await this.fetch(url.pathname + url.search, siteVersion);
+    if (!response.ok) {
+      console.error(`Failed to get typographies for [${typographyIds.join(", ")}]`, {
+        response: await failedResponseBody(response),
+        siteVersion
+      });
+      return [];
+    }
+    const body = await response.json();
+    return body;
+  }
+  async getSwatches(ids, siteVersion) {
+    if (ids.length === 0)
+      return [];
+    const url = new URL(`v2/swatches/bulk`, this.apiOrigin);
+    ids.forEach((id) => {
+      url.searchParams.append("ids", id);
+    });
+    const response = await this.fetch(url.pathname + url.search, siteVersion);
+    if (!response.ok) {
+      console.error(`Failed to get swatches for ${ids.join(", ")}`, {
+        response: await failedResponseBody(response),
+        siteVersion
+      });
+      return [];
+    }
+    return await response.json();
+  }
+  async getIntrospectedResources({
+    swatchIds,
+    ...introspectedResourceIds
+  }, siteVersion) {
+    const result = await this.graphqlClient.request(IntrospectedResourcesQuery, introspectedResourceIds);
+    const swatches = await this.getSwatches(swatchIds, siteVersion);
+    return { ...result, swatches };
+  }
+  async introspect(element, siteVersion, locale) {
+    const runtime = this.runtime;
+    const descriptors = getPropControllerDescriptors(runtime.store.getState());
+    const swatchIds = /* @__PURE__ */ new Set();
+    const fileIds = /* @__PURE__ */ new Set();
+    const typographyIds = /* @__PURE__ */ new Set();
+    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;
+    while (current = remaining.pop()) {
+      let getResourcesFromElementDescriptors2 = function(elementDescriptors2, props) {
+        Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
+          getSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+            swatchIds.add(swatchId);
+          });
+          getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+          getTypographyIds(descriptor, props[propName]).forEach(
+            (typographyId) => typographyIds.add(typographyId)
+          );
+          getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+          getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+          getElementChildren(descriptor, props[propName]).forEach((child) => {
+            if (!seen.has(child.key)) {
+              seen.add(child.key);
+              remaining.push(child);
+            }
+          });
+        });
+      };
+      var getResourcesFromElementDescriptors = getResourcesFromElementDescriptors2;
+      let element2;
+      if (isElementReference(current)) {
+        const globalElementId = current.value;
+        const globalElement = await this.getGlobalElement(globalElementId, siteVersion);
+        let elementData = globalElement?.data;
+        if (locale) {
+          const localizedGlobalElement = await this.getLocalizedGlobalElement(
+            globalElementId,
+            locale,
+            siteVersion
+          );
+          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;
+      } else {
+        element2 = current;
+      }
+      const elementDescriptors = descriptors.get(element2.type);
+      if (elementDescriptors == null)
+        continue;
+      getResourcesFromElementDescriptors2(elementDescriptors, element2.props);
+    }
+    const typographies = await this.getTypographies([...typographyIds], siteVersion);
+    typographies.forEach((typography) => {
+      typography?.style.forEach((style) => {
+        const swatchId = style.value.color?.swatchId;
+        if (swatchId != null)
+          swatchIds.add(swatchId);
+      });
+    });
+    const pagePathnames = await this.getPagePathnameSlices([...pageIds], siteVersion, { locale });
+    const { swatches, files, tables } = await this.getIntrospectedResources(
+      {
+        swatchIds: [...swatchIds],
+        fileIds: [...fileIds],
+        tableIds: [...tableIds]
+      },
+      siteVersion
+    );
+    const apiResources = {
+      [APIResourceType.Swatch]: [...swatchIds].map((id) => ({
+        id,
+        value: swatches.find((swatch) => swatch?.id === id) ?? null
+      })),
+      [APIResourceType.File]: [...fileIds].map((id) => ({
+        id,
+        value: files.find((file) => file?.id === id) ?? null
+      })),
+      [APIResourceType.Typography]: [...typographyIds].map((id) => ({
+        id,
+        value: typographies.find((typography) => typography?.id === id) ?? null
+      })),
+      [APIResourceType.Table]: [...tableIds].map((id) => ({
+        id,
+        value: tables.find((table) => table?.id === id) ?? null
+      })),
+      [APIResourceType.PagePathnameSlice]: [...pageIds].map((id) => ({
+        id,
+        value: pagePathnames.find((pagePathnameSlice) => pagePathnameSlice?.id === id) ?? null,
+        locale
+      })),
+      [APIResourceType.GlobalElement]: [...globalElements.entries()].map(([id, value]) => ({
+        id,
+        value
+      })),
+      [APIResourceType.LocalizedGlobalElement]: [...localizedGlobalElements.entries()].map(
+        ([id, value]) => ({
+          id,
+          value,
+          locale
+        })
+      )
+    };
+    return {
+      apiResources,
+      localizedResourcesMap: locale != null ? { [locale]: Object.fromEntries(localizedResourcesMap.entries()) } : {}
+    };
+  }
+  async getPageSnapshot(pathname, {
+    siteVersion: siteVersionPromise,
+    locale,
+    allowLocaleFallback = true
+  }) {
+    const queryParams = () => {
+      const params = new URLSearchParams();
+      if (locale)
+        params.set("locale", locale);
+      if (allowLocaleFallback != null)
+        params.set("allowLocaleFallback", `${allowLocaleFallback}`);
+      return params.toString();
+    };
+    const siteVersion = await siteVersionPromise;
+    const response = await this.fetch(
+      `v3/pages/${encodeURIComponent(pathname)}/document?${queryParams()}`,
+      siteVersion
+    );
+    if (!response.ok) {
+      if (response.status === 404)
+        return null;
+      console.error(`Failed to get page snapshot for '${pathname}'`, {
+        response: await failedResponseBody(response),
+        siteVersion,
+        locale
+      });
+      throw new Error(`Failed to get page snapshot for '${pathname}': ${responseError(response)}`);
+    }
+    const document = await response.json();
+    const baseLocalizedPage = document.localizedPages.find(({ parentId }) => parentId == null);
+    const cacheData = await this.introspect(
+      baseLocalizedPage?.data ?? document.data,
+      siteVersion,
+      // The /v3/pages endpoint returns null for document.locale when the requested locale is the default.
+      // This legacy behavior is set to change with the upcoming /v4/pages endpoint.
+      // We rely on document.locale when reading from the API cache, so ensure the cache is built during
+      // introspection using the same value.
+      document.locale
+    );
+    return {
+      document,
+      cacheData
+    };
+  }
+  async getComponentSnapshot(id, {
+    siteVersion: siteVersionPromise,
+    locale,
+    allowLocaleFallback = true
+  }) {
+    const searchParams = new URLSearchParams();
+    if (locale)
+      searchParams.set("locale", locale);
+    const siteVersion = await siteVersionPromise;
+    const key = deterministicUUID({ id, locale, seed: this.apiKey.split("-").at(0) });
+    const baseLocaleWasRequested = locale == null;
+    const canAttemptLocaleFallback = !baseLocaleWasRequested && allowLocaleFallback;
+    let response;
+    const responseForRequestedLocale = await this.fetch(
+      `v1/element-trees/${encodeURIComponent(id)}?${searchParams.toString()}`,
+      siteVersion
+    );
+    if (responseForRequestedLocale.status === 404 && canAttemptLocaleFallback) {
+      response = await this.fetch(`v1/element-trees/${encodeURIComponent(id)}`, siteVersion);
+    } else {
+      response = responseForRequestedLocale;
+    }
+    if (!response.ok) {
+      if (response.status === 404) {
+        return {
+          document: {
+            id,
+            locale: locale ?? null,
+            data: null
+          },
+          key,
+          cacheData: CacheData.empty(),
+          meta: {
+            allowLocaleFallback,
+            requestedLocale: locale ?? null
+          }
+        };
+      }
+      console.error(`Failed to get component snapshot for '${id}':`, {
+        response: await failedResponseBody(response),
+        siteVersion,
+        locale
+      });
+      throw new Error(`Failed to get component snapshot for '${id}': ${responseError(response)}`);
+    }
+    const document = makeswiftComponentDocumentSchema.parse(await response.json());
+    const cacheData = await this.introspect(document.data, siteVersion, locale ?? null);
+    return {
+      document,
+      cacheData,
+      key,
+      meta: {
+        allowLocaleFallback,
+        requestedLocale: locale ?? null
+      }
+    };
+  }
+  async getSwatch(swatchId, siteVersion) {
+    const response = await this.fetch(`v2/swatches/${swatchId}`, siteVersion);
+    if (!response.ok) {
+      if (response.status !== 404) {
+        console.error(`Failed to get swatch '${swatchId}'`, {
+          response: await failedResponseBody(response),
+          siteVersion
+        });
+      }
+      return null;
+    }
+    const swatch = await response.json();
+    return swatch;
+  }
+  async getFile(fileId) {
+    const result = await this.graphqlClient.request(
+      FileQuery,
+      { fileId }
+    );
+    return result.file;
+  }
+  async getTypography(typographyId, siteVersion) {
+    const response = await this.fetch(`v2/typographies/${typographyId}`, siteVersion);
+    if (!response.ok) {
+      if (response.status !== 404) {
+        console.error(`Failed to get typography '${typographyId}'`, {
+          response: await failedResponseBody(response),
+          siteVersion
+        });
+      }
+      return null;
+    }
+    const typography = await response.json();
+    return typography;
+  }
+  async getGlobalElement(globalElementId, siteVersion) {
+    const response = await this.fetch(`v2/global-elements/${globalElementId}`, siteVersion);
+    if (!response.ok) {
+      if (response.status !== 404) {
+        console.error(`Failed to get global element '${globalElementId}'`, {
+          response: await failedResponseBody(response),
+          siteVersion
+        });
+      }
+      return null;
+    }
+    const globalElement = await response.json();
+    return globalElement;
+  }
+  async getLocalizedGlobalElement(globalElementId, locale, siteVersion) {
+    const response = await this.fetch(
+      `v2/localized-global-elements/${globalElementId}?locale=${locale}`,
+      siteVersion
+    );
+    if (!response.ok) {
+      if (response.status !== 404) {
+        console.error(`Failed to get localized global element '${globalElementId}'`, {
+          response: await failedResponseBody(response),
+          siteVersion,
+          locale
+        });
+      }
+      return null;
+    }
+    const localizedGlobalElement = await response.json();
+    return localizedGlobalElement;
+  }
+  async getPagePathnameSlices(pageIds, siteVersion, { locale }) {
+    if (pageIds.length === 0)
+      return [];
+    const url = new URL(`v2/page-pathname-slices/bulk`, this.apiOrigin);
+    pageIds.forEach((id) => url.searchParams.append("ids", id));
+    if (locale != null)
+      url.searchParams.set("locale", locale);
+    const response = await this.fetch(url.pathname + url.search, siteVersion);
+    if (!response.ok) {
+      console.error(`Failed to get page pathname slice(s) for ${pageIds.join(", ")}`, {
+        response: await failedResponseBody(response),
+        siteVersion,
+        locale
+      });
+      return [];
+    }
+    const json = await response.json();
+    const pagePathnameSlices = pagePathnameSlicesAPISchema.parse(json);
+    return pagePathnameSlices.map((pagePathnameSlice) => {
+      if (pagePathnameSlice == null)
+        return null;
+      return {
+        ...pagePathnameSlice,
+        id: pagePathnameSlice.basePageId,
+        localizedPathname: pagePathnameSlice.localizedPathname ?? null
+      };
+    });
+  }
+  async getPagePathnameSlice(pageId, siteVersion, { locale } = {}) {
+    const pagePathnameSlices = await this.getPagePathnameSlices([pageId], siteVersion, { locale });
+    return pagePathnameSlices.at(0) ?? null;
+  }
+  async getTable(tableId) {
+    const result = await this.graphqlClient.request(
+      TableQuery,
+      { tableId }
+    );
+    return result.table;
+  }
+  /**
+   * @deprecated `getSitemap` is deprecated. We recommend constructing a sitemap
+   * using data from `getPages` instead.
+   */
+  async getSitemap({
+    limit = 50,
+    after,
+    pathnamePrefix,
+    locale
+  } = {}) {
+    const url = new URL("v1/sitemap", this.apiOrigin);
+    url.searchParams.set("limit", limit.toString());
+    if (after != null)
+      url.searchParams.set("after", after);
+    if (pathnamePrefix != null)
+      url.searchParams.set("pathnamePrefix", pathnamePrefix);
+    if (locale != null)
+      url.searchParams.set("locale", locale);
+    const response = await this.fetch(url.pathname + url.search, MakeswiftSiteVersion.Live);
+    if (!response.ok) {
+      console.error("Failed to get sitemap ", {
+        response: await failedResponseBody(response),
+        limit,
+        after,
+        pathnamePrefix,
+        locale
+      });
+      throw new Error(`Failed to get sitemap with error: ${responseError(response)}`);
+    }
+    const sitemap = await response.json();
+    return sitemap;
+  }
+  getTranslatableData(elementTree) {
+    return this.runtime.getTranslatableData(elementTree);
+  }
+  mergeTranslatedData(elementTree, translatedData) {
+    return this.runtime.mergeTranslatedData(elementTree, translatedData);
+  }
+}
+export {
+  MakeswiftClient,
+  componentDocumentToRootEmbeddedDocument,
+  failedResponseBody,
+  pageToRootDocument
+};
+//# sourceMappingURL=index.js.map