@knighted/jsx 1.6.3-rc.1 → 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/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.3-rc.1",
+  "version": "1.6.3",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
     "jsx runtime",
@@ -119,9 +119,9 @@
     "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:deps && npm run clean:dist",
+    "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",
@@ -143,7 +143,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@knighted/duel": "^4.0.0-rc.5",
+    "@knighted/duel": "^4.0.0",
     "@oxc-project/types": "^0.105.0",
     "@playwright/test": "^1.57.0",
     "@rspack/core": "^1.0.5",