@knighted/jsx 1.7.9 → 1.9.0

package/README.md

@@ -68,6 +68,32 @@ const button = jsx`
 document.body.append(button)
 ```
 
+### Source transpilation (`transpileJsxSource`)
+
+Need to transform raw JSX source text (e.g. code typed in an editor) without Babel? Use `transpileJsxSource`:
+
+```ts
+import { transpileJsxSource } from '@knighted/jsx/transpile'
+
+const input = `
+const App = () => {
+  return <button>click me</button>
+}
+`
+
+const { code } = transpileJsxSource(input)
+// -> const App = () => { return React.createElement("button", null, "click me") }
+```
+
+By default this emits `React.createElement(...)` and `React.Fragment`. Override them when needed:
+
+```ts
+transpileJsxSource(input, {
+  createElement: '__jsx',
+  fragment: '__fragment',
+})
+```
+
 ### React runtime (`reactJsx`)
 
 Need to compose React elements instead of DOM nodes? Import the dedicated helper from the `@knighted/jsx/react` subpath (React 18+ and `react-dom` are still required to mount the tree):

package/dist/cjs/internal/dom-create-element.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDomCreateElement = exports.Fragment = void 0;
+exports.Fragment = Symbol.for('@knighted/jsx::Fragment');
+const CREATE_ELEMENT_NAMESPACE_PROP = '__jsxNs';
+const resolveChildrenForCreateElement = (props, children) => {
+    if (children.length > 0) {
+        return children;
+    }
+    if (!Object.prototype.hasOwnProperty.call(props, 'children')) {
+        return [];
+    }
+    return [props.children];
+};
+const createPropsForComponent = (props, children) => {
+    const nextProps = { ...props };
+    if (children.length === 1) {
+        nextProps.children = children[0];
+    }
+    else if (children.length > 1) {
+        nextProps.children = children;
+    }
+    else {
+        delete nextProps.children;
+    }
+    return nextProps;
+};
+const resolveNamespaceOverride = (props) => {
+    if (!Object.prototype.hasOwnProperty.call(props, CREATE_ELEMENT_NAMESPACE_PROP)) {
+        return undefined;
+    }
+    const override = props[CREATE_ELEMENT_NAMESPACE_PROP];
+    delete props[CREATE_ELEMENT_NAMESPACE_PROP];
+    if (override === 'svg' || override === null) {
+        return override;
+    }
+    throw new Error(`${CREATE_ELEMENT_NAMESPACE_PROP} must be "svg" or null when provided.`);
+};
+const createDomCreateElement = ({ ensureDomAvailable, appendChildValue, setDomProp, isPromiseLike, }) => {
+    function createElement(type, props, ...children) {
+        ensureDomAvailable();
+        const nextProps = props ? { ...props } : {};
+        const resolvedChildren = resolveChildrenForCreateElement(nextProps, children);
+        if (type === exports.Fragment) {
+            const fragment = document.createDocumentFragment();
+            resolvedChildren.forEach(child => appendChildValue(fragment, child));
+            return fragment;
+        }
+        if (typeof type === 'function') {
+            const result = type(createPropsForComponent(nextProps, resolvedChildren));
+            if (isPromiseLike(result)) {
+                throw new Error('Async jsx components are not supported.');
+            }
+            return result;
+        }
+        if (typeof type !== 'string') {
+            throw new Error(`Unsupported jsx createElement type: ${String(type)}`);
+        }
+        delete nextProps.children;
+        const namespaceOverride = resolveNamespaceOverride(nextProps);
+        const nextNamespace = namespaceOverride ?? (type === 'svg' ? 'svg' : null);
+        const domElement = nextNamespace === 'svg'
+            ? document.createElementNS('http://www.w3.org/2000/svg', type)
+            : document.createElement(type);
+        Object.entries(nextProps).forEach(([name, value]) => {
+            if (name === 'key') {
+                return;
+            }
+            setDomProp(domElement, name, value, nextNamespace);
+        });
+        resolvedChildren.forEach(value => appendChildValue(domElement, value));
+        return domElement;
+    }
+    return createElement;
+};
+exports.createDomCreateElement = createDomCreateElement;

package/dist/cjs/internal/dom-create-element.d.cts

@@ -0,0 +1,21 @@
+import type { Namespace } from './attribute-resolution.cjs';
+import type { JsxComponent, JsxRenderable } from './jsx-types.cjs';
+export declare const FragmentToken: unique symbol;
+export type JsxFragmentToken = typeof FragmentToken;
+export declare const Fragment: JsxFragmentToken;
+type JsxPropsRecord = Record<string, unknown>;
+export type JsxCreateElement = {
+    (type: JsxFragmentToken, props: null, ...children: JsxRenderable[]): DocumentFragment;
+    <Props extends JsxPropsRecord>(type: JsxComponent<Props>, props: (Props & {
+        children?: JsxRenderable | JsxRenderable[];
+    }) | null, ...children: JsxRenderable[]): JsxRenderable;
+    (type: string, props: JsxPropsRecord | null, ...children: JsxRenderable[]): JsxRenderable;
+};
+type DomCreateElementHelpers = {
+    ensureDomAvailable: () => void;
+    appendChildValue: (parent: Node & ParentNode, value: JsxRenderable) => void;
+    setDomProp: (element: Element, name: string, value: unknown, namespace: Namespace) => void;
+    isPromiseLike: (value: unknown) => value is PromiseLike<unknown>;
+};
+export declare const createDomCreateElement: ({ ensureDomAvailable, appendChildValue, setDomProp, isPromiseLike, }: DomCreateElementHelpers) => JsxCreateElement;
+export {};

package/dist/cjs/internal/jsx-types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/internal/jsx-types.d.cts

@@ -0,0 +1,7 @@
+export type JsxRenderable = Node | DocumentFragment | string | number | bigint | boolean | null | undefined | Iterable<JsxRenderable>;
+export type JsxComponent<Props = Record<string, unknown>> = {
+    (props: Props & {
+        children?: JsxRenderable | JsxRenderable[];
+    }): JsxRenderable;
+    displayName?: string;
+};

package/dist/cjs/jsx.cjs

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsx = void 0;
+exports.jsx = exports.createElement = void 0;
 const oxc_parser_1 = require("oxc-parser");
 const shared_js_1 = require("./runtime/shared.cjs");
 const property_information_1 = require("property-information");
 const attribute_resolution_js_1 = require("./internal/attribute-resolution.cjs");
 const event_bindings_js_1 = require("./internal/event-bindings.cjs");
+const dom_create_element_js_1 = require("./internal/dom-create-element.cjs");
 const ensureDomAvailable = () => {
     if (typeof document === 'undefined' || typeof document.createElement !== 'function') {
         throw new Error('The jsx template tag requires a DOM-like environment (document missing).');
@@ -306,7 +307,13 @@ const evaluateJsxNode = (node, ctx, namespace) => {
     }
     return evaluateJsxElement(node, ctx, namespace);
 };
-const jsx = (templates, ...values) => {
+exports.createElement = (0, dom_create_element_js_1.createDomCreateElement)({
+    ensureDomAvailable,
+    appendChildValue,
+    setDomProp,
+    isPromiseLike,
+});
+const jsxTag = (templates, ...values) => {
     ensureDomAvailable();
     const build = (0, shared_js_1.buildTemplate)(templates, values);
     const result = (0, oxc_parser_1.parseSync)('inline.jsx', build.source, shared_js_1.parserOptions);
@@ -321,4 +328,7 @@ const jsx = (templates, ...values) => {
     };
     return evaluateJsxNode(root, ctx, null);
 };
-exports.jsx = jsx;
+exports.jsx = Object.assign(jsxTag, {
+    createElement: exports.createElement,
+    Fragment: dom_create_element_js_1.Fragment,
+});

package/dist/cjs/jsx.d.cts

@@ -1,8 +1,10 @@
-export type JsxRenderable = Node | DocumentFragment | string | number | bigint | boolean | null | undefined | Iterable<JsxRenderable>;
-export type JsxComponent<Props = Record<string, unknown>> = {
-    (props: Props & {
-        children?: JsxRenderable | JsxRenderable[];
-    }): JsxRenderable;
-    displayName?: string;
+import { type JsxFragmentToken, type JsxCreateElement } from './internal/dom-create-element.cjs';
+import type { JsxRenderable } from './internal/jsx-types.cjs';
+export type { JsxRenderable, JsxComponent } from './internal/jsx-types.cjs';
+export declare const createElement: JsxCreateElement;
+type JsxTaggedTemplate = {
+    (templates: TemplateStringsArray, ...values: unknown[]): JsxRenderable;
+    createElement: typeof createElement;
+    Fragment: JsxFragmentToken;
 };
-export declare const jsx: (templates: TemplateStringsArray, ...values: unknown[]) => JsxRenderable;
+export declare const jsx: JsxTaggedTemplate;

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

@@ -1,2 +1,6 @@
-export declare const jsx: (templates: TemplateStringsArray, ...values: unknown[]) => import("../../jsx.cjs").JsxRenderable;
+export declare const jsx: {
+    (templates: TemplateStringsArray, ...values: unknown[]): import("../../jsx.cjs").JsxRenderable;
+    createElement: typeof import("../../jsx.cjs").createElement;
+    Fragment: import("../../internal/dom-create-element.cjs").JsxFragmentToken;
+};
 export type { JsxRenderable, JsxComponent } from '../../jsx.cjs';

package/dist/cjs/node/index.d.cts

@@ -1,2 +1,6 @@
-export declare const jsx: (templates: TemplateStringsArray, ...values: unknown[]) => import("../jsx.cjs").JsxRenderable;
+export declare const jsx: {
+    (templates: TemplateStringsArray, ...values: unknown[]): import("../jsx.cjs").JsxRenderable;
+    createElement: typeof import("../jsx.cjs").createElement;
+    Fragment: import("../internal/dom-create-element.cjs").JsxFragmentToken;
+};
 export type { JsxRenderable, JsxComponent } from '../jsx.cjs';

package/dist/cjs/transpile.cjs

@@ -0,0 +1,255 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transpileJsxSource = transpileJsxSource;
+const magic_string_1 = __importDefault(require("magic-string"));
+const oxc_parser_1 = require("oxc-parser");
+const normalize_text_js_1 = require("./shared/normalize-text.cjs");
+const createModuleParserOptions = (sourceType) => ({
+    lang: 'tsx',
+    sourceType,
+    range: true,
+    preserveParens: true,
+});
+const formatParserError = (error) => {
+    let message = `[jsx] ${error.message}`;
+    if (error.labels?.length) {
+        const label = error.labels[0];
+        if (label.message) {
+            message += `\n${label.message}`;
+        }
+    }
+    if (error.codeframe) {
+        message += `\n${error.codeframe}`;
+    }
+    if (error.helpMessage) {
+        message += `\n${error.helpMessage}`;
+    }
+    return message;
+};
+const isObjectRecord = (value) => typeof value === 'object' && value !== null;
+const isSourceRange = (value) => Array.isArray(value) &&
+    value.length === 2 &&
+    typeof value[0] === 'number' &&
+    typeof value[1] === 'number';
+const hasSourceRange = (value) => isObjectRecord(value) && isSourceRange(value.range);
+const compareByRangeStartDesc = (first, second) => second.range[0] - first.range[0];
+class SourceJsxReactBuilder {
+    source;
+    createElementRef;
+    fragmentRef;
+    constructor(source, createElementRef, fragmentRef) {
+        this.source = source;
+        this.createElementRef = createElementRef;
+        this.fragmentRef = fragmentRef;
+    }
+    compile(node) {
+        return this.compileNode(node);
+    }
+    compileNode(node) {
+        if (node.type === 'JSXFragment') {
+            const children = this.compileChildren(node.children);
+            return this.buildCreateElement(this.fragmentRef, 'null', children);
+        }
+        const opening = node.openingElement;
+        const tagExpr = this.compileTagName(opening.name);
+        const propsExpr = this.compileProps(opening.attributes);
+        const children = this.compileChildren(node.children);
+        return this.buildCreateElement(tagExpr, propsExpr, children);
+    }
+    compileChildren(children) {
+        const compiled = [];
+        children.forEach(child => {
+            switch (child.type) {
+                case 'JSXText': {
+                    const normalized = (0, normalize_text_js_1.normalizeJsxText)(child.value);
+                    if (normalized) {
+                        compiled.push(JSON.stringify(normalized));
+                    }
+                    break;
+                }
+                case 'JSXExpressionContainer': {
+                    if (child.expression.type === 'JSXEmptyExpression') {
+                        break;
+                    }
+                    compiled.push(this.compileExpression(child.expression));
+                    break;
+                }
+                case 'JSXSpreadChild': {
+                    compiled.push(this.compileExpression(child.expression));
+                    break;
+                }
+                case 'JSXElement':
+                case 'JSXFragment': {
+                    compiled.push(this.compileNode(child));
+                    break;
+                }
+            }
+        });
+        return compiled;
+    }
+    compileProps(attributes) {
+        const segments = [];
+        let staticEntries = [];
+        const flushStatics = () => {
+            if (!staticEntries.length) {
+                return;
+            }
+            segments.push(`{ ${staticEntries.join(', ')} }`);
+            staticEntries = [];
+        };
+        attributes.forEach(attribute => {
+            if (attribute.type === 'JSXSpreadAttribute') {
+                flushStatics();
+                const spreadValue = this.compileExpression(attribute.argument);
+                segments.push(`(${spreadValue} ?? {})`);
+                return;
+            }
+            const name = this.compileAttributeName(attribute.name);
+            let value;
+            if (!attribute.value) {
+                value = 'true';
+            }
+            else if (attribute.value.type === 'Literal') {
+                value = JSON.stringify(attribute.value.value);
+            }
+            else if (attribute.value.type === 'JSXExpressionContainer') {
+                if (attribute.value.expression.type === 'JSXEmptyExpression') {
+                    return;
+                }
+                value = this.compileExpression(attribute.value.expression);
+            }
+            else {
+                value = 'undefined';
+            }
+            staticEntries.push(`${JSON.stringify(name)}: ${value}`);
+        });
+        flushStatics();
+        if (!segments.length) {
+            return 'null';
+        }
+        if (segments.length === 1) {
+            return segments[0] ?? 'null';
+        }
+        return `Object.assign({}, ${segments.join(', ')})`;
+    }
+    compileAttributeName(name) {
+        switch (name.type) {
+            case 'JSXIdentifier':
+                return name.name;
+            case 'JSXNamespacedName':
+                return `${name.namespace.name}:${name.name.name}`;
+            case 'JSXMemberExpression':
+                return `${this.compileAttributeName(name.object)}.${name.property.name}`;
+            default:
+                return '';
+        }
+    }
+    compileMemberExpressionTagName(name) {
+        const parts = [];
+        let current = name;
+        while (current.type === 'JSXMemberExpression') {
+            parts.unshift(current.property.name);
+            current = current.object;
+        }
+        parts.unshift(current.name);
+        return parts.join('.');
+    }
+    compileTagName(name) {
+        if (!name) {
+            throw new Error('[jsx] Encountered JSX element without a tag name.');
+        }
+        if (name.type === 'JSXIdentifier') {
+            if (/^[A-Z]/.test(name.name)) {
+                return name.name;
+            }
+            return JSON.stringify(name.name);
+        }
+        if (name.type === 'JSXMemberExpression') {
+            return this.compileMemberExpressionTagName(name);
+        }
+        if (name.type === 'JSXNamespacedName') {
+            return JSON.stringify(`${name.namespace.name}:${name.name.name}`);
+        }
+        throw new Error('[jsx] Unsupported JSX tag expression.');
+    }
+    compileExpression(node) {
+        if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
+            return this.compileNode(node);
+        }
+        if (!hasSourceRange(node)) {
+            throw new Error('[jsx] Unable to read source range for expression node.');
+        }
+        const range = node.range;
+        const nestedJsxRoots = collectRootJsxNodes(node);
+        if (!nestedJsxRoots.length) {
+            return this.source.slice(range[0], range[1]);
+        }
+        const expressionSource = this.source.slice(range[0], range[1]);
+        const magic = new magic_string_1.default(expressionSource);
+        nestedJsxRoots.sort(compareByRangeStartDesc).forEach(jsxNode => {
+            magic.overwrite(jsxNode.range[0] - range[0], jsxNode.range[1] - range[0], this.compileNode(jsxNode));
+        });
+        return magic.toString();
+    }
+    buildCreateElement(type, props, children) {
+        const args = [type, props];
+        if (children.length) {
+            args.push(children.join(', '));
+        }
+        return `${this.createElementRef}(${args.join(', ')})`;
+    }
+}
+const collectRootJsxNodes = (root) => {
+    const nodes = [];
+    const isJsxElementOrFragment = (node) => {
+        if (!isObjectRecord(node)) {
+            return false;
+        }
+        return node.type === 'JSXElement' || node.type === 'JSXFragment';
+    };
+    const walk = (value, insideJsx) => {
+        if (!isObjectRecord(value)) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(entry => walk(entry, insideJsx));
+            return;
+        }
+        const node = value;
+        const isJsxNode = isJsxElementOrFragment(node);
+        if (isJsxNode && hasSourceRange(node) && !insideJsx) {
+            nodes.push(node);
+        }
+        for (const entry of Object.values(node)) {
+            walk(entry, insideJsx || isJsxNode);
+        }
+    };
+    walk(root, false);
+    return nodes;
+};
+function transpileJsxSource(source, options = {}) {
+    const sourceType = options.sourceType ?? 'module';
+    const createElementRef = options.createElement ?? 'React.createElement';
+    const fragmentRef = options.fragment ?? 'React.Fragment';
+    const parsed = (0, oxc_parser_1.parseSync)('transpile-jsx-source.tsx', source, createModuleParserOptions(sourceType));
+    const firstError = parsed.errors[0];
+    if (firstError) {
+        throw new Error(formatParserError(firstError));
+    }
+    const jsxRoots = collectRootJsxNodes(parsed.program);
+    if (!jsxRoots.length) {
+        return { code: source, changed: false };
+    }
+    const builder = new SourceJsxReactBuilder(source, createElementRef, fragmentRef);
+    const magic = new magic_string_1.default(source);
+    jsxRoots.sort(compareByRangeStartDesc).forEach(node => {
+        magic.overwrite(node.range[0], node.range[1], builder.compile(node));
+    });
+    return {
+        code: magic.toString(),
+        changed: true,
+    };
+}

package/dist/cjs/transpile.d.cts

@@ -0,0 +1,12 @@
+type TranspileSourceType = 'module' | 'script';
+export type TranspileJsxSourceOptions = {
+    sourceType?: TranspileSourceType;
+    createElement?: string;
+    fragment?: string;
+};
+export type TranspileJsxSourceResult = {
+    code: string;
+    changed: boolean;
+};
+export declare function transpileJsxSource(source: string, options?: TranspileJsxSourceOptions): TranspileJsxSourceResult;
+export {};

package/dist/internal/dom-create-element.d.ts

@@ -0,0 +1,21 @@
+import type { Namespace } from './attribute-resolution.js';
+import type { JsxComponent, JsxRenderable } from './jsx-types.js';
+export declare const FragmentToken: unique symbol;
+export type JsxFragmentToken = typeof FragmentToken;
+export declare const Fragment: JsxFragmentToken;
+type JsxPropsRecord = Record<string, unknown>;
+export type JsxCreateElement = {
+    (type: JsxFragmentToken, props: null, ...children: JsxRenderable[]): DocumentFragment;
+    <Props extends JsxPropsRecord>(type: JsxComponent<Props>, props: (Props & {
+        children?: JsxRenderable | JsxRenderable[];
+    }) | null, ...children: JsxRenderable[]): JsxRenderable;
+    (type: string, props: JsxPropsRecord | null, ...children: JsxRenderable[]): JsxRenderable;
+};
+type DomCreateElementHelpers = {
+    ensureDomAvailable: () => void;
+    appendChildValue: (parent: Node & ParentNode, value: JsxRenderable) => void;
+    setDomProp: (element: Element, name: string, value: unknown, namespace: Namespace) => void;
+    isPromiseLike: (value: unknown) => value is PromiseLike<unknown>;
+};
+export declare const createDomCreateElement: ({ ensureDomAvailable, appendChildValue, setDomProp, isPromiseLike, }: DomCreateElementHelpers) => JsxCreateElement;
+export {};

package/dist/internal/dom-create-element.js

@@ -0,0 +1,72 @@
+export const Fragment = Symbol.for('@knighted/jsx::Fragment');
+const CREATE_ELEMENT_NAMESPACE_PROP = '__jsxNs';
+const resolveChildrenForCreateElement = (props, children) => {
+    if (children.length > 0) {
+        return children;
+    }
+    if (!Object.prototype.hasOwnProperty.call(props, 'children')) {
+        return [];
+    }
+    return [props.children];
+};
+const createPropsForComponent = (props, children) => {
+    const nextProps = { ...props };
+    if (children.length === 1) {
+        nextProps.children = children[0];
+    }
+    else if (children.length > 1) {
+        nextProps.children = children;
+    }
+    else {
+        delete nextProps.children;
+    }
+    return nextProps;
+};
+const resolveNamespaceOverride = (props) => {
+    if (!Object.prototype.hasOwnProperty.call(props, CREATE_ELEMENT_NAMESPACE_PROP)) {
+        return undefined;
+    }
+    const override = props[CREATE_ELEMENT_NAMESPACE_PROP];
+    delete props[CREATE_ELEMENT_NAMESPACE_PROP];
+    if (override === 'svg' || override === null) {
+        return override;
+    }
+    throw new Error(`${CREATE_ELEMENT_NAMESPACE_PROP} must be "svg" or null when provided.`);
+};
+export const createDomCreateElement = ({ ensureDomAvailable, appendChildValue, setDomProp, isPromiseLike, }) => {
+    function createElement(type, props, ...children) {
+        ensureDomAvailable();
+        const nextProps = props ? { ...props } : {};
+        const resolvedChildren = resolveChildrenForCreateElement(nextProps, children);
+        if (type === Fragment) {
+            const fragment = document.createDocumentFragment();
+            resolvedChildren.forEach(child => appendChildValue(fragment, child));
+            return fragment;
+        }
+        if (typeof type === 'function') {
+            const result = type(createPropsForComponent(nextProps, resolvedChildren));
+            if (isPromiseLike(result)) {
+                throw new Error('Async jsx components are not supported.');
+            }
+            return result;
+        }
+        if (typeof type !== 'string') {
+            throw new Error(`Unsupported jsx createElement type: ${String(type)}`);
+        }
+        delete nextProps.children;
+        const namespaceOverride = resolveNamespaceOverride(nextProps);
+        const nextNamespace = namespaceOverride ?? (type === 'svg' ? 'svg' : null);
+        const domElement = nextNamespace === 'svg'
+            ? document.createElementNS('http://www.w3.org/2000/svg', type)
+            : document.createElement(type);
+        Object.entries(nextProps).forEach(([name, value]) => {
+            if (name === 'key') {
+                return;
+            }
+            setDomProp(domElement, name, value, nextNamespace);
+        });
+        resolvedChildren.forEach(value => appendChildValue(domElement, value));
+        return domElement;
+    }
+    return createElement;
+};

package/dist/internal/jsx-types.d.ts

@@ -0,0 +1,7 @@
+export type JsxRenderable = Node | DocumentFragment | string | number | bigint | boolean | null | undefined | Iterable<JsxRenderable>;
+export type JsxComponent<Props = Record<string, unknown>> = {
+    (props: Props & {
+        children?: JsxRenderable | JsxRenderable[];
+    }): JsxRenderable;
+    displayName?: string;
+};

package/dist/internal/jsx-types.js

@@ -0,0 +1 @@
+export {};

package/dist/jsx.d.ts

@@ -1,8 +1,10 @@
-export type JsxRenderable = Node | DocumentFragment | string | number | bigint | boolean | null | undefined | Iterable<JsxRenderable>;
-export type JsxComponent<Props = Record<string, unknown>> = {
-    (props: Props & {
-        children?: JsxRenderable | JsxRenderable[];
-    }): JsxRenderable;
-    displayName?: string;
+import { type JsxFragmentToken, type JsxCreateElement } from './internal/dom-create-element.js';
+import type { JsxRenderable } from './internal/jsx-types.js';
+export type { JsxRenderable, JsxComponent } from './internal/jsx-types.js';
+export declare const createElement: JsxCreateElement;
+type JsxTaggedTemplate = {
+    (templates: TemplateStringsArray, ...values: unknown[]): JsxRenderable;
+    createElement: typeof createElement;
+    Fragment: JsxFragmentToken;
 };
-export declare const jsx: (templates: TemplateStringsArray, ...values: unknown[]) => JsxRenderable;
+export declare const jsx: JsxTaggedTemplate;

package/dist/jsx.js

@@ -3,6 +3,7 @@ import { buildTemplate, evaluateExpression, extractRootNode, formatTaggedTemplat
 import { find as findPropertyInfo, html as htmlProperties, svg as svgProperties, } from 'property-information';
 import { createResolveAttributes, } from './internal/attribute-resolution.js';
 import { parseEventPropName, resolveEventHandlerValue, } from './internal/event-bindings.js';
+import { Fragment, createDomCreateElement, } from './internal/dom-create-element.js';
 const ensureDomAvailable = () => {
     if (typeof document === 'undefined' || typeof document.createElement !== 'function') {
         throw new Error('The jsx template tag requires a DOM-like environment (document missing).');
@@ -303,7 +304,13 @@ const evaluateJsxNode = (node, ctx, namespace) => {
     }
     return evaluateJsxElement(node, ctx, namespace);
 };
-export const jsx = (templates, ...values) => {
+export const createElement = createDomCreateElement({
+    ensureDomAvailable,
+    appendChildValue,
+    setDomProp,
+    isPromiseLike,
+});
+const jsxTag = (templates, ...values) => {
     ensureDomAvailable();
     const build = buildTemplate(templates, values);
     const result = parseSync('inline.jsx', build.source, parserOptions);
@@ -318,3 +325,7 @@ export const jsx = (templates, ...values) => {
     };
     return evaluateJsxNode(root, ctx, null);
 };
+export const jsx = Object.assign(jsxTag, {
+    createElement,
+    Fragment,
+});