@builder.io/sdk-svelte 0.0.3 → 0.0.4

package/package/components/render-block/block-styles.svelte

@@ -2,10 +2,8 @@
 
 <script>import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
-import "../../context/types.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { convertStyleMaptoCSS } from "../../helpers/css.js";
-import "../../types/builder-block.js";
+import { createCssClass } from "../../helpers/css.js";
 import RenderInlinedStyles from "../render-inlined-styles.svelte";
 export let block;
 export let context;
@@ -22,24 +20,31 @@ $: css = () => {
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
-    return `
-      ${largeStyles
-        ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}`
-        : ""}
-      ${mediumStyles
-        ? `${getMaxWidthQueryForSize("medium")} {
-            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
-          }`
-        : ""}
-      ${smallStyles
-        ? `${getMaxWidthQueryForSize("small")} {
-            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
-          }`
-        : ""}
-    }`;
+    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(" ");
 };
 </script>
 
-{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
+{#if TARGET !== "reactNative" && css()}
   <RenderInlinedStyles styles={css()} />
 {/if}

package/package/components/render-block/block-styles.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 export declare type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         block: BlockStylesProps["block"];

package/package/components/render-block/render-block.svelte

@@ -1,20 +1,19 @@
 <script context="module"></script>
 
-<script>import "../../context/types.js";
-import { getBlockActions } from "../../functions/get-block-actions.js";
+<script>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 "../../types/builder-block.js";
-import "../../types/typescript.js";
 import { evaluate } from "../../functions/evaluate.js";
 import BlockStyles from "./block-styles.svelte";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderComponent from "./render-component.svelte";
-import "./types.js";
 import RenderRepeatedBlock from "./render-repeated-block.svelte";
+import { TARGET } from "../../constants/target.js";
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import RenderComponentWithContext from "./render-component-with-context.svelte";
+import RenderComponent from "./render-component.svelte";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 export let block;
 export let context;
 $: component = () => {
@@ -39,18 +38,6 @@ $: component = () => {
         return ref;
     }
 };
-$: componentInfo = () => {
-    if (component()) {
-        const { component: _, ...info } = component();
-        return info;
-    }
-    else {
-        return undefined;
-    }
-};
-$: componentRef = () => {
-    return component?.()?.component;
-};
 $: tagName = () => {
     return getBlockTag(useBlock());
 };
@@ -72,39 +59,43 @@ $: attributes = () => {
             state: context.state,
             context: context.context,
         }),
-        style: getBlockStyles(useBlock()),
+        ...(TARGET === "reactNative"
+            ? {
+                style: getReactNativeBlockStyles({
+                    block: useBlock(),
+                    context: context,
+                }),
+            }
+            : {}),
     };
 };
 $: shouldWrap = () => {
-    return !componentInfo?.()?.noWrap;
-};
-$: componentOptions = () => {
-    return {
-        ...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(),
-            }),
-    };
+    return !component?.()?.noWrap;
 };
 $: renderComponentProps = () => {
     return {
         blockChildren: children(),
-        componentRef: componentRef(),
-        componentOptions: componentOptions(),
-        context: context,
+        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(),
+                }),
+        },
+        context: childrenContext(),
     };
 };
 $: 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 componentInfo?.canHaveChildren ? useBlock().children : [];
     return useBlock().children ?? [];
 };
 $: childrenWithoutParentComponent = () => {
@@ -114,7 +105,7 @@ $: childrenWithoutParentComponent = () => {
      * 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 = !componentRef() && !repeatItemData();
+    const shouldRenderChildrenOutsideRef = !component?.()?.component && !repeatItemData();
     return shouldRenderChildrenOutsideRef ? children() : [];
 };
 $: repeatItemData = () => {
@@ -151,35 +142,67 @@ $: repeatItemData = () => {
     }));
     return repeatArray;
 };
+$: inheritedTextStyles = () => {
+    if (TARGET !== "reactNative") {
+        return {};
+    }
+    const styles = getReactNativeBlockStyles({
+        block: useBlock(),
+        context: context,
+    });
+    return extractTextStyles(styles);
+};
+$: childrenContext = () => {
+    return {
+        apiKey: context.apiKey,
+        state: context.state,
+        content: context.content,
+        context: context.context,
+        registeredComponents: context.registeredComponents,
+        inheritedStyles: inheritedTextStyles(),
+    };
+};
+$: renderComponentTag = () => {
+    if (TARGET === "reactNative") {
+        return RenderComponentWithContext;
+    }
+    else if (TARGET === "vue3") {
+        // vue3 expects a string for the component tag
+        return "RenderComponent";
+    }
+    else {
+        return RenderComponent;
+    }
+};
 </script>
 
 {#if shouldWrap()}
-  {#if !isEmptyHtmlElement(tagName())}
-    <svelte:element this={tagName()} {...attributes()}>
-      {#if repeatItemData()}
-        {#each repeatItemData() as data, index (index)}
-          <RenderRepeatedBlock
-            repeatContext={data.context}
-            block={data.block}
-          />
-        {/each}
-      {/if}
+  {#if isEmptyHtmlElement(tagName())}
+    <svelte:element this={tagName()} {...attributes()} />
+  {/if}
 
-      {#if !repeatItemData()}
-        <RenderComponent {...renderComponentProps()} />
-      {/if}
+  {#if !isEmptyHtmlElement(tagName()) && repeatItemData()}
+    {#each repeatItemData() as data, index (index)}
+      <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
+    {/each}
+  {/if}
+
+  {#if !isEmptyHtmlElement(tagName()) && !repeatItemData()}
+    <svelte:element this={tagName()} {...attributes()}>
+      <svelte:component
+        this={renderComponentTag()}
+        {...renderComponentProps()}
+      />
 
       {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
-        <svelte:self block={child} {context} />
+        <svelte:self block={child} context={childrenContext()} />
       {/each}
 
       {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-        <BlockStyles block={child} {context} />
+        <BlockStyles block={child} context={childrenContext()} />
       {/each}
     </svelte:element>
-  {:else}
-    <svelte:element this={tagName()} {...attributes()} />
   {/if}
 {:else}
-  <RenderComponent {...renderComponentProps()} {context} />
+  <svelte:component this={renderComponentTag()} {...renderComponentProps()} />
 {/if}

package/package/components/render-block/render-block.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 export declare type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         block: RenderBlockProps["block"];

package/package/components/render-block/render-component-with-context.svelte

@@ -0,0 +1,32 @@
+<script context="module"></script>
+
+<script>import { setContext } from "svelte";
+import BuilderContext from "../../context/builder.context.js";
+import RenderComponent from "./render-component.svelte";
+export let componentRef;
+export let componentOptions;
+export let blockChildren;
+export let context;
+setContext(BuilderContext.key, {
+    get content() {
+        return context.content;
+    },
+    get state() {
+        return context.state;
+    },
+    get context() {
+        return context.context;
+    },
+    get apiKey() {
+        return context.apiKey;
+    },
+    get registeredComponents() {
+        return context.registeredComponents;
+    },
+    get inheritedStyles() {
+        return context.inheritedStyles;
+    },
+});
+</script>
+
+<RenderComponent {componentRef} {componentOptions} {blockChildren} {context} />

package/package/components/render-block/render-component-with-context.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        componentRef: RenderComponentProps;
+        componentOptions: RenderComponentProps;
+        blockChildren: RenderComponentProps;
+        context: RenderComponentProps;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderComponentWithContextProps = typeof __propDef.props;
+export declare type RenderComponentWithContextEvents = typeof __propDef.events;
+export declare type RenderComponentWithContextSlots = typeof __propDef.slots;
+export default class RenderComponentWithContext extends SvelteComponentTyped<RenderComponentWithContextProps, RenderComponentWithContextEvents, RenderComponentWithContextSlots> {
+}
+export {};

package/package/components/render-block/render-component.svelte

@@ -1,9 +1,7 @@
 <script context="module"></script>
 
-<script>import "../../types/builder-block.js";
-import BlockStyles from "./block-styles.svelte";
+<script>import BlockStyles from "./block-styles.svelte";
 import RenderBlock from "./render-block.svelte";
-import "../../context/types.js";
 import { markPropsMutable } from "../../functions/mark-mutable.js";
 export let componentRef;
 export let componentOptions;

package/package/components/render-block/render-component.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
 export interface RenderComponentProps {
     componentRef: any;
     componentOptions: any;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
 }
-import { BuilderBlock } from "../../types/builder-block.js";
-import { BuilderContextInterface } from "../../context/types.js";
 declare const __propDef: {
     props: {
         componentRef: RenderComponentProps["componentRef"];

package/package/components/render-block/render-repeated-block.svelte

@@ -30,6 +30,9 @@ setContext(BuilderContext.key, {
     get registeredComponents() {
         return repeatContext.registeredComponents;
     },
+    get inheritedStyles() {
+        return repeatContext.inheritedStyles;
+    },
 });
 </script>
 

package/package/components/render-block/types.d.ts

@@ -1,5 +1,5 @@
-import { BuilderContextInterface } from '../../context/types.js';
-import { BuilderBlock } from '../../types/builder-block.js';
+import type { BuilderContextInterface } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
 export interface RepeatData {
     block: BuilderBlock;
     context: BuilderContextInterface;

package/package/components/render-block/types.js

@@ -1,2 +1 @@
-import '../../context/types.js';
-import '../../types/builder-block.js';
+export {};

package/package/components/render-blocks.svelte

@@ -3,12 +3,22 @@
 <script>import { getContext } from "svelte";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import "../types/builder-block.js";
 import BlockStyles from "./render-block/block-styles.svelte";
 import RenderBlock from "./render-block/render-block.svelte";
 export let blocks;
 export let parent;
 export let path;
+export let styleProp;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
 let builderContext = getContext(BuilderContext.key);
 function onClick() {
     if (isEditing() && !blocks?.length) {
@@ -38,6 +48,7 @@ $: className = () => {
 </script>
 
 <div
+  use:mitosis_styling={styleProp}
   class={className() + " div"}
   builder-path={path}
   builder-parent-id={parent}

package/package/components/render-blocks.svelte.d.ts

@@ -1,15 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BuilderBlock } from "../types/builder-block.js";
 export declare type RenderBlockProps = {
     blocks?: BuilderBlock[];
     parent?: string;
     path?: string;
+    styleProp?: Record<string, any>;
 };
-import { BuilderBlock } from "../types/builder-block.js";
 declare const __propDef: {
     props: {
         blocks: RenderBlockProps["blocks"];
         parent: RenderBlockProps["parent"];
         path: RenderBlockProps["path"];
+        styleProp: RenderBlockProps["styleProp"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/render-content/components/render-styles.svelte

@@ -25,7 +25,8 @@ function getCssFromFont(font) {
             const isNumber = String(Number(weight)) === weight;
             if (!isNumber) {
                 continue;
-            } // TODO: maybe limit number loaded
+            }
+            // TODO: maybe limit number loaded
             const weightUrl = font.files[weight];
             if (weightUrl && weightUrl !== url) {
                 str += `

package/package/components/render-content/render-content.svelte

@@ -4,7 +4,6 @@
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
-import "../../context/types.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { getFetch } from "../../functions/get-fetch.js";
@@ -13,7 +12,6 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
 import { track } from "../../functions/track.js";
-import "../../types/builder-content.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
@@ -99,7 +97,10 @@ function handleRequest({ url, key }) {
         .then((fetch) => fetch(url))
         .then((response) => response.json())
         .then((json) => {
-        const newOverrideState = { ...overrideState, [key]: json };
+        const newOverrideState = {
+            ...overrideState,
+            [key]: json,
+        };
         overrideState = newOverrideState;
     })
         .catch((err) => {
@@ -137,7 +138,11 @@ $: useContent = () => {
     const mergedContent = {
         ...content,
         ...overrideContent,
-        data: { ...content?.data, ...data, ...overrideContent?.data },
+        data: {
+            ...content?.data,
+            ...data,
+            ...overrideContent?.data,
+        },
     };
     return mergedContent;
 };
@@ -145,7 +150,11 @@ $: canTrackToUse = () => {
     return canTrack || true;
 };
 $: contentState = () => {
-    return { ...content?.data?.state, ...data, ...overrideState };
+    return {
+        ...content?.data?.state,
+        ...data,
+        ...overrideState,
+    };
 };
 $: contextContext = () => {
     return context || {};
@@ -153,6 +162,7 @@ $: contextContext = () => {
 $: allRegisteredComponents = () => {
     const allComponentsArray = [
         ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
         // Since users are able to override our default components, we need to make sure that we do not break such
         // existing usage.
         // This is why we spread `components` after the default Builder.io components, but before the `customComponents`,
@@ -160,7 +170,10 @@ $: allRegisteredComponents = () => {
         ...components,
         ...(customComponents || []),
     ];
-    const allComponents = allComponentsArray.reduce((acc, curr) => ({ ...acc, [curr.name]: curr }), {});
+    const allComponents = allComponentsArray.reduce((acc, curr) => ({
+        ...acc,
+        [curr.name]: curr,
+    }), {});
     return allComponents;
 };
 $: httpReqsData = () => {
@@ -179,7 +192,8 @@ let overrideState = {};
 onMount(() => {
     if (isBrowser()) {
         if (isEditing()) {
-            forceReRenderCount = forceReRenderCount + 1; // QWIK-REPLACE: _useMutableProps
+            forceReRenderCount = forceReRenderCount + 1;
+            // QWIK-REPLACE: _useMutableProps
             registerInsertMenu();
             setupBrowserForEditing();
             Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
@@ -196,7 +210,8 @@ onMount(() => {
                 contentId: useContent?.()?.id,
                 orgId: apiKey,
             });
-        } // override normal content in preview mode
+        }
+        // override normal content in preview mode
         if (isPreviewing()) {
             const searchParams = new URL(location.href).searchParams;
             if (model && searchParams.get("builder.preview") === model) {
@@ -245,6 +260,7 @@ onDestroy(() => {
       onClick(event);
     }}
     builder-content-id={useContent?.()?.id}
+    builder-model={model}
   >
     {#if shouldRenderContentStyles()}
       <RenderContentStyles

package/package/components/render-content/render-content.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
+import type { BuilderContent } from "../../types/builder-content.js";
 import type { Nullable } from "../../types/typescript.js";
 export declare type RenderContentProps = {
     content?: Nullable<BuilderContent>;
@@ -11,8 +13,6 @@ export declare type RenderContentProps = {
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
 };
-import { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
-import { BuilderContent } from "../../types/builder-content.js";
 declare const __propDef: {
     props: {
         content: RenderContentProps["content"];

package/package/constants/builder-registered-components.js

@@ -18,6 +18,8 @@ import { componentInfo as embedComponentInfo } from '../blocks/embed/component-i
 import { default as embed } from '../blocks/embed/embed.svelte';
 import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
 /**
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
@@ -33,4 +35,5 @@ export const getDefaultRegisteredComponents = () => [
     { component: Section, ...sectionComponentInfo },
     { component: Fragment, ...fragmentComponentInfo },
     { component: embed, ...embedComponentInfo },
+    { component: customCode, ...customCodeInfo },
 ];

package/package/context/builder.context.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
         state: {};
         apiKey: null;
         registeredComponents: {};
+        inheritedStyles: {};
     };
     key: symbol;
 };

package/package/context/builder.context.js

@@ -6,6 +6,7 @@ export default {
         state: {},
         apiKey: null,
         registeredComponents: {},
+        inheritedStyles: {},
     },
     key,
 };

package/package/context/types.d.ts

@@ -1,6 +1,6 @@
-import { BuilderContent } from '../types/builder-content.js';
-import { ComponentInfo } from '../types/components.js';
-import { Dictionary, Nullable } from '../types/typescript.js';
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
 export declare type RegisteredComponent = ComponentInfo & {
     component: any;
 };
@@ -13,4 +13,5 @@ export interface BuilderContextInterface {
     state: BuilderRenderState;
     apiKey: string | null;
     registeredComponents: RegisteredComponents;
+    inheritedStyles: Record<string, unknown>;
 }

package/package/context/types.js

@@ -1,3 +1 @@
-import '../types/builder-content.js';
-import '../types/components.js';
-import '../types/typescript.js';
+export {};

package/package/functions/extract-text-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export declare const extractTextStyles: (styles: Partial<CSSStyleDeclaration>) => Partial<CSSStyleDeclaration>;