@tsrx/turbopack-plugin-react 0.1.88 → 0.1.90

package/README.md

@@ -0,0 +1,49 @@
+# @tsrx/turbopack-plugin-react
+
+Turbopack integration for compiling `@tsrx/react` `.tsrx` files in Next.js.
+
+## Installation
+
+```bash
+pnpm add @tsrx/react react react-dom
+pnpm add -D @tsrx/turbopack-plugin-react next
+```
+
+## Usage
+
+```ts
+import tsrxReactTurbopack from '@tsrx/turbopack-plugin-react';
+
+export default tsrxReactTurbopack({
+  reactStrictMode: true,
+});
+```
+
+The helper installs Turbopack rules that compile `.tsrx` modules with
+`@tsrx/react` and return the result as `*.tsx` so Next's React pipeline can finish
+the JSX transform. Sibling-scoped `<style>` blocks (each styles its siblings and
+everything below them) are emitted through a sibling `?tsrx-css&lang.css` import
+and handed back to Turbopack as a CSS module.
+
+It also adds `.tsrx` to `turbopack.resolveExtensions`.
+
+## Options
+
+Pass Next.js config as the first argument. The second argument is optional:
+
+- `runtimeImports`: helper import mode (`'compiler'` by default, or `'direct'` for
+  standalone runtime imports).
+
+```ts
+export default tsrxReactTurbopack({}, { runtimeImports: 'direct' });
+```
+
+When using `runtimeImports: 'direct'`, install the runtime as a direct production
+dependency of the package that owns the compiled modules:
+
+```bash
+pnpm add @tsrx/react-runtime
+```
+
+The helper only emits bare `@tsrx/react-runtime/*` imports and does not provide
+the runtime package.

package/package.json

@@ -3,7 +3,7 @@
   "description": "Turbopack integration for @tsrx/react",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,7 @@
     }
   },
   "dependencies": {
-    "@tsrx/react": "0.2.65"
+    "@tsrx/react": "0.2.67"
   },
   "peerDependencies": {
     "next": ">=15.3.0"

package/src/css-loader.js

@@ -13,7 +13,7 @@ import { compile } from '@tsrx/react';
 /**
  * Re-runs the `@tsrx/react` compiler against the `.tsrx` source to extract
  * the scoped CSS emitted by its `<style>` block. Invoked when Turbopack
- * resolves the sibling `?tsrx-css&lang.css` import prepended by the JS loader.
+ * resolves the sibling `?tsrx-css&lang.css` import emitted by the JS loader.
  *
  * @this {LoaderContext}
  * @param {string} source

package/src/loader.js

@@ -5,97 +5,18 @@ import { compile } from '@tsrx/react';
 const CSS_QUERY = '?tsrx-css&lang.css';
 
 /**
- * @param {string} source
- * @param {number} index
- * @returns {number}
- */
-function skip_whitespace_and_comments(source, index) {
-	while (index < source.length) {
-		const char = source[index];
-		if (char === ' ' || char === '\t' || char === '\n' || char === '\r') {
-			index++;
-			continue;
-		}
-		if (char === '/' && source[index + 1] === '/') {
-			index += 2;
-			while (index < source.length && source[index] !== '\n') {
-				index++;
-			}
-			continue;
-		}
-		if (char === '/' && source[index + 1] === '*') {
-			index += 2;
-			while (index < source.length && !(source[index] === '*' && source[index + 1] === '/')) {
-				index++;
-			}
-			index = Math.min(index + 2, source.length);
-			continue;
-		}
-		break;
-	}
-	return index;
-}
-
-/**
- * @param {string} source
- * @param {number} index
- * @returns {number}
- */
-function read_directive_statement(source, index) {
-	const quote = source[index];
-	if (quote !== '"' && quote !== "'") {
-		return -1;
-	}
-
-	let cursor = index + 1;
-	let value = '';
-	while (cursor < source.length) {
-		const char = source[cursor];
-		if (char === '\\') {
-			value += source.slice(cursor, cursor + 2);
-			cursor += 2;
-			continue;
-		}
-		if (char === quote) {
-			cursor++;
-			break;
-		}
-		value += char;
-		cursor++;
-	}
-
-	if (cursor > source.length || !value.startsWith('use ')) {
-		return -1;
-	}
-
-	cursor = skip_whitespace_and_comments(source, cursor);
-	if (source[cursor] === ';') {
-		cursor++;
-	}
-	return skip_whitespace_and_comments(source, cursor);
-}
-
-/**
+ * Appends an import of the sibling virtual CSS resource. It goes after the
+ * module's own imports so the stylesheets of imported themes are added to the
+ * graph first and a rule in the applying module wins at equal specificity.
+ * Top-level directives such as `'use client'` stay first, and nothing above
+ * the import moves, so the compiler's source map still applies.
+ *
  * @param {string} code
  * @param {string} resource_path
  * @returns {string}
  */
-function prepend_css_import(code, resource_path) {
-	const css_import = `import ${JSON.stringify(resource_path + CSS_QUERY)};\n`;
-	const initial_index = skip_whitespace_and_comments(code, 0);
-	let insertion_index = initial_index;
-	let scan_index = initial_index;
-
-	while (scan_index < code.length) {
-		const next_index = read_directive_statement(code, scan_index);
-		if (next_index === -1) {
-			break;
-		}
-		insertion_index = next_index;
-		scan_index = next_index;
-	}
-
-	return `${code.slice(0, insertion_index)}${css_import}${code.slice(insertion_index)}`;
+function append_css_import(code, resource_path) {
+	return `${code}\nimport ${JSON.stringify(resource_path + CSS_QUERY)};\n`;
 }
 
 /**
@@ -109,7 +30,7 @@ function prepend_css_import(code, resource_path) {
 /**
  * Compile `.tsrx` files to TSX for consumption by Turbopack's built-in
  * TypeScript/React pipeline. When a component-local `<style>` block is
- * present, prepend an import to a sibling virtual CSS resource that is handled
+ * present, append an import of a sibling virtual CSS resource that is handled
  * by the Turbopack config helper's query-targeted CSS rule.
  *
  * @this {LoaderContext}
@@ -121,10 +42,9 @@ export default function tsrx_react_turbopack_loader(source) {
 
 	try {
 		const { code, map, css } = compile(source, this.resourcePath, this.getOptions?.());
-		const output = css ? prepend_css_import(code, this.resourcePath) : code;
-		const output_map = css ? null : map;
+		const output = css ? append_css_import(code, this.resourcePath) : code;
 
-		callback(null, output, /** @type {any} */ (output_map ?? undefined));
+		callback(null, output, /** @type {any} */ (map ?? undefined));
 	} catch (/** @type {any} */ err) {
 		callback(err);
 	}