marko 5.37.0 → 6.0.0-3.4

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

@@ -1,239 +0,0 @@
-# Why is Marko Fast?
-
-<a href="https://medium.com/@psteeleidem/why-is-marko-fast-a20796cb8ae3">
-  <img src="https://user-images.githubusercontent.com/1958812/28104838-d0182f48-6691-11e7-808d-d1ae2d0fed6d.png" alt="Marko logo" width="100%" />
-</a><br />
-
-> 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](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](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
-maintainable and robust web apps.
-
-We have created [our own
-benchmarks](https://github.com/marko-js/isomorphic-ui-benchmarks) and we have
-[added Marko to other
-benchmarks](https://github.com/raxjs/server-side-rendering-comparison/pull/11),
-but benchmarks cannot always be trusted. While we make every effort to be fair
-with our benchmarks, what matters most is performance in real world applications
-as opposed to focusing on micro benchmarks. This is one reason that the V8 team
-has switched to [a new methodology to measure and understand real-world
-JavaScript
-performance](https://v8project.blogspot.com/2016/12/how-v8-measures-real-world-performance.html).
-
-Similarly, we’ve taken a look at how our developers are _actually_ writing their
-Marko components and have found patterns that could be further optimized.
-Instead of focusing on benchmarks in this article, I want to focus on the
-details of optimizations that we have applied to Marko.
-
-### Multiple Compilation Outputs
-
-Marko is an isomorphic UI library that runs on both the server and in the
-browser. As [Michael Rawlings](https://medium.com/@mlrawlings) mentioned in
-“[Server-side Rendering
-Shootout](https://hackernoon.com/server-side-rendering-shootout-with-marko-preact-rax-react-and-vue-25e1ae17800f)”,
-when rendering on the server, Marko renders directly to a string representation
-of the document (HTML) that can be sent as the HTTP response.
-
-When rendering in the browser, an HTML string would have to be parsed in order
-to update the DOM. For this reason, Marko compiles a view to a program that
-renders directly to a virtual document (VDOM) tree that can be used to
-efficiently update the real DOM when targeting the browser.
-
-Given the following template:
-
-```marko
-<div>Hello ${input.name}!</div>
-```
-
-#### Compiled for the server
-
-The compiled output is optimized for streaming HTML output on the server:
-
-```js
-var marko_template = require("marko/html").t(__filename),
-  marko_helpers = require("marko/runtime/html/helpers"),
-  marko_escapeXml = marko_helpers.x;
-
-function render(input, out) {
-  out.w("<div>Hello " + marko_escapeXml(input.name) + "!</div>");
-}
-```
-
-#### Compiled for the browser
-
-<!-- prettier-ignore -->
-```js
-var marko_template = require("marko/vdom").t(__filename);
-
-function render(input, out) {
-  out
-    .e("DIV", null, 3)
-    .t("Hello ")
-    .t(input.name)
-    .t("!");
-}
-```
-
-The compiled output is optimized for virtual DOM rendering in the browser:
-
-### Modular Runtime
-
-The Marko runtime is not distributed as a single JavaScript file. Instead, the
-Marko compiler generates a JavaScript module that will only import the parts of
-the runtime that are actually needed. This allows us to add new features to
-Marko without bloating existing applications. For example, given the following
-template:
-
-```marko
-$ var color = 'red';
-<div style={backgroundColor: color}></div>
-```
-
-In the above example, extra runtime code is needed to render the `style` attribute
-based on the JavaScript object that is provided. The compiled code that imports
-the `styleAttr` helper is shown below:
-
-```js
-var marko_styleAttr = require("marko/runtime/vdom/helper-styleAttr");
-
-function render(input, out) {
-  var color = "red";
-  out.e(
-    "DIV",
-    {
-      style: marko_styleAttr({
-        backgroundColor: color,
-      }),
-    },
-    0,
-    4,
-  );
-}
-```
-
-### High performance server-side rendering
-
-Compared to solutions based on JSX that exclusively do virtual DOM rendering,
-Marko has a huge advantage for server-side rendering. When rendering to a
-virtual DOM tree on the server it’s a two-step process to render HTML:
-
-- First pass to produce an entire virtual DOM tree in memory
-- Second pass to serialize the virtual DOM tree to an HTML string that can then be
-  sent over the wire (this requires traversing the entire tree structure)
-
-In contrast, Marko renders directly to an HTML stream in a single pass. There is
-no intermediate tree data structure.
-
-### Compile-time optimization of static sub-trees
-
-Given the following template:
-
-```marko
-<div>This is a <strong>static</strong> node</div>
-```
-
-Marko will recognize that the template fragment produces the same output every
-time and it will thus create the virtual DOM node once as shown in the following
-compiled output:
-
-```js
-var marko_node0 = marko_createElement("DIV", null, 3, ...)
-  .t("This is a ")
-  .e("STRONG", null, 1)
-    .t("static")
-  .t(" node");
-
-function render(input, out) {
-  out.n(marko_node0);
-}
-```
-
-Rendering a static sub-tree has virtually zero cost. In addition, Marko will
-skip diffing/patching static sub-trees.
-
-Similarly, on the server, Marko will merge static parts of the template into a
-single string:
-
-```js
-function render(input, out) {
-  out.w("<div>This is a <strong>static</strong> node</div>");
-}
-```
-
-### Compile-time optimization of static attributes
-
-Marko will also optimize static attributes on dynamic elements.
-
-Given the following template:
-
-```marko
-<div.hello>Hello ${input.name}!</div>
-```
-
-Marko will produce the following compiled output:
-
-<!-- prettier-ignore -->
-```js
-var marko_attrs0 = {
-  class: "hello"
-};
-
-function render(input, out) {
-  out
-    .e("DIV", marko_attrs0, 3)
-    .t("Hello ")
-    .t(input.name)
-    .t("!");
-}
-```
-
-Notice that the attributes object is only created once and it is used for every
-render. In addition, no diffing/patching will happen for static attributes.
-
-### Smart compiler
-
-With Marko we favor doing as much at compile-time as possible. This has made our
-compiler more complex, but it gives us significant gains at runtime. We have
-~90% code coverage and over 2,000 tests to ensure that the compiler is working
-correctly. In addition, in many cases the Marko compiler provides hints to the
-runtime for a given template so that the runtime can optimize for specific
-patterns. For example, Marko recognizes if an HTML element only has `class`/`id`/`style` defined
-and the runtime optimizes for these virtual DOM nodes when doing
-diffing/patching (the Marko compiler generates code that flags simple virtual
-DOM nodes for targeted diffing/patching logic).
-
-### Event delegation
-
-If you are building a UI component you will likely need to write code to handle
-various DOM events (`click`, `submit`, etc.). It is common for developers to write code that
-adds DOM event listeners using `dom.addEventListener(...)` or using a library such as jQuery. You can still
-do that when building UI components using Marko, but there is overhead in
-attaching listeners when lots of components are being initialized. Instead,
-Marko recommends using declarative event binding as shown below:
-
-```marko
-<button type="button" on-click("handleClick")>
-  Click Me
-</button>
-```
-
-When using declarative event binding, no DOM event listeners are actually
-attached for events that bubble. Instead, Marko attaches a single listener on
-the root DOM element of the page for each DOM event that bubbles (done at
-startup). When Marko receives an event at the root it handles delegating the
-event to the appropriate components that are interested in that event. This is
-done by looking at the `event.target` property to see where the event originated and then
-walking up the tree to find components that need to be notified. As a result,
-there is slightly more work that is done when a DOM event is captured at the
-root, but this approach uses much less memory and reduces the amount of work
-that is done during initialization. The extra overhead of delegating events to
-components will not be noticeable so it is a very beneficial optimization.
-
-_Cover image credit: [Superhero by Gan Khoon Lay from the Noun Project](https://thenounproject.com/search/?q=superhero&i=690775)_

package/env.js

@@ -1,7 +0,0 @@
-var env = process.env || {};
-var NODE_ENV = env.NODE_ENV;
-var MARKO_DEBUG = env.MARKO_DEBUG;
-
-exports.isDebug = !(MARKO_DEBUG
-  ? MARKO_DEBUG === "false" || MARKO_DEBUG === "0"
-  : NODE_ENV && NODE_ENV !== "development");

package/helpers/README.md

@@ -1,3 +0,0 @@
-# Marko Helpers
-
-This directory contains helpers that were deprecated in Marko v3. Marko v4/5 no longer adds these helpers to every compiled template, but you can still import them if needed.

package/helpers/empty.js

@@ -1,4 +0,0 @@
-var notEmpty = require("./notEmpty");
-module.exports = function empty(o) {
-  return !notEmpty(o);
-};

package/helpers/notEmpty.js

@@ -1,11 +0,0 @@
-module.exports = function (o) {
-  if (o == null) {
-    return false;
-  } else if (Array.isArray(o)) {
-    return !!o.length;
-  } else if (o === "") {
-    return false;
-  }
-
-  return true;
-};

package/index-browser.marko

@@ -1,15 +0,0 @@
-<module-code(function(require, opts) {
-    var file = `"./${opts.optimize ? "dist" : "src"}"`;
-
-    if (opts.modules === "cjs") {
-        return `module.exports = require(${file});\n`;
-    } else {
-        return `export * from ${file};\n`;
-    }
-})/>
-
-// What's going on here? We are using Marko to do JavaScript code generation
-// during the module bundling phase to conditionally export either the
-// "src" or the "dist" folder based on whether or not we are doing a
-// debug or non-debug build. We are using Marko since we know the Marko compiler
-// is enabled already (no extra babel transform required).

package/index.d.ts

@@ -1,375 +0,0 @@
-import "./tags-html";
-
-declare module "*.marko" {
-  const template: Marko.Template;
-  export default template;
-}
-
-declare global {
-  namespace NodeJS {
-    interface ReadableStream {}
-  }
-
-  namespace Marko {
-    /** A mutable global object for the current render. */
-    export interface Global {
-      /** A list of globals that should be serialized to the browser. */
-      serializedGlobals?: Record<string, boolean>;
-      /** A CSP Nonce to add to each script output from Marko. */
-      cspNonce?: string;
-      /** Used to uniquely identify a instance of a Marko runtime. */
-      runtimeId?: string;
-      /** Used for rendering multiple Marko templates in a single hydrated page. */
-      componentIdPrefix?: string;
-      [attr: PropertyKey]: unknown;
-    }
-
-    export type TemplateInput<Input> = Input & {
-      $global?: Global;
-    };
-
-    export interface Out<Component extends Marko.Component = Marko.Component>
-      extends PromiseLike<RenderResult<Component>> {
-      /** The underlying ReadableStream Marko is writing into. */
-      stream: unknown;
-      /** A mutable global object for the current render. */
-      global: Global;
-      /** Disable all async rendering. Will error if something beings async. */
-      sync(): void;
-      /** Returns true if async rendering is disabled. */
-      isSync(): boolean;
-      /** Write unescaped text at the current stream position. */
-      write(val: string | void): this;
-      /** Write javascript content to be merged with the scripts Marko sends out on the next flush. */
-      script(val: string | void): this;
-      /** Returns the currently rendered html content. */
-      toString(): string;
-      /** Starts a new async/forked stream. */
-      beginAsync(options?: {
-        name?: string;
-        timeout?: number;
-        last?: boolean;
-      }): Out;
-      /** Marks the current stream as complete (async streams may still be executing). */
-      end(val?: string | void): this;
-      emit(eventName: PropertyKey, ...args: any[]): boolean;
-      on(eventName: PropertyKey, listener: (...args: any[]) => any): this;
-      once(eventName: PropertyKey, listener: (...args: any[]) => any): this;
-      prependListener(
-        eventName: PropertyKey,
-        listener: (...args: any[]) => any,
-      ): this;
-      removeListener(
-        eventName: PropertyKey,
-        listener: (...args: any[]) => any,
-      ): this;
-      /** Register a callback executed when the last async out has completed. */
-      onLast(listener: (next: () => void) => unknown): this;
-      /** Pipe Marko's stream to another stream. */
-      pipe(stream: unknown): this;
-      /** Emits an error on the stream. */
-      error(e: Error): this;
-      /** Schedules a Marko to flush buffered html to the underlying stream. */
-      flush(): this;
-      /** Creates a detached out stream (used for out of order flushing). */
-      createOut(): Out;
-      /** Write escaped text at the current stream position. */
-      text(val: string | void): void;
-    }
-
-    /** Body content created from by a component, typically held in an object with a renderBody property. */
-
-    export interface Body<
-      in Params extends readonly any[] = [],
-      out Return = void,
-    > {}
-
-    /** Valid data types which can be passed in as a <${dynamic}/> tag name. */
-    export type Renderable =
-      | { renderBody: Body<any, any> | Template | string }
-      | Body<any, any>
-      | Template
-      | string;
-
-    /** Extract the return tag type from a renderBody. */
-    export type BodyReturnType<B> =
-      B extends Body<any, infer Return> ? Return : never;
-
-    /** Extract the tag parameter types received by a renderBody. */
-    export type BodyParameters<B> =
-      B extends Body<infer Params, any> ? Params : never;
-
-    export class Component<Input = unknown, State = unknown>
-      implements Emitter
-    {
-      /** A unique id for this instance. */
-      public readonly id: string;
-      /** The top level element rendered by this instance. */
-      public readonly el: Element | void;
-      /** The attributes passed to this instance. */
-      public readonly input: Input;
-      /** @deprecated */
-      public readonly els: Element[];
-      /** Mutable state that when changed causes a rerender. */
-      state: State;
-
-      /** Returns the amount of event handlers listening to a specific event. */
-      listenerCount(eventName: PropertyKey): number;
-      /**
-       * Used to wrap an existing event emitted and ensure that all events are
-       * cleaned up once this component is destroyed
-       * */
-      subscribeTo(
-        emitter: unknown,
-      ): Omit<Emitter, "listenerCount" | "prependListener" | "emit">;
-      /** Emits an event on the component instance. */
-      emit(eventName: PropertyKey, ...args: any[]): boolean;
-      /** Listen to an event on the component instance. */
-      on(eventName: PropertyKey, listener: (...args: any[]) => any): this;
-      /** Listen to an event on the component instance once. */
-      once(eventName: PropertyKey, listener: (...args: any[]) => any): this;
-      /** Listen to an event on the component instance before all other listeners. */
-      prependListener(
-        eventName: PropertyKey,
-        listener: (...args: any[]) => any,
-      ): this;
-      /** Remove a listener from the component instance. */
-      removeListener(
-        eventName: PropertyKey,
-        listener: (...args: any[]) => any,
-      ): this;
-      /** Remove all listeners from the component instance. */
-      removeAllListeners(eventName?: PropertyKey): this;
-      /** Removes the component instance from the DOM and cleans up all active event handlers including all children. */
-      destroy(): void;
-      /** Schedule an update (similar to if a state had been changed). */
-      forceUpdate(): void;
-      /** Generates a unique id derived from the current unique instance id (similar to :scoped in the template). */
-      elId(key?: string, index?: number): string;
-      /** @alias elId */
-      getElId(key?: string, index?: number): string;
-      /** Gets an element reference by its `key` attribute in the template. */
-      getEl<T extends Element | void = Element | void>(
-        key?: string,
-        index?: number,
-      ): T;
-      /** Gets all element references by their `key` attribute in the template. */
-      getEls<T extends Element[] = Element[]>(key: string): T;
-      /** Gets a component reference by its `key` attribute in the template. */
-      getComponent<T extends Component | void = Component | void>(
-        key: string,
-        index?: number,
-      ): T;
-      /** Gets all component references by their `key` attribute in the template. */
-      getComponents<T extends Component[] = Component[]>(key: string): T;
-      /** True if this instance has been removed from the dom. */
-      /** True if this instance is scheduled to rerender. */
-      isDestroyed(): boolean;
-      /** Replace the entire state object with a new one, removing old properties. */
-      replaceState(state: this["state"]): void;
-      /**
-       * Update a property on this.state (should prefer mutating this.state directly).
-       * When passed an object as the first argument, it will be merged into the state.
-       */
-      setState<Key extends PropertyKey>(
-        name: Key & keyof this["state"],
-        value: (this["state"] & Record<PropertyKey, unknown>)[Key],
-      ): void;
-      setState(value: Partial<this["state"]>): void;
-
-      /** Schedules an update related to a specific state property and optionally updates the value. */
-      setStateDirty<Key extends PropertyKey>(
-        name: Key & keyof this["state"],
-        value?: (this["state"] & Record<PropertyKey, unknown>)[Key],
-      ): void;
-      /** Synchronously flush any scheduled updates. */
-      update(): void;
-      /** Appends the dom for the current instance to a parent DOM element. */
-      appendTo(target: ParentNode): this;
-      /** Inserts the dom for the current instance after a sibling DOM element. */
-      insertAfter(target: ChildNode): this;
-      /** Inserts the dom for the current instance before a sibling DOM element. */
-      insertBefore(target: ChildNode): this;
-      /** Prepends the dom for the current instance to a parent DOM element. */
-      prependTo(target: ParentNode): this;
-      /** Replaces an existing DOM element with the dom for the current instance. */
-      replace(target: ChildNode): this;
-      /** Replaces the children of an existing DOM element with the dom for the current instance. */
-      replaceChildrenOf(target: ParentNode): this;
-      // /** Called when the component is firsted created. */
-      // onCreate?(input: this["input"], out: Marko.Out): void;
-      // /** Called every time the component receives input from it's parent. */
-      // onInput?(input: this["input"], out: Marko.Out): void | this["input"];
-      // /** Called after a component has successfully rendered, but before it's update has been applied to the dom. */
-      // onRender?(out: Marko.Out): void;
-      // /** Called after the first time the component renders and is attached to the dom. */
-      // onMount?(): void;
-      // /** Called when a components render has been applied to the DOM (excluding when it is initially mounted). */
-      // onUpdate?(): void;
-      // /** Called when a component is destroyed and removed from the dom. */
-      // onDestroy?(): void;
-    }
-
-    /** The top level api for a Marko Template. */
-    export abstract class Template<Input = unknown, Return = unknown> {
-      /** Creates a Marko compatible output stream. */
-      createOut(): Out;
-
-      /**
-       * The folowing types are processed up by the @marko/language-tools
-       * and inlined into the compiled template.
-       *
-       * This is done to support generics on each of these methods
-       * until TypeScript supports higher kinded types.
-       *
-       * https://github.com/microsoft/TypeScript/issues/1213
-       */
-
-      /** @marko-overload-start */
-      /** Asynchronously render the template. */
-      abstract render(
-        input: Marko.TemplateInput<Input>,
-        stream?: {
-          write: (chunk: string) => void;
-          end: (chunk?: string) => void;
-        },
-      ): Marko.Out<Marko.Component>;
-
-      /** Asynchronously render the template in buffered mode. */
-      abstract render(
-        input: Marko.TemplateInput<Input>,
-        cb?: (
-          err: Error | null,
-          result: Marko.RenderResult<Marko.Component>,
-        ) => void,
-      ): Marko.Out<Marko.Component>;
-
-      /** Synchronously render the template. */
-      abstract renderSync(
-        input: Marko.TemplateInput<Input>,
-      ): Marko.RenderResult<Marko.Component>;
-
-      /** Synchronously render a template to a string. */
-      abstract renderToString(input: Marko.TemplateInput<Input>): string;
-
-      /** Render a template and return a stream.Readable in nodejs or a ReadableStream in a web worker environment. */
-      abstract stream(
-        input: Marko.TemplateInput<Input>,
-      ): ReadableStream<string> & NodeJS.ReadableStream;
-      /** @marko-overload-end */
-    }
-
-    export interface RenderResult<
-      out Component extends Marko.Component = Marko.Component,
-    > {
-      /** Returns the component created as a result of rendering the template. */
-      getComponent(): Component;
-      getComponents(selector?: any): any;
-      /** Triggers the mount lifecycle of a component without necessarily attaching it to the DOM. */
-      afterInsert(host?: any): this;
-      /** Gets the DOM node rendered by a template. */
-      getNode(host?: any): Node;
-      /** Gets the HTML output of the rendered template. */
-      toString(): string;
-      /** Appends the dom of the rendered template to a parent DOM element. */
-      appendTo(target: ParentNode): this;
-      /** Inserts the dom of the rendered template after a sibling DOM element. */
-      insertAfter(target: ChildNode): this;
-      /** Inserts the dom of the rendered template before a sibling DOM element. */
-      insertBefore(target: ChildNode): this;
-      /** Prepends the dom of the rendered template to a parent DOM element. */
-      prependTo(target: ParentNode): this;
-      /** Replaces an existing DOM element with the dom of the rendered template. */
-      replace(target: ChildNode): this;
-      /** Replaces the children of an existing DOM element with the dom of the rendered template. */
-      replaceChildrenOf(target: ParentNode): this;
-      out: Out<Component>;
-      /** @deprecated */
-      document: any;
-      /** @deprecated */
-      getOutput(): string;
-      /** @deprecated */
-      html: string;
-      /** @deprecated */
-      context: Out<Component>;
-    }
-
-    export interface Emitter {
-      listenerCount(eventName: PropertyKey): number;
-      emit(eventName: PropertyKey, ...args: any[]): boolean;
-      on(eventName: PropertyKey, listener: (...args: any[]) => any): this;
-      once(eventName: PropertyKey, listener: (...args: any[]) => any): this;
-      prependListener(
-        eventName: PropertyKey,
-        listener: (...args: any[]) => any,
-      ): this;
-      removeListener(
-        eventName: PropertyKey,
-        listener: (...args: any[]) => any,
-      ): this;
-      removeAllListeners(eventName?: PropertyKey): this;
-    }
-
-    export type AttrTag<T> = T & {
-      [Symbol.iterator](): Iterator<T>;
-    };
-
-    /**
-     * @deprecated Prefer to use AttrTag
-     */
-    export type RepeatableAttrTag<T> = AttrTag<T>;
-
-    export interface NativeTag<
-      Input extends Record<string, any>,
-      Return extends Element,
-    > {
-      input: Input;
-      return: { value: () => Return };
-    }
-    export interface NativeTags {
-      [name: string]: NativeTag<Record<string, any>, Element>;
-    }
-
-    export type Input<Name> = 0 extends 1 & Name
-      ? any
-      : Name extends string
-        ? Name extends keyof NativeTags
-          ? NativeTags[Name]["input"]
-          : Record<string, unknown>
-        : Name extends
-              | Template<infer Input, any>
-              | { _(): () => (input: infer Input) => any }
-          ? Input
-          : Name extends Body<infer Args, any>
-            ? Args extends {
-                length: infer Length;
-              }
-              ? number extends Length
-                ? Args[0] | undefined
-                : 0 extends Length
-                  ? undefined
-                  : Args[0]
-              : never
-            : never;
-
-    export type Return<Name> = 0 extends 1 & Name
-      ? any
-      : Name extends string
-        ? Name extends keyof NativeTags
-          ? NativeTags[Name]["return"]
-          : () => Element
-        : Name extends
-              | { _(): () => (input: any) => { return: infer Return } }
-              | Template<any, infer Return>
-              | Body<any, infer Return>
-          ? Return
-          : never;
-
-    /** @deprecated @see {@link Marko.Input} */
-    export type NativeTagInput<Name extends keyof NativeTags> =
-      NativeTags[Name]["input"];
-    /** @deprecated @see {@link Marko.Return} */
-    export type NativeTagReturn<Name extends keyof NativeTags> =
-      NativeTags[Name]["return"];
-  }
-}

package/index.js

@@ -1,7 +0,0 @@
-var isDebug = require("./env").isDebug;
-
-if (isDebug) {
-  module.exports = require("./src/");
-} else {
-  module.exports = require("./dist/");
-}

package/legacy-components-browser.marko

@@ -1,15 +0,0 @@
-<module-code(function(require, opts) {
-    var file = `"./${opts.optimize ? "dist" : "src"}/runtime/components/legacy"`;
-
-    if (opts.modules === "cjs") {
-        return `module.exports = require(${file});\n`;
-    } else {
-        return `export { default } from ${file};\nexport * from ${file};\n`;
-    }
-})/>
-
-// What's going on here? We are using Marko to do JavaScript code generation
-// during the module bundling phase to conditionally export either the
-// "src" or the "dist" folder based on whether or not we are doing a
-// debug or non-debug build. We are using Marko since we know the Marko compiler
-// is enabled already (no extra babel transform required).