@builder.io/sdk-svelte 0.1.1 → 0.1.3-0

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "package",
@@ -67,7 +67,6 @@
     "./components/render-block/block-styles.svelte": "./components/render-block/block-styles.svelte",
     "./components/render-block/render-block.helpers": "./components/render-block/render-block.helpers.js",
     "./components/render-block/render-block.svelte": "./components/render-block/render-block.svelte",
-    "./components/render-block/render-component-with-context.svelte": "./components/render-block/render-component-with-context.svelte",
     "./components/render-block/render-component.svelte": "./components/render-block/render-component.svelte",
     "./components/render-block/render-repeated-block.svelte": "./components/render-block/render-repeated-block.svelte",
     "./components/render-block/types": "./components/render-block/types.js",
@@ -117,7 +116,8 @@
     "./functions/set-editor-settings": "./functions/set-editor-settings.js",
     "./functions/set.test": "./functions/set.test.js",
     "./functions/set": "./functions/set.js",
-    "./functions/track": "./functions/track.js",
+    "./functions/track/helpers": "./functions/track/helpers.js",
+    "./functions/track": "./functions/track/index.js",
     "./functions/transform-block-properties": "./functions/transform-block-properties.js",
     "./functions/transform-block": "./functions/transform-block.js",
     "./helpers/ab-tests": "./helpers/ab-tests.js",

package/package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 0.1.1
+
+- Fix: respect when `canTrack` is set to `false`
+- Fix: issues sending session and visitor IDs with tracking events
+
+### 0.1.0
+
+🧨 Breaking change: we no longer provide a `node-fetch` polyfill. See [the docs](./README.md#fetch) for more information.
+
 ### 0.0.1-9
 
 🐛 Fix: custom components were not rendering correctly

package/package/blocks/BaseText.svelte

@@ -16,4 +16,4 @@ function mitosis_styling(node, vars) {
 let builderContext = getContext(BuilderContext.key);
 </script>
 
-<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>
+<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>

package/package/blocks/button/button.svelte

@@ -57,4 +57,4 @@ export let openLinkInNewTab;
   .button {
     all: unset;
   }
-</style>
+</style>

package/package/blocks/columns/columns.svelte

@@ -114,10 +114,10 @@ $: columnsStyles = () => {
     `;
 };
 $: reactNativeColumnsStyles = () => {
-    return columnStyleObjects.columns.small;
+    return this.columnStyleObjects.columns.small;
 };
 $: reactNativeColumnStyles = () => {
-    return columnStyleObjects.column.small;
+    return this.columnStyleObjects.column.small;
 };
 </script>
 
@@ -164,4 +164,4 @@ $: reactNativeColumnStyles = () => {
     flex-direction: column;
     align-items: stretch;
   }
-</style>
+</style>

package/package/blocks/custom-code/custom-code.svelte

@@ -52,4 +52,4 @@ onMount(() => {
   class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
 >
   {@html code}
-</div>
+</div>

package/package/blocks/embed/embed.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
-<script>import "svelte";
-import { isJsScript } from "./helpers.js";
+<script>import { isJsScript } from "./helpers.js";
 export let content;
 function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
@@ -40,4 +39,4 @@ function onUpdateFn_0() {
 $: onUpdateFn_0(...[elem, ranInitFn]);
 </script>
 
-<div class="builder-embed" bind:this={elem}>{@html content}</div>
+<div class="builder-embed" bind:this={elem}>{@html content}</div>

package/package/blocks/form/form.svelte

@@ -286,4 +286,4 @@ let formErrorMessage = "";
     color: red;
     text-align: center;
   }
-</style>
+</style>

package/package/blocks/fragment/fragment.svelte

@@ -2,4 +2,4 @@
 
 <script></script>
 
-<span><slot /></span>
+<span><slot /></span>

package/package/blocks/image/image.svelte

@@ -82,7 +82,6 @@ $: aspectRatioCss = () => {
     srcset={srcSetToUse()}
     {sizes}
   />
-  <source srcset={srcSetToUse()} />
 </picture>
 
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
@@ -126,4 +125,4 @@ $: aspectRatioCss = () => {
     width: 100%;
     height: 100%;
   }
-</style>
+</style>

package/package/blocks/img/img.svelte

@@ -56,4 +56,4 @@ function mitosis_styling(node, vars) {
   src={imgSrc || image}
   {...filterAttrs(attributes, isNonEvent)}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>

package/package/blocks/input/input.svelte

@@ -47,4 +47,4 @@ export let required;
   {defaultValue}
   {required}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>

package/package/blocks/raw-text/raw-text.svelte

@@ -6,4 +6,4 @@ export let text;
 
 <span class={attributes?.class || attributes?.className}
   >{@html text || ""}</span
->
+>

package/package/blocks/section/section.svelte

@@ -58,4 +58,4 @@ function mitosis_styling(node, vars) {
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <slot />
-</section>
+</section>

package/package/blocks/select/select.svelte

@@ -46,4 +46,4 @@ export let options;
   {#each options as option}
     <option value={option.value}>{option.name || option.value}</option>
   {/each}
-</select>
+</select>

package/package/blocks/submit-button/submit-button.svelte

@@ -37,4 +37,4 @@ export let text;
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   {text}
-</button>
+</button>

package/package/blocks/symbol/symbol.svelte

@@ -66,7 +66,9 @@ function onUpdateFn_0() {
     if (symbolToUse &&
         !symbolToUse.content &&
         !fetchedContent &&
-        symbolToUse.model) {
+        symbolToUse.model &&
+        // This is a hack, we should not need to check for this, but it is needed for Svelte.
+        builderContext?.apiKey) {
         getContent({
             model: symbolToUse.model,
             apiKey: builderContext.apiKey,
@@ -101,4 +103,4 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
     model={symbol?.model}
     content={contentToUse()}
   />
-</div>
+</div>

package/package/blocks/text/text.svelte

@@ -3,4 +3,4 @@
 <script>export let text;
 </script>
 
-<span class="builder-text">{@html text}</span>
+<span class="builder-text">{@html text}</span>

package/package/blocks/textarea/textarea.svelte

@@ -41,4 +41,4 @@ export let defaultValue;
   {value}
   {defaultValue}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>

package/package/blocks/video/video.svelte

@@ -99,4 +99,4 @@ $: spreadProps = () => {
   src={video || "no-src"}
   poster={posterImage}
   use:setAttrs={filterAttrs(spreadProps(), isEvent)}
-/>
+/>

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

@@ -49,4 +49,4 @@ $: css = () => {
 
 {#if TARGET !== "reactNative" && css()}
   <RenderInlinedStyles styles={css()} />
-{/if}
+{/if}

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

@@ -1 +1,12 @@
+import type { BuilderContextInterface } from '../../context/types';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { RepeatData } from './types';
 export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
+export declare const getComponent: ({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => import("../../context/types").RegisteredComponent | null | undefined;
+export declare const getRepeatItemData: ({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => RepeatData[] | undefined;

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

@@ -1,3 +1,5 @@
+import { evaluate } from '../../functions/evaluate';
+import { getProcessedBlock } from '../../functions/get-processed-block';
 /**
  * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
  */
@@ -22,3 +24,59 @@ export const isEmptyHtmlElement = (tagName) => {
     return (typeof tagName === 'string' &&
         EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase()));
 };
+export const getComponent = ({ block, context, }) => {
+    const componentName = getProcessedBlock({
+        block: block,
+        state: context.state,
+        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(`
+      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;
+    }
+};
+export const getRepeatItemData = ({ block, context, }) => {
+    /**
+     * we don't use `state.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');
+    const repeatArray = itemsArray.map((item, index) => ({
+        context: {
+            ...context,
+            state: {
+                ...context.state,
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index,
+            },
+        },
+        block: blockWithoutRepeat,
+    }));
+    return repeatArray;
+};

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

@@ -5,13 +5,11 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { evaluate } from "../../functions/evaluate.js";
 import BlockStyles from "./block-styles.svelte";
-import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.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";
 const setAttrs = (node, attrs) => {
@@ -32,33 +30,11 @@ const setAttrs = (node, attrs) => {
 };
 export let block;
 export let context;
-$: component = () => {
-    const componentName = getProcessedBlock({
-        block: block,
-        state: context.state,
-        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(`
-        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;
-    }
-};
 $: tag = () => {
     return getBlockTag(useBlock());
 };
 $: useBlock = () => {
-    return repeatItemData()
+    return repeatItemData
         ? block
         : getProcessedBlock({
             block: block,
@@ -89,20 +65,17 @@ $: attributes = () => {
             : {}),
     };
 };
-$: shouldWrap = () => {
-    return !component?.()?.noWrap;
-};
 $: renderComponentProps = () => {
     return {
-        blockChildren: useChildren(),
-        componentRef: component?.()?.component,
+        blockChildren: useBlock().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()
+            ...(!component?.noWrap
                 ? {}
                 : {
                     attributes: {
@@ -115,13 +88,6 @@ $: renderComponentProps = () => {
         context: childrenContext(),
     };
 };
-$: useChildren = () => {
-    // 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 ?? [];
-};
 $: childrenWithoutParentComponent = () => {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -129,95 +95,53 @@ $: 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 = !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? useChildren() : [];
-};
-$: 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");
-    const repeatArray = itemsArray.map((item, index) => ({
-        context: {
-            ...context,
-            state: {
-                ...context.state,
-                $index: index,
-                $item: item,
-                [itemNameToUse]: item,
-                [`$${itemNameToUse}Index`]: index,
-            },
-        },
-        block: blockWithoutRepeat,
-    }));
-    return repeatArray;
-};
-$: inheritedTextStyles = () => {
-    if (TARGET !== "reactNative") {
-        return {};
-    }
-    const styles = getReactNativeBlockStyles({
-        block: useBlock(),
-        context: context,
-        blockStyles: attributes().style,
-    });
-    return extractTextStyles(styles);
+    const shouldRenderChildrenOutsideRef = !component?.component && !repeatItemData;
+    return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
 };
 $: childrenContext = () => {
+    const getInheritedTextStyles = () => {
+        if (TARGET !== "reactNative") {
+            return {};
+        }
+        return extractTextStyles(getReactNativeBlockStyles({
+            block: useBlock(),
+            context: context,
+            blockStyles: attributes().style,
+        }));
+    };
     return {
         apiKey: context.apiKey,
         state: context.state,
         content: context.content,
         context: context.context,
         registeredComponents: context.registeredComponents,
-        inheritedStyles: inheritedTextStyles(),
+        inheritedStyles: getInheritedTextStyles(),
     };
 };
-$: renderComponentTag = () => {
-    if (TARGET === "reactNative") {
-        return RenderComponentWithContext;
-    }
-    else if (TARGET === "vue3") {
-        // vue3 expects a string for the component tag
-        return "RenderComponent";
-    }
-    else {
-        return RenderComponent;
-    }
-};
+let component = getComponent({
+    block: block,
+    context: context,
+});
+let repeatItemData = getRepeatItemData({
+    block: block,
+    context: context,
+});
 </script>
 
-{#if shouldWrap()}
+{#if !component?.noWrap}
   {#if isEmptyHtmlElement(tag())}
     <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
   {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
-    {#each repeatItemData() as data, index (index)}
+  {#if !isEmptyHtmlElement(tag()) && repeatItemData}
+    {#each repeatItemData as data, index (index)}
       <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
     {/each}
   {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
+  {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
     <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
-      <svelte:component
-        this={renderComponentTag()}
-        {...renderComponentProps()}
-      />
+      <RenderComponent {...renderComponentProps()} />
 
       {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
         <svelte:self block={child} context={childrenContext()} />
@@ -229,5 +153,5 @@ $: renderComponentTag = () => {
     </svelte:element>
   {/if}
 {:else}
-  <svelte:component this={renderComponentTag()} {...renderComponentProps()} />
-{/if}
+  <RenderComponent {...renderComponentProps()} />
+{/if}

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

@@ -18,4 +18,4 @@ export let context;
       <BlockStyles block={child} {context} />
     {/each}
   </svelte:component>
-{/if}
+{/if}

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

@@ -15,25 +15,13 @@ import RenderBlock from "./render-block.svelte";
 export let block;
 export let repeatContext;
 setContext(BuilderContext.key, {
-    get content() {
-        return repeatContext.content;
-    },
-    get state() {
-        return repeatContext.state;
-    },
-    get context() {
-        return repeatContext.context;
-    },
-    get apiKey() {
-        return repeatContext.apiKey;
-    },
-    get registeredComponents() {
-        return repeatContext.registeredComponents;
-    },
-    get inheritedStyles() {
-        return repeatContext.inheritedStyles;
-    },
+    content: repeatContext.content,
+    state: repeatContext.state,
+    context: repeatContext.context,
+    apiKey: repeatContext.apiKey,
+    registeredComponents: repeatContext.registeredComponents,
+    inheritedStyles: repeatContext.inheritedStyles,
 });
 </script>
 
-<RenderBlock {block} context={repeatContext} />
+<RenderBlock {block} context={repeatContext} />

package/package/components/render-blocks.svelte

@@ -81,4 +81,4 @@ $: className = () => {
     flex-direction: column;
     align-items: stretch;
   }
-</style>
+</style>

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

@@ -1,4 +1,4 @@
 <script>"use strict";
 </script>
 
-<div />
+<div />

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

@@ -44,11 +44,11 @@ function getCssFromFont(font) {
 }
 function getFontCss({ customFonts }) {
     // TODO: flag for this
-    // if (!builder.allowCustomFonts) {
+    // if (!this.builder.allowCustomFonts) {
     //   return '';
     // }
     // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+    return (customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || "");
 }
 $: injectedStyles = () => {
     return `
@@ -59,4 +59,4 @@ ${getFontCss({
 };
 </script>
 
-<RenderInlinedStyles styles={injectedStyles()} />
+<RenderInlinedStyles styles={injectedStyles()} />