@builder.io/sdk-svelte 0.4.4 → 0.5.0

package/src/helpers/sessionId.ts

@@ -2,37 +2,36 @@ import type { CanTrack } from '../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 = async ({
-  canTrack,
+  canTrack
 }: CanTrack): Promise<string | undefined> => {
   if (!canTrack) {
     return undefined;
   }
-
   const sessionId = await getCookie({
     name: SESSION_LOCAL_STORAGE_KEY,
-    canTrack,
+    canTrack
   });
-
   if (checkIsDefined(sessionId)) {
     return sessionId;
   } else {
     const newSessionId = createSessionId();
-    setSessionId({ id: newSessionId, canTrack });
-
+    setSessionId({
+      id: newSessionId,
+      canTrack
+    });
     return newSessionId;
   }
 };
-
 export const createSessionId = () => uuid();
-
 export const setSessionId = ({
   id,
-  canTrack,
+  canTrack
 }: {
   id: string;
-} & CanTrack) =>
-  setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });
+} & CanTrack) => setCookie({
+  name: SESSION_LOCAL_STORAGE_KEY,
+  value: id,
+  canTrack
+})

package/src/helpers/time.ts

@@ -1,4 +1,2 @@
 const MINUTE_TO_MILLESECONDS_MULTIPLIER = 60000;
-
-export const getCurrentDatePlusMinutes = (minutes = 30) =>
-  new Date(Date.now() + minutes * MINUTE_TO_MILLESECONDS_MULTIPLIER);
+export const getCurrentDatePlusMinutes = (minutes = 30) => new Date(Date.now() + minutes * MINUTE_TO_MILLESECONDS_MULTIPLIER)

package/src/helpers/url.ts

@@ -7,10 +7,9 @@ export const getTopLevelDomain = (host: string) => {
   if (host === 'localhost' || host === '127.0.0.1') {
     return host;
   }
-
   const parts = host.split('.');
   if (parts.length > 2) {
     return parts.slice(1).join('.');
   }
   return host;
-};
+}

package/src/helpers/uuid.ts

@@ -3,8 +3,8 @@
  */
 export function uuidv4() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0,
-      v = c == 'x' ? r : (r & 0x3) | 0x8;
+    const r = Math.random() * 16 | 0,
+      v = c == 'x' ? r : r & 0x3 | 0x8;
     return v.toString(16);
   });
 }
@@ -14,4 +14,4 @@ export function uuidv4() {
  */
 export function uuid() {
   return uuidv4().replace(/-/g, '');
-}
+}

package/src/helpers/visitorId.ts

@@ -2,39 +2,36 @@ import type { CanTrack } from '../types/can-track.js';
 import { getLocalStorageItem, setLocalStorageItem } from './localStorage.js';
 import { checkIsDefined } from './nullable.js';
 import { uuid } from './uuid.js';
-
 const VISITOR_LOCAL_STORAGE_KEY = 'builderVisitorId';
-
-export const getVisitorId = ({ canTrack }: CanTrack): string | undefined => {
+export const getVisitorId = ({
+  canTrack
+}: CanTrack): string | undefined => {
   if (!canTrack) {
     return undefined;
   }
-
   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,
+  canTrack
 }: {
   id: string;
-} & CanTrack) =>
-  setLocalStorageItem({
-    key: VISITOR_LOCAL_STORAGE_KEY,
-    value: id,
-    canTrack,
-  });
+} & CanTrack) => setLocalStorageItem({
+  key: VISITOR_LOCAL_STORAGE_KEY,
+  value: id,
+  canTrack
+})

package/src/index-helpers/blocks-exports.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/src/index-helpers/top-of-file.ts

@@ -1,4 +1,4 @@
 // no-op
 // this file exists in case a target needs to add logic to the top of the index file in an
 // override.
-export default undefined;
+export default undefined

package/src/index.ts

@@ -1,26 +1,15 @@
 export * from './index-helpers/top-of-file.js';
 export * from './index-helpers/blocks-exports.js';
-
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
-
 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/src/scripts/init-editing.ts

@@ -2,125 +2,112 @@ import { SDK_VERSION } from '../constants/sdk-version.js';
 import { TARGET } from '../constants/target.js';
 import { isBrowser } from '../functions/is-browser.js';
 import { register } from '../functions/register.js';
-
 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;
-export const setupBrowserForEditing = (
-  options: {
-    enrich?: boolean;
-    includeRefs?: boolean;
-    locale?: string;
-  } = {}
-) => {
+export const setupBrowserForEditing = (options: {
+  enrich?: boolean;
+  includeRefs?: boolean;
+  locale?: string;
+} = {}) => {
   if (isSetupForEditing) {
     return;
   }
   isSetupForEditing = true;
   if (isBrowser()) {
-    window.parent?.postMessage(
-      {
-        type: 'builder.sdkInfo',
-        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,
-        },
-      },
-      '*'
-    );
-
-    window.parent?.postMessage(
-      {
-        type: 'builder.updateContent',
-        data: {
-          options,
-        },
-      },
-      '*'
-    );
-
-    window.addEventListener('message', ({ data }) => {
+    window.parent?.postMessage({
+      type: 'builder.sdkInfo',
+      data: {
+        target: TARGET,
+        version: SDK_VERSION,
+        supportsPatchUpdates: false,
+        // Supports builder-model="..." attribute which is needed to
+        // scope our '+ add block' button styling
+        supportsAddBlockScoping: true,
+        supportsCustomBreakpoints: true
+      }
+    }, '*');
+    window.parent?.postMessage({
+      type: 'builder.updateContent',
+      data: {
+        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: any;
-          let error: Error | null = null;
-          try {
-            // eslint-disable-next-line prefer-spread
-            result = fn.apply(null, args);
-          } catch (err) {
-            error = err as Error;
-          }
-
-          if (error) {
-            window.parent?.postMessage(
-              {
+        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: any;
+            let error: Error | null = null;
+            try {
+              // eslint-disable-next-line prefer-spread
+              result = fn.apply(null, args);
+            } catch (err) {
+              error = (err as Error);
+            }
+            if (error) {
+              window.parent?.postMessage({
                 type: 'builder.evaluateError',
-                data: { id, error: error.message },
-              },
-              '*'
-            );
-          } else {
-            if (result && typeof result.then === 'function') {
-              (result as Promise<any>)
-                .then((finalResult) => {
-                  window.parent?.postMessage(
-                    {
-                      type: 'builder.evaluateResult',
-                      data: { id, result: finalResult },
-                    },
-                    '*'
-                  );
-                })
-                .catch(console.error);
+                data: {
+                  id,
+                  error: error.message
+                }
+              }, '*');
             } else {
-              window.parent?.postMessage(
-                {
+              if (result && typeof result.then === 'function') {
+                (result as Promise<any>).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 },
-                },
-                '*'
-              );
+                  data: {
+                    result,
+                    id
+                  }
+                }, '*');
+              }
             }
+            break;
           }
-          break;
-        }
       }
     });
   }
-};
+}

package/src/types/api-version.ts

@@ -1,2 +1,2 @@
 export type ApiVersion = 'v2' | 'v3';
-export const DEFAULT_API_VERSION: ApiVersion = 'v3';
+export const DEFAULT_API_VERSION: ApiVersion = 'v3'

package/src/types/builder-block.ts

@@ -1,9 +1,7 @@
 type JSONValue = string | number | boolean | JSONObject | JSONArray;
-
 interface JSONObject {
   [x: string]: JSONValue;
 }
-
 interface JSONArray extends Array<JSONValue> {}
 
 /** @todo typedoc this */
@@ -66,4 +64,4 @@ export interface BuilderBlock {
    * generated by the "Show If" binding
    */
   show?: boolean;
-}
+}

package/src/types/builder-content.ts

@@ -1,7 +1,6 @@
 import type { BuilderBlock } from './builder-block.js';
 import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
-
 export interface Breakpoints {
   small: number;
   medium: number;
@@ -11,10 +10,14 @@ export interface BuilderContentVariation {
     title?: string;
     blocks?: BuilderBlock[];
     inputs?: Input[];
-    state?: { [key: string]: any };
+    state?: {
+      [key: string]: any;
+    };
     jsCode?: string;
     tsCode?: string;
-    httpRequests?: { [key: string]: string };
+    httpRequests?: {
+      [key: string]: string;
+    };
     [key: string]: any;
   };
   name?: string;
@@ -41,4 +44,4 @@ export interface BuilderContent extends BuilderContentVariation {
   };
   testVariationId?: string;
   testVariationName?: string;
-}
+}

package/src/types/builder-props.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/src/types/can-track.ts

@@ -1,3 +1,3 @@
 export type CanTrack = {
   canTrack: boolean;
-};
+}

package/src/types/components.ts

@@ -1,6 +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
@@ -19,7 +18,9 @@ export interface ComponentInfo {
   inputs?: Input[];
   class?: any;
   type?: 'angular' | 'webcomponent' | 'react' | 'vue';
-  defaultStyles?: { [key: string]: string };
+  defaultStyles?: {
+    [key: string]: string;
+  };
   /**
    * Turn on if your component can accept children. Be sure to use in combination with
    * withChildren(YourComponent) like here
@@ -32,13 +33,23 @@ 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
    */
   defaultChildren?: BuilderElement[];
   defaults?: Partial<BuilderElement>;
   // eslint-disable-next-line @typescript-eslint/ban-types
-  hooks?: { [key: string]: string | Function };
+  hooks?: {
+    [key: string]: string | Function;
+  };
   /**
    * Hide your component in editor, useful for gradually deprecating components
    */
@@ -107,11 +118,4 @@ export interface ComponentInfo {
   // TO-DO: is this used?
   hidden?: boolean;
 }
-
-type Permission =
-  | 'read'
-  | 'publish'
-  | 'editCode'
-  | 'editDesigns'
-  | 'admin'
-  | 'create';
+type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create'

package/src/types/deep-partial.ts

@@ -1,7 +1 @@
-export type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends Array<infer U>
-    ? Array<DeepPartial<U>>
-    : T[P] extends ReadonlyArray<infer U>
-    ? ReadonlyArray<DeepPartial<U>>
-    : DeepPartial<T[P]>;
-};
+export type DeepPartial<T> = { [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]> }

package/src/types/element.ts

@@ -1,9 +1,7 @@
 type JSONValue = string | number | boolean | JSONObject | JSONArray;
-
 interface JSONObject {
   [x: string]: JSONValue;
 }
-
 interface JSONArray extends Array<JSONValue> {}
 
 /** @todo typedoc this */
@@ -57,4 +55,4 @@ export interface BuilderElement {
   animations?: Animation[]; // TODO: type the animation spec
 }
 
-interface Animation {}
+interface Animation {}

package/src/types/enforced-partials.ts

@@ -0,0 +1,13 @@
+import type { Prettify } from './typescript.js';
+type OptionalFieldsOnly<T> = { [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K] };
+type RequiredFieldsOnly<T> = { [K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K] };
+type Enforced<T> = { [K in keyof T]-?: T[K] };
+type AndUndefined<T> = { [K in keyof T]: T[K] | undefined };
+
+/**
+ * Enforce that all optional fields are undefined
+ * @example
+ * type Foo = { a: string, b?: number }
+ * type Bar = EnforcePartials<Foo> // { a: string, b: number | undefined }
+ */
+export type EnforcePartials<From> = Prettify<AndUndefined<Enforced<OptionalFieldsOnly<From>>> & RequiredFieldsOnly<From>>

package/src/types/input.ts

@@ -78,13 +78,11 @@ export interface Input {
   /**
    * For "text" input type, specifying an enum will show a dropdown of options instead
    */
-  enum?:
-    | string[]
-    | {
-        label: string;
-        value: any;
-        helperText?: string;
-      }[];
+  enum?: string[] | {
+    label: string;
+    value: any;
+    helperText?: string;
+  }[];
   /** Regex field validation for all string types (text, longText, html, url, etc) */
   regex?: {
     /** pattern to test, like "^\/[a-z]$" */
@@ -117,9 +115,8 @@ export interface Input {
    * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
    */
   model?: string;
-
   valueType?: {
     type?: string;
   };
   onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
-}
+}

package/src/types/targets.ts

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

package/src/types/typescript.ts

@@ -1,7 +1,12 @@
 export type Nullable<T> = T | null | undefined;
+export type Dictionary<T> = {
+  [key: string]: T;
+};
+export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;
+export type Prettify<T> = {
 
-export type Dictionary<T> = { [key: string]: T };
-
-export type Overwrite<T, U> = keyof U extends keyof T
-  ? Pick<T, Exclude<keyof T, keyof U>> & U
-  : never;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+[K in keyof T]: T[K] } & {};
+export type PropsWithChildren<P> = P & {
+  children?: any;
+}

package/package/blocks/util.d.ts

@@ -1,4 +0,0 @@
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-export declare const serializeFn: (fnValue: Function) => string;

package/package/blocks/util.js

@@ -1,13 +0,0 @@
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const serializeFn = (fnValue) => {
-    const fnStr = fnValue.toString().trim();
-    // we need to account for a few different fn syntaxes:
-    // 1. `function name(args) => {code}`
-    // 2. `name(args) => {code}`
-    // 3. `(args) => {}`
-    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
-    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
-};