@builder.io/sdk-svelte 0.8.0 → 0.9.0

package/src/components/content/components/enable-editor.svelte

@@ -1,7 +1,12 @@
 <script context="module" lang="ts">
   type BuilderEditorProps = Omit<
     ContentProps,
-    "customComponents" | "data" | "apiVersion" | "isSsrAbTest"
+    | "customComponents"
+    | "data"
+    | "apiVersion"
+    | "isSsrAbTest"
+    | "blocksWrapper"
+    | "blocksWrapperProps"
   > & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
@@ -40,6 +45,7 @@
   import type { Writable } from "svelte/store";
 
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
+  export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
   export let model: BuilderEditorProps["model"] = undefined;
   export let context: BuilderEditorProps["context"] = undefined;
   export let canTrack: BuilderEditorProps["canTrack"] = undefined;
@@ -49,6 +55,8 @@
   export let enrich: BuilderEditorProps["enrich"] = undefined;
   export let content: BuilderEditorProps["content"] = undefined;
   export let showContent: BuilderEditorProps["showContent"];
+  export let contentWrapperProps: BuilderEditorProps["contentWrapperProps"] =
+    undefined;
 
   function mergeNewContent(newContent: BuilderContent) {
     const newContentValue = {
@@ -265,6 +273,7 @@
   let forceReRenderCount = 0;
   let lastUpdated = 0;
   let shouldSendResetCookie = false;
+  let ContentWrapper = contentWrapper || "div";
   let httpReqsData = {};
   let clicked = false;
 
@@ -345,7 +354,8 @@
 </script>
 
 {#if $builderContextSignal.content}
-  <div
+  <svelte:element
+    this={ContentWrapper}
     {...{}}
     key={forceReRenderCount}
     bind:this={elementRef}
@@ -361,6 +371,7 @@
           hidden: true,
           "aria-hidden": true,
         }}
+    {...contentWrapperProps}
     class={`variant-${content?.testVariationId || content?.id}`}
     on:initeditingbldr={(event) => {
       elementRef_onIniteditingbldr(event);
@@ -370,5 +381,5 @@
     }}
   >
     <slot />
-  </div>
+  </svelte:element>
 {/if}

package/src/components/content/content.svelte

@@ -35,11 +35,16 @@
   export let context: ContentProps["context"] = undefined;
   export let apiKey: ContentProps["apiKey"];
   export let apiVersion: ContentProps["apiVersion"] = undefined;
+  export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
+  export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
   export let model: ContentProps["model"] = undefined;
   export let canTrack: ContentProps["canTrack"] = undefined;
   export let includeRefs: ContentProps["includeRefs"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
+  export let contentWrapper: ContentProps["contentWrapper"] = undefined;
+  export let contentWrapperProps: ContentProps["contentWrapperProps"] =
+    undefined;
   export let isSsrAbTest: ContentProps["isSsrAbTest"];
 
   function contentSetState(newRootState: BuilderRenderState) {
@@ -103,6 +108,8 @@
       {}
     ),
     inheritedStyles: {},
+    BlocksWrapper: blocksWrapper || "div",
+    BlocksWrapperProps: blocksWrapperProps || {},
   });
 
   setContext(ComponentsContext.key, {
@@ -121,6 +128,8 @@
   {enrich}
   {showContent}
   {builderContextSignal}
+  {contentWrapper}
+  {contentWrapperProps}
   {...{}}
 >
   {#if isSsrAbTest}

package/src/components/content-variants/content-variants.svelte

@@ -38,6 +38,13 @@
   export let locale: VariantsProviderProps["locale"] = undefined;
   export let includeRefs: VariantsProviderProps["includeRefs"] = undefined;
   export let enrich: VariantsProviderProps["enrich"] = undefined;
+  export let blocksWrapper: VariantsProviderProps["blocksWrapper"] = undefined;
+  export let blocksWrapperProps: VariantsProviderProps["blocksWrapperProps"] =
+    undefined;
+  export let contentWrapper: VariantsProviderProps["contentWrapper"] =
+    undefined;
+  export let contentWrapperProps: VariantsProviderProps["contentWrapperProps"] =
+    undefined;
 
   $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(
@@ -105,6 +112,10 @@
       {includeRefs}
       {enrich}
       isSsrAbTest={shouldRenderVariants}
+      {blocksWrapper}
+      {blocksWrapperProps}
+      {contentWrapper}
+      {contentWrapperProps}
     />
   {/each}
 {/if}
@@ -124,4 +135,8 @@
   {includeRefs}
   {enrich}
   isSsrAbTest={shouldRenderVariants}
+  {blocksWrapper}
+  {blocksWrapperProps}
+  {contentWrapper}
+  {contentWrapperProps}
 />

package/src/components/content-variants/content-variants.types.ts

@@ -17,4 +17,20 @@ export interface ContentVariantsPrps {
   /** @deprecated use `enrich` instead **/
   includeRefs?: boolean;
   enrich?: boolean;
+  /**
+   * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
+   */
+  contentWrapper?: any;
+  /**
+   * Additonal props to pass to `contentWrapper`. Defaults to `{}`.
+   */
+  contentWrapperProps?: any;
+  /**
+   * The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
+   */
+  blocksWrapper?: any;
+  /**
+   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   */
+  blocksWrapperProps?: any;
 }

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.8.0"
+export const SDK_VERSION = "0.9.0"

package/src/context/builder.context.ts

@@ -12,6 +12,8 @@ export default {
     apiVersion: undefined,
     componentInfos: {},
     inheritedStyles: {},
+    BlocksWrapper: "div",
+    BlocksWrapperProps: {},
   }),
   key,
 };

package/src/context/types.ts

@@ -1,3 +1,4 @@
+import type { BlocksWrapperProps } from '../components/blocks/blocks-wrapper.svelte';
 import type { ApiVersion } from '../types/api-version.js';
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
@@ -8,7 +9,7 @@ export type RegisteredComponent = ComponentInfo & {
 export type RegisteredComponents = Dictionary<RegisteredComponent>;
 export type BuilderRenderState = Record<string, unknown>;
 export type BuilderRenderContext = Record<string, unknown>;
-export interface BuilderContextInterface {
+export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'> {
   content: Nullable<BuilderContent>;
   context: BuilderRenderContext;
   /**

package/src/functions/evaluate/node-runtime/safeDynamicRequire.ts

@@ -1,4 +1,4 @@
-const noop = () => null;
+const noop = () => {};
 
 /**
  * Allows us to require node-specific code safely within bundlers.
@@ -9,10 +9,16 @@ const noop = () => null;
  * This is guaranteed by the fact that each SDK has separate bundles for each runtime.
  * However, it might still end up running in the `browser` if the `node` bundle is loaded in the
  * browser (which happens in many apps' dev mode, and certain other scenarios like Qwik's prod mode).
+ * This is why we catch and ignore the error at the very end.
  */
+import { createRequire } from 'node:module';
 export let safeDynamicRequire: typeof require = ((noop as unknown) as typeof require);
 try {
-  safeDynamicRequire = eval('require');
+  safeDynamicRequire = createRequire(import.meta.url);
 } catch (error) {
-  /* empty */
+  try {
+    safeDynamicRequire = eval('require');
+  } catch (error) {
+    /* empty */
+  }
 }

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

@@ -2,7 +2,6 @@ import { TARGET } from '../constants/target.js';
 import type { BuilderContextInterface } from '../context/types.js';
 import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-import { getReactNativeBlockStyles } from './get-react-native-block-styles.js';
 import { transformBlockProperties } from './transform-block-properties.js';
 const extractRelevantRootBlockProperties = (block: BuilderBlock) => {
   // currently we are only spreading the `href` property
@@ -52,14 +51,11 @@ export function getBlockProperties({
     style: block.style ? getStyleAttribute(block.style) : undefined,
     class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
   };
-  if (TARGET === 'reactNative') {
-    properties.style = getReactNativeBlockStyles({
-      block,
-      context,
-      blockStyles: properties.style
-    });
-  }
-  return transformBlockProperties(properties);
+  return transformBlockProperties({
+    properties,
+    context,
+    block
+  });
 }
 /**
  * Svelte does not support style attribute as an object so we need to flatten it.

package/src/functions/transform-block-properties.ts

@@ -1,3 +1,11 @@
-export function transformBlockProperties<T>(properties: T) {
+import type { BuilderContextInterface } from '../context/types';
+import type { BuilderBlock } from '../types/builder-block';
+export function transformBlockProperties<T>({
+  properties
+}: {
+  properties: T;
+  context: BuilderContextInterface;
+  block: BuilderBlock;
+}) {
   return properties;
 }

package/src/types/enforced-partials.ts

@@ -1,6 +1,12 @@
 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] };
+
+/**
+ * Lol Typescript
+ * https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
+ */
+type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
+type OptionalFieldsOnly<T> = { [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], K, never> : K]: T[K] };
+type RequiredFieldsOnly<T> = { [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], never, K> : never]: T[K] };
 type Enforced<T> = { [K in keyof T]-?: T[K] };
 type AndUndefined<T> = { [K in keyof T]: T[K] | undefined };
 

package/lib/browser/functions/get-react-native-block-styles.d.ts

@@ -1,7 +0,0 @@
-import type { BuilderContextInterface } from '../context/types.js';
-import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getReactNativeBlockStyles({ block, context, blockStyles }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-    blockStyles: any;
-}): CSSStyleDeclaration | Record<string, string | undefined>;

package/lib/browser/functions/get-react-native-block-styles.js

@@ -1,17 +0,0 @@
-import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-export function getReactNativeBlockStyles({ block, context, blockStyles }) {
-    const responsiveStyles = block.responsiveStyles;
-    if (!responsiveStyles) {
-        return {};
-    }
-    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
-    };
-    const newStyles = sanitizeReactNativeBlockStyles(styles);
-    return newStyles;
-}

package/lib/browser/functions/sanitize-react-native-block-styles.d.ts

@@ -1,3 +0,0 @@
-type Styles = Record<string, string | number>;
-export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
-export {};

package/lib/browser/functions/sanitize-react-native-block-styles.js

@@ -1,61 +0,0 @@
-const propertiesThatMustBeNumber = new Set(['lineHeight']);
-const displayValues = new Set(['flex', 'none']);
-const SHOW_WARNINGS = false;
-const normalizeNumber = (value) => {
-    if (Number.isNaN(value)) {
-        return undefined;
-    }
-    else if (value < 0) {
-        // TODO: why are negative values not allowed?
-        return 0;
-    }
-    else {
-        return value;
-    }
-};
-export const sanitizeReactNativeBlockStyles = (styles) => {
-    return Object.keys(styles).reduce((acc, key) => {
-        const propertyValue = styles[key];
-        if (key === 'display' && !displayValues.has(propertyValue)) {
-            if (SHOW_WARNINGS) {
-                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 (SHOW_WARNINGS) {
-                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
-                    };
-                }
-                else {
-                    return acc;
-                }
-            }
-            else if (propertyValue === '0') {
-                // 0 edge case needs to be handled
-                return {
-                    ...acc,
-                    [key]: 0
-                };
-            }
-        }
-        return {
-            ...acc,
-            [key]: propertyValue
-        };
-    }, {});
-};

package/lib/edge/functions/get-react-native-block-styles.d.ts

@@ -1,7 +0,0 @@
-import type { BuilderContextInterface } from '../context/types.js';
-import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getReactNativeBlockStyles({ block, context, blockStyles }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-    blockStyles: any;
-}): CSSStyleDeclaration | Record<string, string | undefined>;

package/lib/edge/functions/get-react-native-block-styles.js

@@ -1,17 +0,0 @@
-import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-export function getReactNativeBlockStyles({ block, context, blockStyles }) {
-    const responsiveStyles = block.responsiveStyles;
-    if (!responsiveStyles) {
-        return {};
-    }
-    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
-    };
-    const newStyles = sanitizeReactNativeBlockStyles(styles);
-    return newStyles;
-}

package/lib/edge/functions/sanitize-react-native-block-styles.d.ts

@@ -1,3 +0,0 @@
-type Styles = Record<string, string | number>;
-export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
-export {};

package/lib/edge/functions/sanitize-react-native-block-styles.js

@@ -1,61 +0,0 @@
-const propertiesThatMustBeNumber = new Set(['lineHeight']);
-const displayValues = new Set(['flex', 'none']);
-const SHOW_WARNINGS = false;
-const normalizeNumber = (value) => {
-    if (Number.isNaN(value)) {
-        return undefined;
-    }
-    else if (value < 0) {
-        // TODO: why are negative values not allowed?
-        return 0;
-    }
-    else {
-        return value;
-    }
-};
-export const sanitizeReactNativeBlockStyles = (styles) => {
-    return Object.keys(styles).reduce((acc, key) => {
-        const propertyValue = styles[key];
-        if (key === 'display' && !displayValues.has(propertyValue)) {
-            if (SHOW_WARNINGS) {
-                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 (SHOW_WARNINGS) {
-                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
-                    };
-                }
-                else {
-                    return acc;
-                }
-            }
-            else if (propertyValue === '0') {
-                // 0 edge case needs to be handled
-                return {
-                    ...acc,
-                    [key]: 0
-                };
-            }
-        }
-        return {
-            ...acc,
-            [key]: propertyValue
-        };
-    }, {});
-};

package/lib/node/functions/get-react-native-block-styles.d.ts

@@ -1,7 +0,0 @@
-import type { BuilderContextInterface } from '../context/types.js';
-import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getReactNativeBlockStyles({ block, context, blockStyles }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-    blockStyles: any;
-}): CSSStyleDeclaration | Record<string, string | undefined>;

package/lib/node/functions/get-react-native-block-styles.js

@@ -1,17 +0,0 @@
-import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-export function getReactNativeBlockStyles({ block, context, blockStyles }) {
-    const responsiveStyles = block.responsiveStyles;
-    if (!responsiveStyles) {
-        return {};
-    }
-    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
-    };
-    const newStyles = sanitizeReactNativeBlockStyles(styles);
-    return newStyles;
-}

package/lib/node/functions/sanitize-react-native-block-styles.d.ts

@@ -1,3 +0,0 @@
-type Styles = Record<string, string | number>;
-export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
-export {};

package/lib/node/functions/sanitize-react-native-block-styles.js

@@ -1,61 +0,0 @@
-const propertiesThatMustBeNumber = new Set(['lineHeight']);
-const displayValues = new Set(['flex', 'none']);
-const SHOW_WARNINGS = false;
-const normalizeNumber = (value) => {
-    if (Number.isNaN(value)) {
-        return undefined;
-    }
-    else if (value < 0) {
-        // TODO: why are negative values not allowed?
-        return 0;
-    }
-    else {
-        return value;
-    }
-};
-export const sanitizeReactNativeBlockStyles = (styles) => {
-    return Object.keys(styles).reduce((acc, key) => {
-        const propertyValue = styles[key];
-        if (key === 'display' && !displayValues.has(propertyValue)) {
-            if (SHOW_WARNINGS) {
-                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 (SHOW_WARNINGS) {
-                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
-                    };
-                }
-                else {
-                    return acc;
-                }
-            }
-            else if (propertyValue === '0') {
-                // 0 edge case needs to be handled
-                return {
-                    ...acc,
-                    [key]: 0
-                };
-            }
-        }
-        return {
-            ...acc,
-            [key]: propertyValue
-        };
-    }, {});
-};

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

@@ -1,27 +0,0 @@
-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
-}: {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-  blockStyles: any;
-}): CSSStyleDeclaration | Record<string, string | undefined> {
-  const responsiveStyles = block.responsiveStyles;
-  if (!responsiveStyles) {
-    return {};
-  }
-  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);
-  return newStyles;
-}

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

@@ -1,58 +0,0 @@
-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;
-  } else if (value < 0) {
-    // TODO: why are negative values not allowed?
-    return 0;
-  } else {
-    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 (SHOW_WARNINGS) {
-        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 (SHOW_WARNINGS) {
-        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
-          };
-        } else {
-          return acc;
-        }
-      } else if (propertyValue === '0') {
-        // 0 edge case needs to be handled
-        return {
-          ...acc,
-          [key]: 0
-        };
-      }
-    }
-    return {
-      ...acc,
-      [key]: propertyValue
-    };
-  }, {});
-}