@builder.io/sdk-react-native 0.1.3 → 0.1.5

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

@@ -1,65 +1,22 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import { useState } from "react";
+import RenderInlinedStyles from "../../render-inlined-styles";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
 
 export default function RenderContentStyles(props) {
-  function getCssFromFont(font) {
-    // TODO: compute what font sizes are used and only load those.......
-    const family =
-      font.family +
-      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
-    const url = font.fileUrl ?? font?.files?.regular;
-    let str = "";
-    if (url && family && name) {
-      str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-    }
-    if (font.files) {
-      for (const weight in font.files) {
-        const isNumber = String(Number(weight)) === weight;
-        if (!isNumber) {
-          continue;
-        }
-        // TODO: maybe limit number loaded
-        const weightUrl = font.files[weight];
-        if (weightUrl && weightUrl !== url) {
-          str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-        }
-      }
-    }
-    return str;
-  }
-
-  function getFontCss({ customFonts }) {
-    // TODO: flag for this
-    // if (!builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
-  }
-
-  function injectedStyles() {
-    return `
-${props.cssCode || ""}
+  const [injectedStyles, setInjectedStyles] = useState(
+    () => `
+${getCss({
+  cssCode: props.cssCode,
+  contentId: props.contentId,
+})}
 ${getFontCss({
   customFonts: props.customFonts,
-})}`;
-  }
+})}
+`
+  );
 
-  return <RenderInlinedStyles styles={injectedStyles()} />;
+  return <RenderInlinedStyles styles={injectedStyles} />;
 }

package/src/components/render-content/index.js

@@ -1,4 +1,4 @@
-import { default as default2 } from "./render-content.js";
+import { default as default2 } from "./render-content";
 export {
   default2 as default
 };

package/src/components/render-content/render-content.helpers.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const getContextStateInitialValue = ({
+  content,
+  data,
+  locale
+}) => {
+  var _a, _b, _c;
+  const defaultValues = {};
+  (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+    var _a2;
+    if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
+      defaultValues[input.name] = input.defaultValue;
+    }
+  });
+  const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+  return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
+};
+const getContentInitialValue = ({
+  content,
+  data
+}) => {
+  return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
+    data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
+    meta: content == null ? void 0 : content.meta
+  });
+};
+export {
+  getContentInitialValue,
+  getContextStateInitialValue
+};

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

@@ -14,8 +14,8 @@ import {
   createRegisterComponentMessage,
 } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import {
   registerInsertMenu,
@@ -23,6 +23,10 @@ import {
 } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import {
+  getContentInitialValue,
+  getContextStateInitialValue,
+} from "./render-content.helpers.js";
 
 export default function RenderContent(props) {
   const elementRef = useRef(null);
@@ -30,56 +34,58 @@ export default function RenderContent(props) {
 
   const [overrideContent, setOverrideContent] = useState(() => null);
 
-  function useContent() {
-    if (!props.content && !overrideContent) {
-      return undefined;
-    }
-    return {
-      ...props.content,
-      ...overrideContent,
+  const [useContent, setUseContent] = useState(() =>
+    getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    })
+  );
+
+  function mergeNewContent(newContent) {
+    setUseContent({
+      ...useContent,
+      ...newContent,
       data: {
-        ...props.content?.data,
-        ...props.data,
-        ...overrideContent?.data,
+        ...useContent?.data,
+        ...newContent?.data,
       },
       meta: {
-        ...props.content?.meta,
-        ...overrideContent?.meta,
+        ...useContent?.meta,
+        ...newContent?.meta,
         breakpoints:
-          useBreakpoints ||
-          overrideContent?.meta?.breakpoints ||
-          props.content?.meta?.breakpoints,
+          newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
       },
-    };
+    });
   }
 
-  const [update, setUpdate] = useState(() => 0);
+  function setBreakpoints(breakpoints) {
+    setUseContent({
+      ...useContent,
+      meta: {
+        ...useContent?.meta,
+        breakpoints,
+      },
+    });
+  }
 
-  const [useBreakpoints, setUseBreakpoints] = useState(() => null);
+  const [update, setUpdate] = useState(() => 0);
 
   const [canTrackToUse, setCanTrackToUse] = useState(() =>
     checkIsDefined(props.canTrack) ? props.canTrack : true
   );
 
-  const [overrideState, setOverrideState] = useState(() => ({}));
+  const [contentState, setContentState] = useState(() =>
+    getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    })
+  );
 
-  function contentState() {
-    return {
-      ...props.content?.data?.state,
-      ...props.data,
-      ...(props.locale
-        ? {
-            locale: props.locale,
-          }
-        : {}),
-      ...overrideState,
-    };
+  function setContextState(newState) {
+    setContentState(newState);
   }
 
-  const [contextContext, setContextContext] = useState(
-    () => props.context || {}
-  );
-
   const [allRegisteredComponents, setAllRegisteredComponents] = useState(() =>
     [
       ...getDefaultRegisteredComponents(),
@@ -106,10 +112,12 @@ export default function RenderContent(props) {
         case "builder.configureSdk": {
           const messageContent = data.data;
           const { breakpoints, contentId } = messageContent;
-          if (!contentId || contentId !== useContent?.()?.id) {
+          if (!contentId || contentId !== useContent?.id) {
             return;
           }
-          setUseBreakpoints(breakpoints);
+          if (breakpoints) {
+            setBreakpoints(breakpoints);
+          }
           setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
           break;
         }
@@ -122,7 +130,7 @@ export default function RenderContent(props) {
             messageContent.modelName;
           const contentData = messageContent.data;
           if (key === props.model) {
-            setOverrideContent(contentData);
+            mergeNewContent(contentData);
             setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
           }
 
@@ -138,12 +146,12 @@ export default function RenderContent(props) {
 
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = useContent?.()?.data?.jsCode;
+    const jsCode = useContent?.data?.jsCode;
     if (jsCode) {
       evaluate({
         code: jsCode,
-        context: contextContext,
-        state: contentState(),
+        context: props.context || {},
+        state: contentState,
       });
     }
   }
@@ -153,9 +161,9 @@ export default function RenderContent(props) {
   const [clicked, setClicked] = useState(() => false);
 
   function onClick(event) {
-    if (useContent()) {
-      const variationId = useContent?.()?.testVariationId;
-      const contentId = useContent?.()?.id;
+    if (useContent) {
+      const variationId = useContent?.testVariationId;
+      const contentId = useContent?.id;
       _track({
         type: "click",
         canTrack: canTrackToUse,
@@ -175,8 +183,8 @@ export default function RenderContent(props) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
         code: group,
-        context: contextContext,
-        state: contentState(),
+        context: props.context || {},
+        state: contentState,
       })
     );
   }
@@ -185,11 +193,11 @@ export default function RenderContent(props) {
     fetch(url)
       .then((response) => response.json())
       .then((json) => {
-        const newOverrideState = {
-          ...overrideState,
+        const newState = {
+          ...contentState,
           [key]: json,
         };
-        setOverrideState(newOverrideState);
+        setContextState(newState);
       })
       .catch((err) => {
         console.log("error fetching dynamic data", url, err);
@@ -197,7 +205,7 @@ export default function RenderContent(props) {
   }
 
   function runHttpRequests() {
-    const requests = useContent?.()?.data?.httpRequests ?? {};
+    const requests = useContent?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
@@ -214,7 +222,7 @@ export default function RenderContent(props) {
       window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
-            state: contentState(),
+            state: contentState,
             ref: {
               name: props.model,
             },
@@ -226,8 +234,7 @@ export default function RenderContent(props) {
 
   function shouldRenderContentStyles() {
     return Boolean(
-      (useContent?.()?.data?.cssCode ||
-        useContent?.()?.data?.customFonts?.length) &&
+      (useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
         TARGET !== "reactNative"
     );
   }
@@ -266,9 +273,9 @@ export default function RenderContent(props) {
           emitStateUpdate
         );
       }
-      if (useContent()) {
-        const variationId = useContent?.()?.testVariationId;
-        const contentId = useContent?.()?.id;
+      if (useContent) {
+        const variationId = useContent?.testVariationId;
+        const contentId = useContent?.id;
         _track({
           type: "impression",
           canTrack: canTrackToUse,
@@ -303,7 +310,7 @@ export default function RenderContent(props) {
             apiKey: props.apiKey,
           }).then((content) => {
             if (content) {
-              setOverrideContent(content);
+              mergeNewContent(content);
             }
           });
         }
@@ -316,13 +323,13 @@ export default function RenderContent(props) {
 
   useEffect(() => {
     evaluateJsCode();
-  }, [useContent?.()?.data?.jsCode, contentState()]);
+  }, [useContent?.data?.jsCode, contentState]);
   useEffect(() => {
     runHttpRequests();
-  }, [useContent?.()?.data?.httpRequests]);
+  }, [useContent?.data?.httpRequests]);
   useEffect(() => {
     emitStateUpdate();
-  }, [contentState()]);
+  }, [contentState]);
 
   useEffect(() => {
     return () => {
@@ -339,30 +346,32 @@ export default function RenderContent(props) {
   return (
     <builderContext.Provider
       value={{
-        content: useContent(),
-        state: contentState(),
-        context: contextContext,
+        content: useContent,
+        state: contentState,
+        setState: setContextState,
+        context: props.context || {},
         apiKey: props.apiKey,
         registeredComponents: allRegisteredComponents,
       }}
     >
-      {useContent() ? (
+      {useContent ? (
         <>
           <View
             ref={elementRef}
             onClick={(event) => onClick(event)}
-            builder-content-id={useContent?.()?.id}
+            builder-content-id={useContent?.id}
             builder-model={props.model}
           >
             {shouldRenderContentStyles() ? (
               <RenderContentStyles
-                cssCode={useContent?.()?.data?.cssCode}
-                customFonts={useContent?.()?.data?.customFonts}
+                contentId={useContent?.id}
+                cssCode={useContent?.data?.cssCode}
+                customFonts={useContent?.data?.customFonts}
               />
             ) : null}
 
             <RenderBlocks
-              blocks={useContent?.()?.data?.blocks}
+              blocks={useContent?.data?.blocks}
               key={forceReRenderCount}
             />
           </View>

package/src/components/render-inlined-styles.jsx

@@ -15,9 +15,9 @@ export default function RenderInlinedStyles(props) {
 
   return (
     <>
-      {TARGET === "svelte" ? (
+      {TARGET === "svelte" || TARGET === "qwik" ? (
         <>
-          <View dangerouslySetInnerHTML={{ __html: injectedStyleScript() }} />
+          <View dangerouslySetInnerHTML={{ __html: props.styles }} />
         </>
       ) : (
         <View>

package/src/constants/builder-registered-components.js

@@ -14,20 +14,20 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),

package/src/context/builder.context.js

@@ -3,6 +3,8 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
+  setState() {
+  },
   apiKey: null,
   registeredComponents: {},
   inheritedStyles: {}

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

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/symbol/symbol.js";
-import { default as default6 } from "../blocks/button/button.js";
-import { default as default7 } from "../blocks/section/section.js";
-import { default as default8 } from "../blocks/fragment/fragment.js";
-import { default as default9 } from "../components/render-content/render-content.js";
+import { default as default2 } from "../blocks/columns/columns";
+import { default as default3 } from "../blocks/image/image";
+import { default as default4 } from "../blocks/text/text";
+import { default as default5 } from "../blocks/symbol/symbol";
+import { default as default6 } from "../blocks/button/button";
+import { default as default7 } from "../blocks/section/section";
+import { default as default8 } from "../blocks/fragment/fragment";
+import { default as default9 } from "../components/render-content/render-content";
 export {
   default6 as Button,
   default2 as Columns,