feat: react-native "twrnc" and "native-wind" styling types (#1493)

* feat twrnc style type * feat twrnc style type * feat: twrnc test * feat: native wind styling * chore: prettier * chore: added changeset * Update .changeset/strong-cycles-cough.md --------- Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Jul 9, 2024 · f83b8f4 · f83b8f4
1 parent 87b26e6
commit f83b8f4
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 3 deletions.
diff --git a/.changeset/strong-cycles-cough.md b/.changeset/strong-cycles-cough.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Adds two new styling options for the react-native generator: twrnc and native-wind
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -9165,6 +9165,33 @@ export default MyBasicWebComponent;
 "
 `;
 
+exports[`React Native > native-wind style 1`] = `
+"import * as React from \\"react\\";
+import {
+ FlatList,
+ ScrollView,
+ View,
+ StyleSheet,
+ Image,
+ Text,
+ Pressable,
+ TextInput,
+} from \\"react-native\\";
+
+function MyComponent(props) {
+ return (
+ <View className=\\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\\">
+ <Pressable onPress={(e) => console.log(\\"event\\")}>
+ <Text>Hello</Text>
+ </Pressable>
+ </View>
+ );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React Native > svelte > Javascript Test > basic 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -10264,3 +10291,31 @@ function MyComponent(props: any) {
 export default MyComponent;
 "
 `;
+
+exports[`React Native > twrnc style 1`] = `
+"import * as React from \\"react\\";
+import {
+ FlatList,
+ ScrollView,
+ View,
+ StyleSheet,
+ Image,
+ Text,
+ Pressable,
+ TextInput,
+} from \\"react-native\\";
+import tw from \\"twrnc\\";
+
+function MyComponent(props) {
+ return (
+ <View style=\\"{tw\`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\`}\\">
+ <Pressable onPress={(e) => console.log(\\"event\\")}>
+ <Text>Hello</Text>
+ </Pressable>
+ </View>
+ );
+}
+
+export default MyComponent;
+"
+`;
diff --git a/packages/core/src/__tests__/data/react-native/twrnc-styled-component.raw.tsx b/packages/core/src/__tests__/data/react-native/twrnc-styled-component.raw.tsx
@@ -0,0 +1,7 @@
+export default function MyComponent(props) {
+ return (
+ <div class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+ <button onClick={(e) => console.log('event')}>Hello</button>
+ </div>
+ );
+}
diff --git a/packages/core/src/__tests__/react-native.test.ts b/packages/core/src/__tests__/react-native.test.ts
@@ -1,6 +1,27 @@
 import { componentToReactNative } from '../generators/react-native';
 import { runTestsForTarget } from './test-generator';
 
+import { parseJsx } from '..';
+import twrncStyledComponentRN from './data/react-native/twrnc-styled-component.raw.tsx?raw';
+
 describe('React Native', () => {
  runTestsForTarget({ options: {}, target: 'reactNative', generator: componentToReactNative });
+
+ test('twrnc style', () => {
+ const component = parseJsx(twrncStyledComponentRN);
+ const output = componentToReactNative({
+ stylesType: 'twrnc',
+ })({ component });
+
+ expect(output).toMatchSnapshot();
+ });
+
+ test('native-wind style', () => {
+ const component = parseJsx(twrncStyledComponentRN);
+ const output = componentToReactNative({
+ stylesType: 'native-wind',
+ })({ component });
+
+ expect(output).toMatchSnapshot();
+ });
 });
diff --git a/packages/core/src/generators/react-native/index.ts b/packages/core/src/generators/react-native/index.ts
@@ -16,7 +16,7 @@ import { componentToReact } from '../react';
 import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles';
 
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
- stylesType: 'emotion' | 'react-native';
+ stylesType: 'emotion' | 'react-native' | 'twrnc' | 'native-wind';
  stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
 }
 
@@ -111,7 +111,6 @@ export const collectReactNativeStyles = (json: MitosisComponent): ClassStyleMap
 /**
  * Plugin that handles necessary transformations from React to React Native:
  * - Converts DOM tags to <View /> and <Text />
- * - Removes redundant `class`/`className` attributes
  */
 const PROCESS_REACT_NATIVE_PLUGIN: Plugin = () => ({
  json: {
@@ -135,6 +134,20 @@ const PROCESS_REACT_NATIVE_PLUGIN: Plugin = () => ({
  ) {
  node.name = 'Text';
  }
+ }
+ });
+ },
+ },
+});
+
+/**
+ * Removes React Native className and class properties from the JSON
+ */
+const REMOVE_REACT_NATIVE_CLASSES_PLUGIN: Plugin = () => ({
+ json: {
+ pre: (json: MitosisComponent) => {
+ traverse(json).forEach(function (node) {
+ if (isMitosisNode(node)) {
  if (node.properties.class) {
  delete node.properties.class;
  }
@@ -153,6 +166,85 @@ const PROCESS_REACT_NATIVE_PLUGIN: Plugin = () => ({
  },
 });
 
+/**
+ * Converts class and className properties to twrnc style syntax
+ */
+const TWRNC_STYLES_PLUGIN: Plugin = () => ({
+ json: {
+ post: (json: MitosisComponent) => {
+ traverse(json).forEach(function (node) {
+ if (isMitosisNode(node)) {
+ let combinedClasses = [
+ node.properties.class,
+ node.properties.className,
+ node.bindings.class,
+ node.bindings.className,
+ ]
+ .filter(Boolean)
+ .join(' ');
+
+ if (combinedClasses) {
+ node.properties.style = `{tw\`${combinedClasses}\`}`;
+ }
+
+ if (node.properties.class) {
+ delete node.properties.class;
+ }
+ if (node.properties.className) {
+ delete node.properties.className;
+ }
+ if (node.bindings.class) {
+ delete node.bindings.class;
+ }
+ if (node.bindings.className) {
+ delete node.bindings.className;
+ }
+ }
+ });
+ },
+ },
+});
+
+/**
+ * Converts class and className properties to native-wind style syntax
+ * Note: We only support the "with babel" setup: https://www.nativewind.dev/guides/babel
+ */
+const NATIVE_WIND_STYLES_PLUGIN: Plugin = () => ({
+ json: {
+ post: (json: MitosisComponent) => {
+ traverse(json).forEach(function (node) {
+ if (isMitosisNode(node)) {
+ let combinedClasses = [
+ node.properties.class,
+ node.properties.className,
+ node.bindings.class,
+ node.bindings.className,
+ ]
+ .filter(Boolean)
+ .join(' ');
+
+ if (node.properties.class) {
+ delete node.properties.class;
+ }
+ if (node.properties.className) {
+ delete node.properties.className;
+ }
+ if (node.bindings.class) {
+ delete node.bindings.class;
+ }
+ if (node.bindings.className) {
+ delete node.bindings.className;
+ }
+
+ if (combinedClasses) {
+ node.properties.className = combinedClasses;
+ }
+ }
+ });
+ },
+ },
+});
+
 const DEFAULT_OPTIONS: ToReactNativeOptions = {
  stateType: 'useState',
  stylesType: 'react-native',
@@ -166,5 +258,13 @@ export const componentToReactNative: TranspilerGenerator<Partial<ToReactNativeOp
 
  const options = mergeOptions(DEFAULT_OPTIONS, _options);
 
+ if (options.stylesType === 'twrnc') {
+ options.plugins.push(TWRNC_STYLES_PLUGIN);
+ } else if (options.stylesType === 'native-wind') {
+ options.plugins.push(NATIVE_WIND_STYLES_PLUGIN);
+ } else {
+ options.plugins.push(REMOVE_REACT_NATIVE_CLASSES_PLUGIN);
+ }
+
  return componentToReact({ ...options, type: 'native' })({ component: json, path });
  };
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
@@ -541,6 +541,7 @@ const _componentToReact = (
  }'`
  : ''
  }
+ ${options.stylesType === 'twrnc' ? `import tw from 'twrnc';\n` : ''}
  ${
  componentHasStyles && options.stylesType === 'emotion' && options.format !== 'lite'
  ? `/** @jsx jsx */

diff --git a/packages/core/src/generators/react/types.ts b/packages/core/src/generators/react/types.ts
@@ -1,7 +1,14 @@
 import { BaseTranspilerOptions } from '@/types/transpiler';
 
 export interface ToReactOptions extends BaseTranspilerOptions {
- stylesType: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
+ stylesType:
+ | 'emotion'
+ | 'styled-components'
+ | 'styled-jsx'
+ | 'react-native'
+ | 'style-tag'
+ | 'twrnc'
+ | 'native-wind';
  stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
  format?: 'lite' | 'safe';
  type: 'dom' | 'native' | 'taro';