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 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
  >
@@ -200,9 +200,9 @@ _index.marko_
200
200
  </for-by-two>
201
201
  ```
202
202
 
203
- ### Extending a native tag type
203
+ ### Extending native tag types within a Marko tag
204
204
 
205
- The types for native tags are accessed via the global `Marko.NativeTags` type. Here's an example of a component that adds a feature to the `button` element:
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
- ## Extend Native Tags (for custom elements)
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
- ```ts
381
- declare global {
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "marko",
3
- "version": "5.25.8",
3
+ "version": "5.25.9",
4
4
  "license": "MIT",
5
5
  "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
6
6
  "dependencies": {