add react-native inline-style styling support

Author: softmarshmallow

editor/components/codeui-code-options-control/code-options-control.tsx

@@ -72,6 +72,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
         value: "reactnative_with_styled_components",
         description: "with styled-components",
       },
+      {
+        name: "React Native",
+        value: "reactnative_with_inline_style",
+        description: "with inline-style",
+      },
       {
         name: "Flutter",
         value: "flutter_default",

editor/components/codeui-code-options-control/framework-options.ts

@@ -85,6 +85,11 @@ export const reactnative_presets = {
     language: Language.tsx,
     styling: "styled-components",
   },
+  reactnative_with_inline_style: <ReactNativeOption>{
+    framework: Framework.reactnative,
+    language: Language.tsx,
+    styling: "inline-style",
+  },
 };
 
 export const flutter_presets = {
@@ -129,6 +134,8 @@ export const all_preset_options_map__prod = {
   reactnative_default: reactnative_presets.reactnative_default,
   reactnative_with_styled_components:
     reactnative_presets.reactnative_with_styled_components,
+  reactnative_with_inline_style:
+    reactnative_presets.reactnative_with_inline_style,
   vanilla_default: vanilla_presets.vanilla_default,
   // react_with_css // NOT ON PRODUCTION
 };

editor/query/to-code-options-from-query.ts

@@ -47,6 +47,8 @@ export function get_framework_config(framework: string) {
       return reactnative_presets.reactnative_with_style_sheet;
     case "react-native-with-styled-components":
       return reactnative_presets.reactnative_with_styled_components;
+    case "react-native-with-inline-style":
+      return reactnative_presets.reactnative_with_inline_style;
     case "flutter":
     case "flutter_default":
     case "flutter-default":

editor/scaffolds/code/index.tsx

@@ -146,6 +146,9 @@ export function CodeSegment() {
                     "react-native-with-styled-components"
                   );
                   break;
+                case "inline-style":
+                  c = get_framework_config("react-native-with-inline-style");
+                  break;
               }
               break;
             }

packages/builder-config-preset/index.ts

@@ -99,6 +99,16 @@ export const reactnative_presets = {
     },
     component_declaration_style: _react_component_declaration_style,
   },
+  reactnative_with_inline_style: <config.ReactNativeFrameworkConfig>{
+    framework: Framework.reactnative,
+    language: Language.tsx,
+    svg: null, // TODO:
+    gradient: null, // TODO:
+    styling: {
+      type: "inline-style",
+    },
+    component_declaration_style: _react_component_declaration_style,
+  },
 };
 
 export const vanilla_presets = {

packages/builder-config/framework-reactnative/reactnative-config-styling.ts

@@ -1,4 +1,5 @@
 export type ReactNativeStylingStrategy =
+  | ReactNativeInlineStyleConfig
   | ReactNativeStyleSheetConfig
   | ReactNativeStyledComponentsConfig;
 
@@ -13,6 +14,19 @@ export interface ReactNativeStyleSheetConfig {
   module: "react-native";
 }
 
+/**
+ * Inline css styling for react-native without using StyleSheet
+ *
+ * ```tsx
+ * // examples
+ * <View style={{backgroundColor: "black", width: 50, height: 50}}/>
+ * <View style={box_style}/>
+ * ```
+ */
+export interface ReactNativeInlineStyleConfig {
+  type: "inline-style";
+}
+
 export type ReactNativeStyledComponentsConfig =
   | ReactStyledComponentsNativeConfig
   | ReactEmotionNativeStyledConfig;

packages/builder-react-native/index.ts

@@ -2,5 +2,6 @@ export * from "./rn-import-specifications";
 export * from "./rn-widgets";
 
 // building strategies
+export * from "./rn-build-inline-style-widget";
 export * from "./rn-build-stylesheet-widget";
 export * from "./rn-build-styled-component-widget";

packages/builder-react-native/rn-build-inline-style-widget/from-static-widget-tree.ts

@@ -0,0 +1,23 @@
+import { JsxWidget } from "@web-builder/core";
+import {
+  react as react_config,
+  reactnative as reactnative_config,
+} from "@designto/config";
+import { ReactNativeInlineStyleBuilder } from "./rn-inline-style-module-builder";
+
+export function finalizeReactNativeWidget_InlineStyle(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: reactnative_config.ReactNativeInlineStyleConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+) {
+  const builder = new ReactNativeInlineStyleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}

packages/builder-react-native/rn-build-inline-style-widget/index.ts

@@ -0,0 +1 @@
+export * from "./from-static-widget-tree";

packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts

@@ -0,0 +1,194 @@
+import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
+import {
+  react as react_config,
+  reactnative as reactnative_config,
+} from "@designto/config";
+import type { JsxWidget } from "@web-builder/core";
+import {
+  react_imports,
+  ReactWidgetModuleExportable,
+  makeReactModuleFile,
+} from "@web-builder/react-core";
+import {
+  buildJsx,
+  getWidgetStylesConfigMap,
+  JSXWithoutStyleElementConfig,
+  JSXWithStyleElementConfig,
+  WidgetStyleConfigMap,
+} from "@web-builder/core/builders";
+import {
+  BlockStatement,
+  Identifier,
+  ImportDeclaration,
+  JSXAttribute,
+  ObjectLiteralExpression,
+  PropertyAssignment,
+  Return,
+  ScopedVariableNamer,
+  TemplateLiteral,
+} from "coli";
+import { cssToJson } from "@web-builder/styles/_utils";
+import { CSSProperties } from "@coli.codes/css";
+import { reactnative_imports } from "..";
+
+/**
+ * CSS In JS Style builder for React Framework
+ *
+ *
+ * css in js is a pattern that allows you to use css as a object in jsx, to property `style`.
+ *
+ * ```tsx
+ * // output be like...
+ * <div style={{ color: "red" }}/>
+ * ```
+ *
+ */
+export class ReactNativeInlineStyleBuilder {
+  private readonly entry: JsxWidget;
+  private readonly widgetName: string;
+  readonly config: reactnative_config.ReactNativeInlineStyleConfig;
+  private readonly namer: ScopedVariableNamer;
+  private readonly stylesConfigWidgetMap: WidgetStyleConfigMap;
+
+  constructor({
+    entry,
+    config,
+  }: {
+    entry: JsxWidget;
+    config: reactnative_config.ReactNativeInlineStyleConfig;
+  }) {
+    this.entry = entry;
+    this.widgetName = entry.key.name;
+    this.config = config;
+    this.namer = new ScopedVariableNamer(
+      entry.key.id,
+      ReservedKeywordPlatformPresets.react
+    );
+    this.stylesConfigWidgetMap = getWidgetStylesConfigMap(entry, {
+      namer: this.namer,
+      rename_tag: false,
+    });
+  }
+
+  private stylesConfig(
+    id: string
+  ): JSXWithStyleElementConfig | JSXWithoutStyleElementConfig {
+    return this.stylesConfigWidgetMap.get(id);
+  }
+
+  private jsxBuilder(widget: JsxWidget) {
+    return buildJsx(
+      widget,
+      {
+        styledConfig: (id) => {
+          const cfg = this.stylesConfig(id);
+          const _default_attr = cfg.attributes;
+
+          const existingstyleattr = _default_attr?.find(
+            // where style refers to react-native's jsx style attribute
+            (a) => a.name.name === "style"
+          );
+
+          let style: JSXAttribute;
+          if (existingstyleattr) {
+            // ignore this case. (element already with style attriibute may be svg element)
+            // this case is not supported. (should supported if the logic changes)
+          } else {
+            //
+            const styledata: CSSProperties =
+              (cfg as JSXWithStyleElementConfig).style ?? {};
+            const reactStyleData = cssToJson(styledata);
+            const properties: PropertyAssignment[] = Object.keys(
+              reactStyleData
+            ).map(
+              (key) =>
+                new PropertyAssignment({
+                  name: key as unknown as Identifier,
+                  initializer: new TemplateLiteral(reactStyleData[key]),
+                })
+            );
+
+            style = new JSXAttribute(
+              "style",
+              new BlockStatement(
+                new ObjectLiteralExpression({
+                  properties: properties,
+                })
+              )
+            );
+          }
+
+          const newattributes = [
+            ...(_default_attr ?? []),
+            //
+            style,
+          ];
+
+          cfg.attributes = newattributes;
+
+          return cfg;
+        },
+      },
+      {
+        self_closing_if_possible: true,
+      }
+    );
+  }
+
+  partImports() {
+    return [
+      react_imports.import_react_from_react,
+      reactnative_imports.import_react_prepacked,
+    ];
+  }
+
+  partBody(): BlockStatement {
+    let jsxTree = this.jsxBuilder(this.entry);
+    return new BlockStatement(new Return(jsxTree));
+  }
+
+  asExportableModule() {
+    const body = this.partBody();
+    const imports = this.partImports();
+    return new ReactNativeInlineStyleWidgetModuleExportable(this.widgetName, {
+      body,
+      imports,
+    });
+  }
+}
+
+export class ReactNativeInlineStyleWidgetModuleExportable extends ReactWidgetModuleExportable {
+  constructor(
+    name,
+    {
+      body,
+      imports,
+    }: {
+      body: BlockStatement;
+      imports: ImportDeclaration[];
+    }
+  ) {
+    super({
+      name,
+      body,
+      imports,
+    });
+  }
+
+  asFile({
+    exporting,
+  }: {
+    exporting: react_config.ReactComponentExportingCofnig;
+  }) {
+    return makeReactModuleFile({
+      name: this.name,
+      path: "src/components",
+      imports: this.imports,
+      declarations: [],
+      body: this.body,
+      config: {
+        exporting: exporting,
+      },
+    });
+  }
+}