@builder.io/sdk-svelte 0.0.3 → 0.0.5

package/{package/components/render-block/render-block.lite.tsx → src/components/render-block/render-block.svelte}

@@ -1,31 +1,38 @@
 <script context="module" lang="ts">
+  import type {
+    BuilderContextInterface,
+    RegisteredComponent,
+  } from "../../context/types.js";
+
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
+  import type { Nullable } from "../../types/typescript.js";
+
+  import type { RenderComponentProps } from "./render-component";
+
+  import type { RepeatData } from "./types.js";
+
   export type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
-  }; // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+  };
 </script>
 
 <script lang="ts">
-  import {
-    BuilderContextInterface,
-    RegisteredComponent,
-  } from "../../context/types.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 { BuilderBlock } from "../../types/builder-block.js";
-  import { Nullable } from "../../types/typescript.js";
   import { evaluate } from "../../functions/evaluate.js";
   import BlockStyles from "./block-styles.svelte";
   import { isEmptyHtmlElement } from "./render-block.helpers.js";
-  import RenderComponent, {
-    RenderComponentProps,
-  } from "./render-component.svelte";
-  import { RepeatData } from "./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: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
@@ -37,13 +44,10 @@
       context: context.context,
       shouldEvaluateBindings: false,
     }).component?.name;
-
     if (!componentName) {
       return null;
     }
-
     const ref = context.registeredComponents[componentName];
-
     if (!ref) {
       // TODO: Public doc page with more info about this message
       console.warn(`
@@ -54,24 +58,9 @@
       return ref;
     }
   };
-
-  $: componentInfo = () => {
-    if (component()) {
-      const { component: _, ...info } = component();
-      return info;
-    } else {
-      return undefined;
-    }
-  };
-
-  $: componentRef = () => {
-    return component?.()?.component;
-  };
-
   $: tagName = () => {
     return getBlockTag(useBlock());
   };
-
   $: useBlock = () => {
     return repeatItemData()
       ? block
@@ -82,7 +71,6 @@
           shouldEvaluateBindings: true,
         });
   };
-
   $: attributes = () => {
     return {
       ...getBlockProperties(useBlock()),
@@ -91,47 +79,45 @@
         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 = () => {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -139,31 +125,27 @@
      * 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 = () => {
     /**
      * 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 } = block;
-
     if (!repeat?.collection) {
       return undefined;
     }
-
     const itemsArray = evaluate({
       code: repeat.collection,
       state: context.state,
       context: context.context,
     });
-
     if (!Array.isArray(itemsArray)) {
       return undefined;
     }
-
     const collectionName = repeat.collection.split(".").pop();
     const itemNameToUse =
       repeat.itemName || (collectionName ? collectionName + "Item" : "item");
@@ -182,35 +164,65 @@
     }));
     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/src/components/render-block/render-component-with-context.svelte

@@ -0,0 +1,38 @@
+<script context="module" lang="ts">
+  import type { RenderComponentProps } from "./render-component";
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import BuilderContext from "../../context/builder.context.js";
+  import RenderComponent from "./render-component.svelte";
+
+  export let componentRef: RenderComponentProps["componentRef"];
+  export let componentOptions: RenderComponentProps["componentOptions"];
+  export let blockChildren: RenderComponentProps["blockChildren"];
+  export let context: RenderComponentProps["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.lite.tsx → src/components/render-block/render-component.svelte}

@@ -1,17 +1,19 @@
 <script context="module" lang="ts">
+  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;
-  } // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+  }
 </script>
 
 <script lang="ts">
-  import { BuilderBlock } from "../../types/builder-block.js";
   import BlockStyles from "./block-styles.svelte";
   import RenderBlock from "./render-block.svelte";
-  import { BuilderContextInterface } from "../../context/types.js";
   import { markPropsMutable } from "../../functions/mark-mutable.js";
 
   export let componentRef: RenderComponentProps["componentRef"];

package/{package/components/render-block/render-repeated-block.lite.tsx → src/components/render-block/render-repeated-block.svelte}

@@ -7,6 +7,7 @@
     block: BuilderBlock;
     repeatContext: BuilderContextInterface;
   };
+
   /**
    * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
    *
@@ -43,6 +44,9 @@
     get registeredComponents() {
       return repeatContext.registeredComponents;
     },
+    get inheritedStyles() {
+      return repeatContext.inheritedStyles;
+    },
   });
 </script>
 

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

@@ -0,0 +1,7 @@
+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-blocks.lite.tsx → src/components/render-blocks.svelte}

@@ -1,8 +1,11 @@
 <script context="module" lang="ts">
+  import type { BuilderBlock } from "../types/builder-block.js";
+
   export type RenderBlockProps = {
     blocks?: BuilderBlock[];
     parent?: string;
     path?: string;
+    styleProp?: Record<string, any>;
   };
 </script>
 
@@ -11,13 +14,23 @@
 
   import BuilderContext from "../context/builder.context.js";
   import { isEditing } from "../functions/is-editing.js";
-  import { BuilderBlock } from "../types/builder-block.js";
   import BlockStyles from "./render-block/block-styles.svelte";
   import RenderBlock from "./render-block/render-block.svelte";
 
   export let blocks: RenderBlockProps["blocks"];
   export let parent: RenderBlockProps["parent"];
   export let path: RenderBlockProps["path"];
+  export let styleProp: RenderBlockProps["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);
 
@@ -35,7 +48,6 @@
       );
     }
   }
-
   function onMouseEnter() {
     if (isEditing() && !blocks?.length) {
       window.parent?.postMessage(
@@ -56,6 +68,7 @@
 </script>
 
 <div
+  use:mitosis_styling={styleProp}
   class={className() + " div"}
   builder-path={path}
   builder-parent-id={parent}

package/{package/components/render-content/components/render-styles.lite.tsx → src/components/render-content/components/render-styles.svelte}

@@ -28,7 +28,6 @@
     const name = family.split(",")[0];
     const url = font.fileUrl ?? font?.files?.regular;
     let str = "";
-
     if (url && family && name) {
       str += `
 @font-face {
@@ -39,17 +38,14 @@
 }
         `.trim();
     }
-
     if (font.files) {
       for (const weight in font.files) {
         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 += `
 @font-face {
@@ -62,10 +58,8 @@
         }
       }
     }
-
     return str;
   }
-
   function getFontCss({ customFonts }) {
     // TODO: flag for this
     // if (!builder.allowCustomFonts) {

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

@@ -0,0 +1 @@
+export { default } from './render-content.svelte';

package/{package/components/render-content/render-content.lite.tsx → src/components/render-content/render-content.svelte}

@@ -1,4 +1,13 @@
 <script context="module" lang="ts">
+  import type {
+    BuilderRenderContext,
+    BuilderRenderState,
+    RegisteredComponent,
+    RegisteredComponents,
+  } from "../../context/types.js";
+
+  import type { BuilderContent } from "../../types/builder-content.js";
+
   import type { Dictionary, Nullable } from "../../types/typescript.js";
 
   export type RenderContentProps = {
@@ -38,12 +47,6 @@
   import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
   import { TARGET } from "../../constants/target.js";
   import BuilderContext from "../../context/builder.context.js";
-  import {
-    BuilderRenderContext,
-    BuilderRenderState,
-    RegisteredComponent,
-    RegisteredComponents,
-  } from "../../context/types.js";
   import { evaluate } from "../../functions/evaluate.js";
   import { getContent } from "../../functions/get-content/index.js";
   import { getFetch } from "../../functions/get-fetch.js";
@@ -55,7 +58,6 @@
     createRegisterComponentMessage,
   } from "../../functions/register-component.js";
   import { track } from "../../functions/track.js";
-  import { BuilderContent } from "../../types/builder-content.js";
   import RenderBlocks from "../render-blocks.svelte";
   import RenderContentStyles from "./components/render-styles.svelte";
   import {
@@ -92,7 +94,6 @@
 
   function processMessage(event) {
     const { data } = event;
-
     if (data) {
       switch (data.type) {
         case "builder.contentUpdate": {
@@ -103,7 +104,6 @@
             messageContent.entry ||
             messageContent.modelName;
           const contentData = messageContent.data;
-
           if (key === model) {
             overrideContent = contentData;
             forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
@@ -111,7 +111,6 @@
 
           break;
         }
-
         case "builder.patchUpdates": {
           // TODO
           break;
@@ -119,11 +118,9 @@
       }
     }
   }
-
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
     const jsCode = useContent?.()?.data?.jsCode;
-
     if (jsCode) {
       evaluate({
         code: jsCode,
@@ -132,7 +129,6 @@
       });
     }
   }
-
   function onClick(_event) {
     if (useContent()) {
       track({
@@ -143,7 +139,6 @@
       });
     }
   }
-
   function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
@@ -153,20 +148,21 @@
       })
     );
   }
-
   function handleRequest({ url, key }) {
     getFetch()
       .then((fetch) => fetch(url))
       .then((response) => response.json())
       .then((json) => {
-        const newOverrideState = { ...overrideState, [key]: json };
+        const newOverrideState = {
+          ...overrideState,
+          [key]: json,
+        };
         overrideState = newOverrideState;
       })
       .catch((err) => {
         console.log("error fetching dynamic data", url, err);
       });
   }
-
   function runHttpRequests() {
     const requests = useContent?.()?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
@@ -179,7 +175,6 @@
       }
     });
   }
-
   function emitStateUpdate() {
     if (isEditing()) {
       window.dispatchEvent(
@@ -198,30 +193,34 @@
     if (!content && !overrideContent) {
       return undefined;
     }
-
     const mergedContent = {
       ...content,
       ...overrideContent,
-      data: { ...content?.data, ...data, ...overrideContent?.data },
+      data: {
+        ...content?.data,
+        ...data,
+        ...overrideContent?.data,
+      },
     };
     return mergedContent;
   };
-
   $: canTrackToUse = () => {
     return canTrack || true;
   };
-
   $: contentState = () => {
-    return { ...content?.data?.state, ...data, ...overrideState };
+    return {
+      ...content?.data?.state,
+      ...data,
+      ...overrideState,
+    };
   };
-
   $: contextContext = () => {
     return context || {};
   };
-
   $: allRegisteredComponents = () => {
     const allComponentsArray = [
-      ...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+      ...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`,
@@ -230,16 +229,17 @@
       ...(customComponents || []),
     ];
     const allComponents = allComponentsArray.reduce(
-      (acc, curr) => ({ ...acc, [curr.name]: curr }),
+      (acc, curr) => ({
+        ...acc,
+        [curr.name]: curr,
+      }),
       {}
     );
     return allComponents;
   };
-
   $: httpReqsData = () => {
     return {};
   };
-
   $: shouldRenderContentStyles = () => {
     return Boolean(
       (useContent?.()?.data?.cssCode ||
@@ -258,8 +258,8 @@
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        forceReRenderCount = forceReRenderCount + 1; // QWIK-REPLACE: _useMutableProps
-
+        forceReRenderCount = forceReRenderCount + 1;
+        // QWIK-REPLACE: _useMutableProps
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents()).forEach(
@@ -274,7 +274,6 @@
           emitStateUpdate
         );
       }
-
       if (useContent()) {
         track({
           type: "impression",
@@ -282,15 +281,14 @@
           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) {
           const previewApiKey =
             searchParams.get("apiKey") || searchParams.get("builder.space");
-
           if (previewApiKey) {
             getContent({
               model: model,
@@ -303,7 +301,6 @@
           }
         }
       }
-
       evaluateJsCode();
       runHttpRequests();
       emitStateUpdate();
@@ -341,6 +338,7 @@
       onClick(event);
     }}
     builder-content-id={useContent?.()?.id}
+    builder-model={model}
   >
     {#if shouldRenderContentStyles()}
       <RenderContentStyles