@builder.io/sdk-solid 0.5.9 → 0.6.0

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

@@ -1,85 +0,0 @@
-import { Show, createSignal } from "solid-js";
-
-import {
-  getMaxWidthQueryForSize,
-  getSizesForBreakpoints,
-} from "../../../constants/device-sizes.js";
-import { TARGET } from "../../../constants/target.js";
-import { getProcessedBlock } from "../../../functions/get-processed-block.js";
-import { createCssClass } from "../../../helpers/css.js";
-import { checkIsDefined } from "../../../helpers/nullable.js";
-import InlinedStyles from "../../inlined-styles";
-
-function BlockStyles(props) {
-  const [processedBlock, setProcessedBlock] = createSignal(
-    getProcessedBlock({
-      block: props.block,
-      localState: props.context.localState,
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true,
-    })
-  );
-
-  function canShowBlock() {
-    // only render styles for blocks that are visible
-    if (checkIsDefined(processedBlock().hide)) {
-      return !processedBlock().hide;
-    }
-    if (checkIsDefined(processedBlock().show)) {
-      return processedBlock().show;
-    }
-    return true;
-  }
-
-  function css() {
-    const styles = processedBlock().responsiveStyles;
-    const content = props.context.content;
-    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
-      content?.meta?.breakpoints || {}
-    );
-    const largeStyles = styles?.large;
-    const mediumStyles = styles?.medium;
-    const smallStyles = styles?.small;
-    const className = processedBlock().id;
-    if (!className) {
-      return "";
-    }
-    const largeStylesClass = largeStyles
-      ? createCssClass({
-          className,
-          styles: largeStyles,
-        })
-      : "";
-    const mediumStylesClass = mediumStyles
-      ? createCssClass({
-          className,
-          styles: mediumStyles,
-          mediaQuery: getMaxWidthQueryForSize(
-            "medium",
-            sizesWithUpdatedBreakpoints
-          ),
-        })
-      : "";
-    const smallStylesClass = smallStyles
-      ? createCssClass({
-          className,
-          styles: smallStyles,
-          mediaQuery: getMaxWidthQueryForSize(
-            "small",
-            sizesWithUpdatedBreakpoints
-          ),
-        })
-      : "";
-    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
-  }
-
-  return (
-    <Show when={TARGET !== "reactNative" && css() && canShowBlock()}>
-      <InlinedStyles styles={css()}></InlinedStyles>
-    </Show>
-  );
-}
-
-export default BlockStyles;

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

@@ -1,50 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,59 +0,0 @@
-import { Show, For, createSignal } from "solid-js";
-import { Dynamic } from "solid-js/web";
-
-import BlockStyles from "../block-styles";
-import Block from "../../block";
-import InteractiveElement from "../interactive-element";
-import { getWrapperProps } from "./component-ref.helpers.js";
-import { wrapComponentRef } from "../../../content/wrap-component-ref.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

@@ -1,30 +0,0 @@
-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

@@ -1,20 +0,0 @@
-import { createSignal } from "solid-js";
-
-import BuilderContext from "../../../context/builder.context.js";
-import Block from "../block";
-
-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

@@ -1,66 +0,0 @@
-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

@@ -1,57 +0,0 @@
-import { useContext, Show, For } from "solid-js";
-
-import BlockStyles from "../block/components/block-styles";
-import Block from "../block/block";
-import BlocksWrapper from "./blocks-wrapper";
-import BuilderContext from "../../context/builder.context.js";
-import ComponentsContext from "../../context/components.context.js";
-
-function Blocks(props) {
-  const builderContext = useContext(BuilderContext);
-
-  const componentsContext = useContext(ComponentsContext);
-
-  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 || builderContext}
-                registeredComponents={
-                  props.registeredComponents ||
-                  componentsContext.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 || builderContext}
-              ></BlockStyles>
-            );
-          }}
-        </For>
-      </Show>
-    </BlocksWrapper>
-  );
-}
-
-export default Blocks;