@builder.io/sdk-solid 0.0.5 → 0.0.8

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.5",
+  "version": "0.0.8",
+  "type": "module",
   "description": "",
-  "main": "src/index.js",
+  "module": "src/index.js",
   "dependencies": {
     "solid-styled-components": "^0.27.6"
   },
@@ -11,5 +12,61 @@
   },
   "devDependencies": {
     "solid-js": "^1.3.15"
+  },
+  "exports": {
+    "./functions/event-handler": "./functions/event-handler.js",
+    "./functions/get-block-actions": "./functions/get-block-actions.js",
+    "./functions/get-block-component": "./functions/get-block-component.js",
+    "./functions/get-block-properties": "./functions/get-block-properties.js",
+    "./functions/get-block-styles": "./functions/get-block-styles.js",
+    "./functions/get-block-tag": "./functions/get-block-tag.js",
+    "./functions/get-fetch": "./functions/get-fetch.js",
+    "./functions/get-global-this": "./functions/get-global-this.js",
+    "./functions/get-processed-block": "./functions/get-processed-block.js",
+    "./functions/if-target": "./functions/if-target.js",
+    "./functions/is-browser": "./functions/is-browser.js",
+    "./functions/is-editing": "./functions/is-editing.js",
+    "./functions/is-iframe": "./functions/is-iframe.js",
+    "./functions/is-previewing": "./functions/is-previewing.js",
+    "./functions/macro-eval": "./functions/macro-eval.js",
+    "./functions/on-change": "./functions/on-change.js",
+    "./functions/previewing-model-name": "./functions/previewing-model-name.js",
+    "./functions/register-component": "./functions/register-component.js",
+    "./functions/register": "./functions/register.js",
+    "./functions/set-editor-settings": "./functions/set-editor-settings.js",
+    "./functions/set": "./functions/set.js",
+    "./functions/track": "./functions/track.js",
+    "./functions/transform-block": "./functions/transform-block.js",
+    "./functions/get-content": "./functions/get-content/index.js",
+    "./functions/get-builder-search-params": "./functions/get-builder-search-params/index.js",
+    "./functions/index-helpers/block-exports": "./functions/index-helpers/block-exports.js",
+    "./functions/index-helpers/top-of-file": "./functions/index-helpers/top-of-file.js",
+    "./functions/scripts/init-editing": "./functions/scripts/init-editing.js",
+    "./constants/device-sizes": "./constants/device-sizes.js",
+    "./constants/target": "./constants/target.js",
+    "./context/builder.context": "./context/builder.context.js",
+    "./components/block-styles": "./components/block-styles.js",
+    "./components/error-boundary": "./components/error-boundary.js",
+    "./components/render-block": "./components/render-block.js",
+    "./components/render-blocks": "./components/render-blocks.js",
+    "./components/render-content/render-content": "./components/render-content/render-content.js",
+    "./components/render-content/components/render-styles": "./components/components/render-styles/render-content.js",
+    "./blocks/button": "./blocks/button.jsx",
+    "./blocks/columns": "./blocks/columns.jsx",
+    "./blocks/custom-code": "./blocks/custom-code.jsx",
+    "./blocks/embed": "./blocks/embed.jsx",
+    "./blocks/form": "./blocks/form.jsx",
+    "./blocks/fragment": "./blocks/fragment.jsx",
+    "./blocks/image": "./blocks/image.jsx",
+    "./blocks/img": "./blocks/img.jsx",
+    "./blocks/input": "./blocks/input.jsx",
+    "./blocks/raw-text": "./blocks/raw-text.jsx",
+    "./blocks/section": "./blocks/section.jsx",
+    "./blocks/select": "./blocks/select.jsx",
+    "./blocks/submit-button": "./blocks/submit-button.jsx",
+    "./blocks/symbol": "./blocks/symbol.jsx",
+    "./blocks/text": "./blocks/text.jsx",
+    "./blocks/textarea": "./blocks/textarea.jsx",
+    "./blocks/video": "./blocks/video.jsx"
   }
 }

package/src/blocks/button.jsx

@@ -0,0 +1,8 @@
+function Button(props) {
+  return <a {...props.attributes} role="button" href={props.link} target={props.openLinkInNewTab ? "_blank" : undefined}>
+      {props.text}
+    </a>;
+}
+
+export default Button;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

@@ -1,4 +1,4 @@
-export default function Button(props) {
+function Button(props) {
   return (
     <a
       {...props.attributes}
@@ -10,3 +10,5 @@ export default function Button(props) {
     </a>
   );
 }
+
+export default Button;

package/src/blocks/{columns.js → columns.jsx}

@@ -1,16 +1,9 @@
-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) {
+
+function Columns(props) {
   const state = createMutable({
     getGutterSize() {
       return typeof props.space === "number" ? props.space || 0 : 20;
@@ -57,77 +50,42 @@ export default function Columns(props) {
     }
 
   });
-  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;
+  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"
           }
-
-        }));
-
-        _$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),
-            "margin-left": `${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';
+        })} 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;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

@@ -5,7 +5,7 @@ import { css } from "solid-styled-components";
 
 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;
@@ -68,29 +68,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/{custom-code.js → 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,8 @@ 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';
+export default CustomCode;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

@@ -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/{embed.js → embed.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 Embed(props) {
+
+function Embed(props) {
   const state = createMutable({
     scriptsInserted: [],
     scriptsRun: [],
@@ -49,14 +45,8 @@ export default function Embed(props) {
   onMount(() => {
     state.findAndRunScripts();
   });
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    elem(_el$);
-
-    _$effect(() => _el$.innerHTML = props.content);
+  return <div ref={elem} innerHTML={props.content}></div>;
+}
 
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
+export default Embed;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

@@ -1,6 +1,6 @@
 import { createMutable } from "solid-js/store";
 
-export default function Embed(props) {
+function Embed(props) {
   const state = createMutable({
     scriptsInserted: [],
     scriptsRun: [],
@@ -55,3 +55,5 @@ export default function Embed(props) {
 
   return <div ref={elem} innerHTML={props.content}></div>;
 }
+
+export default Embed;

package/src/blocks/{form.js → form.jsx}

@@ -1,19 +1,9 @@
-import { template as _$template } 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 { createComponent as _$createComponent } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<pre></pre>`, 2),
-      _tmpl$2 = /*#__PURE__*/_$template(`<form></form>`, 2);
-
 import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 import RenderBlock from "../components/render-block";
-export default function FormComponent(props) {
+
+function FormComponent(props) {
   const state = createMutable({
     state: "unsubmitted",
     responseData: null,
@@ -228,128 +218,36 @@ export default function FormComponent(props) {
 
   });
   const formRef = useRef();
-  return (() => {
-    const _el$ = _tmpl$2.cloneNode(true);
-
-    _el$.addEventListener("submit", event => state.onSubmit(event));
-
-    formRef(_el$);
-
-    _$spread(_el$, () => props.attributes, false, true);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return props.builderBlock && props.builderBlock.children;
-      },
-
-      get children() {
-        return _$createComponent(For, {
-          get each() {
-            return props.builderBlock?.children;
-          },
-
-          children: (block, index) => _$createComponent(RenderBlock, {
-            block: block
-          })
-        });
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "error";
-      },
-
-      get children() {
-        return _$createComponent(BuilderBlocks, {
-          dataPath: "errorMessage",
-
-          get blocks() {
-            return props.errorMessage;
-          }
-
-        });
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "sending";
-      },
-
-      get children() {
-        return _$createComponent(BuilderBlocks, {
-          dataPath: "sendingMessage",
-
-          get blocks() {
-            return props.sendingMessage;
-          }
-
-        });
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "error" && state.responseData;
-      },
-
-      get children() {
-        const _el$2 = _tmpl$.cloneNode(true);
-
-        _$insert(_el$2, () => JSON.stringify(state.responseData, null, 2));
-
-        _$effect(() => _el$2.className = css({
-          padding: "10px",
-          color: "red",
-          textAlign: "center"
-        }));
-
-        return _el$2;
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "success";
-      },
-
-      get children() {
-        return _$createComponent(BuilderBlocks, {
-          dataPath: "successMessage",
-
-          get blocks() {
-            return props.successMessage;
-          }
-
-        });
-      }
-
-    }), null);
-
-    _$effect(_p$ => {
-      const _v$ = props.validate,
-            _v$2 = !props.sendWithJs && props.action,
-            _v$3 = props.method,
-            _v$4 = props.name;
-
-      _v$ !== _p$._v$ && _$setAttribute(_el$, "validate", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "action", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "method", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "name", _p$._v$4 = _v$4);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
+  return <form {...props.attributes} validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={event => state.onSubmit(event)}>
+      <Show when={props.builderBlock && props.builderBlock.children}>
+        <For each={props.builderBlock?.children}>
+          {(block, _index) => {
+          const index = _index();
+
+          return <RenderBlock block={block}></RenderBlock>;
+        }}
+        </For>
+      </Show>
+      <Show when={state.submissionState === "error"}>
+        <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage}></BuilderBlocks>
+      </Show>
+      <Show when={state.submissionState === "sending"}>
+        <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage}></BuilderBlocks>
+      </Show>
+      <Show when={state.submissionState === "error" && state.responseData}>
+        <pre class={css({
+        padding: "10px",
+        color: "red",
+        textAlign: "center"
+      })}>
+          {JSON.stringify(state.responseData, null, 2)}
+        </pre>
+      </Show>
+      <Show when={state.submissionState === "success"}>
+        <BuilderBlocks dataPath="successMessage" blocks={props.successMessage}></BuilderBlocks>
+      </Show>
+    </form>;
+}
+
+export default FormComponent;import { registerComponent } from '../functions/register-component';
 registerComponent(FormComponent, {name:'Form:Form',builtIn:true,defaults:{responsiveStyles:{large:{marginTop:'15px',paddingBottom:'15px'}}},image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',inputs:[{name:'sendSubmissionsTo',type:'string',enum:[{label:'Send to email',value:'email',helperText:'Send form submissions to the email address of your choosing'},{label:'Custom',value:'custom',helperText:'Handle where the form requests go manually with a little code, e.g. to your own custom backend'}],defaultValue:'email'},{name:'sendSubmissionsToEmail',type:'string',required:true,defaultValue:'your@email.com',showIf:'options.get("sendSubmissionsTo") === "email"'},{name:'sendWithJs',type:'boolean',helperText:'Set to false to use basic html form action',defaultValue:true,showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'name',type:'string',defaultValue:'My form'},{name:'action',type:'string',helperText:'URL to send the form data to',showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'contentType',type:'string',defaultValue:'application/json',advanced:true,enum:['application/json','multipart/form-data','application/x-www-form-urlencoded'],showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'},{name:'method',type:'string',showIf:'options.get("sendSubmissionsTo") === "custom"',defaultValue:'POST',advanced:true},{name:'previewState',type:'string',enum:['unsubmitted','sending','success','error'],defaultValue:'unsubmitted',helperText:'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'successUrl',type:'url',helperText:'Optional URL to redirect the user to on form submission success',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'resetFormOnSubmit',type:'boolean',showIf:"options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",advanced:true},{name:'successMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Thanks!</span>'}}}]},{name:'validate',type:'boolean',defaultValue:true,advanced:true},{name:'errorMessagePath',type:'text',advanced:true,helperText:'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'},{name:'errorMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},bindings:{'component.options.text':'state.formErrorMessage || block.component.options.text'},component:{name:'Text',options:{text:'<span>Form submission error :( Please check your answers and try again</span>'}}}]},{name:'sendingMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Sending...</span>'}}}]},{name:'customHeaders',type:'map',valueType:{type:'string'},advanced:true,showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'}],noWrap:true,canHaveChildren:true,defaultChildren:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your name</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'name',placeholder:'Jane Doe'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your email</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'email',placeholder:'jane@doe.com'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:SubmitButton',options:{text:'Submit'}}}]});

package/src/blocks/form.lite.tsx

@@ -5,7 +5,7 @@ import { css } from "solid-styled-components";
 
 import RenderBlock from "../components/render-block.lite";
 
-export default function FormComponent(props) {
+function FormComponent(props) {
   const state = createMutable({
     state: "unsubmitted",
     responseData: null,
@@ -250,7 +250,10 @@ export default function FormComponent(props) {
     >
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
-          {(block, index) => <RenderBlock block={block}></RenderBlock>}
+          {(block, _index) => {
+            const index = _index();
+            return <RenderBlock block={block}></RenderBlock>;
+          }}
         </For>
       </Show>
       <Show when={state.submissionState === "error"}>
@@ -285,3 +288,5 @@ export default function FormComponent(props) {
     </form>
   );
 }
+
+export default FormComponent;

package/src/blocks/fragment.jsx

@@ -0,0 +1,6 @@
+function FragmentComponent(props) {
+  return <span>{props.children}</span>;
+}
+
+export default FragmentComponent;import { registerComponent } from '../functions/register-component';
+registerComponent(FragmentComponent, {name:'Fragment',static:true,hidden:true,builtIn:true,canHaveChildren:true,noWrap:true});

package/src/blocks/fragment.lite.tsx

@@ -1,3 +1,5 @@
-export default function FragmentComponent(props) {
+function FragmentComponent(props) {
   return <span>{props.children}</span>;
 }
+
+export default FragmentComponent;