@builder.io/sdk-svelte 0.4.4 → 0.5.0

package/src/functions/get-processed-block.ts

@@ -1,32 +1,31 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-import { evaluate } from './evaluate.js';
+import { evaluate } from './evaluate';
 import { fastClone } from './fast-clone.js';
 import { set } from './set.js';
 import { transformBlock } from './transform-block.js';
-
 const evaluateBindings = ({
   block,
   context,
   localState,
   rootState,
-  rootSetState,
+  rootSetState
 }: {
   block: BuilderBlock;
-} & Pick<
-  BuilderContextInterface,
-  'localState' | 'context' | 'rootState' | 'rootSetState'
->): BuilderBlock => {
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock => {
   if (!block.bindings) {
     return block;
   }
   const copy = fastClone(block);
   const copied = {
     ...copy,
-    properties: { ...copy.properties },
-    actions: { ...copy.actions },
+    properties: {
+      ...copy.properties
+    },
+    actions: {
+      ...copy.actions
+    }
   };
-
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
     const value = evaluate({
@@ -34,21 +33,19 @@ const evaluateBindings = ({
       localState,
       rootState,
       rootSetState,
-      context,
+      context
     });
     set(copied, binding, value);
   }
-
   return copied;
 };
-
 export function getProcessedBlock({
   block,
   context,
   shouldEvaluateBindings,
   localState,
   rootState,
-  rootSetState,
+  rootSetState
 }: {
   block: BuilderBlock;
   /**
@@ -56,21 +53,17 @@ export function getProcessedBlock({
    * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
    */
   shouldEvaluateBindings: boolean;
-} & Pick<
-  BuilderContextInterface,
-  'localState' | 'context' | 'rootState' | 'rootSetState'
->): BuilderBlock {
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock {
   const transformedBlock = transformBlock(block);
-
   if (shouldEvaluateBindings) {
     return evaluateBindings({
       block: transformedBlock,
       localState,
       rootState,
       rootSetState,
-      context,
+      context
     });
   } else {
     return transformedBlock;
   }
-}
+}

package/src/functions/get-react-native-block-styles.ts

@@ -1,11 +1,10 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-
 export function getReactNativeBlockStyles({
   block,
   context,
-  blockStyles,
+  blockStyles
 }: {
   block: BuilderBlock;
   context: BuilderContextInterface;
@@ -15,19 +14,14 @@ export function getReactNativeBlockStyles({
   if (!responsiveStyles) {
     return {};
   }
-
-  const styles = {
+  const styles = ({
     // recursively apply inherited styles so that they can be passed down to children `Text` blocks
     ...context.inheritedStyles,
     ...(responsiveStyles.large || {}),
     ...(responsiveStyles.medium || {}),
     ...(responsiveStyles.small || {}),
-    ...blockStyles,
-  } as Record<string, string | number>;
-
-  const newStyles = sanitizeReactNativeBlockStyles(
-    styles
-  ) as any as CSSStyleDeclaration;
-
+    ...blockStyles
+  } as Record<string, string | number>);
+  const newStyles = ((sanitizeReactNativeBlockStyles(styles) as any) as CSSStyleDeclaration);
   return newStyles;
-}
+}

package/src/functions/if-target.ts

@@ -1,12 +1,11 @@
 import { TARGET } from '../constants/target.js';
-
 type Target = import('../types/targets').Target;
 
 // TODO: babel compile to include certain code only if the target matches
 export function ifTarget<A, B>({
   targets,
   doThing,
-  elseThing,
+  elseThing
 }: {
   targets: Target[];
   doThing: () => A;
@@ -17,4 +16,4 @@ export function ifTarget<A, B>({
   } else {
     return elseThing?.();
   }
-}
+}

package/src/functions/is-browser.ts

@@ -1,3 +1,3 @@
 export function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
-}
+}

package/src/functions/is-editing.ts

@@ -1,10 +1,5 @@
 import { TARGET } from '../constants/target.js';
 import { isIframe } from './is-iframe.js';
-
 export function isEditing(): boolean {
-  return (
-    isIframe() &&
-    (TARGET === 'reactNative' ||
-      window.location.search.indexOf('builder.frameEditing=') !== -1)
-  );
-}
+  return isIframe() && (TARGET === 'reactNative' || window.location.search.indexOf('builder.frameEditing=') !== -1);
+}

package/src/functions/is-iframe.ts

@@ -1,5 +1,4 @@
 import { isBrowser } from './is-browser.js';
-
 export function isIframe(): boolean {
   return isBrowser() && window.self !== window.top;
-}
+}

package/src/functions/is-non-node-server.ts

@@ -0,0 +1,9 @@
+import { isBrowser } from './is-browser';
+
+/**
+ * Identifies non-node server runtimes (edge, workers, serverless, etc.)
+ */
+export function isNonNodeServer(): boolean {
+  const hasNode = () => typeof process !== 'undefined' && process?.versions?.node;
+  return !isBrowser() && !hasNode();
+}

package/src/functions/is-previewing.ts

@@ -1,14 +1,11 @@
 import { isBrowser } from './is-browser.js';
 import { isEditing } from './is-editing.js';
-
 export function isPreviewing() {
   if (!isBrowser()) {
     return false;
   }
-
   if (isEditing()) {
     return false;
   }
-
   return Boolean(location.search.indexOf('builder.preview=') !== -1);
-}
+}

package/src/functions/on-change.ts

@@ -24,6 +24,6 @@ export function onChange<T extends object = any>(obj: T, cb: () => void): T {
       const returnValue = Reflect.set(target, key, value);
       cb();
       return returnValue;
-    },
+    }
   });
-}
+}

package/src/functions/register-component.ts

@@ -1,4 +1,3 @@
-import { serializeFn } from '../blocks/util.js';
 import type { RegisteredComponent } from '../context/types.js';
 import type { ComponentInfo } from '../types/components.js';
 import type { Input } from '../types/input.js';
@@ -13,38 +12,37 @@ export const components: RegisteredComponent[] = [];
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
  */
 export function registerComponent(component: any, info: ComponentInfo): void {
-  components.push({ component, ...info });
-
-  console.warn(
-    'registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.'
-  );
-
+  components.push({
+    component,
+    ...info
+  });
+  console.warn('registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.');
   return component;
 }
-
-export const createRegisterComponentMessage = ({
-  component: _,
-  ...info
-}: RegisteredComponent) => ({
+export const createRegisterComponentMessage = (info: ComponentInfo) => ({
   type: 'builder.registerComponent',
-  data: prepareComponentInfoToSend(info),
+  data: info
 });
 
-const serializeValue = (value: object): any =>
-  typeof value === 'function' ? serializeFn(value) : fastClone(value);
+// eslint-disable-next-line @typescript-eslint/ban-types
+const serializeFn = (fnValue: Function) => {
+  const fnStr = fnValue.toString().trim();
 
-const prepareComponentInfoToSend = ({
+  // 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)`;
+};
+const serializeValue = (value: object): any => typeof value === 'function' ? serializeFn(value) : fastClone(value);
+export const serializeComponentInfo = ({
   inputs,
   ...info
 }: ComponentInfo): ComponentInfo => ({
   ...fastClone(info),
-  inputs: inputs?.map((input) =>
-    Object.entries(input).reduce(
-      (acc, [key, value]) => ({
-        ...acc,
-        [key]: serializeValue(value),
-      }),
-      {} as Input
-    )
-  ),
-});
+  inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: serializeValue(value)
+  }), ({} as Input)))
+})

package/src/functions/register.ts

@@ -1,13 +1,11 @@
 import type { BuilderBlock } from '../types/builder-block.js';
 import type { DeepPartial } from '../types/deep-partial.js';
 import { isBrowser } from './is-browser.js';
-
 export interface InsertMenuItem {
   name: string;
   icon?: string;
   item: DeepPartial<BuilderBlock>;
 }
-
 export interface InsertMenuConfig {
   name: string;
   priority?: number;
@@ -15,9 +13,9 @@ export interface InsertMenuConfig {
   advanced?: boolean;
   items: InsertMenuItem[];
 }
-
-const registry: { [key: string]: any[] } = {};
-
+const registry: {
+  [key: string]: any[];
+} = {};
 export function register(type: 'insertMenu', info: InsertMenuConfig): void;
 export function register(type: string, info: any): void;
 export function register(type: string, info: any) {
@@ -31,8 +29,8 @@ export function register(type: string, info: any) {
       type: 'builder.register',
       data: {
         type,
-        info,
-      },
+        info
+      }
     };
     try {
       parent.postMessage(message, '*');
@@ -43,4 +41,4 @@ export function register(type: string, info: any) {
       console.debug('Could not postmessage', err);
     }
   }
-}
+}

package/src/functions/sanitize-react-native-block-styles.ts

@@ -1,10 +1,7 @@
 const propertiesThatMustBeNumber = new Set(['lineHeight']);
 const displayValues = new Set(['flex', 'none']);
-
 const SHOW_WARNINGS = false;
-
 type Styles = Record<string, string | number>;
-
 const normalizeNumber = (value: number): number | undefined => {
   if (Number.isNaN(value)) {
     return undefined;
@@ -15,51 +12,47 @@ const normalizeNumber = (value: number): number | undefined => {
     return value;
   }
 };
-
 export const sanitizeReactNativeBlockStyles = (styles: Styles): Styles => {
   return Object.keys(styles).reduce<Styles>((acc, key): Styles => {
     const propertyValue = styles[key];
-
-    if (key === 'display' && !displayValues.has(propertyValue as string)) {
+    if (key === 'display' && !displayValues.has((propertyValue as string))) {
       if (SHOW_WARNINGS) {
-        console.warn(
-          `Style value for key "display" must be "flex" or "none" but had ${propertyValue}`
-        );
+        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
       }
       return acc;
     }
-
-    if (
-      propertiesThatMustBeNumber.has(key) &&
-      typeof propertyValue !== 'number'
-    ) {
+    if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
       if (SHOW_WARNINGS) {
-        console.warn(
-          `Style key ${key} must be a number, but had value \`${styles[key]}\``
-        );
+        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
       }
       return acc;
     }
-
     if (typeof propertyValue === 'string') {
       // `px` units need to be stripped and replaced with numbers
       // https://regexr.com/6ualn
       const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
-
       if (isPixelUnit) {
         const newValue = parseFloat(propertyValue);
         const normalizedValue = normalizeNumber(newValue);
         if (normalizedValue) {
-          return { ...acc, [key]: normalizedValue };
+          return {
+            ...acc,
+            [key]: normalizedValue
+          };
         } else {
           return acc;
         }
       } else if (propertyValue === '0') {
         // 0 edge case needs to be handled
-        return { ...acc, [key]: 0 };
+        return {
+          ...acc,
+          [key]: 0
+        };
       }
     }
-
-    return { ...acc, [key]: propertyValue };
+    return {
+      ...acc,
+      [key]: propertyValue
+    };
   }, {});
-};
+}

package/src/functions/set-editor-settings.ts

@@ -1,16 +1,15 @@
 import { isBrowser } from './is-browser.js';
-
 const settings: Settings = {};
-
-export type Settings = { customInsertMenu?: boolean };
-
+export type Settings = {
+  customInsertMenu?: boolean;
+};
 export function setEditorSettings(newSettings: Settings) {
   if (isBrowser()) {
     Object.assign(settings, newSettings);
     const message = {
       type: 'builder.settingsChange',
-      data: settings,
+      data: settings
     };
     parent.postMessage(message, '*');
   }
-}
+}

package/src/functions/set.ts

@@ -8,19 +8,7 @@ export const set = (obj: any, _path: string | string[], value: any) => {
   if (Object(obj) !== obj) {
     return obj;
   }
-  const path: string[] = Array.isArray(_path)
-    ? _path
-    : (_path.toString().match(/[^.[\]]+/g) as string[]);
-
-  path
-    .slice(0, -1)
-    .reduce(
-      (a, c, i) =>
-        Object(a[c]) === a[c]
-          ? a[c]
-          : (a[c] =
-              Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}),
-      obj
-    )[path[path.length - 1]] = value;
+  const path: string[] = Array.isArray(_path) ? _path : (_path.toString().match(/[^.[\]]+/g) as string[]);
+  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
   return obj;
-};
+}

package/src/functions/track/helpers.ts

@@ -1,7 +1,6 @@
-import { TARGET } from '../../constants/target';
-import type { Nullable } from '../../helpers/nullable';
-import { isBrowser } from '../is-browser';
-
+import { TARGET } from '../../constants/target.js';
+import type { Nullable } from '../../helpers/nullable.js';
+import { isBrowser } from '../is-browser.js';
 const getLocation = (): Nullable<URL> => {
   if (TARGET === 'reactNative') {
     return null;
@@ -13,20 +12,15 @@ const getLocation = (): Nullable<URL> => {
     if (parsedLocation.pathname === '') {
       parsedLocation.pathname = '/';
     }
-
     return parsedLocation;
   } else {
     console.warn('Cannot get location for tracking in non-browser environment');
     return null;
   }
 };
-
-const getUserAgent = () =>
-  (typeof navigator === 'object' && navigator.userAgent) || '';
-
+const getUserAgent = () => typeof navigator === 'object' && navigator.userAgent || '';
 export const getUserAttributes = () => {
   const userAgent = getUserAgent();
-
   const isMobile = {
     Android() {
       return userAgent.match(/Android/i);
@@ -44,24 +38,14 @@ export const getUserAttributes = () => {
       return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
     },
     any() {
-      return (
-        isMobile.Android() ||
-        isMobile.BlackBerry() ||
-        isMobile.iOS() ||
-        isMobile.Opera() ||
-        isMobile.Windows() ||
-        TARGET === 'reactNative'
-      );
-    },
+      return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === 'reactNative';
+    }
   };
-
   const isTablet = userAgent.match(/Tablet|iPad/i);
-
   const url = getLocation();
-
   return {
     urlPath: url?.pathname,
     host: url?.host || url?.hostname,
-    device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop',
+    device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop'
   };
-};
+}

package/src/functions/track/index.ts

@@ -7,7 +7,6 @@ import type { Dictionary } from '../../types/typescript.js';
 import { isBrowser } from '../is-browser.js';
 import { isEditing } from '../is-editing.js';
 import { getUserAttributes } from './helpers.js';
-
 interface Event {
   /**
    * The type of your event.
@@ -43,42 +42,41 @@ interface Event {
     [index: string]: any;
   };
 }
-
 type TrackingData = {
   visitorId: string | undefined;
   sessionId: string | undefined;
 };
-
 const getTrackingEventData = async ({
-  canTrack,
+  canTrack
 }: CanTrack): Promise<TrackingData> => {
   if (!canTrack) {
-    return { visitorId: undefined, sessionId: undefined };
+    return {
+      visitorId: undefined,
+      sessionId: undefined
+    };
   }
-
-  const sessionId = await getSessionId({ canTrack });
-  const visitorId = getVisitorId({ canTrack });
-
+  const sessionId = await getSessionId({
+    canTrack
+  });
+  const visitorId = getVisitorId({
+    canTrack
+  });
   return {
     sessionId,
-    visitorId,
+    visitorId
   };
 };
-
-type EventProperties = Pick<Event, 'type'> &
-  Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
-    /**
-     * Your organization's API key.
-     */
-    apiKey: Event['data']['ownerId'];
-    /**
-     * (Optional) Any additional (non-metadata) properties to add to the event.
-     */
-    [index: string]: any;
-  };
-
+type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
+  /**
+   * Your organization's API key.
+   */
+  apiKey: Event['data']['ownerId'];
+  /**
+   * (Optional) Any additional (non-metadata) properties to add to the event.
+   */
+  [index: string]: any;
+};
 export type EventProps = EventProperties & CanTrack;
-
 const createEvent = async ({
   type: eventType,
   canTrack,
@@ -91,46 +89,43 @@ const createEvent = async ({
     ...properties,
     metadata: {
       url: location.href,
-      ...metadata,
+      ...metadata
     },
-    ...(await getTrackingEventData({ canTrack })),
+    ...(await getTrackingEventData({
+      canTrack
+    })),
     userAttributes: getUserAttributes(),
-    ownerId: apiKey,
-  },
+    ownerId: apiKey
+  }
 });
-
 export async function _track(eventProps: EventProps) {
   if (!eventProps.apiKey) {
-    logger.error(
-      'Missing API key for track call. Please provide your API key.'
-    );
+    logger.error('Missing API key for track call. Please provide your API key.');
     return;
   }
-
   if (!eventProps.canTrack) {
     return;
   }
-
   if (isEditing()) {
     return;
   }
   if (!(isBrowser() || TARGET === 'reactNative')) {
     return;
   }
-
   return fetch(`https://cdn.builder.io/api/v1/track`, {
     method: 'POST',
     body: JSON.stringify({
-      events: [await createEvent(eventProps)],
+      events: [await createEvent(eventProps)]
     }),
     headers: {
-      'content-type': 'application/json',
+      'content-type': 'application/json'
     },
-    mode: 'cors',
-  }).catch((err) => {
+    mode: 'cors'
+  }).catch(err => {
     console.error('Failed to track: ', err);
   });
 }
-
-export const track = (args: EventProperties) =>
-  _track({ ...args, canTrack: true });
+export const track = (args: EventProperties) => _track({
+  ...args,
+  canTrack: true
+})