@builder.io/sdk-svelte 0.4.5 → 0.5.0

package/package/helpers/visitorId.d.ts

@@ -1,6 +1,6 @@
 import type { CanTrack } from '../types/can-track.js';
 export declare const getVisitorId: ({ canTrack }: CanTrack) => string | undefined;
 export declare const createVisitorId: () => string;
-export declare const setVisitorId: ({ id, canTrack, }: {
+export declare const setVisitorId: ({ id, canTrack }: {
     id: string;
 } & CanTrack) => void;

package/package/helpers/visitorId.js

@@ -8,20 +8,23 @@ export const getVisitorId = ({ canTrack }) => {
     }
     const visitorId = getLocalStorageItem({
         key: VISITOR_LOCAL_STORAGE_KEY,
-        canTrack,
+        canTrack
     });
     if (checkIsDefined(visitorId)) {
         return visitorId;
     }
     else {
         const newVisitorId = createVisitorId();
-        setVisitorId({ id: newVisitorId, canTrack });
+        setVisitorId({
+            id: newVisitorId,
+            canTrack
+        });
         return newVisitorId;
     }
 };
 export const createVisitorId = () => uuid();
-export const setVisitorId = ({ id, canTrack, }) => setLocalStorageItem({
+export const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
     key: VISITOR_LOCAL_STORAGE_KEY,
     value: id,
-    canTrack,
+    canTrack
 });

package/package/index-helpers/blocks-exports.d.ts

@@ -2,9 +2,9 @@ export { default as Button } from '../blocks/button/button.svelte';
 export { default as Columns } from '../blocks/columns/columns.svelte';
 export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
-export { default as RenderBlocks } from '../components/render-blocks.svelte';
+export { default as RenderBlocks } from '../components/blocks/blocks.svelte';
 export { default as Section } from '../blocks/section/section.svelte';
 export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
-export { default as RenderContent } from '../components/render-content-variants/render-content-variants.svelte';
+export { default as RenderContent } from '../components/content-variants/content-variants.svelte';

package/package/index-helpers/blocks-exports.js

@@ -2,9 +2,9 @@ export { default as Button } from '../blocks/button/button.svelte';
 export { default as Columns } from '../blocks/columns/columns.svelte';
 export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
-export { default as RenderBlocks } from '../components/render-blocks.svelte';
+export { default as RenderBlocks } from '../components/blocks/blocks.svelte';
 export { default as Section } from '../blocks/section/section.svelte';
 export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
-export { default as RenderContent } from '../components/render-content-variants/render-content-variants.svelte';
+export { default as RenderContent } from '../components/content-variants/content-variants.svelte';

package/package/index.d.ts

@@ -7,9 +7,9 @@ export { register } from './functions/register.js';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 export type { Settings } from './functions/set-editor-settings.js';
-export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
+export { getAllContent, getContent, processContentResult } from './functions/get-content/index.js';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';
-export type { RenderContentProps } from './components/render-content/render-content.types.js';
+export type { ContentProps } from './components/content/content.types.js';

package/package/index.js

@@ -5,6 +5,6 @@ export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
 export { register } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
-export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
+export { getAllContent, getContent, processContentResult } from './functions/get-content/index.js';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';

package/package/scripts/init-editing.js

@@ -6,20 +6,23 @@ export const registerInsertMenu = () => {
     register('insertMenu', {
         name: '_default',
         default: true,
-        items: [
-            { name: 'Box' },
-            { name: 'Text' },
-            { name: 'Image' },
-            { name: 'Columns' },
-            ...(TARGET === 'reactNative'
-                ? []
-                : [
-                    { name: 'Core:Section' },
-                    { name: 'Core:Button' },
-                    { name: 'Embed' },
-                    { name: 'Custom Code' },
-                ]),
-        ],
+        items: [{
+                name: 'Box'
+            }, {
+                name: 'Text'
+            }, {
+                name: 'Image'
+            }, {
+                name: 'Columns'
+            }, ...(TARGET === 'reactNative' ? [] : [{
+                    name: 'Core:Section'
+                }, {
+                    name: 'Core:Button'
+                }, {
+                    name: 'Embed'
+                }, {
+                    name: 'Custom Code'
+                }])]
     });
 };
 let isSetupForEditing = false;
@@ -34,68 +37,73 @@ export const setupBrowserForEditing = (options = {}) => {
             data: {
                 target: TARGET,
                 version: SDK_VERSION,
-                // TODO: compile these in
-                // type: process.env.SDK_TYPE,
-                // version: process.env.SDK_VERSION,
                 supportsPatchUpdates: false,
                 // Supports builder-model="..." attribute which is needed to
                 // scope our '+ add block' button styling
                 supportsAddBlockScoping: true,
-                supportsCustomBreakpoints: true,
-            },
+                supportsCustomBreakpoints: true
+            }
         }, '*');
         window.parent?.postMessage({
             type: 'builder.updateContent',
             data: {
-                options,
-            },
+                options
+            }
         }, '*');
         window.addEventListener('message', ({ data }) => {
             if (!data?.type) {
                 return;
             }
             switch (data.type) {
-                case 'builder.evaluate': {
-                    const text = data.data.text;
-                    const args = data.data.arguments || [];
-                    const id = data.data.id;
-                    // tslint:disable-next-line:no-function-constructor-with-string-args
-                    const fn = new Function(text);
-                    let result;
-                    let error = null;
-                    try {
-                        // eslint-disable-next-line prefer-spread
-                        result = fn.apply(null, args);
-                    }
-                    catch (err) {
-                        error = err;
-                    }
-                    if (error) {
-                        window.parent?.postMessage({
-                            type: 'builder.evaluateError',
-                            data: { id, error: error.message },
-                        }, '*');
-                    }
-                    else {
-                        if (result && typeof result.then === 'function') {
-                            result
-                                .then((finalResult) => {
-                                window.parent?.postMessage({
-                                    type: 'builder.evaluateResult',
-                                    data: { id, result: finalResult },
-                                }, '*');
-                            })
-                                .catch(console.error);
+                case 'builder.evaluate':
+                    {
+                        const text = data.data.text;
+                        const args = data.data.arguments || [];
+                        const id = data.data.id;
+                        // tslint:disable-next-line:no-function-constructor-with-string-args
+                        const fn = new Function(text);
+                        let result;
+                        let error = null;
+                        try {
+                            // eslint-disable-next-line prefer-spread
+                            result = fn.apply(null, args);
                         }
-                        else {
+                        catch (err) {
+                            error = err;
+                        }
+                        if (error) {
                             window.parent?.postMessage({
-                                type: 'builder.evaluateResult',
-                                data: { result, id },
+                                type: 'builder.evaluateError',
+                                data: {
+                                    id,
+                                    error: error.message
+                                }
                             }, '*');
                         }
+                        else {
+                            if (result && typeof result.then === 'function') {
+                                result.then(finalResult => {
+                                    window.parent?.postMessage({
+                                        type: 'builder.evaluateResult',
+                                        data: {
+                                            id,
+                                            result: finalResult
+                                        }
+                                    }, '*');
+                                }).catch(console.error);
+                            }
+                            else {
+                                window.parent?.postMessage({
+                                    type: 'builder.evaluateResult',
+                                    data: {
+                                        result,
+                                        id
+                                    }
+                                }, '*');
+                            }
+                        }
+                        break;
                     }
-                    break;
-                }
             }
         });
     }

package/package/types/builder-props.d.ts

@@ -0,0 +1,10 @@
+import type { Writable } from "svelte/store";
+import type { BuilderContextInterface, RegisteredComponents } from '../context/types.js';
+import type { BuilderBlock } from './builder-block.js';
+export type PropsWithBuilderData<T> = T & {
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+};
+export type BuilderComponentsProp = {
+    builderComponents: RegisteredComponents;
+};

package/package/types/components.d.ts

@@ -1,5 +1,5 @@
-import type { BuilderElement } from './element';
-import type { Input } from './input';
+import type { BuilderElement } from './element.js';
+import type { Input } from './input.js';
 export interface ComponentInfo {
     /**
      * Name your component something unique, e.g. 'MyButton'. You can override built-in components
@@ -33,6 +33,12 @@ export interface ComponentInfo {
      * like here github.com/BuilderIO/builder/blob/master/packages/react/src/blocks/forms/Input.tsx#L34
      */
     noWrap?: boolean;
+    /**
+     * TO-DO: make this optional only for RSC SDK.
+     *
+     * Set this to `true` if your component is a React Server Component (RSC).
+     */
+    isRSC?: boolean;
     /**
      * Default children
      */

package/package/types/enforced-partials.d.ts

@@ -1,4 +1,4 @@
-import type { Prettify } from './typescript';
+import type { Prettify } from './typescript.js';
 type OptionalFieldsOnly<T> = {
     [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
 };

package/package/types/targets.d.ts

@@ -1,3 +1 @@
-type MitosisTargets = import('@builder.io/mitosis').Target;
-export type Target = Extract<MitosisTargets, 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid'>;
-export {};
+export type Target = 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc';

package/package/types/typescript.d.ts

@@ -6,3 +6,6 @@ export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T,
 export type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+export type PropsWithChildren<P> = P & {
+    children?: any;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "package",
@@ -41,7 +41,7 @@
     "svelte-check": "^3.3.2",
     "svelte-preprocess": "^4.10.6",
     "tslib": "^2.3.1",
-    "typescript": "^4",
+    "typescript": "^5.1.6",
     "vite": "^3.0.4"
   }
 }

package/src/blocks/BaseText.svelte

@@ -7,7 +7,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
 
-  import BuilderContext from "../context/builder.context.js";
+  import BuilderContext from "../context/builder.context";
 
   export let text: BaseTextProps["text"];
 

package/src/blocks/button/button.svelte

@@ -1,4 +1,7 @@
 <script context="module" lang="ts">
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
   export interface ButtonProps {
     attributes?: any;
     text?: string;
@@ -8,57 +11,41 @@
 </script>
 
 <script lang="ts">
-  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);
-      },
-    };
-  };
+  import { filterAttrs } from "../helpers.js";
+  import { setAttrs } from "../helpers.js";
 
   export let attributes: ButtonProps["attributes"];
   export let text: ButtonProps["text"];
   export let link: ButtonProps["link"];
   export let openLinkInNewTab: ButtonProps["openLinkInNewTab"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
 </script>
 
 {#if link}
   <a
     role="button"
-    {...filterAttrs(attributes, isNonEvent)}
+    {...filterAttrs(attributes, "on:", false)}
     href={link}
     target={openLinkInNewTab ? "_blank" : undefined}
-    use:setAttrs={filterAttrs(attributes, isEvent)}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
   >
     {text}
   </a>
 {:else}
   <button
-    class={/** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
-    attributes.class + " button"}
-    {...filterAttrs(attributes, isNonEvent)}
-    use:setAttrs={filterAttrs(attributes, isEvent)}
+    use:mitosis_styling={attributes.style}
+    {...filterAttrs(attributes, "on:", false)}
+    class={attributes.class + " button"}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
   >
     {text}
   </button>

package/src/blocks/button/component-info.ts

@@ -1,10 +1,7 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Core:Button',
-
-  image:
-    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
   defaultStyles: {
     // TODO: make min width more intuitive and set one
     appearance: 'none',
@@ -16,27 +13,23 @@ export const componentInfo: ComponentInfo = {
     color: 'white',
     borderRadius: '4px',
     textAlign: 'center',
-    cursor: 'pointer',
+    cursor: 'pointer'
   },
-  inputs: [
-    {
-      name: 'text',
-      type: 'text',
-      defaultValue: 'Click me!',
-      bubble: true,
-    },
-    {
-      name: 'link',
-      type: 'url',
-      bubble: true,
-    },
-    {
-      name: 'openLinkInNewTab',
-      type: 'boolean',
-      defaultValue: false,
-      friendlyName: 'Open link in new tab',
-    },
-  ],
+  inputs: [{
+    name: 'text',
+    type: 'text',
+    defaultValue: 'Click me!',
+    bubble: true
+  }, {
+    name: 'link',
+    type: 'url',
+    bubble: true
+  }, {
+    name: 'openLinkInNewTab',
+    type: 'boolean',
+    defaultValue: false,
+    friendlyName: 'Open link in new tab'
+  }],
   static: true,
-  noWrap: true,
-};
+  noWrap: true
+}

package/src/blocks/columns/columns.svelte

@@ -8,7 +8,7 @@
 
   type StackColumnsAt = "tablet" | "mobile" | "never";
 
-  export interface ColumnProps {
+  export interface ColumnProps extends BuilderComponentsProp {
     columns?: Column[];
     builderBlock: BuilderBlock;
     space?: number;
@@ -18,22 +18,26 @@
 </script>
 
 <script lang="ts">
-  import { getContext } from "svelte";
-
-  import RenderBlocks from "../../components/render-blocks.svelte";
-  import type { BuilderBlock } from "../../types/builder-block";
-  import { getSizesForBreakpoints } from "../../constants/device-sizes";
-  import type { SizeName } from "../../constants/device-sizes";
+  import Blocks from "../../components/blocks/blocks.svelte";
+  import type { BuilderBlock } from "../../types/builder-block.js";
+  import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
+  import type { SizeName } from "../../constants/device-sizes.js";
   import InlinedStyles from "../../components/inlined-styles.svelte";
   import { TARGET } from "../../constants/target.js";
-  import BuilderContext from "../../context/builder.context.js";
-  import type { Dictionary } from "../../types/typescript";
-
-  export let space: ColumnProps["space"];
-  export let columns: ColumnProps["columns"];
-  export let stackColumnsAt: ColumnProps["stackColumnsAt"];
-  export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
-  export let builderBlock: ColumnProps["builderBlock"];
+  import type { Dictionary } from "../../types/typescript.js";
+  import type {
+    BuilderComponentsProp,
+    PropsWithBuilderData,
+  } from "../../types/builder-props.js";
+
+  export let js: PropsWithBuilderData<ColumnProps>["js"];
+  export let space: PropsWithBuilderData<ColumnProps>["space"];
+  export let columns: PropsWithBuilderData<ColumnProps>["columns"];
+  export let stackColumnsAt: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
+  export let reverseColumnsWhenStacked: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
+  export let builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
+  export let builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
+  export let builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -45,8 +49,6 @@
     });
   }
 
-  let builderContext = getContext(BuilderContext.key);
-
   function getWidth(index: number) {
     return cols[index]?.width || 100 / cols.length;
   }
@@ -83,9 +85,10 @@
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
+    const marginLeftKey = "margin-left";
     return {
       width,
-      "margin-left": gutterPixels,
+      [marginLeftKey]: gutterPixels,
       "--column-width-mobile": getMobileStyle({
         stackedStyle: mobileWidth,
         desktopStyle: width,
@@ -111,11 +114,6 @@
     return breakpointSizes[size].max;
   }
   $: columnsCssVars = () => {
-    if (TARGET === "reactNative") {
-      return {
-        flexDirection: flexDir,
-      } as Dictionary<string>;
-    }
     return {
       "--flex-dir": flexDir,
       "--flex-dir-tablet": getTabletStyle({
@@ -166,9 +164,7 @@
 <div
   use:mitosis_styling={columnsCssVars()}
   class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
-  dataSet={{
-    "builder-block-name": "builder-columns",
-  }}
+  {...{}}
 >
   {#if TARGET !== "reactNative"}
     <InlinedStyles styles={columnsStyles()} />
@@ -178,17 +174,17 @@
     <div
       use:mitosis_styling={columnCssVars(index)}
       class="builder-column div-2"
-      dataSet={{
-        "builder-block-name": "builder-column",
-      }}
+      {...{}}
     >
-      <RenderBlocks
+      <Blocks
         blocks={column.blocks}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
           flexGrow: "1",
         }}
+        context={builderContext}
+        registeredComponents={builderComponents}
       />
     </div>
   {/each}