@builder.io/sdk-svelte 0.1.4 → 0.1.6

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.5",
   "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/blocks/button/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Core:Button',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
     defaultStyles: {
         // TODO: make min width more intuitive and set one

package/package/blocks/columns/component-info.js

@@ -2,7 +2,6 @@ import { serializeFn } from '../util.js';
 export const componentInfo = {
     // TODO: ways to statically preprocess JSON for references, functions, etc
     name: 'Columns',
-    builtIn: true,
     inputs: [
         {
             name: 'columns',

package/package/blocks/custom-code/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Custom Code',
     static: true,
-    builtIn: true,
     requiredPermissions: ['editCode'],
     inputs: [
         {

package/package/blocks/embed/component-info.js

@@ -2,7 +2,6 @@ import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Embed',
     static: true,
-    builtIn: true,
     inputs: [
         {
             name: 'url',

package/package/blocks/form/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:Form',
-    builtIn: true,
     // editableTags: ['builder-form-error']
     defaults: {
         responsiveStyles: {

package/package/blocks/fragment/component-info.js

@@ -2,7 +2,6 @@ export const componentInfo = {
     name: 'Fragment',
     static: true,
     hidden: true,
-    builtIn: true,
     canHaveChildren: true,
     noWrap: true,
 };

package/package/blocks/image/component-info.js

@@ -2,7 +2,6 @@ import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Image',
     static: true,
-    builtIn: true,
     image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
     defaultStyles: {
         position: 'relative',

package/package/blocks/img/component-info.js

@@ -2,7 +2,6 @@ export const componentInfo = {
     // friendlyName?
     name: 'Raw:Img',
     hideFromInsertMenu: true,
-    builtIn: true,
     image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
     inputs: [
         {

package/package/blocks/input/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:Input',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
     inputs: [
         {

package/package/blocks/raw-text/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Builder:RawText',
     hideFromInsertMenu: true,
-    builtIn: true,
     inputs: [
         {
             name: 'text',

package/package/blocks/section/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Core:Section',
     static: true,
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',
     inputs: [
         {

package/package/blocks/select/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:Select',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
     defaultStyles: {
         alignSelf: 'flex-start',

package/package/blocks/submit-button/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:SubmitButton',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
     defaultStyles: {
         appearance: 'none',

package/package/blocks/symbol/component-info.js

@@ -2,7 +2,6 @@ export const componentInfo = {
     name: 'Symbol',
     noWrap: true,
     static: true,
-    builtIn: true,
     inputs: [
         {
             name: 'symbol',

package/package/blocks/text/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Text',
     static: true,
-    builtIn: true,
     image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
     inputs: [
         {

package/package/blocks/textarea/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:TextArea',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
     inputs: [
         {

package/package/blocks/video/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Video',
     canHaveChildren: true,
-    builtIn: true,
     defaultStyles: {
         minHeight: '20px',
         minWidth: '20px',

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,
+        };
+};