@builder.io/sdk-solid 0.0.2 → 0.0.5

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "",
   "main": "src/index.js",
   "dependencies": {
-    "solid-js": "^1.3.15",
     "solid-styled-components": "^0.27.6"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.3.15"
+  },
+  "devDependencies": {
+    "solid-js": "^1.3.15"
   }
 }

package/src/blocks/button.js

@@ -1,5 +1,4 @@
 import { template as _$template } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
@@ -7,35 +6,27 @@ import { spread as _$spread } from "solid-js/web";
 
 const _tmpl$ = /*#__PURE__*/_$template(`<a role="button"></a>`, 2);
 
-import { Show } from "solid-js";
 export default function Button(props) {
-  return _$createComponent(Show, {
-    get when() {
-      return props.link;
-    },
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
 
-    get children() {
-      const _el$ = _tmpl$.cloneNode(true);
+    _$spread(_el$, () => props.attributes, false, true);
 
-      _$spread(_el$, () => props.attributes, false, true);
+    _$insert(_el$, () => props.text);
 
-      _$insert(_el$, () => props.text);
+    _$effect(_p$ => {
+      const _v$ = props.link,
+            _v$2 = props.openLinkInNewTab ? "_blank" : undefined;
 
-      _$effect(_p$ => {
-        const _v$ = props.link,
-              _v$2 = props.openLinkInNewTab ? "_blank" : undefined;
+      _v$ !== _p$._v$ && _$setAttribute(_el$, "href", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "target", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
 
-        _v$ !== _p$._v$ && _$setAttribute(_el$, "href", _p$._v$ = _v$);
-        _v$2 !== _p$._v$2 && _$setAttribute(_el$, "target", _p$._v$2 = _v$2);
-        return _p$;
-      }, {
-        _v$: undefined,
-        _v$2: undefined
-      });
-
-      return _el$;
-    }
-
-  });
+    return _el$;
+  })();
 }import { registerComponent } from '../functions/register-component';
 registerComponent(Button, {name:'Core:Button',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',defaultStyles:{appearance:'none',paddingTop:'15px',paddingBottom:'15px',paddingLeft:'25px',paddingRight:'25px',backgroundColor:'#000000',color:'white',borderRadius:'4px',textAlign:'center',cursor:'pointer'},inputs:[{name:'text',type:'text',defaultValue:'Click me!',bubble:true},{name:'link',type:'url',bubble:true},{name:'openLinkInNewTab',type:'boolean',defaultValue:false,friendlyName:'Open link in new tab'}],static:true,noWrap:true});

package/src/blocks/button.lite.tsx

@@ -1,18 +1,12 @@
-import { Show } from "solid-js";
-
 export default function Button(props) {
   return (
-    <>
-      <Show when={props.link}>
-        <a
-          {...props.attributes}
-          role="button"
-          href={props.link}
-          target={props.openLinkInNewTab ? "_blank" : undefined}
-        >
-          {props.text}
-        </a>
-      </Show>
-    </>
+    <a
+      {...props.attributes}
+      role="button"
+      href={props.link}
+      target={props.openLinkInNewTab ? "_blank" : undefined}
+    >
+      {props.text}
+    </a>
   );
 }

package/src/blocks/columns.js

@@ -89,7 +89,7 @@ export default function Columns(props) {
           }),
                 _v$4 = {
             width: state.getColumnCssWidth(index),
-            marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+            "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
             ...state.columnCssVars
           };
 

package/src/blocks/columns.lite.tsx

@@ -83,7 +83,7 @@ export default function Columns(props) {
             })}
             style={{
               width: state.getColumnCssWidth(index),
-              marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+              "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
               ...state.columnCssVars,
             }}
           >

package/src/blocks/form.js

@@ -231,7 +231,7 @@ export default function FormComponent(props) {
   return (() => {
     const _el$ = _tmpl$2.cloneNode(true);
 
-    _el$.addEventListener("submit", event => state.state.onSubmit(event));
+    _el$.addEventListener("submit", event => state.onSubmit(event));
 
     formRef(_el$);
 
@@ -258,7 +258,7 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "error";
+        return state.submissionState === "error";
       },
 
       get children() {
@@ -276,7 +276,7 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "sending";
+        return state.submissionState === "sending";
       },
 
       get children() {
@@ -294,13 +294,13 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "error" && state.state.responseData;
+        return state.submissionState === "error" && state.responseData;
       },
 
       get children() {
         const _el$2 = _tmpl$.cloneNode(true);
 
-        _$insert(_el$2, () => JSON.stringify(state.state.responseData, null, 2));
+        _$insert(_el$2, () => JSON.stringify(state.responseData, null, 2));
 
         _$effect(() => _el$2.className = css({
           padding: "10px",
@@ -315,7 +315,7 @@ export default function FormComponent(props) {
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state.state.submissionState === "success";
+        return state.submissionState === "success";
       },
 
       get children() {

package/src/blocks/form.lite.tsx

@@ -246,30 +246,26 @@ export default function FormComponent(props) {
       action={!props.sendWithJs && props.action}
       method={props.method}
       name={props.name}
-      onSubmit={(event) => state.state.onSubmit(event)}
+      onSubmit={(event) => state.onSubmit(event)}
     >
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
           {(block, index) => <RenderBlock block={block}></RenderBlock>}
         </For>
       </Show>
-      <Show when={state.state.submissionState === "error"}>
+      <Show when={state.submissionState === "error"}>
         <BuilderBlocks
           dataPath="errorMessage"
           blocks={props.errorMessage}
         ></BuilderBlocks>
       </Show>
-      <Show when={state.state.submissionState === "sending"}>
+      <Show when={state.submissionState === "sending"}>
         <BuilderBlocks
           dataPath="sendingMessage"
           blocks={props.sendingMessage}
         ></BuilderBlocks>
       </Show>
-      <Show
-        when={
-          state.state.submissionState === "error" && state.state.responseData
-        }
-      >
+      <Show when={state.submissionState === "error" && state.responseData}>
         <pre
           class={css({
             padding: "10px",
@@ -277,10 +273,10 @@ export default function FormComponent(props) {
             textAlign: "center",
           })}
         >
-          {JSON.stringify(state.state.responseData, null, 2)}
+          {JSON.stringify(state.responseData, null, 2)}
         </pre>
       </Show>
-      <Show when={state.state.submissionState === "success"}>
+      <Show when={state.submissionState === "success"}>
         <BuilderBlocks
           dataPath="successMessage"
           blocks={props.successMessage}

package/src/blocks/image.js

@@ -1,22 +1,100 @@
 import { template as _$template } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 
-const _tmpl$ = /*#__PURE__*/_$template(`<div> </div>`, 2),
-      _tmpl$2 = /*#__PURE__*/_$template(`<div></div>`, 2),
-      _tmpl$3 = /*#__PURE__*/_$template(`<div><picture><img loading="lazy"><source></picture></div>`, 6);
+const _tmpl$ = /*#__PURE__*/_$template(`<source type="image/webp">`, 1),
+      _tmpl$2 = /*#__PURE__*/_$template(`<div> </div>`, 2),
+      _tmpl$3 = /*#__PURE__*/_$template(`<div></div>`, 2),
+      _tmpl$4 = /*#__PURE__*/_$template(`<div><picture><img loading="lazy"></picture></div>`, 5);
 
 import { Show } from "solid-js";
+import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 export default function Image(props) {
+  const state = createMutable({
+    updateQueryParam: function updateQueryParam(uri = "", key, value) {
+      const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+      const separator = uri.indexOf("?") !== -1 ? "&" : "?";
+
+      if (uri.match(re)) {
+        return uri.replace(re, "$1" + key + "=" + encodeURIComponent(value) + "$2");
+      }
+
+      return uri + separator + key + "=" + encodeURIComponent(value);
+    },
+    removeProtocol: function removeProtocol(path) {
+      return path.replace(/http(s)?:/, "");
+    },
+    getShopifyImageUrl: function getShopifyImageUrl(src, size) {
+      if (!src || !src?.match(/cdn\.shopify\.com/) || !size) {
+        return src;
+      }
+
+      if (size === "master") {
+        return state.removeProtocol(src);
+      }
+
+      const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
+
+      if (match) {
+        const prefix = src.split(match[0]);
+        const suffix = match[3];
+        const useSize = size.match("x") ? size : `${size}x`;
+        return state.removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
+      }
+
+      return null;
+    },
+    getSrcSet: function getSrcSet(url) {
+      if (!url) {
+        return url;
+      }
+
+      const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
+
+      if (url.match(/builder\.io/)) {
+        let srcUrl = url;
+        const widthInSrc = Number(url.split("?width=")[1]);
+
+        if (!isNaN(widthInSrc)) {
+          srcUrl = `${srcUrl} ${widthInSrc}w`;
+        }
+
+        return sizes.filter(size => size !== widthInSrc).map(size => `${state.updateQueryParam(url, "width", size)} ${size}w`).concat([srcUrl]).join(", ");
+      }
+
+      if (url.match(/cdn\.shopify\.com/)) {
+        return sizes.map(size => [state.getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(", ");
+      }
+
+      return url;
+    },
+    useSrcSet: function useSrcSet() {
+      return props.srcset || state.getSrcSet(props.image) || "";
+    }
+  });
   return (() => {
-    const _el$ = _tmpl$3.cloneNode(true),
+    const _el$ = _tmpl$4.cloneNode(true),
           _el$2 = _el$.firstChild,
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling;
+          _el$3 = _el$2.firstChild;
+
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!props.noWebp, true)() && state.useSrcSet().includes("builder.io");
+      },
+
+      get children() {
+        const _el$4 = _tmpl$.cloneNode(true);
+
+        _$effect(() => _$setAttribute(_el$4, "srcset", state.useSrcSet().replace(/\?/g, "?format=webp&")));
+
+        return _el$4;
+      }
+
+    }), null);
 
     _$insert(_el$, _$createComponent(Show, {
       get when() {
@@ -24,7 +102,7 @@ export default function Image(props) {
       },
 
       get children() {
-        const _el$5 = _tmpl$.cloneNode(true);
+        const _el$5 = _tmpl$2.cloneNode(true);
 
         _$effect(_p$ => {
           const _v$ = css({
@@ -35,7 +113,7 @@ export default function Image(props) {
                 _v$2 = props.aspectRatio * 100 + "%";
 
           _v$ !== _p$._v$ && (_el$5.className = _p$._v$ = _v$);
-          _v$2 !== _p$._v$2 && _el$5.style.setProperty("paddingTop", _p$._v$2 = _v$2);
+          _v$2 !== _p$._v$2 && _el$5.style.setProperty("padding-top", _p$._v$2 = _v$2);
           return _p$;
         }, {
           _v$: undefined,
@@ -64,7 +142,7 @@ export default function Image(props) {
       },
 
       get children() {
-        const _el$6 = _tmpl$2.cloneNode(true);
+        const _el$6 = _tmpl$3.cloneNode(true);
 
         _$insert(_el$6, () => props.children);
 
@@ -102,20 +180,18 @@ export default function Image(props) {
             _v$7 = props.backgroundSize || "center",
             _v$8 = props.backgroundSize || "cover",
             _v$9 = props.image,
-            _v$10 = props.srcset,
-            _v$11 = props.sizes,
-            _v$12 = props.srcset;
+            _v$10 = props.srcset || state.getSrcSet(props.image),
+            _v$11 = props.sizes;
 
       _v$3 !== _p$._v$3 && (_el$.className = _p$._v$3 = _v$3);
       _v$4 !== _p$._v$4 && (_el$3.className = _p$._v$4 = _v$4);
       _v$5 !== _p$._v$5 && _$setAttribute(_el$3, "alt", _p$._v$5 = _v$5);
       _v$6 !== _p$._v$6 && _$setAttribute(_el$3, "aria-role", _p$._v$6 = _v$6);
-      _v$7 !== _p$._v$7 && _el$3.style.setProperty("objectPosition", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && _el$3.style.setProperty("objectFit", _p$._v$8 = _v$8);
+      _v$7 !== _p$._v$7 && _el$3.style.setProperty("object-position", _p$._v$7 = _v$7);
+      _v$8 !== _p$._v$8 && _el$3.style.setProperty("object-fit", _p$._v$8 = _v$8);
       _v$9 !== _p$._v$9 && _$setAttribute(_el$3, "src", _p$._v$9 = _v$9);
       _v$10 !== _p$._v$10 && _$setAttribute(_el$3, "srcset", _p$._v$10 = _v$10);
       _v$11 !== _p$._v$11 && _$setAttribute(_el$3, "sizes", _p$._v$11 = _v$11);
-      _v$12 !== _p$._v$12 && _$setAttribute(_el$4, "srcset", _p$._v$12 = _v$12);
       return _p$;
     }, {
       _v$3: undefined,
@@ -126,8 +202,7 @@ export default function Image(props) {
       _v$8: undefined,
       _v$9: undefined,
       _v$10: undefined,
-      _v$11: undefined,
-      _v$12: undefined
+      _v$11: undefined
     });
 
     return _el$;

package/src/blocks/image.lite.tsx

@@ -1,8 +1,91 @@
 import { Show } from "solid-js";
 
+import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
 export default function Image(props) {
+  const state = createMutable({
+    updateQueryParam: function updateQueryParam(uri = "", key, value) {
+      const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+      const separator = uri.indexOf("?") !== -1 ? "&" : "?";
+
+      if (uri.match(re)) {
+        return uri.replace(
+          re,
+          "$1" + key + "=" + encodeURIComponent(value) + "$2"
+        );
+      }
+
+      return uri + separator + key + "=" + encodeURIComponent(value);
+    },
+    removeProtocol: function removeProtocol(path) {
+      return path.replace(/http(s)?:/, "");
+    },
+    getShopifyImageUrl: function getShopifyImageUrl(src, size) {
+      if (!src || !src?.match(/cdn\.shopify\.com/) || !size) {
+        return src;
+      }
+
+      if (size === "master") {
+        return state.removeProtocol(src);
+      }
+
+      const match = src.match(
+        /(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i
+      );
+
+      if (match) {
+        const prefix = src.split(match[0]);
+        const suffix = match[3];
+        const useSize = size.match("x") ? size : `${size}x`;
+        return state.removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
+      }
+
+      return null;
+    },
+    getSrcSet: function getSrcSet(url) {
+      if (!url) {
+        return url;
+      }
+
+      const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
+
+      if (url.match(/builder\.io/)) {
+        let srcUrl = url;
+        const widthInSrc = Number(url.split("?width=")[1]);
+
+        if (!isNaN(widthInSrc)) {
+          srcUrl = `${srcUrl} ${widthInSrc}w`;
+        }
+
+        return sizes
+          .filter((size) => size !== widthInSrc)
+          .map(
+            (size) => `${state.updateQueryParam(url, "width", size)} ${size}w`
+          )
+          .concat([srcUrl])
+          .join(", ");
+      }
+
+      if (url.match(/cdn\.shopify\.com/)) {
+        return sizes
+          .map((size) => [
+            state.getShopifyImageUrl(url, `${size}x${size}`),
+            size,
+          ])
+          .filter(([sizeUrl]) => !!sizeUrl)
+          .map(([sizeUrl, size]) => `${sizeUrl} ${size}w`)
+          .concat([url])
+          .join(", ");
+      }
+
+      return url;
+    },
+    useSrcSet: function useSrcSet() {
+      return props.srcset || state.getSrcSet(props.image) || "";
+    },
+  });
+
   return (
     <div
       class={css({
@@ -29,14 +112,19 @@ export default function Image(props) {
           alt={props.altText}
           aria-role={props.altText ? "presentation" : undefined}
           style={{
-            objectPosition: props.backgroundSize || "center",
-            objectFit: props.backgroundSize || "cover",
+            "object-position": props.backgroundSize || "center",
+            "object-fit": props.backgroundSize || "cover",
           }}
           src={props.image}
-          srcset={props.srcset}
+          srcset={props.srcset || state.getSrcSet(props.image)}
           sizes={props.sizes}
         />
-        <source srcSet={props.srcset} />
+        <Show when={!props.noWebp && state.useSrcSet().includes("builder.io")}>
+          <source
+            type="image/webp"
+            srcSet={state.useSrcSet().replace(/\?/g, "?format=webp&")}
+          />
+        </Show>
       </picture>
       <Show
         when={
@@ -51,7 +139,7 @@ export default function Image(props) {
             fontSize: "0",
           })}
           style={{
-            paddingTop: props.aspectRatio * 100 + "%",
+            "padding-top": props.aspectRatio * 100 + "%",
           }}
         >
           {" "}

package/src/blocks/img.js

@@ -19,8 +19,8 @@ export default function ImgComponent(props) {
             _v$4 = props.altText,
             _v$5 = props.imgSrc;
 
-      _v$ !== _p$._v$ && _el$.style.setProperty("objectFit", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$.style.setProperty("objectPosition", _p$._v$2 = _v$2);
+      _v$ !== _p$._v$ && _el$.style.setProperty("object-fit", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _el$.style.setProperty("object-position", _p$._v$2 = _v$2);
       _v$3 !== _p$._v$3 && _$setAttribute(_el$, "key", _p$._v$3 = _v$3);
       _v$4 !== _p$._v$4 && _$setAttribute(_el$, "alt", _p$._v$4 = _v$4);
       _v$5 !== _p$._v$5 && _$setAttribute(_el$, "src", _p$._v$5 = _v$5);

package/src/blocks/img.lite.tsx

@@ -5,8 +5,8 @@ export default function ImgComponent(props) {
     <img
       {...props.attributes}
       style={{
-        objectFit: props.backgroundSize || "cover",
-        objectPosition: props.backgroundPosition || "center",
+        "object-fit": props.backgroundSize || "cover",
+        "object-position": props.backgroundPosition || "center",
       }}
       key={(isEditing() && props.imgSrc) || "default-key"}
       alt={props.altText}

package/src/blocks/section.js

@@ -15,7 +15,7 @@ export default function SectionComponent(props) {
     _$insert(_el$, () => props.children);
 
     _$effect(_$p => _$style(_el$, props.maxWidth && typeof props.maxWidth === "number" ? {
-      maxWidth: props.maxWidth
+      "max-width": props.maxWidth
     } : undefined, _$p));
 
     return _el$;

package/src/blocks/section.lite.tsx

@@ -5,7 +5,7 @@ export default function SectionComponent(props) {
       style={
         props.maxWidth && typeof props.maxWidth === "number"
           ? {
-              maxWidth: props.maxWidth,
+              "max-width": props.maxWidth,
             }
           : undefined
       }

package/src/blocks/symbol.js

@@ -8,7 +8,7 @@ import { spread as _$spread } from "solid-js/web";
 const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
 
 import { createMutable } from "solid-js/store";
-import RenderContent from "../components/render-content";
+import RenderContent from "../components/render-content/render-content";
 import BuilderContext from "../context/builder.context";
 export default function Symbol(props) {
   const state = createMutable({

package/src/blocks/symbol.lite.tsx

@@ -1,6 +1,6 @@
 import { createMutable } from "solid-js/store";
 
-import RenderContent from "../components/render-content.lite";
+import RenderContent from "../components/render-content/render-content.lite";
 import BuilderContext from "../context/builder.context";
 import { getContent } from "../functions/get-content";
 

package/src/blocks/video.js

@@ -17,11 +17,11 @@ export default function Video(props) {
         width: "100%",
         height: "100%",
         ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
+        "object-fit": props.fit,
+        "object-position": props.position,
         // Hack to get object fit to work as expected and
         // not have the video overflow
-        borderRadius: 1
+        "border-radius": 1
       },
             _v$2 = props.video || "no-src",
             _v$3 = props.posterImage,

package/src/blocks/video.lite.tsx

@@ -7,11 +7,11 @@ export default function Video(props) {
         width: "100%",
         height: "100%",
         ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
+        "object-fit": props.fit,
+        "object-position": props.position,
         // Hack to get object fit to work as expected and
         // not have the video overflow
-        borderRadius: 1,
+        "border-radius": 1,
       }}
       key={props.video || "no-src"}
       poster={props.posterImage}

package/src/components/render-block.js

@@ -1,6 +1,6 @@
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-import { Show, For } from "solid-js";
+import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 import { getBlockComponentOptions } from "../functions/get-block-component-options";

package/src/components/render-block.lite.tsx

@@ -1,4 +1,4 @@
-import { Show, For } from "solid-js";
+import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 

package/src/components/render-content/components/render-styles.js

@@ -0,0 +1,81 @@
+import { template as _$template } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<style></style>`, 2);
+
+import { createMutable } from "solid-js/store";
+export default function RenderStyles(props) {
+  const state = createMutable({
+    getCssFromFont(font) {
+      // TODO: compute what font sizes are used and only load those.......
+      const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+      const name = family.split(",")[0];
+      const url = font.fileUrl ?? font?.files?.regular;
+      let str = "";
+
+      if (url && family && name) {
+        str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+      }
+
+      if (font.files) {
+        for (const weight in font.files) {
+          const isNumber = String(Number(weight)) === weight;
+
+          if (!isNumber) {
+            continue;
+          } // TODO: maybe limit number loaded
+
+
+          const weightUrl = font.files[weight];
+
+          if (weightUrl && weightUrl !== url) {
+            str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+          }
+        }
+      }
+
+      return str;
+    },
+
+    getFontCss({
+      customFonts
+    }) {
+      // TODO: flag for this
+      // if (!this.builder.allowCustomFonts) {
+      //   return '';
+      // }
+      // TODO: separate internal data from external
+      return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
+    },
+
+    getInjectedStyles() {
+      return `
+${props.cssCode}
+${state.getFontCss({
+        customFonts: props.customFonts
+      })}`;
+    }
+
+  });
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    _$insert(_el$, () => state.getInjectedStyles());
+
+    return _el$;
+  })();
+}

package/src/components/render-content/components/render-styles.lite.tsx

@@ -0,0 +1,70 @@
+import { createMutable } from "solid-js/store";
+
+export default function RenderStyles(props) {
+  const state = createMutable({
+    getCssFromFont(font: CustomFont) {
+      // TODO: compute what font sizes are used and only load those.......
+      const family =
+        font.family +
+        (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+      const name = family.split(",")[0];
+      const url = font.fileUrl ?? font?.files?.regular;
+      let str = "";
+
+      if (url && family && name) {
+        str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+      }
+
+      if (font.files) {
+        for (const weight in font.files) {
+          const isNumber = String(Number(weight)) === weight;
+
+          if (!isNumber) {
+            continue;
+          } // TODO: maybe limit number loaded
+
+          const weightUrl = font.files[weight];
+
+          if (weightUrl && weightUrl !== url) {
+            str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+          }
+        }
+      }
+
+      return str;
+    },
+    getFontCss({ customFonts }: { customFonts?: CustomFont[] }) {
+      // TODO: flag for this
+      // if (!this.builder.allowCustomFonts) {
+      //   return '';
+      // }
+      // TODO: separate internal data from external
+      return (
+        customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
+      );
+    },
+    getInjectedStyles() {
+      return `
+${props.cssCode}
+${state.getFontCss({
+  customFonts: props.customFonts,
+})}`;
+    },
+  });
+
+  return <style>{state.getInjectedStyles()}</style>;
+}

package/src/components/{render-content.js → render-content/render-content.js}

@@ -2,28 +2,28 @@ import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 
-const _tmpl$ = /*#__PURE__*/_$template(`<style></style>`, 2),
-      _tmpl$2 = /*#__PURE__*/_$template(`<div></div>`, 2);
+const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
 
 import { Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
-import { isBrowser } from "../functions/is-browser";
-import BuilderContext from "../context/builder.context";
-import { track } from "../functions/track";
-import { isReactNative } from "../functions/is-react-native";
-import { isEditing } from "../functions/is-editing";
-import { isPreviewing } from "../functions/is-previewing";
-import { previewingModelName } from "../functions/previewing-model-name";
-import { getContent } from "../functions/get-content";
-import { convertSearchParamsToQueryObject, getBuilderSearchParams } from "../functions/get-builder-search-params";
-import RenderBlocks from "./render-blocks";
-import { evaluate } from "../functions/evaluate";
-import { getFetch } from "../functions/get-fetch";
+import { isBrowser } from "../../functions/is-browser";
+import BuilderContext from "../../context/builder.context";
+import { track } from "../../functions/track";
+import { isEditing } from "../../functions/is-editing";
+import { isPreviewing } from "../../functions/is-previewing";
+import { previewingModelName } from "../../functions/previewing-model-name";
+import { getContent } from "../../functions/get-content";
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from "../../functions/get-builder-search-params";
+import RenderBlocks from "../render-blocks";
+import { evaluate } from "../../functions/evaluate";
+import { getFetch } from "../../functions/get-fetch";
+import { TARGET } from "../../constants/target";
+import RenderStyles from "./components/render-styles";
 export default function RenderContent(props) {
   const state = createMutable({
     get useContent() {
@@ -52,60 +52,6 @@ export default function RenderContent(props) {
       return {};
     },
 
-    getCssFromFont(font, data) {
-      // TODO: compute what font sizes are used and only load those.......
-      const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-      const name = family.split(",")[0];
-      const url = font.fileUrl ?? font?.files?.regular;
-      let str = "";
-
-      if (url && family && name) {
-        str += `
- @font-face {
-   font-family: "${family}";
-   src: local("${name}"), url('${url}') format('woff2');
-   font-display: fallback;
-   font-weight: 400;
- }
-         `.trim();
-      }
-
-      if (font.files) {
-        for (const weight in font.files) {
-          const isNumber = String(Number(weight)) === weight;
-
-          if (!isNumber) {
-            continue;
-          } // TODO: maybe limit number loaded
-
-
-          const weightUrl = font.files[weight];
-
-          if (weightUrl && weightUrl !== url) {
-            str += `
- @font-face {
-   font-family: "${family}";
-   src: url('${weightUrl}') format('woff2');
-   font-display: fallback;
-   font-weight: ${weight};
- }
-           `.trim();
-          }
-        }
-      }
-
-      return str;
-    },
-
-    getFontCss(data) {
-      // TODO: flag for this
-      // if (!this.builder.allowCustomFonts) {
-      //   return '';
-      // }
-      // TODO: separate internal data from external
-      return data?.customFonts?.map(font => this.getCssFromFont(font, data))?.join(" ") || "";
-    },
-
     processMessage(event) {
       const {
         data
@@ -266,41 +212,44 @@ export default function RenderContent(props) {
     get children() {
       return _$createComponent(Show, {
         get when() {
-          return state.state.useContent;
+          return state.useContent;
         },
 
         get children() {
-          const _el$ = _tmpl$2.cloneNode(true);
+          const _el$ = _tmpl$.cloneNode(true);
 
           _el$.$$click = event => track("click", {
-            contentId: state.state.useContent.id
+            contentId: state.useContent.id
           });
 
           _$insert(_el$, _$createComponent(Show, {
             get when() {
-              return _$memo(() => !!(state.state.useContent?.data?.cssCode || state.state.useContent?.data?.customFonts?.length), true)() && !isReactNative();
+              return (state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative";
             },
 
             get children() {
-              const _el$2 = _tmpl$.cloneNode(true);
-
-              _$insert(_el$2, () => state.state.useContent.data.cssCode, null);
+              return _$createComponent(RenderStyles, {
+                get cssCode() {
+                  return state.useContent.data.cssCode;
+                },
 
-              _$insert(_el$2, () => state.state.getFontCss(state.state.useContent.data), null);
+                get customFonts() {
+                  return state.useContent.data.customFonts;
+                }
 
-              return _el$2;
+              });
             }
 
           }), null);
 
           _$insert(_el$, _$createComponent(RenderBlocks, {
             get blocks() {
-              return state.state.useContent?.data?.blocks;
+              return state.useContent?.data?.blocks;
             }
 
           }), null);
 
-          _$effect(() => _$setAttribute(_el$, "data-builder-content-id", state.state.useContent?.id));
+          _$effect(() => _$setAttribute(_el$, "data-builder-content-id", state.useContent?.id));
 
           return _el$;
         }

package/src/components/{render-content.lite.tsx → render-content/render-content.lite.tsx}

@@ -1,24 +1,23 @@
-import { Show, onMount } from "solid-js";
+import { useContext, Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
-import { isBrowser } from "../functions/is-browser";
-import BuilderContext from "../context/builder.context";
-import { track } from "../functions/track";
-import { isReactNative } from "../functions/is-react-native";
-import { isEditing } from "../functions/is-editing";
-import { isPreviewing } from "../functions/is-previewing";
-import { previewingModelName } from "../functions/previewing-model-name";
-import { getContent } from "../functions/get-content";
+import { isBrowser } from "../../functions/is-browser";
+import BuilderContext from "../../context/builder.context";
+import { track } from "../../functions/track";
+import { isEditing } from "../../functions/is-editing";
+import { isPreviewing } from "../../functions/is-previewing";
+import { previewingModelName } from "../../functions/previewing-model-name";
+import { getContent } from "../../functions/get-content";
 import {
   convertSearchParamsToQueryObject,
   getBuilderSearchParams,
-} from "../functions/get-builder-search-params";
-import RenderBlocks from "./render-blocks.lite";
-import { evaluate } from "../functions/evaluate";
-import { getFetch } from "../functions/get-fetch";
-import { onChange } from "../functions/on-change";
-import { ifTarget } from "../functions/if-target";
+} from "../../functions/get-builder-search-params";
+import RenderBlocks from "../render-blocks.lite";
+import { evaluate } from "../../functions/evaluate";
+import { getFetch } from "../../functions/get-fetch";
+import { TARGET } from "../../constants/target";
+import RenderStyles from "./components/render-styles.lite";
 
 export default function RenderContent(props) {
   const state = createMutable({
@@ -49,63 +48,6 @@ export default function RenderContent(props) {
         [index: string]: any;
       };
     },
-    getCssFromFont(font: any, data?: any) {
-      // TODO: compute what font sizes are used and only load those.......
-      const family =
-        font.family +
-        (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-      const name = family.split(",")[0];
-      const url = font.fileUrl ?? font?.files?.regular;
-      let str = "";
-
-      if (url && family && name) {
-        str += `
- @font-face {
-   font-family: "${family}";
-   src: local("${name}"), url('${url}') format('woff2');
-   font-display: fallback;
-   font-weight: 400;
- }
-         `.trim();
-      }
-
-      if (font.files) {
-        for (const weight in font.files) {
-          const isNumber = String(Number(weight)) === weight;
-
-          if (!isNumber) {
-            continue;
-          } // TODO: maybe limit number loaded
-
-          const weightUrl = font.files[weight];
-
-          if (weightUrl && weightUrl !== url) {
-            str += `
- @font-face {
-   font-family: "${family}";
-   src: url('${weightUrl}') format('woff2');
-   font-display: fallback;
-   font-weight: ${weight};
- }
-           `.trim();
-          }
-        }
-      }
-
-      return str;
-    },
-    getFontCss(data?: any) {
-      // TODO: flag for this
-      // if (!this.builder.allowCustomFonts) {
-      //   return '';
-      // }
-      // TODO: separate internal data from external
-      return (
-        data?.customFonts
-          ?.map((font: any) => this.getCssFromFont(font, data))
-          ?.join(" ") || ""
-      );
-    },
     processMessage(event: MessageEvent) {
       const { data } = event;
 
@@ -258,30 +200,28 @@ export default function RenderContent(props) {
       }}
       component={BuilderContext.Provider}
     >
-      <Show when={state.state.useContent}>
+      <Show when={state.useContent}>
         <div
           onClick={(event) =>
             track("click", {
-              contentId: state.state.useContent.id,
+              contentId: state.useContent.id,
             })
           }
-          data-builder-content-id={state.state.useContent?.id}
+          data-builder-content-id={state.useContent?.id}
         >
           <Show
             when={
-              (state.state.useContent?.data?.cssCode ||
-                state.state.useContent?.data?.customFonts?.length) &&
-              !isReactNative()
+              (state.useContent?.data?.cssCode ||
+                state.useContent?.data?.customFonts?.length) &&
+              TARGET !== "reactNative"
             }
           >
-            <style>
-              {state.state.useContent.data.cssCode}
-              {state.state.getFontCss(state.state.useContent.data)}
-            </style>
+            <RenderStyles
+              cssCode={state.useContent.data.cssCode}
+              customFonts={state.useContent.data.customFonts}
+            ></RenderStyles>
           </Show>
-          <RenderBlocks
-            blocks={state.state.useContent?.data?.blocks}
-          ></RenderBlocks>
+          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>
       </Show>
     </Dynamic>

package/src/constants/target.js

@@ -0,0 +1,4 @@
+const TARGET = "solid";
+export {
+  TARGET
+};

package/src/functions/if-target.js

@@ -1,5 +1,14 @@
-function ifTarget(target, doThing, elseThing) {
-  return doThing();
+import { TARGET } from "../constants/target";
+function ifTarget({
+  targets,
+  doThing,
+  elseThing
+}) {
+  if (TARGET && targets.includes(TARGET)) {
+    return doThing();
+  } else {
+    return elseThing == null ? void 0 : elseThing();
+  }
 }
 export {
   ifTarget

package/src/functions/track.js

@@ -1,11 +1,11 @@
+import { TARGET } from "../constants/target";
 import { isBrowser } from "./is-browser";
 import { isEditing } from "./is-editing";
-import { isReactNative } from "./is-react-native";
 function track(event, properties) {
   if (isEditing()) {
     return;
   }
-  if (!(isBrowser() || isReactNative())) {
+  if (!(isBrowser() || TARGET === "reactNative")) {
     return;
   }
   return fetch(`https://builder.io/api/v1/track`, {

package/src/index-helpers/blocks-exports.js

@@ -6,7 +6,7 @@ import { default as default6 } from "../blocks/symbol";
 import { default as default7 } from "../blocks/button";
 import { default as default8 } from "../blocks/section";
 import { default as default9 } from "../blocks/fragment";
-import { default as default10 } from "../components/render-content";
+import { default as default10 } from "../components/render-content/render-content";
 export {
   default7 as Button,
   default2 as Columns,

package/src/scripts/init-editing.js

@@ -1,4 +1,5 @@
 var _a;
+import { TARGET } from "../constants/target";
 import { isBrowser } from "../functions/is-browser";
 import { register } from "../functions/register";
 register("insertMenu", {
@@ -9,7 +10,7 @@ register("insertMenu", {
     { name: "Text" },
     { name: "Image" },
     { name: "Columns" },
-    ...false ? [] : [
+    ...TARGET === "reactNative" ? [] : [
       { name: "Core:Section" },
       { name: "Core:Button" },
       { name: "Embed" },
@@ -21,7 +22,7 @@ if (isBrowser()) {
   (_a = window.parent) == null ? void 0 : _a.postMessage({
     type: "builder.sdkInfo",
     data: {
-      target: "solid",
+      target: TARGET,
       supportsPatchUpdates: false
     }
   }, "*");

package/src/functions/get-target.js

@@ -1,6 +0,0 @@
-function getTarget(_) {
-  return "reactNative";
-}
-export {
-  getTarget
-};

package/src/functions/is-react-native.js

@@ -1,6 +0,0 @@
-function isReactNative() {
-  return false;
-}
-export {
-  isReactNative
-};