@arcmantle/lit-jsx 1.0.33 → 1.1.0

package/src/compiler/compiler-utils.ts

@@ -420,327 +420,132 @@ export class Ensure {
 }
 
 
+interface ImportConfig {
+	source: string;
+	name:   string;
+	local:  string;
+}
+
+const IMPORT_CONFIGS = {
+	html:          { source: SOURCES.HTML,          name: VARIABLES.HTML,            local: VARIABLES.HTML_LOCAL          },
+	htmlStatic:    { source: SOURCES.HTML_STATIC,   name: VARIABLES.HTML_STATIC,     local: VARIABLES.HTML_STATIC_LOCAL   },
+	svg:           { source: SOURCES.SVG,           name: VARIABLES.SVG,             local: VARIABLES.SVG_LOCAL           },
+	svgStatic:     { source: SOURCES.SVG_STATIC,    name: VARIABLES.SVG_STATIC,      local: VARIABLES.SVG_STATIC_LOCAL    },
+	mathml:        { source: SOURCES.MATHML,        name: VARIABLES.MATHML,          local: VARIABLES.MATHML_LOCAL        },
+	mathmlStatic:  { source: SOURCES.MATHML_STATIC, name: VARIABLES.MATHML_STATIC,   local: VARIABLES.MATHML_STATIC_LOCAL },
+	unsafeStatic:  { source: SOURCES.UNSAFE_STATIC, name: VARIABLES.UNSAFE_STATIC,   local: VARIABLES.UNSAFE_STATIC_LOCAL },
+	createRef:     { source: SOURCES.REF,           name: VARIABLES.REF,             local: VARIABLES.REF_LOCAL           },
+	styleMap:      { source: SOURCES.STYLE_MAP,     name: VARIABLES.STYLE_MAP,       local: VARIABLES.STYLE_MAP_LOCAL     },
+	classMap:      { source: SOURCES.CLASS_MAP,     name: VARIABLES.CLASS_MAP,       local: VARIABLES.CLASS_MAP_LOCAL     },
+	rest:          { source: SOURCES.REST,          name: VARIABLES.REST,            local: VARIABLES.REST                },
+	literalMap:    { source: SOURCES.LITERAL_MAP,   name: VARIABLES.LITERAL_MAP,     local: VARIABLES.LITERAL_MAP         },
+	booleanPart:   { source: SOURCES.JSX_LIT,       name: VARIABLES.BOOLEAN_PART,    local: VARIABLES.BOOLEAN_PART        },
+	attributePart: { source: SOURCES.JSX_LIT,       name: VARIABLES.ATTRIBUTE_PART,  local: VARIABLES.ATTRIBUTE_PART      },
+	propertyPart:  { source: SOURCES.JSX_LIT,       name: VARIABLES.PROPERTY_PART,   local: VARIABLES.PROPERTY_PART       },
+	elementPart:   { source: SOURCES.JSX_LIT,       name: VARIABLES.ELEMENT_PART,    local: VARIABLES.ELEMENT_PART        },
+	eventPart:     { source: SOURCES.JSX_LIT,       name: VARIABLES.EVENT_PART,      local: VARIABLES.EVENT_PART          },
+	childPart:     { source: SOURCES.JSX_LIT,       name: VARIABLES.CHILD_PART,      local: VARIABLES.CHILD_PART          },
+	tTemplateUtil: { source: SOURCES.JSX_LIT,       name: VARIABLES.T_TEMPLATE_UTIL, local: VARIABLES.T_TEMPLATE_UTIL     },
+} as const;
+
 export class EnsureImport {
 
-	static html(program: t.Program, path: NodePath): void {
+	protected static ensureImport(
+		config: ImportConfig,
+		program: t.Program,
+		path: NodePath,
+	): void {
 		Ensure.import(
-			(source) => source === SOURCES.HTML || source === SOURCES.HTML_ALT,
-			(name) => name === VARIABLES.HTML,
+			(source) => source === config.source,
+			(name) => name === config.name,
 			() => t.importDeclaration(
 				[
 					t.importSpecifier(
-						t.identifier(VARIABLES.HTML_LOCAL),
-						t.identifier(VARIABLES.HTML),
+						t.identifier(config.local),
+						t.identifier(config.name),
 					),
 				],
-				t.stringLiteral(SOURCES.HTML),
+				t.stringLiteral(config.source),
 			),
 			program,
 			path,
 		);
 	}
 
+	static html(program: t.Program, path: NodePath): void {
+		this.ensureImport(IMPORT_CONFIGS.html, program, path);
+	}
+
 	static htmlStatic(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.HTML_STATIC || source === SOURCES.HTML_STATIC_ALT,
-			(name) => name === VARIABLES.HTML,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.HTML_STATIC_LOCAL),
-						t.identifier(VARIABLES.HTML_STATIC),
-					),
-				],
-				t.stringLiteral(SOURCES.HTML_STATIC),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.htmlStatic, program, path);
 	}
 
 	static svg(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.SVG || source === SOURCES.SVG_ALT,
-			(name) => name === VARIABLES.SVG,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.SVG_LOCAL),
-						t.identifier(VARIABLES.SVG),
-					),
-				],
-				t.stringLiteral(SOURCES.SVG),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.svg, program, path);
 	}
 
 	static svgStatic(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.SVG_STATIC || source === SOURCES.SVG_STATIC_ALT,
-			(name) => name === VARIABLES.SVG,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.SVG_STATIC_LOCAL),
-						t.identifier(VARIABLES.SVG_STATIC),
-					),
-				],
-				t.stringLiteral(SOURCES.SVG_STATIC),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.svgStatic, program, path);
 	}
 
 	static mathml(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.MATHML || source === SOURCES.MATHML_ALT,
-			(name) => name === VARIABLES.MATHML,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.MATHML_LOCAL),
-						t.identifier(VARIABLES.MATHML),
-					),
-				],
-				t.stringLiteral(SOURCES.MATHML),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.mathml, program, path);
 	}
 
 	static mathmlStatic(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.MATHML_STATIC || source === SOURCES.MATHML_STATIC_ALT,
-			(name) => name === VARIABLES.MATHML,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.MATHML_STATIC_LOCAL),
-						t.identifier(VARIABLES.MATHML_STATIC),
-					),
-				],
-				t.stringLiteral(SOURCES.MATHML_STATIC),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.mathmlStatic, program, path);
 	}
 
 	static unsafeStatic(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.UNSAFE_STATIC || source === SOURCES.UNSAFE_STATIC_ALT,
-			(name) => name === VARIABLES.UNSAFE_STATIC,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.UNSAFE_STATIC_LOCAL),
-						t.identifier(VARIABLES.UNSAFE_STATIC),
-					),
-				],
-				t.stringLiteral(SOURCES.UNSAFE_STATIC),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.unsafeStatic, program, path);
 	}
 
 	static createRef(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.REF_ALT || source === SOURCES.REF,
-			(name) => name === VARIABLES.REF,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.REF_LOCAL),
-						t.identifier(VARIABLES.REF),
-					),
-				],
-				t.stringLiteral(SOURCES.REF),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.createRef, program, path);
 	}
 
 	static styleMap(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.STYLE_MAP_ALT || source === SOURCES.STYLE_MAP,
-			(name) => name === VARIABLES.STYLE_MAP,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.STYLE_MAP_LOCAL),
-						t.identifier(VARIABLES.STYLE_MAP),
-					),
-				],
-				t.stringLiteral(SOURCES.STYLE_MAP),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.styleMap, program, path);
 	}
 
 	static classMap(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.CLASS_MAP_ALT || source === SOURCES.CLASS_MAP,
-			(name) => name === VARIABLES.CLASS_MAP,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.CLASS_MAP_LOCAL),
-						t.identifier(VARIABLES.CLASS_MAP),
-					),
-				],
-				t.stringLiteral(SOURCES.CLASS_MAP),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.classMap, program, path);
 	}
 
 	static rest(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.REST,
-			(name) => name === VARIABLES.REST,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.REST),
-						t.identifier(VARIABLES.REST),
-					),
-				],
-				t.stringLiteral(SOURCES.REST),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.rest, program, path);
 	}
 
 	static literalMap(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.LITERAL_MAP,
-			(name) => name === VARIABLES.LITERAL_MAP,
-			() => t.importDeclaration(
-				[
-					t.importSpecifier(
-						t.identifier(VARIABLES.LITERAL_MAP),
-						t.identifier(VARIABLES.LITERAL_MAP),
-					),
-				],
-				t.stringLiteral(SOURCES.LITERAL_MAP),
-			),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.literalMap, program, path);
 	}
 
 	static taggedTemplateUtil(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.JSX_LIT,
-			(name) => name === VARIABLES.TAGGED_TEMPLATE_UTIL,
-			() => t.importDeclaration([
-				t.importSpecifier(
-					t.identifier(VARIABLES.TAGGED_TEMPLATE_UTIL),
-					t.identifier(VARIABLES.TAGGED_TEMPLATE_UTIL),
-				),
-			], t.stringLiteral(SOURCES.JSX_LIT)),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.tTemplateUtil, program, path);
 	}
 
 	static booleanPart(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.JSX_LIT,
-			(name) => name === VARIABLES.BOOLEAN_PART,
-			() => t.importDeclaration([
-				t.importSpecifier(
-					t.identifier(VARIABLES.BOOLEAN_PART),
-					t.identifier(VARIABLES.BOOLEAN_PART),
-				),
-			], t.stringLiteral(SOURCES.JSX_LIT)),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.booleanPart, program, path);
 	}
 
 	static attributePart(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.JSX_LIT,
-			(name) => name === VARIABLES.ATTRIBUTE_PART,
-			() => t.importDeclaration([
-				t.importSpecifier(
-					t.identifier(VARIABLES.ATTRIBUTE_PART),
-					t.identifier(VARIABLES.ATTRIBUTE_PART),
-				),
-			], t.stringLiteral(SOURCES.JSX_LIT)),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.attributePart, program, path);
 	}
 
 	static propertyPart(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.JSX_LIT,
-			(name) => name === VARIABLES.PROPERTY_PART,
-			() => t.importDeclaration([
-				t.importSpecifier(
-					t.identifier(VARIABLES.PROPERTY_PART),
-					t.identifier(VARIABLES.PROPERTY_PART),
-				),
-			], t.stringLiteral(SOURCES.JSX_LIT)),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.propertyPart, program, path);
 	}
 
 	static elementPart(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.JSX_LIT,
-			(name) => name === VARIABLES.ELEMENT_PART,
-			() => t.importDeclaration([
-				t.importSpecifier(
-					t.identifier(VARIABLES.ELEMENT_PART),
-					t.identifier(VARIABLES.ELEMENT_PART),
-				),
-			], t.stringLiteral(SOURCES.JSX_LIT)),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.elementPart, program, path);
 	}
 
 	static eventPart(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.JSX_LIT,
-			(name) => name === VARIABLES.EVENT_PART,
-			() => t.importDeclaration([
-				t.importSpecifier(
-					t.identifier(VARIABLES.EVENT_PART),
-					t.identifier(VARIABLES.EVENT_PART),
-				),
-			], t.stringLiteral(SOURCES.JSX_LIT)),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.eventPart, program, path);
 	}
 
 	static childPart(program: t.Program, path: NodePath): void {
-		Ensure.import(
-			(source) => source === SOURCES.JSX_LIT,
-			(name) => name === VARIABLES.CHILD_PART,
-			() => t.importDeclaration([
-				t.importSpecifier(
-					t.identifier(VARIABLES.CHILD_PART),
-					t.identifier(VARIABLES.CHILD_PART),
-				),
-			], t.stringLiteral(SOURCES.JSX_LIT)),
-			program,
-			path,
-		);
+		this.ensureImport(IMPORT_CONFIGS.childPart, program, path);
 	}
 
 }

package/src/compiler/config.ts

@@ -21,7 +21,7 @@ export const ATTR_NAMES = {
 	CLASS_LIST:   'classList',
 	STYLE_LIST:   'styleList',
 	DIRECTIVE:    'directive',
-	EVENT_PREFIX: 'on-',
+	EVENT_PREFIX: 'on',
 } as const;
 export const ATTR_BIND_OBJ_NAME = 'as';
 export const ATTR_VALUES = {
@@ -31,15 +31,15 @@ export const ATTR_VALUES = {
 export const VARIABLES = {
 	HTML:                'html',
 	HTML_LOCAL:          '__$html',
-	HTML_STATIC:         'html',
+	HTML_STATIC:         'htmlStatic',
 	HTML_STATIC_LOCAL:   '__$htmlStatic',
 	SVG:                 'svg',
 	SVG_LOCAL:           '__$svg',
-	SVG_STATIC:          'svg',
+	SVG_STATIC:          'svgStatic',
 	SVG_STATIC_LOCAL:    '__$svgStatic',
 	MATHML:              'mathml',
 	MATHML_LOCAL:        '__$mathml',
-	MATHML_STATIC:       'mathml',
+	MATHML_STATIC:       'mathmlStatic',
 	MATHML_STATIC_LOCAL: '__$mathmlStatic',
 	UNSAFE_STATIC:       'unsafeStatic',
 	UNSAFE_STATIC_LOCAL: '__$unsafeStatic',
@@ -49,41 +49,30 @@ export const VARIABLES = {
 	STYLE_MAP_LOCAL:     '__$styleMap',
 	REF:                 'ref',
 	REF_LOCAL:           '__$ref',
-
-	REST:                 '__$rest',
-	LITERAL_MAP:          '__$literalMap',
-	TAGGED_TEMPLATE_UTIL: '__$t',
-	BOOLEAN_PART:         'BooleanPart',
-	ATTRIBUTE_PART:       'AttributePart',
-	PROPERTY_PART:        'PropertyPart',
-	ELEMENT_PART:         'ElementPart',
-	EVENT_PART:           'EventPart',
-	CHILD_PART:           'ChildPart',
+	REST:                '__$rest',
+	LITERAL_MAP:         '__$literalMap',
+	T_TEMPLATE_UTIL:     '__$t',
+	BOOLEAN_PART:        'BooleanPart',
+	ATTRIBUTE_PART:      'AttributePart',
+	PROPERTY_PART:       'PropertyPart',
+	ELEMENT_PART:        'ElementPart',
+	EVENT_PART:          'EventPart',
+	CHILD_PART:          'ChildPart',
 } as const;
 export const SOURCES = {
-	HTML:              'lit-html',
-	HTML_ALT:          'lit',
-	HTML_STATIC:       'lit-html/static.js',
-	HTML_STATIC_ALT:   'lit/static-html.js',
-	SVG:               'lit-html/directives/svg.js',
-	SVG_ALT:           'lit/directives/svg.js',
-	MATHML:            'lit-html/directives/mathml.js',
-	MATHML_ALT:        'lit/directives/mathml.js',
-	SVG_STATIC:        'lit-html/static.js',
-	SVG_STATIC_ALT:    'lit/static-html.js',
-	MATHML_STATIC:     'lit-html/static.js',
-	MATHML_STATIC_ALT: 'lit/static-html.js',
-	UNSAFE_STATIC:     'lit-html/static.js',
-	UNSAFE_STATIC_ALT: 'lit/static-html.js',
-	REF:               'lit-html/directives/ref.js',
-	REF_ALT:           'lit/directives/ref.js',
-	CLASS_MAP:         'lit-html/directives/class-map.js',
-	CLASS_MAP_ALT:     'lit/directives/class-map.js',
-	STYLE_MAP:         'lit-html/directives/style-map.js',
-	STYLE_MAP_ALT:     'lit/directives/style-map.js',
-	REST:              '@arcmantle/lit-jsx',
-	LITERAL_MAP:       '@arcmantle/lit-jsx',
-	JSX_LIT:           '@arcmantle/lit-jsx',
+	HTML:          '@arcmantle/lit-jsx',
+	HTML_STATIC:   '@arcmantle/lit-jsx',
+	SVG:           '@arcmantle/lit-jsx',
+	SVG_STATIC:    '@arcmantle/lit-jsx',
+	MATHML:        '@arcmantle/lit-jsx',
+	MATHML_STATIC: '@arcmantle/lit-jsx',
+	UNSAFE_STATIC: '@arcmantle/lit-jsx',
+	REF:           '@arcmantle/lit-jsx',
+	CLASS_MAP:     '@arcmantle/lit-jsx',
+	STYLE_MAP:     '@arcmantle/lit-jsx',
+	REST:          '@arcmantle/lit-jsx',
+	LITERAL_MAP:   '@arcmantle/lit-jsx',
+	JSX_LIT:       '@arcmantle/lit-jsx',
 } as const;
 export const ERROR_MESSAGES = {
 	INVALID_INITIAL_ELEMENT:    'Invalid initial element found. The first element must be a JSX element.',

package/src/compiler/oxc-walker.ts

@@ -1,19 +1,19 @@
-import oxc from 'oxc-parser';
+import { type Node, type Program } from 'oxc-parser';
 import { ScopeTracker, walk } from 'oxc-walker';
 
 
 type WalkerContext = ThisParameterType<NonNullable<Parameters<typeof walk>[1]['enter']>>;
 type WalkerCallbackContext = Parameters<NonNullable<Parameters<typeof walk>[1]['enter']>>[2];
-type NodeWalker<T extends oxc.Node['type']> = (
-	node: Extract<oxc.Node, { type: T; }>,
-	parent: oxc.Node | null,
+type NodeWalker<T extends Node['type']> = (
+	node: Extract<Node, { type: T; }>,
+	parent: Node | null,
 	ctx: WalkerContext,
 	scope: ScopeTracker,
 	cbCtx: WalkerCallbackContext
 ) => void;
 
 
-export const oxcWalker = (input: oxc.Program | oxc.Node, options: Partial<{
+export const oxcWalker = (input: Program | Node, options: Partial<{
 	callExpression: NodeWalker<'CallExpression'>;
 }>): void => {
 	const scopeTracker = new ScopeTracker();

package/src/compiler/preprocess.ts

@@ -76,3 +76,44 @@ export const preprocess: VisitNodeFunction<PluginPass, t.Program> = (path): void
 	path.traverse(ensureValidJSXNesting);
 	path.traverse(ensureValidFunctionsReturningJSX);
 };
+
+
+/**
+ * Strips all compiler-only helper calls like `as.prop(x)`, `as.bool(x)`, and `as.tag(x)`.
+ *
+ * These helpers are declared as type-only globals and must never survive into emitted JS.
+ * This runs AFTER JSX transformation, so the JSX transformer has already used as.prop() and
+ * as.bool() to determine the correct part types (BooleanPart, PropertyPart, etc).
+ */
+const stripCompilerOnlyAsHelpers: TraverseOptions = {
+	CallExpression(path) {
+		const { node } = path;
+
+		if (!t.isMemberExpression(node.callee))
+			return;
+
+		if (!t.isIdentifier(node.callee.object) || node.callee.object.name !== 'as')
+			return;
+
+		if (!t.isIdentifier(node.callee.property))
+			return;
+
+		const name = node.callee.property.name;
+		if (name !== 'prop' && name !== 'bool' && name !== 'tag')
+			return;
+
+		if (node.arguments.length !== 1)
+			return;
+
+		const arg = node.arguments[0];
+		if (!t.isExpression(arg))
+			return;
+
+		// Strip all as.* helper calls after JSX transformation
+		path.replaceWith(arg);
+	},
+};
+
+export const postprocess: VisitNodeFunction<PluginPass, t.Program> = (path): void => {
+	path.traverse(stripCompilerOnlyAsHelpers);
+};

package/src/runtime/choose-component.ts

@@ -4,7 +4,7 @@ import { nothing } from 'lit-html';
 type ChooseValue<T> = T extends undefined ? never : T;
 type ChooseChild<T> = [
 	condition: (value: ChooseValue<T>) => boolean,
-	output: (value: ChooseValue<T>) => JSX.JSXElement,
+	output: (value: ChooseValue<T>) => LitJSX.Child,
 ];
 
 
@@ -39,7 +39,7 @@ type ChooseChild<T> = [
 export function Choose<T = undefined>(props: {
 	value?:   T;
 	children: ChooseChild<T> | ChooseChild<T>[];
-}): JSX.JSXElement {
+}): LitJSX.Child {
 	const children = Array.isArray(props.children.at(-1))
 		? props.children as ChooseChild<T>[]
 		: [ props.children as ChooseChild<T> ];

package/src/runtime/for-component.ts

@@ -21,12 +21,12 @@ import { repeat } from 'lit-html/directives/repeat.js';
  * </For>
  * ```
  */
-export function For<T, U extends JSX.JSXElement>(props: {
+export function For<T, U extends LitJSX.Child>(props: {
 	each:       readonly T[];
 	key?:       (item: T, index: number) => any;
-	separator?: JSX.JSXElement;
+	separator?: LitJSX.Child;
 	children:   (item: T, index: number) => U;
-}): JSX.JSXElement {
+}): LitJSX.Child {
 	if (props.key) {
 		return repeat(
 			props.each,

package/src/runtime/lit-reexports.ts

@@ -0,0 +1,16 @@
+/**
+ * Re-exports of lit-html functionality used by the transpiler.
+ * This allows consumers to use @arcmantle/lit-jsx without having direct lit-html dependencies.
+ * Only exports what the transpiler actually generates in its output code.
+ */
+
+// Core template tags
+export { html, mathml, svg } from 'lit-html';
+
+// Static template tags
+export { html as htmlStatic, mathml as mathmlStatic, svg as svgStatic, unsafeStatic } from 'lit-html/static.js';
+
+// Directives
+export { classMap } from 'lit-html/directives/class-map.js';
+export { ref } from 'lit-html/directives/ref.js';
+export { styleMap } from 'lit-html/directives/style-map.js';

package/src/runtime/show-component.ts

@@ -26,12 +26,12 @@ import { when } from 'lit-html/directives/when.js';
 export function Show<C>(props: {
 	when:     C;
 	children:
-		| ((value: NoInfer<C>) => JSX.JSXElement)
+		| ((value: NoInfer<C>) => LitJSX.Child)
 		| [
-			true: ((value: NoInfer<C>) => JSX.JSXElement),
-			false: ((value: NoInfer<C>) => JSX.JSXElement),
+			true: ((value: NoInfer<C>) => LitJSX.Child),
+			false: ((value: NoInfer<C>) => LitJSX.Child),
 		];
-}): JSX.JSXElement {
+}): LitJSX.Child {
 	if (Array.isArray(props.children))
 		return when(props.when, props.children[0], props.children[1]);
 

package/src/runtime/type-helpers.ts

@@ -36,7 +36,7 @@ export const toComponent = <T extends { new(...args: any): any; tagName: string;
 };
 
 export type ToComponent<T extends object = object> =
-	(props: JSX.JSXProps<T> & { static: any; }) => string;
+	(props: LitJSX.JSXProps<T> & { static: any; }) => string;
 
 
 /**