marko 5.35.26 → 5.35.27
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|