@builder.io/sdk-svelte 0.2.3 → 0.4.0

package/package/functions/get-processed-block.js

@@ -2,7 +2,7 @@ import { evaluate } from './evaluate.js';
 import { fastClone } from './fast-clone.js';
 import { set } from './set.js';
 import { transformBlock } from './transform-block.js';
-const evaluateBindings = ({ block, context, state, }) => {
+const evaluateBindings = ({ block, context, localState, rootState, rootSetState, }) => {
     if (!block.bindings) {
         return block;
     }
@@ -14,15 +14,27 @@ const evaluateBindings = ({ block, context, state, }) => {
     };
     for (const binding in block.bindings) {
         const expression = block.bindings[binding];
-        const value = evaluate({ code: expression, state, context });
+        const value = evaluate({
+            code: expression,
+            localState,
+            rootState,
+            rootSetState,
+            context,
+        });
         set(copied, binding, value);
     }
     return copied;
 };
-export function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }) {
+export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState, }) {
     const transformedBlock = transformBlock(block);
     if (shouldEvaluateBindings) {
-        return evaluateBindings({ block: transformedBlock, state, context });
+        return evaluateBindings({
+            block: transformedBlock,
+            localState,
+            rootState,
+            rootSetState,
+            context,
+        });
     }
     else {
         return transformedBlock;

package/package/functions/get-processed-block.test.js

@@ -19,7 +19,9 @@ test('Can process bindings', () => {
     const processed = getProcessedBlock({
         block,
         context: {},
-        state: { test: 'hello' },
+        rootState: { test: 'hello' },
+        rootSetState: undefined,
+        localState: undefined,
         shouldEvaluateBindings: true,
     });
     expect(processed).not.toEqual(block);

package/package/helpers/ab-tests.d.ts

@@ -1,8 +1,9 @@
 import type { CanTrack } from '../types/can-track.js';
-export declare const getContentVariationCookie: ({ contentId, canTrack, }: {
-    contentId: string;
-} & CanTrack) => Promise<string | undefined>;
-export declare const setContentVariationCookie: ({ contentId, canTrack, value, }: {
-    contentId: string;
-    value: string;
-} & CanTrack) => Promise<void>;
+import type { BuilderContent } from '../types/builder-content.js';
+import type { Nullable } from '../types/typescript.js';
+export declare const handleABTestingSync: ({ item, canTrack, }: {
+    item: Nullable<BuilderContent>;
+} & CanTrack) => Nullable<BuilderContent>;
+export declare const handleABTesting: ({ item, canTrack, }: {
+    item: BuilderContent;
+} & CanTrack) => Promise<BuilderContent>;

package/package/helpers/ab-tests.js

@@ -1,5 +1,104 @@
-import { getCookie, setCookie } from './cookie.js';
-const BUILDER_STORE_PREFIX = 'builderio.variations';
+import { getCookie, getCookieSync, setCookie } from './cookie.js';
+import { checkIsDefined } from '../helpers/nullable.js';
+import { logger } from './logger.js';
+const BUILDER_STORE_PREFIX = 'builder.tests';
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
-export const getContentVariationCookie = ({ contentId, canTrack, }) => getCookie({ name: getContentTestKey(contentId), canTrack });
-export const setContentVariationCookie = ({ contentId, canTrack, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack });
+const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
+const getContentVariationCookieSync = ({ contentId }) => getCookieSync({ name: getContentTestKey(contentId), canTrack: true });
+const setContentVariationCookie = ({ contentId, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack: true });
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
+    checkIsDefined(item.variations) &&
+    Object.keys(item.variations).length > 0;
+/**
+ * Randomly assign a variation to a user
+ */
+const getRandomVariationId = ({ id, variations, }) => {
+    let n = 0;
+    const random = Math.random();
+    // loop over variations test ratios, incrementing a counter,
+    // until we find the variation that this user should be assigned to
+    for (const id in variations) {
+        const testRatio = variations[id]?.testRatio;
+        n += testRatio;
+        if (random < n) {
+            return id;
+        }
+    }
+    // the variations array does not include the default variation.
+    // if we arrive here, then it means that the random number fits in the default variation bucket.
+    return id;
+};
+const getAndSetVariantId = (args) => {
+    // if variation not found in storage, assign a random variation to this user
+    const randomVariationId = getRandomVariationId(args);
+    // store variation in cookies/storage
+    setContentVariationCookie({
+        contentId: args.id,
+        value: randomVariationId,
+    }).catch((err) => {
+        logger.error('could not store A/B test variation: ', err);
+    });
+    return randomVariationId;
+};
+const getTestFields = ({ item, testGroupId, }) => {
+    const variationValue = item.variations[testGroupId];
+    if (testGroupId === item.id ||
+        // handle edge-case where `testGroupId` points to non-existing variation
+        !variationValue) {
+        return {
+            testVariationId: item.id,
+            testVariationName: 'Default',
+        };
+    }
+    else {
+        return {
+            data: variationValue.data,
+            testVariationId: variationValue.id,
+            testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : ''),
+        };
+    }
+};
+export const handleABTestingSync = ({ item, canTrack, }) => {
+    if (!canTrack) {
+        return item;
+    }
+    if (!item) {
+        return undefined;
+    }
+    if (!checkIsBuilderContentWithVariations(item)) {
+        return item;
+    }
+    const testGroupId = getContentVariationCookieSync({
+        contentId: item.id,
+    }) ||
+        getAndSetVariantId({
+            variations: item.variations,
+            id: item.id,
+        });
+    const variationValue = getTestFields({ item, testGroupId });
+    return {
+        ...item,
+        ...variationValue,
+    };
+};
+export const handleABTesting = async ({ item, canTrack, }) => {
+    if (!canTrack) {
+        return item;
+    }
+    if (!checkIsBuilderContentWithVariations(item)) {
+        return item;
+    }
+    const cookieValue = await getContentVariationCookie({
+        contentId: item.id,
+    });
+    const testGroupId = cookieValue ||
+        getAndSetVariantId({
+            variations: item.variations,
+            id: item.id,
+        });
+    const variationValue = getTestFields({ item, testGroupId });
+    return {
+        ...item,
+        ...variationValue,
+    };
+};

package/package/helpers/canTrack.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultCanTrack: (canTrack?: boolean) => boolean;

package/package/helpers/canTrack.js

@@ -0,0 +1,2 @@
+import { checkIsDefined } from './nullable';
+export const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;

package/package/helpers/cookie.d.ts

@@ -1,10 +1,13 @@
 import type { CanTrack } from '../types/can-track.js';
+type GetCookieArgs = {
+    name: string;
+} & CanTrack;
+export declare const getCookieSync: ({ name, canTrack, }: GetCookieArgs) => string | undefined;
 /**
  * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ * The sync version is only safe to use in code blocks that `react-native` is guaranteed not to not run.
  */
-export declare const getCookie: ({ name, canTrack, }: {
-    name: string;
-} & CanTrack) => Promise<string | undefined>;
+export declare const getCookie: (args: GetCookieArgs) => Promise<string | undefined>;
 /**
  * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
  */
@@ -13,3 +16,4 @@ export declare const setCookie: ({ name, value, expires, canTrack, }: {
     value: string;
     expires?: Date | undefined;
 } & CanTrack) => Promise<void>;
+export {};

package/package/helpers/cookie.js

@@ -1,10 +1,8 @@
 import { isBrowser } from '../functions/is-browser.js';
+import { logger } from './logger.js';
 import { checkIsDefined } from './nullable.js';
 import { getTopLevelDomain } from './url.js';
-/**
- * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
- */
-export const getCookie = async ({ name, canTrack, }) => {
+export const getCookieSync = ({ name, canTrack, }) => {
     try {
         if (!canTrack) {
             return undefined;
@@ -19,10 +17,15 @@ export const getCookie = async ({ name, canTrack, }) => {
             ?.split('=')[1];
     }
     catch (err) {
-        console.debug('[COOKIE] GET error: ', err);
+        logger.warn('[COOKIE] GET error: ', err?.message || err);
         return undefined;
     }
 };
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ * The sync version is only safe to use in code blocks that `react-native` is guaranteed not to not run.
+ */
+export const getCookie = async (args) => getCookieSync(args);
 const stringifyCookie = (cookie) => cookie
     .map(([key, value]) => (value ? `${key}=${value}` : key))
     .filter(checkIsDefined)
@@ -60,6 +63,6 @@ export const setCookie = async ({ name, value, expires, canTrack, }) => {
         document.cookie = cookie;
     }
     catch (err) {
-        console.warn('[COOKIE] SET error: ', err);
+        logger.warn('[COOKIE] SET error: ', err?.message || err);
     }
 };

package/package/helpers/logger.d.ts

@@ -2,4 +2,5 @@ export declare const logger: {
     log: (...message: any[]) => void;
     error: (...message: any[]) => void;
     warn: (...message: any[]) => void;
+    debug: (...message: any[]) => void;
 };

package/package/helpers/logger.js

@@ -3,4 +3,5 @@ export const logger = {
     log: (...message) => console.log(MSG_PREFIX, ...message),
     error: (...message) => console.error(MSG_PREFIX, ...message),
     warn: (...message) => console.warn(MSG_PREFIX, ...message),
+    debug: (...message) => console.debug(MSG_PREFIX, ...message),
 };

package/package/index-helpers/blocks-exports.d.ts

@@ -3,8 +3,8 @@ export { default as Columns } from '../blocks/columns/columns.svelte';
 export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
 export { default as RenderBlocks } from '../components/render-blocks.svelte';
-export { default as RenderContent } from '../components/render-content/render-content.svelte';
 export { default as Section } from '../blocks/section/section.svelte';
 export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
+export { default as RenderContent } from '../components/render-content-variants/render-content-variants.svelte';

package/package/index-helpers/blocks-exports.js

@@ -3,8 +3,8 @@ export { default as Columns } from '../blocks/columns/columns.svelte';
 export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
 export { default as RenderBlocks } from '../components/render-blocks.svelte';
-export { default as RenderContent } from '../components/render-content/render-content.svelte';
 export { default as Section } from '../blocks/section/section.svelte';
 export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
+export { default as RenderContent } from '../components/render-content-variants/render-content-variants.svelte';

package/package/index.d.ts

@@ -1,12 +1,13 @@
 export * from './index-helpers/top-of-file.js';
 export * from './index-helpers/blocks-exports.js';
-export * from './functions/is-editing.js';
-export * from './functions/is-previewing.js';
-export * from './functions/register-component.js';
-export * from './functions/register.js';
-export * from './functions/set-editor-settings.js';
-export * from './functions/get-content/index.js';
-export * from './functions/get-builder-search-params/index.js';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export type { Settings } from './functions/set-editor-settings.js';
+export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
 export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';

package/package/index.js

@@ -1,10 +1,9 @@
 export * from './index-helpers/top-of-file.js';
 export * from './index-helpers/blocks-exports.js';
-export * from './functions/is-editing.js';
-export * from './functions/is-previewing.js';
-export * from './functions/register-component.js';
-export * from './functions/register.js';
-export * from './functions/set-editor-settings.js';
-export * from './functions/get-content/index.js';
-export * from './functions/get-builder-search-params/index.js';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
 export { track } from './functions/track/index.js';

package/package/scripts/init-editing.d.ts

@@ -1,5 +1,6 @@
 export declare const registerInsertMenu: () => void;
 export declare const setupBrowserForEditing: (options?: {
+    enrich?: boolean;
     includeRefs?: boolean;
     locale?: string;
 }) => void;

package/package/scripts/init-editing.js

@@ -1,3 +1,4 @@
+import { SDK_VERSION } from '../constants/sdk-version.js';
 import { TARGET } from '../constants/target.js';
 import { isBrowser } from '../functions/is-browser.js';
 import { register } from '../functions/register.js';
@@ -32,6 +33,7 @@ export const setupBrowserForEditing = (options = {}) => {
             type: 'builder.sdkInfo',
             data: {
                 target: TARGET,
+                version: SDK_VERSION,
                 // TODO: compile these in
                 // type: process.env.SDK_TYPE,
                 // version: process.env.SDK_VERSION,

package/package/types/builder-content.d.ts

@@ -30,8 +30,6 @@ export interface BuilderContentVariation {
 }
 export interface BuilderContent extends BuilderContentVariation {
     '@version'?: number;
-    id?: string;
-    name?: string;
     published?: 'published' | 'draft' | 'archived';
     modelId?: string;
     priority?: number;
@@ -39,7 +37,7 @@ export interface BuilderContent extends BuilderContentVariation {
     startDate?: number;
     endDate?: number;
     variations?: {
-        [id: string]: BuilderContentVariation | undefined;
+        [id: string]: BuilderContentVariation;
     };
     testVariationId?: string;
     testVariationName?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "package",
@@ -28,10 +28,6 @@
   },
   "types": "./package/index.d.ts",
   "scripts": {
-    "release:patch": "yarn run build && npm version patch && npm publish",
-    "release:minor": "yarn run build && npm version minor && npm publish",
-    "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev",
-    "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -39,10 +35,10 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "^1.15.2",
+    "@sveltejs/kit": "^1.16.2",
     "@sveltejs/package": "1.0.0-next.1",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
+    "svelte": "^3.59.1",
+    "svelte-check": "^3.3.2",
     "svelte-preprocess": "^4.10.6",
     "tslib": "^2.3.1",
     "typescript": "^4",

package/src/blocks/columns/columns.svelte

@@ -11,12 +11,8 @@
   export interface ColumnProps {
     columns?: Column[];
     builderBlock: BuilderBlock;
-
-    // TODO: Implement this when support for dynamic CSS lands
     space?: number;
-    // TODO: Implement this when support for dynamic CSS lands
     stackColumnsAt?: StackColumnsAt;
-    // TODO: Implement this when support for dynamic CSS lands
     reverseColumnsWhenStacked?: boolean;
   }
 </script>
@@ -84,7 +80,7 @@
       } as any as Dictionary<string>;
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {

package/src/blocks/symbol/symbol.svelte

@@ -136,7 +136,7 @@
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
-      ...builderContext.state,
+      ...builderContext.localState,
       ...contentToUse?.data?.state,
     }}
     model={symbol?.model}

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

@@ -24,7 +24,9 @@
   $: useBlock = () => {
     return getProcessedBlock({
       block: block,
-      state: context.state,
+      localState: context.localState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
       context: context.context,
       shouldEvaluateBindings: true,
     });

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

@@ -1,7 +1,4 @@
-import type {
-  BuilderContextInterface,
-  BuilderRenderState,
-} from '../../context/types';
+import type { BuilderContextInterface } from '../../context/types';
 import { evaluate } from '../../functions/evaluate';
 import { getProcessedBlock } from '../../functions/get-processed-block';
 import type { BuilderBlock } from '../../types/builder-block';
@@ -44,7 +41,9 @@ export const getComponent = ({
 }) => {
   const componentName = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false,
   }).component?.name;
@@ -85,7 +84,9 @@ export const getRepeatItemData = ({
 
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
   });
 
@@ -100,8 +101,8 @@ export const getRepeatItemData = ({
   const repeatArray = itemsArray.map<RepeatData>((item, index) => ({
     context: {
       ...context,
-      state: {
-        ...context.state,
+      localState: {
+        ...context.localState,
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -113,26 +114,3 @@ export const getRepeatItemData = ({
 
   return repeatArray;
 };
-
-export const getProxyState = (
-  context: BuilderContextInterface
-): BuilderContextInterface['state'] => {
-  if (typeof Proxy === 'undefined') {
-    console.error(
-      'no Proxy available in this environment, cannot proxy state.'
-    );
-    return context.state;
-  }
-
-  const useState = new Proxy(context.state, {
-    set: (obj, prop: keyof BuilderRenderState, value) => {
-      // set the value on the state object, so that the event handler instantly gets the update.
-      obj[prop] = value;
-
-      // set the value in the context, so that the rest of the app gets the update.
-      context.setState?.(obj);
-      return true;
-    },
-  });
-  return useState;
-};

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

@@ -15,7 +15,6 @@
   import BlockStyles from "./block-styles.svelte";
   import {
     getComponent,
-    getProxyState,
     getRepeatItemData,
     isEmptyHtmlElement,
   } from "./render-block.helpers.js";
@@ -47,12 +46,20 @@
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
+  $: repeatItem = () => {
+    return getRepeatItemData({
+      block: block,
+      context: context,
+    });
+  };
   $: useBlock = () => {
-    return repeatItemData
+    return repeatItem()
       ? block
       : getProcessedBlock({
           block: block,
-          state: context.state,
+          localState: context.localState,
+          rootState: context.rootState,
+          rootSetState: context.rootSetState,
           context: context.context,
           shouldEvaluateBindings: true,
         });
@@ -69,7 +76,9 @@
   $: actions = () => {
     return getBlockActions({
       block: useBlock(),
-      state: TARGET === "qwik" ? context.state : proxyState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
+      localState: context.localState,
       context: context.context,
     });
   };
@@ -96,7 +105,7 @@
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component?.component && !repeatItemData;
+      !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   };
   $: childrenContext = () => {
@@ -115,10 +124,11 @@
     return {
       apiKey: context.apiKey,
       apiVersion: context.apiVersion,
-      state: context.state,
+      localState: context.localState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
       content: context.content,
       context: context.context,
-      setState: context.setState,
       registeredComponents: context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };
@@ -150,28 +160,23 @@
     block: block,
     context: context,
   });
-  let repeatItemData = getRepeatItemData({
-    block: block,
-    context: context,
-  });
-  let tag = block.tagName || "div";
-  let proxyState = getProxyState(context);
+  let Tag = block.tagName || "div";
 </script>
 
 {#if canShowBlock()}
   {#if !component?.noWrap}
-    {#if isEmptyHtmlElement(tag)}
-      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()} />
+    {#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) && repeatItem()}
+      {#each repeatItem() as data, index (index)}
         <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
       {/each}
     {/if}
 
-    {#if !isEmptyHtmlElement(tag) && !repeatItemData}
-      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()}>
+    {#if !isEmptyHtmlElement(Tag) && !repeatItem()}
+      <svelte:element this={Tag} {...attributes()} use:setAttrs={actions()}>
         <RenderComponent {...renderComponentProps()} />
 
         {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}

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

@@ -28,8 +28,9 @@
 
   setContext(BuilderContext.key, {
     content: repeatContext.content,
-    state: repeatContext.state,
-    setState: repeatContext.setState,
+    localState: repeatContext.localState,
+    rootState: repeatContext.rootState,
+    rootSetState: repeatContext.rootSetState,
     context: repeatContext.context,
     apiKey: repeatContext.apiKey,
     registeredComponents: repeatContext.registeredComponents,

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

@@ -37,7 +37,7 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`;
+`.trim();
 </script>
 
 <RenderInlinedStyles styles={injectedStyles} />