@builder.io/sdk-svelte 0.0.3 → 0.0.5

package/package/helpers/localStorage.d.ts

@@ -1,9 +1,8 @@
+import type { CanTrack } from '../types/can-track.js';
 export declare const getLocalStorageItem: ({ key, canTrack, }: {
     key: string;
-    canTrack: boolean;
-}) => string | null | undefined;
+} & CanTrack) => string | null | undefined;
 export declare const setLocalStorageItem: ({ key, canTrack, value, }: {
     key: string;
     value: string;
-    canTrack: boolean;
-}) => void;
+} & CanTrack) => void;

package/package/helpers/sessionId.d.ts

@@ -1,7 +1,6 @@
-import { CanTrack } from '../types/can-track.js';
-export declare const getSessionId: ({ canTrack }: CanTrack) => string | undefined;
+import type { CanTrack } from '../types/can-track.js';
+export declare const getSessionId: ({ canTrack }: CanTrack) => Promise<string | undefined>;
 export declare const createSessionId: () => string;
 export declare const setSessionId: ({ id, canTrack, }: {
     id: string;
-    canTrack: boolean;
-}) => undefined;
+} & CanTrack) => Promise<undefined>;

package/package/helpers/sessionId.js

@@ -1,13 +1,15 @@
-import '../types/can-track.js';
 import { getCookie, setCookie } from './cookie.js';
 import { checkIsDefined } from './nullable.js';
 import { uuid } from './uuid.js';
 const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
-export const getSessionId = ({ canTrack }) => {
+export const getSessionId = async ({ canTrack }) => {
     if (!canTrack) {
         return undefined;
     }
-    const sessionId = getCookie({ name: SESSION_LOCAL_STORAGE_KEY, canTrack });
+    const sessionId = await getCookie({
+        name: SESSION_LOCAL_STORAGE_KEY,
+        canTrack,
+    });
     if (checkIsDefined(sessionId)) {
         return sessionId;
     }

package/package/helpers/visitorId.d.ts

@@ -1,8 +1,6 @@
-export declare const getVisitorId: ({ canTrack }: {
-    canTrack: boolean;
-}) => string | undefined;
+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, }: {
     id: string;
-    canTrack: boolean;
-}) => void;
+} & CanTrack) => void;

package/package/scripts/init-editing.js

@@ -31,52 +31,56 @@ export const setupBrowserForEditing = () => {
                 // 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,
             },
         }, '*');
         window.addEventListener('message', ({ data }) => {
-            if (data) {
-                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);
-                            }
-                            else {
+            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: { result, id },
+                                    data: { id, result: finalResult },
                                 }, '*');
-                            }
+                            })
+                                .catch(console.error);
+                        }
+                        else {
+                            window.parent?.postMessage({
+                                type: 'builder.evaluateResult',
+                                data: { result, id },
+                            }, '*');
                         }
-                        break;
                     }
+                    break;
                 }
             }
         });

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

@@ -1,4 +1,4 @@
-import { BuilderBlock } from './builder-block.js';
+import type { BuilderBlock } from './builder-block.js';
 declare type Input = any;
 export interface BuilderContentVariation {
     data?: {

package/package/types/builder-content.js

@@ -1 +1 @@
-import './builder-block.js';
+export {};

package/package/types/targets.d.ts

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

package/package/types/typescript.d.ts

@@ -2,3 +2,4 @@ export declare type Nullable<T> = T | null | undefined;
 export declare type Dictionary<T> = {
     [key: string]: T;
 };
+export declare type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "files": [
-    "package"
+    "package",
+    "src"
   ],
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
   "repository": {
@@ -14,8 +15,12 @@
   },
   "main": "./package/index.js",
   "module": "./package/index.js",
-  "svelte": "./package/index.js",
+  "svelte": "./src/index.ts",
   "exports": {
+    "./src": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    },
     ".": {
       "import": "./package/index.js",
       "require": "./package/index.js"
@@ -26,7 +31,8 @@
     "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
     "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag dev --access public",
     "dev": "vite dev",
-    "build": "svelte-kit sync && svelte-package && rm package/package.json",
+    "build": "svelte-kit sync && svelte-package",
+    "build:watch": "svelte-kit sync && svelte-package --watch",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },

package/src/blocks/BaseText.svelte

@@ -0,0 +1,27 @@
+<script context="module" lang="ts">
+  export interface BaseTextProps {
+    text: string;
+  }
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import BuilderContext from "../context/builder.context.js";
+
+  export let text: BaseTextProps["text"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
+
+  let builderContext = getContext(BuilderContext.key);
+</script>
+
+<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>

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

@@ -0,0 +1,42 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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
+    appearance: 'none',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    backgroundColor: '#000000',
+    color: 'white',
+    borderRadius: '4px',
+    textAlign: 'center',
+    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',
+    },
+  ],
+  static: true,
+  noWrap: true,
+};

package/{package/blocks/columns/columns.lite.tsx → src/blocks/columns/columns.svelte}

@@ -1,7 +1,13 @@
 <script context="module" lang="ts">
-  type Column = {
-    blocks: any; // TODO: Implement this when support for dynamic CSS lands
+  import type { BuilderBlock } from "../../types/builder-block";
+
+  type CSS = {
+    [key: string]: string;
+  };
 
+  type Column = {
+    blocks: any;
+    // TODO: Implement this when support for dynamic CSS lands
     width?: number;
   };
 
@@ -9,19 +15,19 @@
 
   export interface ColumnProps {
     columns?: Column[];
-    builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
-
-    space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-    stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+    builderBlock: BuilderBlock;
 
+    // TODO: Implement this when support for dynamic CSS lands
+    space?: number;
+    // TODO: Implement this when support for dynamic CSS lands
+    stackColumnsAt?: StackColumnsAt;
+    // TODO: Implement this when support for dynamic CSS lands
     reverseColumnsWhenStacked?: boolean;
   }
 </script>
 
 <script lang="ts">
   import RenderBlocks from "../../components/render-blocks.svelte";
-  import { BuilderBlock } from "../../types/builder-block";
   import { markMutable } from "../../functions/mark-mutable";
 
   export let space: ColumnProps["space"];
@@ -31,34 +37,33 @@
   export let builderBlock: ColumnProps["builderBlock"];
 
   function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-      node.style[p] = v;
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 
   function getGutterSize() {
     return typeof space === "number" ? space || 0 : 20;
   }
-
   function getColumns() {
     return columns || [];
   }
-
   function getWidth(index) {
     const columns = getColumns();
     return columns[index]?.width || 100 / columns.length;
   }
-
   function getColumnCssWidth(index) {
     const columns = getColumns();
     const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
-
   function maybeApplyForTablet(prop) {
     const _stackColumnsAt = stackColumnsAt || "tablet";
-
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
   $: columnsCssVars = () => {
@@ -73,7 +78,6 @@
       "--flex-dir-tablet": maybeApplyForTablet(flexDir),
     };
   };
-
   $: columnCssVars = () => {
     const width = "100%";
     const marginLeft = "0";
@@ -100,6 +104,9 @@
         blocks={markMutable(column.blocks)}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
+        styleProp={{
+          flexGrow: "1",
+        }}
       />
     </div>
   {/each}
@@ -122,7 +129,9 @@
     }
   }
   .div-2 {
-    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
   @media (max-width: 991px) {
     .div-2 {

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

@@ -0,0 +1,254 @@
+import type { ComponentInfo } from '../../types/components';
+import { markSerializable } from '../util.js';
+
+export const componentInfo: ComponentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  name: 'Columns',
+  builtIn: true,
+  inputs: [
+    {
+      name: 'columns',
+      type: 'array',
+      broadcast: true,
+      subFields: [
+        {
+          name: 'blocks',
+          type: 'array',
+          hideFromUI: true,
+          defaultValue: [
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                  minHeight: '20px',
+                  minWidth: '20px',
+                  overflow: 'hidden',
+                },
+              },
+              component: {
+                name: 'Image',
+                options: {
+                  image:
+                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                  aspectRatio: 0.7004048582995948,
+                },
+              },
+            },
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                },
+              },
+              component: {
+                name: 'Text',
+                options: {
+                  text: '<p>Enter some text...</p>',
+                },
+              },
+            },
+          ],
+        },
+        {
+          name: 'width',
+          type: 'number',
+          hideFromUI: true,
+          helperText: 'Width %, e.g. set to 50 to fill half of the space',
+        },
+        {
+          name: 'link',
+          type: 'url',
+          helperText:
+            'Optionally set a url that clicking this column will link to',
+        },
+      ],
+      defaultValue: [
+        {
+          blocks: [
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                  minHeight: '20px',
+                  minWidth: '20px',
+                  overflow: 'hidden',
+                },
+              },
+              component: {
+                name: 'Image',
+                options: {
+                  image:
+                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                  aspectRatio: 0.7004048582995948,
+                },
+              },
+            },
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                },
+              },
+              component: {
+                name: 'Text',
+                options: {
+                  text: '<p>Enter some text...</p>',
+                },
+              },
+            },
+          ],
+        },
+        {
+          blocks: [
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                  minHeight: '20px',
+                  minWidth: '20px',
+                  overflow: 'hidden',
+                },
+              },
+              component: {
+                name: 'Image',
+                options: {
+                  image:
+                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                  aspectRatio: 0.7004048582995948,
+                },
+              },
+            },
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                },
+              },
+              component: {
+                name: 'Text',
+                options: {
+                  text: '<p>Enter some text...</p>',
+                },
+              },
+            },
+          ],
+        },
+      ],
+      onChange: markSerializable((options: Map<string, any>) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete('width');
+          });
+        }
+
+        const columns: Array<Map<string, any>> = options.get('columns');
+
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) =>
+            col.get('width')
+          );
+
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find(
+              (col) => !col.get('width')
+            );
+            if (containsColumnWithoutWidth) {
+              clearWidths();
+            } else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get('width');
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp) {
+                clearWidths();
+              }
+            }
+          }
+        }
+      }),
+    },
+    {
+      name: 'space',
+      type: 'number',
+      defaultValue: 20,
+      helperText: 'Size of gap between columns',
+      advanced: true,
+    },
+    {
+      name: 'stackColumnsAt',
+      type: 'string',
+      defaultValue: 'tablet',
+      helperText: 'Convert horizontal columns to vertical at what device size',
+      enum: ['tablet', 'mobile', 'never'],
+      advanced: true,
+    },
+    {
+      name: 'reverseColumnsWhenStacked',
+      type: 'boolean',
+      defaultValue: false,
+      helperText:
+        'When stacking columns for mobile devices, reverse the ordering',
+      advanced: true,
+    },
+  ],
+};