@builder.io/sdk-solid 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# Builder.io SDK for Solid
+
+More info comign soon

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@builder.io/sdk-solid",
+  "version": "0.0.1",
+  "description": "",
+  "main": "src/index.js",
+  "dependencies": {
+    "solid-js": "^1.3.15"
+  }
+}

package/src/blocks/button.js

@@ -0,0 +1,41 @@
+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";
+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;
+    },
+
+    get children() {
+      const _el$ = _tmpl$.cloneNode(true);
+
+      _$spread(_el$, () => props.attributes, false, true);
+
+      _$insert(_el$, () => props.text);
+
+      _$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
+      });
+
+      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

@@ -0,0 +1,18 @@
+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>
+    </>
+  );
+}

package/src/blocks/columns.js

@@ -0,0 +1,133 @@
+import { template as _$template } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
+
+import { For } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+import RenderBlocks from "../components/render-blocks";
+export default function Columns(props) {
+  const state = createMutable({
+    getGutterSize() {
+      return typeof props.space === "number" ? props.space || 0 : 20;
+    },
+
+    getColumns() {
+      return props.columns || [];
+    },
+
+    getWidth(index) {
+      const columns = this.getColumns();
+      return columns[index]?.width || 100 / columns.length;
+    },
+
+    getColumnCssWidth(index) {
+      const columns = this.getColumns();
+      const gutterSize = this.getGutterSize();
+      const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+    },
+
+    maybeApplyForTablet(prop) {
+      const stackColumnsAt = props.stackColumnsAt || "tablet";
+      return stackColumnsAt === "tablet" ? prop : "inherit";
+    },
+
+    get columnsCssVars() {
+      const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+      return {
+        "--flex-dir": flexDir,
+        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir)
+      };
+    },
+
+    get columnCssVars() {
+      const width = "100%";
+      const marginLeft = "0";
+      return {
+        "--column-width": width,
+        "--column-margin-left": marginLeft,
+        "--column-width-tablet": this.maybeApplyForTablet(width),
+        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft)
+      };
+    }
+
+  });
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    _$insert(_el$, _$createComponent(For, {
+      get each() {
+        return props.columns;
+      },
+
+      children: (column, index) => (() => {
+        const _el$2 = _tmpl$.cloneNode(true);
+
+        _$insert(_el$2, _$createComponent(RenderBlocks, {
+          get blocks() {
+            return column.blocks;
+          }
+
+        }));
+
+        _$effect(_p$ => {
+          const _v$3 = css({
+            flexGrow: "1",
+            "@media (max-width: 999px)": {
+              width: "var(--column-width-tablet) !important",
+              marginLeft: "var(--column-margin-left-tablet) !important"
+            },
+            "@media (max-width: 639px)": {
+              width: "var(--column-width) !important",
+              marginLeft: "var(--column-margin-left) !important"
+            }
+          }),
+                _v$4 = {
+            width: state.getColumnCssWidth(index),
+            marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+            ...state.columnCssVars
+          };
+
+          _v$3 !== _p$._v$3 && (_el$2.className = _p$._v$3 = _v$3);
+          _p$._v$4 = _$style(_el$2, _v$4, _p$._v$4);
+          return _p$;
+        }, {
+          _v$3: undefined,
+          _v$4: undefined
+        });
+
+        return _el$2;
+      })()
+    }));
+
+    _$effect(_p$ => {
+      const _v$ = css({
+        display: "flex",
+        alignItems: "stretch",
+        lineHeight: "normal",
+        "@media (max-width: 999px)": {
+          flexDirection: "var(--flex-dir-tablet)"
+        },
+        "@media (max-width: 639px)": {
+          flexDirection: "var(--flex-dir)"
+        }
+      }),
+            _v$2 = state.columnsCssVars;
+
+      _v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
+      _p$._v$2 = _$style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+}import { registerComponent } from '../functions/register-component';
+registerComponent(Columns, {name:'Columns',builtIn:true,inputs:[{name:'columns',type:'array',broadcast:true,subFields:[{name:'blocks',type:'array',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{name:'width',type:'number',hideFromUI:true,helperText:'Width %, e.g. set to 50 to fill half of the space'},{name:'link',type:'url',helperText:'Optionally set a url that clicking this column will link to'}],defaultValue:[{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]}],onChange:"        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      "},{name:'space',type:'number',defaultValue:20,helperText:'Size of gap between columns',advanced:true},{name:'stackColumnsAt',type:'string',defaultValue:'tablet',helperText:'Convert horizontal columns to vertical at what device size',enum:['tablet','mobile','never'],advanced:true},{name:'reverseColumnsWhenStacked',type:'boolean',defaultValue:false,helperText:'When stacking columns for mobile devices, reverse the ordering',advanced:true}]});

package/src/blocks/columns.lite.tsx

@@ -0,0 +1,96 @@
+import { For } from "solid-js";
+
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+
+import RenderBlocks from "../components/render-blocks.lite";
+
+export default function Columns(props) {
+  const state = createMutable({
+    getGutterSize() {
+      return typeof props.space === "number" ? props.space || 0 : 20;
+    },
+    getColumns() {
+      return props.columns || [];
+    },
+    getWidth(index: number) {
+      const columns = this.getColumns();
+      return columns[index]?.width || 100 / columns.length;
+    },
+    getColumnCssWidth(index: number) {
+      const columns = this.getColumns();
+      const gutterSize = this.getGutterSize();
+      const subtractWidth =
+        (gutterSize * (columns.length - 1)) / columns.length;
+      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+    },
+    maybeApplyForTablet(prop: string) {
+      const stackColumnsAt = props.stackColumnsAt || "tablet";
+      return stackColumnsAt === "tablet" ? prop : "inherit";
+    },
+    get columnsCssVars() {
+      const flexDir =
+        props.stackColumnsAt === "never"
+          ? "inherit"
+          : props.reverseColumnsWhenStacked
+          ? "column-reverse"
+          : "column";
+      return {
+        "--flex-dir": flexDir,
+        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir),
+      };
+    },
+    get columnCssVars() {
+      const width = "100%";
+      const marginLeft = "0";
+      return {
+        "--column-width": width,
+        "--column-margin-left": marginLeft,
+        "--column-width-tablet": this.maybeApplyForTablet(width),
+        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft),
+      };
+    },
+  });
+
+  return (
+    <div
+      class={css({
+        display: "flex",
+        alignItems: "stretch",
+        lineHeight: "normal",
+        "@media (max-width: 999px)": {
+          flexDirection: "var(--flex-dir-tablet)",
+        },
+        "@media (max-width: 639px)": {
+          flexDirection: "var(--flex-dir)",
+        },
+      })}
+      style={state.columnsCssVars}
+    >
+      <For each={props.columns}>
+        {(column, index) => (
+          <div
+            class={css({
+              flexGrow: "1",
+              "@media (max-width: 999px)": {
+                width: "var(--column-width-tablet) !important",
+                marginLeft: "var(--column-margin-left-tablet) !important",
+              },
+              "@media (max-width: 639px)": {
+                width: "var(--column-width) !important",
+                marginLeft: "var(--column-margin-left) !important",
+              },
+            })}
+            style={{
+              width: state.getColumnCssWidth(index),
+              marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+              ...state.columnCssVars,
+            }}
+          >
+            <RenderBlocks blocks={column.blocks}></RenderBlocks>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+}

package/src/blocks/custom-code.js

@@ -0,0 +1,72 @@
+import { template as _$template } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
+
+import { createMutable } from "solid-js/store";
+export default function CustomCode(props) {
+  const state = createMutable({
+    scriptsInserted: [],
+    scriptsRun: [],
+
+    findAndRunScripts() {
+      // TODO: Move this function to standalone one in '@builder.io/utils'
+      if (elem && typeof window !== "undefined") {
+        /** @type {HTMLScriptElement[]} */
+        const scripts = elem.getElementsByTagName("script");
+
+        for (let i = 0; i < scripts.length; i++) {
+          const script = scripts[i];
+
+          if (script.src) {
+            if (state.scriptsInserted.includes(script.src)) {
+              continue;
+            }
+
+            state.scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+          } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
+            if (state.scriptsRun.includes(script.innerText)) {
+              continue;
+            }
+
+            try {
+              state.scriptsRun.push(script.innerText);
+              new Function(script.innerText)();
+            } catch (error) {
+              console.warn("`CustomCode`: Error running script:", error);
+            }
+          }
+        }
+      }
+    }
+
+  });
+  const elem = useRef();
+  onMount(() => {
+    state.findAndRunScripts();
+  });
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    elem(_el$);
+
+    _$effect(_p$ => {
+      const _v$ = "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
+            _v$2 = props.code;
+
+      _v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && (_el$.innerHTML = _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+
+    return _el$;
+  })();
+}import { registerComponent } from '../functions/register-component';
+registerComponent(CustomCode, {name:'Custom Code',static:true,builtIn:true,requiredPermissions:['editCode'],inputs:[{name:'code',type:'html',required:true,defaultValue:'<p>Hello there, I am custom HTML code!</p>',code:true},{name:'replaceNodes',type:'boolean',helperText:'Preserve server rendered dom nodes',advanced:true},{name:'scriptsClientOnly',type:'boolean',defaultValue:false,helperText:'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',advanced:true}]});

package/src/blocks/custom-code.lite.tsx

@@ -0,0 +1,65 @@
+import { createMutable } from "solid-js/store";
+
+export default function CustomCode(props) {
+  const state = createMutable({
+    scriptsInserted: [],
+    scriptsRun: [],
+    findAndRunScripts() {
+      // TODO: Move this function to standalone one in '@builder.io/utils'
+      if (elem && typeof window !== "undefined") {
+        /** @type {HTMLScriptElement[]} */
+        const scripts = elem.getElementsByTagName("script");
+
+        for (let i = 0; i < scripts.length; i++) {
+          const script = scripts[i];
+
+          if (script.src) {
+            if (state.scriptsInserted.includes(script.src)) {
+              continue;
+            }
+
+            state.scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+          } else if (
+            !script.type ||
+            [
+              "text/javascript",
+              "application/javascript",
+              "application/ecmascript",
+            ].includes(script.type)
+          ) {
+            if (state.scriptsRun.includes(script.innerText)) {
+              continue;
+            }
+
+            try {
+              state.scriptsRun.push(script.innerText);
+              new Function(script.innerText)();
+            } catch (error) {
+              console.warn("`CustomCode`: Error running script:", error);
+            }
+          }
+        }
+      }
+    },
+  });
+
+  const elem = useRef();
+
+  onMount(() => {
+    state.findAndRunScripts();
+  });
+
+  return (
+    <div
+      class={
+        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+      }
+      ref={elem}
+      innerHTML={props.code}
+    ></div>
+  );
+}

package/src/blocks/embed.js

@@ -0,0 +1,62 @@
+import { template as _$template } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
+
+import { createMutable } from "solid-js/store";
+export default function Embed(props) {
+  const state = createMutable({
+    scriptsInserted: [],
+    scriptsRun: [],
+
+    findAndRunScripts() {
+      // TODO: Move this function to standalone one in '@builder.io/utils'
+      if (elem && typeof window !== "undefined") {
+        /** @type {HTMLScriptElement[]} */
+        const scripts = elem.getElementsByTagName("script");
+
+        for (let i = 0; i < scripts.length; i++) {
+          const script = scripts[i];
+
+          if (script.src) {
+            if (state.scriptsInserted.includes(script.src)) {
+              continue;
+            }
+
+            state.scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+          } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
+            if (state.scriptsRun.includes(script.innerText)) {
+              continue;
+            }
+
+            try {
+              state.scriptsRun.push(script.innerText);
+              new Function(script.innerText)();
+            } catch (error) {
+              console.warn("`Embed`: Error running script:", error);
+            }
+          }
+        }
+      }
+    }
+
+  });
+  const elem = useRef();
+  onMount(() => {
+    state.findAndRunScripts();
+  });
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    elem(_el$);
+
+    _$effect(() => _el$.innerHTML = props.content);
+
+    return _el$;
+  })();
+}import { registerComponent } from '../functions/register-component';
+registerComponent(Embed, {name:'Embed',static:true,builtIn:true,inputs:[{name:'url',type:'url',required:true,defaultValue:'',helperText:'e.g. enter a youtube url, google map, etc',onChange:"        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "},{name:'content',type:'html',defaultValue:'<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',hideFromUI:true}]});

package/src/blocks/embed.lite.tsx

@@ -0,0 +1,57 @@
+import { createMutable } from "solid-js/store";
+
+export default function Embed(props) {
+  const state = createMutable({
+    scriptsInserted: [],
+    scriptsRun: [],
+    findAndRunScripts() {
+      // TODO: Move this function to standalone one in '@builder.io/utils'
+      if (elem && typeof window !== "undefined") {
+        /** @type {HTMLScriptElement[]} */
+        const scripts = elem.getElementsByTagName("script");
+
+        for (let i = 0; i < scripts.length; i++) {
+          const script = scripts[i];
+
+          if (script.src) {
+            if (state.scriptsInserted.includes(script.src)) {
+              continue;
+            }
+
+            state.scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+          } else if (
+            !script.type ||
+            [
+              "text/javascript",
+              "application/javascript",
+              "application/ecmascript",
+            ].includes(script.type)
+          ) {
+            if (state.scriptsRun.includes(script.innerText)) {
+              continue;
+            }
+
+            try {
+              state.scriptsRun.push(script.innerText);
+              new Function(script.innerText)();
+            } catch (error) {
+              console.warn("`Embed`: Error running script:", error);
+            }
+          }
+        }
+      }
+    },
+  });
+
+  const elem = useRef();
+
+  onMount(() => {
+    state.findAndRunScripts();
+  });
+
+  return <div ref={elem} innerHTML={props.content}></div>;
+}