@makeswift/runtime 0.14.4 → 0.15.0

package/dist/esm/components/builtin/Video/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Video/register.ts"],"sourcesContent":["import dynamic from 'next/dynamic'\n\nimport { forwardNextDynamicRef } from '../../../next/dynamic'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    forwardNextDynamicRef(patch => dynamic(() => patch(import('./Video')))),\n    {\n      type: MakeswiftComponentType.Video,\n      label: 'Video',\n      icon: ComponentIcon.Video,\n      props: {\n        id: Props.ElementID(),\n        video: Props.Video({ preset: { controls: true } }),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 560, unit: 'px' },\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n        borderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,OAAO,aAAa;AAEpB,SAAS,6BAA6B;AACtC,SAAS,aAAa;AAEtB,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAEvB,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,sBAAsB,WAAS,QAAQ,MAAM,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC;AAAA,IACtE;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,OAAO,MAAM,MAAM,EAAE,QAAQ,EAAE,UAAU,KAAK,EAAE,CAAC;AAAA,QACjD,OAAO,MAAM,MAAM;AAAA,UACjB,QAAQ,MAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,cAAc,MAAM,aAAa,EAAE,QAAQ,MAAM,aAAa,OAAO,UAAU,CAAC;AAAA,MAClF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Video/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Video')),\n    {\n      type: MakeswiftComponentType.Video,\n      label: 'Video',\n      icon: ComponentIcon.Video,\n      props: {\n        id: Props.ElementID(),\n        video: Props.Video({ preset: { controls: true } }),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 560, unit: 'px' },\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n        borderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,SAAS,aAAa;AAEtB,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,SAAS,CAAC;AAAA,IAC5B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,OAAO,MAAM,MAAM,EAAE,QAAQ,EAAE,UAAU,KAAK,EAAE,CAAC;AAAA,QACjD,OAAO,MAAM,MAAM;AAAA,UACjB,QAAQ,MAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,cAAc,MAAM,aAAa,EAAE,QAAQ,MAAM,aAAa,OAAO,UAAU,CAAC;AAAA,MAClF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/components/hooks/usePageSnippets.js

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useState } from "react";
+import { useIsInBuilder } from "../../react";
+import deepEqual from "../../utils/deepEqual";
+import { useMakeswiftHostApiClient } from "../../next/context/makeswift-host-api-client";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+const SnippetLocation = {
+  Body: "BODY",
+  Head: "HEAD"
+};
+const filterUsedSnippetProperties = ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+}) => ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+});
+function usePageSnippets({ page }) {
+  const isInBuilder = useIsInBuilder();
+  const [snippets, setSnippets] = useState(page.snippets);
+  const cachedPage = useCachedPage(isInBuilder ? page.id : null);
+  useEffect(() => {
+    if (cachedPage == null)
+      return;
+    const oldSnippets = snippets.map(filterUsedSnippetProperties);
+    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
+    if (deepEqual(newSnippets, oldSnippets))
+      return;
+    setSnippets(cachedPage.snippets);
+  }, [cachedPage]);
+  const filteredSnippets = useMemo(
+    () => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled),
+    [snippets, isInBuilder]
+  );
+  const headSnippets = useMemo(
+    () => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head),
+    [filteredSnippets]
+  );
+  const bodySnippets = useMemo(
+    () => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body),
+    [filteredSnippets]
+  );
+  return { headSnippets, bodySnippets };
+}
+function useCachedPage(pageId) {
+  const client = useMakeswiftHostApiClient();
+  const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
+  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  return page;
+}
+export {
+  usePageSnippets
+};
+//# sourceMappingURL=usePageSnippets.js.map

package/dist/esm/components/hooks/usePageSnippets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/usePageSnippets.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { useIsInBuilder } from '../../react'\nimport { MakeswiftPageDocument } from '../../next'\nimport deepEqual from '../../utils/deepEqual'\nimport { useMakeswiftHostApiClient } from '../../next/context/makeswift-host-api-client'\nimport { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport { Page as PageType } from '../../api'\n\nconst SnippetLocation = {\n  Body: 'BODY',\n  Head: 'HEAD',\n} as const\n\nexport type SnippetLocation = typeof SnippetLocation[keyof typeof SnippetLocation]\n\nexport type Snippet = {\n  builderEnabled: boolean\n  cleanup: string | null\n  code: string\n  id: string\n  liveEnabled: boolean\n  location: SnippetLocation\n}\n\nconst filterUsedSnippetProperties = ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n}: Snippet) => ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n})\n\nexport function usePageSnippets({ page }: { page: MakeswiftPageDocument }) {\n  const isInBuilder = useIsInBuilder()\n  const [snippets, setSnippets] = useState(page.snippets)\n\n  // We're using cached results here for page snippets so that anytime the user\n  // changes the snippets or fonts on the builder, the change would be reflected\n  // here. See this PR for discussions and things we can do to improve it in the\n  // future: https://github.com/makeswift/makeswift/pull/77\n  const cachedPage = useCachedPage(isInBuilder ? page.id : null)\n  useEffect(() => {\n    if (cachedPage == null) return\n\n    const oldSnippets = snippets.map(filterUsedSnippetProperties)\n    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties)\n\n    if (deepEqual(newSnippets, oldSnippets)) return\n\n    setSnippets(cachedPage.snippets)\n  }, [cachedPage])\n\n  const filteredSnippets = useMemo(\n    () => snippets.filter(snippet => (isInBuilder ? snippet.builderEnabled : snippet.liveEnabled)),\n    [snippets, isInBuilder],\n  )\n\n  const headSnippets = useMemo(\n    () => filteredSnippets.filter(snippet => snippet.location === SnippetLocation.Head),\n    [filteredSnippets],\n  )\n\n  const bodySnippets = useMemo(\n    () => filteredSnippets.filter(snippet => snippet.location === SnippetLocation.Body),\n    [filteredSnippets],\n  )\n\n  return { headSnippets, bodySnippets }\n}\n\nfunction useCachedPage(pageId: string | null): PageType | null {\n  const client = useMakeswiftHostApiClient()\n  const getSnapshot = () => (pageId == null ? null : client.readPage(pageId))\n\n  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return page\n}\n"],"mappings":"AAAA,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,sBAAsB;AAE/B,OAAO,eAAe;AACtB,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AAGrC,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AACR;AAaA,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,OAAgB;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,SAAS,gBAAgB,EAAE,KAAK,GAAoC;AACzE,QAAM,cAAc,eAAe;AACnC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK,QAAQ;AAMtD,QAAM,aAAa,cAAc,cAAc,KAAK,KAAK,IAAI;AAC7D,YAAU,MAAM;AACd,QAAI,cAAc;AAAM;AAExB,UAAM,cAAc,SAAS,IAAI,2BAA2B;AAC5D,UAAM,cAAc,WAAW,SAAS,IAAI,2BAA2B;AAEvE,QAAI,UAAU,aAAa,WAAW;AAAG;AAEzC,gBAAY,WAAW,QAAQ;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAmB;AAAA,IACvB,MAAM,SAAS,OAAO,aAAY,cAAc,QAAQ,iBAAiB,QAAQ,WAAY;AAAA,IAC7F,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,OAAO,aAAW,QAAQ,aAAa,gBAAgB,IAAI;AAAA,IAClF,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,OAAO,aAAW,QAAQ,aAAa,gBAAgB,IAAI;AAAA,IAClF,CAAC,gBAAgB;AAAA,EACnB;AAEA,SAAO,EAAE,cAAc,aAAa;AACtC;AAEA,SAAS,cAAc,QAAwC;AAC7D,QAAM,SAAS,0BAA0B;AACzC,QAAM,cAAc,MAAO,UAAU,OAAO,OAAO,OAAO,SAAS,MAAM;AAEzE,QAAM,OAAO,qBAAqB,OAAO,WAAW,aAAa,WAAW;AAE5E,SAAO;AACT;","names":[]}

package/dist/esm/components/hooks/useRouterLocaleSync.js

@@ -0,0 +1,25 @@
+import { useRouter as usePagesRouter } from "next/router";
+import { P, match } from "ts-pattern";
+import { useEffect } from "react";
+import { setLocale } from "../../state/actions";
+import { useDispatch } from "../../runtimes/react/hooks/use-dispatch";
+function useRouter() {
+  try {
+    const router = usePagesRouter();
+    return router;
+  } catch (e) {
+    return;
+  }
+}
+const useRouterLocaleSync = () => {
+  const router = useRouter();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    match(router).with({ locale: P.string }, ({ locale }) => dispatch(setLocale(new Intl.Locale(locale)))).otherwise(() => {
+    });
+  }, [router]);
+};
+export {
+  useRouterLocaleSync
+};
+//# sourceMappingURL=useRouterLocaleSync.js.map

package/dist/esm/components/hooks/useRouterLocaleSync.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/useRouterLocaleSync.ts"],"sourcesContent":["import { useRouter as usePagesRouter } from 'next/router'\nimport { P, match } from 'ts-pattern'\nimport { useEffect } from 'react'\n\nimport { setLocale } from '../../state/actions'\nimport { useDispatch } from '../../runtimes/react/hooks/use-dispatch'\n\nfunction useRouter() {\n  try {\n    const router = usePagesRouter()\n\n    return router\n  } catch (e) {\n    return;\n  }\n}\n\nexport const useRouterLocaleSync = () => {\n  const router = useRouter()\n  const dispatch = useDispatch()\n\n  useEffect(() => {\n    match(router)\n      .with({ locale: P.string }, ({ locale }) => dispatch(setLocale(new Intl.Locale(locale))))\n      .otherwise(() => {})\n  }, [router])\n}\n"],"mappings":"AAAA,SAAS,aAAa,sBAAsB;AAC5C,SAAS,GAAG,aAAa;AACzB,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAE5B,SAAS,YAAY;AACnB,MAAI;AACF,UAAM,SAAS,eAAe;AAE9B,WAAO;AAAA,EACT,SAAS,GAAG;AACV;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,UAAM,MAAM,EACT,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,MAAM,SAAS,UAAU,IAAI,KAAK,OAAO,MAAM,CAAC,CAAC,CAAC,EACvF,UAAU,MAAM;AAAA,IAAC,CAAC;AAAA,EACvB,GAAG,CAAC,MAAM,CAAC;AACb;","names":[]}

package/dist/esm/components/page/BodySnippet.js

@@ -26,8 +26,8 @@ function BodySnippet({ code, cleanup }) {
       });
       if (cleanup == null)
         return;
-      const cleanUp = new Function(cleanup);
       try {
+        const cleanUp = new Function(cleanup);
         cleanUp();
       } catch {
       }

package/dist/esm/components/page/BodySnippet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/page/BodySnippet.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nconst SCRIPT_TAG = 'script'\n\ntype Props = {\n  code: string\n  cleanup: string | null | undefined\n}\n\nexport function BodySnippet({ code, cleanup }: Props): null {\n  useEffect(() => {\n    const container = document.createElement('div')\n\n    container.innerHTML = code\n\n    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT)\n    const scripts: HTMLScriptElement[] = []\n\n    while (walker.nextNode()) {\n      if (walker.currentNode instanceof HTMLScriptElement) scripts.push(walker.currentNode)\n    }\n\n    scripts.forEach(inlineScript => {\n      const executableScript = document.createElement(SCRIPT_TAG)\n\n      executableScript.textContent = inlineScript.textContent\n      Array.from(inlineScript.attributes).forEach(({ name, value }) => {\n        executableScript.setAttribute(name, value)\n      })\n\n      inlineScript.parentNode?.replaceChild(executableScript, inlineScript)\n    })\n\n    const nodes = Array.from(container.childNodes)\n\n    document.body.append(...nodes)\n\n    return () => {\n      nodes.forEach(node => {\n        node.parentNode?.removeChild(node)\n      })\n\n      if (cleanup == null) return\n\n      const cleanUp = new Function(cleanup)\n\n      try {\n        cleanUp()\n      } catch {\n        // Ignore errors from user input.\n      }\n    }\n  }, [code, cleanup])\n\n  return null\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,MAAM,aAAa;AAOZ,SAAS,YAAY,EAAE,MAAM,QAAQ,GAAgB;AAC1D,YAAU,MAAM;AACd,UAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,cAAU,YAAY;AAEtB,UAAM,SAAS,SAAS,iBAAiB,WAAW,WAAW,YAAY;AAC3E,UAAM,UAA+B,CAAC;AAEtC,WAAO,OAAO,SAAS,GAAG;AACxB,UAAI,OAAO,uBAAuB;AAAmB,gBAAQ,KAAK,OAAO,WAAW;AAAA,IACtF;AAEA,YAAQ,QAAQ,kBAAgB;AAC9B,YAAM,mBAAmB,SAAS,cAAc,UAAU;AAE1D,uBAAiB,cAAc,aAAa;AAC5C,YAAM,KAAK,aAAa,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AAC/D,yBAAiB,aAAa,MAAM,KAAK;AAAA,MAC3C,CAAC;AAED,mBAAa,YAAY,aAAa,kBAAkB,YAAY;AAAA,IACtE,CAAC;AAED,UAAM,QAAQ,MAAM,KAAK,UAAU,UAAU;AAE7C,aAAS,KAAK,OAAO,GAAG,KAAK;AAE7B,WAAO,MAAM;AACX,YAAM,QAAQ,UAAQ;AACpB,aAAK,YAAY,YAAY,IAAI;AAAA,MACnC,CAAC;AAED,UAAI,WAAW;AAAM;AAErB,YAAM,UAAU,IAAI,SAAS,OAAO;AAEpC,UAAI;AACF,gBAAQ;AAAA,MACV,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/components/page/BodySnippet.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nconst SCRIPT_TAG = 'script'\n\ntype Props = {\n  code: string\n  cleanup: string | null | undefined\n}\n\nexport function BodySnippet({ code, cleanup }: Props): null {\n  useEffect(() => {\n    const container = document.createElement('div')\n\n    container.innerHTML = code\n\n    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT)\n    const scripts: HTMLScriptElement[] = []\n\n    while (walker.nextNode()) {\n      if (walker.currentNode instanceof HTMLScriptElement) scripts.push(walker.currentNode)\n    }\n\n    scripts.forEach(inlineScript => {\n      const executableScript = document.createElement(SCRIPT_TAG)\n\n      executableScript.textContent = inlineScript.textContent\n      Array.from(inlineScript.attributes).forEach(({ name, value }) => {\n        executableScript.setAttribute(name, value)\n      })\n\n      inlineScript.parentNode?.replaceChild(executableScript, inlineScript)\n    })\n\n    const nodes = Array.from(container.childNodes)\n\n    document.body.append(...nodes)\n\n    return () => {\n      nodes.forEach(node => {\n        node.parentNode?.removeChild(node)\n      })\n\n      if (cleanup == null) return\n\n      try {\n        const cleanUp = new Function(cleanup)\n        cleanUp()\n      } catch {\n        // Ignore errors from user input.\n      }\n    }\n  }, [code, cleanup])\n\n  return null\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,MAAM,aAAa;AAOZ,SAAS,YAAY,EAAE,MAAM,QAAQ,GAAgB;AAC1D,YAAU,MAAM;AACd,UAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,cAAU,YAAY;AAEtB,UAAM,SAAS,SAAS,iBAAiB,WAAW,WAAW,YAAY;AAC3E,UAAM,UAA+B,CAAC;AAEtC,WAAO,OAAO,SAAS,GAAG;AACxB,UAAI,OAAO,uBAAuB;AAAmB,gBAAQ,KAAK,OAAO,WAAW;AAAA,IACtF;AAEA,YAAQ,QAAQ,kBAAgB;AAC9B,YAAM,mBAAmB,SAAS,cAAc,UAAU;AAE1D,uBAAiB,cAAc,aAAa;AAC5C,YAAM,KAAK,aAAa,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AAC/D,yBAAiB,aAAa,MAAM,KAAK;AAAA,MAC3C,CAAC;AAED,mBAAa,YAAY,aAAa,kBAAkB,YAAY;AAAA,IACtE,CAAC;AAED,UAAM,QAAQ,MAAM,KAAK,UAAU,UAAU;AAE7C,aAAS,KAAK,OAAO,GAAG,KAAK;AAE7B,WAAO,MAAM;AACX,YAAM,QAAQ,UAAQ;AACpB,aAAK,YAAY,YAAY,IAAI;AAAA,MACnC,CAAC;AAED,UAAI,WAAW;AAAM;AAErB,UAAI;AACF,cAAM,UAAU,IAAI,SAAS,OAAO;AACpC,gBAAQ;AAAA,MACV,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO;AACT;","names":[]}

package/dist/esm/components/page/HeadSnippet.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { Children, createElement, useEffect, useRef } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import parse from "html-react-parser";
+import Head from "next/head";
+import { useIsPagesRouter } from "../../next/hooks/use-is-pages-router";
+function HeadSnippet({ snippet }) {
+  const isPagesRouter = useIsPagesRouter();
+  useEffect(() => {
+    if (isPagesRouter) {
+      return () => {
+        const snippetElements2 = getSnippetElementsFromDOM(snippet);
+        if (snippetElements2.length > 0)
+          return;
+        cleanUpSnippet(snippet);
+      };
+    }
+    const snippetElements = getSnippetElementsFromDOM(snippet);
+    const isAlreadyInTheDOM = snippetElements.length > 0;
+    if (isAlreadyInTheDOM)
+      return;
+    return renderSnippetAndExecuteScripts(snippet, document.head);
+  }, [isPagesRouter, snippet]);
+  const headSnippetElement = snippetToElement(snippet);
+  const insertedServerHTML = useRef(false);
+  useServerInsertedHTML(() => {
+    if (isPagesRouter || insertedServerHTML.current)
+      return;
+    insertedServerHTML.current = true;
+    return headSnippetElement;
+  });
+  if (isPagesRouter) {
+    return /* @__PURE__ */ jsx(Head, { children: headSnippetElement });
+  }
+  return null;
+}
+const SNIPPET_ID_ATRIBUTE_NAME = "data-makeswift-snippet-id";
+const VALID_HEAD_ELEMENT_TYPES = [
+  "title",
+  "base",
+  "link",
+  "style",
+  "meta",
+  "script",
+  "noscript",
+  "template"
+];
+function snippetToElement(snippet) {
+  return Children.map(parse(snippet.code), (element) => {
+    if (typeof element === "string")
+      return element;
+    if (!VALID_HEAD_ELEMENT_TYPES.includes(element.type))
+      return null;
+    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id;
+    return createElement(element.type, {
+      ...element.props,
+      key,
+      [SNIPPET_ID_ATRIBUTE_NAME]: snippet.id
+    });
+  });
+}
+function renderSnippetAndExecuteScripts(snippet, container) {
+  const virtualContainer = container.ownerDocument.createElement(container.tagName);
+  virtualContainer.innerHTML = snippet.code;
+  const elements = Array.from(virtualContainer.querySelectorAll("*"));
+  const scripts = elements.filter((el) => el instanceof HTMLScriptElement);
+  scripts.forEach((script) => {
+    const clone = script.ownerDocument.createElement(script.tagName);
+    clone.textContent = script.textContent;
+    Array.from(script.attributes).forEach(({ name, value }) => {
+      clone.setAttribute(name, value);
+    });
+    clone.setAttribute(SNIPPET_ID_ATRIBUTE_NAME, snippet.id);
+    script.parentNode?.replaceChild(clone, script);
+  });
+  const nodes = Array.from(virtualContainer.childNodes);
+  container.append(...nodes);
+  return () => {
+    nodes.forEach((node) => {
+      node.parentNode?.removeChild(node);
+    });
+    cleanUpSnippet(snippet);
+  };
+}
+function cleanUpSnippet(snippet) {
+  if (snippet.cleanup == null)
+    return;
+  try {
+    const cleanUp = new Function(snippet.cleanup);
+    cleanUp();
+  } catch {
+  }
+}
+function getSnippetElementsFromDOM(snippet) {
+  return document.head.querySelectorAll(`[${SNIPPET_ID_ATRIBUTE_NAME}="${snippet.id}"]`);
+}
+export {
+  HeadSnippet
+};
+//# sourceMappingURL=HeadSnippet.js.map

package/dist/esm/components/page/HeadSnippet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/page/HeadSnippet.tsx"],"sourcesContent":["import { Children, createElement, useEffect, useRef } from 'react'\nimport { Snippet } from '../hooks/usePageSnippets'\nimport { useServerInsertedHTML } from 'next/navigation'\nimport parse from 'html-react-parser'\nimport Head from 'next/head'\nimport { useIsPagesRouter } from '../../next/hooks/use-is-pages-router'\n\ntype Props = {\n  snippet: Snippet\n}\n\nexport function HeadSnippet({ snippet }: Props) {\n  const isPagesRouter = useIsPagesRouter()\n\n  useEffect(() => {\n    if (isPagesRouter) {\n      return () => {\n        const snippetElements = getSnippetElementsFromDOM(snippet)\n        if (snippetElements.length > 0) return\n        cleanUpSnippet(snippet)\n      }\n    }\n\n    const snippetElements = getSnippetElementsFromDOM(snippet)\n    const isAlreadyInTheDOM = snippetElements.length > 0\n\n    if (isAlreadyInTheDOM) return\n\n    return renderSnippetAndExecuteScripts(snippet, document.head)\n  }, [isPagesRouter, snippet])\n\n  const headSnippetElement = snippetToElement(snippet)\n  const insertedServerHTML = useRef(false)\n\n  useServerInsertedHTML(() => {\n    if (isPagesRouter || insertedServerHTML.current) return\n\n    insertedServerHTML.current = true\n\n    return headSnippetElement\n  })\n\n  if (isPagesRouter) {\n    return <Head>{headSnippetElement}</Head>\n  }\n\n  return null\n}\n\nconst SNIPPET_ID_ATRIBUTE_NAME = 'data-makeswift-snippet-id'\n\nconst VALID_HEAD_ELEMENT_TYPES = [\n  'title',\n  'base',\n  'link',\n  'style',\n  'meta',\n  'script',\n  'noscript',\n  'template',\n]\n\nfunction snippetToElement(snippet: Pick<Snippet, 'id' | 'code'>): (string | JSX.Element)[] {\n  return Children.map(parse(snippet.code), element => {\n    if (typeof element === 'string') return element\n\n    if (!VALID_HEAD_ELEMENT_TYPES.includes(element.type as string)) return null\n\n    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id\n\n    return createElement(element.type, {\n      ...element.props,\n      key,\n      [SNIPPET_ID_ATRIBUTE_NAME]: snippet.id,\n    })\n  })\n}\n\nfunction renderSnippetAndExecuteScripts(snippet: Snippet, container: HTMLElement): () => void {\n  const virtualContainer = container.ownerDocument.createElement(container.tagName)\n\n  virtualContainer.innerHTML = snippet.code\n\n  const elements = Array.from(virtualContainer.querySelectorAll('*'))\n  const scripts = elements.filter(el => el instanceof HTMLScriptElement)\n\n  scripts.forEach(script => {\n    const clone = script.ownerDocument.createElement(script.tagName)\n\n    clone.textContent = script.textContent\n    Array.from(script.attributes).forEach(({ name, value }) => {\n      clone.setAttribute(name, value)\n    })\n    clone.setAttribute(SNIPPET_ID_ATRIBUTE_NAME, snippet.id)\n    script.parentNode?.replaceChild(clone, script)\n  })\n\n  const nodes = Array.from(virtualContainer.childNodes)\n  container.append(...nodes)\n\n  return () => {\n    nodes.forEach(node => {\n      node.parentNode?.removeChild(node)\n    })\n\n    cleanUpSnippet(snippet)\n  }\n}\n\nfunction cleanUpSnippet(snippet: Snippet): void {\n  if (snippet.cleanup == null) return\n  try {\n    const cleanUp = new Function(snippet.cleanup)\n    cleanUp()\n  } catch {\n    // Ignore errors from user input.\n  }\n}\n\nfunction getSnippetElementsFromDOM(snippet: Snippet) {\n  return document.head.querySelectorAll(`[${SNIPPET_ID_ATRIBUTE_NAME}=\"${snippet.id}\"]`)\n}\n"],"mappings":"AA2CW;AA3CX,SAAS,UAAU,eAAe,WAAW,cAAc;AAE3D,SAAS,6BAA6B;AACtC,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,wBAAwB;AAM1B,SAAS,YAAY,EAAE,QAAQ,GAAU;AAC9C,QAAM,gBAAgB,iBAAiB;AAEvC,YAAU,MAAM;AACd,QAAI,eAAe;AACjB,aAAO,MAAM;AACX,cAAMA,mBAAkB,0BAA0B,OAAO;AACzD,YAAIA,iBAAgB,SAAS;AAAG;AAChC,uBAAe,OAAO;AAAA,MACxB;AAAA,IACF;AAEA,UAAM,kBAAkB,0BAA0B,OAAO;AACzD,UAAM,oBAAoB,gBAAgB,SAAS;AAEnD,QAAI;AAAmB;AAEvB,WAAO,+BAA+B,SAAS,SAAS,IAAI;AAAA,EAC9D,GAAG,CAAC,eAAe,OAAO,CAAC;AAE3B,QAAM,qBAAqB,iBAAiB,OAAO;AACnD,QAAM,qBAAqB,OAAO,KAAK;AAEvC,wBAAsB,MAAM;AAC1B,QAAI,iBAAiB,mBAAmB;AAAS;AAEjD,uBAAmB,UAAU;AAE7B,WAAO;AAAA,EACT,CAAC;AAED,MAAI,eAAe;AACjB,WAAO,oBAAC,QAAM,8BAAmB;AAAA,EACnC;AAEA,SAAO;AACT;AAEA,MAAM,2BAA2B;AAEjC,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,iBAAiB,SAAiE;AACzF,SAAO,SAAS,IAAI,MAAM,QAAQ,IAAI,GAAG,aAAW;AAClD,QAAI,OAAO,YAAY;AAAU,aAAO;AAExC,QAAI,CAAC,yBAAyB,SAAS,QAAQ,IAAc;AAAG,aAAO;AAEvE,UAAM,MAAM,QAAQ,MAAM,GAAG,QAAQ,EAAE,IAAI,QAAQ,GAAG,KAAK,QAAQ;AAEnE,WAAO,cAAc,QAAQ,MAAM;AAAA,MACjC,GAAG,QAAQ;AAAA,MACX;AAAA,MACA,CAAC,wBAAwB,GAAG,QAAQ;AAAA,IACtC,CAAC;AAAA,EACH,CAAC;AACH;AAEA,SAAS,+BAA+B,SAAkB,WAAoC;AAC5F,QAAM,mBAAmB,UAAU,cAAc,cAAc,UAAU,OAAO;AAEhF,mBAAiB,YAAY,QAAQ;AAErC,QAAM,WAAW,MAAM,KAAK,iBAAiB,iBAAiB,GAAG,CAAC;AAClE,QAAM,UAAU,SAAS,OAAO,QAAM,cAAc,iBAAiB;AAErE,UAAQ,QAAQ,YAAU;AACxB,UAAM,QAAQ,OAAO,cAAc,cAAc,OAAO,OAAO;AAE/D,UAAM,cAAc,OAAO;AAC3B,UAAM,KAAK,OAAO,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACzD,YAAM,aAAa,MAAM,KAAK;AAAA,IAChC,CAAC;AACD,UAAM,aAAa,0BAA0B,QAAQ,EAAE;AACvD,WAAO,YAAY,aAAa,OAAO,MAAM;AAAA,EAC/C,CAAC;AAED,QAAM,QAAQ,MAAM,KAAK,iBAAiB,UAAU;AACpD,YAAU,OAAO,GAAG,KAAK;AAEzB,SAAO,MAAM;AACX,UAAM,QAAQ,UAAQ;AACpB,WAAK,YAAY,YAAY,IAAI;AAAA,IACnC,CAAC;AAED,mBAAe,OAAO;AAAA,EACxB;AACF;AAEA,SAAS,eAAe,SAAwB;AAC9C,MAAI,QAAQ,WAAW;AAAM;AAC7B,MAAI;AACF,UAAM,UAAU,IAAI,SAAS,QAAQ,OAAO;AAC5C,YAAQ;AAAA,EACV,QAAQ;AAAA,EAER;AACF;AAEA,SAAS,0BAA0B,SAAkB;AACnD,SAAO,SAAS,KAAK,iBAAiB,IAAI,wBAAwB,KAAK,QAAQ,EAAE,IAAI;AACvF;","names":["snippetElements"]}

package/dist/esm/components/page/Page.js

@@ -1,181 +1,22 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, createElement, useMemo, useEffect, useRef, useState } from "react";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
-import parse from "html-react-parser";
-import Head from "next/head";
 import { BodySnippet } from "./BodySnippet";
 import { DocumentReference } from "../../runtimes/react";
 import { createDocumentReference } from "../../state/react-page";
-import { useMakeswiftClient } from "../../api/react";
-import { useIsInBuilder } from "../../react";
-import deepEqual from "../../utils/deepEqual";
-const SnippetLocation = {
-  Body: "BODY",
-  Head: "HEAD"
-};
-const defaultFavicon = {
-  mimetype: "image/png",
-  publicUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC"
-};
-const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_.\-\d]*$/;
-const VALID_HEAD_ELEMENT_TYPES = [
-  "title",
-  "base",
-  "link",
-  "style",
-  "meta",
-  "script",
-  "noscript",
-  "template"
-];
-function snippetToElement(snippet) {
-  return Children.map(parse(snippet.code), (element) => {
-    if (typeof element === "string")
-      return element;
-    if (!VALID_TAG_REGEX.test(element.type))
-      return null;
-    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id;
-    return createElement(element.type, { ...element.props, key });
-  });
-}
-const filterUsedSnippetProperties = ({
-  code,
-  builderEnabled,
-  liveEnabled,
-  location,
-  cleanup
-}) => ({
-  code,
-  builderEnabled,
-  liveEnabled,
-  location,
-  cleanup
-});
+import { useRouterLocaleSync } from "../hooks/useRouterLocaleSync";
+import { usePageSnippets } from "../hooks/usePageSnippets";
+import { PageHead } from "./PageHead";
 function Page({ document: page }) {
-  const isInBuilder = useIsInBuilder();
-  const [snippets, setSnippets] = useState(page.snippets);
-  const cachedPage = useCachedPage(isInBuilder ? page.id : null);
-  useEffect(() => {
-    if (cachedPage == null)
-      return;
-    const oldSnippets = snippets.map(filterUsedSnippetProperties);
-    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
-    if (deepEqual(newSnippets, oldSnippets))
-      return;
-    setSnippets(cachedPage.snippets);
-  }, [cachedPage]);
-  const site = useCachedSite(isInBuilder ? page.site.id : null);
+  const { bodySnippets } = usePageSnippets({ page });
   const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null);
-  const favicon = page.meta.favicon ?? defaultFavicon;
-  const title = baseLocalizedPage?.meta.title ?? page.meta.title;
-  const description = baseLocalizedPage?.meta.description ?? page.meta.description;
-  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords;
-  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage;
-  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl;
-  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked;
-  const fontFamilyParamValue = useMemo(() => {
-    if (site == null) {
-      return page.fonts.map(({ family, variants }) => {
-        return `${family.replace(/ /g, "+")}:${variants.join()}`;
-      }).join("|");
-    }
-    return site.googleFonts.edges.filter((edge) => edge != null).map(({ activeVariants, node: { family, variants } }) => {
-      const activeVariantSpecifiers = variants.filter(
-        (variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)
-      ).map((variant) => variant.specifier).join();
-      return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
-    }).join("|");
-  }, [site, page]);
-  const filteredSnippets = useMemo(
-    () => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled),
-    [snippets, isInBuilder]
-  );
-  const headSnippets = useMemo(
-    () => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head),
-    [filteredSnippets]
-  );
-  const previousHeadSnippets = useRef(null);
-  useEffect(() => {
-    const headSnippetsToCleanUp = (previousHeadSnippets.current ?? []).filter((previousSnippet) => previousSnippet.cleanup != null).filter((previousSnippet) => !headSnippets.some((snippet) => previousSnippet.id === snippet.id));
-    headSnippetsToCleanUp.forEach((snippetToCleanUp) => {
-      if (snippetToCleanUp.cleanup == null)
-        return;
-      const cleanUp = new Function(snippetToCleanUp.cleanup);
-      try {
-        cleanUp();
-      } catch {
-      }
-    });
-    previousHeadSnippets.current = headSnippets;
-  }, [headSnippets]);
   const documentId = baseLocalizedPage?.elementTreeId ?? page.id;
+  useRouterLocaleSync();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Head, { children: [
-      /* @__PURE__ */ jsx("style", { children: `
-            html {
-              font-family: sans-serif;
-            }
-            div#__next {
-              overflow: hidden;
-            }
-          ` }),
-      /* @__PURE__ */ jsx("link", { rel: "icon", type: favicon.mimetype, href: favicon.publicUrl }),
-      canonicalUrl && /* @__PURE__ */ jsx("link", { rel: "canonical", href: canonicalUrl }),
-      isIndexingBlocked && /* @__PURE__ */ jsx("meta", { name: "robots", content: "noindex" }),
-      title && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("title", { children: title }),
-        /* @__PURE__ */ jsx("meta", { property: "og:title", content: title }),
-        /* @__PURE__ */ jsx("meta", { name: "twitter:title", content: title }),
-        /* @__PURE__ */ jsx("meta", { itemProp: "name", content: title })
-      ] }),
-      description && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("meta", { name: "description", content: description }),
-        /* @__PURE__ */ jsx("meta", { property: "og:description", content: description }),
-        /* @__PURE__ */ jsx("meta", { name: "twitter:description", content: description }),
-        /* @__PURE__ */ jsx("meta", { itemProp: "description", content: description })
-      ] }),
-      keywords && /* @__PURE__ */ jsx("meta", { name: "keywords", content: keywords }),
-      socialImage && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("meta", { property: "og:image", content: socialImage.publicUrl }),
-        /* @__PURE__ */ jsx("meta", { property: "og:image:type", content: socialImage.mimetype }),
-        /* @__PURE__ */ jsx("meta", { name: "twitter:image", content: socialImage.publicUrl }),
-        /* @__PURE__ */ jsx("meta", { name: "twitter:card", content: "summary_large_image" }),
-        /* @__PURE__ */ jsx("meta", { itemProp: "image", content: socialImage.publicUrl })
-      ] }),
-      fontFamilyParamValue !== "" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-        "link",
-        {
-          rel: "stylesheet",
-          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
-        }
-      ) }),
-      headSnippets.map(snippetToElement).map(
-        (children) => Children.map(children, (child) => {
-          if (typeof child === "string")
-            return child;
-          if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
-            return child;
-          return null;
-        })
-      )
-    ] }),
+    /* @__PURE__ */ jsx(PageHead, { document: page }),
     /* @__PURE__ */ jsx(DocumentReference, { documentReference: createDocumentReference(documentId) }),
-    filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsx(BodySnippet, { code: snippet.code, cleanup: snippet.cleanup }, snippet.id))
+    bodySnippets.map((snippet) => /* @__PURE__ */ jsx(BodySnippet, { code: snippet.code, cleanup: snippet.cleanup }, snippet.id))
   ] });
 }
-function useCachedPage(pageId) {
-  const client = useMakeswiftClient();
-  const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
-  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  return page;
-}
-function useCachedSite(siteId) {
-  const client = useMakeswiftClient();
-  const getSnapshot = () => siteId == null ? null : client.readSite(siteId);
-  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  return site;
-}
 export {
   Page
 };

package/dist/esm/components/page/Page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/page/Page.tsx"],"sourcesContent":["'use client'\n\nimport { ReactElement, Children, createElement, useMemo, useEffect, useRef, useState } from 'react'\nimport { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport parse from 'html-react-parser'\nimport Head from 'next/head'\n\nimport { BodySnippet } from './BodySnippet'\nimport { DocumentReference } from '../../runtimes/react'\nimport { createDocumentReference } from '../../state/react-page'\nimport { useMakeswiftClient } from '../../api/react'\nimport { useIsInBuilder } from '../../react'\nimport deepEqual from '../../utils/deepEqual'\nimport { MakeswiftPageDocument } from '../../next'\nimport { Page as PageType, Site } from '../../api'\n\nconst SnippetLocation = {\n  Body: 'BODY',\n  Head: 'HEAD',\n} as const\n\ntype SnippetLocation = typeof SnippetLocation[keyof typeof SnippetLocation]\n\ntype Snippet = {\n  builderEnabled: boolean\n  cleanup: string | null\n  code: string\n  id: string\n  liveEnabled: boolean\n  location: SnippetLocation\n}\n\nconst defaultFavicon = {\n  mimetype: 'image/png',\n  publicUrl:\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC',\n}\n\n// Taken from https://github.com/facebook/react/blob/14bac6193a334eda42e727336e8967419f08f5df/packages/react-dom/src/server/ReactPartialRenderer.js#L208\nconst VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_.\\-\\d]*$/\n\nconst VALID_HEAD_ELEMENT_TYPES = [\n  'title',\n  'base',\n  'link',\n  'style',\n  'meta',\n  'script',\n  'noscript',\n  'template',\n]\n\nfunction snippetToElement(snippet: Pick<Snippet, 'id' | 'code'>): (string | ReactElement)[] {\n  return Children.map(parse(snippet.code), element => {\n    if (typeof element === 'string') return element\n\n    if (!VALID_TAG_REGEX.test(element.type)) return null\n\n    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id\n\n    return createElement(element.type, { ...element.props, key })\n  })\n}\n\nconst filterUsedSnippetProperties = ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n}: Snippet) => ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n})\n\ntype Props = {\n  document: MakeswiftPageDocument\n}\n\nexport function Page({ document: page }: Props): JSX.Element {\n  const isInBuilder = useIsInBuilder()\n  const [snippets, setSnippets] = useState(page.snippets)\n  // We're using cached results here for page snippets and site fonts so that anytime the user\n  // changes the snippets or fonts on the builder, the change would be reflected here.\n  // See this PR for discussions and things we can do to improve it in the future:\n  // https://github.com/makeswift/makeswift/pull/77\n  const cachedPage = useCachedPage(isInBuilder ? page.id : null)\n  useEffect(() => {\n    if (cachedPage == null) return\n\n    const oldSnippets = snippets.map(filterUsedSnippetProperties)\n    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties)\n\n    if (deepEqual(newSnippets, oldSnippets)) return\n\n    setSnippets(cachedPage.snippets)\n  }, [cachedPage])\n  const site = useCachedSite(isInBuilder ? page.site.id : null)\n\n  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null)\n  const favicon = page.meta.favicon ?? defaultFavicon\n  const title = baseLocalizedPage?.meta.title ?? page.meta.title\n  const description = baseLocalizedPage?.meta.description ?? page.meta.description\n  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords\n  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage\n  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl\n  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked\n\n  const fontFamilyParamValue = useMemo(() => {\n    if (site == null) {\n      return page.fonts\n        .map(({ family, variants }) => {\n          return `${family.replace(/ /g, '+')}:${variants.join()}`\n        })\n        .join('|')\n    }\n\n    return site.googleFonts.edges\n      .filter((edge): edge is NonNullable<typeof edge> => edge != null)\n      .map(({ activeVariants, node: { family, variants } }) => {\n        const activeVariantSpecifiers = variants\n          .filter(variant =>\n            activeVariants.some(activeVariant => activeVariant.specifier === variant.specifier),\n          )\n          .map(variant => variant.specifier)\n          .join()\n\n        return `${family.replace(/ /g, '+')}:${activeVariantSpecifiers}`\n      })\n      .join('|')\n  }, [site, page])\n\n  const filteredSnippets = useMemo(\n    () => snippets.filter(snippet => (isInBuilder ? snippet.builderEnabled : snippet.liveEnabled)),\n    [snippets, isInBuilder],\n  )\n  const headSnippets = useMemo(\n    () => filteredSnippets.filter(snippet => snippet.location === SnippetLocation.Head),\n    [filteredSnippets],\n  )\n\n  const previousHeadSnippets = useRef<MakeswiftPageDocument['snippets'] | null>(null)\n  useEffect(() => {\n    const headSnippetsToCleanUp = (previousHeadSnippets.current ?? [])\n      .filter(previousSnippet => previousSnippet.cleanup != null)\n      .filter(previousSnippet => !headSnippets.some(snippet => previousSnippet.id === snippet.id))\n\n    headSnippetsToCleanUp.forEach(snippetToCleanUp => {\n      if (snippetToCleanUp.cleanup == null) return\n\n      const cleanUp = new Function(snippetToCleanUp.cleanup)\n\n      try {\n        cleanUp()\n      } catch {\n        // Ignore errors from user input.\n      }\n    })\n\n    previousHeadSnippets.current = headSnippets\n  }, [headSnippets])\n\n  const documentId = baseLocalizedPage?.elementTreeId ?? page.id\n\n  return (\n    <>\n      <Head>\n        <style>\n          {`\n            html {\n              font-family: sans-serif;\n            }\n            div#__next {\n              overflow: hidden;\n            }\n          `}\n        </style>\n\n        <link rel=\"icon\" type={favicon.mimetype} href={favicon.publicUrl} />\n\n        {canonicalUrl && <link rel=\"canonical\" href={canonicalUrl} />}\n\n        {isIndexingBlocked && <meta name=\"robots\" content=\"noindex\" />}\n\n        {title && (\n          <>\n            <title>{title}</title>\n            <meta property=\"og:title\" content={title} />\n            <meta name=\"twitter:title\" content={title} />\n            <meta itemProp=\"name\" content={title} />\n          </>\n        )}\n\n        {description && (\n          <>\n            <meta name=\"description\" content={description} />\n            <meta property=\"og:description\" content={description} />\n            <meta name=\"twitter:description\" content={description} />\n            <meta itemProp=\"description\" content={description} />\n          </>\n        )}\n\n        {keywords && <meta name=\"keywords\" content={keywords} />}\n\n        {socialImage && (\n          <>\n            <meta property=\"og:image\" content={socialImage.publicUrl} />\n            <meta property=\"og:image:type\" content={socialImage.mimetype} />\n            <meta name=\"twitter:image\" content={socialImage.publicUrl} />\n            <meta name=\"twitter:card\" content=\"summary_large_image\" />\n            <meta itemProp=\"image\" content={socialImage.publicUrl} />\n          </>\n        )}\n\n        {fontFamilyParamValue !== '' && (\n          <>\n            <link\n              rel=\"stylesheet\"\n              href={`https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`}\n            />\n          </>\n        )}\n\n        {headSnippets.map(snippetToElement).map(children =>\n          Children.map(children, child => {\n            if (typeof child === 'string') return child\n\n            if (VALID_HEAD_ELEMENT_TYPES.includes(child.type as string)) return child\n\n            return null\n          }),\n        )}\n      </Head>\n\n      <DocumentReference documentReference={createDocumentReference(documentId)} />\n\n      {filteredSnippets\n        .filter(snippet => snippet.location === SnippetLocation.Body)\n        .map(snippet => (\n          <BodySnippet key={snippet.id} code={snippet.code} cleanup={snippet.cleanup} />\n        ))}\n    </>\n  )\n}\n\nfunction useCachedPage(pageId: string | null): PageType | null {\n  const client = useMakeswiftClient()\n  const getSnapshot = () => (pageId == null ? null : client.readPage(pageId))\n\n  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return page\n}\n\nfunction useCachedSite(siteId: string | null): Site | null {\n  const client = useMakeswiftClient()\n  const getSnapshot = () => (siteId == null ? null : client.readSite(siteId))\n\n  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return site\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/page/Page.tsx"],"sourcesContent":["'use client'\n\nimport { BodySnippet } from './BodySnippet'\nimport { DocumentReference } from '../../runtimes/react'\nimport { createDocumentReference } from '../../state/react-page'\nimport { MakeswiftPageDocument } from '../../next'\nimport { useRouterLocaleSync } from '../hooks/useRouterLocaleSync'\nimport { usePageSnippets } from '../hooks/usePageSnippets'\nimport { PageHead } from './PageHead'\n\ntype Props = {\n  document: MakeswiftPageDocument\n}\n\nexport function Page({ document: page }: Props): JSX.Element {\n  const { bodySnippets } = usePageSnippets({ page })\n\n  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null)\n  const documentId = baseLocalizedPage?.elementTreeId ?? page.id\n\n  useRouterLocaleSync()\n\n  return (\n    <>\n      <PageHead document={page} />\n\n      <DocumentReference documentReference={createDocumentReference(documentId)} />\n\n      {bodySnippets.map(snippet => (\n        <BodySnippet key={snippet.id} code={snippet.code} cleanup={snippet.cleanup} />\n      ))}\n    </>\n  )\n}\n"],"mappings":";AAuBI,mBACE,KADF;AArBJ,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AAExC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAMlB,SAAS,KAAK,EAAE,UAAU,KAAK,GAAuB;AAC3D,QAAM,EAAE,aAAa,IAAI,gBAAgB,EAAE,KAAK,CAAC;AAEjD,QAAM,oBAAoB,KAAK,eAAe,KAAK,CAAC,EAAE,SAAS,MAAM,YAAY,IAAI;AACrF,QAAM,aAAa,mBAAmB,iBAAiB,KAAK;AAE5D,sBAAoB;AAEpB,SACE,iCACE;AAAA,wBAAC,YAAS,UAAU,MAAM;AAAA,IAE1B,oBAAC,qBAAkB,mBAAmB,wBAAwB,UAAU,GAAG;AAAA,IAE1E,aAAa,IAAI,aAChB,oBAAC,eAA6B,MAAM,QAAQ,MAAM,SAAS,QAAQ,WAAjD,QAAQ,EAAkD,CAC7E;AAAA,KACH;AAEJ;","names":[]}

package/dist/esm/components/page/PageHead.js

@@ -0,0 +1,85 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { usePageSnippets } from "../hooks/usePageSnippets";
+import { useIsInBuilder } from "../../react";
+import { useMakeswiftHostApiClient } from "../../next/context/makeswift-host-api-client";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { PageTitle, PageMeta, PageLink, PageStyle } from "../../next/components/head-tags";
+import { HeadSnippet } from "./HeadSnippet";
+const defaultFavicon = {
+  id: "default-favicon",
+  mimetype: "image/png",
+  publicUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC"
+};
+function PageHead({ document: page }) {
+  const { headSnippets } = usePageSnippets({ page });
+  const isInBuilder = useIsInBuilder();
+  const site = useCachedSite(isInBuilder ? page.site.id : null);
+  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null);
+  const favicon = page.meta.favicon ?? defaultFavicon;
+  const title = baseLocalizedPage?.meta.title ?? page.meta.title;
+  const description = baseLocalizedPage?.meta.description ?? page.meta.description;
+  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords;
+  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage;
+  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl;
+  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked;
+  const fontFamilyParamValue = useMemo(() => {
+    if (site == null) {
+      return page.fonts.map(({ family, variants }) => {
+        return `${family.replace(/ /g, "+")}:${variants.join()}`;
+      }).join("|");
+    }
+    return site.googleFonts.edges.filter((edge) => edge != null).map(({ activeVariants, node: { family, variants } }) => {
+      const activeVariantSpecifiers = variants.filter(
+        (variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)
+      ).map((variant) => variant.specifier).join();
+      return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
+    }).join("|");
+  }, [site, page]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageStyle, { precedence: "high", href: "makeswift-base-styles", children: `
+        html {
+            font-family: sans-serif;
+        }
+        div#__next {
+            overflow: hidden;
+        }
+        ` }),
+    title && /* @__PURE__ */ jsx(PageTitle, { children: title }),
+    favicon && /* @__PURE__ */ jsx(PageLink, { rel: "icon", type: favicon.mimetype, href: favicon.publicUrl }),
+    canonicalUrl && /* @__PURE__ */ jsx(PageLink, { rel: "canonical", href: canonicalUrl }),
+    isIndexingBlocked && /* @__PURE__ */ jsx(PageMeta, { name: "robots", content: "noindex" }),
+    description && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PageMeta, { name: "description", content: description }),
+      /* @__PURE__ */ jsx(PageMeta, { property: "og:description", content: description }),
+      /* @__PURE__ */ jsx(PageMeta, { name: "twitter:description", content: description })
+    ] }),
+    keywords && /* @__PURE__ */ jsx(PageMeta, { name: "keywords", content: keywords }),
+    socialImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PageMeta, { property: "og:image", content: socialImage.publicUrl }),
+      /* @__PURE__ */ jsx(PageMeta, { property: "og:image:type", content: socialImage.mimetype }),
+      /* @__PURE__ */ jsx(PageMeta, { name: "twitter:image", content: socialImage.publicUrl }),
+      /* @__PURE__ */ jsx(PageMeta, { name: "twitter:card", content: "summary_large_image" })
+    ] }),
+    fontFamilyParamValue !== "" && /* @__PURE__ */ jsx(
+      PageLink,
+      {
+        precedence: "medium",
+        rel: "stylesheet",
+        href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
+      }
+    ),
+    headSnippets.map((snippet) => /* @__PURE__ */ jsx(HeadSnippet, { snippet }, snippet.id))
+  ] });
+}
+function useCachedSite(siteId) {
+  const client = useMakeswiftHostApiClient();
+  const getSnapshot = () => siteId == null ? null : client.readSite(siteId);
+  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  return site;
+}
+export {
+  PageHead
+};
+//# sourceMappingURL=PageHead.js.map

package/dist/esm/components/page/PageHead.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/page/PageHead.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo } from 'react'\nimport { MakeswiftPageDocument } from '../../next'\nimport { usePageSnippets } from '../hooks/usePageSnippets'\nimport { useIsInBuilder } from '../../react'\nimport { useMakeswiftHostApiClient } from '../../next/context/makeswift-host-api-client'\nimport { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport { Site } from '../../api'\nimport { PageTitle, PageMeta, PageLink, PageStyle } from '../../next/components/head-tags'\nimport { HeadSnippet } from './HeadSnippet'\n\nconst defaultFavicon = {\n  id: 'default-favicon',\n  mimetype: 'image/png',\n  publicUrl:\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC',\n}\n\ntype Props = {\n  document: MakeswiftPageDocument\n}\n\nexport function PageHead({ document: page }: Props): JSX.Element {\n  const { headSnippets } = usePageSnippets({ page })\n\n  const isInBuilder = useIsInBuilder()\n\n  const site = useCachedSite(isInBuilder ? page.site.id : null)\n  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null)\n\n  const favicon = page.meta.favicon ?? defaultFavicon\n  const title = baseLocalizedPage?.meta.title ?? page.meta.title\n  const description = baseLocalizedPage?.meta.description ?? page.meta.description\n  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords\n  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage\n  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl\n  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked\n\n  const fontFamilyParamValue = useMemo(() => {\n    if (site == null) {\n      return page.fonts\n        .map(({ family, variants }) => {\n          return `${family.replace(/ /g, '+')}:${variants.join()}`\n        })\n        .join('|')\n    }\n\n    return site.googleFonts.edges\n      .filter((edge): edge is NonNullable<typeof edge> => edge != null)\n      .map(({ activeVariants, node: { family, variants } }) => {\n        const activeVariantSpecifiers = variants\n          .filter(variant =>\n            activeVariants.some(activeVariant => activeVariant.specifier === variant.specifier),\n          )\n          .map(variant => variant.specifier)\n          .join()\n\n        return `${family.replace(/ /g, '+')}:${activeVariantSpecifiers}`\n      })\n      .join('|')\n  }, [site, page])\n\n  return (\n    <>\n      <PageStyle precedence=\"high\" href=\"makeswift-base-styles\">\n        {`\n        html {\n            font-family: sans-serif;\n        }\n        div#__next {\n            overflow: hidden;\n        }\n        `}\n      </PageStyle>\n      {title && <PageTitle>{title}</PageTitle>}\n      {favicon && <PageLink rel=\"icon\" type={favicon.mimetype} href={favicon.publicUrl} />}\n      {canonicalUrl && <PageLink rel=\"canonical\" href={canonicalUrl} />}\n      {isIndexingBlocked && <PageMeta name=\"robots\" content=\"noindex\" />}\n      {description && (\n        <>\n          <PageMeta name=\"description\" content={description} />\n          <PageMeta property=\"og:description\" content={description} />\n          <PageMeta name=\"twitter:description\" content={description} />\n        </>\n      )}\n      {keywords && <PageMeta name=\"keywords\" content={keywords} />}\n      {socialImage && (\n        <>\n          <PageMeta property=\"og:image\" content={socialImage.publicUrl} />\n          <PageMeta property=\"og:image:type\" content={socialImage.mimetype} />\n          <PageMeta name=\"twitter:image\" content={socialImage.publicUrl} />\n          <PageMeta name=\"twitter:card\" content=\"summary_large_image\" />\n        </>\n      )}\n      {fontFamilyParamValue !== '' && (\n        <PageLink\n          precedence=\"medium\"\n          rel=\"stylesheet\"\n          href={`https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`}\n        />\n      )}\n      {headSnippets.map(snippet => (\n        <HeadSnippet key={snippet.id} snippet={snippet} />\n      ))}\n    </>\n  )\n}\n\nfunction useCachedSite(siteId: string | null): Site | null {\n  const client = useMakeswiftHostApiClient()\n  const getSnapshot = () => (siteId == null ? null : client.readSite(siteId))\n\n  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return site\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/shared/BackgroundsContainer/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
 import {

package/dist/esm/components/shared/BackgroundsContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/BackgroundsContainer/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport {\n  Children,\n  ComponentPropsWithoutRef,\n  ElementType,\n  forwardRef,\n  ReactElement,\n  Ref,\n} from 'react'\nimport { BackgroundsValue as BackgroundsPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useBackgrounds } from '../../hooks'\nimport Backgrounds from './components/Backgrounds'\n\ntype BaseProps = {\n  backgrounds: BackgroundsPropControllerValue | null | undefined\n  children: ReactElement<ElementType>\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default forwardRef<HTMLDivElement | null, Props>(function BackgroundsContainer(\n  { backgrounds, children, className, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          width: '100%',\n          margin: '0 auto',\n          '> *': {\n            borderRadius: 'inherit',\n            height: 'inherit',\n          },\n          '> :last-child': {\n            position: 'relative',\n          },\n        }),\n        className,\n      )}\n    >\n      <Backgrounds backgrounds={useBackgrounds(backgrounds)} />\n      {Children.only(children)}\n    </div>\n  )\n})\n"],"mappings":"AA0BI,SAmBE,KAnBF;AA1BJ,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EAGA;AAAA,OAGK;AAEP,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,iBAAiB;AASxB,IAAO,+BAAQ,WAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,YACL,cAAc;AAAA,YACd,QAAQ;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,YACf,UAAU;AAAA,UACZ;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,eAAY,aAAa,eAAe,WAAW,GAAG;AAAA,QACtD,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,EACzB;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../src/components/shared/BackgroundsContainer/index.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport {\n  Children,\n  ComponentPropsWithoutRef,\n  ElementType,\n  forwardRef,\n  ReactElement,\n  Ref,\n} from 'react'\nimport { BackgroundsValue as BackgroundsPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useBackgrounds } from '../../hooks'\nimport Backgrounds from './components/Backgrounds'\n\ntype BaseProps = {\n  backgrounds: BackgroundsPropControllerValue | null | undefined\n  children: ReactElement<ElementType>\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default forwardRef<HTMLDivElement | null, Props>(function BackgroundsContainer(\n  { backgrounds, children, className, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          width: '100%',\n          margin: '0 auto',\n          '> *': {\n            borderRadius: 'inherit',\n            height: 'inherit',\n          },\n          '> :last-child': {\n            position: 'relative',\n          },\n        }),\n        className,\n      )}\n    >\n      <Backgrounds backgrounds={useBackgrounds(backgrounds)} />\n      {Children.only(children)}\n    </div>\n  )\n})\n"],"mappings":";AA4BI,SAmBE,KAnBF;AA1BJ,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EAGA;AAAA,OAGK;AAEP,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,iBAAiB;AASxB,IAAO,+BAAQ,WAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,YACL,cAAc;AAAA,YACd,QAAQ;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,YACf,UAAU;AAAA,UACZ;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,eAAY,aAAa,eAAe,WAAW,GAAG;AAAA,QACtD,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,EACzB;AAEJ,CAAC;","names":[]}

package/dist/esm/components/shared/Link/index.js

@@ -8,6 +8,7 @@ const Link = forwardRef(function Link2({ link, onClick = () => {
 }, ...restOfProps }, ref) {
   const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
   const page = usePagePathnameSlice(pageId ?? null);
+  const hasLocalizedPathname = page?.localizedPathname != null;
   const elementKey = link?.type === "SCROLL_TO_ELEMENT" ? link.payload.elementIdConfig?.elementKey : null;
   const elementId = useElementId(elementKey);
   let useNextLink;
@@ -19,7 +20,7 @@ const Link = forwardRef(function Link2({ link, onClick = () => {
       case "OPEN_PAGE": {
         if (page) {
           useNextLink = true;
-          href = `/${page.pathname}`;
+          href = `/${page.localizedPathname ?? page.pathname}`;
         }
         target = link.payload.openInNewTab ? "_blank" : "_self";
         break;
@@ -87,6 +88,9 @@ const Link = forwardRef(function Link2({ link, onClick = () => {
         target,
         onClick: handleClick,
         href,
+        ...hasLocalizedPathname && {
+          locale: false
+        },
         legacyBehavior: false
       }
     );