@makeswift/runtime 0.13.1 → 0.14.1

package/dist/esm/api/react.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import * as MakeswiftApiClient from "../state/makeswift-api-client";
+import {
+  APIResourceType
+} from "./graphql/types";
+import { GraphQLClient } from "./graphql/client";
+import { CreateTableRecordMutation } from "./graphql/documents";
+class MakeswiftClient {
+  graphqlClient;
+  makeswiftApiClient;
+  subscribe;
+  localizedResourcesMap;
+  locale;
+  constructor({ uri, cacheData, localizedResourcesMap = {}, locale }) {
+    this.graphqlClient = new GraphQLClient(uri);
+    this.makeswiftApiClient = MakeswiftApiClient.configureStore({ serializedState: cacheData });
+    this.subscribe = this.makeswiftApiClient.subscribe;
+    this.localizedResourcesMap = new Map(Object.entries(localizedResourcesMap));
+    this.locale = locale;
+  }
+  readSwatch(swatchId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.Swatch,
+      swatchId
+    );
+  }
+  async fetchSwatch(swatchId) {
+    return await this.makeswiftApiClient.dispatch(
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId)
+    );
+  }
+  readFile(fileId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.File,
+      fileId
+    );
+  }
+  async fetchFile(fileId) {
+    return await this.makeswiftApiClient.dispatch(
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId)
+    );
+  }
+  readTypography(typographyId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.Typography,
+      typographyId
+    );
+  }
+  async fetchTypography(typographyId) {
+    return await this.makeswiftApiClient.dispatch(
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.Typography, typographyId)
+    );
+  }
+  readGlobalElement(globalElementId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.GlobalElement,
+      globalElementId
+    );
+  }
+  async fetchGlobalElement(globalElementId) {
+    return await this.makeswiftApiClient.dispatch(
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.GlobalElement, globalElementId)
+    );
+  }
+  readLocalizedGlobalElement(globalElementId) {
+    const localizedGlobalElementId = this.getLocalizedResourceId(globalElementId);
+    if (localizedGlobalElementId == null)
+      return null;
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.LocalizedGlobalElement,
+      localizedGlobalElementId
+    );
+  }
+  async fetchLocalizedGlobalElement(globalElementId) {
+    const locale = this.locale;
+    if (locale == null)
+      return null;
+    const noLocalizedResource = this.getLocalizedResourceId(globalElementId) === null;
+    if (noLocalizedResource)
+      return null;
+    const cacheResult = this.readLocalizedGlobalElement(globalElementId);
+    if (cacheResult)
+      return cacheResult;
+    const result = await this.makeswiftApiClient.dispatch(
+      MakeswiftApiClient.fetchAPIResource(
+        APIResourceType.LocalizedGlobalElement,
+        globalElementId,
+        locale
+      )
+    );
+    this.setLocalizedResourceId({
+      resourceId: globalElementId,
+      localizedResourceId: result?.id ?? null
+    });
+    return result;
+  }
+  readPagePathnameSlice(pageId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.PagePathnameSlice,
+      pageId
+    );
+  }
+  async fetchPagePathnameSlice(pageId) {
+    return await this.makeswiftApiClient.dispatch(
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.PagePathnameSlice, pageId, this.locale)
+    );
+  }
+  readTable(tableId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.Table,
+      tableId
+    );
+  }
+  async fetchTable(tableId) {
+    return await this.makeswiftApiClient.dispatch(
+      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId)
+    );
+  }
+  async createTableRecord(tableId, columns) {
+    await this.graphqlClient.request(CreateTableRecordMutation, { input: { data: { tableId, columns } } });
+  }
+  readSite(siteId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.Site,
+      siteId
+    );
+  }
+  readPage(pageId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.Page,
+      pageId
+    );
+  }
+  readSnippet(snippetId) {
+    return MakeswiftApiClient.getAPIResource(
+      this.makeswiftApiClient.getState(),
+      APIResourceType.Snippet,
+      snippetId
+    );
+  }
+  getLocalizedResourceId(resourceId) {
+    return this.localizedResourcesMap?.get(resourceId);
+  }
+  setLocalizedResourceId({
+    resourceId,
+    localizedResourceId
+  }) {
+    this.localizedResourcesMap.set(resourceId, localizedResourceId);
+  }
+}
+const Context = createContext(new MakeswiftClient({ uri: "https://api.makeswift.com/graphql" }));
+function useMakeswiftClient() {
+  return useContext(Context);
+}
+function MakeswiftProvider({ client, children }) {
+  return /* @__PURE__ */ jsx(Context.Provider, { value: client, children });
+}
+export {
+  MakeswiftClient,
+  MakeswiftProvider,
+  useMakeswiftClient
+};
+//# sourceMappingURL=react.js.map

package/dist/esm/api/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/api/react.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, ReactNode, useContext } from 'react'\n\nimport * as MakeswiftApiClient from '../state/makeswift-api-client'\nimport {\n  APIResourceType,\n  File,\n  GlobalElement,\n  LocalizedGlobalElement,\n  Page,\n  PagePathnameSlice,\n  Site,\n  Snippet,\n  Swatch,\n  Table,\n  Typography,\n} from './graphql/types'\nimport { GraphQLClient } from './graphql/client'\nimport { CreateTableRecordMutation } from './graphql/documents'\nimport {\n  CreateTableRecordMutationResult,\n  CreateTableRecordMutationVariables,\n} from './graphql/generated/types'\n\nexport type SerializedLocalizedResourcesMap = {\n  [resourceId: string]: string | null\n}\n\ntype LocalizedResourcesMap = Map<string, string | null>\n\nexport type CacheData = MakeswiftApiClient.SerializedState\n\nexport type MakeswiftClientOptions = {\n  uri: string\n  cacheData?: CacheData\n  localizedResourcesMap?: SerializedLocalizedResourcesMap\n  locale?: Intl.Locale\n}\n\n/**\n * NOTE(miguel): This \"client\" is used to fetch Makeswift API resources needed for the host. For\n * example, swatches, files, typographies, etc. Ideally it's internal to the runtime and is only\n * used by controls to transform API references to API resources.\n *\n * Moreover, it's use should be reserved for the builder only, since for live pages all Makeswift\n * API resources should be embedded in the \"page snapshot\". In the builder, this client serves the\n * purpose of sending requests for API resources and keeping a cache so that changes that happen in\n * the builder, like modifying a swatch, can be sent via `postMessage` to the host and the cache can\n * immediately update the value and re-render.\n *\n * Furthermore, the API resources requested shouldn't be requested directly from the Makeswift API\n * as that would require those resources to not be authenticated since the requests come from the\n * browser when running the host. Instead, the requests should go to the host directly, at the\n * Makeswift API endpoint (i.g., `/api/makeswift/[...makeswift]` dynamic route) where the host's\n * API key can be used, securely, in the server. For this reason, this client should really be a\n * client of the host's API, not Makeswift's, intended to build and continuously maintain a realtime\n * snapshot for use in the builder, not the lives pages.\n */\nexport class MakeswiftClient {\n  graphqlClient: GraphQLClient\n  makeswiftApiClient: MakeswiftApiClient.Store\n  subscribe: MakeswiftApiClient.Store['subscribe']\n  private localizedResourcesMap: LocalizedResourcesMap\n  private locale: Intl.Locale | undefined\n\n  constructor({ uri, cacheData, localizedResourcesMap = {}, locale }: MakeswiftClientOptions) {\n    this.graphqlClient = new GraphQLClient(uri)\n    this.makeswiftApiClient = MakeswiftApiClient.configureStore({ serializedState: cacheData })\n    this.subscribe = this.makeswiftApiClient.subscribe\n    this.localizedResourcesMap = new Map(Object.entries(localizedResourcesMap))\n    this.locale = locale\n  }\n\n  readSwatch(swatchId: string): Swatch | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Swatch,\n      swatchId,\n    )\n  }\n\n  async fetchSwatch(swatchId: string): Promise<Swatch | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId),\n    )\n  }\n\n  readFile(fileId: string): File | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.File,\n      fileId,\n    )\n  }\n\n  async fetchFile(fileId: string): Promise<File | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId),\n    )\n  }\n\n  readTypography(typographyId: string): Typography | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Typography,\n      typographyId,\n    )\n  }\n\n  async fetchTypography(typographyId: string): Promise<Typography | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Typography, typographyId),\n    )\n  }\n\n  readGlobalElement(globalElementId: string): GlobalElement | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.GlobalElement,\n      globalElementId,\n    )\n  }\n\n  async fetchGlobalElement(globalElementId: string): Promise<GlobalElement | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.GlobalElement, globalElementId),\n    )\n  }\n\n  readLocalizedGlobalElement(globalElementId: string): LocalizedGlobalElement | null {\n    const localizedGlobalElementId = this.getLocalizedResourceId(globalElementId)\n\n    if (localizedGlobalElementId == null) return null\n\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.LocalizedGlobalElement,\n      localizedGlobalElementId,\n    )\n  }\n\n  async fetchLocalizedGlobalElement(\n    globalElementId: string,\n  ): Promise<LocalizedGlobalElement | null> {\n    const locale = this.locale\n\n    if (locale == null) return null\n\n    // If getLocalizedResourceId returns null, it means we have tried to fetch the resource,\n    // but the resource is not available. If we haven't fetched it yet, it'll return undefined.\n    const noLocalizedResource = this.getLocalizedResourceId(globalElementId) === null\n\n    if (noLocalizedResource) return null\n\n    // TODO(fikri): We're checking the cache here because the cache hit will fail on fetchAPIResource.\n    // This is because in the cache we're saving the ID of the localizedGlobalElementId,\n    // but we're reading the cache using the globalElementId.\n    // This is very confusing and it can lead to more bugs. We need to refactor how we handle\n    // localized global element.\n    const cacheResult = this.readLocalizedGlobalElement(globalElementId)\n\n    if (cacheResult) return cacheResult\n\n    const result = await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.LocalizedGlobalElement,\n        globalElementId,\n        locale,\n      ),\n    )\n\n    this.setLocalizedResourceId({\n      resourceId: globalElementId,\n      localizedResourceId: result?.id ?? null,\n    })\n\n    return result\n  }\n\n  readPagePathnameSlice(pageId: string): PagePathnameSlice | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.PagePathnameSlice,\n      pageId,\n    )\n  }\n\n  async fetchPagePathnameSlice(pageId: string): Promise<PagePathnameSlice | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.PagePathnameSlice, pageId, this.locale),\n    )\n  }\n\n  readTable(tableId: string): Table | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Table,\n      tableId,\n    )\n  }\n\n  async fetchTable(tableId: string): Promise<Table | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId),\n    )\n  }\n\n  async createTableRecord(tableId: string, columns: any): Promise<void> {\n    await this.graphqlClient.request<\n      CreateTableRecordMutationResult,\n      CreateTableRecordMutationVariables\n    >(CreateTableRecordMutation, { input: { data: { tableId, columns } } })\n  }\n\n  readSite(siteId: string): Site | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Site,\n      siteId,\n    )\n  }\n\n  readPage(pageId: string): Page | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Page,\n      pageId,\n    )\n  }\n\n  readSnippet(snippetId: string): Snippet | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Snippet,\n      snippetId,\n    )\n  }\n\n  private getLocalizedResourceId(resourceId: string): string | undefined | null {\n    return this.localizedResourcesMap?.get(resourceId)\n  }\n\n  setLocalizedResourceId({\n    resourceId,\n    localizedResourceId,\n  }: {\n    resourceId: string\n    localizedResourceId: string | null\n  }): void {\n    this.localizedResourcesMap.set(resourceId, localizedResourceId)\n  }\n}\n\nconst Context = createContext(new MakeswiftClient({ uri: 'https://api.makeswift.com/graphql' }))\n\nexport function useMakeswiftClient(): MakeswiftClient {\n  return useContext(Context)\n}\n\ntype MakeswiftProviderProps = {\n  client: MakeswiftClient\n  children: ReactNode\n}\n\nexport function MakeswiftProvider({ client, children }: MakeswiftProviderProps) {\n  return <Context.Provider value={client}>{children}</Context.Provider>\n}\n"],"mappings":"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","names":[]}

package/dist/esm/box-model.js

@@ -0,0 +1,7 @@
+import { createBox, getBox, parse } from "./state/modules/box-models";
+export {
+  createBox,
+  getBox,
+  parse
+};
+//# sourceMappingURL=box-model.js.map

package/dist/esm/box-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/box-model.ts"],"sourcesContent":["export { createBox, getBox, parse } from './state/modules/box-models'\nexport type { BoxModelHandle, BoxModel } from './state/modules/box-models'\n"],"mappings":"AAAA,SAAS,WAAW,QAAQ,aAAa;","names":[]}

package/dist/esm/builder/index.js

@@ -0,0 +1,2 @@
+export * from "./serialization";
+//# sourceMappingURL=index.js.map

package/dist/esm/builder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/builder/index.ts"],"sourcesContent":["export * from './serialization'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/builder/serialization/control-serialization.js

@@ -0,0 +1,434 @@
+import {
+  ComboboxControlType,
+  ListControlType,
+  RichTextV2ControlType,
+  ShapeControlType,
+  StyleV2ControlType
+} from "../../controls";
+import {
+  Props as Controls
+} from "../../prop-controllers";
+import {
+  deserializeComboboxControlDefinition,
+  serializeComboboxControlDefinition
+} from "./controls/combobox";
+import { deserializeListControlDefinition, serializeListControlDefinition } from "./controls/list";
+import { deserializeRichTextControlV2, serializeRichTextControlV2 } from "./controls/rich-text-v2";
+import {
+  deserializeShapeControlDefinition,
+  serializeShapeControlDefinition
+} from "./controls/shape";
+import { deserializeStyleV2Control, serializeStyleV2Control } from "./controls/style-v2";
+import {
+  deserializeFunction,
+  isSerializedFunction,
+  serializeFunction
+} from "./function-serialization";
+function serializeShapeControl(control) {
+  const { type } = control.options;
+  const transferables = [];
+  const serializedType = {};
+  Object.entries(type).forEach(([key, control2]) => {
+    const [serializedControl, serializedControlTransferables] = serializeControl(control2);
+    serializedType[key] = serializedControl;
+    transferables.push(...serializedControlTransferables);
+  });
+  return [{ ...control, options: { ...control.options, type: serializedType } }, transferables];
+}
+function deserializeShapeControl(control) {
+  const { type } = control.options;
+  const deserializedType = {};
+  Object.entries(type).forEach(([key, control2]) => {
+    deserializedType[key] = deserializeControl(
+      control2
+    );
+  });
+  return { ...control, options: { ...control.options, type: deserializedType } };
+}
+function serializeListControl(control) {
+  const { type, getItemLabel } = control.options;
+  const transferables = [];
+  const [serializedType, serializedTypeTransferables] = serializeControl(type);
+  const serializedGetItemLabel = getItemLabel && serializeFunction(getItemLabel);
+  transferables.push(...serializedTypeTransferables);
+  if (serializedGetItemLabel != null)
+    transferables.push(serializedGetItemLabel);
+  return [
+    {
+      ...control,
+      options: {
+        ...control.options,
+        type: serializedType,
+        getItemLabel: serializedGetItemLabel
+      }
+    },
+    transferables
+  ];
+}
+function deserializeListControl(serializedControl) {
+  const { type, getItemLabel } = serializedControl.options;
+  const deserializedType = deserializeControl(type);
+  const deserializedGetItemLabel = getItemLabel && deserializeFunction(getItemLabel);
+  return {
+    ...serializedControl,
+    options: {
+      ...serializedControl.options,
+      type: deserializedType,
+      getItemLabel: deserializedGetItemLabel
+    }
+  };
+}
+function serializeTypeaheadControl(control) {
+  const { getItems } = control.options;
+  const serializedGetItems = getItems && serializeFunction(getItems);
+  return [
+    { ...control, options: { ...control.options, getItems: serializedGetItems } },
+    serializedGetItems == null ? [] : [serializedGetItems]
+  ];
+}
+function deserializeTypeaheadControl(serializedControl) {
+  const { getItems } = serializedControl.options;
+  const deserializedGetItems = getItems && deserializeFunction(getItems);
+  return {
+    ...serializedControl,
+    options: { ...serializedControl.options, getItems: deserializedGetItems }
+  };
+}
+function serializeGapXControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeGapXControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeGapYControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeGapYControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeResponsiveNumberControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeResponsiveNumberControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeCheckboxControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeCheckboxControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeResponsiveColorControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeResponsiveColorControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeNumberControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeNumberControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeResponsiveIconRadioGroupControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeResponsiveIconRadioGroupControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeDateControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeDateControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeLinkControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeLinkControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeTextInputControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeTextInputControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeResponsiveSelectControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeResponsiveSelectControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeResponsiveLengthControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeResponsiveLengthControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeTextStyleControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeTextStyleControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeImageControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeImageControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeRichTextControl(control) {
+  const { options } = control;
+  if (typeof options !== "function")
+    return [{ ...control, options }, []];
+  const serializedOptions = serializeFunction(options);
+  return [{ ...control, options: serializedOptions }, [serializedOptions]];
+}
+function deserializeRichTextControl(serializedControl) {
+  const { options } = serializedControl;
+  if (!isSerializedFunction(options))
+    return { ...serializedControl, options };
+  const deserializedOptions = deserializeFunction(options);
+  return { ...serializedControl, options: deserializedOptions };
+}
+function serializeControl(control) {
+  switch (control.type) {
+    case Controls.Types.Checkbox:
+      return serializeCheckboxControl(control);
+    case Controls.Types.List:
+      return serializeListControl(control);
+    case Controls.Types.Shape:
+      return serializeShapeControl(control);
+    case Controls.Types.Typeahead:
+      return serializeTypeaheadControl(control);
+    case Controls.Types.GapX:
+      return serializeGapXControl(control);
+    case Controls.Types.GapY:
+      return serializeGapYControl(control);
+    case Controls.Types.ResponsiveColor:
+      return serializeResponsiveColorControl(control);
+    case Controls.Types.ResponsiveNumber:
+      return serializeResponsiveNumberControl(control);
+    case Controls.Types.Number:
+      return serializeNumberControl(control);
+    case Controls.Types.ResponsiveIconRadioGroup:
+      return serializeResponsiveIconRadioGroupControl(control);
+    case Controls.Types.ResponsiveSelect:
+      return serializeResponsiveSelectControl(control);
+    case Controls.Types.ResponsiveLength:
+      return serializeResponsiveLengthControl(control);
+    case Controls.Types.Date:
+      return serializeDateControl(control);
+    case Controls.Types.Link:
+      return serializeLinkControl(control);
+    case Controls.Types.TextInput:
+      return serializeTextInputControl(control);
+    case Controls.Types.TextStyle:
+      return serializeTextStyleControl(control);
+    case Controls.Types.Image:
+      return serializeImageControl(control);
+    case Controls.Types.RichText:
+      return serializeRichTextControl(control);
+    case RichTextV2ControlType:
+      return serializeRichTextControlV2(control);
+    case StyleV2ControlType:
+      return serializeStyleV2Control(control);
+    case ComboboxControlType:
+      return serializeComboboxControlDefinition(control);
+    case ShapeControlType:
+      return serializeShapeControlDefinition(control);
+    case ListControlType:
+      return serializeListControlDefinition(control);
+    default:
+      return [control, []];
+  }
+}
+function deserializeControl(serializedControl) {
+  switch (serializedControl.type) {
+    case Controls.Types.Checkbox:
+      return deserializeCheckboxControl(serializedControl);
+    case Controls.Types.List:
+      return deserializeListControl(serializedControl);
+    case Controls.Types.Shape:
+      return deserializeShapeControl(serializedControl);
+    case Controls.Types.Typeahead:
+      return deserializeTypeaheadControl(serializedControl);
+    case Controls.Types.GapX:
+      return deserializeGapXControl(serializedControl);
+    case Controls.Types.GapY:
+      return deserializeGapYControl(serializedControl);
+    case Controls.Types.ResponsiveColor:
+      return deserializeResponsiveColorControl(serializedControl);
+    case Controls.Types.ResponsiveNumber:
+      return deserializeResponsiveNumberControl(serializedControl);
+    case Controls.Types.Number:
+      return deserializeNumberControl(serializedControl);
+    case Controls.Types.ResponsiveIconRadioGroup:
+      return deserializeResponsiveIconRadioGroupControl(serializedControl);
+    case Controls.Types.ResponsiveSelect:
+      return deserializeResponsiveSelectControl(serializedControl);
+    case Controls.Types.ResponsiveLength:
+      return deserializeResponsiveLengthControl(serializedControl);
+    case Controls.Types.Date:
+      return deserializeDateControl(serializedControl);
+    case Controls.Types.Link:
+      return deserializeLinkControl(serializedControl);
+    case Controls.Types.TextInput:
+      return deserializeTextInputControl(serializedControl);
+    case Controls.Types.TextStyle:
+      return deserializeTextStyleControl(serializedControl);
+    case Controls.Types.Image:
+      return deserializeImageControl(serializedControl);
+    case Controls.Types.RichText:
+      return deserializeRichTextControl(serializedControl);
+    case RichTextV2ControlType:
+      return deserializeRichTextControlV2(serializedControl);
+    case StyleV2ControlType:
+      return deserializeStyleV2Control(serializedControl);
+    case ComboboxControlType:
+      return deserializeComboboxControlDefinition(serializedControl);
+    case ShapeControlType:
+      return deserializeShapeControlDefinition(serializedControl);
+    case ListControlType:
+      return deserializeListControlDefinition(serializedControl);
+    default:
+      return serializedControl;
+  }
+}
+function serializeControls(controls) {
+  return Object.entries(controls).reduce(
+    ([accControls, accTransferables], [key, control]) => {
+      const [serializedControl, transferables] = serializeControl(control);
+      return [{ ...accControls, [key]: serializedControl }, [...accTransferables, ...transferables]];
+    },
+    [{}, []]
+  );
+}
+function deserializeControls(serializedControls) {
+  return Object.entries(serializedControls).reduce(
+    (deserializedControls, [key, serializedControl]) => {
+      return { ...deserializedControls, [key]: deserializeControl(serializedControl) };
+    },
+    {}
+  );
+}
+export {
+  deserializeControl,
+  deserializeControls,
+  serializeControl,
+  serializeControls
+};
+//# sourceMappingURL=control-serialization.js.map