@builder.io/sdk-svelte 0.4.5 → 0.5.0

package/package/components/{render-content-variants/render-content-variants.svelte → content-variants/content-variants.svelte}

@@ -1,13 +1,13 @@
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers";
-import RenderContent from "../render-content/render-content.svelte";
-import { getDefaultCanTrack } from "../../helpers/canTrack";
+import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
+import ContentComponent from "../content/content.svelte";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import InlinedStyles from "../inlined-styles.svelte";
-import { handleABTestingSync } from "../../helpers/ab-tests";
+import { handleABTestingSync } from "../../helpers/ab-tests.js";
 import InlinedScript from "../inlined-script.svelte";
-import { TARGET } from "../../constants/target";
+import { TARGET } from "../../constants/target.js";
 export let canTrack;
 export let content;
 export let __isNestedRender;
@@ -20,24 +20,25 @@ export let customComponents;
 export let locale;
 export let includeRefs;
 export let enrich;
+$: variantScriptStr = () => {
+    return getVariantsScriptString(getVariants(content).map((value) => ({
+        id: value.testVariationId,
+        testRatio: value.testRatio,
+    })), content?.id || "");
+};
+$: hideVariantsStyleString = () => {
+    return getVariants(content)
+        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+        .join("");
+};
 let shouldRenderVariants = checkShouldRunVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
-let variantScriptStr = getVariantsScriptString(getVariants(content).map((value) => ({
-    id: value.testVariationId,
-    testRatio: value.testRatio,
-})), content?.id || "");
-let hideVariantsStyleString = getVariants(content)
-    .map((value) => `.variant-${value.testVariationId} { display: none; } `)
-    .join("");
 onMount(() => {
     /**
      * We unmount the non-winning variants post-hydration in Vue.
      */
-    if (TARGET === "vue2" || TARGET === "vue3") {
-        shouldRenderVariants = false;
-    }
 });
 </script>
 
@@ -48,13 +49,13 @@ onMount(() => {
 {#if shouldRenderVariants}
   <InlinedStyles
     id={`variants-styles-${content?.id}`}
-    styles={hideVariantsStyleString}
+    styles={hideVariantsStyleString()}
   />
 
-  <InlinedScript scriptStr={variantScriptStr} />
+  <InlinedScript scriptStr={variantScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
-    <RenderContent
+    <ContentComponent
       content={variant}
       showContent={false}
       classNameProp={undefined}
@@ -73,7 +74,7 @@ onMount(() => {
   {/each}
 {/if}
 
-<RenderContent
+<ContentComponent
   {...{}}
   content={shouldRenderVariants
     ? content

package/package/components/{render-content-variants/render-content-variants.svelte.d.ts → content-variants/content-variants.svelte.d.ts}

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-type VariantsProviderProps = RenderContentVariantsProps & {
+type VariantsProviderProps = ContentVariantsProps & {
     /**
      * For internal use only. Do not provide this prop.
      */
     __isNestedRender?: boolean;
 };
-import type { RenderContentVariantsProps } from "./render-content-variants.types";
+import type { ContentVariantsProps } from "./content-variants.types.js";
 declare const __propDef: {
     props: {
         canTrack: VariantsProviderProps["canTrack"];
@@ -26,9 +26,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type RenderContentVariantsProps = typeof __propDef.props;
-export type RenderContentVariantsEvents = typeof __propDef.events;
-export type RenderContentVariantsSlots = typeof __propDef.slots;
-export default class RenderContentVariants extends SvelteComponentTyped<RenderContentVariantsProps, RenderContentVariantsEvents, RenderContentVariantsSlots> {
+export type ContentVariantsProps = typeof __propDef.props;
+export type ContentVariantsEvents = typeof __propDef.events;
+export type ContentVariantsSlots = typeof __propDef.slots;
+export default class ContentVariants extends SvelteComponentTyped<ContentVariantsProps, ContentVariantsEvents, ContentVariantsSlots> {
 }
 export {};

package/package/components/{render-content-variants/render-content-variants.types.d.ts → content-variants/content-variants.types.d.ts}

@@ -1,8 +1,8 @@
-import type { BuilderRenderContext, RegisteredComponent } from '../../context/types';
-import type { ApiVersion } from '../../types/api-version';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-export interface RenderContentVariantsProps {
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types.js';
+import type { ApiVersion } from '../../types/api-version.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+export interface ContentVariantsProps {
     content?: Nullable<BuilderContent>;
     model?: string;
     data?: {

package/package/components/{render-content-variants → content-variants}/helpers.d.ts

@@ -1,13 +1,13 @@
-import type { Nullable } from '../../helpers/nullable';
-import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
 export declare const getVariants: (content: Nullable<BuilderContent>) => {
     testVariationId: string | undefined;
     id: string | undefined;
     data?: {
         [key: string]: any;
         title?: string | undefined;
-        blocks?: import("../../types/builder-block").BuilderBlock[] | undefined;
-        inputs?: import("../../types/input").Input[] | undefined;
+        blocks?: import("../../types/builder-block.js").BuilderBlock[] | undefined;
+        inputs?: import("../../types/input.js").Input[] | undefined;
         state?: {
             [key: string]: any;
         } | undefined;
@@ -21,10 +21,10 @@ export declare const getVariants: (content: Nullable<BuilderContent>) => {
     testRatio?: number | undefined;
     meta?: {
         [key: string]: any;
-        breakpoints?: import("../../types/typescript").Nullable<import("../../types/builder-content").Breakpoints>;
+        breakpoints?: import("../../types/typescript.js").Nullable<import("../../types/builder-content.js").Breakpoints>;
     } | undefined;
 }[];
-export declare const checkShouldRunVariants: ({ canTrack, content, }: {
+export declare const checkShouldRunVariants: ({ canTrack, content }: {
     canTrack: Nullable<boolean>;
     content: Nullable<BuilderContent>;
 }) => boolean;
@@ -34,7 +34,7 @@ type VariantData = {
 };
 export declare const getScriptString: () => string;
 export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
-export declare const getRenderContentScriptString: ({ contentId, variationId, }: {
+export declare const getRenderContentScriptString: ({ contentId, variationId }: {
     variationId: string;
     contentId: string;
 }) => string;

package/package/components/{render-content-variants → content-variants}/helpers.js

@@ -1,11 +1,11 @@
-import { TARGET } from '../../constants/target';
-import { isBrowser } from '../../functions/is-browser';
-export const getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../../functions/is-browser.js';
+export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
     ...variant,
     testVariationId: variant.id,
-    id: content?.id,
+    id: content?.id
 }));
-export const checkShouldRunVariants = ({ canTrack, content, }) => {
+export const checkShouldRunVariants = ({ canTrack, content }) => {
     const hasVariants = getVariants(content).length > 0;
     /**
      * We cannot SSR in React-Native.
@@ -42,13 +42,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
                 date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
                 expires = '; expires=' + date.toUTCString();
             }
-            document.cookie =
-                name +
-                    '=' +
-                    (value || '') +
-                    expires +
-                    '; path=/' +
-                    '; Secure; SameSite=None';
+            document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
         }
         function getCookie(name) {
             const nameEQ = name + '=';
@@ -64,7 +58,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         }
         const cookieName = `builder.tests.${contentId}`;
         const variantInCookie = getCookie(cookieName);
-        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        const availableIDs = variants.map(vr => vr.id).concat(contentId);
         /**
          * cookie already exists
          */
@@ -92,8 +86,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.currentScript
-        ?.previousElementSibling;
+    const styleEl = document.currentScript?.previousElementSibling;
     /**
      * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
      */
@@ -104,14 +97,12 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
     }
     else {
         /* update styles to hide all variants except the winning variant */
-        const newStyleStr = variants
-            .concat({ id: contentId })
-            .filter((variant) => variant.id !== winningVariantId)
-            .map((value) => {
+        const newStyleStr = variants.concat({
+            id: contentId
+        }).filter(variant => variant.id !== winningVariantId).map(value => {
             return `.variant-${value.id} {  display: none; }
         `;
-        })
-            .join('');
+        }).join('');
         styleEl.innerHTML = newStyleStr;
     }
 }
@@ -192,7 +183,7 @@ export const getVariantsScriptString = (variants, contentId) => {
     return `
   window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
 };
-export const getRenderContentScriptString = ({ contentId, variationId, }) => {
+export const getRenderContentScriptString = ({ contentId, variationId }) => {
     return `
   window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };

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

@@ -24,16 +24,37 @@ import { componentInfo as customCodeInfo } from '../blocks/custom-code/component
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
  */
-export const getDefaultRegisteredComponents = () => [
-    { component: Button, ...buttonComponentInfo },
-    { component: Columns, ...columnsComponentInfo },
-    { component: customCode, ...customCodeInfo },
-    { component: embed, ...embedComponentInfo },
-    { component: Fragment, ...fragmentComponentInfo },
-    { component: Image, ...imageComponentInfo },
-    { component: Img, ...imgComponentInfo },
-    { component: Section, ...sectionComponentInfo },
-    { component: Symbol, ...symbolComponentInfo },
-    { component: Text, ...textComponentInfo },
-    { component: Video, ...videoComponentInfo },
-];
+export const getDefaultRegisteredComponents = () => [{
+        component: Button,
+        ...buttonComponentInfo
+    }, {
+        component: Columns,
+        ...columnsComponentInfo
+    }, {
+        component: customCode,
+        ...customCodeInfo
+    }, {
+        component: embed,
+        ...embedComponentInfo
+    }, {
+        component: Fragment,
+        ...fragmentComponentInfo
+    }, {
+        component: Image,
+        ...imageComponentInfo
+    }, {
+        component: Img,
+        ...imgComponentInfo
+    }, {
+        component: Section,
+        ...sectionComponentInfo
+    }, {
+        component: Symbol,
+        ...symbolComponentInfo
+    }, {
+        component: Text,
+        ...textComponentInfo
+    }, {
+        component: Video,
+        ...videoComponentInfo
+    }];

package/package/constants/device-sizes.js

@@ -1,20 +1,20 @@
-import { fastClone } from '../functions/fast-clone';
+import { fastClone } from '../functions/fast-clone.js';
 const SIZES = {
     small: {
         min: 320,
         default: 321,
-        max: 640,
+        max: 640
     },
     medium: {
         min: 641,
         default: 642,
-        max: 991,
+        max: 991
     },
     large: {
         min: 990,
         default: 991,
-        max: 1200,
-    },
+        max: 1200
+    }
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 export const getSizesForBreakpoints = ({ small, medium }) => {
@@ -26,19 +26,20 @@ export const getSizesForBreakpoints = ({ small, medium }) => {
     newSizes.small = {
         max: small,
         min: smallMin,
-        default: smallMin + 1,
+        default: smallMin + 1
     };
     const mediumMin = newSizes.small.max + 1;
     newSizes.medium = {
         max: medium,
         min: mediumMin,
-        default: mediumMin + 1,
+        default: mediumMin + 1
     };
     const largeMin = newSizes.medium.max + 1;
     newSizes.large = {
         max: 2000,
+        // TODO: decide upper limit
         min: largeMin,
-        default: largeMin + 1,
+        default: largeMin + 1
     };
     return newSizes;
 };

package/package/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.5";
+export declare const SDK_VERSION = "0.5.0";

package/package/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.5";
+export const SDK_VERSION = "0.5.0";

package/package/constants/target.d.ts

@@ -1,2 +1,2 @@
 /** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
-export declare const TARGET = "svelte";
+export declare const TARGET: import("../types/targets").Target;

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

@@ -7,7 +7,7 @@ declare const _default: {
         rootState: {};
         apiKey: null;
         apiVersion: undefined;
-        registeredComponents: {};
+        componentInfos: {};
         inheritedStyles: {};
     }>;
     key: symbol;

package/package/context/builder.context.js

@@ -9,7 +9,7 @@ export default {
         rootState: {},
         apiKey: null,
         apiVersion: undefined,
-        registeredComponents: {},
+        componentInfos: {},
         inheritedStyles: {},
     }),
     key,

package/package/context/types.d.ts

@@ -30,6 +30,6 @@ export interface BuilderContextInterface {
     localState: BuilderRenderState | undefined;
     apiKey: string | null;
     apiVersion: ApiVersion | undefined;
-    registeredComponents: RegisteredComponents;
+    componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
 }

package/package/functions/apply-patch-with-mutation.d.ts

@@ -0,0 +1,10 @@
+export type Patch = {
+    path: string;
+    op: 'add' | 'remove' | 'replace';
+    value: any;
+};
+export declare const applyPatchWithMinimalMutationChain: <T extends object>(obj: T, patch: {
+    path: string;
+    op: 'add' | 'remove' | 'replace';
+    value: any;
+}, preserveRoot?: boolean) => T;

package/package/functions/apply-patch-with-mutation.js

@@ -0,0 +1,54 @@
+export const applyPatchWithMinimalMutationChain = (obj, patch, preserveRoot = false) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const { path, op, value } = patch;
+    const pathArr = path.split(/\//);
+    if (pathArr[0] === '') {
+        pathArr.shift();
+    }
+    const newObj = preserveRoot ? obj : {
+        ...obj
+    };
+    let objPart = newObj;
+    for (let i = 0; i < pathArr.length; i++) {
+        const isLast = i === pathArr.length - 1;
+        const property = pathArr[i];
+        if (isLast) {
+            if (op === 'replace') {
+                objPart[property] = value;
+            }
+            else if (op === 'add') {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    if (property === '-') {
+                        objPart.push(value);
+                    }
+                    else {
+                        objPart.splice(index, 0, value);
+                    }
+                }
+                else {
+                    objPart[property] = value;
+                }
+            }
+            else if (op === 'remove') {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    objPart.splice(index, 1);
+                }
+                else {
+                    delete objPart[property];
+                }
+            }
+        }
+        else {
+            const nextProperty = pathArr[i + 1];
+            const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+            objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : {
+                ...newPart
+            };
+        }
+    }
+    return newObj;
+};