@builder.io/sdk-solid 0.0.1

package/src/blocks/textarea.js

@@ -0,0 +1,34 @@
+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 { spread as _$spread } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<textarea></textarea>`, 2);
+
+export default function Textarea(props) {
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    _$spread(_el$, () => props.attributes, false, false);
+
+    _$effect(_p$ => {
+      const _v$ = props.placeholder,
+            _v$2 = props.name,
+            _v$3 = props.value,
+            _v$4 = props.defaultValue;
+      _v$ !== _p$._v$ && _$setAttribute(_el$, "placeholder", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "name", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && (_el$.value = _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "defaultvalue", _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';
+registerComponent(Textarea, {name:'Form:TextArea',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',inputs:[{advanced:true,name:'value',type:'string'},{name:'name',type:'string',required:true,helperText:'Every input in a form needs a unique name describing what it gets, e.g. "email"'},{name:'defaultValue',type:'string'},{name:'placeholder',type:'string',defaultValue:'Hello there'},{name:'required',type:'boolean',defaultValue:false}],defaultStyles:{paddingTop:'10px',paddingBottom:'10px',paddingLeft:'10px',paddingRight:'10px',borderRadius:'3px',borderWidth:'1px',borderStyle:'solid',borderColor:'#ccc'},static:true,noWrap:true});

package/src/blocks/textarea.lite.tsx

@@ -0,0 +1,11 @@
+export default function Textarea(props) {
+  return (
+    <textarea
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    ></textarea>
+  );
+}

package/src/blocks/video.js

@@ -0,0 +1,54 @@
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<video preload="none"></video>`, 2);
+
+export default function Video(props) {
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    _$spread(_el$, () => props.attributes, false, false);
+
+    _$effect(_p$ => {
+      const _v$ = {
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        borderRadius: 1
+      },
+            _v$2 = props.video || "no-src",
+            _v$3 = props.posterImage,
+            _v$4 = props.autoPlay,
+            _v$5 = props.muted,
+            _v$6 = props.controls,
+            _v$7 = props.loop;
+
+      _p$._v$ = _$style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "key", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "poster", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "autoplay", _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && (_el$.muted = _p$._v$5 = _v$5);
+      _v$6 !== _p$._v$6 && (_el$.controls = _p$._v$6 = _v$6);
+      _v$7 !== _p$._v$7 && (_el$.loop = _p$._v$7 = _v$7);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined,
+      _v$5: undefined,
+      _v$6: undefined,
+      _v$7: undefined
+    });
+
+    return _el$;
+  })();
+}import { registerComponent } from '../functions/register-component';
+registerComponent(Video, {name:'Video',canHaveChildren:true,builtIn:true,defaultStyles:{minHeight:'20px',minWidth:'20px'},image:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',inputs:[{name:'video',type:'file',allowedFileTypes:['mp4'],bubble:true,defaultValue:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',required:true},{name:'posterImage',type:'file',allowedFileTypes:['jpeg','png'],helperText:'Image to show before the video plays'},{name:'autoPlay',type:'boolean',defaultValue:true},{name:'controls',type:'boolean',defaultValue:false},{name:'muted',type:'boolean',defaultValue:true},{name:'loop',type:'boolean',defaultValue:true},{name:'playsInline',type:'boolean',defaultValue:true},{name:'fit',type:'text',defaultValue:'cover',enum:['contain','cover','fill','auto']},{name:'fitContent',type:'boolean',helperText:'When child blocks are provided, fit to them instead of using the aspect ratio',defaultValue:true,advanced:true},{name:'position',type:'text',defaultValue:'center',enum:['center','top','left','right','bottom','top left','top right','bottom left','bottom right']},{name:'height',type:'number',advanced:true},{name:'width',type:'number',advanced:true},{name:'aspectRatio',type:'number',advanced:true,defaultValue:0.7004048582995948},{name:'lazyLoad',type:'boolean',helperText:'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',defaultValue:true,advanced:true}]});

package/src/blocks/video.lite.tsx

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

package/src/components/block-styles.js

@@ -0,0 +1,3 @@
+export default function BlockStyles(props) {
+  return [];
+}

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

@@ -0,0 +1,3 @@
+export default function BlockStyles(props) {
+  return <></>;
+}

package/src/components/error-boundary.js

@@ -0,0 +1,3 @@
+export default function ErrorBoundary(props) {
+  return [];
+}

package/src/components/error-boundary.lite.tsx

@@ -0,0 +1,3 @@
+export default function ErrorBoundary(props) {
+  return <></>;
+}

package/src/components/render-block.js

@@ -0,0 +1,154 @@
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { Show, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createMutable } from "solid-js/store";
+import { getBlockComponentOptions } from "../functions/get-block-component-options";
+import { getBlockProperties } from "../functions/get-block-properties";
+import { getBlockStyles } from "../functions/get-block-styles";
+import { getBlockTag } from "../functions/get-block-tag";
+import { components } from "../functions/register-component";
+import BuilderContext from "../context/builder.context";
+import { getBlockActions } from "../functions/get-block-actions";
+import { getProcessedBlock } from "../functions/get-processed-block";
+import BlockStyles from "./block-styles";
+export default function RenderBlock(props) {
+  const state = createMutable({
+    get component() {
+      const componentName = state.useBlock.component?.name;
+
+      if (!componentName) {
+        return null;
+      }
+
+      const ref = components[state.useBlock.component?.name];
+
+      if (componentName && !ref) {
+        // TODO: Public doc page with more info about this message
+        console.warn(`
+        Could not find a registered component named "${componentName}". 
+        If you registered it, is the file that registered it imported by the file that needs to render it?`);
+      }
+
+      return ref;
+    },
+
+    get componentInfo() {
+      return state.component?.info;
+    },
+
+    get componentRef() {
+      return state.component?.component;
+    },
+
+    get tagName() {
+      return getBlockTag(state.useBlock);
+    },
+
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context
+      });
+    },
+
+    get propertiesAndActions() {
+      return { ...getBlockProperties(state.useBlock),
+        ...getBlockActions({
+          block: state.useBlock,
+          state: builderContext.state,
+          context: builderContext.context
+        })
+      };
+    },
+
+    get css() {
+      return getBlockStyles(state.useBlock);
+    },
+
+    get componentOptions() {
+      return getBlockComponentOptions(state.useBlock);
+    },
+
+    get children() {
+      // TO-DO: When should `canHaveChildren` dictate rendering?
+      // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+      // but still receive and need to render children.
+      // return state.componentInfo?.canHaveChildren ? state.useBlock.children : [];
+      return state.useBlock.children ?? [];
+    },
+
+    get noCompRefChildren() {
+      return state.componentRef ? [] : state.children;
+    }
+
+  });
+  const builderContext = useContext(BuilderContext);
+  return _$createComponent(Show, {
+    get when() {
+      return !state.componentInfo?.noWrap;
+    },
+
+    get children() {
+      return _$createComponent(Dynamic, _$mergeProps(() => state.propertiesAndActions, {
+        get style() {
+          return state.css;
+        },
+
+        get component() {
+          return state.tagName;
+        },
+
+        get children() {
+          return [_$createComponent(BlockStyles, {
+            get block() {
+              return state.useBlock;
+            }
+
+          }), _$createComponent(Show, {
+            get when() {
+              return state.componentRef;
+            },
+
+            get children() {
+              return _$createComponent(Dynamic, _$mergeProps(() => state.componentOptions, {
+                get builderBlock() {
+                  return state.useBlock;
+                },
+
+                get component() {
+                  return state.componentRef;
+                },
+
+                get children() {
+                  return _$createComponent(For, {
+                    get each() {
+                      return state.children;
+                    },
+
+                    children: (child, index) => _$createComponent(RenderBlock, {
+                      block: child
+                    })
+                  });
+                }
+
+              }));
+            }
+
+          }), _$createComponent(For, {
+            get each() {
+              return state.noCompRefChildren;
+            },
+
+            children: (child, index) => _$createComponent(RenderBlock, {
+              block: child
+            })
+          })];
+        }
+
+      }));
+    }
+
+  });
+}

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

@@ -0,0 +1,108 @@
+import { Show, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createMutable } from "solid-js/store";
+
+import { getBlockComponentOptions } from "../functions/get-block-component-options";
+import { getBlockProperties } from "../functions/get-block-properties";
+import { getBlockStyles } from "../functions/get-block-styles";
+import { getBlockTag } from "../functions/get-block-tag";
+import { components } from "../functions/register-component";
+import BuilderContext from "../context/builder.context.lite";
+import { getBlockActions } from "../functions/get-block-actions";
+import { getProcessedBlock } from "../functions/get-processed-block";
+import BlockStyles from "./block-styles.lite";
+
+export default function RenderBlock(props) {
+  const state = createMutable({
+    get component() {
+      const componentName = state.useBlock.component?.name;
+
+      if (!componentName) {
+        return null;
+      }
+
+      const ref = components[state.useBlock.component?.name!];
+
+      if (componentName && !ref) {
+        // TODO: Public doc page with more info about this message
+        console.warn(`
+        Could not find a registered component named "${componentName}". 
+        If you registered it, is the file that registered it imported by the file that needs to render it?`);
+      }
+
+      return ref;
+    },
+    get componentInfo() {
+      return state.component?.info;
+    },
+    get componentRef() {
+      return state.component?.component;
+    },
+    get tagName() {
+      return getBlockTag(state.useBlock);
+    },
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context,
+      });
+    },
+    get propertiesAndActions() {
+      return {
+        ...getBlockProperties(state.useBlock),
+        ...getBlockActions({
+          block: state.useBlock,
+          state: builderContext.state,
+          context: builderContext.context,
+        }),
+      };
+    },
+    get css() {
+      return getBlockStyles(state.useBlock);
+    },
+    get componentOptions() {
+      return getBlockComponentOptions(state.useBlock);
+    },
+    get children() {
+      // TO-DO: When should `canHaveChildren` dictate rendering?
+      // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+      // but still receive and need to render children.
+      // return state.componentInfo?.canHaveChildren ? state.useBlock.children : [];
+      return state.useBlock.children ?? [];
+    },
+    get noCompRefChildren() {
+      return state.componentRef ? [] : state.children;
+    },
+  });
+
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <>
+      <Show when={!state.componentInfo?.noWrap}>
+        <Dynamic
+          {...state.propertiesAndActions}
+          style={state.css}
+          component={state.tagName}
+        >
+          <BlockStyles block={state.useBlock}></BlockStyles>
+          <Show when={state.componentRef}>
+            <Dynamic
+              {...state.componentOptions}
+              builderBlock={state.useBlock}
+              component={state.componentRef}
+            >
+              <For each={state.children}>
+                {(child, index) => <RenderBlock block={child}></RenderBlock>}
+              </For>
+            </Dynamic>
+          </Show>
+          <For each={state.noCompRefChildren}>
+            {(child, index) => <RenderBlock block={child}></RenderBlock>}
+          </For>
+        </Dynamic>
+      </Show>
+    </>
+  );
+}

package/src/components/render-blocks.js

@@ -0,0 +1,104 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } 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";
+
+const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
+
+import { Show, For } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+import { isEditing } from "../functions/is-editing";
+import RenderBlock from "./render-block";
+export default function RenderBlocks(props) {
+  const state = createMutable({
+    get className() {
+      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    },
+
+    onClick() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage({
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+          }
+        }, "*");
+      }
+    },
+
+    onMouseEnter() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage({
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+          }
+        }, "*");
+      }
+    }
+
+  });
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    _el$.addEventListener("mouseenter", event => state.onMouseEnter());
+
+    _el$.$$click = event => state.onClick();
+
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.blocks;
+      },
+
+      get children() {
+        return _$createComponent(For, {
+          get each() {
+            return props.blocks;
+          },
+
+          children: (block, index) => _$createComponent(RenderBlock, {
+            get key() {
+              return block.id;
+            },
+
+            block: block
+          })
+        });
+      }
+
+    }));
+
+    _$effect(_p$ => {
+      const _v$ = state.className + " " + css({
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch"
+      }),
+            _v$2 = props.path,
+            _v$3 = props.parent,
+            _v$4 = {
+        class: state.className
+      };
+
+      _v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "builder-path", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "builder-parent-id", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "dataset", _p$._v$4 = _v$4);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined
+    });
+
+    return _el$;
+  })();
+}
+
+_$delegateEvents(["click"]);

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

@@ -0,0 +1,72 @@
+import { Show, For } from "solid-js";
+
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+
+import { isEditing } from "../functions/is-editing";
+import RenderBlock from "./render-block.lite";
+
+export default function RenderBlocks(props) {
+  const state = createMutable({
+    get className() {
+      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    },
+    onClick() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage(
+          {
+            type: "builder.clickEmptyBlocks",
+            data: {
+              parentElementId: props.parent,
+              dataPath: props.path,
+            },
+          },
+          "*"
+        );
+      }
+    },
+    onMouseEnter() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage(
+          {
+            type: "builder.hoverEmptyBlocks",
+            data: {
+              parentElementId: props.parent,
+              dataPath: props.path,
+            },
+          },
+          "*"
+        );
+      }
+    },
+  });
+
+  return (
+    <div
+      class={
+        state.className +
+        " " +
+        css({
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
+        })
+      }
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      dataSet={{
+        class: state.className,
+      }}
+      onClick={(event) => state.onClick()}
+      onMouseEnter={(event) => state.onMouseEnter()}
+    >
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, index) => (
+            <RenderBlock key={block.id} block={block}></RenderBlock>
+          )}
+        </For>
+      </Show>
+    </div>
+  );
+}