@arcmantle/lit-jsx 1.0.32 → 1.0.34

package/src/compiler/compiler-utils.ts

@@ -6,9 +6,9 @@ import * as t from '@babel/types';
 
 import { isMathmlTag } from '../shared/mathml-tags.js';
 import { isSvgTag } from '../shared/svg-tags.js';
-import type { ProcessorContext } from './attribute-processor.js';
+import { hasCustomElementIdentifier, type ProcessorContext } from './attribute-processor.js';
 import { traverse } from './babel-traverse.js';
-import { babelPlugins, ERROR_MESSAGES, SOURCES, VARIABLES } from './config.js';
+import { babelPlugins, ERROR_MESSAGES, options, SOURCES, VARIABLES } from './config.js';
 import { isDynamicOrCustomElement } from './import-discovery.js';
 
 
@@ -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);
 	}
 
 }
@@ -795,9 +600,14 @@ export const isJSXCustomElementComponent = (
 	if (!isComponent(tagName))
 		return false;
 
-	if (isDynamicOrCustomElement(path.get('openingElement')))
+	if (hasCustomElementIdentifier(node.openingElement.attributes))
 		return true;
 
+	if (options.useImportDiscovery) {
+		if (isDynamicOrCustomElement(path.get('openingElement')))
+			return true;
+	}
+
 	return false;
 };
 
@@ -815,9 +625,14 @@ export const isJSXFunctionElementComponent = (
 	if (!isComponent(tagName))
 		return false;
 
-	if (isDynamicOrCustomElement(path.get('openingElement')))
+	if (hasCustomElementIdentifier(node.openingElement.attributes))
 		return false;
 
+	if (options.useImportDiscovery) {
+		if (isDynamicOrCustomElement(path.get('openingElement')))
+			return false;
+	}
+
 	return true;
 };
 
@@ -839,6 +654,16 @@ export const isJSXElementStatic = (path: NodePath<t.JSXElement | t.JSXFragment>)
 		return true;
 
 	for (const childPath of path.get('children')) {
+		// If it has an expression container as a child, with an unknown value inside.
+		// treat it as a static element, as we cannot safely compile it.
+		if (t.isJSXExpressionContainer(childPath.node)) {
+			// Check if the expression value is a JSXElement or JSXFragment
+			if (!t.isJSXElement(childPath.node.expression)
+				&& !t.isJSXFragment(childPath.node.expression))
+				return true;
+		}
+
+		// If it's not a jsx element and not a jsx fragment, continue skip this.
 		if (!isJSXElementPath(childPath) && !isJSXFragmentPath(childPath))
 			continue;
 
@@ -892,3 +717,10 @@ export const getTemplateTag = (
 
 	return VARIABLES.HTML;
 };
+
+
+export const normalizeText = (text: string): string => {
+	return text
+		.replace(/[\r\n\t]/g, '')
+		.replace(/ {2,}/g, ' ');
+};

package/src/compiler/config.ts

@@ -1,12 +1,18 @@
 import type { BabelFile, PluginPass } from '@babel/core';
 
+
 export type BabelPlugins = NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']>;
 
 
-export const babelPlugins: Set<BabelPlugins[number]> = new Set([ 'jsx', 'typescript', 'decorators', 'decoratorAutoAccessors' ]);
+export const babelPlugins: Set<BabelPlugins[number]> = new Set([
+	'jsx',
+	'typescript',
+	'decorators',
+	'decoratorAutoAccessors',
+]);
 export const debugMode = { value: false };
 
-
+export const CE_ATTR_IDENTIFIER = 'static';
 export const COMPONENT_LITERAL_PREFIX = '__$';
 export const WHITESPACE_TAGS: string[] = [ 'pre', 'textarea' ];
 export const SPECIAL_TAGS: string[] = [];
@@ -15,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 = {
@@ -25,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',
@@ -43,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.',
@@ -97,26 +92,40 @@ export const ERROR_MESSAGES = {
 } as const;
 
 
+interface PluginOptions {
+	useCompiledTemplates?: boolean;
+	useImportDiscovery?:   boolean;
+}
+
+
 export const initializePluginOptions = (file: BabelFile): { useCompiledTemplates?: boolean; } => {
 	if (optionsInitialized)
 		return options;
 
 	optionsInitialized = true;
 
-	const plugin = file.opts?.plugins
-		?.find(plugin => (plugin as PluginPass).key === 'lit-jsx-transform') as { options?: { useCompiledTemplates?: boolean; }; };
+	const plugin = file.opts?.plugins?.find(plugin =>
+		(plugin as PluginPass).key === 'lit-jsx-transform') as { options?: PluginOptions; };
 
 	const pluginOptions = plugin?.options || {};
+	pluginOptions.useCompiledTemplates ??= true;
 
 	for (const [ key, value ] of Object.entries(pluginOptions))
 		options[key as keyof typeof options] = value as any;
 
 	console.log(`Lit JSX plugin options initialized:`, options);
 
-
 	return pluginOptions;
 };
 
 
+export const getPluginOptions = (file: BabelFile): PluginOptions => {
+	const plugin = file.opts?.plugins?.find(plugin =>
+		(plugin as PluginPass).key === 'lit-jsx-transform') as { options?: PluginOptions; };
+
+	return plugin.options ?? {};
+};
+
+
 let optionsInitialized = false;
-export const options: { useCompiledTemplates?: boolean; } = {};
+export const options: PluginOptions = {};

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);
+};