@arcmantle/lit-jsx 1.0.5 → 1.0.7

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),
-			],
-		],
-	};
-};