Skip to content

Commit

Permalink
[WIP] feat: add NativeWind plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
borisyankov committed Dec 28, 2024
1 parent 6a210ed commit 1a31210
Show file tree
Hide file tree
Showing 25 changed files with 1,013 additions and 19 deletions.
2 changes: 1 addition & 1 deletion .npmrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
auto-install-peers=false
link-workspace-packages=true
package-manager-strict-version=true
package-manager-strict-version=false
update-notifier=false
2 changes: 1 addition & 1 deletion apps/tester-app/.ruby-version
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2.7.6
system
5 changes: 4 additions & 1 deletion apps/tester-app/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/App';

ScriptManager.shared.setStorage(AsyncStorage);
if (!__DEV__) {
ScriptManager.shared.setStorage(AsyncStorage);
}

ScriptManager.shared.addResolver((scriptId, _caller) => {
if (__DEV__) {
return {
Expand Down
74 changes: 72 additions & 2 deletions apps/tester-app/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1266,6 +1266,72 @@ PODS:
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- react-native-safe-area-context (4.14.0):
- DoubleConversion
- glog
- hermes-engine
- RCT-Folly (= 2024.01.01.00)
- RCTRequired
- RCTTypeSafety
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- react-native-safe-area-context/common (= 4.14.0)
- react-native-safe-area-context/fabric (= 4.14.0)
- React-NativeModulesApple
- React-RCTFabric
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- react-native-safe-area-context/common (4.14.0):
- DoubleConversion
- glog
- hermes-engine
- RCT-Folly (= 2024.01.01.00)
- RCTRequired
- RCTTypeSafety
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-NativeModulesApple
- React-RCTFabric
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- react-native-safe-area-context/fabric (4.14.0):
- DoubleConversion
- glog
- hermes-engine
- RCT-Folly (= 2024.01.01.00)
- RCTRequired
- RCTTypeSafety
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- react-native-safe-area-context/common
- React-NativeModulesApple
- React-RCTFabric
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- React-nativeconfig (0.76.3)
- React-NativeModulesApple (0.76.3):
- glog
Expand Down Expand Up @@ -1756,6 +1822,7 @@ DEPENDENCIES:
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
- React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
Expand Down Expand Up @@ -1871,6 +1938,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon"
React-microtasksnativemodule:
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
React-nativeconfig:
:path: "../node_modules/react-native/ReactCommon"
React-NativeModulesApple:
Expand Down Expand Up @@ -1978,6 +2047,7 @@ SPEC CHECKSUMS:
React-logger: 26155dc23db5c9038794db915f80bd2044512c2e
React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
react-native-safe-area-context: 2500e4fe998caad50ad3bc51ec23ef951308569e
React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
React-perflogger: 6afb7eebf7d9521cc70481688ccddf212970e9d3
Expand Down Expand Up @@ -2013,8 +2083,8 @@ SPEC CHECKSUMS:
RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37

PODFILE CHECKSUM: 591811811bdab95f1675c6871b0554706bf77020

COCOAPODS: 1.15.2
COCOAPODS: 1.16.2
3 changes: 3 additions & 0 deletions apps/tester-app/nativewind-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/// <reference types="nativewind/types" />

// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.
6 changes: 5 additions & 1 deletion apps/tester-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,18 @@
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.23.1",
"nativewind": "^4.1.23",
"react": "18.3.1",
"react-native": "0.76.3",
"react-native-reanimated": "^3.16.3",
"react-native-svg": "15.8.0"
"react-native-safe-area-context": "^4.14.0",
"react-native-svg": "15.8.0",
"tailwindcss": "^3.4.17"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@callstack/repack": "workspace:*",
"@callstack/repack-plugin-nativewind": "workspace:*",
"@callstack/repack-plugin-reanimated": "workspace:*",
"@react-native-community/cli": "15.0.1",
"@react-native-community/cli-platform-android": "15.0.1",
Expand Down
9 changes: 9 additions & 0 deletions apps/tester-app/rspack.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { createRequire } from 'node:module';
import path from 'node:path';
import * as Repack from '@callstack/repack';
import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

Expand Down Expand Up @@ -73,6 +74,7 @@ export default (env) => {
transform: {
react: {
runtime: 'automatic',
importSource: 'react-native-css-interop',
},
},
},
Expand Down Expand Up @@ -197,6 +199,13 @@ export default (env) => {
// }),
process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
new ReanimatedPlugin(),
new NativeWindPlugin({
input: './src/nativewind/global.css',
}),
].filter(Boolean),

experiments: {
css: true,
},
};
};
13 changes: 9 additions & 4 deletions apps/tester-app/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import { Appearance } from 'react-native';

import { AppContainer } from './ui/AppContainer';
import { Section } from './ui/Section';
import { SectionContainer } from './ui/SectionContainer';

import { verifyInstallation } from 'nativewind';
import { AssetsTestContainer } from './assetsTest/AssetsTestContainer';
import { AsyncContainer } from './asyncChunks/AsyncContainer';
import { MiniAppsContainer } from './miniapp/MiniAppsContainer';
import { NativeWindView } from './nativewind/NativeWindView';
import { ReanimatedBox } from './reanimated/ReanimatedBox';
import { RemoteContainer } from './remoteChunks/RemoteContainer';
import { AppContainer } from './ui/AppContainer';
import { Section } from './ui/Section';
import { SectionContainer } from './ui/SectionContainer';

Appearance.setColorScheme('light');

const App = () => {
verifyInstallation();
return (
<AppContainer>
<SectionContainer>
Expand All @@ -31,6 +33,9 @@ const App = () => {
<Section title="Reanimated test">
<ReanimatedBox />
</Section>
<Section title="NativeWind test">
<NativeWindView />
</Section>
</SectionContainer>
</AppContainer>
);
Expand Down
21 changes: 21 additions & 0 deletions apps/tester-app/src/nativewind/NativeWindView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { StyleSheet, Text, View } from 'react-native';

import './global.css';

export function NativeWindView() {
return (
<View style={styles.container}>
<View className="bg-red-500">
<Text className="text-white">Hello, World!</Text>
</View>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginVertical: 16,
},
});
3 changes: 3 additions & 0 deletions apps/tester-app/src/nativewind/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
12 changes: 12 additions & 0 deletions apps/tester-app/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/*.{js,jsx,ts,tsx}'],
presets: [require('nativewind/preset')],
theme: {
extend: {},
fontFamily: {
mono: ['monospace'],
},
},
plugins: [],
};
1 change: 1 addition & 0 deletions apps/tester-app/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"extends": "@react-native/typescript-config/tsconfig.json",
"compilerOptions": {
"jsxImportSource": "nativewind",
"module": "ES2022" // for dynamic imports & top-level await
}
}
2 changes: 1 addition & 1 deletion apps/tester-federation-v2/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1964,7 +1964,7 @@ SPEC CHECKSUMS:
RNScreens: e389d6a6a66a4f0d3662924ecae803073ccce8ec
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37

PODFILE CHECKSUM: a2fe66c9f356ead5b62cb5a645336db60f03a64d

Expand Down
1 change: 1 addition & 0 deletions packages/plugin-nativewind/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# @callstack/repack-plugin-nativewind
102 changes: 102 additions & 0 deletions packages/plugin-nativewind/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<p align="center">
<img src="https://raw.githubusercontent.com/callstack/repack/HEAD/logo.png">
</p>
<p align="center">
A toolkit to build your React Native application with Rspack or Webpack.
</p>

---

[![Build Status][build-badge]][build]
[![Version][version-badge]][version]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Code of Conduct][coc-badge]][coc]

`@callstack/repack-plugin-nativewind` is a plugin for `@callstack/repack` that integrates [NativeWind](https://github.com/nativewind/nativewind) into your React Native projects.

## About

Use NativeWind in Re.Pack projects.

## Installation

```sh
npm install -D @callstack/repack-plugin-nativewind
```

## Usage

### Plugin

To add the plugin to your Re.Pack configuration follow this guide: https://www.nativewind.dev/getting-started/react-native

- Follow step 1, 2, and 5 (and optionally 7)
- At step 3 and 4, instead of editing `babel.config.js` (which is not used) or changing Metro config (again, not used) update your `rspack.config.js` or `webpack.config.js` as follows:

```js
import { NativeWindPlugin } from "@callstack/repack-plugin-nativewind";

export default (env) => {
// ...
return {
// ...
plugins: [
// ...
new NativeWindPlugin({
input: "./global.css",
}),
],
};
};
```

### Loader

The plugin also comes with it's own loader, which you can use on it's own inside `rspack.config.js` or `webpack.config.js` like this:

```js
export default (env) => {
// ...
return {
// ...
module: {
rules: [
{
test: /\.ts$/,
use: {
loader: "@callstack/repack-plugin-nativewind/loader",
options: {
babelPlugins: [
[
"@babel/plugin-syntax-typescript",
{ isTSX: false, allowNamespaces: true },
],
"nativewind/babel",
],
},
},
},
],
},
};
};
```

---

Check out our website at https://re-pack.dev for more info and documentation or our GitHub: https://github.com/callstack/repack.

<!-- badges -->

[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-paper&utm_term=readme-with-love
[build-badge]: https://img.shields.io/github/workflow/status/callstack/repack/CI/main?style=flat-square
[build]: https://github.com/callstack/repack/actions/workflows/main.yml
[version-badge]: https://img.shields.io/npm/v/@callstack/repack-plugin-nativewind?style=flat-square
[version]: https://www.npmjs.com/package/@callstack/repack-plugin-nativewind
[license-badge]: https://img.shields.io/npm/l/@callstack/repack-plugin-nativewind?style=flat-square
[license]: https://github.com/callstack/repack/blob/master/LICENSE
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: ./CONTRIBUTING.md
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/callstack/repack/blob/master/CODE_OF_CONDUCT.md
1 change: 1 addition & 0 deletions packages/plugin-nativewind/loader/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../dist/loader.js';
1 change: 1 addition & 0 deletions packages/plugin-nativewind/loader/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('../dist/loader.js');
Loading

0 comments on commit 1a31210

Please sign in to comment.