marko 5.35.26 → 5.35.27
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/docs/body-content.md +6 -25
- package/docs/typescript.md +2 -3
- package/index.d.ts +11 -7
- package/package.json +1 -1
package/docs/body-content.md
CHANGED
|
@@ -111,9 +111,9 @@ _components/layout.marko_
|
|
|
111
111
|
|
|
112
112
|
> **ProTip:** The `renderBody` property can be omitted. You could use `<${input.heading}/>`, for example.
|
|
113
113
|
|
|
114
|
-
###
|
|
114
|
+
### Repeated body content
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
When an attribute tag is repeated, the child component can consume all instances using the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol).
|
|
117
117
|
|
|
118
118
|
This allows us to, for example, build a custom table component which allows its user to specify any number of columns, while still giving the user control over how each column is rendered.
|
|
119
119
|
|
|
@@ -131,15 +131,11 @@ _Marko Source:_
|
|
|
131
131
|
```
|
|
132
132
|
|
|
133
133
|
> _Note_
|
|
134
|
-
>
|
|
135
|
-
>
|
|
136
|
-
> - Zero: if you don't pass any `@column` tags, the `fancy-table` receives `undefined`.
|
|
137
|
-
> - One: if you pass a single `@column` tag, the `fancy-table` receives a single attribute tag object. (For convenience this object is [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) meaning it can be directly passed to the `<for>` tag.)
|
|
138
|
-
> - Many: if you pass multiple `@column` tags, the `fancy-table` receives an array of attribute tags.
|
|
139
|
-
> For TypeScript the [`Marko.AttrTag` or `Marko.RepeatableAttrTag` helpers](./typescript.md#built-in-marko-types) should be used here.
|
|
134
|
+
> For TypeScript the [`Marko.AttrTag` helper](./typescript.md#built-in-marko-types) should be used here.
|
|
140
135
|
|
|
141
136
|
> _Protip_
|
|
142
|
-
>
|
|
137
|
+
> Since attribute tags are iterable you could pass `input.column` to a `for of` loop, or `[...spread]` it into an array.
|
|
138
|
+
> To `.map`, `.filter` or otherwise work with attribute tags as an array you can use the following pattern:
|
|
143
139
|
>
|
|
144
140
|
> ```marko
|
|
145
141
|
> $ const columns = [...input.column || []];
|
|
@@ -212,7 +208,7 @@ _Marko Source:_
|
|
|
212
208
|
</fancy-table>
|
|
213
209
|
```
|
|
214
210
|
|
|
215
|
-
Now, each
|
|
211
|
+
Now, each attribute tag in `input.column` will contain a `heading` property in addition to its `renderBody`. We can use another `<for>` and render the headings in `<th>` tags:
|
|
216
212
|
|
|
217
213
|
_components/fancy-table/index.marko:_
|
|
218
214
|
|
|
@@ -256,21 +252,6 @@ _HTML Output:_
|
|
|
256
252
|
</table>
|
|
257
253
|
```
|
|
258
254
|
|
|
259
|
-
> _Note_
|
|
260
|
-
> You may also specify that the attribute tag can be repeated in a [`marko-tag.json`](./marko-json.md#single-component-definition) file.
|
|
261
|
-
> This will cause an array to _always_ be passed if there are any items, rather than working up from `undefined`, single object and then an array.
|
|
262
|
-
>
|
|
263
|
-
> _components/fancy-table/marko-tag.json:_
|
|
264
|
-
>
|
|
265
|
-
> ```js
|
|
266
|
-
> {
|
|
267
|
-
> "@data": "array",
|
|
268
|
-
> "<column>": {
|
|
269
|
-
> "is-repeated": true
|
|
270
|
-
> }
|
|
271
|
-
> }
|
|
272
|
-
> ```
|
|
273
|
-
|
|
274
255
|
### Nested attribute tags
|
|
275
256
|
|
|
276
257
|
Continuing to build on our example, what if we want to add some custom content or even components into the column headings? In this case, we can extend our `<fancy-table>` to use nested attribute tags. We'll now have `<@heading>` and `<@cell>` tags nested under `<@column>`. This gives users of our tag full control over how to render both column headings and the cells within the column!
|
package/docs/typescript.md
CHANGED
|
@@ -137,10 +137,9 @@ Marko exposes [type definitions](https://github.com/marko-js/marko/blob/main/pac
|
|
|
137
137
|
- Helpers to extract the input and return types native tags (when a string is passed) or a custom tag.
|
|
138
138
|
- **`Marko.BodyParameters<Body>`** and **`Marko.BodyReturnType<Body>`**
|
|
139
139
|
- Helpers to extract the parameters and return types from the specified `Marko.Body`
|
|
140
|
-
- **`Marko.AttrTag<T>`**
|
|
140
|
+
- **`Marko.AttrTag<T>`**
|
|
141
141
|
- Used to represent types for [attributes tags](./body-content.md#named-body-content)
|
|
142
|
-
-
|
|
143
|
-
- `Marko.RepeatableAttrTag<T>`: One or more attribute tags
|
|
142
|
+
- A single attribute tag, with a `[Symbol.iterator]` to consume any repeated tags.
|
|
144
143
|
|
|
145
144
|
### Typing `renderBody`
|
|
146
145
|
|
package/index.d.ts
CHANGED
|
@@ -310,10 +310,14 @@ declare global {
|
|
|
310
310
|
removeAllListeners(eventName?: PropertyKey): this;
|
|
311
311
|
}
|
|
312
312
|
|
|
313
|
-
export type AttrTag<T> = T &
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
313
|
+
export type AttrTag<T> = T & {
|
|
314
|
+
[Symbol.iterator](): T;
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
/**
|
|
318
|
+
* @deprecated Prefer to use AttrTag
|
|
319
|
+
*/
|
|
320
|
+
export type RepeatableAttrTag<T> = AttrTag<T>;
|
|
317
321
|
|
|
318
322
|
export interface NativeTag<
|
|
319
323
|
Input extends Record<string, any>,
|
|
@@ -341,10 +345,10 @@ declare global {
|
|
|
341
345
|
length: infer Length;
|
|
342
346
|
}
|
|
343
347
|
? number extends Length
|
|
344
|
-
?
|
|
348
|
+
? Args[0] | undefined
|
|
345
349
|
: 0 extends Length
|
|
346
|
-
?
|
|
347
|
-
:
|
|
350
|
+
? undefined
|
|
351
|
+
: Args[0]
|
|
348
352
|
: never
|
|
349
353
|
: never;
|
|
350
354
|
|