@builder.io/sdk-svelte 0.4.5 → 0.5.0

package/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",
@@ -40,6 +40,7 @@
     "./blocks/form/form.svelte": "./blocks/form/form.svelte",
     "./blocks/fragment/component-info": "./blocks/fragment/component-info.js",
     "./blocks/fragment/fragment.svelte": "./blocks/fragment/fragment.svelte",
+    "./blocks/helpers": "./blocks/helpers.js",
     "./blocks/image/component-info": "./blocks/image/component-info.js",
     "./blocks/image/image.helpers": "./blocks/image/image.helpers.js",
     "./blocks/image/image.svelte": "./blocks/image/image.svelte",
@@ -56,43 +57,52 @@
     "./blocks/submit-button/component-info": "./blocks/submit-button/component-info.js",
     "./blocks/submit-button/submit-button.svelte": "./blocks/submit-button/submit-button.svelte",
     "./blocks/symbol/component-info": "./blocks/symbol/component-info.js",
+    "./blocks/symbol/symbol.helpers": "./blocks/symbol/symbol.helpers.js",
     "./blocks/symbol/symbol.svelte": "./blocks/symbol/symbol.svelte",
     "./blocks/text/component-info": "./blocks/text/component-info.js",
     "./blocks/text/text.svelte": "./blocks/text/text.svelte",
     "./blocks/textarea/component-info": "./blocks/textarea/component-info.js",
     "./blocks/textarea/textarea.svelte": "./blocks/textarea/textarea.svelte",
-    "./blocks/util": "./blocks/util.js",
     "./blocks/video/component-info": "./blocks/video/component-info.js",
     "./blocks/video/video.svelte": "./blocks/video/video.svelte",
+    "./components/block/block.helpers": "./components/block/block.helpers.js",
+    "./components/block/block.svelte": "./components/block/block.svelte",
+    "./components/block/components/block-styles.svelte": "./components/block/components/block-styles.svelte",
+    "./components/block/components/block-wrapper.svelte": "./components/block/components/block-wrapper.svelte",
+    "./components/block/components/component-ref/component-ref.helpers": "./components/block/components/component-ref/component-ref.helpers.js",
+    "./components/block/components/component-ref/component-ref.svelte": "./components/block/components/component-ref/component-ref.svelte",
+    "./components/block/components/interactive-element.svelte": "./components/block/components/interactive-element.svelte",
+    "./components/block/components/repeated-block.svelte": "./components/block/components/repeated-block.svelte",
+    "./components/block/types": "./components/block/types.js",
+    "./components/blocks/blocks-wrapper.svelte": "./components/blocks/blocks-wrapper.svelte",
+    "./components/blocks/blocks.svelte": "./components/blocks/blocks.svelte",
+    "./components/content/components/enable-editor.svelte": "./components/content/components/enable-editor.svelte",
+    "./components/content/components/styles.helpers": "./components/content/components/styles.helpers.js",
+    "./components/content/components/styles.svelte": "./components/content/components/styles.svelte",
+    "./components/content/content.helpers": "./components/content/content.helpers.js",
+    "./components/content/content.svelte": "./components/content/content.svelte",
+    "./components/content/content.types": "./components/content/content.types.js",
+    "./components/content": "./components/content/index.js",
+    "./components/content/wrap-component-ref": "./components/content/wrap-component-ref.js",
+    "./components/content-variants/content-variants.svelte": "./components/content-variants/content-variants.svelte",
+    "./components/content-variants/content-variants.types": "./components/content-variants/content-variants.types.js",
+    "./components/content-variants/helpers": "./components/content-variants/helpers.js",
     "./components/inlined-script.svelte": "./components/inlined-script.svelte",
     "./components/inlined-styles.svelte": "./components/inlined-styles.svelte",
-    "./components/render-block/block-styles.svelte": "./components/render-block/block-styles.svelte",
-    "./components/render-block/render-block.helpers": "./components/render-block/render-block.helpers.js",
-    "./components/render-block/render-block.svelte": "./components/render-block/render-block.svelte",
-    "./components/render-block/render-component.svelte": "./components/render-block/render-component.svelte",
-    "./components/render-block/render-repeated-block.svelte": "./components/render-block/render-repeated-block.svelte",
-    "./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-content/wrap-component-ref": "./components/render-content/wrap-component-ref.js",
-    "./components/render-content-variants/helpers": "./components/render-content-variants/helpers.js",
-    "./components/render-content-variants/render-content-variants.svelte": "./components/render-content-variants/render-content-variants.svelte",
-    "./components/render-content-variants/render-content-variants.types": "./components/render-content-variants/render-content-variants.types.js",
     "./constants/builder-registered-components": "./constants/builder-registered-components.js",
     "./constants/device-sizes": "./constants/device-sizes.js",
     "./constants/sdk-version": "./constants/sdk-version.js",
     "./constants/target": "./constants/target.js",
     "./context/builder.context": "./context/builder.context.js",
     "./context/types": "./context/types.js",
+    "./functions/apply-patch-with-mutation": "./functions/apply-patch-with-mutation.js",
     "./functions/camel-to-kebab-case": "./functions/camel-to-kebab-case.js",
-    "./functions/evaluate.test": "./functions/evaluate.test.js",
-    "./functions/evaluate": "./functions/evaluate.js",
+    "./functions/evaluate/acorn": "./functions/evaluate/acorn.js",
+    "./functions/evaluate/evaluate": "./functions/evaluate/evaluate.js",
+    "./functions/evaluate": "./functions/evaluate/index.js",
+    "./functions/evaluate/interpreter": "./functions/evaluate/interpreter.js",
+    "./functions/evaluate/non-node-runtime": "./functions/evaluate/non-node-runtime.js",
+    "./functions/evaluate/types": "./functions/evaluate/types.js",
     "./functions/event-handler-name": "./functions/event-handler-name.js",
     "./functions/extract-text-styles": "./functions/extract-text-styles.js",
     "./functions/fast-clone": "./functions/fast-clone.js",
@@ -100,29 +110,25 @@
     "./functions/get-block-actions": "./functions/get-block-actions.js",
     "./functions/get-block-component-options": "./functions/get-block-component-options.js",
     "./functions/get-block-properties": "./functions/get-block-properties.js",
-    "./functions/get-builder-search-params/fn.test": "./functions/get-builder-search-params/fn.test.js",
     "./functions/get-builder-search-params": "./functions/get-builder-search-params/index.js",
-    "./functions/get-content/generate-content-url.test": "./functions/get-content/generate-content-url.test.js",
     "./functions/get-content/generate-content-url": "./functions/get-content/generate-content-url.js",
     "./functions/get-content": "./functions/get-content/index.js",
     "./functions/get-content/types": "./functions/get-content/types.js",
     "./functions/get-fetch": "./functions/get-fetch.js",
     "./functions/get-global-this": "./functions/get-global-this.js",
-    "./functions/get-processed-block.test": "./functions/get-processed-block.test.js",
     "./functions/get-processed-block": "./functions/get-processed-block.js",
     "./functions/get-react-native-block-styles": "./functions/get-react-native-block-styles.js",
     "./functions/if-target": "./functions/if-target.js",
     "./functions/is-browser": "./functions/is-browser.js",
     "./functions/is-editing": "./functions/is-editing.js",
     "./functions/is-iframe": "./functions/is-iframe.js",
+    "./functions/is-non-node-server": "./functions/is-non-node-server.js",
     "./functions/is-previewing": "./functions/is-previewing.js",
-    "./functions/on-change.test": "./functions/on-change.test.js",
     "./functions/on-change": "./functions/on-change.js",
     "./functions/register-component": "./functions/register-component.js",
     "./functions/register": "./functions/register.js",
     "./functions/sanitize-react-native-block-styles": "./functions/sanitize-react-native-block-styles.js",
     "./functions/set-editor-settings": "./functions/set-editor-settings.js",
-    "./functions/set.test": "./functions/set.test.js",
     "./functions/set": "./functions/set.js",
     "./functions/track/helpers": "./functions/track/helpers.js",
     "./functions/track": "./functions/track/index.js",
@@ -137,9 +143,13 @@
     "./helpers/localStorage": "./helpers/localStorage.js",
     "./helpers/logger": "./helpers/logger.js",
     "./helpers/nullable": "./helpers/nullable.js",
+    "./helpers/preview-lru-cache/get": "./helpers/preview-lru-cache/get.js",
+    "./helpers/preview-lru-cache/helpers": "./helpers/preview-lru-cache/helpers.js",
+    "./helpers/preview-lru-cache/init": "./helpers/preview-lru-cache/init.js",
+    "./helpers/preview-lru-cache/set": "./helpers/preview-lru-cache/set.js",
+    "./helpers/preview-lru-cache/types": "./helpers/preview-lru-cache/types.js",
     "./helpers/sessionId": "./helpers/sessionId.js",
     "./helpers/time": "./helpers/time.js",
-    "./helpers/url.test": "./helpers/url.test.js",
     "./helpers/url": "./helpers/url.js",
     "./helpers/uuid": "./helpers/uuid.js",
     "./helpers/visitorId": "./helpers/visitorId.js",
@@ -149,6 +159,7 @@
     "./types/api-version": "./types/api-version.js",
     "./types/builder-block": "./types/builder-block.js",
     "./types/builder-content": "./types/builder-content.js",
+    "./types/builder-props": "./types/builder-props.js",
     "./types/can-track": "./types/can-track.js",
     "./types/components": "./types/components.js",
     "./types/deep-partial": "./types/deep-partial.js",
@@ -167,7 +178,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/package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.5.0
+
+- Feature: Added support for rudimentary data-bindings in Non-Node.js (edge, serverless, etc.) server runtimes.
+
 ### 0.4.5
 
 - Fix: show dynamic symbols correctly in Preview mode.

package/package/blocks/BaseText.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>import { getContext } from "svelte";
-import BuilderContext from "../context/builder.context.js";
+import BuilderContext from "../context/builder.context";
 export let text;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

package/package/blocks/button/button.svelte

@@ -1,54 +1,39 @@
 <script context="module"></script>
 
-<script>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);
-        },
-    };
-};
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
 export let attributes;
 export let text;
 export let link;
 export let 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/package/blocks/button/button.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-export interface ButtonProps {
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ export interface ButtonProps {
     attributes?: any;
     text?: string;
     link?: string;

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

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;

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

@@ -12,27 +12,23 @@ export const componentInfo = {
         color: 'white',
         borderRadius: '4px',
         textAlign: 'center',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
-    inputs: [
-        {
+    inputs: [{
             name: 'text',
             type: 'text',
             defaultValue: 'Click me!',
-            bubble: true,
-        },
-        {
+            bubble: true
+        }, {
             name: 'link',
             type: 'url',
-            bubble: true,
-        },
-        {
+            bubble: true
+        }, {
             name: 'openLinkInNewTab',
             type: 'boolean',
             defaultValue: false,
-            friendlyName: 'Open link in new tab',
-        },
-    ],
+            friendlyName: 'Open link in new tab'
+        }],
     static: true,
-    noWrap: true,
+    noWrap: true
 };

package/package/blocks/columns/columns.svelte

@@ -1,16 +1,17 @@
 <script context="module"></script>
 
-<script>import { getContext } from "svelte";
-import RenderBlocks from "../../components/render-blocks.svelte";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+import { getSizesForBreakpoints } 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";
+export let js;
 export let space;
 export let columns;
 export let stackColumnsAt;
 export let reverseColumnsWhenStacked;
+export let builderContext;
 export let builderBlock;
+export let builderComponents;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
         if (p.startsWith("--")) {
@@ -21,7 +22,6 @@ function mitosis_styling(node, vars) {
         }
     });
 }
-let builderContext = getContext(BuilderContext.key);
 function getWidth(index) {
     return cols[index]?.width || 100 / cols.length;
 }
@@ -46,9 +46,10 @@ function columnCssVars(index) {
     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,
@@ -72,11 +73,6 @@ function getWidthForBreakpointSize(size) {
     return breakpointSizes[size].max;
 }
 $: columnsCssVars = () => {
-    if (TARGET === "reactNative") {
-        return {
-            flexDirection: flexDir,
-        };
-    }
     return {
         "--flex-dir": flexDir,
         "--flex-dir-tablet": getTabletStyle({
@@ -125,9 +121,7 @@ let flexDir = stackColumnsAt === "never"
 <div
   use:mitosis_styling={columnsCssVars()}
   class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
-  dataSet={{
-    "builder-block-name": "builder-columns",
-  }}
+  {...{}}
 >
   {#if TARGET !== "reactNative"}
     <InlinedStyles styles={columnsStyles()} />
@@ -137,17 +131,17 @@ let flexDir = stackColumnsAt === "never"
     <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}

package/package/blocks/columns/columns.svelte.d.ts

@@ -4,21 +4,25 @@ type Column = {
     width?: number;
 };
 type StackColumnsAt = "tablet" | "mobile" | "never";
-export interface ColumnProps {
+export interface ColumnProps extends BuilderComponentsProp {
     columns?: Column[];
     builderBlock: BuilderBlock;
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
 }
-import type { BuilderBlock } from "../../types/builder-block";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/builder-props.js";
 declare const __propDef: {
     props: {
-        space: ColumnProps["space"];
-        columns: ColumnProps["columns"];
-        stackColumnsAt: ColumnProps["stackColumnsAt"];
-        reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
-        builderBlock: ColumnProps["builderBlock"];
+        js: any;
+        space: PropsWithBuilderData<ColumnProps>["space"];
+        columns: PropsWithBuilderData<ColumnProps>["columns"];
+        stackColumnsAt: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
+        reverseColumnsWhenStacked: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
+        builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
+        builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
+        builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/columns/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;