marko 5.25.7 → 5.25.9
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -0
- package/docs/syntax.md +1 -1
- package/docs/typescript.md +48 -43
- package/index.d.ts +7 -0
- package/package.json +1 -1
- package/tags-html.d.ts +61 -34
package/README.md
CHANGED
@@ -9,6 +9,7 @@
|
|
9
9
|
[![Continuous Integration status](https://github.com/marko-js/marko/actions/workflows/ci.yml/badge.svg)](https://github.com/marko-js/marko/actions/workflows/ci.yml)
|
10
10
|
[![Code coverage %](https://codecov.io/gh/marko-js/marko/branch/master/graph/badge.svg)](https://codecov.io/gh/marko-js/marko)
|
11
11
|
[![# of monthly downloads](https://img.shields.io/npm/dm/marko.svg)](https://npm-stat.com/charts.html?package=marko)
|
12
|
+
[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/7029/badge)](https://bestpractices.coreinfrastructure.org/projects/7029)
|
12
13
|
|
13
14
|
[Docs](https://markojs.com/docs/getting-started/) ∙ [Try Online](https://markojs.com/try-online/) ∙ [Contribute](#contributors) ∙ [Get Support](#community--support)
|
14
15
|
|
package/docs/syntax.md
CHANGED
@@ -419,7 +419,7 @@ import componentB from "<component-b>";
|
|
419
419
|
> </>
|
420
420
|
> ```
|
421
421
|
|
422
|
-
> **Note:** You cannot reference a Marko custom tag using a name string:
|
422
|
+
> **Note:** You **cannot** reference a Marko custom tag or macro using a name string:
|
423
423
|
>
|
424
424
|
> _Marko Source:_
|
425
425
|
>
|
package/docs/typescript.md
CHANGED
@@ -200,9 +200,9 @@ _index.marko_
|
|
200
200
|
</for-by-two>
|
201
201
|
```
|
202
202
|
|
203
|
-
### Extending a
|
203
|
+
### Extending native tag types within a Marko tag
|
204
204
|
|
205
|
-
The types for native tags are accessed via the global `Marko.
|
205
|
+
The types for native tags are accessed via the global `Marko.Input` type. Here's an example of a component that extends the `button` html tag:
|
206
206
|
|
207
207
|
_color-button.marko_
|
208
208
|
|
@@ -219,6 +219,49 @@ $ const { color, renderBody, ...restOfInput } = input;
|
|
219
219
|
</button>
|
220
220
|
```
|
221
221
|
|
222
|
+
### Registering a new native tag (eg for custom elements).
|
223
|
+
|
224
|
+
```ts
|
225
|
+
interface MyCustomElementAttributes {
|
226
|
+
// ...
|
227
|
+
}
|
228
|
+
|
229
|
+
declare global {
|
230
|
+
namespace Marko {
|
231
|
+
namespace NativeTags {
|
232
|
+
// By adding this entry, you can now use `my-custom-element` as a native html tag.
|
233
|
+
"my-custom-element": MyCustomElementAttributes
|
234
|
+
}
|
235
|
+
}
|
236
|
+
}
|
237
|
+
```
|
238
|
+
|
239
|
+
### Registering new "global" HTML Attributes
|
240
|
+
|
241
|
+
```ts
|
242
|
+
declare global {
|
243
|
+
namespace Marko {
|
244
|
+
interface HTMLAttributes {
|
245
|
+
"my-non-standard-attribute"?: string; // Adds this attribute as available on all HTML tags.
|
246
|
+
}
|
247
|
+
}
|
248
|
+
}
|
249
|
+
```
|
250
|
+
|
251
|
+
### Registering CSS Properties (eg for custom properties)
|
252
|
+
|
253
|
+
```ts
|
254
|
+
declare global {
|
255
|
+
namespace Marko {
|
256
|
+
namespace CSS {
|
257
|
+
interface Properties {
|
258
|
+
"--foo"?: string; // adds a support for a custom `--foo` css property.
|
259
|
+
}
|
260
|
+
}
|
261
|
+
}
|
262
|
+
}
|
263
|
+
```
|
264
|
+
|
222
265
|
## TypeScript Syntax in `.marko`
|
223
266
|
|
224
267
|
Any [JavaScript expression in Marko](./syntax.md#inline-javascript) can also be written as a TypeScript expression.
|
@@ -358,45 +401,7 @@ _components/color-rotate-button/index.marko_
|
|
358
401
|
</button>
|
359
402
|
```
|
360
403
|
|
361
|
-
|
362
|
-
|
363
|
-
```ts
|
364
|
-
interface MyCustomElementAttributes {
|
365
|
-
// ...
|
366
|
-
}
|
367
|
-
|
368
|
-
declare global {
|
369
|
-
namespace Marko {
|
370
|
-
namespace NativeTags {
|
371
|
-
// By adding this entry, you can now use `my-custom-element` as a native html tag.
|
372
|
-
"my-custom-element": MyCustomElementAttributes
|
373
|
-
}
|
374
|
-
}
|
375
|
-
}
|
376
|
-
```
|
377
|
-
|
378
|
-
## Extending the "global" HTML Attributes
|
404
|
+
# CI Type Checking
|
379
405
|
|
380
|
-
|
381
|
-
|
382
|
-
namespace Marko {
|
383
|
-
interface HTMLAttributes {
|
384
|
-
"my-non-standard-attribute"?: string; // Adds this attribute as available on all HTML tags.
|
385
|
-
}
|
386
|
-
}
|
387
|
-
}
|
388
|
-
```
|
389
|
-
|
390
|
-
## Extending CSS Properties (for custom properties)
|
391
|
-
|
392
|
-
```ts
|
393
|
-
declare global {
|
394
|
-
namespace Marko {
|
395
|
-
namespace CSS {
|
396
|
-
interface Properties {
|
397
|
-
"--foo"?: string; // adds a support for a custom `--foo` css property.
|
398
|
-
}
|
399
|
-
}
|
400
|
-
}
|
401
|
-
}
|
402
|
-
```
|
406
|
+
For type checking Marko files outside of your editor there is the ["@marko/type-check" cli](https://github.com/marko-js/language-server/tree/main/packages/type-check).
|
407
|
+
Check out the CLI documentation for more information.
|
package/index.d.ts
CHANGED
@@ -364,5 +364,12 @@ declare global {
|
|
364
364
|
| Body<any, infer Return>
|
365
365
|
? Return
|
366
366
|
: never;
|
367
|
+
|
368
|
+
/** @deprecated @see {@link Marko.Input} */
|
369
|
+
export type NativeTagInput<Name extends keyof NativeTags> =
|
370
|
+
NativeTags[Name]["input"];
|
371
|
+
/** @deprecated @see {@link Marko.Return} */
|
372
|
+
export type NativeTagReturn<Name extends keyof NativeTags> =
|
373
|
+
NativeTags[Name]["return"];
|
367
374
|
}
|
368
375
|
}
|
package/package.json
CHANGED
package/tags-html.d.ts
CHANGED
@@ -1050,7 +1050,7 @@ declare global {
|
|
1050
1050
|
* Specifies whether the input field should have autocomplete enabled or disabled.
|
1051
1051
|
* @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
|
1052
1052
|
*/
|
1053
|
-
autocomplete?:
|
1053
|
+
autocomplete?: AttrAutoComplete;
|
1054
1054
|
|
1055
1055
|
/**
|
1056
1056
|
* Indicates whether a file input should use a specific capture method.
|
@@ -1132,7 +1132,7 @@ declare global {
|
|
1132
1132
|
* The maximum allowed value for the input.
|
1133
1133
|
* @see https://html.spec.whatwg.org/multipage/input.html#attr-input-max
|
1134
1134
|
*/
|
1135
|
-
max?:
|
1135
|
+
max?: AttrStringOrNumber;
|
1136
1136
|
|
1137
1137
|
/**
|
1138
1138
|
* The maximum number of characters allowed in the input.
|
@@ -1144,7 +1144,7 @@ declare global {
|
|
1144
1144
|
* The minimum allowed value for the input.
|
1145
1145
|
* @see https://html.spec.whatwg.org/multipage/input.html#attr-input-min
|
1146
1146
|
*/
|
1147
|
-
min?:
|
1147
|
+
min?: AttrStringOrNumber;
|
1148
1148
|
|
1149
1149
|
/**
|
1150
1150
|
* The minimum number of characters required in the input.
|
@@ -1175,7 +1175,7 @@ declare global {
|
|
1175
1175
|
* A short hint to display in the input field before the user enters a value.
|
1176
1176
|
* @see https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder
|
1177
1177
|
*/
|
1178
|
-
placeholder?:
|
1178
|
+
placeholder?: AttrStringOrNumber;
|
1179
1179
|
|
1180
1180
|
/**
|
1181
1181
|
* Specifies the target element for the popover.
|
@@ -1217,7 +1217,7 @@ declare global {
|
|
1217
1217
|
* Specifies the allowed number intervals for the input value.
|
1218
1218
|
* @see https://html.spec.whatwg.org/multipage/input.html#attr-input-step
|
1219
1219
|
*/
|
1220
|
-
step?:
|
1220
|
+
step?: AttrStringOrNumber;
|
1221
1221
|
|
1222
1222
|
/**
|
1223
1223
|
* Controls the data type (and associated control) of the element.
|
@@ -1779,7 +1779,7 @@ declare global {
|
|
1779
1779
|
* Controls whether the browser should automatically complete the value for the select.
|
1780
1780
|
* @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
|
1781
1781
|
*/
|
1782
|
-
autocomplete?:
|
1782
|
+
autocomplete?: AttrAutoComplete;
|
1783
1783
|
|
1784
1784
|
/**
|
1785
1785
|
* Indicates whether the select element should be disabled or not.
|
@@ -1987,7 +1987,7 @@ declare global {
|
|
1987
1987
|
* Helps browsers autofill the user's input based on previous entries.
|
1988
1988
|
* @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
|
1989
1989
|
*/
|
1990
|
-
autocomplete?:
|
1990
|
+
autocomplete?: AttrAutoComplete;
|
1991
1991
|
|
1992
1992
|
/**
|
1993
1993
|
* (Safari only). Controls the autocorrect behavior of the <textarea> element.
|
@@ -3749,33 +3749,60 @@ type AttrBooleanString = AttrMissing | "false" | "true";
|
|
3749
3749
|
type AttrYesNoString = AttrMissing | "no" | "yes";
|
3750
3750
|
type AttrTriState = AttrBooleanString | "mixed";
|
3751
3751
|
type AttrOnOff = AttrMissing | "on" | "off";
|
3752
|
+
type AttrAutoComplete =
|
3753
|
+
| AttrOnOff
|
3754
|
+
| "shipping"
|
3755
|
+
| "billing"
|
3756
|
+
| "name"
|
3757
|
+
| "honorific-prefix"
|
3758
|
+
| "given-name"
|
3759
|
+
| "additional-name"
|
3760
|
+
| "family-name"
|
3761
|
+
| "honorific-suffix"
|
3762
|
+
| "nickname"
|
3763
|
+
| "username"
|
3764
|
+
| "new-password"
|
3765
|
+
| "current-password"
|
3766
|
+
| "one-time-code"
|
3767
|
+
| "organization-title"
|
3768
|
+
| "organization"
|
3769
|
+
| "street-address"
|
3770
|
+
| "address-line1"
|
3771
|
+
| "address-line2"
|
3772
|
+
| "address-line3"
|
3773
|
+
| "address-level4"
|
3774
|
+
| "address-level3"
|
3775
|
+
| "address-level2"
|
3776
|
+
| "address-level1"
|
3777
|
+
| "country"
|
3778
|
+
| "country-name"
|
3779
|
+
| "postal-code"
|
3780
|
+
| "cc-name"
|
3781
|
+
| "cc-given-name"
|
3782
|
+
| "cc-additional-name"
|
3783
|
+
| "cc-family-name"
|
3784
|
+
| "cc-number"
|
3785
|
+
| "cc-exp"
|
3786
|
+
| "cc-exp-month"
|
3787
|
+
| "cc-exp-year"
|
3788
|
+
| "cc-csc"
|
3789
|
+
| "cc-type"
|
3790
|
+
| "transaction-currency"
|
3791
|
+
| "transaction-amount"
|
3792
|
+
| "language"
|
3793
|
+
| "bday"
|
3794
|
+
| "bday-day"
|
3795
|
+
| "bday-month"
|
3796
|
+
| "bday-year"
|
3797
|
+
| "sex"
|
3798
|
+
| "url"
|
3799
|
+
| "photo"
|
3800
|
+
| "home"
|
3801
|
+
| "work"
|
3802
|
+
| "mobile"
|
3803
|
+
| "fax"
|
3804
|
+
| "pager"
|
3805
|
+
| (string & {});
|
3752
3806
|
type Tag<Input> = Input extends Marko.HTMLAttributes<infer Element>
|
3753
3807
|
? Marko.NativeTag<Input, Element>
|
3754
3808
|
: never;
|
3755
|
-
type UpperCaseChar =
|
3756
|
-
| "A"
|
3757
|
-
| "B"
|
3758
|
-
| "C"
|
3759
|
-
| "D"
|
3760
|
-
| "E"
|
3761
|
-
| "F"
|
3762
|
-
| "G"
|
3763
|
-
| "H"
|
3764
|
-
| "I"
|
3765
|
-
| "J"
|
3766
|
-
| "K"
|
3767
|
-
| "L"
|
3768
|
-
| "M"
|
3769
|
-
| "N"
|
3770
|
-
| "O"
|
3771
|
-
| "P"
|
3772
|
-
| "Q"
|
3773
|
-
| "R"
|
3774
|
-
| "S"
|
3775
|
-
| "T"
|
3776
|
-
| "U"
|
3777
|
-
| "V"
|
3778
|
-
| "W"
|
3779
|
-
| "X"
|
3780
|
-
| "Y"
|
3781
|
-
| "Z";
|