@builder.io/sdk-solid 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "main": "src/index.js",
   "dependencies": {

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/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
@@ -270,7 +216,7 @@ export default function RenderContent(props) {
         },
 
         get children() {
-          const _el$ = _tmpl$2.cloneNode(true);
+          const _el$ = _tmpl$.cloneNode(true);
 
           _el$.$$click = event => track("click", {
             contentId: state.useContent.id
@@ -278,17 +224,20 @@ export default function RenderContent(props) {
 
           _$insert(_el$, _$createComponent(Show, {
             get when() {
-              return _$memo(() => !!(state.useContent?.data?.cssCode || 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.useContent.data.cssCode, null);
+              return _$createComponent(RenderStyles, {
+                get cssCode() {
+                  return state.useContent.data.cssCode;
+                },
 
-              _$insert(_el$2, () => state.getFontCss(state.useContent.data), null);
+                get customFonts() {
+                  return state.useContent.data.customFonts;
+                }
 
-              return _el$2;
+              });
             }
 
           }), null);

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

@@ -2,23 +2,22 @@ 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;
 
@@ -271,13 +213,13 @@ export default function RenderContent(props) {
             when={
               (state.useContent?.data?.cssCode ||
                 state.useContent?.data?.customFonts?.length) &&
-              !isReactNative()
+              TARGET !== "reactNative"
             }
           >
-            <style>
-              {state.useContent.data.cssCode}
-              {state.getFontCss(state.useContent.data)}
-            </style>
+            <RenderStyles
+              cssCode={state.useContent.data.cssCode}
+              customFonts={state.useContent.data.customFonts}
+            ></RenderStyles>
           </Show>
           <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>

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
-};