@knighted/jsx 1.6.2 → 1.6.3

package/dist/cjs/loader/jsx.cjs

@@ -224,6 +224,8 @@ const TEMPLATE_PARSER_OPTIONS = {
 };
 const DEFAULT_TAGS = ['jsx', 'reactJsx'];
 const DEFAULT_MODE = 'runtime';
+const WEB_TARGETS = new Set(['web', 'webworker', 'electron-renderer', 'node-webkit']);
+const isWebTarget = (target) => target ? WEB_TARGETS.has(target) : false;
 const HELPER_SNIPPETS = {
     react: `const __jsxReactMergeProps = (...sources) => Object.assign({}, ...sources)
 const __jsxReact = (type, props, ...children) => React.createElement(type, props, ...children)
@@ -671,7 +673,14 @@ const transformSource = (source, config, options) => {
         .filter(Boolean)
         .join('\n');
     if (helperSource) {
-        magic.append(`\n${helperSource}`);
+        const helperBlock = `${helperSource.trimEnd()}\n\n`;
+        const shebangIndex = source.startsWith('#!') ? source.indexOf('\n') : -1;
+        if (shebangIndex >= 0) {
+            magic.appendLeft(shebangIndex + 1, helperBlock);
+        }
+        else {
+            magic.prepend(helperBlock);
+        }
         mutated = true;
     }
     const code = mutated ? magic.toString() : source;
@@ -692,6 +701,8 @@ function jsxLoader(input) {
     const callback = this.async();
     try {
         const options = this.getOptions?.() ?? {};
+        const warn = this.emitWarning?.bind(this);
+        const webTarget = isWebTarget(this.target);
         const explicitTags = Array.isArray(options.tags)
             ? options.tags.filter((value) => typeof value === 'string' && value.length > 0)
             : null;
@@ -705,6 +716,9 @@ function jsxLoader(input) {
         const configuredTagModes = options.tagModes && typeof options.tagModes === 'object'
             ? options.tagModes
             : undefined;
+        const userSpecifiedMode = parseLoaderMode(options.mode);
+        const defaultMode = userSpecifiedMode ?? DEFAULT_MODE;
+        const userConfiguredTags = new Set();
         if (configuredTagModes) {
             Object.entries(configuredTagModes).forEach(([tagName, mode]) => {
                 const parsed = parseLoaderMode(mode);
@@ -712,15 +726,26 @@ function jsxLoader(input) {
                     return;
                 }
                 tagModes.set(tagName, parsed);
+                userConfiguredTags.add(tagName);
             });
         }
-        const defaultMode = parseLoaderMode(options.mode) ?? DEFAULT_MODE;
         const tags = Array.from(new Set([...tagList, ...tagModes.keys()]));
         tags.forEach(tagName => {
             if (!tagModes.has(tagName)) {
                 tagModes.set(tagName, defaultMode);
             }
         });
+        /**
+         * If targeting the web and runtime mode is only implied (not explicitly requested),
+         * keep the runtime output but surface a warning so users can opt into react mode when
+         * bundling for the browser.
+         */
+        if (webTarget && userSpecifiedMode === null) {
+            const hasImplicitRuntime = tags.some(tagName => tagModes.get(tagName) === 'runtime' && !userConfiguredTags.has(tagName));
+            if (hasImplicitRuntime) {
+                warn?.(new Error('[jsx-loader] Web target detected while defaulting to runtime mode; the shipped parser expects a Node-like environment. Set mode: "react" (or configure per-tag) when bundling client code, or provide a browser-safe runtime parser if you intentionally need runtime output.'));
+            }
+        }
         const source = typeof input === 'string' ? input : input.toString('utf8');
         const enableSourceMap = options.sourceMap === true;
         const { code, map } = transformSource(source, {

package/dist/cjs/loader/jsx.d.cts

@@ -2,6 +2,8 @@ import { type SourceMap } from 'magic-string';
 type LoaderCallback = (error: Error | null, content?: string, map?: SourceMap | null) => void;
 type LoaderContext<TOptions> = {
     resourcePath: string;
+    target?: string;
+    emitWarning?: (warning: Error | string) => void;
     async(): LoaderCallback;
     getOptions?: () => Partial<TOptions>;
 };

package/dist/cjs/node/bootstrap.cjs

@@ -1,5 +1,8 @@
-import { createRequire } from 'node:module';
-const nodeRequire = createRequire(require("node:url").pathToFileURL(__filename).href);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.__setNodeRequireForTesting = exports.ensureNodeDom = void 0;
+const node_module_1 = require("node:module");
+const nodeRequire = (0, node_module_1.createRequire)(require("node:url").pathToFileURL(__filename).href);
 let requireOverride = null;
 const resolveRequire = () => requireOverride ?? nodeRequire;
 const DOM_TEMPLATE = '<!doctype html><html><body></body></html>';
@@ -70,7 +73,7 @@ const createShimWindow = () => {
     throw new AggregateError(errors, help);
 };
 let bootstrapped = false;
-export const ensureNodeDom = () => {
+const ensureNodeDom = () => {
     if (hasDom() || bootstrapped) {
         return;
     }
@@ -78,6 +81,8 @@ export const ensureNodeDom = () => {
     assignGlobalTargets(windowObj);
     bootstrapped = true;
 };
-export const __setNodeRequireForTesting = (mockRequire) => {
+exports.ensureNodeDom = ensureNodeDom;
+const __setNodeRequireForTesting = (mockRequire) => {
     requireOverride = mockRequire;
 };
+exports.__setNodeRequireForTesting = __setNodeRequireForTesting;

package/dist/cjs/node/debug/index.cjs

@@ -1,6 +1,9 @@
-import { enableJsxDebugDiagnostics } from '../../debug/diagnostics.cjs';
-import { ensureNodeDom } from '../bootstrap.cjs';
-import { jsx as baseJsx } from '../../jsx.cjs';
-enableJsxDebugDiagnostics({ mode: 'always' });
-ensureNodeDom();
-export const jsx = baseJsx;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsx = void 0;
+const diagnostics_js_1 = require("../../debug/diagnostics.cjs");
+const bootstrap_js_1 = require("../bootstrap.cjs");
+const jsx_js_1 = require("../../jsx.cjs");
+(0, diagnostics_js_1.enableJsxDebugDiagnostics)({ mode: 'always' });
+(0, bootstrap_js_1.ensureNodeDom)();
+exports.jsx = jsx_js_1.jsx;

package/dist/cjs/node/index.cjs

@@ -1,4 +1,7 @@
-import { ensureNodeDom } from './bootstrap.cjs';
-import { jsx as baseJsx } from '../jsx.cjs';
-ensureNodeDom();
-export const jsx = baseJsx;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsx = void 0;
+const bootstrap_js_1 = require("./bootstrap.cjs");
+const jsx_js_1 = require("../jsx.cjs");
+(0, bootstrap_js_1.ensureNodeDom)();
+exports.jsx = jsx_js_1.jsx;

package/dist/cjs/node/react/index.cjs

@@ -1 +1,5 @@
-export { reactJsx } from '../../react/react-jsx.cjs';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactJsx = void 0;
+var react_jsx_js_1 = require("../../react/react-jsx.cjs");
+Object.defineProperty(exports, "reactJsx", { enumerable: true, get: function () { return react_jsx_js_1.reactJsx; } });

package/dist/loader/jsx.d.ts

@@ -2,6 +2,8 @@ import { type SourceMap } from 'magic-string';
 type LoaderCallback = (error: Error | null, content?: string, map?: SourceMap | null) => void;
 type LoaderContext<TOptions> = {
     resourcePath: string;
+    target?: string;
+    emitWarning?: (warning: Error | string) => void;
     async(): LoaderCallback;
     getOptions?: () => Partial<TOptions>;
 };

package/dist/loader/jsx.js

@@ -218,6 +218,8 @@ const TEMPLATE_PARSER_OPTIONS = {
 };
 const DEFAULT_TAGS = ['jsx', 'reactJsx'];
 const DEFAULT_MODE = 'runtime';
+const WEB_TARGETS = new Set(['web', 'webworker', 'electron-renderer', 'node-webkit']);
+const isWebTarget = (target) => target ? WEB_TARGETS.has(target) : false;
 const HELPER_SNIPPETS = {
     react: `const __jsxReactMergeProps = (...sources) => Object.assign({}, ...sources)
 const __jsxReact = (type, props, ...children) => React.createElement(type, props, ...children)
@@ -665,7 +667,14 @@ const transformSource = (source, config, options) => {
         .filter(Boolean)
         .join('\n');
     if (helperSource) {
-        magic.append(`\n${helperSource}`);
+        const helperBlock = `${helperSource.trimEnd()}\n\n`;
+        const shebangIndex = source.startsWith('#!') ? source.indexOf('\n') : -1;
+        if (shebangIndex >= 0) {
+            magic.appendLeft(shebangIndex + 1, helperBlock);
+        }
+        else {
+            magic.prepend(helperBlock);
+        }
         mutated = true;
     }
     const code = mutated ? magic.toString() : source;
@@ -686,6 +695,8 @@ export default function jsxLoader(input) {
     const callback = this.async();
     try {
         const options = this.getOptions?.() ?? {};
+        const warn = this.emitWarning?.bind(this);
+        const webTarget = isWebTarget(this.target);
         const explicitTags = Array.isArray(options.tags)
             ? options.tags.filter((value) => typeof value === 'string' && value.length > 0)
             : null;
@@ -699,6 +710,9 @@ export default function jsxLoader(input) {
         const configuredTagModes = options.tagModes && typeof options.tagModes === 'object'
             ? options.tagModes
             : undefined;
+        const userSpecifiedMode = parseLoaderMode(options.mode);
+        const defaultMode = userSpecifiedMode ?? DEFAULT_MODE;
+        const userConfiguredTags = new Set();
         if (configuredTagModes) {
             Object.entries(configuredTagModes).forEach(([tagName, mode]) => {
                 const parsed = parseLoaderMode(mode);
@@ -706,15 +720,26 @@ export default function jsxLoader(input) {
                     return;
                 }
                 tagModes.set(tagName, parsed);
+                userConfiguredTags.add(tagName);
             });
         }
-        const defaultMode = parseLoaderMode(options.mode) ?? DEFAULT_MODE;
         const tags = Array.from(new Set([...tagList, ...tagModes.keys()]));
         tags.forEach(tagName => {
             if (!tagModes.has(tagName)) {
                 tagModes.set(tagName, defaultMode);
             }
         });
+        /**
+         * If targeting the web and runtime mode is only implied (not explicitly requested),
+         * keep the runtime output but surface a warning so users can opt into react mode when
+         * bundling for the browser.
+         */
+        if (webTarget && userSpecifiedMode === null) {
+            const hasImplicitRuntime = tags.some(tagName => tagModes.get(tagName) === 'runtime' && !userConfiguredTags.has(tagName));
+            if (hasImplicitRuntime) {
+                warn?.(new Error('[jsx-loader] Web target detected while defaulting to runtime mode; the shipped parser expects a Node-like environment. Set mode: "react" (or configure per-tag) when bundling client code, or provide a browser-safe runtime parser if you intentionally need runtime output.'));
+            }
+        }
         const source = typeof input === 'string' ? input : input.toString('utf8');
         const enableSourceMap = options.sourceMap === true;
         const { code, map } = transformSource(source, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
     "jsx runtime",
@@ -112,19 +112,23 @@
   },
   "engineStrict": true,
   "scripts": {
-    "build": "duel && npm run build:lite && npm run build:cli",
+    "build": "duel --mode globals && npm run build:lite && npm run build:cli",
     "prepare": "husky",
     "precheck-types": "npm run build",
     "check-types": "npm run check-types:lib && npm run check-types:demo && npm run check-types:test",
     "check-types:lib": "tsc --noEmit --project tsconfig.json",
     "check-types:demo": "tsc --noEmit --project examples/browser/tsconfig.json",
     "check-types:test": "tsc --noEmit --project tsconfig.vitest.json",
+    "clean:deps": "rimraf node_modules",
+    "clean:dist": "rimraf dist",
+    "clean": "npm run clean:dist && npm run clean:deps",
     "lint": "eslint src test",
+    "pretest": "npm run build",
     "cycles": "madge src --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json",
     "prettier": "prettier -w .",
     "prettier:check": "prettier --check .",
-    "test": "KNIGHTED_JSX_CLI_TEST=1 vitest run --coverage",
-    "test:watch": "KNIGHTED_JSX_CLI_TEST=1 vitest",
+    "test": "cross-env KNIGHTED_JSX_CLI_TEST=1 vitest run --coverage",
+    "test:watch": "cross-env KNIGHTED_JSX_CLI_TEST=1 vitest",
     "test:e2e": "npm run build && npm run setup:wasm && npm run build:fixture && playwright test",
     "build:fixture": "node scripts/build-rspack-fixture.mjs",
     "demo:node-ssr": "node test/fixtures/node-ssr/render.mjs",
@@ -139,7 +143,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@knighted/duel": "^3.2.0",
+    "@knighted/duel": "^4.0.0",
     "@oxc-project/types": "^0.105.0",
     "@playwright/test": "^1.57.0",
     "@rspack/core": "^1.0.5",
@@ -149,6 +153,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "^4.0.14",
     "@vitest/eslint-plugin": "^1.6.4",
+    "cross-env": "^10.1.0",
     "eslint": "^9.39.1",
     "eslint-plugin-n": "^17.10.3",
     "eslint-plugin-playwright": "^2.4.0",
@@ -163,6 +168,7 @@
     "prettier": "^3.7.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rimraf": "^6.1.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.0",