@builder.io/sdk-solid 0.0.5 → 0.0.8-0

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.5",
+  "version": "0.0.8-0",
+  "type": "module",
   "description": "",
-  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "scripts": {
+    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+  },
   "dependencies": {
     "solid-styled-components": "^0.27.6"
   },

package/src/blocks/button/button.jsx

@@ -0,0 +1,13 @@
+import { Show } from "solid-js";
+
+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>
+    </>;
+}
+
+export default Button;

package/src/blocks/button/button.lite.tsx

@@ -0,0 +1,20 @@
+import { Show } from "solid-js";
+
+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>
+    </>
+  );
+}
+
+export default Button;

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

@@ -0,0 +1,41 @@
+const componentInfo = {
+  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
+};
+export {
+  componentInfo
+};

package/src/blocks/button/index.js

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

package/src/blocks/columns/columns.jsx

@@ -0,0 +1,91 @@
+import { For } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+import RenderBlocks from "../../components/render-blocks";
+
+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 <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) => {
+        const index = _index();
+
+        return <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),
+          "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
+          ...state.columnCssVars
+        }}>
+              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+            </div>;
+      }}
+      </For>
+    </div>;
+}
+
+export default Columns;

package/src/blocks/{columns.lite.tsx → columns/columns.lite.tsx}

@@ -3,9 +3,9 @@ import { For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
-import RenderBlocks from "../components/render-blocks.lite";
+import RenderBlocks from "../../components/render-blocks.lite";
 
-export default function Columns(props) {
+function Columns(props) {
   const state = createMutable({
     getGutterSize() {
       return typeof props.space === "number" ? props.space || 0 : 20;
@@ -25,8 +25,9 @@ export default function Columns(props) {
       return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
     },
     maybeApplyForTablet(prop: string) {
-      const stackColumnsAt = props.stackColumnsAt || "tablet";
-      return stackColumnsAt === "tablet" ? prop : "inherit";
+      const _stackColumnsAt = props.stackColumnsAt || "tablet";
+
+      return _stackColumnsAt === "tablet" ? prop : "inherit";
     },
     get columnsCssVars() {
       const flexDir =
@@ -68,29 +69,34 @@ export default function Columns(props) {
       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),
-              "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
-              ...state.columnCssVars,
-            }}
-          >
-            <RenderBlocks blocks={column.blocks}></RenderBlocks>
-          </div>
-        )}
+        {(column, _index) => {
+          const index = _index();
+          return (
+            <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),
+                "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
+                ...state.columnCssVars,
+              }}
+            >
+              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+            </div>
+          );
+        }}
       </For>
     </div>
   );
 }
+
+export default Columns;

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

@@ -0,0 +1,217 @@
+const componentInfo = {
+  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
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/columns/index.js

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

package/src/blocks/custom-code/component-info.js

@@ -0,0 +1,31 @@
+const componentInfo = {
+  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
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/{custom-code.js → custom-code/custom-code.jsx}

@@ -1,10 +1,6 @@
-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) {
+
+function CustomCode(props) {
   const state = createMutable({
     scriptsInserted: [],
     scriptsRun: [],
@@ -49,24 +45,7 @@ export default function CustomCode(props) {
   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 <div class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")} ref={elem} innerHTML={props.code}></div>;
+}
 
-    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}]});
+export default CustomCode;

package/src/blocks/{custom-code.lite.tsx → custom-code/custom-code.lite.tsx}

@@ -1,6 +1,6 @@
 import { createMutable } from "solid-js/store";
 
-export default function CustomCode(props) {
+function CustomCode(props) {
   const state = createMutable({
     scriptsInserted: [],
     scriptsRun: [],
@@ -63,3 +63,5 @@ export default function CustomCode(props) {
     ></div>
   );
 }
+
+export default CustomCode;

package/src/blocks/custom-code/index.js

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

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

@@ -0,0 +1,24 @@
+const componentInfo = {
+  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
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/embed/embed.jsx

@@ -0,0 +1,51 @@
+import { createMutable } from "solid-js/store";
+
+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>;
+}
+
+export default Embed;