marko 5.25.8 → 5.25.9
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 +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/README.md
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
[](https://github.com/marko-js/marko/actions/workflows/ci.yml)
|
|
10
10
|
[](https://codecov.io/gh/marko-js/marko)
|
|
11
11
|
[](https://npm-stat.com/charts.html?package=marko)
|
|
12
|
+
[](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
|
}
|