@builder.io/sdk-svelte 0.8.1 → 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/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
-    };
-  }, {});
-}