@arcmantle/lit-jsx 1.0.5 → 1.0.7

package/dist/runtime/type-helpers.d.ts

@@ -1,81 +1,69 @@
 /**
- * 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 declare const toJSX: <T extends {
+export declare const toComponent: <T extends {
     new (...args: any): any;
     tagName: string;
-}>(element: T) => ToJSX<InstanceType<T>>;
-export type ToJSX<T extends object> = (props: JSX.JSXProps<T>) => string;
+}>(element: T) => ToComponent<InstanceType<T>>;
+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
- *
- * // ❌ Incorrect usage - missing .tag property
- * const BadTag = toTag('div');
- * return <BadTag>Content</BadTag>; // Won't compile correctly
+ * // ❌ Without toTag helper - won't compile to static templates
+ * const BadTag = 'div';
+ * return <BadTag>Content</BadTag>; // This won't work with jsx-lit
  *
- * // ✅ 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 declare const toTag: <T extends keyof HTMLElementTagNameMap | (string & {})>(tag: T) => {
-    tag: T;
-};
+export declare const toTag: <T extends keyof HTMLElementTagNameMap | (string & {})>(tag: T) => T;
 //# sourceMappingURL=type-helpers.d.ts.map

package/dist/runtime/type-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type-helpers.d.ts","sourceRoot":"","sources":["../../src/runtime/type-helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;CAAE,EAC3E,SAAS,CAAC,KACR,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAYvB,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;AAGzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,qBAAqB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAC1E,KAAK,CAAC,KACJ;IAAE,GAAG,EAAE,CAAC,CAAC;CAEX,CAAC"}
+{"version":3,"file":"type-helpers.d.ts","sourceRoot":"","sources":["../../src/runtime/type-helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;CAAE,EACjF,SAAS,CAAC,KACR,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAY7B,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;AAG/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,qBAAqB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAC1E,KAAK,CAAC,KACJ,CAAQ,CAAC"}

package/dist/runtime/type-helpers.js

@@ -1,30 +1,27 @@
 /**
- * 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 = (element) => {
+export const toComponent = (element) => {
     if (!element.tagName)
         throw new Error('Element must have a static tagName property');
     queueMicrotask(() => {
@@ -36,52 +33,43 @@ export const toJSX = (element) => {
     return element.tagName;
 };
 /**
- * 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 = (tag) => {
-    return { tag };
-};
+export const toTag = (tag) => tag;
 //# sourceMappingURL=type-helpers.js.map

package/dist/runtime/type-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-helpers.js","sourceRoot":"","sources":["../../src/runtime/type-helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CACpB,OAAU,EACe,EAAE;IAC3B,IAAI,CAAC,OAAO,CAAC,OAAO;QACnB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IAEhE,cAAc,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,UAAU;YAClE,OAAO,CAAC,QAAQ,EAAE,CAAC;aACf,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC;YAC5C,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,OAAc,CAAC;AAC/B,CAAC,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CACpB,GAAM,EACQ,EAAE;IAChB,OAAO,EAAE,GAAG,EAAS,CAAC;AACvB,CAAC,CAAC"}
+{"version":3,"file":"type-helpers.js","sourceRoot":"","sources":["../../src/runtime/type-helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAC1B,OAAU,EACqB,EAAE;IACjC,IAAI,CAAC,OAAO,CAAC,OAAO;QACnB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IAEhE,cAAc,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,UAAU;YAClE,OAAO,CAAC,QAAQ,EAAE,CAAC;aACf,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC;YAC5C,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,OAAc,CAAC;AAC/B,CAAC,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CACpB,GAAM,EACF,EAAE,CAAC,GAAG,CAAC"}

package/package.json

@@ -9,7 +9,7 @@
     "type": "git",
     "url": "git+https://github.com/arcmantle/lit-jsx.git"
   },
-  "version": "1.0.5",
+  "version": "1.0.7",
   "files": [
     "dist",
     "src"
@@ -33,11 +33,14 @@
     "@types/babel__traverse": "^7.20.7",
     "csstype": "^3.1.3",
     "merge-anything": "^6.0.6",
+    "oxc-resolver": "^11.5.0",
+    "pino": "^9.7.0",
+    "pino-pretty": "^13.0.0",
     "validate-html-nesting": "^1.2.1"
   },
   "devDependencies": {
     "@arcmantle/tsconfig": "^1.0.5",
-    "@types/node": "^24.0.10",
+    "@types/node": "^24.0.13",
     "lit-html": "^3.3.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.8.3",

package/src/compiler/babel-plugin.ts

@@ -0,0 +1,23 @@
+import type { PluginItem } 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 litJsxBabelPlugin = (): PluginItem => {
+	return {
+		name:     'lit-jsx-transform',
+		inherits: SyntaxJSX.default,
+		visitor:  {
+			JSXElement:  transformJSXElement,
+			JSXFragment: transformJSXElement,
+			Program:     {
+				enter: preprocess,
+				exit:  postprocess,
+			},
+		},
+	} satisfies PluginItem;
+};

package/src/compiler/babel-traverse.ts

@@ -0,0 +1,7 @@
+import _traverse from '@babel/traverse';
+
+export let traverse: typeof _traverse;
+if (typeof _traverse === 'function')
+	traverse = _traverse;
+else
+	traverse = (_traverse as any).default;

package/src/compiler/compiler-utils.ts

@@ -1,10 +1,11 @@
-import type { Binding, NodePath } from '@babel/traverse';
+import type { Binding, Hub, NodePath } from '@babel/traverse';
 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 { COMPONENT_POSTFIX, ERROR_MESSAGES, SOURCES, VARIABLES } from './config.js';
+import { ERROR_MESSAGES, SOURCES, VARIABLES } from './config.js';
+import { findElementDefinition } from './import-discovery.js';
 
 
 export type Values<T> = T[keyof T];
@@ -25,6 +26,14 @@ export const getProgramFromPath = (path: NodePath): t.Program => {
 };
 
 
+export const getPathFilename = (path: NodePath): string => {
+	const hub = path.hub as Hub & { file: { opts: { filename: string; }; }; };
+	const currentFileName = hub.file.opts.filename;
+
+	return currentFileName;
+};
+
+
 export class Ensure {
 
 	static findProgram(path: NodePath): NodePath<t.Program> {
@@ -328,9 +337,6 @@ export class Ensure {
 	): t.Identifier {
 		EnsureImport.literalMap(program, path);
 
-		variableName = variableName.replace(COMPONENT_POSTFIX, '');
-		tagName = tagName.replace(COMPONENT_POSTFIX, '');
-
 		return this.componentTagDeclaration(
 			path,
 			tagName,
@@ -342,7 +348,7 @@ export class Ensure {
 						t.identifier(VARIABLES.LITERAL_MAP),
 						t.identifier('get'),
 					),
-					[ t.identifier(tagName + COMPONENT_POSTFIX) ],
+					[ t.identifier(tagName) ],
 				),
 			),
 		);
@@ -698,12 +704,21 @@ export const getJSXElementName = (node: t.JSXElement): string => {
 };
 
 
-export const isJSXCustomElementComponent = (nodeOrName: t.JSXElement | string): boolean => {
-	const tagName = typeof nodeOrName !== 'string'
-		? getJSXElementName(nodeOrName)
-		: nodeOrName;
+export const isJSXCustomElementComponent = (
+	path: NodePath<t.JSXElement | t.JSXFragment>,
+): boolean => {
+	const node = path.node;
+
+	if (t.isJSXFragment(node))
+		return false;
+
+	const tagName: string = getJSXElementName(node);
 
-	if (tagName.endsWith(COMPONENT_POSTFIX))
+	if (!isComponent(tagName))
+		return false;
+
+	const type = findElementDefinition(path.get('openingElement'));
+	if (type.type === 'custom-element')
 		return true;
 
 	return false;
@@ -711,25 +726,20 @@ export const isJSXCustomElementComponent = (nodeOrName: t.JSXElement | string):
 
 
 export const isJSXFunctionElementComponent = (
-	pathOrName: NodePath<t.JSXElement | t.JSXFragment> | string,
+	path: NodePath<t.JSXElement | t.JSXFragment>,
 ): boolean => {
-	let tagName: string;
-	if (typeof pathOrName === 'string') {
-		tagName = pathOrName;
-	}
-	else {
-		const node = pathOrName.node;
-		// If it's a fragment, we cannot determine the tag name.
-		if (t.isJSXFragment(node))
-			return false;
+	const node = path.node;
 
-		tagName = getJSXElementName(node);
-	}
+	if (t.isJSXFragment(node))
+		return false;
+
+	const tagName: string = getJSXElementName(node);
 
 	if (!isComponent(tagName))
 		return false;
 
-	if (tagName.endsWith(COMPONENT_POSTFIX))
+	const type = findElementDefinition(path.get('openingElement'));
+	if (type.type === 'custom-element')
 		return false;
 
 	return true;
@@ -749,7 +759,7 @@ export const isJSXFragmentPath = (path: NodePath): path is NodePath<t.JSXFragmen
  * @returns true if the template will be static, false otherwise
  */
 export const isJSXElementStatic = (path: NodePath<t.JSXElement | t.JSXFragment>): boolean => {
-	if (t.isJSXElement(path.node) && isJSXCustomElementComponent(path.node))
+	if (t.isJSXElement(path.node) && isJSXCustomElementComponent(path))
 		return true;
 
 	for (const childPath of path.get('children')) {

package/src/compiler/config.ts

@@ -1,6 +1,11 @@
-//
+export type BabelPlugins = NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']>;
+
+
+export const babelPlugins: BabelPlugins = [ 'jsx', 'typescript', 'decorators', 'decoratorAutoAccessors' ];
+export const debugMode = { value: false };
+
+
 export const COMPONENT_LITERAL_PREFIX = '__$';
-export const COMPONENT_POSTFIX = '.tag';
 export const WHITESPACE_TAGS: string[] = [ 'pre', 'textarea' ];
 export const SPECIAL_TAGS: string[] = [];
 export const ATTR_NAMES = {

package/src/compiler/create-logger.ts

@@ -0,0 +1,35 @@
+import pino, { type Logger } from 'pino';
+import { prettyFactory } from 'pino-pretty';
+
+
+export const createLogger = (name: string, debug?: boolean): Logger<never, boolean> => {
+	const prettify = prettyFactory({
+		sync:          true,
+		colorize:      true,
+		ignore:        'pid,hostname',
+		translateTime: 'HH:MM:ss',
+	});
+	const hooks: pino.LoggerOptions['hooks'] | undefined = {
+		streamWrite: (s) => {
+			console.log(prettify(s));
+
+			return '';
+		},
+	};
+
+	return pino({
+		name,
+		level: debug ? 'trace' : 'info',
+		hooks,
+		//...(debug && {
+		//	transport: {
+		//		target:  'pino-pretty',
+		//		options: {
+		//			colorize:      true,
+		//			translateTime: 'HH:MM:ss',
+		//			ignore:        'pid,hostname',
+		//		},
+		//	},
+		//}),
+	});
+};