@builder.io/sdk-react-native 0.1.4 → 0.1.6

package/dist/components/render-content/render-content.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/context/builder.context.js

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

package/dist/types/input.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

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

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

@@ -1,6 +1,5 @@
 const componentInfo = {
   name: "Core:Button",
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
     appearance: "none",

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

@@ -1,7 +1,6 @@
 import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Columns",
-  builtIn: true,
   inputs: [
     {
       name: "columns",

package/src/blocks/custom-code/component-info.js

@@ -1,7 +1,6 @@
 const componentInfo = {
   name: "Custom Code",
   static: true,
-  builtIn: true,
   requiredPermissions: ["editCode"],
   inputs: [
     {

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

@@ -2,7 +2,6 @@ import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Embed",
   static: true,
-  builtIn: true,
   inputs: [
     {
       name: "url",

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

@@ -1,6 +1,5 @@
 const componentInfo = {
   name: "Form:Form",
-  builtIn: true,
   defaults: {
     responsiveStyles: {
       large: {

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

@@ -2,7 +2,6 @@ const componentInfo = {
   name: "Fragment",
   static: true,
   hidden: true,
-  builtIn: true,
   canHaveChildren: true,
   noWrap: true
 };

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

@@ -2,7 +2,6 @@ import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Image",
   static: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
   defaultStyles: {
     position: "relative",

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

@@ -1,7 +1,6 @@
 const componentInfo = {
   name: "Raw:Img",
   hideFromInsertMenu: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
   inputs: [
     {

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

@@ -1,6 +1,5 @@
 const componentInfo = {
   name: "Form:Input",
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
   inputs: [
     {

package/src/blocks/raw-text/component-info.js

@@ -1,7 +1,6 @@
 const componentInfo = {
   name: "Builder:RawText",
   hideFromInsertMenu: true,
-  builtIn: true,
   inputs: [
     {
       name: "text",

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

@@ -1,7 +1,6 @@
 const componentInfo = {
   name: "Core:Section",
   static: true,
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
   inputs: [
     {

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

@@ -1,6 +1,5 @@
 const componentInfo = {
   name: "Form:Select",
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
   defaultStyles: {
     alignSelf: "flex-start"

package/src/blocks/submit-button/component-info.js

@@ -1,6 +1,5 @@
 const componentInfo = {
   name: "Form:SubmitButton",
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
   defaultStyles: {
     appearance: "none",

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

@@ -2,7 +2,6 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
-  builtIn: true,
   inputs: [
     {
       name: "symbol",

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

@@ -1,7 +1,6 @@
 const componentInfo = {
   name: "Text",
   static: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
   inputs: [
     {

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

@@ -1,6 +1,5 @@
 const componentInfo = {
   name: "Form:TextArea",
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
   inputs: [
     {

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

@@ -1,7 +1,6 @@
 const componentInfo = {
   name: "Video",
   canHaveChildren: true,
-  builtIn: true,
   defaultStyles: {
     minHeight: "20px",
     minWidth: "20px"

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

@@ -41,10 +41,30 @@ export default function RenderBlock(props) {
         });
   }
 
+  function proxyState() {
+    if (typeof Proxy === "undefined") {
+      console.error(
+        "no Proxy available in this environment, cannot proxy state."
+      );
+      return props.context.state;
+    }
+    const useState = new Proxy(props.context.state, {
+      set: (obj, prop, value) => {
+        // set the value on the state object, so that the event handler instantly gets the update.
+        obj[prop] = value;
+
+        // set the value in the context, so that the rest of the app gets the update.
+        props.context.setState?.(obj);
+        return true;
+      },
+    });
+    return useState;
+  }
+
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: props.context.state,
+      state: proxyState(),
       context: props.context.context,
     });
   }
@@ -126,6 +146,7 @@ export default function RenderBlock(props) {
       state: props.context.state,
       content: props.context.content,
       context: props.context.context,
+      setState: props.context.setState,
       registeredComponents: props.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };

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

@@ -10,6 +10,7 @@ export default function RenderRepeatedBlock(props) {
       value={{
         content: props.repeatContext.content,
         state: props.repeatContext.state,
+        setState: props.repeatContext.setState,
         context: props.repeatContext.context,
         apiKey: props.repeatContext.apiKey,
         registeredComponents: props.repeatContext.registeredComponents,

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

@@ -0,0 +1,57 @@
+const getCssFromFont = (font) => {
+  var _a, _b;
+  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+  const name = family.split(",")[0];
+  const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.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;
+      }
+      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;
+};
+const getFontCss = ({ customFonts }) => {
+  var _a;
+  return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+const getCss = ({
+  cssCode,
+  contentId
+}) => {
+  if (!cssCode) {
+    return "";
+  }
+  if (!contentId) {
+    return cssCode;
+  }
+  return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+export {
+  getCss,
+  getFontCss
+};

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 { 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/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
+};