@builder.io/sdk-svelte 0.1.4 → 0.1.5

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "package",
@@ -72,9 +72,12 @@
     "./components/render-block/types": "./components/render-block/types.js",
     "./components/render-blocks.svelte": "./components/render-blocks.svelte",
     "./components/render-content/builder-editing.svelte": "./components/render-content/builder-editing.svelte",
+    "./components/render-content/components/render-styles.helpers": "./components/render-content/components/render-styles.helpers.js",
     "./components/render-content/components/render-styles.svelte": "./components/render-content/components/render-styles.svelte",
     "./components/render-content": "./components/render-content/index.js",
+    "./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-inlined-styles.svelte": "./components/render-inlined-styles.svelte",
     "./constants/builder-registered-components": "./constants/builder-registered-components.js",
     "./constants/device-sizes": "./constants/device-sizes.js",
@@ -142,6 +145,7 @@
     "./types/components": "./types/components.js",
     "./types/deep-partial": "./types/deep-partial.js",
     "./types/element": "./types/element.js",
+    "./types/input": "./types/input.js",
     "./types/targets": "./types/targets.js",
     "./types/typescript": "./types/typescript.js"
   },

package/package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 0.1.5
+
+- Feature: Global CSS Nesting (`&` operator) support
+
+### 0.1.4
+
+No Changes.
+
 ### 0.1.3
 
 - Support Heatmaps

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

@@ -26,7 +26,7 @@ export const isEmptyHtmlElement = (tagName) => {
 };
 export const getComponent = ({ block, context, }) => {
     const componentName = getProcessedBlock({
-        block: block,
+        block,
         state: context.state,
         context: context.context,
         shouldEvaluateBindings: false,

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

@@ -43,10 +43,26 @@ $: useBlock = () => {
             shouldEvaluateBindings: true,
         });
 };
+$: proxyState = () => {
+    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;
+};
 $: actions = () => {
     return getBlockActions({
         block: useBlock(),
-        state: context.state,
+        state: proxyState(),
         context: context.context,
     });
 };
@@ -114,6 +130,7 @@ $: childrenContext = () => {
         state: context.state,
         content: context.content,
         context: context.context,
+        setState: context.setState,
         registeredComponents: context.registeredComponents,
         inheritedStyles: getInheritedTextStyles(),
     };

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

@@ -2,9 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import type { BuilderBlock } from "../../types/builder-block.js";
 import type { BuilderContextInterface } from "../../context/types.js";
 import type { Breakpoints } from "../../types/builder-content.js";
+declare type ComponentOptions = {
+    [index: string]: any;
+    customBreakpoints?: Breakpoints;
+    attributes?: {
+        [index: string]: any;
+    };
+};
 export interface RenderComponentProps {
     componentRef: any;
-    componentOptions: any;
+    componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
     customBreakpoints?: Breakpoints;

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

@@ -17,6 +17,7 @@ export let repeatContext;
 setContext(BuilderContext.key, {
     content: repeatContext.content,
     state: repeatContext.state,
+    setState: repeatContext.setState,
     context: repeatContext.context,
     apiKey: repeatContext.apiKey,
     registeredComponents: repeatContext.registeredComponents,

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

@@ -0,0 +1,15 @@
+export interface CustomFont {
+    family?: string;
+    kind?: string;
+    fileUrl?: string;
+    files?: {
+        [key: string]: string;
+    };
+}
+export declare const getFontCss: ({ customFonts }: {
+    customFonts?: CustomFont[] | undefined;
+}) => string;
+export declare const getCss: ({ cssCode, contentId, }: {
+    cssCode?: string | undefined;
+    contentId?: string | undefined;
+}) => string;

package/package/components/render-content/components/render-styles.helpers.js

@@ -0,0 +1,59 @@
+const getCssFromFont = (font) => {
+    // TODO: compute what font sizes are used and only load those.......
+    const family = font.family +
+        (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+    const name = family.split(',')[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = '';
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            // TODO: maybe limit number loaded
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+export const getFontCss = ({ customFonts }) => {
+    // TODO: flag for this
+    // if (!this.builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+};
+export const getCss = ({ cssCode, contentId, }) => {
+    if (!cssCode) {
+        return '';
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    // Allow using `&` in custom CSS code like @emotion
+    // E.g. `& .foobar { ... }` to scope CSS
+    // TODO: handle if '&' is within a string like `content: "&"`
+    return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};

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

@@ -1,62 +1,20 @@
 <script context="module"></script>
 
 <script>import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
 export let cssCode;
+export let contentId;
 export let customFonts;
-function getCssFromFont(font) {
-    // TODO: compute what font sizes are used and only load those.......
-    const family = font.family +
-        (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
-    const url = font.fileUrl ?? font?.files?.regular;
-    let str = "";
-    if (url && family && name) {
-        str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-    }
-    if (font.files) {
-        for (const weight in font.files) {
-            const isNumber = String(Number(weight)) === weight;
-            if (!isNumber) {
-                continue;
-            }
-            // TODO: maybe limit number loaded
-            const weightUrl = font.files[weight];
-            if (weightUrl && weightUrl !== url) {
-                str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-            }
-        }
-    }
-    return str;
-}
-function getFontCss({ customFonts }) {
-    // TODO: flag for this
-    // if (!this.builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return (customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || "");
-}
-$: injectedStyles = () => {
-    return `
-${cssCode || ""}
+let injectedStyles = `
+${getCss({
+    cssCode: cssCode,
+    contentId: contentId,
+})}
 ${getFontCss({
-        customFonts: customFonts,
-    })}`;
-};
+    customFonts: customFonts,
+})}
+`;
 </script>
 
-<RenderInlinedStyles styles={injectedStyles()} />
+<RenderInlinedStyles styles={injectedStyles} />

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

@@ -1,19 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-interface CustomFont {
-    family?: string;
-    kind?: string;
-    fileUrl?: string;
-    files?: {
-        [key: string]: string;
-    };
-}
+import type { CustomFont } from "./render-styles.helpers";
 interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
+    contentId?: string;
 }
 declare const __propDef: {
     props: {
         cssCode: Props["cssCode"];
+        contentId: Props["contentId"];
         customFonts: Props["customFonts"];
     };
     events: {

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

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { RenderContentProps } from './render-content.types';
+export declare const getContextStateInitialValue: ({ content, data, locale, }: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data, }: Pick<RenderContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

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

@@ -0,0 +1,30 @@
+export const getContextStateInitialValue = ({ content, data, locale, }) => {
+    const defaultValues = {};
+    // set default values for content state inputs
+    content?.data?.inputs?.forEach((input) => {
+        if (input.name &&
+            input.defaultValue !== undefined &&
+            content?.data?.state &&
+            content.data.state[input.name] === undefined) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = {
+        ...content?.data?.state,
+        ...data,
+        ...(locale ? { locale } : {}),
+    };
+    return { ...defaultValues, ...stateToUse };
+};
+export const getContentInitialValue = ({ content, data, }) => {
+    return !content
+        ? undefined
+        : {
+            ...content,
+            data: {
+                ...content?.data,
+                ...data,
+            },
+            meta: content?.meta,
+        };
+};

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

@@ -17,32 +17,43 @@ import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 export let content;
 export let data;
 export let canTrack;
 export let locale;
-export let context;
 export let customComponents;
 export let model;
+export let context;
 export let apiKey;
 export let includeRefs;
-setContext(builderContext.key, {
-    get content() {
-        return useContent();
-    },
-    get state() {
-        return contentState();
-    },
-    get context() {
-        return contextContext;
-    },
-    get apiKey() {
-        return apiKey;
-    },
-    get registeredComponents() {
-        return allRegisteredComponents;
-    },
-});
+function mergeNewContent(newContent) {
+    useContent = {
+        ...useContent,
+        ...newContent,
+        data: {
+            ...useContent?.data,
+            ...newContent?.data,
+        },
+        meta: {
+            ...useContent?.meta,
+            ...newContent?.meta,
+            breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+        },
+    };
+}
+function setBreakpoints(breakpoints) {
+    useContent = {
+        ...useContent,
+        meta: {
+            ...useContent?.meta,
+            breakpoints,
+        },
+    };
+}
+function setContextState(newState) {
+    contentState = newState;
+}
 function processMessage(event) {
     const { data } = event;
     if (data) {
@@ -50,10 +61,12 @@ function processMessage(event) {
             case "builder.configureSdk": {
                 const messageContent = data.data;
                 const { breakpoints, contentId } = messageContent;
-                if (!contentId || contentId !== useContent?.()?.id) {
+                if (!contentId || contentId !== useContent?.id) {
                     return;
                 }
-                useBreakpoints = breakpoints;
+                if (breakpoints) {
+                    setBreakpoints(breakpoints);
+                }
                 forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 break;
             }
@@ -65,7 +78,7 @@ function processMessage(event) {
                     messageContent.modelName;
                 const contentData = messageContent.data;
                 if (key === model) {
-                    overrideContent = contentData;
+                    mergeNewContent(contentData);
                     forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
                 break;
@@ -79,19 +92,19 @@ function processMessage(event) {
 }
 function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = useContent?.()?.data?.jsCode;
+    const jsCode = useContent?.data?.jsCode;
     if (jsCode) {
         evaluate({
             code: jsCode,
-            context: contextContext,
-            state: contentState(),
+            context: context || {},
+            state: contentState,
         });
     }
 }
 function onClick(event) {
-    if (useContent()) {
-        const variationId = useContent?.()?.testVariationId;
-        const contentId = useContent?.()?.id;
+    if (useContent) {
+        const variationId = useContent?.testVariationId;
+        const contentId = useContent?.id;
         _track({
             type: "click",
             canTrack: canTrackToUse,
@@ -109,26 +122,26 @@ function onClick(event) {
 function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
-        context: contextContext,
-        state: contentState(),
+        context: context || {},
+        state: contentState,
     }));
 }
 function handleRequest({ url, key }) {
     fetch(url)
         .then((response) => response.json())
         .then((json) => {
-        const newOverrideState = {
-            ...overrideState,
+        const newState = {
+            ...contentState,
             [key]: json,
         };
-        overrideState = newOverrideState;
+        setContextState(newState);
     })
         .catch((err) => {
         console.log("error fetching dynamic data", url, err);
     });
 }
 function runHttpRequests() {
-    const requests = useContent?.()?.data?.httpRequests ?? {};
+    const requests = useContent?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
         if (url && (!httpReqsData[key] || isEditing())) {
             const evaluatedUrl = evalExpression(url);
@@ -143,7 +156,7 @@ function emitStateUpdate() {
     if (isEditing()) {
         window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
             detail: {
-                state: contentState(),
+                state: contentState,
                 ref: {
                     name: model,
                 },
@@ -151,52 +164,24 @@ function emitStateUpdate() {
         }));
     }
 }
-$: useContent = () => {
-    if (!content && !overrideContent) {
-        return undefined;
-    }
-    return {
-        ...content,
-        ...overrideContent,
-        data: {
-            ...content?.data,
-            ...data,
-            ...overrideContent?.data,
-        },
-        meta: {
-            ...content?.meta,
-            ...overrideContent?.meta,
-            breakpoints: useBreakpoints ||
-                overrideContent?.meta?.breakpoints ||
-                content?.meta?.breakpoints,
-        },
-    };
-};
-$: contentState = () => {
-    return {
-        ...content?.data?.state,
-        ...data,
-        ...(locale
-            ? {
-                locale: locale,
-            }
-            : {}),
-        ...overrideState,
-    };
-};
 $: shouldRenderContentStyles = () => {
-    return Boolean((useContent?.()?.data?.cssCode ||
-        useContent?.()?.data?.customFonts?.length) &&
+    return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
         TARGET !== "reactNative");
 };
 let elementRef;
 let forceReRenderCount = 0;
 let overrideContent = null;
+let useContent = getContentInitialValue({
+    content: content,
+    data: data,
+});
 let update = 0;
-let useBreakpoints = null;
 let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
-let overrideState = {};
-let contextContext = context || {};
+let contentState = getContextStateInitialValue({
+    content: content,
+    data: data,
+    locale: locale,
+});
 let allRegisteredComponents = [
     ...getDefaultRegisteredComponents(),
     // While this `components` object is deprecated, we must maintain support for it.
@@ -239,9 +224,9 @@ onMount(() => {
             window.addEventListener("message", processMessage);
             window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
         }
-        if (useContent()) {
-            const variationId = useContent?.()?.testVariationId;
-            const contentId = useContent?.()?.id;
+        if (useContent) {
+            const variationId = useContent?.testVariationId;
+            const contentId = useContent?.id;
             _track({
                 type: "impression",
                 canTrack: canTrackToUse,
@@ -272,7 +257,7 @@ onMount(() => {
                     apiKey: apiKey,
                 }).then((content) => {
                     if (content) {
-                        overrideContent = content;
+                        mergeNewContent(content);
                     }
                 });
             }
@@ -285,15 +270,35 @@ onMount(() => {
 function onUpdateFn_0() {
     evaluateJsCode();
 }
-$: onUpdateFn_0(...[useContent?.()?.data?.jsCode, contentState()]);
+$: onUpdateFn_0(...[useContent?.data?.jsCode, contentState]);
 function onUpdateFn_1() {
     runHttpRequests();
 }
-$: onUpdateFn_1(...[useContent?.()?.data?.httpRequests]);
+$: onUpdateFn_1(...[useContent?.data?.httpRequests]);
 function onUpdateFn_2() {
     emitStateUpdate();
 }
-$: onUpdateFn_2(...[contentState()]);
+$: onUpdateFn_2(...[contentState]);
+setContext(builderContext.key, {
+    get content() {
+        return useContent;
+    },
+    get state() {
+        return contentState;
+    },
+    get setState() {
+        return setContextState;
+    },
+    get context() {
+        return context || {};
+    },
+    get apiKey() {
+        return apiKey;
+    },
+    get registeredComponents() {
+        return allRegisteredComponents;
+    },
+});
 onDestroy(() => {
     if (isBrowser()) {
         window.removeEventListener("message", processMessage);
@@ -302,24 +307,22 @@ onDestroy(() => {
 });
 </script>
 
-{#if useContent()}
+{#if useContent}
   <div
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);
     }}
-    builder-content-id={useContent?.()?.id}
+    builder-content-id={useContent?.id}
     builder-model={model}
   >
     {#if shouldRenderContentStyles()}
       <RenderContentStyles
-        cssCode={useContent?.()?.data?.cssCode}
-        customFonts={useContent?.()?.data?.customFonts}
+        contentId={useContent?.id}
+        cssCode={useContent?.data?.cssCode}
+        customFonts={useContent?.data?.customFonts}
       />
     {/if}
-    <RenderBlocks
-      blocks={useContent?.()?.data?.blocks}
-      key={forceReRenderCount}
-    />
+    <RenderBlocks blocks={useContent?.data?.blocks} key={forceReRenderCount} />
   </div>
 {/if}

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

@@ -1,29 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
-import type { BuilderContent } from "../../types/builder-content.js";
-import type { Nullable } from "../../types/typescript.js";
-export declare type RenderContentProps = {
-    content?: Nullable<BuilderContent>;
-    model?: string;
-    data?: {
-        [key: string]: any;
-    };
-    context?: BuilderRenderContext;
-    apiKey: string;
-    customComponents?: RegisteredComponent[];
-    canTrack?: boolean;
-    locale?: string;
-    includeRefs?: boolean;
-};
+import type { RenderContentProps } from "./render-content.types.js";
 declare const __propDef: {
     props: {
         content: RenderContentProps["content"];
         data: RenderContentProps["data"];
         canTrack: RenderContentProps["canTrack"];
         locale: RenderContentProps["locale"];
-        context: RenderContentProps["context"];
         customComponents: RenderContentProps["customComponents"];
         model: RenderContentProps["model"];
+        context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
         includeRefs: RenderContentProps["includeRefs"];
     };