@tsrx/turbopack-plugin-react 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@tsrx/turbopack-plugin-react",
+  "description": "Turbopack integration for @tsrx/react",
+  "license": "MIT",
+  "author": "Dominic Gannaway",
+  "version": "0.0.1",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ripple-TS/ripple.git",
+    "directory": "packages/turbopack-plugin-react"
+  },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "dependencies": {
+    "@tsrx/react": "0.0.7"
+  },
+  "peerDependencies": {
+    "next": ">=15.3.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "src",
+    "types"
+  ]
+}

package/src/css-loader.js

@@ -0,0 +1,28 @@
+import { compile } from '@tsrx/react';
+
+/**
+ * @typedef {{
+ * 	resourcePath: string,
+ * 	async: () => (err: unknown, output?: string | null, map?: unknown) => void,
+ * }} LoaderContext
+ */
+
+/**
+ * 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.
+ *
+ * @this {LoaderContext}
+ * @param {string} source
+ * @returns {void}
+ */
+export default function tsrx_react_turbopack_css_loader(source) {
+	const callback = this.async();
+
+	try {
+		const { css } = compile(source, this.resourcePath);
+		callback(null, css?.code ?? '');
+	} catch (/** @type {any} */ err) {
+		callback(err);
+	}
+}

package/src/index.js

@@ -0,0 +1,100 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const TURBOPACK_JS_LOADER = path.join(__dirname, 'loader.js');
+const TURBOPACK_CSS_LOADER = path.join(__dirname, 'css-loader.js');
+const DEFAULT_RESOLVE_EXTENSIONS = ['.tsrx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'];
+const CSS_QUERY = '?tsrx-css&lang.css';
+
+/**
+ * @typedef {{
+ * 	turbopack?: {
+ * 		root?: string,
+ * 		rules?: Record<string, any>,
+ * 		resolveAlias?: Record<string, any>,
+ * 		resolveExtensions?: string[],
+ * 		debugIds?: boolean,
+ * 	},
+ * 	[key: string]: any,
+ * }} NextTurbopackConfig
+ */
+
+/**
+ * @returns {{ condition: { all: any[] }, loaders: string[], as: string }}
+ */
+export function create_tsrx_react_turbopack_rule() {
+	return {
+		condition: {
+			all: [{ not: 'foreign' }, { not: { query: CSS_QUERY } }],
+		},
+		loaders: [TURBOPACK_JS_LOADER],
+		as: '*.tsx',
+	};
+}
+
+/**
+ * @returns {{ condition: { all: any[] }, loaders: string[], type: string }}
+ */
+export function create_tsrx_react_turbopack_css_rule() {
+	return {
+		condition: {
+			all: [{ not: 'foreign' }, { query: CSS_QUERY }],
+		},
+		loaders: [TURBOPACK_CSS_LOADER],
+		type: 'css',
+	};
+}
+
+/**
+ * @param {string[] | undefined} resolve_extensions
+ * @returns {string[]}
+ */
+function merge_resolve_extensions(resolve_extensions) {
+	const merged = resolve_extensions ? [...resolve_extensions] : [...DEFAULT_RESOLVE_EXTENSIONS];
+	if (!merged.includes('.tsrx')) {
+		merged.unshift('.tsrx');
+	}
+	return merged;
+}
+
+/**
+ * @param {any} existing_rule
+ * @returns {any}
+ */
+function merge_tsrx_rule(existing_rule) {
+	const rules = [create_tsrx_react_turbopack_rule(), create_tsrx_react_turbopack_css_rule()];
+	if (!existing_rule) return rules;
+	return Array.isArray(existing_rule) ? [...rules, ...existing_rule] : [...rules, existing_rule];
+}
+
+/**
+ * Merge the Turbopack settings needed for `.tsrx` React modules into a Next.js
+ * config object.
+ *
+ * The helper installs loader-backed `*.tsrx` rules that compile TSRX to TSX,
+ * route component-local `<style>` blocks through a sibling virtual CSS import,
+ * and then hand the TSX output back to Turbopack so Next's React pipeline can
+ * finish the JSX transform.
+ *
+ * @param {NextTurbopackConfig} [next_config]
+ * @returns {NextTurbopackConfig}
+ */
+export function tsrxReactTurbopack(next_config = {}) {
+	const turbopack = next_config.turbopack ?? {};
+	const rules = { ...(turbopack.rules ?? {}) };
+	rules['*.tsrx'] = merge_tsrx_rule(rules['*.tsrx']);
+
+	return {
+		...next_config,
+		turbopack: {
+			...turbopack,
+			rules,
+			resolveExtensions: merge_resolve_extensions(turbopack.resolveExtensions),
+		},
+	};
+}
+
+export default tsrxReactTurbopack;

package/src/loader.js

@@ -0,0 +1,128 @@
+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);
+}
+
+/**
+ * @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)}`;
+}
+
+/**
+ * @typedef {{
+ * 	resourcePath: string,
+ * 	async: () => (err: unknown, output?: string | null, map?: unknown) => void,
+ * }} LoaderContext
+ */
+
+/**
+ * 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
+ * by the Turbopack config helper's query-targeted CSS rule.
+ *
+ * @this {LoaderContext}
+ * @param {string} source
+ * @returns {void}
+ */
+export default function tsrx_react_turbopack_loader(source) {
+	const callback = this.async();
+
+	try {
+		const { code, map, css } = compile(source, this.resourcePath);
+		const output = css ? prepend_css_import(code, this.resourcePath) : code;
+		const output_map = css ? null : map;
+
+		callback(null, output, /** @type {any} */ (output_map ?? undefined));
+	} catch (/** @type {any} */ err) {
+		callback(err);
+	}
+}

package/types/index.d.ts

@@ -0,0 +1,34 @@
+export interface NextTurbopackConfig {
+	turbopack?: {
+		root?: string;
+		rules?: Record<string, unknown>;
+		resolveAlias?: Record<string, unknown>;
+		resolveExtensions?: string[];
+		debugIds?: boolean;
+	};
+	[key: string]: unknown;
+}
+
+export interface TsrxReactTurbopackRule {
+	condition: {
+		all: Array<unknown>;
+	};
+	loaders: string[];
+	as: '*.tsx';
+}
+
+export interface TsrxReactTurbopackCssRule {
+	condition: {
+		all: Array<unknown>;
+	};
+	loaders: string[];
+	type: 'css';
+}
+
+export declare function create_tsrx_react_turbopack_rule(): TsrxReactTurbopackRule;
+
+export declare function create_tsrx_react_turbopack_css_rule(): TsrxReactTurbopackCssRule;
+
+export declare function tsrxReactTurbopack(next_config?: NextTurbopackConfig): NextTurbopackConfig;
+
+export default tsrxReactTurbopack;