marko 5.21.11 → 5.22.1

package/dist/compiler/config.js

@@ -34,8 +34,8 @@ if (g.__MARKO_CONFIG) {
      * You can also access this metadata via `compile(...).meta`.
      * This API is sticking around for compatibility purposes.
      */
-    meta: true };
-
+    meta: true
+  };
 
   if (process.env.MARKO_CONFIG) {
     Object.assign(config, JSON.parse(process.env.MARKO_CONFIG));

package/dist/compiler/index.js

@@ -26,13 +26,13 @@ var defaultOptionsExportDefinition = {
     return globalConfig;
   },
   enumerable: true,
-  configurable: false };
-
+  configurable: false
+};
 
 Object.defineProperties(exports, {
   defaultOptions: defaultOptionsExportDefinition,
-  config: defaultOptionsExportDefinition });
-
+  config: defaultOptionsExportDefinition
+});
 
 function configure(newConfig) {
   if (!newConfig) {
@@ -96,8 +96,8 @@ function compileForBrowser(src, filename, options, callback) {
   {
     output: "dom",
     meta: false,
-    sourceOnly: false },
-
+    sourceOnly: false
+  },
   options);
 
 

package/dist/core-tags/core/await/AsyncValue.js

@@ -114,7 +114,7 @@ AsyncValue.prototype = {
       // notify callbacks
       notifyCallbacks(this, null, value);
     }
-  } };
-
+  }
+};
 
 module.exports = AsyncValue;

package/dist/core-tags/core/await/renderer.js

@@ -102,8 +102,8 @@ module.exports = function awaitTag(input, out) {
   var awaitInfo = {
     name: name,
     clientReorder: clientReorder,
-    dataProvider: provider };
-
+    dataProvider: provider
+  };
 
   if (clientReorder) {
     awaitInfo.after = input.showAfter;
@@ -112,8 +112,8 @@ module.exports = function awaitTag(input, out) {
     out.global.x_ || (
     out.global.x_ = {
       instances: [],
-      nextId: 0 });
-
+      nextId: 0
+    });
 
     var id = awaitInfo.id = input.name || clientReorderContext.nextId++;
     var placeholderIdAttrValue = "afph" + id;
@@ -159,8 +159,8 @@ module.exports = function awaitTag(input, out) {
     out.flush(); // Flush everything up to this await instance
     asyncOut = awaitInfo.out = out.beginAsync({
       timeout: 0, // We will use our code for controlling timeout
-      name: name });
-
+      name: name
+    });
   }
 
   var beforeRenderEmitted = false;

package/dist/core-tags/core/await/reorderer-renderer.js

@@ -27,8 +27,8 @@ module.exports = function (input, out) {
   var asyncOut = out.beginAsync({
     last: true,
     timeout: -1,
-    name: "await-reorderer" });
-
+    name: "await-reorderer"
+  });
 
   out.onLast(function (next) {
     var awaitContext = global.x_;

package/dist/node-require/index.js

@@ -7,8 +7,8 @@ const requiredCompilerOptions = { modules: "cjs" };
 const defaultCompilerOptions = {
   // eslint-disable-next-line no-constant-condition
   sourceMaps: false,
-  meta: true };
-
+  meta: true
+};
 const MARKO_EXTENSIONS = Symbol("MARKO_EXTENSIONS");
 
 // eslint-disable-next-line no-constant-condition

package/dist/runtime/RenderResult.js

@@ -66,8 +66,8 @@ var proto = RenderResult.prototype = {
   toString: function () {
     return this.z_.toString();
   },
-  document: typeof document === "object" && document };
-
+  document: typeof document === "object" && document
+};
 
 Object.defineProperty(proto, "html", {
   get: function () {
@@ -78,8 +78,8 @@ Object.defineProperty(proto, "html", {
 
 
     return this.toString();
-  } });
-
+  }
+});
 
 Object.defineProperty(proto, "context", {
   get: function () {
@@ -90,8 +90,8 @@ Object.defineProperty(proto, "context", {
 
 
     return this.z_;
-  } });
-
+  }
+});
 
 // Add all of the following DOM methods to Component.prototype:
 // - appendTo(referenceEl)

package/dist/runtime/components/Component.js

@@ -27,8 +27,8 @@ var slice = Array.prototype.slice;
 
 var COMPONENT_SUBSCRIBE_TO_OPTIONS;
 var NON_COMPONENT_SUBSCRIBE_TO_OPTIONS = {
-  addDestroyListener: false };
-
+  addDestroyListener: false
+};
 
 var emit = EventEmitter.prototype.emit;
 var ELEMENT_NODE = 1;
@@ -636,8 +636,8 @@ Component.prototype = componentProto = {
   _b_() {
     this.onDestroy && this.onDestroy();
     this._x_("destroy");
-  } };
-
+  }
+};
 
 componentProto.elId = componentProto.getElId;
 componentProto._B_ = componentProto.update;

package/dist/runtime/components/ComponentDef.js

@@ -81,8 +81,8 @@ ComponentDef.prototype = {
 
   get _O_() {
     return this.h_._O_;
-  } };
-
+  }
+};
 
 ComponentDef.prototype.nk = ComponentDef.prototype._M_;
 
@@ -148,8 +148,8 @@ ComponentDef._P_ = function (o, types, global, registry) {
     id: id,
     h_: component,
     _G_: extra.d,
-    _J_: extra.f || 0 };
-
+    _J_: extra.f || 0
+  };
 };
 
 module.exports = ComponentDef;

package/dist/runtime/components/ComponentsContext.js

@@ -47,8 +47,8 @@ ComponentsContext.prototype = {
     this.z_.global.b_ = undefined;
 
     return componentDefs;
-  } };
-
+  }
+};
 
 function getComponentsContext(out) {
   return out.b_ || (out.b_ = new ComponentsContext(out));

package/dist/runtime/components/ServerComponent.js

@@ -64,8 +64,8 @@ class ServerComponent {
 
   onCreate() {}
   onInput() {}
-  onRender() {}}
-
+  onRender() {}
+}
 
 ServerComponent.prototype.getElId = ServerComponent.prototype.elId;
 

package/dist/runtime/components/State.js

@@ -9,8 +9,8 @@ function ensure(state, propertyName) {
       },
       set: function (value) {
         this._g_(propertyName, value, false /* ensure:false */);
-      } });
-
+      }
+    });
   }
 }
 
@@ -99,7 +99,7 @@ State.prototype = {
   },
   toJSON: function () {
     return this._v_;
-  } };
-
+  }
+};
 
 module.exports = State;

package/dist/runtime/components/attach-detach.js

@@ -48,8 +48,8 @@ function handleNodeDetach(node) {
           if (parentNode) {
             parentNode.removeChild(node);
           }
-        } });
-
+        }
+      });
 
       return allowDetach;
     }

package/dist/runtime/components/dom-data.js

@@ -4,4 +4,5 @@
   F_: new WeakMap(),
   ag_: new WeakMap(),
   ah_: new WeakMap(),
-  G_: {} };
+  G_: {}
+};

package/dist/runtime/components/entry/index.js

@@ -124,8 +124,8 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
       p: customEvents && scope, // Only serialize scope if we need to attach custom events
       s: state,
       u: undefinedPropNames,
-      w: serializedProps };
-
+      w: serializedProps
+    };
 
     var parts = [id, typeName];
     var hasExtra = isNotEmpty(extra);
@@ -205,8 +205,8 @@ function getInitComponentsData(out, componentDefs) {
     l: isLast && 1,
     g: serializedGlobals,
     w: componentDefs,
-    t: newTypes };
-
+    t: newTypes
+  };
 }
 
 function getInitComponentsDataFromOut(out) {

package/dist/runtime/components/init-components/index-browser.js

@@ -278,8 +278,8 @@ function initServerRendered(renderedComponents, host) {
 
     var fakeArray = win[globalKey] = {
       r: runtimeId,
-      concat: initServerRendered };
-
+      concat: initServerRendered
+    };
 
     // eslint-disable-next-line no-constant-condition
 

package/dist/runtime/components/update-manager.js

@@ -54,8 +54,8 @@ function batchUpdate(func) {
   // batched update completes we invoke the "afterUpdate"
   // event listeners.
   var batch = {
-    aB_: null };
-
+    aB_: null
+  };
 
   batchStack.push(batch);
 

package/dist/runtime/dom-insert.js

@@ -72,6 +72,6 @@ module.exports = function (target, getEl, afterInsert) {
       var el = getEl(this, referenceEl);
       insertAfter(el, referenceEl, referenceEl.parentNode);
       return afterInsert(this, referenceEl);
-    } });
-
+    }
+  });
 };

package/dist/runtime/html/AsyncStream.js

@@ -23,8 +23,8 @@ var voidWriter = {
   },
   toString: function () {
     return "";
-  } };
-
+  }
+};
 
 function State(root, stream, writer, events) {
   this.root = root;
@@ -235,8 +235,8 @@ var proto = AsyncStream.prototype = {
 
     state.events.emit("beginAsync", {
       out: newStream,
-      parentOut: this });
-
+      parentOut: this
+    });
 
     return newStream;
   },
@@ -496,8 +496,8 @@ var proto = AsyncStream.prototype = {
     newOut.on("error", this.emit.bind(this, "error"));
     this._state.events.emit("beginDetachedAsync", {
       out: newOut,
-      parentOut: this });
-
+      parentOut: this
+    });
     return newOut;
   },
 
@@ -653,8 +653,8 @@ var proto = AsyncStream.prototype = {
     this.g_ = componentDef;
     this.i_ = key;
     this.ay_ = customEvents;
-  } };
-
+  }
+};
 
 // alias:
 proto.w = proto.write;

package/dist/runtime/html/BufferedWriter.js

@@ -30,8 +30,8 @@ BufferedWriter.prototype = Object.assign(
     if (!this._wrapped.isTTY) {
       this._wrapped.end();
     }
-  } },
-
+  }
+},
 StringWriter.prototype);
 
 

package/dist/runtime/html/StringWriter.js

@@ -61,7 +61,7 @@ StringWriter.prototype = {
       str += `<script${nonceAttr}>${this._scripts}</script>`;
     }
     return str;
-  } };
-
+  }
+};
 
 module.exports = StringWriter;

package/dist/runtime/html/create-readable/index-browser.js

@@ -11,8 +11,8 @@ module.exports = function (data) {
     },
     end: function () {
       writer.close();
-    } };
-
+    }
+  };
   var out = this.createOut(
   data && data.$global,
   facade,

package/dist/runtime/html/create-readable/index.js

@@ -49,8 +49,8 @@ class Readable extends stream.Readable {
 
     template.render(data, out);
     out.end();
-  }}
-
+  }
+}
 
 module.exports = function (data) {
   return new Readable(this, data);

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

@@ -15,8 +15,8 @@ runtime.t = function (typeName) {
     },
     set: function (v) {
       renderFn = v;
-    } });
-
+    }
+  });
 
   return template;
 

package/dist/runtime/renderable.js

@@ -137,6 +137,6 @@ module.exports = function (target, renderer) {
       globalData.template = globalData.template || this;
 
       return safeRender(render, finalData, finalOut, shouldEnd);
-    } });
-
+    }
+  });
 };

package/dist/runtime/vdom/AsyncVDOMBuilder.js

@@ -288,8 +288,8 @@ var proto = AsyncVDOMBuilder.prototype = {
 
     state.bh_.emit("beginAsync", {
       out: asyncOut,
-      parentOut: this });
-
+      parentOut: this
+    });
 
     return asyncOut;
   },
@@ -438,8 +438,8 @@ var proto = AsyncVDOMBuilder.prototype = {
     this.g_ = componentDef;
     this.i_ = key;
     this.ay_ = customEvents;
-  } };
-
+  }
+};
 
 proto.e = proto.element;
 proto.be = proto.beginElement;

package/dist/runtime/vdom/VComponent.js

@@ -9,8 +9,8 @@ function VComponent(component, key, ownerComponent, preserve) {
 }
 
 VComponent.prototype = {
-  bC_: 2 };
-
+  bC_: 2
+};
 
 inherit(VComponent, VNode);
 

package/dist/runtime/vdom/VDocumentFragment.js

@@ -24,8 +24,8 @@ VDocumentFragment.prototype = {
 
   bz_: function (host) {
     return (host.ownerDocument || host).createDocumentFragment();
-  } };
-
+  }
+};
 
 inherit(VDocumentFragment, VNode);
 

package/dist/runtime/vdom/VElement.js

@@ -14,8 +14,8 @@ var NS_MATH = "http://www.w3.org/1998/Math/MathML";
 var NS_SVG = "http://www.w3.org/2000/svg";
 var DEFAULT_NS = {
   svg: NS_SVG,
-  math: NS_MATH };
-
+  math: NS_MATH
+};
 
 var FLAG_SIMPLE_ATTRS = 1;
 var FLAG_CUSTOM_ELEMENT = 2;
@@ -201,8 +201,8 @@ VElement.prototype = {
     // different namespaces
     var value = this.bH_[name];
     return value != null && value !== false;
-  } };
-
+  }
+};
 
 inherit(VElement, VNode);
 
@@ -213,8 +213,8 @@ var proto = VElementClone.prototype = VElement.prototype;
     get: function () {
       var value = this.bH_[name];
       return value !== false && value != null;
-    } });
-
+    }
+  });
 });
 
 defineProperty(proto, "q_", {
@@ -229,8 +229,8 @@ defineProperty(proto, "q_", {
     this.bH_.type === "radio" ?
     "on" :
     "";
-  } });
-
+  }
+});
 
 VElement.bN_ = function (attrs) {
   // By default this static method is a no-op, but if there are any

package/dist/runtime/vdom/VFragment.js

@@ -18,8 +18,8 @@ VFragment.prototype = {
     keysByDOMNode.set(fragment, this.bB_);
     vElementByDOMNode.set(fragment, this);
     return fragment;
-  } };
-
+  }
+};
 
 inherit(VFragment, VNode);
 

package/dist/runtime/vdom/VText.js

@@ -17,8 +17,8 @@ VText.prototype = {
 
   bt_: function () {
     return new VText(this.bV_);
-  } };
-
+  }
+};
 
 inherit(VText, VNode);
 

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

@@ -65,8 +65,8 @@ runtime.t = function (typeName) {
           });
         });
       }
-    } });
-
+    }
+  });
 
   return template;
 

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

@@ -55,8 +55,8 @@ var fragmentPrototype = {
     this.nodes.forEach(function (node) {
       this.detachedContainer.appendChild(node);
     }, this);
-  } };
-
+  }
+};
 
 function createFragmentNode(startNode, nextNode, parentNode) {
   var fragment = Object.create(fragmentPrototype);

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

@@ -100,7 +100,7 @@ SpecialElHandlers.prototype = {
         fromEl.selectedIndex = selected;
       }
     }
-  } };
-
+  }
+};
 
 module.exports = new SpecialElHandlers();

package/dist/taglib/index.js

@@ -46,4 +46,5 @@ exports.lookup = {
     } else {
       register(taglib, taglib.id);
     }
-  } };
+  }
+};

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

@@ -6,7 +6,7 @@
 
 # 10 Awesome Marko Features
 
-[Marko](http://markojs.com/) is a friendly and super fast UI library that makes
+[Marko](https://markojs.com/) is a friendly and super fast UI library that makes
 building web apps<br> fun! In celebration of rapidly approaching [5,000 stars on
 GitHub](https://github.com/marko-js/marko) (the ultimate open source vanity
 metric), here are 10 features that will make you more productive in no
@@ -89,7 +89,7 @@ Do you see references to “Marko” in the snippet above? Yeah, me neither.
 
 Is your component becoming too large? Do you prefer separating your CSS,
 JavaScript, and markup code? No problem. You can easily [rip out your code into
-multiple files](http://markojs.com/docs/class-components/#multi-file-components):
+multiple files](https://markojs.com/docs/class-components/#multi-file-components):
 
 ```
 components/
@@ -223,7 +223,7 @@ $ {
 Node.js is asynchronous. Browsers are asynchronous. Why should rendering be
 synchronous? Pass your promise along to your template and Marko will
 asynchronously render parts of your view. Turns out, [this is good for
-performance](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+performance](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
 
 ```marko
 $ const searchResultsPromise = searchService.performSearch(keywords);

package/docs/class-components.md

@@ -24,7 +24,7 @@ Marko makes it easy to keep your component’s class and styles next to the HTML
 
 - **View** - The HTML template for your UI component. Receives input properties and states, and renders to either server-side HTML or browser-side virtual DOM nodes.
 - **Client-side behavior** - A JavaScript `class` with methods and properties for initialization, event handling (including DOM events, custom events and lifecycle events), and state management.
-- **Styles** - Cascading StyleSheets, including support for CSS preprocessors like [Less](http://lesscss.org/) or [Sass](https://sass-lang.com/).
+- **Styles** - Cascading StyleSheets, including support for CSS preprocessors like [Less](https://lesscss.org/) or [Sass](https://sass-lang.com/).
 
 ## Server-side rendering
 

package/docs/express.md

@@ -2,42 +2,45 @@
 
 ## Quick Start
 
-```terminal
+```sh
 npm init marko -- --template vite-express
+# Or `npx create-marko --template vite-express`
 ```
 
-See the [the express sample](https://github.com/marko-js/examples/tree/master/examples/vite-express)
-project for a working example.
+See [Marko’s example projects](https://github.com/marko-js/examples) for working [Express](https://expressjs.com/) integration code, such as:
 
-## From Scratch
+- [`examples/vite-express`](https://github.com/marko-js/examples/tree/master/examples/vite-express)
+- [`examples/rollup-express`](https://github.com/marko-js/examples/tree/master/examples/rollup-express)
+- [`examples/webpack-express`](https://github.com/marko-js/examples/tree/master/examples/webpack-express)
 
-First install Marko and the express related dependencies:
+But if you want to do things the hard way…
 
-```terminal
-npm install marko @marko/express express --save
+## Doing things the hard way
+
+First, install Marko, Express, and the glue to hold them together:
+
+```sh
+npm install marko express @marko/express --save
 ```
 
 ### Skip the view engine
 
-The built in view engine for express may be asynchronous, but it doesn't support streaming (check out [Rediscovering Progressive HTML Rendering](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/) to see why this is so important). So instead we'll [bypass the view engine](https://strongloop.com/strongblog/bypassing-express-view-rendering-for-speed-and-modularity/) and use [`@marko/express`](https://github.com/marko-js/express/).
-
-### Usage
+Express’s builtin view engine may be asynchronous, but it doesn’t support streaming — see [Rediscovering Progressive HTML Rendering](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/) for why that’s important. So instead, we [bypass Express’s view engine](https://strongloop.com/strongblog/bypassing-express-view-rendering-for-speed-and-modularity/) to use `@marko/express` instead.
 
-The [`@marko/express`](https://github.com/marko-js/express/) adds a `res.marko` method to the express response object. This function works much like `res.render`, but doesn't impose the restrictions of the express view engine and allows you to take full advantage of Marko's streaming and modular approach to templates.
+[The `@marko/express` package](https://www.npmjs.com/package/@marko/express) adds a `res.marko()` method to [Express’s response object](https://expressjs.com/en/api.html#res). This method works like [`res.render()`](https://expressjs.com/en/api.html#res.render), but without the restrictions of Express’s view engine, letting you take full advantage of Marko’s streaming and modular template organization.
 
-By using `res.marko` you'll automatically have access to `req`, `res`, `app`, `app.locals`, and `res.locals` from within your Marko template and custom tags. These values are added to `out.global`.
+> **ProTip**: By using `res.marko()`, properties from [`app.locals`](https://expressjs.com/en/api.html#app.locals) and [`res.locals`](https://expressjs.com/en/api.html#res.locals) are automatically [available on `out.global`](https://markojs.com/docs/rendering/#global-data).
 
-```javascript
+```js
 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.use(markoPlugin()); // Enables `res.marko(template, input)`
 
 app.get("/", function (req, res) {
-  res.marko(Template, {
+  res.marko(template, {
     name: "Frank",
     count: 30,
     colors: ["red", "green", "blue"]
@@ -47,7 +50,17 @@ app.get("/", function (req, res) {
 app.listen(8080);
 ```
 
-### BYOB (Bring your own bundler)
+> **Note**: Older versions of `@marko/express` used to also attach Express’s `app`, `req`, and `res` objects onto `out.global`. This meant uncontrolled network data could cause new and exciting surprises in your app code. Nowadays we recommend explicitly accessing the specific pieces of the HTTP exchange you’re interested in, like this:
+>
+> ```js
+> app.get("/", function (req, res) {
+>   res.marko(template, {
+>     params: req.params,
+>     submitted: req.method === "POST" && req.body
+>   });
+> });
+> ```
+
+### BYOB (Bring Your Own Bundler)
 
-For the large portion of Marko's API a bundler is required. The example code above assumes that Marko templates can be loaded in your environment.
-Marko supports a number of bundlers, [take a look through our supported bundlers](#bundler-integrations) and pick what works best for you.
+Most of Marko’s API requires a bundler: the example code above assumes that `.marko` files can be `import`ed in your environment. [Check out Marko’s supported bundlers](https://markojs.com/docs/bundler-integrations-overview/) to see what works best for you.

package/docs/marko-vs-react.md

@@ -7,7 +7,7 @@
 > This article was published March 2017. Both frameworks have gone through several updates since. You can find the original ["Marko vs React: An In-depth Look" article here](https://hackernoon.com/marko-vs-react-an-in-depth-look-767de0a5f9a6)!
 
 In this article we will take an in-depth look at the differences and
-similarities between [Marko](http://markojs.com/) and React from the perspective
+similarities between [Marko](https://markojs.com/) and React from the perspective
 of the maintainers of Marko.
 
 On the surface, Marko and React have a lot in common and both are trying to
@@ -27,7 +27,7 @@ weight:
 Because the Marko JavaScript library is much smaller than React, it will require
 less time to load and parse and this will drastically improve page load times on
 slow connections or on older devices. Based on [our
-benchmarks](http://markojs.com/#benchmarks), Marko consistently outperforms
+benchmarks](https://markojs.com/#benchmarks), Marko consistently outperforms
 React by a significant margin on both the server and in the browser.
 
 ### Example
@@ -82,7 +82,7 @@ class Counter extends React.Component {
 }
 ```
 
-<span class="figcaption_hack">[▶ Try Online](http://codepen.io/mlrawlings/pen/wJXOWR?editors=0010)</span>
+<span class="figcaption_hack">[▶ Try Online](https://codepen.io/mlrawlings/pen/wJXOWR?editors=0010)</span>
 
 #### Marko
 
@@ -115,7 +115,7 @@ $ var count = state.count;
 ```
 
 <span class="figcaption_hack">[▶ Try
-Online](http://markojs.com/try-online/?gist=8fe46bc5866605aca0dfeec202604011)</span>
+Online](https://markojs.com/try-online/?gist=8fe46bc5866605aca0dfeec202604011)</span>
 
 ### Similarities
 
@@ -151,7 +151,7 @@ At a high level here are some differences:
   targets).
 - **Improved performance:** Marko supports asynchronous rendering with [early
   flushing of
-  HTML](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)
+  HTML](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)
   for improvements in actual and perceived page load times.
 - **Improved performance:** React requires an additional client-side re-render if
   a page is initially rendered on the server while Marko does not.
@@ -164,7 +164,7 @@ At a high level here are some differences:
 #### Differences in syntax
 
 - **Improved ease of use:** Marko uses the
-  [HTML-JS](http://markojs.com/docs/syntax/) syntax and the
+  [HTML-JS](https://markojs.com/docs/syntax/) syntax and the
   [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) syntax is offered
   for React.
 - **Improved ease of use:** Marko supports both a concise syntax and a familiar
@@ -246,9 +246,9 @@ At a high level here are some differences:
 - **Marko limitation:** Marko has no support for native mobile similar to React
   Native (although with Marko VDOM rendering, this is possible).
 - **Marko limitation:** Marko requires a JavaScript module bundler (such as
-  [Lasso](http://markojs.com/docs/lasso/),
-  [Webpack](http://markojs.com/docs/webpack/),
-  [Rollup](http://markojs.com/docs/rollup/)
+  [Lasso](https://markojs.com/docs/lasso/),
+  [Webpack](https://markojs.com/docs/webpack/),
+  [Rollup](https://markojs.com/docs/rollup/)
   since Marko UI components compile down to JavaScript modules. (we consider using
   a JavaScript module bundler a best practice)
 
@@ -261,7 +261,7 @@ between Marko and React.
 
 Both Marko and React JSX allow HTML markup and JavaScript to be combined into a
 single file and both support building web applications based on UI components.
-Marko utilizes an [HTML-JS syntax](http://markojs.com/docs/syntax/) while most
+Marko utilizes an [HTML-JS syntax](https://markojs.com/docs/syntax/) while most
 React apps use the JSX syntax.
 
 > React JSX makes JavaScript more like HTML and Marko makes HTML more like
@@ -372,7 +372,7 @@ documentation](https://facebook.github.io/react/docs/introducing-jsx.html#specif
 > For example, `class` becomes `className` in JSX, and `tabindex` becomes `tabIndex`.
 
 As a result of this caveat for React, [tools for converting HTML to JSX
-exist](http://magic.reactjs.net/htmltojsx.htm).
+exist](https://magic.reactjs.net/htmltojsx.htm).
 
 #### React JSX
 
@@ -679,7 +679,7 @@ export default function HelloGoodBye(props) {
 #### Marko
 
 Marko supports a mechanism for [automatically discovering custom
-tags](http://markojs.com/docs/custom-tags/#discovering-tags) for UI components
+tags](https://markojs.com/docs/custom-tags/#discovering-tags) for UI components
 based on the project directory structure. Marko walks up the directory tree to
 discover all directories and it will also automatically discover custom tags
 exported by installed packages. This approach negates the need for explicitly
@@ -710,7 +710,7 @@ tags.
 ### Async
 
 Even after rendering has started, Marko allows parts of the view to be rendered
-asynchronously using the [`<await>`](http://markojs.com/docs/core-tags#await)
+asynchronously using the [`<await>`](https://markojs.com/docs/core-tags#await)
 tag as shown in the following Marko template:
 
 ```marko
@@ -828,7 +828,7 @@ your code readable.
 ### Why Marko?
 
 Here are just a few reasons you should consider using
-[Marko](http://markojs.com/) over React:
+[Marko](https://markojs.com/) over React:
 
 - Marko requires much less boilerplate.
 - Marko has much better performance based on our benchmarks.
@@ -849,6 +849,6 @@ Here are just a few reasons you should consider using
   [Discord](https://discord.gg/RFGxYGs).
 
 Interested in learning more about Marko? If so, you can get additional
-information on the [Marko website](http://markojs.com/). Join the conversation
+information on the [Marko website](https://markojs.com/). Join the conversation
 and contribute on [GitHub](https://github.com/marko-js/marko) and follow us on
 [Twitter](https://twitter.com/MarkoDevTeam).

package/docs/styles.md

@@ -12,7 +12,7 @@ style {
 <div>Hello World</div>
 ```
 
-These blocks add global css to the page. The above example will not style just the `<div>` in the component, but all divs on the page. Because of this we recommend following a naming convention such as [BEM](http://getbem.com/introduction/). Marko will likely provide a way to automatically scope these styles to the current component [in the future](https://github.com/marko-js/marko/issues/666).
+These blocks add global css to the page. The above example will not style just the `<div>` in the component, but all divs on the page. Because of this we recommend following a naming convention such as [BEM](https://getbem.com/introduction/). Marko will likely provide a way to automatically scope these styles to the current component [in the future](https://github.com/marko-js/marko/issues/666).
 
 > **Note:** Style blocks (unlike `<style>` tags) do not support `${placeholders}` and must be static.
 

package/docs/syntax.md

@@ -257,7 +257,7 @@ _HTML Output:_
 
 ### Shorthand attributes
 
-Marko provides a shorthand for declaring classes and ids on an element:
+Marko provides a shorthand for declaring classes and ids on an element, including interpolation. Given `size` is the string `small`:
 
 _Marko Source:_
 
@@ -265,6 +265,7 @@ _Marko Source:_
 <div.my-class/>
 <span#my-id/>
 <button#submit.primary.large/>
+<button.button--${size}></button>
 ```
 
 Renders the following HTML:
@@ -276,6 +277,7 @@ _HTML Output:_
 <div class="my-class"></div>
 <span id="my-id"></span>
 <button id="submit" class="primary large"></button>
+<button class="button--small"></button>
 ```
 
 ## Parameters

package/docs/troubleshooting-streaming.md

@@ -16,7 +16,7 @@
 
 ### NGiNX
 
-Most of NGiNX’s relevant parameters are inside [its builtin `http_proxy` module](http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_buffering):
+Most of NGiNX’s relevant parameters are inside [its builtin `http_proxy` module](https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_buffering):
 
 ```nginx
 proxy_http_version 1.1; # 1.0 by default

package/docs/why-is-marko-fast.md

@@ -6,11 +6,11 @@
 
 > This article was published in May 2017. You can find the original ["Why is Marko Fast?" article here](https://medium.com/@psteeleidem/why-is-marko-fast-a20796cb8ae3)!
 
-At eBay we are using [Marko](http://markojs.com/) to render over a billion
+At eBay we are using [Marko](https://markojs.com/) to render over a billion
 requests every day and this has required us to finely tune Marko, our open
 source UI library. We have heavily optimized Marko for fast rendering, [advanced
 performance
-techniques](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)
+techniques](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)
 and to achieve a minimal page weight (~10kb gzipped). Performance is only one
 concern because we have also had to scale Marko to support development across
 hundreds of teams in a way that allows developers to efficiently create

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "marko",
-    "version": "5.21.11",
+    "version": "5.22.1",
     "license": "MIT",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "dependencies": {
-        "@marko/compiler": "^5.22.10",
-        "@marko/translator-default": "^5.21.8",
+        "@marko/compiler": "^5.23.1",
+        "@marko/translator-default": "^5.22.1",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",
@@ -27,7 +27,7 @@
     "bin": {
         "markoc": "bin/markoc"
     },
-    "homepage": "http://markojs.com/",
+    "homepage": "https://markojs.com/",
     "logo": {
         "url": "https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-small.png"
     },