feat(runtime): support tsconfig jsxImportSource (h import no longer necessary) (#6525)

* feat(runtime): support tsconfig `jsxImportSource` (meaning `h` import no longer necessary)

* chore:

---------

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Author: johnjenkins

cspell-wordlist.txt

@@ -150,4 +150,6 @@ xlink
 yourpackage
 fdir
 shadowrootmode
-shadowrootdelegatesfocus
+shadowrootdelegatesfocus
+jsxmode
+jsxdev

package.json

@@ -28,6 +28,16 @@
       "import": "./internal/stencil-core/index.js",
       "require": "./internal/stencil-core/index.cjs"
     },
+    "./jsx-runtime": {
+      "types": "./internal/stencil-core/jsx-runtime.d.ts",
+      "import": "./internal/stencil-core/jsx-runtime.js",
+      "require": "./internal/stencil-core/jsx-runtime.cjs"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./internal/stencil-core/jsx-dev-runtime.d.ts",
+      "import": "./internal/stencil-core/jsx-dev-runtime.js",
+      "require": "./internal/stencil-core/jsx-dev-runtime.cjs"
+    },
     "./cli": {
       "import": "./cli/index.js",
       "require": "./cli/index.cjs"

src/declarations/stencil-public-runtime.ts

@@ -772,6 +772,45 @@ export declare function h(sel: any, text: string): VNode;
 export declare function h(sel: any, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
+
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsx mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsx(type: any, props: any, key?: string): VNode;
+
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxmode with multiple children.
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsxs(type: any, props: any, key?: string): VNode;
+
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxdev mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsxdev".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @param isStaticChildren indicates if the children are static
+ * @param source source information
+ * @param self reference to the component instance
+ * @returns a jsx vnode
+ */
+export declare function jsxDEV(
+  type: any,
+  props: any,
+  key?: string | number,
+  isStaticChildren?: boolean,
+  source?: any,
+  self?: any,
+): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
 
 /**

src/internal/stencil-core/jsx-dev-runtime.cjs

@@ -0,0 +1,7 @@
+// Export automatic JSX development runtime (CommonJS)
+// Note: This requires the client platform to be built
+const client = require('../client/index.js');
+module.exports = {
+  jsxDEV: client.jsxDEV,
+  Fragment: client.Fragment,
+};

src/internal/stencil-core/jsx-dev-runtime.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Automatic JSX Development Runtime type definitions for Stencil
+ *
+ * This module provides TypeScript type definitions for the automatic JSX development runtime.
+ * When using "jsx": "react-jsxdev" in tsconfig.json with "jsxImportSource": "@stencil/core",
+ * TypeScript will automatically import from this module in development mode.
+ */
+
+import type { VNode } from '../stencil-public-runtime';
+
+export { Fragment } from '../stencil-public-runtime';
+
+/**
+ * JSX development runtime function for creating elements with debug info.
+ */
+export function jsxDEV(
+  type: any,
+  props: any,
+  key?: string | number,
+  isStaticChildren?: boolean,
+  source?: any,
+  self?: any,
+): VNode;

src/internal/stencil-core/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+// Re-export from the client platform (same pattern as index.js)
+export { jsxDEV, Fragment } from '../client/index.js';

src/internal/stencil-core/jsx-runtime.cjs

@@ -0,0 +1,8 @@
+// Export automatic JSX runtime (CommonJS)
+// Note: This requires the client platform to be built
+const client = require('../client/index.js');
+module.exports = {
+  jsx: client.jsx,
+  jsxs: client.jsxs,
+  Fragment: client.Fragment,
+};

src/internal/stencil-core/jsx-runtime.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Automatic JSX Runtime type definitions for Stencil
+ *
+ * This module provides TypeScript type definitions for the automatic JSX runtime.
+ * When using "jsx": "react-jsx" or "jsx": "react-jsxdev" in tsconfig.json with
+ * "jsxImportSource": "@stencil/core", TypeScript will automatically import from
+ * these modules instead of requiring manual `h` imports.
+ */
+
+import type { VNode } from '../stencil-public-runtime';
+
+export { Fragment } from '../stencil-public-runtime';
+
+/**
+ * JSX runtime function for creating elements in production mode.
+ */
+export function jsx(type: any, props: any, key?: string): VNode;
+
+/**
+ * JSX runtime function for creating elements with static children.
+ */
+export function jsxs(type: any, props: any, key?: string): VNode;

src/internal/stencil-core/jsx-runtime.js

@@ -0,0 +1,2 @@
+// Re-export from the client platform (same pattern as index.js)
+export { jsx, jsxs, Fragment } from '../client/index.js';

src/runtime/index.ts

@@ -19,5 +19,7 @@ export { getValue, setValue } from './set-value';
 export { setTagTransformer, transformTag } from './tag-transform';
 export { forceUpdate, getRenderingRef, postUpdateComponent } from './update-component';
 export { h, Host } from './vdom/h';
+export { jsxDEV } from './vdom/jsx-dev-runtime';
+export { jsx, jsxs } from './vdom/jsx-runtime';
 export { insertVdomAnnotations } from './vdom/vdom-annotations';
 export { renderVdom } from './vdom/vdom-render';