@builder.io/sdk-solid 0.0.8-4 → 0.0.8-5

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

@@ -1,36 +0,0 @@
-import { createMutable } from "solid-js/store";
-import RenderInlinedStyles from "../render-inlined-styles";
-
-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>;
-}
-
-export default BlockStyles;

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

@@ -1,38 +0,0 @@
-import { createMutable } from "solid-js/store";
-
-import RenderInlinedStyles from "../render-inlined-styles.lite";
-
-function BlockStyles(props) {
-  const state = createMutable({
-    camelToKebabCase(string: 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>;
-}
-
-export default BlockStyles;

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

@@ -1,125 +0,0 @@
-import { useContext, 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";
-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 BlockStyles from "./block-styles";
-
-function RenderBlock(props) {
-  const state = createMutable({
-    get component() {
-      const componentName = state.useBlock.component?.name;
-
-      if (!componentName) {
-        return null;
-      }
-
-      const ref = builderContext.registeredComponents[componentName];
-
-      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
-        })
-      };
-    },
-
-    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 fallback={<Dynamic {...state.componentOptions} attributes={state.propertiesAndActions} builderBlock={state.useBlock} style={state.css} component={state.componentRef}>
-            <For each={state.children}>
-              {(child, _index) => {
-          const index = _index();
-
-          return <RenderBlock block={child}></RenderBlock>;
-        }}
-            </For>
-          </Dynamic>} 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}>
-            {(child, _index) => {
-            const index = _index();
-
-            return <RenderBlock block={child}></RenderBlock>;
-          }}
-          </For>
-        </Dynamic>
-      </Show>
-    </>;
-}
-
-export default RenderBlock;

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

@@ -1,137 +0,0 @@
-import { useContext, 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";
-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 BlockStyles from "./block-styles.lite";
-
-function RenderBlock(props) {
-  const state = createMutable({
-    get component() {
-      const componentName = state.useBlock.component?.name;
-
-      if (!componentName) {
-        return null;
-      }
-
-      const ref = builderContext.registeredComponents[componentName];
-
-      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,
-        }),
-      };
-    },
-    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
-        fallback={
-          <Dynamic
-            {...state.componentOptions}
-            attributes={state.propertiesAndActions}
-            builderBlock={state.useBlock}
-            style={state.css}
-            component={state.componentRef}
-          >
-            <For each={state.children}>
-              {(child, _index) => {
-                const index = _index();
-                return <RenderBlock block={child}></RenderBlock>;
-              }}
-            </For>
-          </Dynamic>
-        }
-        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}>
-            {(child, _index) => {
-              const index = _index();
-              return <RenderBlock block={child}></RenderBlock>;
-            }}
-          </For>
-        </Dynamic>
-      </Show>
-    </>
-  );
-}
-
-export default RenderBlock;

package/src/components/render-blocks.jsx

@@ -1,57 +0,0 @@
-import { Show, For } from "solid-js";
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-import { isEditing } from "../functions/is-editing.js";
-import RenderBlock from "./render-block/render-block";
-
-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) => {
-          const index = _index();
-
-          return <RenderBlock key={block.id} block={block}></RenderBlock>;
-        }}
-        </For>
-      </Show>
-    </div>;
-}
-
-export default RenderBlocks;

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

@@ -1,75 +0,0 @@
-import { Show, For } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-
-import { isEditing } from "../functions/is-editing.js";
-import RenderBlock from "./render-block/render-block.lite";
-
-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) => {
-            const index = _index();
-            return <RenderBlock key={block.id} block={block}></RenderBlock>;
-          }}
-        </For>
-      </Show>
-    </div>
-  );
-}
-
-export default RenderBlocks;

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

@@ -1,74 +0,0 @@
-import { createMutable } from "solid-js/store";
-import RenderInlinedStyles from "../../render-inlined-styles";
-
-function RenderContentStyles(props) {
-  const state = createMutable({
-    getCssFromFont(font) {
-      // TODO: compute what font sizes are used and only load those.......
-      const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-      const name = family.split(",")[0];
-      const url = font.fileUrl ?? font?.files?.regular;
-      let str = "";
-
-      if (url && family && name) {
-        str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-      }
-
-      if (font.files) {
-        for (const weight in font.files) {
-          const isNumber = String(Number(weight)) === weight;
-
-          if (!isNumber) {
-            continue;
-          } // TODO: maybe limit number loaded
-
-
-          const weightUrl = font.files[weight];
-
-          if (weightUrl && weightUrl !== url) {
-            str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-          }
-        }
-      }
-
-      return str;
-    },
-
-    getFontCss({
-      customFonts
-    }) {
-      // TODO: flag for this
-      // if (!this.builder.allowCustomFonts) {
-      //   return '';
-      // }
-      // TODO: separate internal data from external
-      return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
-    },
-
-    get injectedStyles() {
-      return `
-${props.cssCode || ""}
-${state.getFontCss({
-        customFonts: props.customFonts
-      })}`;
-    }
-
-  });
-  return <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>;
-}
-
-export default RenderContentStyles;

package/src/components/render-content/components/render-styles.lite.tsx

@@ -1,76 +0,0 @@
-import { createMutable } from "solid-js/store";
-
-import RenderInlinedStyles from "../../render-inlined-styles.lite";
-
-function RenderContentStyles(props) {
-  const state = createMutable({
-    getCssFromFont(font: CustomFont) {
-      // TODO: compute what font sizes are used and only load those.......
-      const family =
-        font.family +
-        (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-      const name = family.split(",")[0];
-      const url = font.fileUrl ?? font?.files?.regular;
-      let str = "";
-
-      if (url && family && name) {
-        str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-      }
-
-      if (font.files) {
-        for (const weight in font.files) {
-          const isNumber = String(Number(weight)) === weight;
-
-          if (!isNumber) {
-            continue;
-          } // TODO: maybe limit number loaded
-
-          const weightUrl = font.files[weight];
-
-          if (weightUrl && weightUrl !== url) {
-            str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-          }
-        }
-      }
-
-      return str;
-    },
-    getFontCss({ customFonts }: { customFonts?: CustomFont[] }) {
-      // TODO: flag for this
-      // if (!this.builder.allowCustomFonts) {
-      //   return '';
-      // }
-      // TODO: separate internal data from external
-      return (
-        customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
-      );
-    },
-    get injectedStyles() {
-      return `
-${props.cssCode || ""}
-${state.getFontCss({
-  customFonts: props.customFonts,
-})}`;
-    },
-  });
-
-  return (
-    <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>
-  );
-}
-
-export default RenderContentStyles;

package/src/components/render-content/index.js

@@ -1,4 +0,0 @@
-import { default as default2 } from "./render-content.jsx";
-export {
-  default2 as default
-};