@tsrx/turbopack-plugin-react 0.1.80 → 0.1.82

package/package.json

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

package/src/css-loader.js

@@ -1,8 +1,11 @@
+/** @import { RuntimeImportMode } from '@tsrx/react' */
+
 import { compile } from '@tsrx/react';
 
 /**
  * @typedef {{
  * 	resourcePath: string,
+ * 	getOptions?: () => { runtimeImports?: RuntimeImportMode },
  * 	async: () => (err: unknown, output?: string | null, map?: unknown) => void,
  * }} LoaderContext
  */
@@ -20,7 +23,7 @@ export default function tsrx_react_turbopack_css_loader(source) {
 	const callback = this.async();
 
 	try {
-		const { css } = compile(source, this.resourcePath);
+		const { css } = compile(source, this.resourcePath, this.getOptions?.());
 		callback(null, css);
 	} catch (/** @type {any} */ err) {
 		callback(err);

package/src/index.js

@@ -1,3 +1,5 @@
+/** @import { RuntimeImportMode } from '@tsrx/react' */
+
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -23,31 +25,49 @@ const CSS_QUERY = '?tsrx-css&lang.css';
  */
 
 /**
- * @returns {{ condition: { all: any[] }, loaders: string[], as: string }}
+ * @typedef {{ runtimeImports?: RuntimeImportMode }} TsrxReactTurbopackOptions
  */
-export function create_tsrx_react_turbopack_rule() {
+
+/**
+ * @param {TsrxReactTurbopackOptions} [options]
+ * @returns {{ condition: { all: any[] }, loaders: Array<string | { loader: string, options: TsrxReactTurbopackOptions }>, as: string }}
+ */
+export function create_tsrx_react_turbopack_rule(options = {}) {
 	return {
 		condition: {
 			all: [{ not: 'foreign' }, { not: { query: CSS_QUERY } }],
 		},
-		loaders: [TURBOPACK_JS_LOADER],
+		loaders: [with_loader_options(TURBOPACK_JS_LOADER, options)],
 		as: '*.tsx',
 	};
 }
 
 /**
- * @returns {{ condition: { all: any[] }, loaders: string[], type: string }}
+ * @param {TsrxReactTurbopackOptions} [options]
+ * @returns {{ condition: { all: any[] }, loaders: Array<string | { loader: string, options: TsrxReactTurbopackOptions }>, type: string }}
  */
-export function create_tsrx_react_turbopack_css_rule() {
+export function create_tsrx_react_turbopack_css_rule(options = {}) {
 	return {
 		condition: {
 			all: [{ not: 'foreign' }, { query: CSS_QUERY }],
 		},
-		loaders: [TURBOPACK_CSS_LOADER],
+		loaders: [with_loader_options(TURBOPACK_CSS_LOADER, options)],
 		type: 'css',
 	};
 }
 
+/**
+ * Preserve the original string loader shape unless the caller has compiler
+ * options that Turbopack needs to pass into the loader.
+ *
+ * @param {string} loader
+ * @param {TsrxReactTurbopackOptions} options
+ * @returns {string | { loader: string, options: TsrxReactTurbopackOptions }}
+ */
+function with_loader_options(loader, options) {
+	return options.runtimeImports === undefined ? loader : { loader, options };
+}
+
 /**
  * @param {string[] | undefined} resolve_extensions
  * @returns {string[]}
@@ -62,10 +82,14 @@ function merge_resolve_extensions(resolve_extensions) {
 
 /**
  * @param {any} existing_rule
+ * @param {TsrxReactTurbopackOptions} options
  * @returns {any}
  */
-function merge_tsrx_rule(existing_rule) {
-	const rules = [create_tsrx_react_turbopack_rule(), create_tsrx_react_turbopack_css_rule()];
+function merge_tsrx_rule(existing_rule, options) {
+	const rules = [
+		create_tsrx_react_turbopack_rule(options),
+		create_tsrx_react_turbopack_css_rule(options),
+	];
 	if (!existing_rule) return rules;
 	return Array.isArray(existing_rule) ? [...rules, ...existing_rule] : [...rules, existing_rule];
 }
@@ -80,12 +104,13 @@ function merge_tsrx_rule(existing_rule) {
  * finish the JSX transform.
  *
  * @param {NextTurbopackConfig} [next_config]
+ * @param {TsrxReactTurbopackOptions} [options]
  * @returns {NextTurbopackConfig}
  */
-export function tsrxReactTurbopack(next_config = {}) {
+export function tsrxReactTurbopack(next_config = {}, options = {}) {
 	const turbopack = next_config.turbopack ?? {};
 	const rules = { ...(turbopack.rules ?? {}) };
-	rules['*.tsrx'] = merge_tsrx_rule(rules['*.tsrx']);
+	rules['*.tsrx'] = merge_tsrx_rule(rules['*.tsrx'], options);
 
 	return {
 		...next_config,

package/src/loader.js

@@ -1,3 +1,5 @@
+/** @import { RuntimeImportMode } from '@tsrx/react' */
+
 import { compile } from '@tsrx/react';
 
 const CSS_QUERY = '?tsrx-css&lang.css';
@@ -99,6 +101,7 @@ function prepend_css_import(code, resource_path) {
 /**
  * @typedef {{
  * 	resourcePath: string,
+ * 	getOptions?: () => { runtimeImports?: RuntimeImportMode },
  * 	async: () => (err: unknown, output?: string | null, map?: unknown) => void,
  * }} LoaderContext
  */
@@ -117,7 +120,7 @@ export default function tsrx_react_turbopack_loader(source) {
 	const callback = this.async();
 
 	try {
-		const { code, map, css } = compile(source, this.resourcePath);
+		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;
 

package/types/index.d.ts

@@ -1,3 +1,5 @@
+import type { RuntimeImportMode } from '@tsrx/react';
+
 export interface NextTurbopackConfig {
 	turbopack?: {
 		root?: string;
@@ -9,11 +11,21 @@ export interface NextTurbopackConfig {
 	[key: string]: unknown;
 }
 
+export interface TsrxReactTurbopackOptions {
+	/** Direct mode requires `@tsrx/react-runtime` as a direct production dependency. */
+	runtimeImports?: RuntimeImportMode;
+}
+
+export interface TsrxReactTurbopackLoader {
+	loader: string;
+	options: TsrxReactTurbopackOptions;
+}
+
 export interface TsrxReactTurbopackRule {
 	condition: {
 		all: Array<unknown>;
 	};
-	loaders: string[];
+	loaders: Array<string | TsrxReactTurbopackLoader>;
 	as: '*.tsx';
 }
 
@@ -21,14 +33,21 @@ export interface TsrxReactTurbopackCssRule {
 	condition: {
 		all: Array<unknown>;
 	};
-	loaders: string[];
+	loaders: Array<string | TsrxReactTurbopackLoader>;
 	type: 'css';
 }
 
-export declare function create_tsrx_react_turbopack_rule(): TsrxReactTurbopackRule;
+export declare function create_tsrx_react_turbopack_rule(
+	options?: TsrxReactTurbopackOptions,
+): TsrxReactTurbopackRule;
 
-export declare function create_tsrx_react_turbopack_css_rule(): TsrxReactTurbopackCssRule;
+export declare function create_tsrx_react_turbopack_css_rule(
+	options?: TsrxReactTurbopackOptions,
+): TsrxReactTurbopackCssRule;
 
-export declare function tsrxReactTurbopack(next_config?: NextTurbopackConfig): NextTurbopackConfig;
+export declare function tsrxReactTurbopack(
+	next_config?: NextTurbopackConfig,
+	options?: TsrxReactTurbopackOptions,
+): NextTurbopackConfig;
 
 export default tsrxReactTurbopack;