@builder.io/sdk-react-native 0.4.1 → 0.4.2

package/dist/types/input.d.ts

@@ -0,0 +1,121 @@
+export interface Input {
+    /** This is the name of the component prop this input represents */
+    name: string;
+    /** A friendlier name to show in the UI if the component prop name is not ideal for end users */
+    friendlyName?: string;
+    /** @hidden @deprecated */
+    description?: string;
+    /** A default value to use */
+    defaultValue?: any;
+    /**
+     * The type of input to use, such as 'text'
+     *
+     * See all available inputs [here](https://www.builder.io/c/docs/custom-react-components#input-types)
+     * and you can create your own custom input types and associated editor UIs with [plugins](https://www.builder.io/c/docs/extending/plugins)
+     */
+    type: string;
+    /** Is this input mandatory or not */
+    required?: boolean;
+    /** @hidden */
+    autoFocus?: boolean;
+    subFields?: Input[];
+    /**
+     * Additional text to render in the UI to give guidance on how to use this
+     *
+     * @example
+     * ```js
+     * helperText: 'Be sure to use a proper URL, starting with "https://"'
+     * 111
+     */
+    helperText?: string;
+    /** @hidden */
+    allowedFileTypes?: string[];
+    /** @hidden */
+    imageHeight?: number;
+    /** @hidden */
+    imageWidth?: number;
+    /** @hidden */
+    mediaHeight?: number;
+    /** @hidden */
+    mediaWidth?: number;
+    /** @hidden */
+    hideFromUI?: boolean;
+    /** @hidden */
+    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;
+    /**
+     * Set this to `true` if you want this component to be translatable
+     */
+    localized?: boolean;
+    /** @hidden */
+    options?: {
+        [key: string]: any;
+    };
+    /**
+     * For "text" input type, specifying an enum will show a dropdown of options instead
+     */
+    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;
+    };
+    /**
+     * Set this to `true` to put this under the "show more" section of
+     * the options editor. Useful for things that are more advanced
+     * or more rarely used and don't need to be too prominent
+     */
+    advanced?: boolean;
+    /** @hidden */
+    /** @hidden */
+    code?: boolean;
+    /** @hidden */
+    richText?: boolean;
+    /** @hidden */
+    showIf?: ((options: Map<string, any>) => boolean) | string;
+    /** @hidden */
+    copyOnAdd?: boolean;
+    /**
+     * 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/dist/types/targets.d.ts

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

package/dist/types/typescript.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/blocks/img/component-info.js

@@ -7,7 +7,7 @@ const componentInfo = {
       name: "image",
       bubble: true,
       type: "file",
-      allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+      allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
       required: true
     }
   ],

package/src/components/render-block/render-block.jsx

@@ -103,32 +103,6 @@ function RenderBlock(props) {
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
-  function childrenContext() {
-    const getInheritedTextStyles = () => {
-      if (TARGET !== "reactNative") {
-        return {};
-      }
-      return extractTextStyles(
-        getReactNativeBlockStyles({
-          block: useBlock(),
-          context: props.context,
-          blockStyles: attributes().style,
-        })
-      );
-    };
-    return {
-      apiKey: props.context.apiKey,
-      apiVersion: props.context.apiVersion,
-      localState: props.context.localState,
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      content: props.context.content,
-      context: props.context.context,
-      registeredComponents: props.context.registeredComponents,
-      inheritedStyles: getInheritedTextStyles(),
-    };
-  }
-
   function renderComponentProps() {
     return {
       blockChildren: useBlock().children ?? [],
@@ -148,10 +122,28 @@ function RenderBlock(props) {
               },
             }),
       },
-      context: childrenContext(),
+      context: childrenContext,
     };
   }
 
+  const [childrenContext, setChildrenContext] = useState(() => ({
+    apiKey: props.context.apiKey,
+    apiVersion: props.context.apiVersion,
+    localState: props.context.localState,
+    rootState: props.context.rootState,
+    rootSetState: props.context.rootSetState,
+    content: props.context.content,
+    context: props.context.context,
+    registeredComponents: props.context.registeredComponents,
+    inheritedStyles: extractTextStyles(
+      getReactNativeBlockStyles({
+        block: useBlock(),
+        context: props.context,
+        blockStyles: attributes().style,
+      })
+    ),
+  }));
+
   return (
     <>
       {canShowBlock() ? (
@@ -183,7 +175,7 @@ function RenderBlock(props) {
                       <RenderBlock
                         key={"render-block-" + child.id}
                         block={child}
-                        context={childrenContext()}
+                        context={childrenContext}
                       />
                     ))}
 
@@ -191,7 +183,7 @@ function RenderBlock(props) {
                       <BlockStyles
                         key={"block-style-" + child.id}
                         block={child}
-                        context={childrenContext()}
+                        context={childrenContext}
                       />
                     ))}
                   </Tag>

package/src/components/render-block/render-repeated-block.jsx

@@ -8,26 +8,16 @@ import {
   Image,
   Text,
 } from "react-native";
-import { useContext } from "react";
+import { useState, useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block";
 
 function RenderRepeatedBlock(props) {
+  const [store, setStore] = useState(() => props.repeatContext);
+
   return (
-    <BuilderContext.Provider
-      value={{
-        content: props.repeatContext.content,
-        localState: props.repeatContext.localState,
-        rootState: props.repeatContext.rootState,
-        rootSetState: props.repeatContext.rootSetState,
-        context: props.repeatContext.context,
-        apiKey: props.repeatContext.apiKey,
-        registeredComponents: props.repeatContext.registeredComponents,
-        inheritedStyles: props.repeatContext.inheritedStyles,
-        apiVersion: props.repeatContext.apiVersion,
-      }}
-    >
-      <RenderBlock block={props.block} context={props.repeatContext} />
+    <BuilderContext.Provider value={store}>
+      <RenderBlock block={props.block} context={store} />
     </BuilderContext.Provider>
   );
 }

package/src/components/render-blocks.jsx

@@ -61,6 +61,7 @@ function RenderBlocks(props) {
       contentContainerStyle={props.styleProp}
       onClick={(event) => onClick()}
       onMouseEnter={(event) => onMouseEnter()}
+      onKeyPress={(event) => onClick()}
     >
       {props.blocks ? (
         <>

package/src/components/render-content/render-content.jsx

@@ -45,38 +45,32 @@ function RenderContent(props) {
 
   const [overrideContent, setOverrideContent] = useState(() => null);
 
-  const [useContent, setUseContent] = useState(() =>
-    getContentInitialValue({
-      content: props.content,
-      data: props.data,
-    })
-  );
-
   function mergeNewContent(newContent) {
-    setUseContent({
-      ...useContent,
+    builderContextSignal.content = {
+      ...builderContextSignal.content,
       ...newContent,
       data: {
-        ...useContent?.data,
+        ...builderContextSignal.content?.data,
         ...newContent?.data,
       },
       meta: {
-        ...useContent?.meta,
+        ...builderContextSignal.content?.meta,
         ...newContent?.meta,
         breakpoints:
-          newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+          newContent?.meta?.breakpoints ||
+          builderContextSignal.content?.meta?.breakpoints,
       },
-    });
+    };
   }
 
   function setBreakpoints(breakpoints) {
-    setUseContent({
-      ...useContent,
+    builderContextSignal.content = {
+      ...builderContextSignal.content,
       meta: {
-        ...useContent?.meta,
+        ...builderContextSignal.content?.meta,
         breakpoints,
       },
-    });
+    };
   }
 
   const [update, setUpdate] = useState(() => 0);
@@ -85,41 +79,10 @@ function RenderContent(props) {
     checkIsDefined(props.canTrack) ? props.canTrack : true
   );
 
-  const [contentState, setContentState] = useState(() =>
-    getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale,
-    })
-  );
-
   function contentSetState(newRootState) {
-    setContentState(newRootState);
+    builderContextSignal.rootState = newRootState;
   }
 
-  const [allRegisteredComponents, setAllRegisteredComponents] = useState(() =>
-    [
-      ...getDefaultRegisteredComponents(),
-      // While this `components` object is deprecated, we must maintain support for it.
-      // Since users are able to override our default components, we need to make sure that we do not break such
-      // existing usage.
-      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-      // which is the new standard way of providing custom components, and must therefore take precedence.
-      ...components,
-      ...(props.customComponents || []),
-    ].reduce(
-      (acc, { component, ...curr }) => ({
-        ...acc,
-        [curr.name]: {
-          component:
-            TARGET === "vue3" ? wrapComponentRef(component) : component,
-          ...curr,
-        },
-      }),
-      {}
-    )
-  );
-
   function processMessage(event) {
     const { data } = event;
     if (data) {
@@ -127,7 +90,7 @@ function RenderContent(props) {
         case "builder.configureSdk": {
           const messageContent = data.data;
           const { breakpoints, contentId } = messageContent;
-          if (!contentId || contentId !== useContent?.id) {
+          if (!contentId || contentId !== builderContextSignal.content?.id) {
             return;
           }
           if (breakpoints) {
@@ -161,13 +124,13 @@ function RenderContent(props) {
 
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = useContent?.data?.jsCode;
+    const jsCode = builderContextSignal.content?.data?.jsCode;
     if (jsCode) {
       evaluate({
         code: jsCode,
         context: props.context || {},
         localState: undefined,
-        rootState: contentState,
+        rootState: builderContextSignal.rootState,
         rootSetState: contentSetState,
       });
     }
@@ -178,9 +141,9 @@ function RenderContent(props) {
   const [clicked, setClicked] = useState(() => false);
 
   function onClick(event) {
-    if (useContent) {
-      const variationId = useContent?.testVariationId;
-      const contentId = useContent?.id;
+    if (builderContextSignal.content) {
+      const variationId = builderContextSignal.content?.testVariationId;
+      const contentId = builderContextSignal.content?.id;
       _track({
         type: "click",
         canTrack: canTrackToUse,
@@ -202,7 +165,7 @@ function RenderContent(props) {
         code: group,
         context: props.context || {},
         localState: undefined,
-        rootState: contentState,
+        rootState: builderContextSignal.rootState,
         rootSetState: contentSetState,
       })
     );
@@ -213,7 +176,7 @@ function RenderContent(props) {
       .then((response) => response.json())
       .then((json) => {
         const newState = {
-          ...contentState,
+          ...builderContextSignal.rootState,
           [key]: json,
         };
         contentSetState(newState);
@@ -224,7 +187,7 @@ function RenderContent(props) {
   }
 
   function runHttpRequests() {
-    const requests = useContent?.data?.httpRequests ?? {};
+    const requests = builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
@@ -241,7 +204,7 @@ function RenderContent(props) {
       window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
-            state: contentState,
+            state: builderContextSignal.rootState,
             ref: {
               name: props.model,
             },
@@ -259,6 +222,44 @@ function RenderContent(props) {
     })
   );
 
+  const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
+    content: getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    }),
+    localState: undefined,
+    rootState: getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    }),
+    rootSetState: contentSetState,
+    context: props.context || {},
+    apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
+    registeredComponents: [
+      ...getDefaultRegisteredComponents(),
+      // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(props.customComponents || []),
+    ].reduce(
+      (acc, { component, ...curr }) => ({
+        ...acc,
+        [curr.name]: {
+          component:
+            TARGET === "vue3" ? wrapComponentRef(component) : component,
+          ...curr,
+        },
+      }),
+      {}
+    ),
+    inheritedStyles: {},
+  }));
+
   useEffect(() => {
     if (!props.apiKey) {
       logger.error(
@@ -286,7 +287,7 @@ function RenderContent(props) {
               }
             : {}),
         });
-        Object.values(allRegisteredComponents).forEach(
+        Object.values(builderContextSignal.registeredComponents).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
@@ -298,9 +299,9 @@ function RenderContent(props) {
           emitStateUpdate
         );
       }
-      if (useContent) {
-        const variationId = useContent?.testVariationId;
-        const contentId = useContent?.id;
+      if (builderContextSignal.content) {
+        const variationId = builderContextSignal.content?.testVariationId;
+        const contentId = builderContextSignal.content?.id;
         _track({
           type: "impression",
           canTrack: canTrackToUse,
@@ -356,13 +357,16 @@ function RenderContent(props) {
   }, [props.content]);
   useEffect(() => {
     evaluateJsCode();
-  }, [useContent?.data?.jsCode, contentState]);
+  }, [
+    builderContextSignal.content?.data?.jsCode,
+    builderContextSignal.rootState,
+  ]);
   useEffect(() => {
     runHttpRequests();
-  }, [useContent?.data?.httpRequests]);
+  }, [builderContextSignal.content?.data?.httpRequests]);
   useEffect(() => {
     emitStateUpdate();
-  }, [contentState]);
+  }, [builderContextSignal.rootState]);
 
   useEffect(() => {
     return () => {
@@ -377,25 +381,13 @@ function RenderContent(props) {
   }, []);
 
   return (
-    <builderContext.Provider
-      value={{
-        content: useContent,
-        localState: undefined,
-        rootState: contentState,
-        rootSetState: TARGET === "qwik" ? undefined : contentSetState,
-        context: props.context || {},
-        apiKey: props.apiKey,
-        apiVersion: props.apiVersion,
-        registeredComponents: allRegisteredComponents,
-        inheritedStyles: {},
-      }}
-    >
-      {useContent ? (
+    <builderContext.Provider value={builderContextSignal}>
+      {builderContextSignal.content ? (
         <>
           <ScrollView
             ref={elementRef}
             onClick={(event) => onClick(event)}
-            builder-content-id={useContent?.id}
+            builder-content-id={builderContextSignal.content?.id}
             builder-model={props.model}
             {...(TARGET === "reactNative"
               ? {
@@ -421,15 +413,15 @@ function RenderContent(props) {
             {TARGET !== "reactNative" ? (
               <>
                 <RenderContentStyles
-                  contentId={useContent?.id}
-                  cssCode={useContent?.data?.cssCode}
-                  customFonts={useContent?.data?.customFonts}
+                  contentId={builderContextSignal.content?.id}
+                  cssCode={builderContextSignal.content?.data?.cssCode}
+                  customFonts={builderContextSignal.content?.data?.customFonts}
                 />
               </>
             ) : null}
 
             <RenderBlocks
-              blocks={useContent?.data?.blocks}
+              blocks={builderContextSignal.content?.data?.blocks}
               key={forceReRenderCount}
             />
           </ScrollView>

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.1"
+export const SDK_VERSION = "0.4.2"

package/dist/components/render-block/render-component-with-context.js

@@ -1,45 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_1 = require("react");
-const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
-const render_component_js_1 = __importDefault(require("./render-component.js"));
-function RenderComponentWithContext(props) {
-    return (React.createElement(builder_context_js_1.default.Provider, { value: {
-            content: props.context.content,
-            state: props.context.state,
-            context: props.context.context,
-            apiKey: props.context.apiKey,
-            registeredComponents: props.context.registeredComponents,
-            inheritedStyles: props.context.inheritedStyles,
-        } },
-        React.createElement(render_component_js_1.default, { componentRef: props.componentRef, componentOptions: props.componentOptions, blockChildren: props.blockChildren, context: props.context })));
-}
-exports.default = RenderComponentWithContext;

package/dist/functions/get-block-tag.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockTag = void 0;
-const react_native_1 = require("react-native");
-function getBlockTag(_block) {
-    return react_native_1.View;
-}
-exports.getBlockTag = getBlockTag;