@makeswift/runtime 0.9.3 → 0.9.5

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ var dynamic = require("next/dynamic");
 var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
-var textInput = require("./text-input.cjs.js");
+var typography = require("./typography.cjs.js");
 var combobox = require("./combobox.cjs.js");
 require("slate");
 var shim = require("use-sync-external-store/shim");
@@ -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");
@@ -599,7 +597,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 +659,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 +744,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
@@ -959,7 +961,7 @@ Received "${apiKey}" instead.`);
     while (current = remaining.pop()) {
       let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
         Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
-          reactPage.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+          reactPage.getSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
             swatchIds.add(swatchId);
           });
           reactPage.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
@@ -972,34 +974,6 @@ Received "${apiKey}" instead.`);
               remaining.push(child);
             }
           });
-          if (descriptor.type === reactPage.ShapeControlType) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            getResourcesFromElementDescriptors(descriptor.config.type, prop);
-          }
-          if (descriptor.type === reactPage.ListControlType) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            prop.forEach((item) => {
-              getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
-            });
-          }
-          if (descriptor.type === reactPage.Types.Shape) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            getResourcesFromElementDescriptors(descriptor.options.type, prop);
-          }
-          if (descriptor.type === reactPage.Types.List) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            prop.forEach((item) => {
-              getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
-            });
-          }
         });
       };
       let element2;
@@ -1019,8 +993,8 @@ Received "${apiKey}" instead.`);
       getResourcesFromElementDescriptors(elementDescriptors, element2.props);
     }
     const typographies = await this.getTypographies([...typographyIds]);
-    typographies.forEach((typography) => {
-      typography == null ? void 0 : typography.style.forEach((style) => {
+    typographies.forEach((typography2) => {
+      typography2 == null ? void 0 : typography2.style.forEach((style) => {
         var _a;
         const swatchId = (_a = style.value.color) == null ? void 0 : _a.swatchId;
         if (swatchId != null)
@@ -1055,7 +1029,7 @@ Received "${apiKey}" instead.`);
         var _a;
         return {
           id,
-          value: (_a = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a : null
+          value: (_a = typographies.find((typography2) => (typography2 == null ? void 0 : typography2.id) === id)) != null ? _a : null
         };
       }),
       [types.APIResourceType.Table]: [...tableIds].map((id) => {
@@ -1078,10 +1052,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) {
@@ -1182,7 +1162,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.3";
+const version = "0.9.5";
 async function handler(req, res, { apiKey, unstable_siteVersions }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -1453,9 +1433,13 @@ const Page = React.memo(({
     uri: new URL("graphql", snapshot.apiOrigin).href,
     cacheData: snapshot.cacheData
   }), [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, {
@@ -2586,12 +2570,12 @@ function useFiles(fileIds) {
 function useTypography(typographyId) {
   const client = useMakeswiftClient();
   const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
-  const typography = shim.useSyncExternalStore(client.subscribe, readTypography, readTypography);
+  const typography2 = shim.useSyncExternalStore(client.subscribe, readTypography, readTypography);
   React.useEffect(() => {
     if (typographyId != null)
       client.fetchTypography(typographyId).catch(console.error);
   }, [client, typographyId]);
-  return typography;
+  return typography2;
 }
 function useGlobalElement(globalElementId) {
   const client = useMakeswiftClient();
@@ -3412,6 +3396,138 @@ function useTextAreaValue(data, definition) {
 function useTextInputValue(data, definition) {
   return data != null ? data : definition.config.defaultValue;
 }
+function isNonNullable(value) {
+  return value != null;
+}
+function typographyFragementToTypographyControlData(typography2) {
+  if (typography2 == null)
+    return void 0;
+  return {
+    id: typography2.id,
+    style: typography2.style.map(({ deviceId, value }) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      return {
+        deviceId,
+        value: {
+          fontFamily: (_a = value.fontFamily) != null ? _a : void 0,
+          lineHeight: (_b = value.lineHeight) != null ? _b : void 0,
+          letterSpacing: (_c = value.letterSpacing) != null ? _c : void 0,
+          fontWeight: (_d = value.fontWeight) != null ? _d : void 0,
+          textAlign: (_e = value.textAlign) != null ? _e : void 0,
+          uppercase: (_f = value.uppercase) != null ? _f : void 0,
+          underline: (_g = value.underline) != null ? _g : void 0,
+          strikethrough: (_h = value.strikethrough) != null ? _h : void 0,
+          italic: (_i = value.italic) != null ? _i : void 0,
+          fontSize: (_j = value.fontSize) != null ? _j : void 0,
+          color: (_k = value.color) != null ? _k : void 0
+        }
+      };
+    })
+  };
+}
+function getTypographyStyleSwatchIds(style) {
+  var _a;
+  return (_a = style == null ? void 0 : style.map((override) => override.value).flatMap((typographyStyle) => {
+    var _a2;
+    return (_a2 = typographyStyle.color) == null ? void 0 : _a2.swatchId;
+  }).filter(isNonNullable)) != null ? _a : [];
+}
+const withColor = (swatches) => (deviceRawTypographyValue) => {
+  var _b, _c;
+  const { value, deviceId } = deviceRawTypographyValue;
+  if (value.color == null) {
+    const _a = value, { color } = _a, nextValue = __objRest(_a, ["color"]);
+    return {
+      deviceId,
+      value: nextValue
+    };
+  }
+  return {
+    deviceId,
+    value: __spreadProps(__spreadValues({}, value), {
+      color: {
+        swatch: swatches.find((s) => {
+          var _a2;
+          return s && s.id === ((_a2 = value.color) == null ? void 0 : _a2.swatchId);
+        }),
+        alpha: (_c = (_b = value.color) == null ? void 0 : _b.alpha) != null ? _c : void 0
+      }
+    })
+  };
+};
+const getDeviceId = ({ deviceId }) => deviceId;
+function useEnhancedTypography(value) {
+  var _a, _b, _c;
+  const typography2 = typographyFragementToTypographyControlData(useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null));
+  const source = (_b = typography2 == null ? void 0 : typography2.style) != null ? _b : [];
+  const override = (_c = value == null ? void 0 : value.style) != null ? _c : [];
+  const breakpoints = useBreakpoints();
+  const swatchIds = [
+    ...getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
+    ...getTypographyStyleSwatchIds(typography2 == null ? void 0 : typography2.style)
+  ];
+  const swatches = useSwatches(swatchIds).filter(isNonNullable);
+  const enhancedSource = source.map(withColor(swatches));
+  const enhancedOverride = override.map(withColor(swatches));
+  const devices = [
+    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId)))
+  ];
+  return devices.map((deviceId) => {
+    var _a2, _b2;
+    const deviceSource = (_a2 = state_breakpoints.findBreakpointOverride(breakpoints, enhancedSource, deviceId)) == null ? void 0 : _a2.value;
+    const deviceOverride = (_b2 = state_breakpoints.findBreakpointOverride(breakpoints, enhancedOverride, deviceId, (v) => v)) == null ? void 0 : _b2.value;
+    if (deviceSource && deviceOverride) {
+      return {
+        deviceId,
+        value: __spreadValues(__spreadValues({}, deviceSource), deviceOverride)
+      };
+    } else if (deviceOverride) {
+      return {
+        deviceId,
+        value: deviceOverride
+      };
+    } else if (deviceSource) {
+      return {
+        deviceId,
+        value: deviceSource
+      };
+    }
+    return null;
+  }).filter(isNonNullable);
+}
+function useTypographyClassName(value) {
+  return reactPage.useStyle(useResponsiveStyle([value], ([value2]) => {
+    if (value2 === void 0)
+      return {};
+    let styles = {};
+    if (value2.color != null)
+      styles.color = colorToString(value2.color);
+    if (value2.fontFamily != null)
+      styles.fontFamily = value2.fontFamily;
+    if (value2.fontSize != null && value2.fontSize.value != null && value2.fontSize.unit != null)
+      styles.fontSize = `${value2.fontSize.value}${value2.fontSize.unit}`;
+    if (value2.fontWeight != null)
+      styles.fontWeight = value2.fontWeight;
+    if (value2.lineHeight != null)
+      styles.lineHeight = value2.lineHeight;
+    if (value2.letterSpacing != null)
+      styles.letterSpacing = `${value2.letterSpacing / 10}em`;
+    if (value2.uppercase != null)
+      styles.textTransform = value2.uppercase === true ? "uppercase" : "initial";
+    if (value2.underline != null || value2.strikethrough != null)
+      styles.textDecoration = [
+        Boolean(value2.underline) && "underline",
+        Boolean(value2.strikethrough) && "line-through"
+      ].filter(Boolean).join(" ");
+    if (value2.italic != null)
+      styles.fontStyle = value2.italic === true ? "italic" : "initial";
+    return styles;
+  }, state_breakpoints.shallowMergeFallbacks));
+}
+function useTypographyValue(data) {
+  const enhancedTypography = useEnhancedTypography(data);
+  return useTypographyClassName(enhancedTypography);
+}
 function ControlValue({
   data,
   definition,
@@ -3419,31 +3535,31 @@ function ControlValue({
   control
 }) {
   switch (definition.type) {
-    case textInput.CheckboxControlType:
+    case typography.CheckboxControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useCheckboxControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.NumberControlType:
+    case typography.NumberControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useNumber,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.TextInputControlType:
+    case typography.TextInputControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useTextInputValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.TextAreaControlType:
+    case typography.TextAreaControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useTextAreaValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.SelectControlType:
+    case typography.SelectControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useSelectControlValue,
         parameters: [data, definition],
@@ -3455,7 +3571,7 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.IconRadioGroupControlType:
+    case typography.IconRadioGroupControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useIconRadioGroupValue,
         parameters: [data, definition],
@@ -3524,6 +3640,12 @@ function ControlValue({
         parameters: [data, definition, control],
         children: (value) => children(value)
       }, definition.type);
+    case typography.TypographyControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useTypographyValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
     default:
       return children(data);
   }
@@ -3565,19 +3687,20 @@ function PropsValue({
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
     var _a2, _b, _c, _d;
     switch (descriptor.type) {
-      case textInput.CheckboxControlType:
-      case textInput.NumberControlType:
-      case textInput.TextInputControlType:
-      case textInput.TextAreaControlType:
-      case textInput.SelectControlType:
+      case typography.CheckboxControlType:
+      case typography.NumberControlType:
+      case typography.TextInputControlType:
+      case typography.TextAreaControlType:
+      case typography.SelectControlType:
       case reactPage.ColorControlType:
-      case textInput.IconRadioGroupControlType:
+      case typography.IconRadioGroupControlType:
       case reactPage.ImageControlType:
       case combobox.ComboboxControlType:
       case reactPage.ShapeControlType:
       case reactPage.ListControlType:
       case reactPage.LinkControlType:
       case reactPage.StyleV2ControlType:
+      case typography.TypographyControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -3807,9 +3930,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);
   }
@@ -4114,6 +4235,7 @@ exports.useBoxShadow = useBoxShadow;
 exports.useBreakpoints = useBreakpoints;
 exports.useBuilderEditMode = useBuilderEditMode;
 exports.useElementId = useElementId;
+exports.useEnhancedTypography = useEnhancedTypography;
 exports.useFile = useFile;
 exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
@@ -4129,5 +4251,5 @@ exports.useResponsiveTextStyle = useResponsiveTextStyle;
 exports.useResponsiveWidth = useResponsiveWidth;
 exports.useSwatches = useSwatches;
 exports.useTable = useTable;
-exports.useTypography = useTypography;
+exports.useTypographyClassName = useTypographyClassName;
 //# sourceMappingURL=index.cjs.js.map