marko 5.21.2 → 5.21.5

package/dist/runtime/vdom/hot-reload.js

@@ -5,7 +5,7 @@ var registry = require("../components/registry");
 var updateManager = require("../components/update-manager");
 
 var createTemplate = runtime.t;
-var createComponent = registry._P_;
+var createComponent = registry._Q_;
 var registered = {};
 var queue;
 
@@ -31,36 +31,36 @@ runtime.t = function (typeName) {
         }
 
         queue.push(function () {
-          var newProto = registry.av_(typeName).prototype;
+          var newProto = registry.aw_(typeName).prototype;
           instances.forEach(function (instance) {
             if (hasLifecycleChanged(instance.__proto__, newProto)) {
-              var startNode = instance.K_.startNode;
-              var endNode = instance.K_.endNode;
+              var startNode = instance.L_.startNode;
+              var endNode = instance.L_.endNode;
               var parentNode = startNode.parentNode;
               var curNode;
 
               instance.bY_ = true;
-              instance._a_();
               instance._b_();
+              instance._c_();
 
-              if (instance.L_) {
-                instance.L_.removeAllListeners();
-                instance.L_ = null;
+              if (instance.M_) {
+                instance.M_.removeAllListeners();
+                instance.M_ = null;
               }
 
               while ((curNode = startNode.nextSibling) !== endNode) {
-                util.D_(curNode);
+                util.E_(curNode);
                 parentNode.removeChild(curNode);
               }
 
               instance.bY_ = false;
-              instance.R_ = false;
+              instance.S_ = false;
             }
 
             instance.__proto__ = newProto;
-            instance._p_(
-            instance.Q_, false).
-            afterInsert(instance.X_);
+            instance._q_(
+            instance.R_, false).
+            afterInsert(instance.Y_);
           });
         });
       }
@@ -74,7 +74,7 @@ runtime.t = function (typeName) {
   }
 };
 
-registry._P_ = function (typeName, id) {
+registry._Q_ = function (typeName, id) {
   var template = registered[typeName];
   var instance = createComponent(typeName, id);
 
@@ -108,7 +108,7 @@ function hasLifecycleChanged(oldProto, newProto) {
 }
 
 function batchUpdate() {
-  updateManager._o_(function () {
+  updateManager._p_(function () {
     var pending = queue;
     queue = undefined;
 

package/dist/runtime/vdom/index.js

@@ -15,7 +15,7 @@ function Template(typeName) {
 }
 
 var AsyncVDOMBuilder = require("./AsyncVDOMBuilder");
-require("../createOut").aF_(
+require("../createOut").aG_(
 Template.prototype.createOut = function createOut(
 globalData,
 parent,

package/dist/runtime/vdom/morphdom/fragment.js

@@ -1,5 +1,5 @@
 "use strict";var helpers = require("./helpers");
-var insertBefore = helpers.aG_;
+var insertBefore = helpers.aH_;
 
 var fragmentPrototype = {
   nodeType: 12,
@@ -91,5 +91,5 @@ function beginFragmentNode(startNode, parentNode) {
   return fragment;
 }
 
-exports.ao_ = createFragmentNode;
+exports.ap_ = createFragmentNode;
 exports.c__ = beginFragmentNode;

package/dist/runtime/vdom/morphdom/helpers.js

@@ -35,8 +35,8 @@ function removeChild(node) {
   node.parentNode.removeChild(node);
 }
 
-exports.aG_ = insertBefore;
-exports.aH_ = insertAfter;
+exports.aH_ = insertBefore;
+exports.aI_ = insertAfter;
 exports.bT_ = nextSibling;
-exports._r_ = firstChild;
-exports.aI_ = removeChild;
+exports._s_ = firstChild;
+exports.aJ_ = removeChild;

package/dist/runtime/vdom/morphdom/index.js

@@ -2,11 +2,11 @@
 var specialElHandlers = require("./specialElHandlers");
 var KeySequence = require("../../components/KeySequence");
 var componentsUtil = require("../../components/util");
-var existingComponentLookup = componentsUtil.C_;
-var destroyNodeRecursive = componentsUtil.D_;
+var existingComponentLookup = componentsUtil.D_;
+var destroyNodeRecursive = componentsUtil.E_;
 var addComponentRootToKeyedElements =
-componentsUtil.ap_;
-var normalizeComponentKey = componentsUtil.aE_;
+componentsUtil.aq_;
+var normalizeComponentKey = componentsUtil.aF_;
 var VElement = require("../vdom").bb_;
 var virtualizeElement = VElement.bO_;
 var morphAttrs = VElement.bP_;
@@ -14,17 +14,17 @@ var eventDelegation = require("../../components/event-delegation");
 var fragment = require("./fragment");
 var helpers = require("./helpers");
 var domData = require("../../components/dom-data");
-var keysByDOMNode = domData.ag_;
-var componentByDOMNode = domData.E_;
-var vElementByDOMNode = domData.ae_;
-var detachedByDOMNode = domData.af_;
+var keysByDOMNode = domData.ah_;
+var componentByDOMNode = domData.F_;
+var vElementByDOMNode = domData.af_;
+var detachedByDOMNode = domData.ag_;
 
-var insertBefore = helpers.aG_;
-var insertAfter = helpers.aH_;
+var insertBefore = helpers.aH_;
+var insertAfter = helpers.aI_;
 var nextSibling = helpers.bT_;
-var firstChild = helpers._r_;
-var removeChild = helpers.aI_;
-var createFragmentNode = fragment.ao_;
+var firstChild = helpers._s_;
+var removeChild = helpers.aJ_;
+var createFragmentNode = fragment.ap_;
 var beginFragmentNode = fragment.c__;
 
 var ELEMENT_NODE = 1;
@@ -52,7 +52,7 @@ function caseInsensitiveCompare(a, b) {
 
 function onNodeAdded(node, componentsContext) {
   if (node.nodeType === ELEMENT_NODE) {
-    eventDelegation.ab_(node, componentsContext);
+    eventDelegation.ac_(node, componentsContext);
   }
 }
 
@@ -105,7 +105,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   ownerComponent,
   parentComponent)
   {
-    var rootNode = component.K_ = insertBefore(
+    var rootNode = component.L_ = insertBefore(
     createFragmentNode(),
     referenceNode,
     referenceNodeParentEl);
@@ -127,7 +127,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   }
 
   function morphComponent(component, vComponent) {
-    morphChildren(component.K_, vComponent, component);
+    morphChildren(component.L_, vComponent, component);
   }
 
   var detachedNodes = [];
@@ -148,7 +148,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
   function morphChildren(fromNode, toNode, parentComponent) {
     var curFromNodeChild = firstChild(fromNode);
-    var curToNodeChild = toNode._r_;
+    var curToNodeChild = toNode._s_;
 
     var curToNodeKey;
     var curFromNodeKey;
@@ -171,7 +171,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         curFromNodeChild = nextSibling(curFromNodeChild);
       }
 
-      var ownerComponent = curToNodeChild.aB_ || parentComponent;
+      var ownerComponent = curToNodeChild.aC_ || parentComponent;
       var referenceComponent;
 
       if (curToNodeType === COMPONENT_NODE) {
@@ -182,7 +182,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         {
           if (isHydrate === true) {
             var rootNode = beginFragmentNode(curFromNodeChild, fromNode);
-            component.K_ = rootNode;
+            component.L_ = rootNode;
             componentByDOMNode.set(rootNode, component);
 
             if (ownerComponent && curToNodeKey) {
@@ -215,17 +215,17 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
           }
         } else {
-          if (matchingFromComponent.K_ !== curFromNodeChild) {
+          if (matchingFromComponent.L_ !== curFromNodeChild) {
             if (
             curFromNodeChild && (
             fromComponent = componentByDOMNode.get(curFromNodeChild)) &&
-            globalComponentsContext._U_[
+            globalComponentsContext._V_[
             fromComponent.id] ===
             undefined)
             {
               // The component associated with the current real DOM node was not rendered
               // so we should just remove it out of the real DOM by destroying it
-              curFromNodeChild = nextSibling(fromComponent.K_);
+              curFromNodeChild = nextSibling(fromComponent.L_);
               destroyComponent(fromComponent);
               continue;
             }
@@ -233,7 +233,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             // We need to move the existing component into
             // the correct location
             insertBefore(
-            matchingFromComponent.K_,
+            matchingFromComponent.L_,
             curFromNodeChild,
             fromNode);
 
@@ -267,7 +267,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         // up elements
         curToNodeKey = (
         keySequences[referenceComponent.id] || (
-        keySequences[referenceComponent.id] = new KeySequence()))._L_(
+        keySequences[referenceComponent.id] = new KeySequence()))._M_(
         curToNodeKey);
 
         if (curFromNodeChild) {
@@ -502,7 +502,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           curFromNodeChild = fromNextSibling;
 
           if (
-          !globalComponentsContext._U_[fromComponent.id])
+          !globalComponentsContext._V_[fromComponent.id])
           {
             destroyComponent(fromComponent);
           }
@@ -626,7 +626,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         if (fromComponent = componentByDOMNode.get(curFromNodeChild)) {
           curFromNodeChild = fromNextSibling;
           if (
-          !globalComponentsContext._U_[fromComponent.id])
+          !globalComponentsContext._V_[fromComponent.id])
           {
             destroyComponent(fromComponent);
           }
@@ -642,7 +642,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           referenceComponent = parentComponent;
         } else {
           referenceComponent =
-          curVFromNodeChild && curVFromNodeChild.aB_;
+          curVFromNodeChild && curVFromNodeChild.aC_;
         }
 
         detachNode(curFromNodeChild, fromNode, referenceComponent);
@@ -698,7 +698,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         detachedFromComponent !== true && detachedFromComponent);
 
 
-        if (eventDelegation.___(node) != false) {
+        if (eventDelegation._a_(node) != false) {
           removeChild(node);
         }
       }

package/dist/runtime/vdom/morphdom/specialElHandlers.js

@@ -10,7 +10,7 @@
 }
 
 function forEachOption(el, fn, i) {
-  var curChild = el._r_;
+  var curChild = el._s_;
 
   while (curChild) {
     if (curChild.bI_ === "option") {

package/docs/10-awesome-marko-features.md

@@ -243,9 +243,8 @@ $ const searchResultsPromise = searchService.performSearch(keywords);
 Can’t decide if you want to do server-side rendering or client-side rendering?
 Why are we even talking about this in 2017? It doesn’t matter. Seriously, just
 do both. Marko makes this a no-brainer since you can render a Marko template
-directly to a stream (oh, and Marko will [automatically mount UI
-components](http://markojs.com/docs/server-side-rendering/) rendered on the
-server when the page loads in the browser):
+directly to a stream (oh, and Marko will automatically mount UI
+components rendered on the server when the page loads in the browser):
 
 ```js
 require("@marko/compiler/register"); // require .marko files!
@@ -289,4 +288,4 @@ Coming soon: auto correction and autonomous coding
 
 ---
 
-_Cover image credit:_ [Wikipedia](https://commons.wikimedia.org/wiki/File:Amanhecer_no_Hercules_--.jpg)
+[_Cover image from Wikipedia_](https://commons.wikimedia.org/wiki/File:Amanhecer_no_Hercules_--.jpg)

package/docs/class-components.md

@@ -28,7 +28,7 @@ Marko makes it easy to keep your component’s class and styles next to the HTML
 
 ## Server-side rendering
 
-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/).
+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/).
 
 ## Single-file components
 
@@ -107,7 +107,7 @@ counter/
 In your `component.js` file, export the component’s class:
 
 ```js
-module.exports = class {
+export default class {
   onCreate() {
     this.state = {
       count: 0
@@ -116,7 +116,7 @@ module.exports = class {
   increment() {
     this.state.count++;
   }
-};
+}
 ```
 
 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:
 If you target browsers that does not support classes, a plain object of methods can be exported:
 
 ```js
-module.exports = {
+export default {
   onCreate: function () {
     this.state = {
       count: 0
@@ -214,7 +214,7 @@ class {
 `component-browser.js`
 
 ```js
-module.exports = {
+export default {
   shout() {
     alert(`My favorite number is ${this.number}!`);
   }

package/docs/cloudflare-workers.md

@@ -5,21 +5,19 @@ project for a working example.
 
 ## Usage
 
-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.
+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.
 
-After that point the `template.stream` will now return a worker compatible [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream).
-
-You can then simply respond with the returned stream.
+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:
 
 ```js
-import template from "./index.marko";
+import Template from "./index.marko";
 
 addEventListener("fetch", event => {
   event.respondWith(handleRequest(event.request));
 });
 
 async function handleRequest(request) {
-  return new Response(template.stream(), {
+  return new Response(Template.stream(), {
     headers: {
       status: 200,
       headers: { "content-type": "text/html;charset=UTF-8" }

package/docs/compiler.md

@@ -89,6 +89,17 @@ Default: false
 
 Set to true to have the compiler provide the `ast` in it's output.
 
+#### `stripTypes`
+
+Type: `boolean|undefined`<br>
+Default: undefined
+
+Remove all typescript types from the output when `true`.
+If the value is `undefined`, the default, the compiler will remove types if
+the `output` option is not `source` or `migrate`.
+
+For example to run migrations _and_ strip types you can set both `output: "migrate"` and `stripTypes: true`.
+
 #### `runtimeId`
 
 Type: `string`<br>
@@ -128,7 +139,7 @@ Whether source maps should be output with the compiled templates.
 #### `meta`
 
 Type: `boolean`<br>
-Default: `false,
+Default: `false`
 
 _Deprecated_. This option inlines the metadata in the output Javascript code. Metadata should be accessed instead from the `CompileResult`.
 
@@ -294,7 +305,7 @@ The hook will also receive a `types` object that matches the [@babel/types](http
 Here is an example hook:
 
 ```js
-module.exports = (tag, types) => {
+export default (tag, types) => {
   if (types.isStringLiteral(tag.node.name)) {
     console.log(`Found a tag called ${tag.node.name.value}`);
     tag.remove();

package/docs/core-tags.md

@@ -265,9 +265,17 @@ Optional attributes for `<await>`:
 | ---------------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 |        `timeout` | integer | An optional timeout. If reached, rejects the promise with a `TimeoutError`.                                                                                                   |
 |           `name` | string  | Improves debugging and ensures ordering with the `show-after` attribute.                                                                                                      |
-|     `show-after` | string  | Another `<await>` tag’s `name`. With `client-reorder`, ensures that the current `<await>` block will always show after the named `<await>`.                                   |
+|     `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>`.                     |
 | `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. |
 
+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:
+
+- `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.
+
+- 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.
+
+- `timeout` is useful for limiting non-critical content from slowing down the rest of the page too much.
+
 > **Pro Tip**: When using `timeout`, you can distinguish between `TimeoutError`s and promise rejections by checking the error’s `name`:
 >
 > ```marko

package/docs/express.md

@@ -30,14 +30,14 @@ By using `res.marko` you'll automatically have access to `req`, `res`, `app`, `a
 ```javascript
 import express from "express";
 import markoPlugin from "@marko/express";
-import template from "./template.marko";
+import Template from "./template.marko";
 
 const app = express();
 
 app.use(markoPlugin()); //enable res.marko(template, data)
 
 app.get("/", function (req, res) {
-  res.marko(template, {
+  res.marko(Template, {
     name: "Frank",
     count: 30,
     colors: ["red", "green", "blue"]

package/docs/http.md

@@ -7,13 +7,13 @@ project for a working example.
 
 ```js
 import http from "http";
-import template from "./index.marko";
+import Template from "./index.marko";
 
 const port = 8080;
 const server = http.createServer();
 
 server.on("request", (req, res) => {
-  template.render(
+  Template.render(
     {
       name: "Frank",
       count: 30,

package/docs/koa.md

@@ -13,13 +13,13 @@ npm install koa marko --save
 
 ```javascript
 import Koa from "koa";
-import template from "./index.marko";
+import Template from "./index.marko";
 
 const app = new Koa();
 
 app.use((ctx, next) => {
   ctx.type = "html";
-  ctx.body = template.stream({
+  ctx.body = Template.stream({
     name: "Frank",
     count: 30,
     colors: ["red", "green", "blue"]

package/docs/marko-5-upgrade.md

@@ -52,14 +52,13 @@ or
 yarn upgrade marko@^5
 ```
 
-> **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.
+> **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.
 >
 > ```js
 > const template = require("./template.marko");
->
-> // Should become
+> // …should become:
 > const template = require("./template.marko").default;
 >
-> // If you are already using es modules things remain the same
+> // If already using ES Modules, things remain the same:
 > import template from "./template.marko";
 > ```

package/docs/marko-vs-react.md

@@ -617,20 +617,20 @@ style.less {
 
 ### API
 
-Marko compiles component to JavaScript modules that export an API for rendering
-the component as shown below:
+Marko compiles components to JavaScript modules that export their rendering APIs,
+as shown below:
 
 ```js
-require("./components/greeting")
-  .renderSync({ name: "Frank" })
-  .appendTo(document.body);
+import Greeting from "./components/greeting.marko";
+Greeting.renderSync({ name: "Frank" }).appendTo(document.body);
 ```
 
-The same UI component can be rendered to a stream such as a writable HTTP
+The same UI component can render to streams, such as a writable HTTP
 response stream:
 
 ```js
-require("./components/hello").render({ name: "John" }, res);
+import Greeting from "./components/greeting.marko";
+Greeting.render({ name: "John" }, res);
 ```
 
 > The users of a Marko UI component do not need to know that the component was

package/docs/redux.md

@@ -17,7 +17,7 @@ The partial code below shows how a Marko UI component can connect to a Redux sto
 ### `counter.marko`
 
 ```marko
-import store from './store';
+import store from './store.js';
 
 class {
   onMount () {
@@ -40,13 +40,13 @@ class {
 ### `reducer.js`
 
 ```js
-module.exports = function (state, action) {
+export default function (state, action) {
   state = state || { value: 0 };
 
   // Additional reducer logic here…
 
   return state;
-};
+}
 ```
 
 ### `store.js`
@@ -54,8 +54,8 @@ module.exports = function (state, action) {
 In `counter.marko`, the imported store module exports a Redux store created with the following code:
 
 ```js
-const redux = require("redux");
-const counter = require("./reducer");
+import redux from "redux";
+import counter from "./reducer.js";
 
-module.exports = redux.createStore(counter);
+export default redux.createStore(counter);
 ```