@builder.io/sdk-solid 0.0.8-4 → 0.0.8-5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-4",
+  "version": "0.0.8-5",
   "description": "",
   "type": "module",
   "main": "./entry-point/index.jsx",
@@ -8,6 +8,9 @@
   "exports": {
     ".": "./entry-point/index.jsx"
   },
+  "files": [
+    "src/**, entry-point/**"
+  ],
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },

package/entry-point/index.jsx

@@ -1,5 +0,0 @@
-/**
- * We need to have a `.jsx` entry point for our SolidJS SDK. To avoid enforcing this to all other frameworks,
- * we add this file and use it to re-export the index.js file from the Mitosis-generated code.
- */
-export * from '../src/index.js'

package/src/blocks/button/button.jsx

@@ -1,13 +0,0 @@
-import { Show } from "solid-js";
-
-function Button(props) {
-  return <>
-      <Show fallback={<span {...props.attributes}>{props.text}</span>} 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

@@ -1,23 +0,0 @@
-import { Show } from "solid-js";
-
-function Button(props) {
-  return (
-    <>
-      <Show
-        fallback={<span {...props.attributes}>{props.text}</span>}
-        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

@@ -1,41 +0,0 @@
-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/columns/columns.jsx

@@ -1,91 +0,0 @@
-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/columns.lite.tsx

@@ -1,102 +0,0 @@
-import { For } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-
-import RenderBlocks from "../../components/render-blocks.lite";
-
-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) => {
-          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

@@ -1,217 +0,0 @@
-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/custom-code/component-info.js

@@ -1,31 +0,0 @@
-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/custom-code.jsx

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

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

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