@builder.io/sdk-solid 0.0.16 → 0.0.18

package/src/blocks/fragment/fragment.lite.tsx

@@ -1,5 +0,0 @@
-function FragmentComponent(props) {
-  return <span>{props.children}</span>;
-}
-
-export default FragmentComponent;

package/src/blocks/fragment/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./fragment.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/image/image.lite.tsx

@@ -1,83 +0,0 @@
-import { Show } from "solid-js";
-
-import { css } from "solid-styled-components";
-
-function Image(props) {
-  return (
-    <div
-      class={css({
-        position: "relative",
-      })}
-    >
-      <picture>
-        <img
-          class={
-            "builder-image" +
-            (props.className ? " " + props.className : "") +
-            " " +
-            css({
-              opacity: "1",
-              transition: "opacity 0.2s ease-in-out",
-              position: "absolute",
-              height: "100%",
-              width: "100%",
-              top: "0px",
-              left: "0px",
-            })
-          }
-          loading="lazy"
-          alt={props.altText}
-          aria-role={props.altText ? "presentation" : undefined}
-          style={{
-            "object-position": props.backgroundSize || "center",
-            "object-fit": props.backgroundSize || "cover",
-          }}
-          src={props.image}
-          srcset={props.srcset}
-          sizes={props.sizes}
-        />
-        <source srcSet={props.srcset} />
-      </picture>
-      <Show
-        when={
-          props.aspectRatio &&
-          !(props.fitContent && props.builderBlock?.children?.length)
-        }
-      >
-        <div
-          class={css({
-            width: "100%",
-            pointerEvents: "none",
-            fontSize: "0",
-          })}
-          style={{
-            "padding-top": props.aspectRatio * 100 + "%",
-          }}
-        >
-          {" "}
-        </div>
-      </Show>
-      <Show when={props.builderBlock?.children?.length && props.fitContent}>
-        {props.children}
-      </Show>
-      <Show when={!props.fitContent}>
-        <div
-          class={css({
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            position: "absolute",
-            top: "0",
-            left: "0",
-            width: "100%",
-            height: "100%",
-          })}
-        >
-          {props.children}
-        </div>
-      </Show>
-    </div>
-  );
-}
-
-export default Image;

package/src/blocks/image/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./image.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/img/img.lite.tsx

@@ -1,18 +0,0 @@
-import { isEditing } from "../../functions/is-editing.js";
-
-function ImgComponent(props) {
-  return (
-    <img
-      {...props.attributes}
-      style={{
-        "object-fit": props.backgroundSize || "cover",
-        "object-position": props.backgroundPosition || "center",
-      }}
-      key={(isEditing() && props.imgSrc) || "default-key"}
-      alt={props.altText}
-      src={props.imgSrc}
-    />
-  );
-}
-
-export default ImgComponent;

package/src/blocks/img/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./img.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/input/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./input.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/input/input.lite.tsx

@@ -1,20 +0,0 @@
-import { isEditing } from "../../functions/is-editing.js";
-
-function FormInputComponent(props) {
-  return (
-    <input
-      {...props.attributes}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      placeholder={props.placeholder}
-      type={props.type}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      required={props.required}
-    />
-  );
-}
-
-export default FormInputComponent;

package/src/blocks/raw-text/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./raw-text.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/raw-text/raw-text.lite.tsx

@@ -1,10 +0,0 @@
-function RawText(props) {
-  return (
-    <span
-      class={props.attributes?.class || props.attributes?.className}
-      innerHTML={props.text || ""}
-    ></span>
-  );
-}
-
-export default RawText;

package/src/blocks/section/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./section.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/section/section.lite.tsx

@@ -1,18 +0,0 @@
-function SectionComponent(props) {
-  return (
-    <section
-      {...props.attributes}
-      style={
-        props.maxWidth && typeof props.maxWidth === "number"
-          ? {
-              "max-width": props.maxWidth,
-            }
-          : undefined
-      }
-    >
-      {props.children}
-    </section>
-  );
-}
-
-export default SectionComponent;

package/src/blocks/select/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./select.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/select/select.lite.tsx

@@ -1,28 +0,0 @@
-import { For } from "solid-js";
-
-import { isEditing } from "../../functions/is-editing.js";
-
-function SelectComponent(props) {
-  return (
-    <select
-      {...props.attributes}
-      value={props.value}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      defaultValue={props.defaultValue}
-      name={props.name}
-    >
-      <For each={props.options}>
-        {(option, _index) => {
-          const index = _index();
-          return (
-            <option value={option.value}>{option.name || option.value}</option>
-          );
-        }}
-      </For>
-    </select>
-  );
-}
-
-export default SelectComponent;

package/src/blocks/submit-button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./submit-button.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/submit-button/submit-button.lite.tsx

@@ -1,9 +0,0 @@
-function SubmitButton(props) {
-  return (
-    <button {...props.attributes} type="submit">
-      {props.text}
-    </button>
-  );
-}
-
-export default SubmitButton;

package/src/blocks/symbol/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./symbol.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,39 +0,0 @@
-import { createMutable } from "solid-js/store";
-
-import RenderContent from "../../components/render-content/render-content.js";
-import BuilderContext from "../../context/builder.context.js";
-import { getContent } from "../../functions/get-content/index.js";
-
-function Symbol(props) {
-  const state = createMutable({ className: "builder-symbol", content: null });
-
-  const builderContext = useContext(BuilderContext);
-
-  onMount(() => {
-    state.content = props.symbol?.content;
-  });
-
-  return (
-    <div
-      class={state.className}
-      {...props.attributes}
-      dataSet={{
-        class: state.className,
-      }}
-    >
-      <RenderContent
-        apiKey={builderContext.apiKey}
-        context={builderContext.context}
-        data={{
-          ...props.symbol?.data,
-          ...builderContext.state,
-          ...props.symbol?.state.content?.data?.state,
-        }}
-        model={props.symbol?.model}
-        content={state.content}
-      ></RenderContent>
-    </div>
-  );
-}
-
-export default Symbol;

package/src/blocks/text/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./text.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/text/text.lite.tsx

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

package/src/blocks/textarea/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./textarea.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/textarea/textarea.lite.tsx

@@ -1,13 +0,0 @@
-function Textarea(props) {
-  return (
-    <textarea
-      {...props.attributes}
-      placeholder={props.placeholder}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-    ></textarea>
-  );
-}
-
-export default Textarea;

package/src/blocks/video/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./video.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/video/video.lite.tsx

@@ -1,26 +0,0 @@
-function Video(props) {
-  return (
-    <video
-      {...props.attributes}
-      preload="none"
-      style={{
-        width: "100%",
-        height: "100%",
-        ...props.attributes?.style,
-        "object-fit": props.fit,
-        "object-position": props.position,
-        // 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>
-  );
-}
-
-export default Video;

package/src/components/error-boundary.jsx

@@ -1,5 +0,0 @@
-function ErrorBoundary(props) {
-  return <></>;
-}
-
-export default ErrorBoundary;

package/src/components/error-boundary.lite.tsx

@@ -1,5 +0,0 @@
-function ErrorBoundary(props) {
-  return <></>;
-}
-
-export default ErrorBoundary;

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.js";
-
-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.lite.tsx

@@ -1,119 +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.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";
-
-function RenderBlock(props) {
-  const state = createMutable({
-    get component() {
-      const componentName = state.useBlock.component?.name;
-
-      if (!componentName) {
-        return null;
-      }
-
-      const ref = components[componentName];
-
-      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 (
-    <>
-      <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}>
-            {(child, _index) => {
-              const index = _index();
-              return <RenderBlock block={child}></RenderBlock>;
-            }}
-          </For>
-        </Dynamic>
-      </Show>
-    </>
-  );
-}
-
-export default RenderBlock;

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.js";
-
-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;