add styled-components support for react-native (styled-components/native | @emotion/native)

softmarshmallow · softmarshmallow · commit 4a05757fdd1a · 2022-02-19T19:49:09.000+09:00
diff --git a/README.md b/README.md
@@ -25,6 +25,65 @@ yarn editor
 
 update pulling - `git submodule update --init --recursive`
 
+## Platforms / Frameworks
+
+| **Frameworks**     |       |
+| ------------------ | :---: |
+| ReactJS            |  ✅   |
+| Flutter            |  ✅   |
+| React Native       |  ✅   |
+| Vanilla (html/css) |  ✅   |
+| Vue                | (wip) |
+
+| **ReactJS**         |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@emotion/styled`   |  ✅   |
+| css-modules         |  ✅   |
+| inline-css          |  ✅   |
+| `@mui/material`     | (wip) |
+| breakpoints         | (wip) |
+| components          | (wip) |
+
+| **ReactNative**                |       |
+| ------------------------------ | :---: |
+| `StyleSheet`                   |  ✅   |
+| `styled-components/native`     |  ✅   |
+| `@emotion/native`              |  ✅   |
+| `react-native-linear-gradient` | (wip) |
+| `react-native-svg`             | (wip) |
+| `expo`                         | (wip) |
+
+| **Vanilla** |               |
+| ----------- | :-----------: |
+| reflect-ui  | right-aligned |
+| css         |      ✅       |
+| scss        |   are neat    |
+
+| **Flutter** |       |
+| ----------- | :---: |
+| material    |  ✅   |
+| cupertino   | (wip) |
+| reflect-ui  | (wip) |
+
+| **Svelte**          |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@mui/material`     | (wip) |
+
+| **Vue**             |       |
+| ------------------- | :---: |
+| `styled-components` |  ✅   |
+| `@mui/material`     | (wip) |
+
+| **iOS** |       |
+| ------- | :---: |
+| SwiftUI | (wip) |
+
+| **Android**     |       |
+| --------------- | :---: |
+| Jetpack Compose | (wip) |
+
 ## What does it mean?
 
 ### By "design". What does it mean?
diff --git a/editor/components/codeui-code-options-control/code-options-control.tsx b/editor/components/codeui-code-options-control/code-options-control.tsx
@@ -67,6 +67,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
         value: "reactnative_default",
         description: "react-native",
       },
+      {
+        name: "React Native",
+        value: "reactnative_with_styled_components",
+        description: "with styled-components",
+      },
       {
         name: "Flutter",
         value: "flutter_default",
diff --git a/editor/components/codeui-code-options-control/framework-options.ts b/editor/components/codeui-code-options-control/framework-options.ts
@@ -127,6 +127,8 @@ export const all_preset_options_map__prod = {
   react_with_inline_css: react_presets.react_with_inline_css,
   react_with_css_module: react_presets.react_with_css_module,
   reactnative_default: reactnative_presets.reactnative_default,
+  reactnative_with_styled_components:
+    reactnative_presets.reactnative_with_styled_components,
   vanilla_default: vanilla_presets.vanilla_default,
   // react_with_css // NOT ON PRODUCTION
 };
diff --git a/editor/query/to-code-options-from-query.ts b/editor/query/to-code-options-from-query.ts
@@ -43,6 +43,10 @@ export function get_framework_config(framework: string) {
       return react_presets.react_with_css_module;
     case "react-native":
       return reactnative_presets.reactnative_default;
+    case "react-native-with-style-sheet":
+      return reactnative_presets.reactnative_with_style_sheet;
+    case "react-native-with-styled-components":
+      return reactnative_presets.reactnative_with_styled_components;
     case "flutter":
     case "flutter_default":
     case "flutter-default":
diff --git a/editor/scaffolds/code/index.tsx b/editor/scaffolds/code/index.tsx
@@ -137,7 +137,16 @@ export function CodeSegment() {
               break;
             }
             case "react-native": {
-              c = get_framework_config("react-native");
+              switch (o.styling) {
+                case "style-sheet":
+                  c = get_framework_config("react-native-with-style-sheet");
+                  break;
+                case "styled-components":
+                  c = get_framework_config(
+                    "react-native-with-styled-components"
+                  );
+                  break;
+              }
               break;
             }
             case "flutter":
diff --git a/externals/coli b/externals/coli
@@ -1 +1 @@
-Subproject commit e2035df31afe79fbaa7de88dc3fdf118b8f71178
+Subproject commit 0b2bf9ce40e515061fef087495dc52faeed24d46
diff --git a/packages/builder-config-preset/index.ts b/packages/builder-config-preset/index.ts
@@ -77,6 +77,28 @@ export const reactnative_presets = {
     },
     component_declaration_style: _react_component_declaration_style,
   },
+  reactnative_with_style_sheet: <config.ReactNativeFrameworkConfig>{
+    framework: Framework.reactnative,
+    language: Language.tsx,
+    svg: null, // TODO:
+    gradient: null, // TODO:
+    styling: {
+      type: "react-native-stylesheet",
+      module: "react-native",
+    },
+    component_declaration_style: _react_component_declaration_style,
+  },
+  reactnative_with_styled_components: <config.ReactNativeFrameworkConfig>{
+    framework: Framework.reactnative,
+    language: Language.tsx,
+    svg: null, // TODO:
+    gradient: null, // TODO:
+    styling: {
+      type: "styled-components",
+      module: "styled-components/native",
+    },
+    component_declaration_style: _react_component_declaration_style,
+  },
 };
 
 export const vanilla_presets = {
diff --git a/packages/builder-react-native/index.ts b/packages/builder-react-native/index.ts
@@ -3,3 +3,4 @@ export * from "./rn-widgets";
 
 // building strategies
 export * from "./rn-build-stylesheet-widget";
+export * from "./rn-build-styled-component-widget";
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/from-static-widget-tree.ts b/packages/builder-react-native/rn-build-styled-component-widget/from-static-widget-tree.ts
@@ -0,0 +1,30 @@
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import {
+  reactnative as rn_config,
+  react as react_config,
+} from "@designto/config";
+import { ReactNativeStyledComponentsModuleBuilder } from "./rn-styled-components-module-builder";
+
+/**
+ * standard `StyleSheet.create` pattern for react-native
+ * @todo - this is not fully implemented
+ * @param entry
+ * @returns
+ */
+export function finalizeReactNativeWidget_StyledComponents(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: rn_config.ReactNativeStyledComponentsConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+): ReactComponentExportResult {
+  const builder = new ReactNativeStyledComponentsModuleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/index.ts b/packages/builder-react-native/rn-build-styled-component-widget/index.ts
@@ -0,0 +1 @@
+export * from "./from-static-widget-tree";
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
@@ -0,0 +1,176 @@
+import { ScopedVariableNamer } from "@coli.codes/naming";
+import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
+import { BlockStatement, ImportDeclaration, Return } from "coli";
+import {
+  react_imports,
+  makeReactModuleFile,
+  ReactWidgetModuleExportable,
+  emotion_styled_imports,
+  styled_components_imports,
+} from "@web-builder/react-core";
+import { JsxWidget } from "@web-builder/core";
+import {
+  buildJsx,
+  getWidgetStylesConfigMap,
+  WidgetStyleConfigMap,
+} from "@web-builder/core/builders";
+import {
+  react as react_config,
+  reactnative as rn_config,
+} from "@designto/config";
+import { reactnative_imports } from "../rn-import-specifications";
+import {
+  NoStyleJSXElementConfig,
+  StyledComponentJSXElementConfig,
+  StyledComponentDeclaration,
+} from "@web-builder/styled";
+
+export class ReactNativeStyledComponentsModuleBuilder {
+  private readonly entry: JsxWidget;
+  private readonly widgetName: string;
+  private readonly styledConfigWidgetMap: WidgetStyleConfigMap;
+  private readonly namer: ScopedVariableNamer;
+  readonly config: rn_config.ReactNativeStyledComponentsConfig;
+
+  constructor({
+    entry,
+    config,
+  }: {
+    entry: JsxWidget;
+    config: rn_config.ReactNativeStyledComponentsConfig;
+  }) {
+    this.entry = entry;
+    this.widgetName = entry.key.name;
+    this.namer = new ScopedVariableNamer(
+      entry.key.id,
+      ReservedKeywordPlatformPresets.react
+    );
+    this.styledConfigWidgetMap = getWidgetStylesConfigMap(entry, {
+      namer: this.namer,
+      rename_tag: true /** styled component tag shoule be renamed */,
+    });
+    this.config = config;
+  }
+
+  private styledConfig(
+    id: string
+  ): StyledComponentJSXElementConfig | NoStyleJSXElementConfig {
+    return this.styledConfigWidgetMap.get(id);
+  }
+
+  private jsxBuilder(widget: JsxWidget) {
+    return buildJsx(
+      widget,
+      {
+        styledConfig: (id) => this.styledConfig(id),
+      },
+      {
+        self_closing_if_possible: true,
+      }
+    );
+  }
+
+  partImports() {
+    return [
+      this.partImportReact(),
+      this.partImportReactNative(),
+      this.partImportStyled(),
+    ];
+  }
+
+  partImportStyled() {
+    switch (this.config.module) {
+      case "@emotion/native":
+        return emotion_styled_imports.import_styled_from_emotion_native;
+      case "styled-components/native":
+        return styled_components_imports.import_styled_from_styled_components_native;
+    }
+  }
+
+  partImportReact() {
+    return react_imports.import_react_from_react;
+  }
+
+  partImportReactNative() {
+    return reactnative_imports.import_react_prepacked;
+  }
+
+  partBody(): BlockStatement {
+    let jsxTree = this.jsxBuilder(this.entry);
+    return new BlockStatement(new Return(jsxTree));
+  }
+
+  partDeclarations() {
+    return Array.from(this.styledConfigWidgetMap.keys())
+      .map((k) => {
+        return (
+          this.styledConfigWidgetMap.get(k) as StyledComponentJSXElementConfig
+        ).styledComponent;
+      })
+      .filter((s) => s);
+  }
+
+  asExportableModule() {
+    const body = this.partBody();
+    const imports = this.partImports();
+    const styled_declarations = this.partDeclarations();
+    return new ReactNativeStyledComponentWidgetModuleExportable(
+      this.widgetName,
+      {
+        body,
+        imports,
+        declarations: styled_declarations,
+      },
+      {
+        dependencies: ["react", this.config.module],
+      }
+    );
+  }
+}
+
+export class ReactNativeStyledComponentWidgetModuleExportable extends ReactWidgetModuleExportable {
+  readonly declarations: StyledComponentDeclaration[];
+
+  constructor(
+    name,
+    {
+      body,
+      imports,
+      declarations,
+    }: {
+      body: BlockStatement;
+      imports: ImportDeclaration[];
+      declarations: StyledComponentDeclaration[];
+    },
+    {
+      dependencies = [],
+    }: {
+      dependencies?: string[];
+    }
+  ) {
+    super({
+      name,
+      body,
+      imports,
+    });
+
+    this.declarations = declarations;
+  }
+
+  asFile({
+    exporting,
+  }: {
+    exporting: react_config.ReactComponentExportingCofnig;
+  }) {
+    return makeReactModuleFile({
+      name: this.name,
+      path: "src/components",
+      imports: this.imports,
+      declarations: this.declarations,
+      body: this.body,
+      config: {
+        exporting: exporting,
+      },
+    });
+  }
+}
diff --git a/packages/builder-web-styled-components/index.ts b/packages/builder-web-styled-components/index.ts
@@ -82,3 +82,5 @@ export function buildStyledComponentConfig(
     };
   }
 }
+
+export * from "./styled-component-declaration";
diff --git a/packages/builder-web-styled-components/styled-component-declaration.ts b/packages/builder-web-styled-components/styled-component-declaration.ts
@@ -43,15 +43,14 @@ export class StyledComponentDeclaration extends VariableDeclaration {
     style: CSSProperties,
     html5tag: Html5IdentifierNames
   ): TaggedTemplateExpression {
-    const stylestring = buildCssStandard(style);
-    const formatedStyleStringWithTab = formatStyledTempplateString(stylestring);
+    const content = formatStyledTempplateString(buildCssStandard(style));
     return new TaggedTemplateExpression(
       new PropertyAccessExpression(
         StyledComponentDeclaration.styledIdentifier,
         html5tag
       ),
       {
-        template: new TemplateLiteral(formatedStyleStringWithTab),
+        template: new TemplateLiteral(content),
       }
     );
   }
diff --git a/packages/designto-react-native/app/index.ts b/packages/designto-react-native/app/index.ts

Original file line number	Diff line number	Diff line change
`@@ -3,3 +3,4 @@ export * from "./rn-widgets";`
`3`	`3`
`4`	`4`	`// building strategies`
`5`	`5`	`export * from "./rn-build-stylesheet-widget";`
	`6`	`+export * from "./rn-build-styled-component-widget";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from "./from-static-widget-tree";`