@builder.io/sdk-solid 0.0.15 → 0.0.17

package/src/blocks/symbol/symbol.jsx

@@ -1,23 +1,50 @@
-import { createMutable } from "solid-js/store";
-import RenderContent from "../../components/render-content/render-content..js";
-import BuilderContext from "../../context/builder.context..js";
+import { useContext, onMount, on, createEffect, createSignal } from "solid-js";
+import RenderContent from "../../components/render-content/render-content.jsx";
+import BuilderContext from "../../context/builder.context.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { markMutable } from "../../functions/mark-mutable";
 
 function Symbol(props) {
-  const state = createMutable({
-    className: "builder-symbol",
-    content: null
-  });
+  const [className, setClassName] = createSignal("builder-symbol");
+  const [content, setContent] = createSignal(null);
   const builderContext = useContext(BuilderContext);
   onMount(() => {
-    state.content = props.symbol?.content;
+    setContent(props.symbol?.content);
   });
-  return <div class={state.className} {...props.attributes} dataSet={{
-    class: state.className
+
+  function onUpdateFn_0() {
+    const symbolToUse = props.symbol;
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+
+    if (symbolToUse && !symbolToUse.content && !content() && symbolToUse.model) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        query: {
+          id: symbolToUse.entry
+        }
+      }).then(response => {
+        setContent(response);
+      });
+    }
+  }
+
+  createEffect(on(() => [props.symbol, content()], onUpdateFn_0));
+  return <div class={className()} {...props.attributes} dataSet={{
+    class: className()
   }}>
-      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} data={{ ...props.symbol?.data,
+      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} customComponents={markMutable(Object.values(builderContext.registeredComponents))} data={markMutable({ ...props.symbol?.data,
       ...builderContext.state,
-      ...props.symbol?.state.content?.data?.state
-    }} model={props.symbol?.model} content={state.content}></RenderContent>
+      ...props.symbol?.content?.data?.state
+    })} model={props.symbol?.model} content={markMutable(content())}></RenderContent>
     </div>;
 }
 

package/src/blocks/text/text.jsx

@@ -1,5 +1,5 @@
 function Text(props) {
-  return <div innerHTML={props.text}></div>;
+  return <span class="builder-text" innerHTML={props.text}></span>;
 }
 
 export default Text;

package/src/blocks/util.js

@@ -0,0 +1,7 @@
+function markSerializable(fn) {
+  fn.__qwik_serializable__ = true;
+  return fn;
+}
+export {
+  markSerializable
+};

package/src/blocks/video/video.jsx

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

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

@@ -1,36 +1,46 @@
-import { createMutable } from "solid-js/store";
-import RenderInlinedStyles from "../render-inlined-styles..js";
+import { Show } from "solid-js";
+import { getMaxWidthQueryForSize } 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 RenderInlinedStyles from "../render-inlined-styles.jsx";
 
 function BlockStyles(props) {
-  const state = createMutable({
-    camelToKebabCase(string) {
-      return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-    },
-
-    get css() {
-      // TODO: media queries
-      const styleObject = props.block.responsiveStyles?.large;
-
-      if (!styleObject) {
-        return "";
-      }
-
-      let str = `.${props.block.id} {`;
-
-      for (const key in styleObject) {
-        const value = styleObject[key];
-
-        if (typeof value === "string") {
-          str += `${state.camelToKebabCase(key)}: ${value};`;
-        }
-      }
-
-      str += "}";
-      return str;
-    }
-
-  });
-  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true
+    });
+  }
+
+  function css() {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const className = useBlock().id;
+    const largeStylesClass = largeStyles ? createCssClass({
+      className,
+      styles: largeStyles
+    }) : "";
+    const mediumStylesClass = mediumStyles ? createCssClass({
+      className,
+      styles: mediumStyles,
+      mediaQuery: getMaxWidthQueryForSize("medium")
+    }) : "";
+    const smallStylesClass = smallStyles ? createCssClass({
+      className,
+      styles: smallStyles,
+      mediaQuery: getMaxWidthQueryForSize("small")
+    }) : "";
+    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+  }
+
+  return <Show when={TARGET !== "reactNative" && css()}>
+      <RenderInlinedStyles styles={css()}></RenderInlinedStyles>
+    </Show>;
 }
 
 export default BlockStyles;

package/src/components/render-block/render-block.helpers.js

@@ -0,0 +1,23 @@
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export {
+  isEmptyHtmlElement
+};

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

@@ -1,117 +1,232 @@
-import { useContext, Show, For } from "solid-js";
+import { Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { createMutable } from "solid-js/store";
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context..js";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockStyles } from "../../functions/get-block-styles.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { components } from "../../functions/register-component.js";
-import BlockStyles from "./block-styles..js";
+import { evaluate } from "../../functions/evaluate.js";
+import BlockStyles from "./block-styles.jsx";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderRepeatedBlock from "./render-repeated-block.jsx";
+import { TARGET } from "../../constants/target.js";
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import RenderComponentWithContext from "./render-component-with-context.jsx";
+import RenderComponent from "./render-component.jsx";
 
 function RenderBlock(props) {
-  const state = createMutable({
-    get component() {
-      const componentName = state.useBlock.component?.name;
-
-      if (!componentName) {
-        return null;
-      }
+  function component() {
+    const componentName = getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: false
+    }).component?.name;
+
+    if (!componentName) {
+      return null;
+    }
 
-      const ref = components[componentName];
+    const ref = props.context.registeredComponents[componentName];
 
-      if (componentName && !ref) {
-        // TODO: Public doc page with more info about this message
-        console.warn(`
+    if (!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 undefined;
+    } else {
       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
+    }
+  }
+
+  function tagName() {
+    return getBlockTag(useBlock());
+  }
+
+  function useBlock() {
+    return repeatItemData() ? props.block : getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true
+    });
+  }
+
+  function attributes() {
+    return { ...getBlockProperties(useBlock()),
+      ...getBlockActions({
+        block: useBlock(),
+        state: props.context.state,
+        context: props.context.context
+      }),
+      style: getBlockStyles({
+        block: useBlock(),
+        context: props.context
+      })
+    };
+  }
+
+  function shouldWrap() {
+    return !component()?.noWrap;
+  }
+
+  function renderComponentProps() {
+    return {
+      blockChildren: children(),
+      componentRef: component()?.component,
+      componentOptions: { ...getBlockComponentOptions(useBlock()),
+
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(shouldWrap() ? {} : {
+          attributes: attributes()
         })
-      };
-    },
-
-    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;
+      },
+      context: childrenContext()
+    };
+  }
+
+  function 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 componentInfo?.canHaveChildren ? useBlock().children : [];
+    return useBlock().children ?? [];
+  }
+
+  function childrenWithoutParentComponent() {
+    /**
+     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+     * we render them outside of `componentRef`.
+     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+     * blocks, and the children will be repeated within those blocks.
+     */
+    const shouldRenderChildrenOutsideRef = !component()?.component && !repeatItemData();
+    return shouldRenderChildrenOutsideRef ? children() : [];
+  }
+
+  function repeatItemData() {
+    /**
+     * we don't use `useBlock()` here because the processing done within its logic includes evaluating the block's bindings,
+     * which will not work if there is a repeat.
+     */
+    const {
+      repeat,
+      ...blockWithoutRepeat
+    } = props.block;
+
+    if (!repeat?.collection) {
+      return undefined;
+    }
+
+    const itemsArray = evaluate({
+      code: repeat.collection,
+      state: props.context.state,
+      context: props.context.context
+    });
+
+    if (!Array.isArray(itemsArray)) {
+      return undefined;
+    }
+
+    const collectionName = repeat.collection.split(".").pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+    const repeatArray = itemsArray.map((item, index) => ({
+      context: { ...props.context,
+        state: { ...props.context.state,
+          $index: index,
+          $item: item,
+          [itemNameToUse]: item,
+          [`$${itemNameToUse}Index`]: index
+        }
+      },
+      block: blockWithoutRepeat
+    }));
+    return repeatArray;
+  }
+
+  function inheritedTextStyles() {
+    if (TARGET !== "reactNative") {
+      return {};
+    }
+
+    const styles = getBlockStyles({
+      block: useBlock(),
+      context: props.context
+    });
+    return extractTextStyles(styles);
+  }
+
+  function childrenContext() {
+    return {
+      apiKey: props.context.apiKey,
+      state: props.context.state,
+      content: props.context.content,
+      context: props.context.context,
+      registeredComponents: props.context.registeredComponents,
+      inheritedStyles: inheritedTextStyles()
+    };
+  }
+
+  function renderComponentTag() {
+    if (TARGET === "reactNative") {
+      return RenderComponentWithContext;
+    } else if (TARGET === "vue3") {
+      // vue3 expects a string for the component tag
+      return "RenderComponent";
+    } else {
+      return RenderComponent;
     }
+  }
 
-  });
-  const builderContext = useContext(BuilderContext);
-  return <>
-      <Show when={!state.componentInfo?.noWrap}>
-        <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
-          <Show when={TARGET === "vue" || TARGET === "svelte"}>
-            <BlockStyles block={state.useBlock}></BlockStyles>
-          </Show>
-          <Show when={state.componentRef}>
-            <Dynamic {...state.componentOptions} builderBlock={state.useBlock} component={state.componentRef}>
-              <For each={state.children}>
-                {(child, _index) => {
-                const index = _index();
-
-                return <RenderBlock block={child}></RenderBlock>;
-              }}
-              </For>
-            </Dynamic>
-          </Show>
-          <For each={state.noCompRefChildren}>
+  return <Show fallback={<Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>} when={shouldWrap()}>
+      <Show when={isEmptyHtmlElement(tagName())}>
+        <Dynamic {...attributes()} component={tagName()}></Dynamic>
+      </Show>
+      <Show when={!isEmptyHtmlElement(tagName()) && TARGET === "vue2" && repeatItemData()}>
+        <div class="vue2-root-element-workaround">
+          <For each={repeatItemData()}>
+            {(data, _index) => {
+            const index = _index();
+
+            return <RenderRepeatedBlock key={index} repeatContext={data.context} block={data.block}></RenderRepeatedBlock>;
+          }}
+          </For>
+        </div>
+      </Show>
+      <Show when={!isEmptyHtmlElement(tagName()) && TARGET !== "vue2" && repeatItemData()}>
+        <For each={repeatItemData()}>
+          {(data, _index) => {
+          const index = _index();
+
+          return <RenderRepeatedBlock key={index} repeatContext={data.context} block={data.block}></RenderRepeatedBlock>;
+        }}
+        </For>
+      </Show>
+      <Show when={!isEmptyHtmlElement(tagName()) && !repeatItemData()}>
+        <Dynamic {...attributes()} component={tagName()}>
+          <Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>
+          <For each={childrenWithoutParentComponent()}>
+            {(child, _index) => {
+            const index = _index();
+
+            return <RenderBlock key={"render-block-" + child.id} block={child} context={childrenContext()}></RenderBlock>;
+          }}
+          </For>
+          <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
             const index = _index();
 
-            return <RenderBlock block={child}></RenderBlock>;
+            return <BlockStyles key={"block-style-" + child.id} block={child} context={childrenContext()}></BlockStyles>;
           }}
           </For>
         </Dynamic>
       </Show>
-    </>;
+    </Show>;
 }
 
 export default RenderBlock;

package/src/components/render-block/render-component-with-context.jsx

@@ -0,0 +1,36 @@
+import { Dynamic } from "solid-js/web";
+import BuilderContext from "../../context/builder.context.js";
+import RenderComponent from "./render-component.jsx";
+
+function RenderComponentWithContext(props) {
+  return <Dynamic value={{
+    get content() {
+      return props.context.content;
+    },
+
+    get state() {
+      return props.context.state;
+    },
+
+    get context() {
+      return props.context.context;
+    },
+
+    get apiKey() {
+      return props.context.apiKey;
+    },
+
+    get registeredComponents() {
+      return props.context.registeredComponents;
+    },
+
+    get inheritedStyles() {
+      return props.context.inheritedStyles;
+    }
+
+  }} component={BuilderContext.Provider}>
+      <RenderComponent {...props}></RenderComponent>
+    </Dynamic>;
+}
+
+export default RenderComponentWithContext;

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

@@ -0,0 +1,28 @@
+import { Show, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import BlockStyles from "./block-styles.jsx";
+import RenderBlock from "./render-block.jsx";
+import { markPropsMutable } from "../../functions/mark-mutable.js";
+
+function RenderComponent(props) {
+  return <Show when={props.componentRef}>
+      <Dynamic {...markPropsMutable(props.componentOptions)} component={props.componentRef}>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+          const index = _index();
+
+          return <RenderBlock key={"render-block-" + child.id} block={child} context={props.context}></RenderBlock>;
+        }}
+        </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 RenderComponent;

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

@@ -0,0 +1,36 @@
+import { Dynamic } from "solid-js/web";
+import BuilderContext from "../../context/builder.context.js";
+import RenderBlock from "./render-block.jsx";
+
+function RenderRepeatedBlock(props) {
+  return <Dynamic value={{
+    get content() {
+      return props.repeatContext.content;
+    },
+
+    get state() {
+      return props.repeatContext.state;
+    },
+
+    get context() {
+      return props.repeatContext.context;
+    },
+
+    get apiKey() {
+      return props.repeatContext.apiKey;
+    },
+
+    get registeredComponents() {
+      return props.repeatContext.registeredComponents;
+    },
+
+    get inheritedStyles() {
+      return props.repeatContext.inheritedStyles;
+    }
+
+  }} component={BuilderContext.Provider}>
+      <RenderBlock block={props.block} context={props.repeatContext}></RenderBlock>
+    </Dynamic>;
+}
+
+export default RenderRepeatedBlock;