@builder.io/sdk-solid 0.4.5 → 0.5.0

package/src/components/block/components/block-wrapper.jsx

@@ -0,0 +1,50 @@
+import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+
+function BlockWrapper(props) {
+  return (
+    <Show
+      fallback={
+        <Dynamic
+          {...getBlockProperties({
+            block: props.block,
+            context: props.context,
+          })}
+          {...getBlockActions({
+            block: props.block,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
+            localState: props.context.localState,
+            context: props.context.context,
+            stripPrefix: true,
+          })}
+          component={props.Wrapper}
+        ></Dynamic>
+      }
+      when={props.hasChildren}
+    >
+      <Dynamic
+        {...getBlockProperties({
+          block: props.block,
+          context: props.context,
+        })}
+        {...getBlockActions({
+          block: props.block,
+          rootState: props.context.rootState,
+          rootSetState: props.context.rootSetState,
+          localState: props.context.localState,
+          context: props.context.context,
+          stripPrefix: true,
+        })}
+        component={props.Wrapper}
+      >
+        {props.children}
+      </Dynamic>
+    </Show>
+  );
+}
+
+export default BlockWrapper;

package/src/components/block/components/component-ref/component-ref.helpers.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
+    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  }
+  return a;
+};
+import { getBlockProperties } from "../../../../functions/get-block-properties.js";
+const getWrapperProps = ({
+  componentOptions,
+  builderBlock,
+  context,
+  componentRef,
+  includeBlockProps,
+  isInteractive,
+  contextValue
+}) => {
+  const interactiveElementProps = {
+    Wrapper: componentRef,
+    block: builderBlock,
+    context,
+    wrapperProps: componentOptions
+  };
+  return isInteractive ? interactiveElementProps : __spreadValues(__spreadValues({}, componentOptions), includeBlockProps ? {
+    attributes: getBlockProperties({
+      block: builderBlock,
+      context: contextValue
+    })
+  } : {});
+};
+export { getWrapperProps }

package/src/components/block/components/component-ref/component-ref.jsx

@@ -0,0 +1,58 @@
+import { Show, For, createSignal } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+import BlockStyles from "../block-styles.jsx";
+import Block from "../../block.jsx";
+import InteractiveElement from "../interactive-element.jsx";
+import { getWrapperProps } from "./component-ref.helpers.js";
+
+function ComponentRef(props) {
+  const [Wrapper, setWrapper] = createSignal(
+    props.isInteractive ? InteractiveElement : props.componentRef
+  );
+
+  return (
+    <Show when={props.componentRef}>
+      <Dynamic
+        {...getWrapperProps({
+          componentOptions: props.componentOptions,
+          builderBlock: props.builderBlock,
+          context: props.context,
+          componentRef: props.componentRef,
+          includeBlockProps: props.includeBlockProps,
+          isInteractive: props.isInteractive,
+          contextValue: props.context,
+        })}
+        component={Wrapper()}
+      >
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+            const index = _index();
+            return (
+              <Block
+                key={"block-" + child.id}
+                block={child}
+                context={props.context}
+                registeredComponents={props.registeredComponents}
+              ></Block>
+            );
+          }}
+        </For>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+            const index = _index();
+            return (
+              <BlockStyles
+                key={"block-style-" + child.id}
+                block={child}
+                context={props.context}
+              ></BlockStyles>
+            );
+          }}
+        </For>
+      </Dynamic>
+    </Show>
+  );
+}
+
+export default ComponentRef;

package/src/components/block/components/interactive-element.jsx

@@ -0,0 +1,30 @@
+import { Dynamic } from "solid-js/web";
+
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+
+function InteractiveElement(props) {
+  return (
+    <Dynamic
+      {...props.wrapperProps}
+      attributes={{
+        ...getBlockProperties({
+          block: props.block,
+          context: props.context,
+        }),
+        ...getBlockActions({
+          block: props.block,
+          rootState: props.context.rootState,
+          rootSetState: props.context.rootSetState,
+          localState: props.context.localState,
+          context: props.context.context,
+        }),
+      }}
+      component={props.Wrapper}
+    >
+      {props.children}
+    </Dynamic>
+  );
+}
+
+export default InteractiveElement;

package/src/components/block/components/repeated-block.jsx

@@ -0,0 +1,20 @@
+import { createSignal } from "solid-js";
+
+import BuilderContext from "../../../context/builder.context";
+import Block from "../block.jsx";
+
+function RepeatedBlock(props) {
+  const [store, setStore] = createSignal(props.repeatContext);
+
+  return (
+    <BuilderContext.Provider value={store()}>
+      <Block
+        block={props.block}
+        context={store()}
+        registeredComponents={props.registeredComponents}
+      ></Block>
+    </BuilderContext.Provider>
+  );
+}
+
+export default RepeatedBlock;

package/src/components/blocks/blocks-wrapper.jsx

@@ -0,0 +1,66 @@
+import { createSignal } from "solid-js";
+
+import { css } from "solid-styled-components";
+
+import { isEditing } from "../../functions/is-editing.js";
+
+function BlocksWrapper(props) {
+  function className() {
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+  }
+
+  function onClick() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        "*"
+      );
+    }
+  }
+
+  function onMouseEnter() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        "*"
+      );
+    }
+  }
+
+  return (
+    <div
+      class={
+        className() +
+        " " +
+        css({
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
+        })
+      }
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      {...{}}
+      style={props.styleProp}
+      onClick={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
+      onKeyPress={(event) => onClick()}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export default BlocksWrapper;

package/src/components/blocks/blocks.jsx

@@ -0,0 +1,48 @@
+import { Show, For } from "solid-js";
+
+import BlockStyles from "../block/components/block-styles.jsx";
+import Block from "../block/block.jsx";
+import BlocksWrapper from "./blocks-wrapper.jsx";
+
+function Blocks(props) {
+  return (
+    <BlocksWrapper
+      blocks={props.blocks}
+      parent={props.parent}
+      path={props.path}
+      styleProp={props.styleProp}
+    >
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+            const index = _index();
+            return (
+              <Block
+                key={"render-block-" + block.id}
+                block={block}
+                context={props.context}
+                registeredComponents={props.registeredComponents}
+              ></Block>
+            );
+          }}
+        </For>
+      </Show>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+            const index = _index();
+            return (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+                context={props.context}
+              ></BlockStyles>
+            );
+          }}
+        </For>
+      </Show>
+    </BlocksWrapper>
+  );
+}
+
+export default Blocks;