@arcmantle/lit-jsx 1.0.33 → 1.1.0
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 +95 -145
- package/dist/compiler/attribute-processor.d.ts +4 -19
- package/dist/compiler/attribute-processor.d.ts.map +1 -1
- package/dist/compiler/attribute-processor.js +1 -38
- package/dist/compiler/attribute-processor.js.map +1 -1
- 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 +7 -0
- package/dist/compiler/compiler-utils.d.ts.map +1 -1
- package/dist/compiler/compiler-utils.js +45 -57
- package/dist/compiler/compiler-utils.js.map +1 -1
- package/dist/compiler/config.d.ts +15 -25
- package/dist/compiler/config.d.ts.map +1 -1
- package/dist/compiler/config.js +15 -25
- 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/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 +5 -62
- package/src/compiler/babel-plugin.ts +2 -1
- package/src/compiler/compiler-utils.ts +60 -255
- package/src/compiler/config.ts +26 -37
- package/src/compiler/oxc-walker.ts +5 -5
- package/src/compiler/preprocess.ts +41 -0
- 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
|
|
@@ -119,20 +119,16 @@ export class MyComponent extends LitElement {
|
|
|
119
119
|
|
|
120
120
|
### Custom Element Identification
|
|
121
121
|
|
|
122
|
-
lit-jsx needs to know which elements are custom elements
|
|
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
123
|
|
|
124
124
|
```tsx
|
|
125
125
|
// ✅ Custom elements - requires static attribute
|
|
126
|
-
<my-custom-element static prop={value}>Content</my-custom-element>
|
|
127
|
-
<MyButton static
|
|
128
|
-
|
|
129
|
-
// ✅ Dynamic tags - requires static attribute
|
|
130
|
-
const Tag = toTag('button');
|
|
131
|
-
<Tag static onClick={handleClick}>Dynamic button</Tag>
|
|
126
|
+
<my-custom-element static prop={as.prop(value)}>Content</my-custom-element>
|
|
127
|
+
<MyButton static onclick={handleClick}>Click me</MyButton>
|
|
132
128
|
|
|
133
129
|
// ✅ Regular HTML elements - no static attribute needed
|
|
134
|
-
<div
|
|
135
|
-
<button
|
|
130
|
+
<div class="container">
|
|
131
|
+
<button onclick={handleClick}>Regular button</button>
|
|
136
132
|
</div>
|
|
137
133
|
```
|
|
138
134
|
|
|
@@ -153,8 +149,6 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
153
149
|
|
|
154
150
|
```tsx
|
|
155
151
|
<input value={as.prop(userInput)} />
|
|
156
|
-
// or
|
|
157
|
-
<input value={prop => userInput} />
|
|
158
152
|
// Compiles to: <input .value=${userInput} />
|
|
159
153
|
```
|
|
160
154
|
|
|
@@ -162,8 +156,6 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
162
156
|
|
|
163
157
|
```tsx
|
|
164
158
|
<input disabled={as.bool(isDisabled)} />
|
|
165
|
-
// or
|
|
166
|
-
<input disabled={bool => isDisabled} />
|
|
167
159
|
// Compiles to: <input ?disabled=${isDisabled} />
|
|
168
160
|
```
|
|
169
161
|
|
|
@@ -185,11 +177,15 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
185
177
|
|
|
186
178
|
#### Event Handlers
|
|
187
179
|
|
|
180
|
+
Event handlers use standard React-style `onevent` syntax with lowercase event names:
|
|
181
|
+
|
|
188
182
|
```tsx
|
|
189
|
-
<button
|
|
183
|
+
<button onclick={handleClick} ondblclick={handleDoubleClick}>
|
|
190
184
|
// Compiles to: <button @click=${handleClick} @dblclick=${handleDoubleClick}>
|
|
191
185
|
```
|
|
192
186
|
|
|
187
|
+
Common event handlers include `onclick`, `onchange`, `onsubmit`, `onkeydown`, `onmouseover`, etc.
|
|
188
|
+
|
|
193
189
|
#### References
|
|
194
190
|
|
|
195
191
|
```tsx
|
|
@@ -222,11 +218,11 @@ lit-jsx provides precise control over how values are bound to elements:
|
|
|
222
218
|
lit-jsx fully supports function components that return JSX:
|
|
223
219
|
|
|
224
220
|
```tsx
|
|
225
|
-
const Button = ({ label, variant = 'primary', disabled,
|
|
221
|
+
const Button = ({ label, variant = 'primary', disabled, onclick, children }) => (
|
|
226
222
|
<button
|
|
227
223
|
classList={{ [`btn-${variant}`]: true, 'disabled': disabled }}
|
|
228
224
|
disabled={as.bool(disabled)}
|
|
229
|
-
|
|
225
|
+
onclick={onclick}
|
|
230
226
|
>
|
|
231
227
|
{label || children}
|
|
232
228
|
</button>
|
|
@@ -236,8 +232,8 @@ const Button = ({ label, variant = 'primary', disabled, onClick, children }) =>
|
|
|
236
232
|
<Button
|
|
237
233
|
label="Submit"
|
|
238
234
|
variant="success"
|
|
239
|
-
|
|
240
|
-
disabled={isLoading}
|
|
235
|
+
onclick={handleSubmit}
|
|
236
|
+
disabled={as.bool(isLoading)}
|
|
241
237
|
/>
|
|
242
238
|
```
|
|
243
239
|
|
|
@@ -250,10 +246,9 @@ Function components:
|
|
|
250
246
|
|
|
251
247
|
### Custom Element Integration
|
|
252
248
|
|
|
253
|
-
|
|
249
|
+
lit-jsx provides full type-safe integration with custom elements. You can use LitElement classes directly in JSX:
|
|
254
250
|
|
|
255
251
|
```tsx
|
|
256
|
-
import { toComponent } from '@arcmantle/lit-jsx';
|
|
257
252
|
import { LitElement } from 'lit';
|
|
258
253
|
|
|
259
254
|
export class MyButton extends LitElement {
|
|
@@ -264,22 +259,19 @@ export class MyButton extends LitElement {
|
|
|
264
259
|
}
|
|
265
260
|
}
|
|
266
261
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
// Usage with type safety - requires static attribute to identify as custom element
|
|
270
|
-
<MyButtonComponent
|
|
262
|
+
// Usage - use the class directly with the static attribute
|
|
263
|
+
<MyButton
|
|
271
264
|
static
|
|
272
265
|
class="custom-btn"
|
|
273
|
-
|
|
266
|
+
onclick={() => console.log('Clicked!')}
|
|
274
267
|
/>
|
|
275
268
|
```
|
|
276
269
|
|
|
277
270
|
#### Generic Custom Elements
|
|
278
271
|
|
|
279
|
-
|
|
272
|
+
lit-jsx provides automatic support for generic custom element classes with full type safety:
|
|
280
273
|
|
|
281
274
|
```tsx
|
|
282
|
-
import { toComponent } from '@arcmantle/lit-jsx';
|
|
283
275
|
import { LitElement } from 'lit';
|
|
284
276
|
|
|
285
277
|
class DataList<T> extends LitElement {
|
|
@@ -299,39 +291,34 @@ class DataList<T> extends LitElement {
|
|
|
299
291
|
}
|
|
300
292
|
}
|
|
301
293
|
|
|
302
|
-
//
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
// ✅ Required: Explicit type annotation to preserve generic functionality
|
|
306
|
-
const DataListComponent: <T>(props: JSX.JSXProps<DataList<T>>) => string =
|
|
307
|
-
toComponent(DataList);
|
|
308
|
-
|
|
309
|
-
// Usage with explicit type parameter
|
|
310
|
-
<DataListComponent<User>
|
|
294
|
+
// ✅ Use the class directly with type parameters - generics work automatically!
|
|
295
|
+
<DataList<User>
|
|
311
296
|
static
|
|
312
|
-
items={users}
|
|
313
|
-
renderItem={(user) => `${user.name} (${user.email})`}
|
|
297
|
+
items={as.prop(users)}
|
|
298
|
+
renderItem={as.prop((user) => `${user.name} (${user.email})`)}
|
|
314
299
|
/>
|
|
315
300
|
|
|
316
|
-
// Type inference works for the renderItem callback
|
|
317
|
-
<
|
|
301
|
+
// Type inference works perfectly for the renderItem callback
|
|
302
|
+
<DataList<Product>
|
|
318
303
|
static
|
|
319
|
-
items={products}
|
|
320
|
-
renderItem={(product) => `${product.name} - $${product.price}`}
|
|
304
|
+
items={as.prop(products)}
|
|
305
|
+
renderItem={as.prop((product) => `${product.name} - $${product.price}`)}
|
|
321
306
|
/>
|
|
322
307
|
```
|
|
323
308
|
|
|
324
|
-
**
|
|
309
|
+
**Note**: Generic type parameters are automatically preserved when using classes directly in JSX. No manual type annotations needed!
|
|
325
310
|
|
|
326
311
|
#### Parameter Typing for Custom Elements
|
|
327
312
|
|
|
328
|
-
When writing functions that accept custom element
|
|
313
|
+
When writing functions that accept custom element classes as parameters, use proper TypeScript typing:
|
|
329
314
|
|
|
330
315
|
```tsx
|
|
331
|
-
import {
|
|
316
|
+
import { LitElement } from 'lit';
|
|
332
317
|
|
|
333
|
-
// ✅ Using
|
|
334
|
-
function renderWithWrapper
|
|
318
|
+
// ✅ Using the class constructor type directly
|
|
319
|
+
function renderWithWrapper<T extends typeof LitElement>(
|
|
320
|
+
Component: T
|
|
321
|
+
) {
|
|
335
322
|
return ({ children, ...props }) => (
|
|
336
323
|
<div class="wrapper">
|
|
337
324
|
<Component static {...props}>{children}</Component>
|
|
@@ -339,11 +326,12 @@ function renderWithWrapper(Component: ToComponent) {
|
|
|
339
326
|
);
|
|
340
327
|
}
|
|
341
328
|
|
|
342
|
-
// ✅ Using
|
|
343
|
-
|
|
344
|
-
function enhanceButton(ButtonComponent: typeof MyButton) {
|
|
329
|
+
// ✅ Using specific class types
|
|
330
|
+
function createEnhancer(Component: typeof MyButton) {
|
|
345
331
|
return ({ enhanced, ...props }) => (
|
|
346
|
-
<
|
|
332
|
+
<div class={enhanced ? 'enhanced' : ''}>
|
|
333
|
+
<Component static {...props} />
|
|
334
|
+
</div>
|
|
347
335
|
);
|
|
348
336
|
}
|
|
349
337
|
|
|
@@ -353,17 +341,15 @@ function renderComponent(Component: any) {
|
|
|
353
341
|
}
|
|
354
342
|
```
|
|
355
343
|
|
|
356
|
-
**Important**:
|
|
344
|
+
**Important**: Proper typing allows the compiler to recognize custom elements and apply the correct transformations.
|
|
357
345
|
|
|
358
346
|
### Dynamic Tag Names
|
|
359
347
|
|
|
360
|
-
lit-jsx supports dynamic element types using the `
|
|
348
|
+
lit-jsx supports dynamic element types using the `as.tag()` helper:
|
|
361
349
|
|
|
362
350
|
```tsx
|
|
363
|
-
import { toTag } from '@arcmantle/lit-jsx';
|
|
364
|
-
|
|
365
351
|
function ActionElement({ href, children }) {
|
|
366
|
-
const Tag =
|
|
352
|
+
const Tag = as.tag(href ? 'a' : 'button');
|
|
367
353
|
|
|
368
354
|
return (
|
|
369
355
|
<Tag static href={href} class="action-element">
|
|
@@ -373,39 +359,15 @@ function ActionElement({ href, children }) {
|
|
|
373
359
|
}
|
|
374
360
|
```
|
|
375
361
|
|
|
376
|
-
The
|
|
377
|
-
|
|
378
|
-
#### Parameter Typing for Dynamic Tags
|
|
379
|
-
|
|
380
|
-
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.
|
|
381
363
|
|
|
382
364
|
```tsx
|
|
383
|
-
|
|
365
|
+
function DynamicElement({ useDiv, children }) {
|
|
366
|
+
const Tag = as.tag(useDiv ? 'div' : 'span');
|
|
384
367
|
|
|
385
|
-
|
|
386
|
-
function createWrapper(TagName: ToTag) {
|
|
387
|
-
return ({ children, ...props }) => (
|
|
388
|
-
<TagName static {...props}>{children}</TagName>
|
|
389
|
-
);
|
|
368
|
+
return <Tag static>{children}</Tag>;
|
|
390
369
|
}
|
|
391
|
-
|
|
392
|
-
// ✅ Using typeof with a toTag() reference
|
|
393
|
-
const ButtonTag = toTag('button');
|
|
394
|
-
function createButton(Element: typeof ButtonTag) {
|
|
395
|
-
return ({ label, ...props }) => (
|
|
396
|
-
<Element static {...props}>{label}</Element>
|
|
397
|
-
);
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
// ❌ This won't work - compiler can't detect the dynamic tag
|
|
401
|
-
function createElement(TagName: string) {
|
|
402
|
-
return <TagName>Content</TagName>; // Error: TagName not recognized
|
|
403
|
-
}
|
|
404
|
-
```
|
|
405
|
-
|
|
406
|
-
**Important**: Without proper typing, the compiler cannot determine that a parameter represents a dynamic tag, which will result in compilation errors.
|
|
407
|
-
|
|
408
|
-
### Library Components
|
|
370
|
+
```### Library Components
|
|
409
371
|
|
|
410
372
|
lit-jsx provides utility components that enhance common patterns and integrate seamlessly with Lit directives:
|
|
411
373
|
|
|
@@ -630,7 +592,7 @@ export class UserDashboard extends LitElement {
|
|
|
630
592
|
{() => (
|
|
631
593
|
<div class="empty-state">
|
|
632
594
|
<p>No users found</p>
|
|
633
|
-
<button
|
|
595
|
+
<button onclick={this.loadUsers}>Load Users</button>
|
|
634
596
|
</div>
|
|
635
597
|
)}
|
|
636
598
|
</Show>
|
|
@@ -705,17 +667,17 @@ export class TodoList extends LitElement {
|
|
|
705
667
|
ref={this.inputRef}
|
|
706
668
|
value={as.prop(this.newItemText)}
|
|
707
669
|
placeholder="Add new todo..."
|
|
708
|
-
|
|
709
|
-
|
|
670
|
+
oninput={(e) => this.newItemText = e.target.value}
|
|
671
|
+
onkeydown={(e) => e.key === 'Enter' && this.addItem()}
|
|
710
672
|
/>
|
|
711
|
-
<button
|
|
673
|
+
<button onclick={this.addItem}>Add</button>
|
|
712
674
|
</div>
|
|
713
675
|
|
|
714
676
|
<div class="filters">
|
|
715
677
|
{['all', 'active', 'completed'].map(filterType => (
|
|
716
678
|
<button
|
|
717
679
|
classList={{ active: this.filter === filterType }}
|
|
718
|
-
|
|
680
|
+
onclick={() => this.filter = filterType}
|
|
719
681
|
>
|
|
720
682
|
{filterType}
|
|
721
683
|
</button>
|
|
@@ -775,16 +737,16 @@ Starting in v1.0.33, import discovery is disabled by default. This means:
|
|
|
775
737
|
The `static` attribute tells the compiler that an element is a custom element or dynamic tag:
|
|
776
738
|
|
|
777
739
|
```tsx
|
|
778
|
-
// ✅
|
|
740
|
+
// ✅ Using static attribute for custom elements
|
|
779
741
|
<MyButton static>Click me</MyButton>
|
|
780
|
-
<MyCustomElement static prop={value}>Content</MyCustomElement>
|
|
742
|
+
<MyCustomElement static prop={as.prop(value)}>Content</MyCustomElement>
|
|
781
743
|
|
|
782
|
-
// ✅ For dynamic tags with
|
|
783
|
-
const Tag =
|
|
744
|
+
// ✅ For dynamic tags with as.tag()
|
|
745
|
+
const Tag = as.tag(href ? 'a' : 'button');
|
|
784
746
|
<Tag static href={href}>Dynamic element</Tag>
|
|
785
747
|
|
|
786
|
-
// ❌
|
|
787
|
-
<MyButton>Click me</MyButton>
|
|
748
|
+
// ❌ Without static attribute - treated as regular HTML element
|
|
749
|
+
<MyButton>Click me</MyButton>
|
|
788
750
|
|
|
789
751
|
// ✅ To restore old behavior, enable import discovery
|
|
790
752
|
// vite.config.ts: litJsx({ useImportDiscovery: true })
|
|
@@ -817,24 +779,24 @@ lit-jsx automatically detects and uses the appropriate template type:
|
|
|
817
779
|
<div data-id={item.id} aria-label={item.description} />
|
|
818
780
|
```
|
|
819
781
|
|
|
820
|
-
#### **Property Binding (`as.prop()`
|
|
782
|
+
#### **Property Binding (`as.prop()`)**
|
|
821
783
|
|
|
822
784
|
- Standard DOM properties like `value`, `checked`, `selected`
|
|
823
785
|
- Interactive elements that need live property updates
|
|
824
786
|
- Complex object values
|
|
825
787
|
|
|
826
788
|
```tsx
|
|
827
|
-
<input value={as.prop(formData.email)} checked={prop
|
|
789
|
+
<input value={as.prop(formData.email)} checked={as.prop(isSelected)} />
|
|
828
790
|
```
|
|
829
791
|
|
|
830
|
-
#### **Boolean Attribute Binding (`as.bool()`
|
|
792
|
+
#### **Boolean Attribute Binding (`as.bool()`)**
|
|
831
793
|
|
|
832
794
|
- Boolean HTML attributes like `disabled`, `hidden`, `readonly`
|
|
833
795
|
- Accessibility attributes that follow boolean patterns
|
|
834
796
|
- Presence/absence semantics
|
|
835
797
|
|
|
836
798
|
```tsx
|
|
837
|
-
<button disabled={as.bool(isLoading)} hidden={bool
|
|
799
|
+
<button disabled={as.bool(isLoading)} hidden={as.bool(!isVisible)} />
|
|
838
800
|
```
|
|
839
801
|
|
|
840
802
|
### Function Component Guidelines
|
|
@@ -846,7 +808,7 @@ lit-jsx automatically detects and uses the appropriate template type:
|
|
|
846
808
|
|
|
847
809
|
### Dynamic Tag Best Practices
|
|
848
810
|
|
|
849
|
-
- Always use `
|
|
811
|
+
- Always use `as.tag()` to define your dynamic tags
|
|
850
812
|
- Use descriptive variable names for clarity
|
|
851
813
|
- Consider TypeScript for better type safety with HTML elements
|
|
852
814
|
- Document complex dynamic tag logic
|
|
@@ -859,68 +821,54 @@ lit-jsx is designed to work seamlessly with the entire Lit ecosystem:
|
|
|
859
821
|
- **Lit Directives**: All official and community directives work out of the box
|
|
860
822
|
- **Custom Elements**: Easy integration with any custom elements
|
|
861
823
|
- **Web Components**: Standard web component patterns and lifecycle
|
|
862
|
-
- **TypeScript**:
|
|
824
|
+
- **TypeScript**: Leverages native browser type definitions (`lib.dom.d.ts`) for accurate type checking and exceptional IntelliSense support
|
|
863
825
|
|
|
864
826
|
## 📚 Migration Guide
|
|
865
827
|
|
|
866
|
-
###
|
|
828
|
+
### Migrating from Earlier Versions
|
|
867
829
|
|
|
868
|
-
|
|
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:
|
|
869
831
|
|
|
870
|
-
**
|
|
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
|
|
871
834
|
|
|
872
|
-
|
|
873
|
-
import { toComponent } from '@arcmantle/lit-jsx';
|
|
835
|
+
### Coming from React
|
|
874
836
|
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
// Worked automatically - no static attribute needed
|
|
878
|
-
<MyButton on-click={handleClick}>Click me</MyButton>
|
|
879
|
-
<my-custom-element prop={value}>Content</my-custom-element>
|
|
880
|
-
```
|
|
881
|
-
|
|
882
|
-
**New way (v1.0.33+):**
|
|
837
|
+
lit-jsx uses familiar JSX syntax with native DOM attribute names:
|
|
883
838
|
|
|
884
839
|
```tsx
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
const MyButton = toComponent(MyButtonElement);
|
|
888
|
-
|
|
889
|
-
// Requires static attribute to identify as custom element
|
|
890
|
-
<MyButton static on-click={handleClick}>Click me</MyButton>
|
|
891
|
-
<my-custom-element static prop={value}>Content</my-custom-element>
|
|
840
|
+
// React
|
|
841
|
+
<button onClick={handler} className="btn" disabled={true} />
|
|
892
842
|
|
|
893
|
-
//
|
|
894
|
-
|
|
843
|
+
// lit-jsx
|
|
844
|
+
<button onclick={handler} class="btn" disabled={as.bool(true)} />
|
|
895
845
|
```
|
|
896
846
|
|
|
897
|
-
|
|
847
|
+
Key differences:
|
|
898
848
|
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
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
|
|
902
853
|
|
|
903
|
-
###
|
|
854
|
+
### Coming from Lit html Templates
|
|
904
855
|
|
|
905
|
-
lit-jsx
|
|
856
|
+
lit-jsx provides a more intuitive syntax for Lit templates:
|
|
906
857
|
|
|
907
858
|
```tsx
|
|
908
|
-
//
|
|
909
|
-
|
|
859
|
+
// Lit html
|
|
860
|
+
html`<div class=${classMap(classes)} @click=${handler}>${content}</div>`
|
|
910
861
|
|
|
911
862
|
// lit-jsx
|
|
912
|
-
<
|
|
863
|
+
<div classList={classes} onclick={handler}>{content}</div>
|
|
913
864
|
```
|
|
914
865
|
|
|
915
|
-
|
|
866
|
+
Benefits:
|
|
916
867
|
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
// lit-jsx
|
|
922
|
-
<div classList={classes}>{content}</div>
|
|
923
|
-
```
|
|
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
|
|
924
872
|
|
|
925
873
|
## 🤝 Contributing
|
|
926
874
|
|
|
@@ -929,3 +877,5 @@ Contributions, issues or requests are welcome!
|
|
|
929
877
|
## 📄 License
|
|
930
878
|
|
|
931
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;
|
|
@@ -44,7 +33,6 @@ interface ValueBinding {
|
|
|
44
33
|
export declare class AttributeValidators {
|
|
45
34
|
static isCustomElementIdentifier(attr: t.JSXAttribute): attr is t.JSXAttribute;
|
|
46
35
|
static isCallBinding(attr: t.JSXAttribute): attr is CallBindingAttribute;
|
|
47
|
-
static isArrowBinding(attr: t.JSXAttribute): attr is ArrowFunctionAttribute;
|
|
48
36
|
static isDirective(attr: t.JSXAttribute): attr is JSXAttributeWithExpression;
|
|
49
37
|
static isRef(attr: t.JSXAttribute): attr is JSXAttributeWithExpression;
|
|
50
38
|
static isClassListBinding(attr: t.JSXAttribute): attr is JSXAttributeWithExpression;
|
|
@@ -66,7 +54,6 @@ export interface ProcessorContext {
|
|
|
66
54
|
declare abstract class AttributeProcessor<TContext extends ProcessorContext> {
|
|
67
55
|
abstract customElementIdentifier(attr: t.JSXAttribute, context: TContext): void;
|
|
68
56
|
abstract callBinding(attr: CallBindingAttribute, context: TContext): void;
|
|
69
|
-
abstract arrowBinding(attr: ArrowFunctionAttribute, context: TContext): void;
|
|
70
57
|
abstract directive(attr: JSXAttributeWithExpression, context: TContext): void;
|
|
71
58
|
abstract ref(attr: JSXAttributeWithExpression, context: TContext): void;
|
|
72
59
|
abstract classList(attr: JSXAttributeWithExpression, context: TContext): void;
|
|
@@ -77,7 +64,7 @@ declare abstract class AttributeProcessor<TContext extends ProcessorContext> {
|
|
|
77
64
|
abstract spread(attr: t.JSXSpreadAttribute, context: TContext): void;
|
|
78
65
|
abstract boolean(attr: JSXAttributeBoolean, context: TContext): void;
|
|
79
66
|
processAttribute(attr: t.JSXAttribute | t.JSXSpreadAttribute, context: TContext): void;
|
|
80
|
-
protected createValueBinding(attr: CallBindingAttribute
|
|
67
|
+
protected createValueBinding(attr: CallBindingAttribute, context: TContext): ValueBinding;
|
|
81
68
|
protected createDirective(attr: JSXAttributeWithExpression, context: TContext): t.Expression[];
|
|
82
69
|
protected createRef(attr: JSXAttributeWithExpression, context: TContext): t.CallExpression;
|
|
83
70
|
protected createClassList(attr: JSXAttributeWithExpression, context: TContext): t.CallExpression;
|
|
@@ -91,7 +78,6 @@ declare abstract class AttributeProcessor<TContext extends ProcessorContext> {
|
|
|
91
78
|
export declare class TemplateAttributeProcessor extends AttributeProcessor<TemplateContext> {
|
|
92
79
|
customElementIdentifier(attr: t.JSXAttribute, context: TemplateContext): void;
|
|
93
80
|
callBinding(attr: CallBindingAttribute, context: TemplateContext): void;
|
|
94
|
-
arrowBinding(attr: ArrowFunctionAttribute, context: TemplateContext): void;
|
|
95
81
|
directive(attr: JSXAttributeWithExpression, context: TemplateContext): void;
|
|
96
82
|
ref(attr: JSXAttributeWithExpression, context: TemplateContext): void;
|
|
97
83
|
classList(attr: JSXAttributeWithExpression, context: TemplateContext): void;
|
|
@@ -101,12 +87,11 @@ export declare class TemplateAttributeProcessor extends AttributeProcessor<Templ
|
|
|
101
87
|
nonExpression(attr: JSXAttributeWithoutExpression, context: TemplateContext): void;
|
|
102
88
|
spread(attribute: t.JSXSpreadAttribute, context: TemplateContext): void;
|
|
103
89
|
boolean(attribute: JSXAttributeBoolean, context: TemplateContext): void;
|
|
104
|
-
protected valueBinding(attr: CallBindingAttribute
|
|
90
|
+
protected valueBinding(attr: CallBindingAttribute, context: TemplateContext): void;
|
|
105
91
|
}
|
|
106
92
|
export declare class CompiledAttributeProcessor extends AttributeProcessor<CompiledContext> {
|
|
107
93
|
customElementIdentifier(attr: t.JSXAttribute, context: CompiledContext): void;
|
|
108
94
|
callBinding(attr: CallBindingAttribute, context: CompiledContext): void;
|
|
109
|
-
arrowBinding(attr: ArrowFunctionAttribute, context: CompiledContext): void;
|
|
110
95
|
directive(attr: JSXAttributeWithExpression, context: CompiledContext): void;
|
|
111
96
|
ref(attr: JSXAttributeWithExpression, context: CompiledContext): void;
|
|
112
97
|
classList(attr: JSXAttributeWithExpression, context: CompiledContext): void;
|
|
@@ -116,7 +101,7 @@ export declare class CompiledAttributeProcessor extends AttributeProcessor<Compi
|
|
|
116
101
|
nonExpression(attr: JSXAttributeWithoutExpression, context: CompiledContext): void;
|
|
117
102
|
spread(attr: t.JSXSpreadAttribute, context: CompiledContext): void;
|
|
118
103
|
boolean(attr: JSXAttributeBoolean, context: CompiledContext): void;
|
|
119
|
-
protected valueBinding(attr: CallBindingAttribute
|
|
104
|
+
protected valueBinding(attr: CallBindingAttribute, context: CompiledContext): void;
|
|
120
105
|
}
|
|
121
106
|
export declare class CreateCompiledPart {
|
|
122
107
|
protected static createBasePart(type: PartType, index: number): t.ObjectProperty[];
|
|
@@ -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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"}
|