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

package/src/components/render-block.js

@@ -1,154 +0,0 @@
-import { mergeProps as _$mergeProps } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { useContext, 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-blocks.js

@@ -1,104 +0,0 @@
-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"]);