@builder.io/sdk-svelte 0.2.3 → 0.4.0

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "package",
@@ -78,13 +78,18 @@
     "./components/render-content/render-content.helpers": "./components/render-content/render-content.helpers.js",
     "./components/render-content/render-content.svelte": "./components/render-content/render-content.svelte",
     "./components/render-content/render-content.types": "./components/render-content/render-content.types.js",
+    "./components/render-content/wrap-component-ref": "./components/render-content/wrap-component-ref.js",
+    "./components/render-content-variants/helpers": "./components/render-content-variants/helpers.js",
+    "./components/render-content-variants/render-content-variants.svelte": "./components/render-content-variants/render-content-variants.svelte",
     "./components/render-inlined-styles.svelte": "./components/render-inlined-styles.svelte",
     "./constants/builder-registered-components": "./constants/builder-registered-components.js",
     "./constants/device-sizes": "./constants/device-sizes.js",
+    "./constants/sdk-version": "./constants/sdk-version.js",
     "./constants/target": "./constants/target.js",
     "./context/builder.context": "./context/builder.context.js",
     "./context/types": "./context/types.js",
     "./functions/camel-to-kebab-case": "./functions/camel-to-kebab-case.js",
+    "./functions/evaluate.test": "./functions/evaluate.test.js",
     "./functions/evaluate": "./functions/evaluate.js",
     "./functions/event-handler-name": "./functions/event-handler-name.js",
     "./functions/extract-text-styles": "./functions/extract-text-styles.js",
@@ -95,7 +100,6 @@
     "./functions/get-block-properties": "./functions/get-block-properties.js",
     "./functions/get-builder-search-params/fn.test": "./functions/get-builder-search-params/fn.test.js",
     "./functions/get-builder-search-params": "./functions/get-builder-search-params/index.js",
-    "./functions/get-content/ab-testing": "./functions/get-content/ab-testing.js",
     "./functions/get-content/generate-content-url.test": "./functions/get-content/generate-content-url.test.js",
     "./functions/get-content/generate-content-url": "./functions/get-content/generate-content-url.js",
     "./functions/get-content": "./functions/get-content/index.js",
@@ -124,6 +128,7 @@
     "./functions/transform-block-properties": "./functions/transform-block-properties.js",
     "./functions/transform-block": "./functions/transform-block.js",
     "./helpers/ab-tests": "./helpers/ab-tests.js",
+    "./helpers/canTrack": "./helpers/canTrack.js",
     "./helpers/cookie": "./helpers/cookie.js",
     "./helpers/css": "./helpers/css.js",
     "./helpers/flatten": "./helpers/flatten.js",
@@ -153,10 +158,10 @@
   "types": "./package/index.d.ts",
   "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/package/CHANGELOG.md

@@ -1,3 +1,20 @@
+### 0.4.0
+
+- Feature: A/B tests are now rendered correctly during server-side rendering (SSR) when applicable. This behaviour is backwards compatible with previous versions.
+
+### 0.3.1
+
+- Feature: Added SDK version to data sent to visual editor for improved debugging.
+- Fix: Columns block: removed redundant margin-left in first column.
+
+### 0.3.0
+
+- No Changes.
+
+### 0.2.3
+
+- No Changes.
+
 ### 0.2.2
 
 - Fix: dynamic bindings for Link URLs.

package/package/blocks/columns/columns.svelte

@@ -43,7 +43,7 @@ function columnCssVars(index) {
         };
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {

package/package/blocks/symbol/symbol.svelte

@@ -104,7 +104,7 @@ $: onUpdateFn_0(...[symbol]);
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
-      ...builderContext.state,
+      ...builderContext.localState,
       ...contentToUse?.data?.state,
     }}
     model={symbol?.model}

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

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

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

@@ -10,4 +10,3 @@ export declare const getRepeatItemData: ({ block, context, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => RepeatData[] | undefined;
-export declare const getProxyState: (context: BuilderContextInterface) => BuilderContextInterface['state'];

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

@@ -27,7 +27,9 @@ export const isEmptyHtmlElement = (tagName) => {
 export const getComponent = ({ block, context, }) => {
     const componentName = getProcessedBlock({
         block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: false,
     }).component?.name;
@@ -57,7 +59,9 @@ export const getRepeatItemData = ({ block, context, }) => {
     }
     const itemsArray = evaluate({
         code: repeat.collection,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
     });
     if (!Array.isArray(itemsArray)) {
@@ -68,8 +72,8 @@ export const getRepeatItemData = ({ block, context, }) => {
     const repeatArray = itemsArray.map((item, index) => ({
         context: {
             ...context,
-            state: {
-                ...context.state,
+            localState: {
+                ...context.localState,
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
@@ -80,19 +84,3 @@ export const getRepeatItemData = ({ block, context, }) => {
     }));
     return repeatArray;
 };
-export const getProxyState = (context) => {
-    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, 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/package/components/render-block/render-block.svelte

@@ -5,7 +5,7 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.svelte";
-import { getComponent, getProxyState, getRepeatItemData, 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";
@@ -29,12 +29,20 @@ const setAttrs = (node, attrs = {}) => {
 };
 export let block;
 export let 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,
         });
@@ -51,7 +59,9 @@ $: canShowBlock = () => {
 $: actions = () => {
     return getBlockActions({
         block: useBlock(),
-        state: TARGET === "qwik" ? context.state : proxyState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        localState: context.localState,
         context: context.context,
     });
 };
@@ -77,7 +87,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 = !component?.component && !repeatItemData;
+    const shouldRenderChildrenOutsideRef = !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
 };
 $: childrenContext = () => {
@@ -94,10 +104,11 @@ $: childrenContext = () => {
     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(),
     };
@@ -128,28 +139,23 @@ let component = getComponent({
     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/package/components/render-block/render-repeated-block.svelte

@@ -16,8 +16,9 @@ export let block;
 export let repeatContext;
 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/package/components/render-content/components/render-styles.svelte

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

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

@@ -17,6 +17,35 @@ import { getInteractionPropertiesForEvent } from "../../functions/track/interact
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
 import { logger } from "../../helpers/logger.js";
+import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
+import { wrapComponentRef } from "./wrap-component-ref.js";
+const isEvent = (attr) => attr.startsWith("on:");
+const isNonEvent = (attr) => !attr.startsWith("on:");
+const filterAttrs = (attrs = {}, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+        if (filter(attr)) {
+            validAttr[attr] = attrs[attr];
+        }
+    });
+    return validAttr;
+};
+const setAttrs = (node, attrs = {}) => {
+    const attrKeys = Object.keys(attrs);
+    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
+    const teardown = (attr) => node.removeEventListener(attr.substr(3), attrs[attr]);
+    attrKeys.map(setup);
+    return {
+        update(attrs = {}) {
+            const attrKeys = Object.keys(attrs);
+            attrKeys.map(teardown);
+            attrKeys.map(setup);
+        },
+        destroy() {
+            attrKeys.map(teardown);
+        },
+    };
+};
 export let content;
 export let data;
 export let canTrack;
@@ -25,7 +54,12 @@ export let customComponents;
 export let model;
 export let context;
 export let apiKey;
+export let parentContentId;
+export let hideContent;
+export let classNameProp;
+export let isSsrAbTest;
 export let includeRefs;
+export let enrich;
 export let apiVersion;
 function mergeNewContent(newContent) {
     useContent = {
@@ -51,8 +85,8 @@ function setBreakpoints(breakpoints) {
         },
     };
 }
-function setContextState(newState) {
-    contentState = newState;
+function contentSetState(newRootState) {
+    contentState = newRootState;
 }
 function processMessage(event) {
     const { data } = event;
@@ -97,7 +131,9 @@ function evaluateJsCode() {
         evaluate({
             code: jsCode,
             context: context || {},
-            state: contentState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: contentSetState,
         });
     }
 }
@@ -123,7 +159,9 @@ function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
     }));
 }
 function handleRequest({ url, key }) {
@@ -134,7 +172,7 @@ function handleRequest({ url, key }) {
             ...contentState,
             [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
     })
         .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -187,12 +225,20 @@ let allRegisteredComponents = [
     // which is the new standard way of providing custom components, and must therefore take precedence.
     ...components,
     ...(customComponents || []),
-].reduce((acc, curr) => ({
+].reduce((acc, { component, ...curr }) => ({
     ...acc,
-    [curr.name]: curr,
+    [curr.name]: {
+        component: TARGET === "vue3" ? wrapComponentRef(component) : component,
+        ...curr,
+    },
 }), {});
 let httpReqsData = {};
 let clicked = false;
+let scriptStr = getRenderContentScriptString({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    contentId: content?.id,
+    parentContentId: parentContentId,
+});
 onMount(() => {
     if (!apiKey) {
         logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -212,6 +258,11 @@ onMount(() => {
                         includeRefs: includeRefs,
                     }
                     : {}),
+                ...(enrich
+                    ? {
+                        enrich: enrich,
+                    }
+                    : {}),
             });
             Object.values(allRegisteredComponents).forEach((registeredComponent) => {
                 const message = createRegisterComponentMessage(registeredComponent);
@@ -287,11 +338,14 @@ setContext(builderContext.key, {
     get content() {
         return useContent;
     },
-    get state() {
+    get localState() {
+        return undefined;
+    },
+    get rootState() {
         return contentState;
     },
-    get setState() {
-        return setContextState;
+    get rootSetState() {
+        return TARGET === "qwik" ? undefined : contentSetState;
     },
     get context() {
         return context || {};
@@ -325,7 +379,42 @@ onDestroy(() => {
     }}
     builder-content-id={useContent?.id}
     builder-model={model}
+    {...filterAttrs(
+      TARGET === "reactNative"
+        ? {
+            dataSet: {
+              // currently, we can't set the actual ID here.
+              // we don't need it right now, we just need to identify content divs for testing.
+              "builder-content-id": "",
+            },
+          }
+        : {},
+      isNonEvent
+    )}
+    {...hideContent
+      ? {
+          hidden: true,
+          "aria-hidden": true,
+        }
+      : {}}
+    class={classNameProp}
+    use:setAttrs={filterAttrs(
+      TARGET === "reactNative"
+        ? {
+            dataSet: {
+              // currently, we can't set the actual ID here.
+              // we don't need it right now, we just need to identify content divs for testing.
+              "builder-content-id": "",
+            },
+          }
+        : {},
+      isEvent
+    )}
   >
+    {#if isSsrAbTest}
+      <svelte:element this={"script"}>{@html scriptStr}</svelte:element>
+    {/if}
+
     {#if TARGET !== "reactNative"}
       <RenderContentStyles
         contentId={useContent?.id}

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

@@ -10,7 +10,12 @@ declare const __propDef: {
         model: RenderContentProps["model"];
         context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
+        parentContentId: RenderContentProps["parentContentId"];
+        hideContent: RenderContentProps["hideContent"];
+        classNameProp: RenderContentProps["classNameProp"];
+        isSsrAbTest: RenderContentProps["isSsrAbTest"];
         includeRefs: RenderContentProps["includeRefs"];
+        enrich: RenderContentProps["enrich"];
         apiVersion: RenderContentProps["apiVersion"];
     };
     events: {

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

@@ -2,7 +2,7 @@ import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } fr
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
 import type { ApiVersion } from '../../types/api-version';
-export type RenderContentProps = {
+export interface RenderContentProps {
     content?: Nullable<BuilderContent>;
     model?: string;
     data?: {
@@ -14,8 +14,17 @@ export type RenderContentProps = {
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
     locale?: string;
+    /** @deprecated use `enrich` instead **/
     includeRefs?: boolean;
-};
+    enrich?: boolean;
+    /**
+     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
+     */
+    classNameProp?: string;
+    hideContent?: boolean;
+    parentContentId?: string;
+    isSsrAbTest?: boolean;
+}
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {

package/package/components/render-content/wrap-component-ref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export declare const wrapComponentRef: (component: any) => any;

package/package/components/render-content/wrap-component-ref.js

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component) => component;

package/package/components/render-content-variants/helpers.d.ts

@@ -0,0 +1,17 @@
+import type { Nullable } from '../../helpers/nullable';
+import type { BuilderContent } from '../../types/builder-content';
+export declare const getVariants: (content: Nullable<BuilderContent>) => import("../../types/builder-content").BuilderContentVariation[];
+export declare const checkShouldRunVariants: ({ canTrack, content, }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ parentContentId, contentId, }: {
+    contentId: string;
+    parentContentId: string;
+}) => string;
+export {};