@builder.io/sdk-svelte 0.0.4 → 0.0.5

package/src/helpers/visitorId.ts

@@ -0,0 +1,38 @@
+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) => {
+  if (!canTrack) {
+    return undefined;
+  }
+
+  const visitorId = getLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    canTrack,
+  });
+
+  if (checkIsDefined(visitorId)) {
+    return visitorId;
+  } else {
+    const newVisitorId = createVisitorId();
+    setVisitorId({ id: newVisitorId, canTrack });
+  }
+};
+
+export const createVisitorId = () => uuid();
+
+export const setVisitorId = ({
+  id,
+  canTrack,
+}: {
+  id: string;
+} & CanTrack) =>
+  setLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    value: id,
+    canTrack,
+  });

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

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

package/src/index-helpers/top-of-file.ts

@@ -0,0 +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;

package/src/index.ts

@@ -0,0 +1,12 @@
+import './index-helpers/top-of-file.js';
+import './scripts/init-editing.js';
+
+export * from './index-helpers/blocks-exports.js';
+
+export * from './functions/is-editing.js';
+export * from './functions/is-previewing.js';
+export * from './functions/register-component.js';
+export * from './functions/register.js';
+export * from './functions/set-editor-settings.js';
+export * from './functions/get-content/index.js';
+export * from './functions/get-builder-search-params/index.js';

package/src/scripts/init-editing.ts

@@ -0,0 +1,102 @@
+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' },
+          ]),
+    ],
+  });
+};
+
+export const setupBrowserForEditing = () => {
+  if (isBrowser()) {
+    window.parent?.postMessage(
+      {
+        type: 'builder.sdkInfo',
+        data: {
+          target: TARGET,
+          // 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,
+        },
+      },
+      '*'
+    );
+
+    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(
+              {
+                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);
+            } else {
+              window.parent?.postMessage(
+                {
+                  type: 'builder.evaluateResult',
+                  data: { result, id },
+                },
+                '*'
+              );
+            }
+          }
+          break;
+        }
+      }
+    });
+  }
+};

package/src/types/builder-block.ts

@@ -0,0 +1,58 @@
+type JSONValue = string | number | boolean | JSONObject | JSONArray;
+
+interface JSONObject {
+  [x: string]: JSONValue;
+}
+
+interface JSONArray extends Array<JSONValue> {}
+
+/** @todo typedoc this */
+export interface BuilderBlock {
+  '@type': '@builder.io/sdk:Element';
+  '@version'?: number;
+  id?: string;
+  tagName?: string;
+  layerName?: string;
+  groupLocked?: boolean;
+  layerLocked?: boolean;
+  /** @todo make alias for properties.class */
+  class?: string;
+  children?: BuilderBlock[];
+  responsiveStyles?: {
+    large?: Partial<CSSStyleDeclaration>;
+    medium?: Partial<CSSStyleDeclaration>;
+    small?: Partial<CSSStyleDeclaration>;
+    /** @deprecated */
+    xsmall?: Partial<CSSStyleDeclaration>;
+  };
+  component?: {
+    name: string;
+    options?: any;
+    tag?: string;
+  };
+  bindings?: {
+    [key: string]: string;
+  };
+  meta?: {
+    [key: string]: JSONValue;
+  };
+  actions?: {
+    [key: string]: string;
+  };
+  properties?: {
+    [key: string]: string;
+  };
+  code?: {
+    bindings?: {
+      [key: string]: string;
+    };
+    actions?: {
+      [key: string]: string;
+    };
+  };
+  repeat?: {
+    collection: string;
+    itemName?: string;
+  } | null;
+  animations?: any[]; // TODO: type the animation spec
+}

package/src/types/builder-content.ts

@@ -0,0 +1,39 @@
+import type { BuilderBlock } from './builder-block.js';
+
+// TODO
+type Input = any;
+
+export interface BuilderContentVariation {
+  data?: {
+    title?: string;
+    blocks?: BuilderBlock[];
+    inputs?: Input[];
+    state?: { [key: string]: any };
+    jsCode?: string;
+    tsCode?: string;
+    httpRequests?: { [key: string]: string };
+    [key: string]: any;
+  };
+  name?: string;
+  testRatio?: number;
+  id?: string;
+}
+
+// TODO: separate full and partial versions
+export interface BuilderContent extends BuilderContentVariation {
+  // TODO: query
+  '@version'?: number;
+  id?: string;
+  name?: string;
+  published?: 'published' | 'draft' | 'archived';
+  modelId?: string;
+  priority?: number;
+  lastUpdated?: number;
+  startDate?: number;
+  endDate?: number;
+  variations?: {
+    [id: string]: BuilderContentVariation | undefined;
+  };
+  testVariationId?: string;
+  testVariationName?: string;
+}

package/src/types/can-track.ts

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

package/src/types/components.ts

@@ -0,0 +1,188 @@
+import type { BuilderElement } from './element';
+
+export interface Input {
+  name: string;
+  friendlyName?: string;
+  description?: string;
+  defaultValue?: any;
+  type: string;
+  valueType?: {
+    type?: string;
+  };
+  required?: boolean;
+  autoFocus?: boolean;
+  subFields?: Input[];
+  helperText?: string;
+  allowedFileTypes?: string[];
+  imageHeight?: number;
+  imageWidth?: number;
+  mediaHeight?: number;
+  mediaWidth?: number;
+  hideFromUI?: boolean;
+  modelId?: string;
+  /**
+   * Number field type validation maximum accepted input
+   */
+  max?: number;
+  /**
+   * Number field type validation minimum accepted input
+   */
+  min?: number;
+  /**
+   * Number field type step size when using arrows
+   */
+  step?: number;
+
+  /**
+   * Set this to `true` to show the editor for this input when
+   * children of this component are selected. This is useful for things
+   * like Tabs, such that users may not always select the Tabs component
+   * directly but will still be looking for how to add additional tabs
+   */
+  broadcast?: boolean;
+  /**
+   * Set this to `true` to show the editor for this input when
+   * group locked parents of this component are selected. This is useful
+   * to bubble up important inputs for locked groups, like text and images
+   */
+  bubble?: boolean;
+  options?: { [key: string]: any };
+  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]$" */
+    pattern: string;
+    /** flags for the RegExp constructor, e.g. "gi"  */
+    options?: string;
+    /**
+     * Friendly message to display to end-users if the regex fails, e.g.
+     * "You must use a relative url starting with '/...' "
+     */
+    message: string;
+  };
+  advanced?: boolean;
+  onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
+  code?: boolean;
+  richText?: boolean;
+  showIf?: ((options: Map<string, any>) => boolean) | string;
+  copyOnAdd?: boolean;
+}
+
+export interface ComponentInfo {
+  /**
+   * Name your component something unique, e.g. 'MyButton'. You can override built-in components
+   * by registering a component with the same name, e.g. 'Text', to replace the built-in text component
+   */
+  name: string;
+  description?: string;
+  /**
+   * Link to a documentation page for this component
+   */
+  docsLink?: string;
+  image?: string;
+  /**
+   * Input schema for your component for users to fill in the options
+   */
+  inputs?: Input[];
+  class?: any;
+  type?: 'angular' | 'webcomponent' | 'react' | 'vue';
+  defaultStyles?: { [key: string]: string };
+  /**
+   * Turn on if your component can accept children. Be sure to use in combination with
+   * withChildren(YourComponent) like here
+   * github.com/BuilderIO/builder/blob/master/examples/react-design-system/src/components/HeroWithChildren/HeroWithChildren.builder.js#L5
+   */
+  canHaveChildren?: boolean;
+  fragment?: boolean;
+  /**
+   * Do not wrap a component in a dom element. Be sure to use {...props.attributes} with this option
+   * like here github.com/BuilderIO/builder/blob/master/packages/react/src/blocks/forms/Input.tsx#L34
+   */
+  noWrap?: boolean;
+  /**
+   * Default children
+   */
+  defaultChildren?: BuilderElement[];
+  defaults?: Partial<BuilderElement>;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  hooks?: { [key: string]: string | Function };
+  /**
+   * Hide your component in editor, useful for gradually deprecating components
+   */
+  hideFromInsertMenu?: boolean;
+  // For webcomponents
+  tag?: string;
+  static?: boolean;
+  /**
+   * Passing a list of model names will restrict using the component to only the models listed here, otherwise it'll be available for all models
+   */
+  models?: string[];
+
+  // TO-DO specific to new SDKs?
+  // not used in visual editor. Can likely be removed
+  builtIn: true;
+
+  /**
+   * Specify restrictions direct children must match
+   */
+  childRequirements?: {
+    /** Message to show when this doesn't match, e.g. "Children of 'Columns' must be a 'Column'" */
+    message: string;
+    /** Simple way to say children must be a specific component name */
+    component?: string;
+    /**
+     * More advanced - specify a MongoDB-style query (using sift.js github.com/crcn/sift.js)
+     * of what the children objects should match, e.g.
+     *
+     * @example
+     *  query: {
+     *    // Child of this element must be a 'Button' or 'Text' component
+     *    'component.name': { $in: ['Button', 'Text'] }
+     *  }
+     */
+    query?: any;
+  };
+
+  /**
+   * Specify restrictions any parent must match
+   */
+  requiresParent?: {
+    /** Message to show when this doesn't match, e.g. "'Add to cart' buttons must be within a 'Product box'" */
+    message: string;
+    /** Simple way to say a parent must be a specific component name, e.g. 'Product box' */
+    component?: string;
+
+    /**
+     * More advanced - specify a MongoDB-style query (using sift.js github.com/crcn/sift.js)
+     * of what at least one parent in the parents hierarchy should match, e.g.
+     *
+     * @example
+     *  query: {
+     *    // Thils element must be somewhere inside either a 'Product box' or 'Collection' component
+     *    'component.name': { $in: ['Product Box', 'Collection'] }
+     *  }
+     */
+    query?: any;
+  };
+
+  /** not yet implemented */
+  friendlyName?: string;
+
+  /**
+   * Use to restrict access to your component based on a the current user permissions
+   * By default components will show to all users
+   * for more information on permissions in builder check https://www.builder.io/c/docs/guides/roles-and-permissions
+   */
+  requiredPermissions?: Array<Permission>;
+
+  // TO-DO: is this used?
+  hidden?: boolean;
+}
+
+type Permission =
+  | 'read'
+  | 'publish'
+  | 'editCode'
+  | 'editDesigns'
+  | 'admin'
+  | 'create';

package/src/types/deep-partial.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,60 @@
+type JSONValue = string | number | boolean | JSONObject | JSONArray;
+
+interface JSONObject {
+  [x: string]: JSONValue;
+}
+
+interface JSONArray extends Array<JSONValue> {}
+
+/** @todo typedoc this */
+export interface BuilderElement {
+  '@type': '@builder.io/sdk:Element';
+  '@version'?: number;
+  id?: string;
+  tagName?: string;
+  layerName?: string;
+  groupLocked?: boolean;
+  layerLocked?: boolean;
+  /** @todo make alias for properties.class */
+  class?: string;
+  children?: BuilderElement[];
+  responsiveStyles?: {
+    large?: Partial<CSSStyleDeclaration>;
+    medium?: Partial<CSSStyleDeclaration>;
+    small?: Partial<CSSStyleDeclaration>;
+    /** @deprecated */
+    xsmall?: Partial<CSSStyleDeclaration>;
+  };
+  component?: {
+    name: string;
+    options?: any;
+    tag?: string;
+  };
+  bindings?: {
+    [key: string]: string;
+  };
+  meta?: {
+    [key: string]: JSONValue;
+  };
+  actions?: {
+    [key: string]: string;
+  };
+  properties?: {
+    [key: string]: string;
+  };
+  code?: {
+    bindings?: {
+      [key: string]: string;
+    };
+    actions?: {
+      [key: string]: string;
+    };
+  };
+  repeat?: {
+    collection: string;
+    itemName?: string;
+  } | null;
+  animations?: Animation[]; // TODO: type the animation spec
+}
+
+interface Animation {}

package/src/types/targets.ts

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

package/src/types/typescript.ts

@@ -0,0 +1,7 @@
+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;