@builder.io/sdk-svelte 0.1.3 → 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-1",
+  "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,9 +1,22 @@
-### 0.1.1
+### 0.1.5
+
+- Feature: Global CSS Nesting (`&` operator) support
+
+### 0.1.4
+
+No Changes.
+
+### 0.1.3
+
+- Support Heatmaps
+- Support Insights data filtering by URL & Device
+
+### 0.1.2
 
 - Fix: respect when `canTrack` is set to `false`
 - Fix: issues sending session and visitor IDs with tracking events
 
-### 0.1.0
+### 0.1.1
 
 🧨 Breaking change: we no longer provide a `node-fetch` polyfill. See [the docs](./README.md#fetch) for more information.
 

package/package/blocks/button/button.svelte

@@ -11,13 +11,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/form/form.svelte

@@ -17,13 +17,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/img/img.svelte

@@ -12,13 +12,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/input/input.svelte

@@ -12,13 +12,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/section/section.svelte

@@ -11,13 +11,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/select/select.svelte

@@ -12,13 +12,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

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

@@ -11,13 +11,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/symbol/symbol.svelte

@@ -16,13 +16,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/textarea/textarea.svelte

@@ -11,13 +11,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

package/package/blocks/video/video.svelte

@@ -11,13 +11,13 @@ const filterAttrs = (attrs = {}, filter) => {
     });
     return validAttr;
 };
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);

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

@@ -12,13 +12,13 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component.svelte";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-const setAttrs = (node, attrs) => {
+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) {
+        update(attrs = {}) {
             const attrKeys = Object.keys(attrs);
             attrKeys.map(teardown);
             attrKeys.map(setup);
@@ -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,
+        };
+};