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.
Files changed (73) hide show
  1. package/README.md +6 -6
  2. package/bin/markoc.js +13 -1
  3. package/dist/core-tags/core/await/reorderer-renderer.js +26 -6
  4. package/dist/runtime/RenderResult.js +7 -7
  5. package/dist/runtime/components/Component.js +129 -129
  6. package/dist/runtime/components/ComponentDef.js +25 -25
  7. package/dist/runtime/components/ComponentsContext.js +8 -8
  8. package/dist/runtime/components/GlobalComponentsContext.js +4 -4
  9. package/dist/runtime/components/KeySequence.js +3 -3
  10. package/dist/runtime/components/ServerComponent.js +13 -13
  11. package/dist/runtime/components/State.js +25 -25
  12. package/dist/runtime/components/attach-detach.js +8 -8
  13. package/dist/runtime/components/beginComponent/index-browser.js +2 -2
  14. package/dist/runtime/components/beginComponent/index.js +7 -7
  15. package/dist/runtime/components/defineComponent.js +5 -5
  16. package/dist/runtime/components/dom-data.js +3 -3
  17. package/dist/runtime/components/endComponent/index.js +2 -2
  18. package/dist/runtime/components/entry/index-browser.js +4 -4
  19. package/dist/runtime/components/entry/index.js +15 -15
  20. package/dist/runtime/components/event-delegation.js +10 -10
  21. package/dist/runtime/components/init-components/index-browser.js +34 -34
  22. package/dist/runtime/components/registry/index-browser.js +7 -7
  23. package/dist/runtime/components/registry/index.js +2 -2
  24. package/dist/runtime/components/renderer.js +26 -26
  25. package/dist/runtime/components/update-manager.js +10 -10
  26. package/dist/runtime/components/util/index-browser.js +17 -17
  27. package/dist/runtime/components/util/index.js +9 -9
  28. package/dist/runtime/createOut.js +1 -1
  29. package/dist/runtime/dom-insert.js +5 -5
  30. package/dist/runtime/helpers/_change-case.js +2 -2
  31. package/dist/runtime/helpers/dynamic-tag.js +7 -7
  32. package/dist/runtime/helpers/style-value.js +1 -1
  33. package/dist/runtime/html/AsyncStream.js +20 -20
  34. package/dist/runtime/html/BufferedWriter.js +2 -2
  35. package/dist/runtime/html/StringWriter.js +1 -1
  36. package/dist/runtime/html/helpers/attr.js +1 -1
  37. package/dist/runtime/html/helpers/data-marko.js +4 -4
  38. package/dist/runtime/html/helpers/escape-quotes.js +1 -1
  39. package/dist/runtime/html/helpers/escape-xml.js +1 -1
  40. package/dist/runtime/html/helpers/props-script.js +1 -1
  41. package/dist/runtime/html/index.js +1 -1
  42. package/dist/runtime/renderable.js +4 -4
  43. package/dist/runtime/setImmediate/index-browser.js +1 -1
  44. package/dist/runtime/setImmediate/index-worker.js +2 -2
  45. package/dist/runtime/setImmediate/index.js +2 -2
  46. package/dist/runtime/vdom/AsyncVDOMBuilder.js +28 -28
  47. package/dist/runtime/vdom/VDocumentFragment.js +1 -1
  48. package/dist/runtime/vdom/VElement.js +11 -11
  49. package/dist/runtime/vdom/VFragment.js +3 -3
  50. package/dist/runtime/vdom/VNode.js +4 -4
  51. package/dist/runtime/vdom/hot-reload.js +15 -15
  52. package/dist/runtime/vdom/index.js +1 -1
  53. package/dist/runtime/vdom/morphdom/fragment.js +2 -2
  54. package/dist/runtime/vdom/morphdom/helpers.js +4 -4
  55. package/dist/runtime/vdom/morphdom/index.js +28 -28
  56. package/dist/runtime/vdom/morphdom/specialElHandlers.js +1 -1
  57. package/docs/10-awesome-marko-features.md +3 -4
  58. package/docs/class-components.md +5 -5
  59. package/docs/cloudflare-workers.md +4 -6
  60. package/docs/compiler.md +13 -2
  61. package/docs/core-tags.md +9 -1
  62. package/docs/express.md +2 -2
  63. package/docs/http.md +2 -2
  64. package/docs/koa.md +2 -2
  65. package/docs/marko-5-upgrade.md +3 -4
  66. package/docs/marko-vs-react.md +7 -7
  67. package/docs/redux.md +6 -6
  68. package/docs/rendering.md +48 -41
  69. package/docs/troubleshooting-streaming.md +5 -5
  70. package/docs/webpack.md +9 -9
  71. package/package.json +3 -3
  72. package/src/core-tags/core/await/reorderer-renderer.js +27 -7
  73. 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._P_;
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.av_(typeName).prototype;
34
+ var newProto = registry.aw_(typeName).prototype;
35
35
  instances.forEach(function (instance) {
36
36
  if (hasLifecycleChanged(instance.__proto__, newProto)) {
37
- var startNode = instance.K_.startNode;
38
- var endNode = instance.K_.endNode;
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.L_) {
47
- instance.L_.removeAllListeners();
48
- instance.L_ = null;
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.D_(curNode);
52
+ util.E_(curNode);
53
53
  parentNode.removeChild(curNode);
54
54
  }
55
55
 
56
56
  instance.bY_ = false;
57
- instance.R_ = false;
57
+ instance.S_ = false;
58
58
  }
59
59
 
60
60
  instance.__proto__ = newProto;
61
- instance._p_(
62
- instance.Q_, false).
63
- afterInsert(instance.X_);
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._P_ = function (typeName, id) {
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._o_(function () {
111
+ updateManager._p_(function () {
112
112
  var pending = queue;
113
113
  queue = undefined;
114
114
 
@@ -15,7 +15,7 @@ function Template(typeName) {
15
15
  }
16
16
 
17
17
  var AsyncVDOMBuilder = require("./AsyncVDOMBuilder");
18
- require("../createOut").aF_(
18
+ require("../createOut").aG_(
19
19
  Template.prototype.createOut = function createOut(
20
20
  globalData,
21
21
  parent,
@@ -1,5 +1,5 @@
1
1
  "use strict";var helpers = require("./helpers");
2
- var insertBefore = helpers.aG_;
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.ao_ = createFragmentNode;
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.aG_ = insertBefore;
39
- exports.aH_ = insertAfter;
38
+ exports.aH_ = insertBefore;
39
+ exports.aI_ = insertAfter;
40
40
  exports.bT_ = nextSibling;
41
- exports._r_ = firstChild;
42
- exports.aI_ = removeChild;
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.C_;
6
- var destroyNodeRecursive = componentsUtil.D_;
5
+ var existingComponentLookup = componentsUtil.D_;
6
+ var destroyNodeRecursive = componentsUtil.E_;
7
7
  var addComponentRootToKeyedElements =
8
- componentsUtil.ap_;
9
- var normalizeComponentKey = componentsUtil.aE_;
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.ag_;
18
- var componentByDOMNode = domData.E_;
19
- var vElementByDOMNode = domData.ae_;
20
- var detachedByDOMNode = domData.af_;
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.aG_;
23
- var insertAfter = helpers.aH_;
22
+ var insertBefore = helpers.aH_;
23
+ var insertAfter = helpers.aI_;
24
24
  var nextSibling = helpers.bT_;
25
- var firstChild = helpers._r_;
26
- var removeChild = helpers.aI_;
27
- var createFragmentNode = fragment.ao_;
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.ab_(node, componentsContext);
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.K_ = insertBefore(
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.K_, vComponent, 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._r_;
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.aB_ || parentComponent;
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.K_ = rootNode;
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.K_ !== curFromNodeChild) {
218
+ if (matchingFromComponent.L_ !== curFromNodeChild) {
219
219
  if (
220
220
  curFromNodeChild && (
221
221
  fromComponent = componentByDOMNode.get(curFromNodeChild)) &&
222
- globalComponentsContext._U_[
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.K_);
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.K_,
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()))._L_(
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._U_[fromComponent.id])
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._U_[fromComponent.id])
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.aB_;
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.___(node) != false) {
701
+ if (eventDelegation._a_(node) != false) {
702
702
  removeChild(node);
703
703
  }
704
704
  }
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  function forEachOption(el, fn, i) {
13
- var curChild = el._r_;
13
+ var curChild = el._s_;
14
14
 
15
15
  while (curChild) {
16
16
  if (curChild.bI_ === "option") {
@@ -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 [automatically mount UI
247
- components](http://markojs.com/docs/server-side-rendering/) rendered on the
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 credit:_ [Wikipedia](https://commons.wikimedia.org/wiki/File:Amanhecer_no_Hercules_--.jpg)
291
+ [_Cover image from Wikipedia_](https://commons.wikimedia.org/wiki/File:Amanhecer_no_Hercules_--.jpg)
@@ -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 [Server-side rendering](/docs/server-side-rendering/).
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
- module.exports = class {
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
- module.exports = {
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
- module.exports = {
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/) you need to make sure that Marko is loaded with a `worker` [export condition](https://nodejs.org/api/packages.html#conditional-exports). Most bundlers support the ability to define export conditions.
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 the `template.stream` will now return a worker compatible [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream).
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 template from "./index.marko";
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(template.stream(), {
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
- module.exports = (tag, types) => {
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`. With `client-reorder`, ensures that the current `<await>` block will always show after the named `<await>`. |
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 template from "./template.marko";
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(template, {
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 template from "./index.marko";
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
- template.render(
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 template from "./index.marko";
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 = template.stream({
22
+ ctx.body = Template.stream({
23
23
  name: "Frank",
24
24
  count: 30,
25
25
  colors: ["red", "green", "blue"]
@@ -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 you are already using es modules things remain the same
62
+ > // If already using ES Modules, things remain the same:
64
63
  > import template from "./template.marko";
65
64
  > ```
@@ -617,20 +617,20 @@ style.less {
617
617
 
618
618
  ### API
619
619
 
620
- Marko compiles component to JavaScript modules that export an API for rendering
621
- the component as shown below:
620
+ Marko compiles components to JavaScript modules that export their rendering APIs,
621
+ as shown below:
622
622
 
623
623
  ```js
624
- require("./components/greeting")
625
- .renderSync({ name: "Frank" })
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 be rendered to a stream such as a writable HTTP
628
+ The same UI component can render to streams, such as a writable HTTP
630
629
  response stream:
631
630
 
632
631
  ```js
633
- require("./components/hello").render({ name: "John" }, res);
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
- module.exports = function (state, action) {
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
- const redux = require("redux");
58
- const counter = require("./reducer");
57
+ import redux from "redux";
58
+ import counter from "./reducer.js";
59
59
 
60
- module.exports = redux.createStore(counter);
60
+ export default redux.createStore(counter);
61
61
  ```