uniwind-plugin-next 1.0.1 → 1.1.0

package/README.md

@@ -1,15 +1,15 @@
 # uniwind-plugin-next
 
-> This is an unofficial plugin, and is not affiliated with Uniwind or Next.js in any way.
+> This is an unofficial plugin, and is not affiliated with Uniwind or Next.js.
 
-Next.js plugin for [Uniwind](https://uniwind.dev/) support. Note that only Webpack-based projects are supported, there are no plans to support Turbopack-based projects. 
+[Uniwind](https://uniwind.dev/) config plugin for Next.js. Note that only Webpack-based projects are supported, there are no plans to support Turbopack-based projects. 
 
-The implementation of this plugin is based on the official [Uniwind Vite plugin](https://docs.uniwind.dev/quickstart#vite), and aims to match its functionality as closely as possible. All Uniwind features should work as expected - see the limitations section below for known differences.
+The implementation of this plugin is based on the official [Uniwind Vite plugin](https://docs.uniwind.dev/quickstart#vite), and aims to match its functionality as closely as possible. All Uniwind features should work as expected - see the limitations section below for any documented differences.
 
 ## Compatibility
 See the table below for tested versions of `uniwind-plugin-next` and corresponding versions of `uniwind`. Other versions of `uniwind` may work, but are not guaranteed to.
 
-Tested on `next` version `16.1`, but other versions will likely work fine.
+Tested on Next `16.1`, but other versions will likely work fine.
 
 | uniwind-plugin-next | Uniwind |
 |---------------------|---------|
@@ -21,13 +21,14 @@ This setup guide assumes you already have a next.js project setup with Tailwind
 1. Install uniwind and this plugin:
 
 ```shell
-pnpm install uniwind uniwind-plugin-next
+pnpm install uniwind uniwind-plugin-next @expo/next-adapter
 ```
 
 2. Wrap next.js config with `withUniwind()`
 ```ts
 // next.config.ts
 import type { NextConfig } from "next";
+import { withExpo } from "@expo/next-adapter";
 import { withUniwind } from 'uniwind-plugin-next'
 
 const nextConfig: NextConfig = {
@@ -35,20 +36,19 @@ const nextConfig: NextConfig = {
 };
 
 // Wrap your config with `withUniwind()`
-export default withUniwind(nextConfig, {
+export default withUniwind(withExpo(nextConfig), {
     cssEntryFile: './app/globals.css',
     // Takes the same options as the vite & metro plugins.
     // See https://docs.uniwind.dev/api/metro-config#configuration-options
 });
 ```
-> Note that you do not need `@expo/next-adapter` if you are using `uniwind-plugin-next`.
 
 3. Add the postcss plugin
 ```js
 const config = {
   plugins: {
     "@tailwindcss/postcss": {},
-    'uniwind-plugin-next/postcss': {}, // Add this line
+    "uniwind-plugin-next/postcss": {}, // Add this line
   },
 };
 

package/dist/clientDirectiveLoader.js

@@ -0,0 +1,8 @@
+export default function clientDirectiveLoader(source) {
+    // Don't add the directive if it's already present
+    if (source.startsWith('"use client"') || source.startsWith("'use client'")) {
+        return source;
+    }
+
+    return `"use client";\n${source}`;
+}

package/dist/index.cjs

@@ -26,6 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 let webpack = require("webpack");
+webpack = __toESM(webpack);
 let path = require("path");
 path = __toESM(path);
 let fs = require("fs");
@@ -330,11 +331,17 @@ var UniwindWebpackPlugin = class {
 				options: { stringifiedThemes: stringifyThemes(this.themes) }
 			}]
 		});
+		compiler.options.module.rules.push({
+			test: /index\.js$/,
+			include: /uniwind[\/\\]dist[\/\\]module[\/\\]components[\/\\]web/,
+			use: [{ loader: path.default.resolve(__dirname, "clientDirectiveLoader.js") }]
+		});
 	}
 };
 
 //#endregion
 //#region src/webpack/withUniwind.ts
+const { NormalModuleReplacementPlugin } = webpack.default;
 function withUniwind(nextConfig = {}, uniwindConfig) {
 	return {
 		...nextConfig,
@@ -345,23 +352,8 @@ function withUniwind(nextConfig = {}, uniwindConfig) {
 			"react-native-web"
 		]),
 		webpack(config, options) {
-			if (!config.resolve) config.resolve = {};
 			if (!config.plugins) config.plugins = [];
-			config.resolve.alias = {
-				...config.resolve.alias || {},
-				"react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter",
-				"react-native/Libraries/vendor/emitter/EventEmitter$": "react-native-web/dist/vendor/react-native/emitter/EventEmitter",
-				"react-native/Libraries/EventEmitter/NativeEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter"
-			};
-			config.resolve.extensions = [
-				".web.js",
-				".web.jsx",
-				".web.ts",
-				".web.tsx",
-				...config.resolve?.extensions ?? []
-			];
-			config.plugins.push(new webpack.DefinePlugin({ __DEV__: JSON.stringify(process.env.NODE_ENV !== "production") }));
-			config.plugins.push(new webpack.NormalModuleReplacementPlugin(/^react-native$/, (resource) => {
+			config.plugins.push(new NormalModuleReplacementPlugin(/^react-native$/, (resource) => {
 				if ((resource.context || "").includes(`${path.default.sep}uniwind${path.default.sep}dist${path.default.sep}module${path.default.sep}components${path.default.sep}web`)) resource.request = "react-native-web";
 				else resource.request = "uniwind/components/index";
 			}));

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { n as __require } from "./chunk-3qlvafw2.mjs";
-import { DefinePlugin, NormalModuleReplacementPlugin } from "webpack";
+import webpack from "webpack";
 import path from "path";
 import fs from "fs";
 import { compile } from "@tailwindcss/node";
@@ -302,11 +302,17 @@ var UniwindWebpackPlugin = class {
 				options: { stringifiedThemes: stringifyThemes(this.themes) }
 			}]
 		});
+		compiler.options.module.rules.push({
+			test: /index\.js$/,
+			include: /uniwind[\/\\]dist[\/\\]module[\/\\]components[\/\\]web/,
+			use: [{ loader: path.resolve(__dirname, "clientDirectiveLoader.js") }]
+		});
 	}
 };
 
 //#endregion
 //#region src/webpack/withUniwind.ts
+const { NormalModuleReplacementPlugin } = webpack;
 function withUniwind(nextConfig = {}, uniwindConfig) {
 	return {
 		...nextConfig,
@@ -317,22 +323,7 @@ function withUniwind(nextConfig = {}, uniwindConfig) {
 			"react-native-web"
 		]),
 		webpack(config, options) {
-			if (!config.resolve) config.resolve = {};
 			if (!config.plugins) config.plugins = [];
-			config.resolve.alias = {
-				...config.resolve.alias || {},
-				"react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter",
-				"react-native/Libraries/vendor/emitter/EventEmitter$": "react-native-web/dist/vendor/react-native/emitter/EventEmitter",
-				"react-native/Libraries/EventEmitter/NativeEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter"
-			};
-			config.resolve.extensions = [
-				".web.js",
-				".web.jsx",
-				".web.ts",
-				".web.tsx",
-				...config.resolve?.extensions ?? []
-			];
-			config.plugins.push(new DefinePlugin({ __DEV__: JSON.stringify(process.env.NODE_ENV !== "production") }));
 			config.plugins.push(new NormalModuleReplacementPlugin(/^react-native$/, (resource) => {
 				if ((resource.context || "").includes(`${path.sep}uniwind${path.sep}dist${path.sep}module${path.sep}components${path.sep}web`)) resource.request = "react-native-web";
 				else resource.request = "uniwind/components/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uniwind-plugin-next",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Compatibility plugin for using Uniwind with Next.js",
   "devDependencies": {
     "@types/node": "^25.0.3",