marko 5.21.2 → 5.21.5
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 +6 -6
- package/bin/markoc.js +13 -1
- package/dist/core-tags/core/await/reorderer-renderer.js +26 -6
- package/dist/runtime/RenderResult.js +7 -7
- package/dist/runtime/components/Component.js +129 -129
- package/dist/runtime/components/ComponentDef.js +25 -25
- package/dist/runtime/components/ComponentsContext.js +8 -8
- package/dist/runtime/components/GlobalComponentsContext.js +4 -4
- package/dist/runtime/components/KeySequence.js +3 -3
- package/dist/runtime/components/ServerComponent.js +13 -13
- package/dist/runtime/components/State.js +25 -25
- package/dist/runtime/components/attach-detach.js +8 -8
- package/dist/runtime/components/beginComponent/index-browser.js +2 -2
- package/dist/runtime/components/beginComponent/index.js +7 -7
- package/dist/runtime/components/defineComponent.js +5 -5
- package/dist/runtime/components/dom-data.js +3 -3
- package/dist/runtime/components/endComponent/index.js +2 -2
- package/dist/runtime/components/entry/index-browser.js +4 -4
- package/dist/runtime/components/entry/index.js +15 -15
- package/dist/runtime/components/event-delegation.js +10 -10
- package/dist/runtime/components/init-components/index-browser.js +34 -34
- package/dist/runtime/components/registry/index-browser.js +7 -7
- package/dist/runtime/components/registry/index.js +2 -2
- package/dist/runtime/components/renderer.js +26 -26
- package/dist/runtime/components/update-manager.js +10 -10
- package/dist/runtime/components/util/index-browser.js +17 -17
- package/dist/runtime/components/util/index.js +9 -9
- package/dist/runtime/createOut.js +1 -1
- package/dist/runtime/dom-insert.js +5 -5
- package/dist/runtime/helpers/_change-case.js +2 -2
- package/dist/runtime/helpers/dynamic-tag.js +7 -7
- package/dist/runtime/helpers/style-value.js +1 -1
- package/dist/runtime/html/AsyncStream.js +20 -20
- package/dist/runtime/html/BufferedWriter.js +2 -2
- package/dist/runtime/html/StringWriter.js +1 -1
- package/dist/runtime/html/helpers/attr.js +1 -1
- package/dist/runtime/html/helpers/data-marko.js +4 -4
- package/dist/runtime/html/helpers/escape-quotes.js +1 -1
- package/dist/runtime/html/helpers/escape-xml.js +1 -1
- package/dist/runtime/html/helpers/props-script.js +1 -1
- package/dist/runtime/html/index.js +1 -1
- package/dist/runtime/renderable.js +4 -4
- package/dist/runtime/setImmediate/index-browser.js +1 -1
- package/dist/runtime/setImmediate/index-worker.js +2 -2
- package/dist/runtime/setImmediate/index.js +2 -2
- package/dist/runtime/vdom/AsyncVDOMBuilder.js +28 -28
- package/dist/runtime/vdom/VDocumentFragment.js +1 -1
- package/dist/runtime/vdom/VElement.js +11 -11
- package/dist/runtime/vdom/VFragment.js +3 -3
- package/dist/runtime/vdom/VNode.js +4 -4
- package/dist/runtime/vdom/hot-reload.js +15 -15
- package/dist/runtime/vdom/index.js +1 -1
- package/dist/runtime/vdom/morphdom/fragment.js +2 -2
- package/dist/runtime/vdom/morphdom/helpers.js +4 -4
- package/dist/runtime/vdom/morphdom/index.js +28 -28
- package/dist/runtime/vdom/morphdom/specialElHandlers.js +1 -1
- package/docs/10-awesome-marko-features.md +3 -4
- package/docs/class-components.md +5 -5
- package/docs/cloudflare-workers.md +4 -6
- package/docs/compiler.md +13 -2
- package/docs/core-tags.md +9 -1
- package/docs/express.md +2 -2
- package/docs/http.md +2 -2
- package/docs/koa.md +2 -2
- package/docs/marko-5-upgrade.md +3 -4
- package/docs/marko-vs-react.md +7 -7
- package/docs/redux.md +6 -6
- package/docs/rendering.md +48 -41
- package/docs/troubleshooting-streaming.md +5 -5
- package/docs/webpack.md +9 -9
- package/package.json +3 -3
- package/src/core-tags/core/await/reorderer-renderer.js +27 -7
- package/docs/server-side-rendering.md +0 -144
@@ -5,7 +5,7 @@ var registry = require("../components/registry");
|
|
5
5
|
var updateManager = require("../components/update-manager");
|
6
6
|
|
7
7
|
var createTemplate = runtime.t;
|
8
|
-
var createComponent = registry.
|
8
|
+
var createComponent = registry._Q_;
|
9
9
|
var registered = {};
|
10
10
|
var queue;
|
11
11
|
|
@@ -31,36 +31,36 @@ runtime.t = function (typeName) {
|
|
31
31
|
}
|
32
32
|
|
33
33
|
queue.push(function () {
|
34
|
-
var newProto = registry.
|
34
|
+
var newProto = registry.aw_(typeName).prototype;
|
35
35
|
instances.forEach(function (instance) {
|
36
36
|
if (hasLifecycleChanged(instance.__proto__, newProto)) {
|
37
|
-
var startNode = instance.
|
38
|
-
var endNode = instance.
|
37
|
+
var startNode = instance.L_.startNode;
|
38
|
+
var endNode = instance.L_.endNode;
|
39
39
|
var parentNode = startNode.parentNode;
|
40
40
|
var curNode;
|
41
41
|
|
42
42
|
instance.bY_ = true;
|
43
|
-
instance._a_();
|
44
43
|
instance._b_();
|
44
|
+
instance._c_();
|
45
45
|
|
46
|
-
if (instance.
|
47
|
-
instance.
|
48
|
-
instance.
|
46
|
+
if (instance.M_) {
|
47
|
+
instance.M_.removeAllListeners();
|
48
|
+
instance.M_ = null;
|
49
49
|
}
|
50
50
|
|
51
51
|
while ((curNode = startNode.nextSibling) !== endNode) {
|
52
|
-
util.
|
52
|
+
util.E_(curNode);
|
53
53
|
parentNode.removeChild(curNode);
|
54
54
|
}
|
55
55
|
|
56
56
|
instance.bY_ = false;
|
57
|
-
instance.
|
57
|
+
instance.S_ = false;
|
58
58
|
}
|
59
59
|
|
60
60
|
instance.__proto__ = newProto;
|
61
|
-
instance.
|
62
|
-
instance.
|
63
|
-
afterInsert(instance.
|
61
|
+
instance._q_(
|
62
|
+
instance.R_, false).
|
63
|
+
afterInsert(instance.Y_);
|
64
64
|
});
|
65
65
|
});
|
66
66
|
}
|
@@ -74,7 +74,7 @@ runtime.t = function (typeName) {
|
|
74
74
|
}
|
75
75
|
};
|
76
76
|
|
77
|
-
registry.
|
77
|
+
registry._Q_ = function (typeName, id) {
|
78
78
|
var template = registered[typeName];
|
79
79
|
var instance = createComponent(typeName, id);
|
80
80
|
|
@@ -108,7 +108,7 @@ function hasLifecycleChanged(oldProto, newProto) {
|
|
108
108
|
}
|
109
109
|
|
110
110
|
function batchUpdate() {
|
111
|
-
updateManager.
|
111
|
+
updateManager._p_(function () {
|
112
112
|
var pending = queue;
|
113
113
|
queue = undefined;
|
114
114
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
"use strict";var helpers = require("./helpers");
|
2
|
-
var insertBefore = helpers.
|
2
|
+
var insertBefore = helpers.aH_;
|
3
3
|
|
4
4
|
var fragmentPrototype = {
|
5
5
|
nodeType: 12,
|
@@ -91,5 +91,5 @@ function beginFragmentNode(startNode, parentNode) {
|
|
91
91
|
return fragment;
|
92
92
|
}
|
93
93
|
|
94
|
-
exports.
|
94
|
+
exports.ap_ = createFragmentNode;
|
95
95
|
exports.c__ = beginFragmentNode;
|
@@ -35,8 +35,8 @@ function removeChild(node) {
|
|
35
35
|
node.parentNode.removeChild(node);
|
36
36
|
}
|
37
37
|
|
38
|
-
exports.
|
39
|
-
exports.
|
38
|
+
exports.aH_ = insertBefore;
|
39
|
+
exports.aI_ = insertAfter;
|
40
40
|
exports.bT_ = nextSibling;
|
41
|
-
exports.
|
42
|
-
exports.
|
41
|
+
exports._s_ = firstChild;
|
42
|
+
exports.aJ_ = removeChild;
|
@@ -2,11 +2,11 @@
|
|
2
2
|
var specialElHandlers = require("./specialElHandlers");
|
3
3
|
var KeySequence = require("../../components/KeySequence");
|
4
4
|
var componentsUtil = require("../../components/util");
|
5
|
-
var existingComponentLookup = componentsUtil.
|
6
|
-
var destroyNodeRecursive = componentsUtil.
|
5
|
+
var existingComponentLookup = componentsUtil.D_;
|
6
|
+
var destroyNodeRecursive = componentsUtil.E_;
|
7
7
|
var addComponentRootToKeyedElements =
|
8
|
-
componentsUtil.
|
9
|
-
var normalizeComponentKey = componentsUtil.
|
8
|
+
componentsUtil.aq_;
|
9
|
+
var normalizeComponentKey = componentsUtil.aF_;
|
10
10
|
var VElement = require("../vdom").bb_;
|
11
11
|
var virtualizeElement = VElement.bO_;
|
12
12
|
var morphAttrs = VElement.bP_;
|
@@ -14,17 +14,17 @@ var eventDelegation = require("../../components/event-delegation");
|
|
14
14
|
var fragment = require("./fragment");
|
15
15
|
var helpers = require("./helpers");
|
16
16
|
var domData = require("../../components/dom-data");
|
17
|
-
var keysByDOMNode = domData.
|
18
|
-
var componentByDOMNode = domData.
|
19
|
-
var vElementByDOMNode = domData.
|
20
|
-
var detachedByDOMNode = domData.
|
17
|
+
var keysByDOMNode = domData.ah_;
|
18
|
+
var componentByDOMNode = domData.F_;
|
19
|
+
var vElementByDOMNode = domData.af_;
|
20
|
+
var detachedByDOMNode = domData.ag_;
|
21
21
|
|
22
|
-
var insertBefore = helpers.
|
23
|
-
var insertAfter = helpers.
|
22
|
+
var insertBefore = helpers.aH_;
|
23
|
+
var insertAfter = helpers.aI_;
|
24
24
|
var nextSibling = helpers.bT_;
|
25
|
-
var firstChild = helpers.
|
26
|
-
var removeChild = helpers.
|
27
|
-
var createFragmentNode = fragment.
|
25
|
+
var firstChild = helpers._s_;
|
26
|
+
var removeChild = helpers.aJ_;
|
27
|
+
var createFragmentNode = fragment.ap_;
|
28
28
|
var beginFragmentNode = fragment.c__;
|
29
29
|
|
30
30
|
var ELEMENT_NODE = 1;
|
@@ -52,7 +52,7 @@ function caseInsensitiveCompare(a, b) {
|
|
52
52
|
|
53
53
|
function onNodeAdded(node, componentsContext) {
|
54
54
|
if (node.nodeType === ELEMENT_NODE) {
|
55
|
-
eventDelegation.
|
55
|
+
eventDelegation.ac_(node, componentsContext);
|
56
56
|
}
|
57
57
|
}
|
58
58
|
|
@@ -105,7 +105,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
105
105
|
ownerComponent,
|
106
106
|
parentComponent)
|
107
107
|
{
|
108
|
-
var rootNode = component.
|
108
|
+
var rootNode = component.L_ = insertBefore(
|
109
109
|
createFragmentNode(),
|
110
110
|
referenceNode,
|
111
111
|
referenceNodeParentEl);
|
@@ -127,7 +127,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
127
127
|
}
|
128
128
|
|
129
129
|
function morphComponent(component, vComponent) {
|
130
|
-
morphChildren(component.
|
130
|
+
morphChildren(component.L_, vComponent, component);
|
131
131
|
}
|
132
132
|
|
133
133
|
var detachedNodes = [];
|
@@ -148,7 +148,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
148
148
|
|
149
149
|
function morphChildren(fromNode, toNode, parentComponent) {
|
150
150
|
var curFromNodeChild = firstChild(fromNode);
|
151
|
-
var curToNodeChild = toNode.
|
151
|
+
var curToNodeChild = toNode._s_;
|
152
152
|
|
153
153
|
var curToNodeKey;
|
154
154
|
var curFromNodeKey;
|
@@ -171,7 +171,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
171
171
|
curFromNodeChild = nextSibling(curFromNodeChild);
|
172
172
|
}
|
173
173
|
|
174
|
-
var ownerComponent = curToNodeChild.
|
174
|
+
var ownerComponent = curToNodeChild.aC_ || parentComponent;
|
175
175
|
var referenceComponent;
|
176
176
|
|
177
177
|
if (curToNodeType === COMPONENT_NODE) {
|
@@ -182,7 +182,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
182
182
|
{
|
183
183
|
if (isHydrate === true) {
|
184
184
|
var rootNode = beginFragmentNode(curFromNodeChild, fromNode);
|
185
|
-
component.
|
185
|
+
component.L_ = rootNode;
|
186
186
|
componentByDOMNode.set(rootNode, component);
|
187
187
|
|
188
188
|
if (ownerComponent && curToNodeKey) {
|
@@ -215,17 +215,17 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
215
215
|
|
216
216
|
}
|
217
217
|
} else {
|
218
|
-
if (matchingFromComponent.
|
218
|
+
if (matchingFromComponent.L_ !== curFromNodeChild) {
|
219
219
|
if (
|
220
220
|
curFromNodeChild && (
|
221
221
|
fromComponent = componentByDOMNode.get(curFromNodeChild)) &&
|
222
|
-
globalComponentsContext.
|
222
|
+
globalComponentsContext._V_[
|
223
223
|
fromComponent.id] ===
|
224
224
|
undefined)
|
225
225
|
{
|
226
226
|
// The component associated with the current real DOM node was not rendered
|
227
227
|
// so we should just remove it out of the real DOM by destroying it
|
228
|
-
curFromNodeChild = nextSibling(fromComponent.
|
228
|
+
curFromNodeChild = nextSibling(fromComponent.L_);
|
229
229
|
destroyComponent(fromComponent);
|
230
230
|
continue;
|
231
231
|
}
|
@@ -233,7 +233,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
233
233
|
// We need to move the existing component into
|
234
234
|
// the correct location
|
235
235
|
insertBefore(
|
236
|
-
matchingFromComponent.
|
236
|
+
matchingFromComponent.L_,
|
237
237
|
curFromNodeChild,
|
238
238
|
fromNode);
|
239
239
|
|
@@ -267,7 +267,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
267
267
|
// up elements
|
268
268
|
curToNodeKey = (
|
269
269
|
keySequences[referenceComponent.id] || (
|
270
|
-
keySequences[referenceComponent.id] = new KeySequence())).
|
270
|
+
keySequences[referenceComponent.id] = new KeySequence()))._M_(
|
271
271
|
curToNodeKey);
|
272
272
|
|
273
273
|
if (curFromNodeChild) {
|
@@ -502,7 +502,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
502
502
|
curFromNodeChild = fromNextSibling;
|
503
503
|
|
504
504
|
if (
|
505
|
-
!globalComponentsContext.
|
505
|
+
!globalComponentsContext._V_[fromComponent.id])
|
506
506
|
{
|
507
507
|
destroyComponent(fromComponent);
|
508
508
|
}
|
@@ -626,7 +626,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
626
626
|
if (fromComponent = componentByDOMNode.get(curFromNodeChild)) {
|
627
627
|
curFromNodeChild = fromNextSibling;
|
628
628
|
if (
|
629
|
-
!globalComponentsContext.
|
629
|
+
!globalComponentsContext._V_[fromComponent.id])
|
630
630
|
{
|
631
631
|
destroyComponent(fromComponent);
|
632
632
|
}
|
@@ -642,7 +642,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
642
642
|
referenceComponent = parentComponent;
|
643
643
|
} else {
|
644
644
|
referenceComponent =
|
645
|
-
curVFromNodeChild && curVFromNodeChild.
|
645
|
+
curVFromNodeChild && curVFromNodeChild.aC_;
|
646
646
|
}
|
647
647
|
|
648
648
|
detachNode(curFromNodeChild, fromNode, referenceComponent);
|
@@ -698,7 +698,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
698
698
|
detachedFromComponent !== true && detachedFromComponent);
|
699
699
|
|
700
700
|
|
701
|
-
if (eventDelegation.
|
701
|
+
if (eventDelegation._a_(node) != false) {
|
702
702
|
removeChild(node);
|
703
703
|
}
|
704
704
|
}
|
@@ -243,9 +243,8 @@ $ const searchResultsPromise = searchService.performSearch(keywords);
|
|
243
243
|
Can’t decide if you want to do server-side rendering or client-side rendering?
|
244
244
|
Why are we even talking about this in 2017? It doesn’t matter. Seriously, just
|
245
245
|
do both. Marko makes this a no-brainer since you can render a Marko template
|
246
|
-
directly to a stream (oh, and Marko will
|
247
|
-
components
|
248
|
-
server when the page loads in the browser):
|
246
|
+
directly to a stream (oh, and Marko will automatically mount UI
|
247
|
+
components rendered on the server when the page loads in the browser):
|
249
248
|
|
250
249
|
```js
|
251
250
|
require("@marko/compiler/register"); // require .marko files!
|
@@ -289,4 +288,4 @@ Coming soon: auto correction and autonomous coding
|
|
289
288
|
|
290
289
|
---
|
291
290
|
|
292
|
-
_Cover image
|
291
|
+
[_Cover image from Wikipedia_](https://commons.wikimedia.org/wiki/File:Amanhecer_no_Hercules_--.jpg)
|
package/docs/class-components.md
CHANGED
@@ -28,7 +28,7 @@ Marko makes it easy to keep your component’s class and styles next to the HTML
|
|
28
28
|
|
29
29
|
## Server-side rendering
|
30
30
|
|
31
|
-
A UI component can be rendered on the server or in the browser, but stateful component instances will be automatically mounted to the DOM in the browser for both. If a UI component tree is rendered on the server, then Marko will recreate the UI component tree in the browser with no extra code required. For more details, please see [
|
31
|
+
A UI component can be rendered on the server or in the browser, but stateful component instances will be automatically mounted to the DOM in the browser for both. If a UI component tree is rendered on the server, then Marko will recreate the UI component tree in the browser with no extra code required. For more details, please see [Rendering](/docs/rendering/).
|
32
32
|
|
33
33
|
## Single-file components
|
34
34
|
|
@@ -107,7 +107,7 @@ counter/
|
|
107
107
|
In your `component.js` file, export the component’s class:
|
108
108
|
|
109
109
|
```js
|
110
|
-
|
110
|
+
export default class {
|
111
111
|
onCreate() {
|
112
112
|
this.state = {
|
113
113
|
count: 0
|
@@ -116,7 +116,7 @@ module.exports = class {
|
|
116
116
|
increment() {
|
117
117
|
this.state.count++;
|
118
118
|
}
|
119
|
-
}
|
119
|
+
}
|
120
120
|
```
|
121
121
|
|
122
122
|
In your `index.marko` file, you can reference methods from that class with `on-*` attributes:
|
@@ -141,7 +141,7 @@ And in your `style.css`, define the styles:
|
|
141
141
|
If you target browsers that does not support classes, a plain object of methods can be exported:
|
142
142
|
|
143
143
|
```js
|
144
|
-
|
144
|
+
export default {
|
145
145
|
onCreate: function () {
|
146
146
|
this.state = {
|
147
147
|
count: 0
|
@@ -214,7 +214,7 @@ class {
|
|
214
214
|
`component-browser.js`
|
215
215
|
|
216
216
|
```js
|
217
|
-
|
217
|
+
export default {
|
218
218
|
shout() {
|
219
219
|
alert(`My favorite number is ${this.number}!`);
|
220
220
|
}
|
@@ -5,21 +5,19 @@ project for a working example.
|
|
5
5
|
|
6
6
|
## Usage
|
7
7
|
|
8
|
-
When using Marko with [Cloudflare Workers](https://workers.cloudflare.com/)
|
8
|
+
When using Marko with [Cloudflare Workers](https://workers.cloudflare.com/), make sure that Marko is loaded with a `worker` [export condition](https://nodejs.org/api/packages.html#conditional-exports). Most bundlers support defining export conditions.
|
9
9
|
|
10
|
-
After that point
|
11
|
-
|
12
|
-
You can then simply respond with the returned stream.
|
10
|
+
After that point, imported `.marko` files will export a `.stream` method that returns a worker compatible [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). You can then respond with that returned stream:
|
13
11
|
|
14
12
|
```js
|
15
|
-
import
|
13
|
+
import Template from "./index.marko";
|
16
14
|
|
17
15
|
addEventListener("fetch", event => {
|
18
16
|
event.respondWith(handleRequest(event.request));
|
19
17
|
});
|
20
18
|
|
21
19
|
async function handleRequest(request) {
|
22
|
-
return new Response(
|
20
|
+
return new Response(Template.stream(), {
|
23
21
|
headers: {
|
24
22
|
status: 200,
|
25
23
|
headers: { "content-type": "text/html;charset=UTF-8" }
|
package/docs/compiler.md
CHANGED
@@ -89,6 +89,17 @@ Default: false
|
|
89
89
|
|
90
90
|
Set to true to have the compiler provide the `ast` in it's output.
|
91
91
|
|
92
|
+
#### `stripTypes`
|
93
|
+
|
94
|
+
Type: `boolean|undefined`<br>
|
95
|
+
Default: undefined
|
96
|
+
|
97
|
+
Remove all typescript types from the output when `true`.
|
98
|
+
If the value is `undefined`, the default, the compiler will remove types if
|
99
|
+
the `output` option is not `source` or `migrate`.
|
100
|
+
|
101
|
+
For example to run migrations _and_ strip types you can set both `output: "migrate"` and `stripTypes: true`.
|
102
|
+
|
92
103
|
#### `runtimeId`
|
93
104
|
|
94
105
|
Type: `string`<br>
|
@@ -128,7 +139,7 @@ Whether source maps should be output with the compiled templates.
|
|
128
139
|
#### `meta`
|
129
140
|
|
130
141
|
Type: `boolean`<br>
|
131
|
-
Default: `false
|
142
|
+
Default: `false`
|
132
143
|
|
133
144
|
_Deprecated_. This option inlines the metadata in the output Javascript code. Metadata should be accessed instead from the `CompileResult`.
|
134
145
|
|
@@ -294,7 +305,7 @@ The hook will also receive a `types` object that matches the [@babel/types](http
|
|
294
305
|
Here is an example hook:
|
295
306
|
|
296
307
|
```js
|
297
|
-
|
308
|
+
export default (tag, types) => {
|
298
309
|
if (types.isStringLiteral(tag.node.name)) {
|
299
310
|
console.log(`Found a tag called ${tag.node.name.value}`);
|
300
311
|
tag.remove();
|
package/docs/core-tags.md
CHANGED
@@ -265,9 +265,17 @@ Optional attributes for `<await>`:
|
|
265
265
|
| ---------------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
266
266
|
| `timeout` | integer | An optional timeout. If reached, rejects the promise with a `TimeoutError`. |
|
267
267
|
| `name` | string | Improves debugging and ensures ordering with the `show-after` attribute. |
|
268
|
-
| `show-after` | string | Another `<await>` tag’s `name`.
|
268
|
+
| `show-after` | string | Another `<await>` tag’s `name`. Use with `client-reorder` to ensure that the current `<await>` will always render alongside or after the named `<await>`. |
|
269
269
|
| `client-reorder` | boolean | If true, anything after this `<await>` will be server-rendered before the Promise completes, then the fulfilled Promise’s result will be updated with client-side JavaScript. |
|
270
270
|
|
271
|
+
Regardless of these attributes, the promise is executed as eagerly as possible. The attributes control how to coordinate rendering with the rest of the page:
|
272
|
+
|
273
|
+
- `client-reorder` prevents `<await>` blocks from delaying the HTTP stream, at the expense of making their rendering rely on client-side JS. Useful for making non-critical page sections not block HTML streaming of important content.
|
274
|
+
|
275
|
+
- Using `show-after` with `client-reorder` ensures that the current `<await>` block will always render simultaneously with or after the named `<await>`. Useful for cutting down on [layout shift](https://web.dev/debug-layout-shifts/). `<@placeholder>`s can help fine-tune the user experience while loading.
|
276
|
+
|
277
|
+
- `timeout` is useful for limiting non-critical content from slowing down the rest of the page too much.
|
278
|
+
|
271
279
|
> **Pro Tip**: When using `timeout`, you can distinguish between `TimeoutError`s and promise rejections by checking the error’s `name`:
|
272
280
|
>
|
273
281
|
> ```marko
|
package/docs/express.md
CHANGED
@@ -30,14 +30,14 @@ By using `res.marko` you'll automatically have access to `req`, `res`, `app`, `a
|
|
30
30
|
```javascript
|
31
31
|
import express from "express";
|
32
32
|
import markoPlugin from "@marko/express";
|
33
|
-
import
|
33
|
+
import Template from "./template.marko";
|
34
34
|
|
35
35
|
const app = express();
|
36
36
|
|
37
37
|
app.use(markoPlugin()); //enable res.marko(template, data)
|
38
38
|
|
39
39
|
app.get("/", function (req, res) {
|
40
|
-
res.marko(
|
40
|
+
res.marko(Template, {
|
41
41
|
name: "Frank",
|
42
42
|
count: 30,
|
43
43
|
colors: ["red", "green", "blue"]
|
package/docs/http.md
CHANGED
@@ -7,13 +7,13 @@ project for a working example.
|
|
7
7
|
|
8
8
|
```js
|
9
9
|
import http from "http";
|
10
|
-
import
|
10
|
+
import Template from "./index.marko";
|
11
11
|
|
12
12
|
const port = 8080;
|
13
13
|
const server = http.createServer();
|
14
14
|
|
15
15
|
server.on("request", (req, res) => {
|
16
|
-
|
16
|
+
Template.render(
|
17
17
|
{
|
18
18
|
name: "Frank",
|
19
19
|
count: 30,
|
package/docs/koa.md
CHANGED
@@ -13,13 +13,13 @@ npm install koa marko --save
|
|
13
13
|
|
14
14
|
```javascript
|
15
15
|
import Koa from "koa";
|
16
|
-
import
|
16
|
+
import Template from "./index.marko";
|
17
17
|
|
18
18
|
const app = new Koa();
|
19
19
|
|
20
20
|
app.use((ctx, next) => {
|
21
21
|
ctx.type = "html";
|
22
|
-
ctx.body =
|
22
|
+
ctx.body = Template.stream({
|
23
23
|
name: "Frank",
|
24
24
|
count: 30,
|
25
25
|
colors: ["red", "green", "blue"]
|
package/docs/marko-5-upgrade.md
CHANGED
@@ -52,14 +52,13 @@ or
|
|
52
52
|
yarn upgrade marko@^5
|
53
53
|
```
|
54
54
|
|
55
|
-
> **Note**: Marko 5 has changed to using ES Modules. This means if you are using CJS modules to `require` a Marko template you will need to use the default property exported.
|
55
|
+
> **Note**: Marko 5 has changed to using ES Modules. This means if you are using CJS modules to `require` a Marko template you will need to use the `.default` property exported.
|
56
56
|
>
|
57
57
|
> ```js
|
58
58
|
> const template = require("./template.marko");
|
59
|
-
>
|
60
|
-
> // Should become
|
59
|
+
> // …should become:
|
61
60
|
> const template = require("./template.marko").default;
|
62
61
|
>
|
63
|
-
> // If
|
62
|
+
> // If already using ES Modules, things remain the same:
|
64
63
|
> import template from "./template.marko";
|
65
64
|
> ```
|
package/docs/marko-vs-react.md
CHANGED
@@ -617,20 +617,20 @@ style.less {
|
|
617
617
|
|
618
618
|
### API
|
619
619
|
|
620
|
-
Marko compiles
|
621
|
-
|
620
|
+
Marko compiles components to JavaScript modules that export their rendering APIs,
|
621
|
+
as shown below:
|
622
622
|
|
623
623
|
```js
|
624
|
-
|
625
|
-
|
626
|
-
.appendTo(document.body);
|
624
|
+
import Greeting from "./components/greeting.marko";
|
625
|
+
Greeting.renderSync({ name: "Frank" }).appendTo(document.body);
|
627
626
|
```
|
628
627
|
|
629
|
-
The same UI component can
|
628
|
+
The same UI component can render to streams, such as a writable HTTP
|
630
629
|
response stream:
|
631
630
|
|
632
631
|
```js
|
633
|
-
|
632
|
+
import Greeting from "./components/greeting.marko";
|
633
|
+
Greeting.render({ name: "John" }, res);
|
634
634
|
```
|
635
635
|
|
636
636
|
> The users of a Marko UI component do not need to know that the component was
|
package/docs/redux.md
CHANGED
@@ -17,7 +17,7 @@ The partial code below shows how a Marko UI component can connect to a Redux sto
|
|
17
17
|
### `counter.marko`
|
18
18
|
|
19
19
|
```marko
|
20
|
-
import store from './store';
|
20
|
+
import store from './store.js';
|
21
21
|
|
22
22
|
class {
|
23
23
|
onMount () {
|
@@ -40,13 +40,13 @@ class {
|
|
40
40
|
### `reducer.js`
|
41
41
|
|
42
42
|
```js
|
43
|
-
|
43
|
+
export default function (state, action) {
|
44
44
|
state = state || { value: 0 };
|
45
45
|
|
46
46
|
// Additional reducer logic here…
|
47
47
|
|
48
48
|
return state;
|
49
|
-
}
|
49
|
+
}
|
50
50
|
```
|
51
51
|
|
52
52
|
### `store.js`
|
@@ -54,8 +54,8 @@ module.exports = function (state, action) {
|
|
54
54
|
In `counter.marko`, the imported store module exports a Redux store created with the following code:
|
55
55
|
|
56
56
|
```js
|
57
|
-
|
58
|
-
|
57
|
+
import redux from "redux";
|
58
|
+
import counter from "./reducer.js";
|
59
59
|
|
60
|
-
|
60
|
+
export default redux.createStore(counter);
|
61
61
|
```
|