@gem-sdk/pages 1.0.3 → 1.1.0

package/dist/cjs/layouts/main.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
+var parseHtml = require('../libs/parse-html.js');
 
-const MainLayout = ({ children }) => {
+const MainLayout = ({ children, ...props }) => {
     const mobileOnly = core.useShopStore((s) => s.mobileOnly);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: core.cls({
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [parseHtml.parseHtml(props?.customCodeBody), jsxRuntime.jsx("div", { className: core.cls({
                     'max-w-mobile mx-auto w-full': mobileOnly,
                 }), children: children }), jsxRuntime.jsx(core.AddOn, { name: "cookie-bar" }), jsxRuntime.jsx(core.AddOn, { name: "cart-drawer" })] }));
 };

package/dist/cjs/libs/api/get-static-page-props-preview.js

@@ -122,6 +122,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher) => async (slug) => {
             gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
             facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+            customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
+            customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
         });
     }
     catch (err) {

package/dist/cjs/libs/api/get-static-page-props-v2.js

@@ -119,6 +119,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher) => async (slug) => {
             gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
             facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+            customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
+            customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
         });
     }
     catch (err) {

package/dist/cjs/libs/get-layout.js

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var main = require('../layouts/main.js');
 
-const getLayout = (page) => {
-    return jsxRuntime.jsx(main.default, { children: page });
+const getLayout = (page, pageProps) => {
+    return jsxRuntime.jsx(main.default, { ...pageProps, children: page });
 };
 
 exports.getLayout = getLayout;

package/dist/cjs/libs/parse-html.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var parse = require('html-react-parser');
+var Script = require('next/script');
+
+const parseHtml = (html, isHead) => {
+    if (!html)
+        return undefined;
+    try {
+        return parse(html, {
+            replace: (node) => {
+                if (node.type === 'script' && node instanceof parse.Element) {
+                    const child = node.children?.[0];
+                    if (child instanceof parse.Text) {
+                        if (isHead)
+                            return jsxRuntime.jsx("script", { ...node.attribs, dangerouslySetInnerHTML: { __html: child.data } });
+                        else
+                            return jsxRuntime.jsx(Script, { ...node.attribs, dangerouslySetInnerHTML: { __html: child.data } });
+                    }
+                    else {
+                        if (!isHead) {
+                            return jsxRuntime.jsx(Script, { ...node.attribs });
+                        }
+                    }
+                }
+            },
+        });
+    }
+    catch {
+        return undefined;
+    }
+};
+
+exports.parseHtml = parseHtml;

package/dist/cjs/pages/static-v2.js

@@ -5,13 +5,14 @@ var core = require('@gem-sdk/core');
 var nextSeo = require('next-seo');
 var Head = require('next/head');
 var router = require('next/router');
+var parseHtml = require('../libs/parse-html.js');
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, }) => {
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, customCodeHeader, }) => {
     const router$1 = router.useRouter();
     if (router$1.isFallback) {
         return (jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800" }), jsxRuntime.jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800" }), jsxRuntime.jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800" })] }) }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(nextSeo.NextSeo, { ...seo }), jsxRuntime.jsxs(Head, { children: [themeStyle && (jsxRuntime.jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsxRuntime.jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsxRuntime.jsx(core.BuilderComponentProvider, { components: components, children: jsxRuntime.jsx(core.SectionProvider, { data: sectionData, children: builderData?.map((builder) => (jsxRuntime.jsx(core.BuilderProvider, { state: builder.data, lazy: builder.lazy, priority: builder.priority, children: jsxRuntime.jsx(core.Render, { uid: builder.uid }) }, builder.uid))) }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(nextSeo.NextSeo, { ...seo }), jsxRuntime.jsxs(Head, { children: [parseHtml.parseHtml(customCodeHeader, true), themeStyle && (jsxRuntime.jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsxRuntime.jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsxRuntime.jsx(core.BuilderComponentProvider, { components: components, children: jsxRuntime.jsx(core.SectionProvider, { data: sectionData, children: builderData?.map((builder) => (jsxRuntime.jsx(core.BuilderProvider, { state: builder.data, lazy: builder.lazy, priority: builder.priority, children: jsxRuntime.jsx(core.Render, { uid: builder.uid }) }, builder.uid))) }) })] }));
 };
 
 exports.StaticPageV2 = StaticPageV2;

package/dist/esm/layouts/main.js

@@ -1,9 +1,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useShopStore, cls, AddOn } from '@gem-sdk/core';
+import { parseHtml } from '../libs/parse-html.js';
 
-const MainLayout = ({ children }) => {
+const MainLayout = ({ children, ...props }) => {
     const mobileOnly = useShopStore((s) => s.mobileOnly);
-    return (jsxs(Fragment, { children: [jsx("div", { className: cls({
+    return (jsxs(Fragment, { children: [parseHtml(props?.customCodeBody), jsx("div", { className: cls({
                     'max-w-mobile mx-auto w-full': mobileOnly,
                 }), children: children }), jsx(AddOn, { name: "cookie-bar" }), jsx(AddOn, { name: "cart-drawer" })] }));
 };

package/dist/esm/libs/api/get-static-page-props-preview.js

@@ -120,6 +120,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher) => async (slug) => {
             gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
             facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+            customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
+            customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
         });
     }
     catch (err) {

package/dist/esm/libs/api/get-static-page-props-v2.js

@@ -117,6 +117,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher) => async (slug) => {
             gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
             facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+            customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
+            customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
         });
     }
     catch (err) {

package/dist/esm/libs/get-layout.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import MainLayout from '../layouts/main.js';
 
-const getLayout = (page) => {
-    return jsx(MainLayout, { children: page });
+const getLayout = (page, pageProps) => {
+    return jsx(MainLayout, { ...pageProps, children: page });
 };
 
 export { getLayout };

package/dist/esm/libs/parse-html.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import parse, { Element, Text } from 'html-react-parser';
+import Script from 'next/script';
+
+const parseHtml = (html, isHead) => {
+    if (!html)
+        return undefined;
+    try {
+        return parse(html, {
+            replace: (node) => {
+                if (node.type === 'script' && node instanceof Element) {
+                    const child = node.children?.[0];
+                    if (child instanceof Text) {
+                        if (isHead)
+                            return jsx("script", { ...node.attribs, dangerouslySetInnerHTML: { __html: child.data } });
+                        else
+                            return jsx(Script, { ...node.attribs, dangerouslySetInnerHTML: { __html: child.data } });
+                    }
+                    else {
+                        if (!isHead) {
+                            return jsx(Script, { ...node.attribs });
+                        }
+                    }
+                }
+            },
+        });
+    }
+    catch {
+        return undefined;
+    }
+};
+
+export { parseHtml };

package/dist/esm/pages/static-v2.js

@@ -3,13 +3,14 @@ import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } fr
 import { NextSeo } from 'next-seo';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { parseHtml } from '../libs/parse-html.js';
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, }) => {
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, customCodeHeader, }) => {
     const router = useRouter();
     if (router.isFallback) {
         return (jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "flex gap-2", children: [jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800" })] }) }));
     }
-    return (jsxs(Fragment, { children: [jsx(NextSeo, { ...seo }), jsxs(Head, { children: [themeStyle && (jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsx(BuilderComponentProvider, { components: components, children: jsx(SectionProvider, { data: sectionData, children: builderData?.map((builder) => (jsx(BuilderProvider, { state: builder.data, lazy: builder.lazy, priority: builder.priority, children: jsx(Render, { uid: builder.uid }) }, builder.uid))) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { ...seo }), jsxs(Head, { children: [parseHtml(customCodeHeader, true), themeStyle && (jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsx(BuilderComponentProvider, { components: components, children: jsx(SectionProvider, { data: sectionData, children: builderData?.map((builder) => (jsx(BuilderProvider, { state: builder.data, lazy: builder.lazy, priority: builder.priority, children: jsx(Render, { uid: builder.uid }) }, builder.uid))) }) })] }));
 };
 
 export { StaticPageV2 };

package/dist/types/index.d.ts

@@ -27,6 +27,8 @@ type PageBuilderProps = {
     gaTrackingId?: string | null;
     tiktokPixelId?: string | null;
     facebookPixelId?: string | null;
+    customCodeHeader?: string | null;
+    customCodeBody?: string | null;
 };
 type PageBuilderPropsV2 = {
     builderData?: {
@@ -40,7 +42,7 @@ type AdditionalPageBuilderProps = {
     components: Record<string, React.ComponentType<any>>;
 };
 type NextPageWithLayout<P = PageBuilderProps, IP = P> = NextPage<P, IP> & {
-    getLayout?: (page: React.ReactElement) => React.ReactNode;
+    getLayout?: (page: React.ReactElement, pageProps?: any) => React.ReactNode;
 };
 type AppPropsWithLayout<P = PageBuilderProps> = AppProps<P> & {
     Component: NextPageWithLayout;
@@ -78,7 +80,7 @@ declare const getStaticPagePropsPreview: (fetcher: FetchFunc, shopifyFetcher: Fe
 declare const createFetcher: (token?: string | null) => FetchFunc;
 declare const createShopifyFetcher: (storefrontToken?: string, handle?: string) => FetchFunc;
 
-declare const getLayout: (page: React.ReactElement) => JSX.Element;
+declare const getLayout: (page: React.ReactElement, pageProps?: any) => JSX.Element;
 
 declare const genCSS: (input?: string | Record<string, any>, mobileOnly?: boolean) => string;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,13 +21,14 @@
   "dependencies": {
     "@sentry/nextjs": "7.21.1",
     "deepmerge": "4.2.2",
+    "html-react-parser": "^3.0.7",
     "next-seo": "^5.15.0"
   },
   "devDependencies": {
+    "@gem-sdk/core": "*",
     "@gem-sdk/plugin-cookie-bar": "*",
     "@gem-sdk/plugin-quick-view": "*",
-    "@gem-sdk/plugin-sticky-add-to-cart": "*",
-    "@gem-sdk/core": "*"
+    "@gem-sdk/plugin-sticky-add-to-cart": "*"
   },
   "peerDependencies": {
     "next": ">=13"