@builder.io/sdk-svelte 0.1.3 → 0.1.5

package/src/blocks/input/input.svelte

@@ -24,14 +24,14 @@
     });
     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/src/blocks/section/section.svelte

@@ -19,14 +19,14 @@
     });
     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/src/blocks/select/select.svelte

@@ -25,14 +25,14 @@
     });
     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/src/blocks/submit-button/submit-button.svelte

@@ -17,14 +17,14 @@
     });
     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/src/blocks/symbol/symbol.svelte

@@ -43,14 +43,14 @@
     });
     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/src/blocks/textarea/textarea.svelte

@@ -20,14 +20,14 @@
     });
     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/src/blocks/video/video.svelte

@@ -38,14 +38,14 @@
     });
     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/src/components/render-block/render-block.helpers.ts

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

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

@@ -1,5 +1,8 @@
 <script context="module" lang="ts">
-  import type { BuilderContextInterface } from "../../context/types.js";
+  import type {
+    BuilderContextInterface,
+    BuilderRenderState,
+  } from "../../context/types.js";
 
   import type { BuilderBlock } from "../../types/builder-block.js";
 
@@ -29,14 +32,14 @@
   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);
@@ -63,10 +66,29 @@
           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,
     });
   };
@@ -137,6 +159,7 @@
       state: context.state,
       content: context.content,
       context: context.context,
+      setState: context.setState,
       registeredComponents: context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };

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

@@ -5,9 +5,17 @@
 
   import type { Breakpoints } from "../../types/builder-content.js";
 
+  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/src/components/render-block/render-repeated-block.svelte

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

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

@@ -0,0 +1,79 @@
+export interface CustomFont {
+  family?: string;
+  kind?: string;
+  fileUrl?: string;
+  files?: {
+    [key: string]: string;
+  };
+}
+
+const getCssFromFont = (font: CustomFont) => {
+  // 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 }: { customFonts?: CustomFont[] }) => {
+  // 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,
+}: {
+  cssCode?: string;
+  contentId?: string;
+}) => {
+  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/src/components/render-content/components/render-styles.svelte

@@ -1,82 +1,31 @@
 <script context="module" lang="ts">
-  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;
   }
 </script>
 
 <script lang="ts">
   import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+  import { getCss } from "./render-styles.helpers";
+  import { getFontCss } from "./render-styles.helpers";
 
   export let cssCode: Props["cssCode"];
+  export let contentId: Props["contentId"];
   export let customFonts: Props["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,
-})}`;
-  };
+})}
+`;
 </script>
 
-<RenderInlinedStyles styles={injectedStyles()} />
+<RenderInlinedStyles styles={injectedStyles} />

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

@@ -0,0 +1,48 @@
+import type { BuilderRenderState } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { RenderContentProps } from './render-content.types';
+
+export const getContextStateInitialValue = ({
+  content,
+  data,
+  locale,
+}: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
+  const defaultValues: BuilderRenderState = {};
+
+  // 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: BuilderRenderState = {
+    ...content?.data?.state,
+    ...data,
+    ...(locale ? { locale } : {}),
+  };
+
+  return { ...defaultValues, ...stateToUse };
+};
+
+export const getContentInitialValue = ({
+  content,
+  data,
+}: Pick<RenderContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
+  return !content
+    ? undefined
+    : {
+        ...content,
+        data: {
+          ...content?.data,
+          ...data,
+        },
+        meta: content?.meta,
+      };
+};