@arcmantle/lit-jsx 1.0.32 → 1.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +153 -105
- package/dist/compiler/attribute-processor.d.ts +9 -19
- package/dist/compiler/attribute-processor.d.ts.map +1 -1
- package/dist/compiler/attribute-processor.js +22 -39
- package/dist/compiler/attribute-processor.js.map +1 -1
- package/dist/compiler/babel-plugin.d.ts +1 -0
- package/dist/compiler/babel-plugin.d.ts.map +1 -1
- package/dist/compiler/babel-plugin.js +2 -1
- package/dist/compiler/babel-plugin.js.map +1 -1
- package/dist/compiler/compiler-utils.d.ts +9 -1
- package/dist/compiler/compiler-utils.d.ts.map +1 -1
- package/dist/compiler/compiler-utils.js +71 -60
- package/dist/compiler/compiler-utils.js.map +1 -1
- package/dist/compiler/config.d.ts +23 -28
- package/dist/compiler/config.d.ts.map +1 -1
- package/dist/compiler/config.js +28 -28
- package/dist/compiler/config.js.map +1 -1
- package/dist/compiler/oxc-walker.d.ts +4 -4
- package/dist/compiler/oxc-walker.d.ts.map +1 -1
- package/dist/compiler/oxc-walker.js +1 -1
- package/dist/compiler/oxc-walker.js.map +1 -1
- package/dist/compiler/preprocess.d.ts +1 -0
- package/dist/compiler/preprocess.d.ts.map +1 -1
- package/dist/compiler/preprocess.js +31 -0
- package/dist/compiler/preprocess.js.map +1 -1
- package/dist/compiler/transpiler.d.ts.map +1 -1
- package/dist/compiler/transpiler.js +31 -13
- package/dist/compiler/transpiler.js.map +1 -1
- package/dist/compiler/vite-plugin.d.ts +3 -1
- package/dist/compiler/vite-plugin.d.ts.map +1 -1
- package/dist/compiler/vite-plugin.js +1 -0
- package/dist/compiler/vite-plugin.js.map +1 -1
- package/dist/runtime/choose-component.d.ts +2 -2
- package/dist/runtime/choose-component.d.ts.map +1 -1
- package/dist/runtime/for-component.d.ts +3 -3
- package/dist/runtime/for-component.d.ts.map +1 -1
- package/dist/runtime/for-component.js.map +1 -1
- package/dist/runtime/lit-reexports.d.ts +11 -0
- package/dist/runtime/lit-reexports.d.ts.map +1 -0
- package/dist/runtime/lit-reexports.js +14 -0
- package/dist/runtime/lit-reexports.js.map +1 -0
- package/dist/runtime/show-component.d.ts +4 -4
- package/dist/runtime/show-component.d.ts.map +1 -1
- package/dist/runtime/type-helpers.d.ts +1 -1
- package/dist/runtime/type-helpers.d.ts.map +1 -1
- package/dist/shared/jsx-core.d.ts +83 -0
- package/dist/shared/jsx-core.d.ts.map +1 -0
- package/dist/shared/jsx-core.js +2 -0
- package/dist/shared/jsx-core.js.map +1 -0
- package/dist/shared/jsx-dom.d.ts +26 -0
- package/dist/shared/jsx-dom.d.ts.map +1 -0
- package/dist/shared/jsx-dom.js +2 -0
- package/dist/shared/jsx-dom.js.map +1 -0
- package/dist/shared/jsx-hooks.d.ts +69 -0
- package/dist/shared/jsx-hooks.d.ts.map +1 -0
- package/dist/shared/jsx-hooks.js +2 -0
- package/dist/shared/jsx-hooks.js.map +1 -0
- package/dist/shared/jsx-types.d.ts +3 -2140
- package/dist/shared/jsx-types.d.ts.map +1 -1
- package/dist/shared/jsx-types.js +3 -1
- package/dist/shared/jsx-types.js.map +1 -1
- package/dist/utils.d.ts +1 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +3 -0
- package/dist/utils.js.map +1 -1
- package/package.json +17 -17
- package/src/compiler/attribute-processor.ts +33 -60
- package/src/compiler/babel-plugin.ts +3 -1
- package/src/compiler/compiler-utils.ts +91 -259
- package/src/compiler/config.ts +52 -43
- package/src/compiler/oxc-walker.ts +5 -5
- package/src/compiler/preprocess.ts +41 -0
- package/src/compiler/transpiler.ts +31 -12
- package/src/compiler/vite-plugin.ts +4 -1
- package/src/runtime/choose-component.ts +2 -2
- package/src/runtime/for-component.ts +3 -3
- package/src/runtime/lit-reexports.ts +16 -0
- package/src/runtime/show-component.ts +4 -4
- package/src/runtime/type-helpers.ts +1 -1
- package/src/shared/jsx-core.ts +123 -0
- package/src/shared/jsx-dom.ts +29 -0
- package/src/shared/jsx-hooks.ts +86 -0
- package/src/shared/jsx-types.ts +3 -2559
- package/src/utils.ts +15 -0
package/README.md
CHANGED
|
@@ -15,10 +15,10 @@ function TodoItem({ todo, onToggle, onDelete }) {
|
|
|
15
15
|
type="checkbox"
|
|
16
16
|
checked={as.prop(todo.completed)}
|
|
17
17
|
disabled={as.bool(todo.readonly)}
|
|
18
|
-
|
|
18
|
+
onchange={() => onToggle(todo.id)}
|
|
19
19
|
/>
|
|
20
20
|
<span>{todo.text}</span>
|
|
21
|
-
<button
|
|
21
|
+
<button onclick={() => onDelete(todo.id)}>Delete</button>
|
|
22
22
|
</div>
|
|
23
23
|
);
|
|
24
24
|
}
|
|
@@ -41,13 +41,13 @@ html`
|
|
|
41
41
|
### ✨ Key Benefits
|
|
42
42
|
|
|
43
43
|
- **⚡ Zero Runtime Overhead**: Pure compile-time transformation to native Lit templates
|
|
44
|
-
- **🎯 Type-Safe**:
|
|
44
|
+
- **🎯 Type-Safe**: Comprehensive TypeScript support with native DOM type mappings for accurate IntelliSense and type checking
|
|
45
45
|
- **🔧 Vite Integration**: Seamless setup with the included Vite plugin
|
|
46
46
|
- **🎨 Lit Ecosystem**: Works with all Lit directives, custom elements, and patterns
|
|
47
47
|
- **🎛️ Flexible Binding**: Fine-grained control over attribute, property, and boolean bindings
|
|
48
48
|
- **🏷️ Dynamic Tags**: Support for conditional element types with static template optimization
|
|
49
49
|
- **📦 Function Components**: Full support for composable function components
|
|
50
|
-
- **🔗 Custom Elements**:
|
|
50
|
+
- **🔗 Custom Elements**: Use LitElement classes directly in JSX with automatic generic type support
|
|
51
51
|
- **🧩 Library Components**: Built-in `For`, `Show`, and `Choose` components for common rendering patterns
|
|
52
52
|
|
|
53
53
|
## 📦 Installation
|
|
@@ -117,6 +117,23 @@ export class MyComponent extends LitElement {
|
|
|
117
117
|
|
|
118
118
|
## 🎯 Core Concepts
|
|
119
119
|
|
|
120
|
+
### Custom Element Identification
|
|
121
|
+
|
|
122
|
+
lit-jsx needs to know which elements are custom elements to compile them correctly. Custom elements must be identified using the `static` attribute:
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
// ✅ Custom elements - requires static attribute
|
|
126
|
+
<my-custom-element static prop={as.prop(value)}>Content</my-custom-element>
|
|
127
|
+
<MyButton static onclick={handleClick}>Click me</MyButton>
|
|
128
|
+
|
|
129
|
+
// ✅ Regular HTML elements - no static attribute needed
|
|
130
|
+
<div class="container">
|
|
131
|
+
<button onclick={handleClick}>Regular button</button>
|
|
132
|
+
</div>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
**Alternative**: Enable automatic import discovery by setting `useImportDiscovery: true` in your Vite config to restore the previous behavior where the compiler automatically detects custom elements.
|
|
136
|
+
|
|
120
137
|
### Attribute Binding Control
|
|
121
138
|
|
|
122
139
|
lit-jsx provides precise control over how values are bound to elements:
|
|
@@ -132,8 +149,6 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
132
149
|
|
|
133
150
|
```tsx
|
|
134
151
|
<input value={as.prop(userInput)} />
|
|
135
|
-
// or
|
|
136
|
-
<input value={prop => userInput} />
|
|
137
152
|
// Compiles to: <input .value=${userInput} />
|
|
138
153
|
```
|
|
139
154
|
|
|
@@ -141,8 +156,6 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
141
156
|
|
|
142
157
|
```tsx
|
|
143
158
|
<input disabled={as.bool(isDisabled)} />
|
|
144
|
-
// or
|
|
145
|
-
<input disabled={bool => isDisabled} />
|
|
146
159
|
// Compiles to: <input ?disabled=${isDisabled} />
|
|
147
160
|
```
|
|
148
161
|
|
|
@@ -164,11 +177,15 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
164
177
|
|
|
165
178
|
#### Event Handlers
|
|
166
179
|
|
|
180
|
+
Event handlers use standard React-style `onevent` syntax with lowercase event names:
|
|
181
|
+
|
|
167
182
|
```tsx
|
|
168
|
-
<button
|
|
183
|
+
<button onclick={handleClick} ondblclick={handleDoubleClick}>
|
|
169
184
|
// Compiles to: <button @click=${handleClick} @dblclick=${handleDoubleClick}>
|
|
170
185
|
```
|
|
171
186
|
|
|
187
|
+
Common event handlers include `onclick`, `onchange`, `onsubmit`, `onkeydown`, `onmouseover`, etc.
|
|
188
|
+
|
|
172
189
|
#### References
|
|
173
190
|
|
|
174
191
|
```tsx
|
|
@@ -201,11 +218,11 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
201
218
|
lit-jsx fully supports function components that return JSX:
|
|
202
219
|
|
|
203
220
|
```tsx
|
|
204
|
-
const Button = ({ label, variant = 'primary', disabled,
|
|
221
|
+
const Button = ({ label, variant = 'primary', disabled, onclick, children }) => (
|
|
205
222
|
<button
|
|
206
223
|
classList={{ [`btn-${variant}`]: true, 'disabled': disabled }}
|
|
207
224
|
disabled={as.bool(disabled)}
|
|
208
|
-
|
|
225
|
+
onclick={onclick}
|
|
209
226
|
>
|
|
210
227
|
{label || children}
|
|
211
228
|
</button>
|
|
@@ -215,8 +232,8 @@ const Button = ({ label, variant = 'primary', disabled, onClick, children }) =>
|
|
|
215
232
|
<Button
|
|
216
233
|
label="Submit"
|
|
217
234
|
variant="success"
|
|
218
|
-
|
|
219
|
-
disabled={isLoading}
|
|
235
|
+
onclick={handleSubmit}
|
|
236
|
+
disabled={as.bool(isLoading)}
|
|
220
237
|
/>
|
|
221
238
|
```
|
|
222
239
|
|
|
@@ -229,10 +246,9 @@ Function components:
|
|
|
229
246
|
|
|
230
247
|
### Custom Element Integration
|
|
231
248
|
|
|
232
|
-
|
|
249
|
+
lit-jsx provides full type-safe integration with custom elements. You can use LitElement classes directly in JSX:
|
|
233
250
|
|
|
234
251
|
```tsx
|
|
235
|
-
import { toComponent } from '@arcmantle/lit-jsx';
|
|
236
252
|
import { LitElement } from 'lit';
|
|
237
253
|
|
|
238
254
|
export class MyButton extends LitElement {
|
|
@@ -243,21 +259,19 @@ export class MyButton extends LitElement {
|
|
|
243
259
|
}
|
|
244
260
|
}
|
|
245
261
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
<MyButtonComponent
|
|
262
|
+
// Usage - use the class directly with the static attribute
|
|
263
|
+
<MyButton
|
|
264
|
+
static
|
|
250
265
|
class="custom-btn"
|
|
251
|
-
|
|
266
|
+
onclick={() => console.log('Clicked!')}
|
|
252
267
|
/>
|
|
253
268
|
```
|
|
254
269
|
|
|
255
270
|
#### Generic Custom Elements
|
|
256
271
|
|
|
257
|
-
|
|
272
|
+
lit-jsx provides automatic support for generic custom element classes with full type safety:
|
|
258
273
|
|
|
259
274
|
```tsx
|
|
260
|
-
import { toComponent } from '@arcmantle/lit-jsx';
|
|
261
275
|
import { LitElement } from 'lit';
|
|
262
276
|
|
|
263
277
|
class DataList<T> extends LitElement {
|
|
@@ -277,49 +291,47 @@ class DataList<T> extends LitElement {
|
|
|
277
291
|
}
|
|
278
292
|
}
|
|
279
293
|
|
|
280
|
-
//
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
toComponent(DataList);
|
|
286
|
-
|
|
287
|
-
// Usage with explicit type parameter
|
|
288
|
-
<DataListComponent<User>
|
|
289
|
-
items={users}
|
|
290
|
-
renderItem={(user) => `${user.name} (${user.email})`}
|
|
294
|
+
// ✅ Use the class directly with type parameters - generics work automatically!
|
|
295
|
+
<DataList<User>
|
|
296
|
+
static
|
|
297
|
+
items={as.prop(users)}
|
|
298
|
+
renderItem={as.prop((user) => `${user.name} (${user.email})`)}
|
|
291
299
|
/>
|
|
292
300
|
|
|
293
|
-
// Type inference works for the renderItem callback
|
|
294
|
-
<
|
|
295
|
-
|
|
296
|
-
|
|
301
|
+
// Type inference works perfectly for the renderItem callback
|
|
302
|
+
<DataList<Product>
|
|
303
|
+
static
|
|
304
|
+
items={as.prop(products)}
|
|
305
|
+
renderItem={as.prop((product) => `${product.name} - $${product.price}`)}
|
|
297
306
|
/>
|
|
298
307
|
```
|
|
299
308
|
|
|
300
|
-
**
|
|
309
|
+
**Note**: Generic type parameters are automatically preserved when using classes directly in JSX. No manual type annotations needed!
|
|
301
310
|
|
|
302
311
|
#### Parameter Typing for Custom Elements
|
|
303
312
|
|
|
304
|
-
When writing functions that accept custom element
|
|
313
|
+
When writing functions that accept custom element classes as parameters, use proper TypeScript typing:
|
|
305
314
|
|
|
306
315
|
```tsx
|
|
307
|
-
import {
|
|
316
|
+
import { LitElement } from 'lit';
|
|
308
317
|
|
|
309
|
-
// ✅ Using
|
|
310
|
-
function renderWithWrapper
|
|
318
|
+
// ✅ Using the class constructor type directly
|
|
319
|
+
function renderWithWrapper<T extends typeof LitElement>(
|
|
320
|
+
Component: T
|
|
321
|
+
) {
|
|
311
322
|
return ({ children, ...props }) => (
|
|
312
323
|
<div class="wrapper">
|
|
313
|
-
<Component {...props}>{children}</Component>
|
|
324
|
+
<Component static {...props}>{children}</Component>
|
|
314
325
|
</div>
|
|
315
326
|
);
|
|
316
327
|
}
|
|
317
328
|
|
|
318
|
-
// ✅ Using
|
|
319
|
-
|
|
320
|
-
function enhanceButton(ButtonComponent: typeof MyButton) {
|
|
329
|
+
// ✅ Using specific class types
|
|
330
|
+
function createEnhancer(Component: typeof MyButton) {
|
|
321
331
|
return ({ enhanced, ...props }) => (
|
|
322
|
-
<
|
|
332
|
+
<div class={enhanced ? 'enhanced' : ''}>
|
|
333
|
+
<Component static {...props} />
|
|
334
|
+
</div>
|
|
323
335
|
);
|
|
324
336
|
}
|
|
325
337
|
|
|
@@ -329,59 +341,33 @@ function renderComponent(Component: any) {
|
|
|
329
341
|
}
|
|
330
342
|
```
|
|
331
343
|
|
|
332
|
-
**Important**:
|
|
344
|
+
**Important**: Proper typing allows the compiler to recognize custom elements and apply the correct transformations.
|
|
333
345
|
|
|
334
346
|
### Dynamic Tag Names
|
|
335
347
|
|
|
336
|
-
lit-jsx supports dynamic element types using the `
|
|
348
|
+
lit-jsx supports dynamic element types using the `as.tag()` helper:
|
|
337
349
|
|
|
338
350
|
```tsx
|
|
339
|
-
import { toTag } from '@arcmantle/lit-jsx';
|
|
340
|
-
|
|
341
351
|
function ActionElement({ href, children }) {
|
|
342
|
-
const Tag =
|
|
352
|
+
const Tag = as.tag(href ? 'a' : 'button');
|
|
343
353
|
|
|
344
354
|
return (
|
|
345
|
-
<Tag href={href} class="action-element">
|
|
355
|
+
<Tag static href={href} class="action-element">
|
|
346
356
|
{children}
|
|
347
357
|
</Tag>
|
|
348
358
|
);
|
|
349
359
|
}
|
|
350
360
|
```
|
|
351
361
|
|
|
352
|
-
The
|
|
353
|
-
|
|
354
|
-
#### Parameter Typing for Dynamic Tags
|
|
355
|
-
|
|
356
|
-
When writing functions that accept dynamic tag parameters, you must use proper TypeScript typing to ensure the compiler correctly identifies them:
|
|
362
|
+
The `as.tag()` helper signals to the compiler that this is a dynamic tag, allowing it to optimize the template using Lit's static templates.
|
|
357
363
|
|
|
358
364
|
```tsx
|
|
359
|
-
|
|
365
|
+
function DynamicElement({ useDiv, children }) {
|
|
366
|
+
const Tag = as.tag(useDiv ? 'div' : 'span');
|
|
360
367
|
|
|
361
|
-
|
|
362
|
-
function createWrapper(TagName: ToTag) {
|
|
363
|
-
return ({ children, ...props }) => (
|
|
364
|
-
<TagName {...props}>{children}</TagName>
|
|
365
|
-
);
|
|
368
|
+
return <Tag static>{children}</Tag>;
|
|
366
369
|
}
|
|
367
|
-
|
|
368
|
-
// ✅ Using typeof with a toTag() reference
|
|
369
|
-
const ButtonTag = toTag('button');
|
|
370
|
-
function createButton(Element: typeof ButtonTag) {
|
|
371
|
-
return ({ label, ...props }) => (
|
|
372
|
-
<Element {...props}>{label}</Element>
|
|
373
|
-
);
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
// ❌ This won't work - compiler can't detect the dynamic tag
|
|
377
|
-
function createElement(TagName: string) {
|
|
378
|
-
return <TagName>Content</TagName>; // Error: TagName not recognized
|
|
379
|
-
}
|
|
380
|
-
```
|
|
381
|
-
|
|
382
|
-
**Important**: Without proper typing, the compiler cannot determine that a parameter represents a dynamic tag, which will result in compilation errors.
|
|
383
|
-
|
|
384
|
-
### Library Components
|
|
370
|
+
```### Library Components
|
|
385
371
|
|
|
386
372
|
lit-jsx provides utility components that enhance common patterns and integrate seamlessly with Lit directives:
|
|
387
373
|
|
|
@@ -482,7 +468,7 @@ import { Choose } from '@arcmantle/lit-jsx';
|
|
|
482
468
|
(status) => status === 'loading',
|
|
483
469
|
() => (
|
|
484
470
|
<div class="loading">
|
|
485
|
-
<spinner-icon></spinner-icon>
|
|
471
|
+
<spinner-icon static></spinner-icon>
|
|
486
472
|
Loading...
|
|
487
473
|
</div>
|
|
488
474
|
)
|
|
@@ -517,15 +503,15 @@ import { Choose } from '@arcmantle/lit-jsx';
|
|
|
517
503
|
<Choose>
|
|
518
504
|
{[
|
|
519
505
|
() => user.isAdmin,
|
|
520
|
-
() => <admin-panel></admin-panel>
|
|
506
|
+
() => <admin-panel static></admin-panel>
|
|
521
507
|
]}
|
|
522
508
|
{[
|
|
523
509
|
() => user.isModerator,
|
|
524
|
-
() => <moderator-panel></moderator-panel>
|
|
510
|
+
() => <moderator-panel static></moderator-panel>
|
|
525
511
|
]}
|
|
526
512
|
{[
|
|
527
513
|
() => true, // Default case
|
|
528
|
-
() => <user-panel></user-panel>
|
|
514
|
+
() => <user-panel static></user-panel>
|
|
529
515
|
]}
|
|
530
516
|
</Choose>
|
|
531
517
|
```
|
|
@@ -606,7 +592,7 @@ export class UserDashboard extends LitElement {
|
|
|
606
592
|
{() => (
|
|
607
593
|
<div class="empty-state">
|
|
608
594
|
<p>No users found</p>
|
|
609
|
-
<button
|
|
595
|
+
<button onclick={this.loadUsers}>Load Users</button>
|
|
610
596
|
</div>
|
|
611
597
|
)}
|
|
612
598
|
</Show>
|
|
@@ -681,17 +667,17 @@ export class TodoList extends LitElement {
|
|
|
681
667
|
ref={this.inputRef}
|
|
682
668
|
value={as.prop(this.newItemText)}
|
|
683
669
|
placeholder="Add new todo..."
|
|
684
|
-
|
|
685
|
-
|
|
670
|
+
oninput={(e) => this.newItemText = e.target.value}
|
|
671
|
+
onkeydown={(e) => e.key === 'Enter' && this.addItem()}
|
|
686
672
|
/>
|
|
687
|
-
<button
|
|
673
|
+
<button onclick={this.addItem}>Add</button>
|
|
688
674
|
</div>
|
|
689
675
|
|
|
690
676
|
<div class="filters">
|
|
691
677
|
{['all', 'active', 'completed'].map(filterType => (
|
|
692
678
|
<button
|
|
693
679
|
classList={{ active: this.filter === filterType }}
|
|
694
|
-
|
|
680
|
+
onclick={() => this.filter = filterType}
|
|
695
681
|
>
|
|
696
682
|
{filterType}
|
|
697
683
|
</button>
|
|
@@ -722,17 +708,54 @@ export class TodoList extends LitElement {
|
|
|
722
708
|
### Vite Plugin Options
|
|
723
709
|
|
|
724
710
|
```typescript
|
|
725
|
-
import { litJsx } from '@arcmantle/lit-jsx/vite
|
|
711
|
+
import { litJsx } from '@arcmantle/lit-jsx/vite';
|
|
726
712
|
|
|
727
713
|
export default defineConfig({
|
|
728
714
|
plugins: [
|
|
729
715
|
litJsx({
|
|
730
716
|
legacyDecorators: true,
|
|
717
|
+
useCompiledTemplates: true, // Default: true - enables compiled templates for better performance
|
|
718
|
+
useImportDiscovery: false, // Default: false - when false, requires 'static' attribute for custom elements
|
|
731
719
|
}),
|
|
732
720
|
],
|
|
733
721
|
});
|
|
734
722
|
```
|
|
735
723
|
|
|
724
|
+
### Breaking Changes in v1.0.33
|
|
725
|
+
|
|
726
|
+
#### Import Discovery Now Opt-In
|
|
727
|
+
|
|
728
|
+
Starting in v1.0.33, import discovery is disabled by default. This means:
|
|
729
|
+
|
|
730
|
+
- **New default behavior**: Custom elements and dynamic tags must be identified using the `static` attribute
|
|
731
|
+
- **Previous behavior**: Can be restored by setting `useImportDiscovery: true` in the plugin options
|
|
732
|
+
|
|
733
|
+
**Why this change?** The static attribute approach provides better performance, more predictable compilation, and clearer intent in your JSX code.
|
|
734
|
+
|
|
735
|
+
#### Using the Static Attribute
|
|
736
|
+
|
|
737
|
+
The `static` attribute tells the compiler that an element is a custom element or dynamic tag:
|
|
738
|
+
|
|
739
|
+
```tsx
|
|
740
|
+
// ✅ Using static attribute for custom elements
|
|
741
|
+
<MyButton static>Click me</MyButton>
|
|
742
|
+
<MyCustomElement static prop={as.prop(value)}>Content</MyCustomElement>
|
|
743
|
+
|
|
744
|
+
// ✅ For dynamic tags with as.tag()
|
|
745
|
+
const Tag = as.tag(href ? 'a' : 'button');
|
|
746
|
+
<Tag static href={href}>Dynamic element</Tag>
|
|
747
|
+
|
|
748
|
+
// ❌ Without static attribute - treated as regular HTML element
|
|
749
|
+
<MyButton>Click me</MyButton>
|
|
750
|
+
|
|
751
|
+
// ✅ To restore old behavior, enable import discovery
|
|
752
|
+
// vite.config.ts: litJsx({ useImportDiscovery: true })
|
|
753
|
+
```
|
|
754
|
+
|
|
755
|
+
#### Compiled Templates Default
|
|
756
|
+
|
|
757
|
+
Compiled templates are now enabled by default (`useCompiledTemplates: true`) for better performance. The compiler intelligently skips static compilation when children contain dynamic expressions that aren't statically known to be JSX elements.
|
|
758
|
+
|
|
736
759
|
## 🚀 Template Types
|
|
737
760
|
|
|
738
761
|
lit-jsx automatically detects and uses the appropriate template type:
|
|
@@ -756,24 +779,24 @@ lit-jsx automatically detects and uses the appropriate template type:
|
|
|
756
779
|
<div data-id={item.id} aria-label={item.description} />
|
|
757
780
|
```
|
|
758
781
|
|
|
759
|
-
#### **Property Binding (`as.prop()`
|
|
782
|
+
#### **Property Binding (`as.prop()`)**
|
|
760
783
|
|
|
761
784
|
- Standard DOM properties like `value`, `checked`, `selected`
|
|
762
785
|
- Interactive elements that need live property updates
|
|
763
786
|
- Complex object values
|
|
764
787
|
|
|
765
788
|
```tsx
|
|
766
|
-
<input value={as.prop(formData.email)} checked={prop
|
|
789
|
+
<input value={as.prop(formData.email)} checked={as.prop(isSelected)} />
|
|
767
790
|
```
|
|
768
791
|
|
|
769
|
-
#### **Boolean Attribute Binding (`as.bool()`
|
|
792
|
+
#### **Boolean Attribute Binding (`as.bool()`)**
|
|
770
793
|
|
|
771
794
|
- Boolean HTML attributes like `disabled`, `hidden`, `readonly`
|
|
772
795
|
- Accessibility attributes that follow boolean patterns
|
|
773
796
|
- Presence/absence semantics
|
|
774
797
|
|
|
775
798
|
```tsx
|
|
776
|
-
<button disabled={as.bool(isLoading)} hidden={bool
|
|
799
|
+
<button disabled={as.bool(isLoading)} hidden={as.bool(!isVisible)} />
|
|
777
800
|
```
|
|
778
801
|
|
|
779
802
|
### Function Component Guidelines
|
|
@@ -785,7 +808,7 @@ lit-jsx automatically detects and uses the appropriate template type:
|
|
|
785
808
|
|
|
786
809
|
### Dynamic Tag Best Practices
|
|
787
810
|
|
|
788
|
-
- Always use `
|
|
811
|
+
- Always use `as.tag()` to define your dynamic tags
|
|
789
812
|
- Use descriptive variable names for clarity
|
|
790
813
|
- Consider TypeScript for better type safety with HTML elements
|
|
791
814
|
- Document complex dynamic tag logic
|
|
@@ -798,32 +821,55 @@ lit-jsx is designed to work seamlessly with the entire Lit ecosystem:
|
|
|
798
821
|
- **Lit Directives**: All official and community directives work out of the box
|
|
799
822
|
- **Custom Elements**: Easy integration with any custom elements
|
|
800
823
|
- **Web Components**: Standard web component patterns and lifecycle
|
|
801
|
-
- **TypeScript**:
|
|
824
|
+
- **TypeScript**: Leverages native browser type definitions (`lib.dom.d.ts`) for accurate type checking and exceptional IntelliSense support
|
|
802
825
|
|
|
803
826
|
## 📚 Migration Guide
|
|
804
827
|
|
|
805
|
-
###
|
|
828
|
+
### Migrating from Earlier Versions
|
|
829
|
+
|
|
830
|
+
If you're upgrading from v1.0.33 or earlier, please check the [CHANGELOG](./CHANGELOG.md) for breaking changes and migration instructions. Key changes include:
|
|
831
|
+
|
|
832
|
+
- **v1.0.34**: Event handlers now use React-style syntax (`onclick` instead of `on-click`)
|
|
833
|
+
- **v1.0.33**: Custom elements require the `static` attribute for identification
|
|
834
|
+
|
|
835
|
+
### Coming from React
|
|
806
836
|
|
|
807
|
-
lit-jsx
|
|
837
|
+
lit-jsx uses familiar JSX syntax with native DOM attribute names:
|
|
808
838
|
|
|
809
839
|
```tsx
|
|
810
840
|
// React
|
|
811
|
-
<button onClick={handler} className="btn" />
|
|
841
|
+
<button onClick={handler} className="btn" disabled={true} />
|
|
812
842
|
|
|
813
843
|
// lit-jsx
|
|
814
|
-
<button
|
|
844
|
+
<button onclick={handler} class="btn" disabled={as.bool(true)} />
|
|
815
845
|
```
|
|
816
846
|
|
|
817
|
-
|
|
847
|
+
Key differences:
|
|
848
|
+
|
|
849
|
+
- Event handlers: `onclick`, `onchange`, etc. (lowercase, no camelCase)
|
|
850
|
+
- Class attribute: `class` instead of `className`
|
|
851
|
+
- Boolean attributes: Use `as.bool()` for proper binding
|
|
852
|
+
- Property binding: Use `as.prop()` for DOM properties
|
|
853
|
+
|
|
854
|
+
### Coming from Lit html Templates
|
|
855
|
+
|
|
856
|
+
lit-jsx provides a more intuitive syntax for Lit templates:
|
|
818
857
|
|
|
819
858
|
```tsx
|
|
820
859
|
// Lit html
|
|
821
|
-
html`<div class=${classMap(classes)}>${content}</div>`
|
|
860
|
+
html`<div class=${classMap(classes)} @click=${handler}>${content}</div>`
|
|
822
861
|
|
|
823
862
|
// lit-jsx
|
|
824
|
-
<div classList={classes}>{content}</div>
|
|
863
|
+
<div classList={classes} onclick={handler}>{content}</div>
|
|
825
864
|
```
|
|
826
865
|
|
|
866
|
+
Benefits:
|
|
867
|
+
|
|
868
|
+
- Familiar JSX syntax with better IDE support
|
|
869
|
+
- Type-safe components and props
|
|
870
|
+
- Cleaner, more readable code
|
|
871
|
+
- Full access to all Lit features and directives
|
|
872
|
+
|
|
827
873
|
## 🤝 Contributing
|
|
828
874
|
|
|
829
875
|
Contributions, issues or requests are welcome!
|
|
@@ -831,3 +877,5 @@ Contributions, issues or requests are welcome!
|
|
|
831
877
|
## 📄 License
|
|
832
878
|
|
|
833
879
|
Apache-2.0
|
|
880
|
+
|
|
881
|
+
.
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { NodePath } from '@babel/traverse';
|
|
2
2
|
import * as t from '@babel/types';
|
|
3
3
|
import { PartType } from 'lit-html/directive.js';
|
|
4
|
-
import type { EnsureImport
|
|
5
|
-
import { ATTR_VALUES } from './config.js';
|
|
4
|
+
import type { EnsureImport } from './compiler-utils.js';
|
|
6
5
|
import type { CompiledContext, TemplateContext } from './transpiler.js';
|
|
7
6
|
interface CallBindingAttribute extends t.JSXAttribute {
|
|
8
7
|
value: t.JSXExpressionContainer & {
|
|
@@ -15,16 +14,6 @@ interface CallBindingAttribute extends t.JSXAttribute {
|
|
|
15
14
|
};
|
|
16
15
|
};
|
|
17
16
|
}
|
|
18
|
-
interface ArrowFunctionAttribute extends t.JSXAttribute {
|
|
19
|
-
value: t.JSXExpressionContainer & {
|
|
20
|
-
expression: t.ArrowFunctionExpression & {
|
|
21
|
-
params: [t.Identifier & {
|
|
22
|
-
name: Values<typeof ATTR_VALUES>;
|
|
23
|
-
}];
|
|
24
|
-
body: t.Expression;
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
17
|
interface JSXAttributeWithExpression extends t.JSXAttribute {
|
|
29
18
|
value: t.JSXExpressionContainer & {
|
|
30
19
|
expression: t.Expression;
|
|
@@ -42,8 +31,8 @@ interface ValueBinding {
|
|
|
42
31
|
expression: t.Expression;
|
|
43
32
|
}
|
|
44
33
|
export declare class AttributeValidators {
|
|
34
|
+
static isCustomElementIdentifier(attr: t.JSXAttribute): attr is t.JSXAttribute;
|
|
45
35
|
static isCallBinding(attr: t.JSXAttribute): attr is CallBindingAttribute;
|
|
46
|
-
static isArrowBinding(attr: t.JSXAttribute): attr is ArrowFunctionAttribute;
|
|
47
36
|
static isDirective(attr: t.JSXAttribute): attr is JSXAttributeWithExpression;
|
|
48
37
|
static isRef(attr: t.JSXAttribute): attr is JSXAttributeWithExpression;
|
|
49
38
|
static isClassListBinding(attr: t.JSXAttribute): attr is JSXAttributeWithExpression;
|
|
@@ -63,8 +52,8 @@ export interface ProcessorContext {
|
|
|
63
52
|
importsUsed: Set<keyof Omit<typeof EnsureImport, 'prototype'>>;
|
|
64
53
|
}
|
|
65
54
|
declare abstract class AttributeProcessor<TContext extends ProcessorContext> {
|
|
55
|
+
abstract customElementIdentifier(attr: t.JSXAttribute, context: TContext): void;
|
|
66
56
|
abstract callBinding(attr: CallBindingAttribute, context: TContext): void;
|
|
67
|
-
abstract arrowBinding(attr: ArrowFunctionAttribute, context: TContext): void;
|
|
68
57
|
abstract directive(attr: JSXAttributeWithExpression, context: TContext): void;
|
|
69
58
|
abstract ref(attr: JSXAttributeWithExpression, context: TContext): void;
|
|
70
59
|
abstract classList(attr: JSXAttributeWithExpression, context: TContext): void;
|
|
@@ -75,7 +64,7 @@ declare abstract class AttributeProcessor<TContext extends ProcessorContext> {
|
|
|
75
64
|
abstract spread(attr: t.JSXSpreadAttribute, context: TContext): void;
|
|
76
65
|
abstract boolean(attr: JSXAttributeBoolean, context: TContext): void;
|
|
77
66
|
processAttribute(attr: t.JSXAttribute | t.JSXSpreadAttribute, context: TContext): void;
|
|
78
|
-
protected createValueBinding(attr: CallBindingAttribute
|
|
67
|
+
protected createValueBinding(attr: CallBindingAttribute, context: TContext): ValueBinding;
|
|
79
68
|
protected createDirective(attr: JSXAttributeWithExpression, context: TContext): t.Expression[];
|
|
80
69
|
protected createRef(attr: JSXAttributeWithExpression, context: TContext): t.CallExpression;
|
|
81
70
|
protected createClassList(attr: JSXAttributeWithExpression, context: TContext): t.CallExpression;
|
|
@@ -87,8 +76,8 @@ declare abstract class AttributeProcessor<TContext extends ProcessorContext> {
|
|
|
87
76
|
protected createBoolean(attr: JSXAttributeBoolean, context: TContext): string;
|
|
88
77
|
}
|
|
89
78
|
export declare class TemplateAttributeProcessor extends AttributeProcessor<TemplateContext> {
|
|
79
|
+
customElementIdentifier(attr: t.JSXAttribute, context: TemplateContext): void;
|
|
90
80
|
callBinding(attr: CallBindingAttribute, context: TemplateContext): void;
|
|
91
|
-
arrowBinding(attr: ArrowFunctionAttribute, context: TemplateContext): void;
|
|
92
81
|
directive(attr: JSXAttributeWithExpression, context: TemplateContext): void;
|
|
93
82
|
ref(attr: JSXAttributeWithExpression, context: TemplateContext): void;
|
|
94
83
|
classList(attr: JSXAttributeWithExpression, context: TemplateContext): void;
|
|
@@ -98,11 +87,11 @@ export declare class TemplateAttributeProcessor extends AttributeProcessor<Templ
|
|
|
98
87
|
nonExpression(attr: JSXAttributeWithoutExpression, context: TemplateContext): void;
|
|
99
88
|
spread(attribute: t.JSXSpreadAttribute, context: TemplateContext): void;
|
|
100
89
|
boolean(attribute: JSXAttributeBoolean, context: TemplateContext): void;
|
|
101
|
-
protected valueBinding(attr: CallBindingAttribute
|
|
90
|
+
protected valueBinding(attr: CallBindingAttribute, context: TemplateContext): void;
|
|
102
91
|
}
|
|
103
92
|
export declare class CompiledAttributeProcessor extends AttributeProcessor<CompiledContext> {
|
|
93
|
+
customElementIdentifier(attr: t.JSXAttribute, context: CompiledContext): void;
|
|
104
94
|
callBinding(attr: CallBindingAttribute, context: CompiledContext): void;
|
|
105
|
-
arrowBinding(attr: ArrowFunctionAttribute, context: CompiledContext): void;
|
|
106
95
|
directive(attr: JSXAttributeWithExpression, context: CompiledContext): void;
|
|
107
96
|
ref(attr: JSXAttributeWithExpression, context: CompiledContext): void;
|
|
108
97
|
classList(attr: JSXAttributeWithExpression, context: CompiledContext): void;
|
|
@@ -112,7 +101,7 @@ export declare class CompiledAttributeProcessor extends AttributeProcessor<Compi
|
|
|
112
101
|
nonExpression(attr: JSXAttributeWithoutExpression, context: CompiledContext): void;
|
|
113
102
|
spread(attr: t.JSXSpreadAttribute, context: CompiledContext): void;
|
|
114
103
|
boolean(attr: JSXAttributeBoolean, context: CompiledContext): void;
|
|
115
|
-
protected valueBinding(attr: CallBindingAttribute
|
|
104
|
+
protected valueBinding(attr: CallBindingAttribute, context: CompiledContext): void;
|
|
116
105
|
}
|
|
117
106
|
export declare class CreateCompiledPart {
|
|
118
107
|
protected static createBasePart(type: PartType, index: number): t.ObjectProperty[];
|
|
@@ -124,5 +113,6 @@ export declare class CreateCompiledPart {
|
|
|
124
113
|
static boolean(index: number, name: string): t.ObjectExpression;
|
|
125
114
|
static event(index: number, name: string): t.ObjectExpression;
|
|
126
115
|
}
|
|
116
|
+
export declare const hasCustomElementIdentifier: (attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[]) => boolean;
|
|
127
117
|
export {};
|
|
128
118
|
//# sourceMappingURL=attribute-processor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"attribute-processor.d.ts","sourceRoot":"","sources":["../../src/compiler/attribute-processor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"attribute-processor.d.ts","sourceRoot":"","sources":["../../src/compiler/attribute-processor.ts"],"names":[],"mappings":"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"}
|