@arcmantle/lit-jsx 1.0.6 → 1.0.8

package/src/compiler/preprocess.ts

@@ -1,14 +1,16 @@
 import type { PluginPass } from '@babel/core';
-import type { VisitNodeFunction } from '@babel/traverse';
-import { isJSXElement, isJSXIdentifier, type Program } from '@babel/types';
+import type { NodePath, VisitNodeFunction } from '@babel/traverse';
+import type { JSXElement, Program } from '@babel/types';
+import { isJSXElement, isJSXIdentifier } from '@babel/types';
 import { isValidHTMLNesting } from 'validate-html-nesting';
 
 import { isComponent } from './compiler-utils.js';
 
 
-// From https://github.com/MananTank/babel-plugin-validate-jsx-nesting/blob/main/src/index.js
-const JSXValidator = {
-	JSXElement(path: any) {
+const preprocessVisitors = {
+	// From https://github.com/MananTank/babel-plugin-validate-jsx-nesting/blob/main/src/index.js
+	// Validates JSX nesting based on HTML5 rules.
+	JSXElement(path: NodePath<JSXElement>) {
 		const elName = path.node.openingElement.name;
 		const parent = path.parent;
 
@@ -35,6 +37,6 @@ const JSXValidator = {
 };
 
 
-export const preprocess: VisitNodeFunction<PluginPass, Program> = (path, state): void => {
-	path.traverse(JSXValidator);
+export const preprocess: VisitNodeFunction<PluginPass, Program> = (path): void => {
+	path.traverse(preprocessVisitors);
 };

package/src/compiler/transpiler.ts

@@ -92,7 +92,7 @@ export class TemplateTranspiler extends JSXTranspiler<TemplateContext> {
 
 		context.tagName = getJSXElementName(context.path.node);
 
-		if (isJSXCustomElementComponent(context.tagName)) {
+		if (isJSXCustomElementComponent(context.path)) {
 			this.openingTag(context);
 			this.attributes(context);
 			this.children(context);
@@ -101,7 +101,7 @@ export class TemplateTranspiler extends JSXTranspiler<TemplateContext> {
 			return;
 		}
 
-		if (isJSXFunctionElementComponent(context.tagName)) {
+		if (isJSXFunctionElementComponent(context.path)) {
 			// Process attributes and children into a props object
 			if (!context.isInitialElement)
 				return this.functionalComponent(context);
@@ -118,7 +118,7 @@ export class TemplateTranspiler extends JSXTranspiler<TemplateContext> {
 	}
 
 	override openingTag(context: TemplateContext): void {
-		if (isJSXCustomElementComponent(context.tagName)) {
+		if (isJSXCustomElementComponent(context.path)) {
 			const literalIdentifier = Ensure.componentLiteral(
 				context.tagName,
 				COMPONENT_LITERAL_PREFIX + context.tagName,
@@ -414,7 +414,7 @@ export class CompiledTranspiler extends JSXTranspiler<CompiledContext> {
 
 		context.tagName = getJSXElementName(context.path.node);
 
-		if (isJSXFunctionElementComponent(context.tagName)) {
+		if (isJSXFunctionElementComponent(context.path)) {
 			// Process attributes and children into a props object
 			if (!context.isInitialElement)
 				return this.functionalComponent(context);

package/src/compiler/vite-plugin.ts

@@ -21,13 +21,12 @@
  */
 
 import * as babel from '@babel/core';
-import { mergeAndConcat } from 'merge-anything';
+import { deepmerge } from 'deepmerge-ts';
 import type { PluginOption } from 'vite';
 
-import { litJsxBabelPreset } from './babel-preset.js';
-
-
-type BabelPlugins = NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']>;
+import { litJsxBabelPlugin } from './babel-plugin.js';
+import { babelPlugins, debugMode } from './config.js';
+import { ImportDiscovery } from './import-discovery.js';
 
 
 /**
@@ -41,6 +40,7 @@ type BabelPlugins = NonNullable<NonNullable<babel.TransformOptions['parserOpts']
  * @returns Vite plugin configuration
  */
 export const litJsx = (options: {
+	debug?: boolean; // Enable debug mode for additional logging
 	/** Options for the Babel transform */
 	babel?:
 		| babel.TransformOptions
@@ -48,6 +48,8 @@ export const litJsx = (options: {
 } = {}): PluginOption => {
 	let projectRoot: string;
 
+	debugMode.value = !!options.debug;
+
 	return {
 		name:   'lit-jsx-preserve',
 		config: {
@@ -63,10 +65,6 @@ export const litJsx = (options: {
 			},
 			order: 'pre',
 			async handler(source, id) {
-				const plugins: BabelPlugins = [ 'jsx', 'decorators', 'decoratorAutoAccessors' ];
-				if (id.endsWith('.tsx'))
-					plugins.push('typescript');
-
 				// Default value for babel user options
 				let babelUserOptions: babel.TransformOptions = {};
 
@@ -86,29 +84,25 @@ export const litJsx = (options: {
 					root:           projectRoot,
 					filename:       id,
 					sourceFileName: id,
-					presets:        [
-						[
-							litJsxBabelPreset,
-							/* merged into the metadata obj through state.opts */
-							{},
-						],
-					],
-					plugins:    [],
-					ast:        false,
-					sourceMaps: true,
-					configFile: false,
-					babelrc:    false,
-					parserOpts: {
-						plugins,
+					plugins:        [ litJsxBabelPlugin() ],
+					ast:            false,
+					sourceMaps:     true,
+					configFile:     false,
+					babelrc:        false,
+					parserOpts:     {
+						plugins: babelPlugins,
 					},
 				};
 
-				const opts = mergeAndConcat(babelUserOptions, babelOptions);
+				const opts = deepmerge(babelUserOptions, babelOptions);
 				const result = await babel.transformAsync(source, opts);
 
 				if (result?.code)
 					return { code: result.code, map: result.map };
 			},
 		},
+		hotUpdate(options) {
+			ImportDiscovery.clearCacheForFileAndDependents(options.file);
+		},
 	};
 };

package/src/runtime/type-helpers.ts

@@ -1,32 +1,29 @@
 /**
- * Creates a variable which can be used using the Component syntax in JSX.
+ * Creates a component that can be used directly in JSX syntax.
  * Also registers the custom element if it hasn't been registered yet.
  *
  * @example
  * ```tsx
- * import { toJSX } from 'jsx-lit';
+ * import { toComponent } from 'jsx-lit';
  *
  * export class MyButton extends LitElement {
  *   static tagName = 'my-button';
- *   static tag = toJSX(MyButton);
- *
- *   render() {
- *     return html`<button><slot></slot></button>`;
- *   }
  * }
  *
- * // Usage in JSX
+ * const MyButtonComponent = toComponent(MyButton);
+ *
+ * // Usage in JSX - compiler automatically detects this as a custom element
  * const jsx = (
- *   <MyButton.tag
+ *   <MyButtonComponent
  *     class="my-button"
  *     on-click={() => { console.log('Clicked!'); }}
  *   />
  * );
  * ```
  */
-export const toJSX = <T extends { new(...args: any): any; tagName: string; }>(
+export const toComponent = <T extends { new(...args: any): any; tagName: string; }>(
 	element: T,
-): ToJSX<InstanceType<T>> => {
+): ToComponent<InstanceType<T>> => {
 	if (!element.tagName)
 		throw new Error('Element must have a static tagName property');
 
@@ -40,57 +37,48 @@ export const toJSX = <T extends { new(...args: any): any; tagName: string; }>(
 	return element.tagName as any;
 };
 
-export type ToJSX<T extends object> = (props: JSX.JSXProps<T>) => string;
+export type ToComponent<T extends object> = (props: JSX.JSXProps<T>) => string;
 
 
 /**
- * Creates a dynamic tag name object that can be used with jsx-lit's Component syntax.
- * This function is required for dynamic tag names to compile to static literals.
- *
- * **IMPORTANT**: Dynamic tag names must use the `.tag` property pattern to be properly
- * compiled to lit-html static templates. Without this pattern, jsx-lit cannot detect
- * and transform the dynamic tag name into efficient static template literals.
+ * Creates a dynamic tag that can be used directly in JSX syntax.
+ * The compiler automatically detects when this helper is used and compiles
+ * it to efficient static lit-html templates.
  *
  * @example
  * ```tsx
  * import { toTag } from 'jsx-lit';
  *
- * // ✅ Correct usage - creates { tag: 'div' } object
+ * // Creates a dynamic tag that the compiler will recognize
  * const DynamicDiv = toTag('div');
  * const DynamicCustomElement = toTag('my-custom-element');
  *
- * // Usage in JSX with .tag property (required for compilation)
+ * // Usage in JSX - compiler automatically handles the transformation
  * function renderConditional({ useDiv }) {
  *   const Tag = toTag(useDiv ? 'div' : 'span');
- *   return <Tag.tag class="dynamic">Content</Tag.tag>;
+ *   return <Tag class="dynamic">Content</Tag>;
  * }
  *
- * // Compiles to efficient static templates:
+ * // Compiles to efficient static templates automatically:
  * // const Tag = toTag(useDiv ? 'div' : 'span');
- * // const __$Tag = __$literalMap.get(Tag.tag);
+ * // const __$Tag = __$literalMap.get(Tag);
  * // htmlStatic`<${__$Tag} class="dynamic">Content</${__$Tag}>`
  * ```
  *
  * @example
  * ```tsx
- * // ❌ Incorrect usage - won't compile to static templates
- * const badTag = 'div';
- * return <badTag>Content</badTag>; // This won't work with jsx-lit
+ * // ❌ Without toTag helper - won't compile to static templates
+ * const BadTag = 'div';
+ * return <BadTag>Content</BadTag>; // This won't work with jsx-lit
  *
- * // ❌ Incorrect usage - missing .tag property
- * const BadTag = toTag('div');
- * return <BadTag>Content</BadTag>; // Won't compile correctly
- *
- * // ✅ Correct usage - with .tag property
+ * // ✅ With toTag helper - compiler automatically optimizes
  * const GoodTag = toTag('div');
- * return <GoodTag.tag>Content</GoodTag.tag>; // Compiles to static templates
+ * return <GoodTag>Content</GoodTag>; // Compiles to static templates
  * ```
  *
  * @param tag - The HTML tag name (standard HTML elements or custom element names)
- * @returns An object with a `tag` property containing the tag name, designed for use with jsx-lit's Component syntax
+ * @returns A tag identifier that the compiler recognizes for optimization
  */
 export const toTag = <T extends keyof HTMLElementTagNameMap | (string & {})>(
 	tag: T,
-): { tag: T; } => {
-	return { tag } as any;
-};
+): T => tag;

package/dist/compiler/babel-preset.d.ts

@@ -1,6 +0,0 @@
-import type { PluginObj, PluginOptions } from '@babel/core';
-/** Compiles jsx to a combination of standard and compiled lit-html */
-export declare const litJsxBabelPreset: (context: any, options?: {}) => {
-    plugins: [PluginObj, PluginOptions][];
-};
-//# sourceMappingURL=babel-preset.d.ts.map

package/dist/compiler/babel-preset.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"babel-preset.d.ts","sourceRoot":"","sources":["../../src/compiler/babel-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQ5D,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,GAC7B,SAAS,GAAG,EACZ,YAAY,KACV;IAAE,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,EAAE,CAAC;CAqB1C,CAAC"}

package/dist/compiler/babel-preset.js

@@ -1,27 +0,0 @@
-import SyntaxJSX from '@babel/plugin-syntax-jsx';
-import { postprocess } from './postprocess.js';
-import { preprocess } from './preprocess.js';
-import { transformJSXElement } from './transform-jsx.js';
-/** Compiles jsx to a combination of standard and compiled lit-html */
-export const litJsxBabelPreset = (context, options = {}) => {
-    return {
-        plugins: [
-            [
-                {
-                    name: 'lit-jsx-transform',
-                    inherits: SyntaxJSX.default,
-                    visitor: {
-                        JSXElement: transformJSXElement,
-                        JSXFragment: transformJSXElement,
-                        Program: {
-                            enter: preprocess,
-                            exit: postprocess,
-                        },
-                    },
-                },
-                Object.assign({}, options),
-            ],
-        ],
-    };
-};
-//# sourceMappingURL=babel-preset.js.map

package/dist/compiler/babel-preset.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"babel-preset.js","sourceRoot":"","sources":["../../src/compiler/babel-preset.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGzD,sEAAsE;AACtE,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAChC,OAAY,EACZ,OAAO,GAAG,EAAE,EACiC,EAAE;IAC/C,OAAO;QACN,OAAO,EAAE;YACR;gBACC;oBACC,IAAI,EAAM,mBAAmB;oBAC7B,QAAQ,EAAE,SAAS,CAAC,OAAO;oBAC3B,OAAO,EAAG;wBACT,UAAU,EAAG,mBAAmB;wBAChC,WAAW,EAAE,mBAAmB;wBAChC,OAAO,EAAM;4BACZ,KAAK,EAAE,UAAU;4BACjB,IAAI,EAAG,WAAW;yBAClB;qBACD;iBACD;gBACD,MAAM,CAAC,MAAM,CAAC,EACb,EAAE,OAAO,CAAC;aACX;SACD;KACD,CAAC;AACH,CAAC,CAAC"}

package/src/compiler/babel-preset.ts

@@ -1,34 +0,0 @@
-import type { PluginObj, PluginOptions } from '@babel/core';
-import SyntaxJSX from '@babel/plugin-syntax-jsx';
-
-import { postprocess } from './postprocess.js';
-import { preprocess } from './preprocess.js';
-import { transformJSXElement } from './transform-jsx.js';
-
-
-/** Compiles jsx to a combination of standard and compiled lit-html */
-export const litJsxBabelPreset = (
-	context: any,
-	options = {},
-): { plugins: [PluginObj, PluginOptions][]; } => {
-	return {
-		plugins: [
-			[
-				{
-					name:     'lit-jsx-transform',
-					inherits: SyntaxJSX.default,
-					visitor:  {
-						JSXElement:  transformJSXElement,
-						JSXFragment: transformJSXElement,
-						Program:     {
-							enter: preprocess,
-							exit:  postprocess,
-						},
-					},
-				},
-				Object.assign({
-				}, options),
-			],
-		],
-	};
-};