@builder.io/sdk-solid 0.0.6 → 0.0.9

package/src/blocks/video/component-info.js

@@ -0,0 +1,106 @@
+const componentInfo = {
+  name: "Video",
+  canHaveChildren: true,
+  builtIn: true,
+  defaultStyles: {
+    minHeight: "20px",
+    minWidth: "20px"
+  },
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+  inputs: [
+    {
+      name: "video",
+      type: "file",
+      allowedFileTypes: ["mp4"],
+      bubble: true,
+      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+      required: true
+    },
+    {
+      name: "posterImage",
+      type: "file",
+      allowedFileTypes: ["jpeg", "png"],
+      helperText: "Image to show before the video plays"
+    },
+    {
+      name: "autoPlay",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "controls",
+      type: "boolean",
+      defaultValue: false
+    },
+    {
+      name: "muted",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "loop",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "playsInline",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "fit",
+      type: "text",
+      defaultValue: "cover",
+      enum: ["contain", "cover", "fill", "auto"]
+    },
+    {
+      name: "fitContent",
+      type: "boolean",
+      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+      defaultValue: true,
+      advanced: true
+    },
+    {
+      name: "position",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top right",
+        "bottom left",
+        "bottom right"
+      ]
+    },
+    {
+      name: "height",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "width",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      advanced: true,
+      defaultValue: 0.7004048582995948
+    },
+    {
+      name: "lazyLoad",
+      type: "boolean",
+      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+      defaultValue: true,
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/video/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component";
+import { componentInfo } from "./component-info";
+import component from "./video";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

package/src/blocks/video/video.jsx

@@ -0,0 +1,14 @@
+function Video(props) {
+  return <video {...props.attributes} preload="none" style={{
+    width: "100%",
+    height: "100%",
+    ...props.attributes?.style,
+    "object-fit": props.fit,
+    "object-position": props.position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    "border-radius": 1
+  }} key={props.video || "no-src"} poster={props.posterImage} autoPlay={props.autoPlay} muted={props.muted} controls={props.controls} loop={props.loop}></video>;
+}
+
+export default Video;

package/src/components/render-block/block-styles.jsx

@@ -0,0 +1,36 @@
+import { createMutable } from "solid-js/store";
+import RenderInlinedStyles from "../render-inlined-styles";
+
+function BlockStyles(props) {
+  const state = createMutable({
+    camelToKebabCase(string) {
+      return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+    },
+
+    get css() {
+      // TODO: media queries
+      const styleObject = props.block.responsiveStyles?.large;
+
+      if (!styleObject) {
+        return "";
+      }
+
+      let str = `.${props.block.id} {`;
+
+      for (const key in styleObject) {
+        const value = styleObject[key];
+
+        if (typeof value === "string") {
+          str += `${state.camelToKebabCase(key)}: ${value};`;
+        }
+      }
+
+      str += "}";
+      return str;
+    }
+
+  });
+  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+}
+
+export default BlockStyles;

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

@@ -0,0 +1,38 @@
+import { createMutable } from "solid-js/store";
+
+import RenderInlinedStyles from "../render-inlined-styles.lite";
+
+function BlockStyles(props) {
+  const state = createMutable({
+    camelToKebabCase(string: string) {
+      return string
+        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
+        .toLowerCase();
+    },
+    get css() {
+      // TODO: media queries
+      const styleObject = props.block.responsiveStyles?.large;
+
+      if (!styleObject) {
+        return "";
+      }
+
+      let str = `.${props.block.id} {`;
+
+      for (const key in styleObject) {
+        const value = styleObject[key];
+
+        if (typeof value === "string") {
+          str += `${state.camelToKebabCase(key)}: ${value};`;
+        }
+      }
+
+      str += "}";
+      return str;
+    },
+  });
+
+  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+}
+
+export default BlockStyles;

package/src/components/{render-block.jsx → render-block/render-block.jsx}

@@ -1,14 +1,15 @@
 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";
-import { getBlockProperties } from "../functions/get-block-properties";
-import { getBlockStyles } from "../functions/get-block-styles";
-import { getBlockTag } from "../functions/get-block-tag";
-import { components } from "../functions/register-component";
-import BuilderContext from "../context/builder.context";
-import { getBlockActions } from "../functions/get-block-actions";
-import { getProcessedBlock } from "../functions/get-processed-block";
+import { TARGET } from "../../constants/target";
+import BuilderContext from "../../context/builder.context";
+import { getBlockActions } from "../../functions/get-block-actions";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options";
+import { getBlockProperties } from "../../functions/get-block-properties";
+import { getBlockStyles } from "../../functions/get-block-styles";
+import { getBlockTag } from "../../functions/get-block-tag";
+import { getProcessedBlock } from "../../functions/get-processed-block";
+import { components } from "../../functions/register-component";
 import BlockStyles from "./block-styles";
 
 function RenderBlock(props) {
@@ -20,7 +21,7 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[state.useBlock.component?.name];
+      const ref = components[componentName];
 
       if (componentName && !ref) {
         // TODO: Public doc page with more info about this message
@@ -87,7 +88,9 @@ function RenderBlock(props) {
   return <>
       <Show when={!state.componentInfo?.noWrap}>
         <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
-          <BlockStyles block={state.useBlock}></BlockStyles>
+          <Show when={TARGET === "vue" || TARGET === "svelte"}>
+            <BlockStyles block={state.useBlock}></BlockStyles>
+          </Show>
           <Show when={state.componentRef}>
             <Dynamic {...state.componentOptions} builderBlock={state.useBlock} component={state.componentRef}>
               <For each={state.children}>

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

@@ -2,14 +2,15 @@ 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";
-import { getBlockProperties } from "../functions/get-block-properties";
-import { getBlockStyles } from "../functions/get-block-styles";
-import { getBlockTag } from "../functions/get-block-tag";
-import { components } from "../functions/register-component";
-import BuilderContext from "../context/builder.context";
-import { getBlockActions } from "../functions/get-block-actions";
-import { getProcessedBlock } from "../functions/get-processed-block";
+import { TARGET } from "../../constants/target";
+import BuilderContext from "../../context/builder.context";
+import { getBlockActions } from "../../functions/get-block-actions";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options";
+import { getBlockProperties } from "../../functions/get-block-properties";
+import { getBlockStyles } from "../../functions/get-block-styles";
+import { getBlockTag } from "../../functions/get-block-tag";
+import { getProcessedBlock } from "../../functions/get-processed-block";
+import { components } from "../../functions/register-component";
 import BlockStyles from "./block-styles.lite";
 
 function RenderBlock(props) {
@@ -21,7 +22,7 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[state.useBlock.component?.name!];
+      const ref = components[componentName];
 
       if (componentName && !ref) {
         // TODO: Public doc page with more info about this message
@@ -86,7 +87,9 @@ function RenderBlock(props) {
           style={state.css}
           component={state.tagName}
         >
-          <BlockStyles block={state.useBlock}></BlockStyles>
+          <Show when={TARGET === "vue" || TARGET === "svelte"}>
+            <BlockStyles block={state.useBlock}></BlockStyles>
+          </Show>
           <Show when={state.componentRef}>
             <Dynamic
               {...state.componentOptions}

package/src/components/render-blocks.jsx

@@ -2,7 +2,7 @@ import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 import { isEditing } from "../functions/is-editing";
-import RenderBlock from "./render-block";
+import RenderBlock from "./render-block/render-block";
 
 function RenderBlocks(props) {
   const state = createMutable({

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

@@ -4,7 +4,7 @@ import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
 import { isEditing } from "../functions/is-editing";
-import RenderBlock from "./render-block.lite";
+import RenderBlock from "./render-block/render-block.lite";
 
 function RenderBlocks(props) {
   const state = createMutable({

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

@@ -1,6 +1,7 @@
 import { createMutable } from "solid-js/store";
+import RenderInlinedStyles from "../../render-inlined-styles";
 
-function RenderStyles(props) {
+function RenderContentStyles(props) {
   const state = createMutable({
     getCssFromFont(font) {
       // TODO: compute what font sizes are used and only load those.......
@@ -58,16 +59,16 @@ function RenderStyles(props) {
       return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
     },
 
-    getInjectedStyles() {
+    get injectedStyles() {
       return `
-${props.cssCode}
+${props.cssCode || ""}
 ${state.getFontCss({
         customFonts: props.customFonts
       })}`;
     }
 
   });
-  return <style>{state.getInjectedStyles()}</style>;
+  return <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>;
 }
 
-export default RenderStyles;
+export default RenderContentStyles;

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

@@ -1,6 +1,8 @@
 import { createMutable } from "solid-js/store";
 
-function RenderStyles(props) {
+import RenderInlinedStyles from "../../render-inlined-styles.lite";
+
+function RenderContentStyles(props) {
   const state = createMutable({
     getCssFromFont(font: CustomFont) {
       // TODO: compute what font sizes are used and only load those.......
@@ -57,16 +59,18 @@ function RenderStyles(props) {
         customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
       );
     },
-    getInjectedStyles() {
+    get injectedStyles() {
       return `
-${props.cssCode}
+${props.cssCode || ""}
 ${state.getFontCss({
   customFonts: props.customFonts,
 })}`;
     },
   });
 
-  return <style>{state.getInjectedStyles()}</style>;
+  return (
+    <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>
+  );
 }
 
-export default RenderStyles;
+export default RenderContentStyles;

package/src/components/render-content/render-content.jsx

@@ -1,19 +1,19 @@
 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 { TARGET } from "../../constants/target";
 import BuilderContext from "../../context/builder.context";
-import { track } from "../../functions/track";
+import { evaluate } from "../../functions/evaluate";
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from "../../functions/get-builder-search-params";
+import { getContent } from "../../functions/get-content";
+import { getFetch } from "../../functions/get-fetch";
+import { isBrowser } from "../../functions/is-browser";
 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 { track } from "../../functions/track";
 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";
+import RenderContentStyles from "./components/render-styles";
 
 function RenderContent(props) {
   const state = createMutable({
@@ -32,7 +32,7 @@ function RenderContent(props) {
     update: 0,
     overrideState: {},
 
-    get state() {
+    get contentState() {
       return { ...props.content?.data?.state,
         ...props.data,
         ...state.overrideState
@@ -80,7 +80,7 @@ function RenderContent(props) {
         evaluate({
           code: jsCode,
           context: state.context,
-          state: state.state
+          state: state.contentState
         });
       }
     },
@@ -93,7 +93,7 @@ function RenderContent(props) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
         context: state.context,
-        state: state.state
+        state: state.contentState
       }));
     },
 
@@ -102,7 +102,8 @@ function RenderContent(props) {
       key
     }) {
       const fetchAndSetState = async () => {
-        const response = await getFetch()(url);
+        const fetch = await getFetch();
+        const response = await fetch(url);
         const json = await response.json();
         const newOverrideState = { ...state.overrideState,
           [key]: json
@@ -129,7 +130,7 @@ function RenderContent(props) {
     emitStateUpdate() {
       window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
         detail: {
-          state: state.state,
+          state: state.contentState,
           ref: {
             name: props.model
           }
@@ -182,7 +183,7 @@ function RenderContent(props) {
     },
 
     get state() {
-      return state.state;
+      return state.contentState;
     },
 
     get context() {
@@ -199,7 +200,7 @@ function RenderContent(props) {
         contentId: state.useContent.id
       })} data-builder-content-id={state.useContent?.id}>
           <Show when={(state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative"}>
-            <RenderStyles cssCode={state.useContent.data.cssCode} customFonts={state.useContent.data.customFonts}></RenderStyles>
+            <RenderContentStyles cssCode={state.useContent.data.cssCode} customFonts={state.useContent.data.customFonts}></RenderContentStyles>
           </Show>
           <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>

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

@@ -2,22 +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 { TARGET } from "../../constants/target";
 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 { evaluate } from "../../functions/evaluate";
 import {
   convertSearchParamsToQueryObject,
   getBuilderSearchParams,
 } from "../../functions/get-builder-search-params";
-import RenderBlocks from "../render-blocks.lite";
-import { evaluate } from "../../functions/evaluate";
+import { getContent } from "../../functions/get-content";
 import { getFetch } from "../../functions/get-fetch";
-import { TARGET } from "../../constants/target";
-import RenderStyles from "./components/render-styles.lite";
+import { isBrowser } from "../../functions/is-browser";
+import { isEditing } from "../../functions/is-editing";
+import { isPreviewing } from "../../functions/is-previewing";
+import { previewingModelName } from "../../functions/previewing-model-name";
+import { track } from "../../functions/track";
+import RenderBlocks from "../render-blocks.lite";
+import RenderContentStyles from "./components/render-styles.lite";
 
 function RenderContent(props) {
   const state = createMutable({
@@ -36,7 +36,7 @@ function RenderContent(props) {
     overrideContent: null,
     update: 0,
     overrideState: {},
-    get state() {
+    get contentState() {
       return {
         ...props.content?.data?.state,
         ...props.data,
@@ -84,7 +84,7 @@ function RenderContent(props) {
         evaluate({
           code: jsCode,
           context: state.context,
-          state: state.state,
+          state: state.contentState,
         });
       }
     },
@@ -96,13 +96,14 @@ function RenderContent(props) {
         evaluate({
           code: group,
           context: state.context,
-          state: state.state,
+          state: state.contentState,
         })
       );
     },
     handleRequest({ url, key }: { key: string; url: string }) {
       const fetchAndSetState = async () => {
-        const response = await getFetch()(url);
+        const fetch = await getFetch();
+        const response = await fetch(url);
         const json = await response.json();
         const newOverrideState = { ...state.overrideState, [key]: json };
         state.overrideState = newOverrideState;
@@ -128,7 +129,7 @@ function RenderContent(props) {
           "builder:component:stateChange",
           {
             detail: {
-              state: state.state,
+              state: state.contentState,
               ref: {
                 name: props.model,
               },
@@ -189,7 +190,7 @@ function RenderContent(props) {
           return state.useContent;
         },
         get state() {
-          return state.state;
+          return state.contentState;
         },
         get context() {
           return state.context;
@@ -216,10 +217,10 @@ function RenderContent(props) {
               TARGET !== "reactNative"
             }
           >
-            <RenderStyles
+            <RenderContentStyles
               cssCode={state.useContent.data.cssCode}
               customFonts={state.useContent.data.customFonts}
-            ></RenderStyles>
+            ></RenderContentStyles>
           </Show>
           <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>

package/src/functions/get-builder-search-params/fn.test.js

@@ -1,4 +1,4 @@
-import { getBuilderSearchParams, convertSearchParamsToQueryObject } from ".";
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
 const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
 const url = new URL(`localhost:3000/about-us?${querystring}`);
 describe("Get Builder SearchParams", () => {

package/src/functions/get-content/index.js

@@ -38,7 +38,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { getFetch } from "../get-fetch";
-const fetch = getFetch();
+const fetch$ = getFetch();
 function flatten(object, path = null, separator = ".") {
   return Object.keys(object).reduce((acc, key) => {
     const value = object[key];
@@ -123,6 +123,7 @@ const handleABTesting = (content, testGroups) => {
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
+    const fetch = yield fetch$;
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
       handleABTesting(content, options.testGroups);

package/src/functions/get-fetch.js

@@ -1,11 +1,33 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { getGlobalThis } from "./get-global-this";
 function getFetch() {
-  let fetch = getGlobalThis().fetch;
-  if (typeof fetch === "undefined" && typeof global !== "undefined") {
-    const _require = eval("require");
-    fetch = _require("node-fetch");
-  }
-  return fetch;
+  return __async(this, null, function* () {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
+      const nodeFetch = import("node-fetch").then((d) => d.default);
+      return nodeFetch;
+    }
+    return globalFetch;
+  });
 }
 export {
   getFetch

package/src/index.js

@@ -1,8 +1,5 @@
-import("./index-helpers/top-of-file");
-import { isEditing } from "./functions/is-editing";
-if (isEditing()) {
-  import("./scripts/init-editing");
-}
+import "./index-helpers/top-of-file";
+import "./scripts/init-editing";
 export * from "./index-helpers/blocks-exports";
 export * from "./functions/is-editing";
 export * from "./functions/is-previewing";