@arcmantle/lit-jsx 1.0.13 → 1.0.14
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
CHANGED
|
@@ -70,7 +70,11 @@ import { litJsx } from '@arcmantle/lit-jsx/vite-jsx-preserve';
|
|
|
70
70
|
import { defineConfig } from 'vite';
|
|
71
71
|
|
|
72
72
|
export default defineConfig({
|
|
73
|
-
plugins: [
|
|
73
|
+
plugins: [
|
|
74
|
+
litJsx({
|
|
75
|
+
legacyDecorators: true
|
|
76
|
+
})
|
|
77
|
+
],
|
|
74
78
|
});
|
|
75
79
|
```
|
|
76
80
|
|
|
@@ -661,14 +665,7 @@ import { litJsx } from '@arcmantle/lit-jsx/vite-jsx-preserve';
|
|
|
661
665
|
export default defineConfig({
|
|
662
666
|
plugins: [
|
|
663
667
|
litJsx({
|
|
664
|
-
|
|
665
|
-
// Babel transform options
|
|
666
|
-
plugins: ['@babel/plugin-proposal-decorators'],
|
|
667
|
-
},
|
|
668
|
-
// Or use a function for dynamic configuration
|
|
669
|
-
babel: (code, id) => ({
|
|
670
|
-
plugins: id.includes('legacy') ? [] : ['modern-plugin'],
|
|
671
|
-
}),
|
|
668
|
+
legacyDecorators: true,
|
|
672
669
|
}),
|
|
673
670
|
],
|
|
674
671
|
});
|
|
@@ -704,7 +701,7 @@ lit-jsx automatically detects and uses the appropriate template type:
|
|
|
704
701
|
- Complex object values
|
|
705
702
|
|
|
706
703
|
```tsx
|
|
707
|
-
<input value={as.prop(formData.email)} checked={
|
|
704
|
+
<input value={as.prop(formData.email)} checked={prop => isSelected} />
|
|
708
705
|
```
|
|
709
706
|
|
|
710
707
|
#### **Boolean Attribute Binding (`as.bool()` or `bool =>`)**
|
|
@@ -714,7 +711,7 @@ lit-jsx automatically detects and uses the appropriate template type:
|
|
|
714
711
|
- Presence/absence semantics
|
|
715
712
|
|
|
716
713
|
```tsx
|
|
717
|
-
<button disabled={as.bool(isLoading)} hidden={
|
|
714
|
+
<button disabled={as.bool(isLoading)} hidden={bool => !isVisible} />
|
|
718
715
|
```
|
|
719
716
|
|
|
720
717
|
### Function Component Guidelines
|
|
@@ -726,7 +723,7 @@ lit-jsx automatically detects and uses the appropriate template type:
|
|
|
726
723
|
|
|
727
724
|
### Dynamic Tag Best Practices
|
|
728
725
|
|
|
729
|
-
- Always use `toTag()`
|
|
726
|
+
- Always use `toTag()` to define your dynamic tags.
|
|
730
727
|
- Use descriptive variable names for clarity
|
|
731
728
|
- Consider TypeScript for better type safety with HTML elements
|
|
732
729
|
- Document complex dynamic tag logic
|
|
@@ -767,7 +764,7 @@ html`<div class=${classMap(classes)}>${content}</div>`
|
|
|
767
764
|
|
|
768
765
|
## 🤝 Contributing
|
|
769
766
|
|
|
770
|
-
|
|
767
|
+
Contributions, issues or requests are welcome!
|
|
771
768
|
|
|
772
769
|
## 📄 License
|
|
773
770
|
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
type Falsy = null | undefined | false | 0 | -0 | 0n | '';
|
|
2
|
-
export declare const when: <C, T, F>(condition: C, trueCase: (c: NoInfer<Exclude<C, Falsy>>) => T, falseCase?: (c: NoInfer<Exclude<C, Falsy>>) => F) => C extends Falsy ? F : T;
|
|
3
|
-
type ShowTrueCase<C, T> = (value: NoInfer<Exclude<C, Falsy>>) => T;
|
|
4
|
-
type ShowFalseCase<C, F> = (value: NoInfer<Exclude<C, Falsy>>) => F;
|
|
5
|
-
type ShowChildren<C, T, F> = ShowTrueCase<C, T> | [true: ShowTrueCase<C, T>, false: ShowFalseCase<C, F>];
|
|
6
1
|
/**
|
|
7
2
|
* Conditionally renders content based on a truthy value.
|
|
8
3
|
*
|
|
@@ -25,9 +20,11 @@ type ShowChildren<C, T, F> = ShowTrueCase<C, T> | [true: ShowTrueCase<C, T>, fal
|
|
|
25
20
|
* </Show>
|
|
26
21
|
* ```
|
|
27
22
|
*/
|
|
28
|
-
export declare function Show<C
|
|
23
|
+
export declare function Show<C>(props: {
|
|
29
24
|
when: C;
|
|
30
|
-
children:
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
children: ((value: NoInfer<C>) => JSX.JSXElement) | [
|
|
26
|
+
true: ((value: NoInfer<C>) => JSX.JSXElement),
|
|
27
|
+
false: ((value: NoInfer<C>) => JSX.JSXElement)
|
|
28
|
+
];
|
|
29
|
+
}): JSX.JSXElement;
|
|
33
30
|
//# sourceMappingURL=show-component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"show-component.d.ts","sourceRoot":"","sources":["../../src/runtime/show-component.ts"],"names":[],"mappings":"AAGA,
|
|
1
|
+
{"version":3,"file":"show-component.d.ts","sourceRoot":"","sources":["../../src/runtime/show-component.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE;IAC9B,IAAI,EAAM,CAAC,CAAC;IACZ,QAAQ,EACL,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,UAAU,CAAC,GACvC;QACD,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,UAAU,CAAC;QAC7C,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,UAAU,CAAC;KAC9C,CAAC;CACH,GAAG,GAAG,CAAC,UAAU,CAKjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"show-component.js","sourceRoot":"","sources":["../../src/runtime/show-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"show-component.js","sourceRoot":"","sources":["../../src/runtime/show-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,IAAI,CAAI,KAQvB;IACA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/D,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;AACzC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,4 @@
|
|
|
1
|
-
import { when
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
type Falsy = null | undefined | false | 0 | -0 | 0n | '';
|
|
5
|
-
export const when = litWhen as <C, T, F>(
|
|
6
|
-
condition: C,
|
|
7
|
-
trueCase: (c: NoInfer<Exclude<C, Falsy>>) => T,
|
|
8
|
-
falseCase?: (c: NoInfer<Exclude<C, Falsy>>) => F,
|
|
9
|
-
) => C extends Falsy ? F : T;
|
|
10
|
-
|
|
11
|
-
type ShowTrueCase<C, T> = (value: NoInfer<Exclude<C, Falsy>>) => T;
|
|
12
|
-
type ShowFalseCase<C, F> = (value: NoInfer<Exclude<C, Falsy>>) => F;
|
|
13
|
-
type ShowChildren<C, T, F> =
|
|
14
|
-
| ShowTrueCase<C, T>
|
|
15
|
-
| [ true: ShowTrueCase<C, T>, false: ShowFalseCase<C, F> ];
|
|
1
|
+
import { when } from 'lit-html/directives/when.js';
|
|
16
2
|
|
|
17
3
|
|
|
18
4
|
/**
|
|
@@ -37,10 +23,15 @@ type ShowChildren<C, T, F> =
|
|
|
37
23
|
* </Show>
|
|
38
24
|
* ```
|
|
39
25
|
*/
|
|
40
|
-
export function Show<C
|
|
26
|
+
export function Show<C>(props: {
|
|
41
27
|
when: C;
|
|
42
|
-
children:
|
|
43
|
-
|
|
28
|
+
children:
|
|
29
|
+
| ((value: NoInfer<C>) => JSX.JSXElement)
|
|
30
|
+
| [
|
|
31
|
+
true: ((value: NoInfer<C>) => JSX.JSXElement),
|
|
32
|
+
false: ((value: NoInfer<C>) => JSX.JSXElement),
|
|
33
|
+
];
|
|
34
|
+
}): JSX.JSXElement {
|
|
44
35
|
if (Array.isArray(props.children))
|
|
45
36
|
return when(props.when, props.children[0], props.children[1]);
|
|
46
37
|
|