marko 5.37.6 → 6.0.0-3.12

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.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).

package/legacy-components.js

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

package/node-require.js

@@ -1,8 +0,0 @@
-// TODO: Should deprecate and extract into @marko/register
-var isDebug = require("./env").isDebug;
-
-if (isDebug) {
-  module.exports = require("./src/node-require");
-} else {
-  module.exports = require("./dist/node-require");
-}

package/src/build.json

@@ -1,3 +0,0 @@
-{
-  "isDebug": true
-}

package/src/compiler/config.js

@@ -1,45 +0,0 @@
-var config;
-
-var g = typeof window === "undefined" ? global : window;
-
-if (g.__MARKO_CONFIG) {
-  config = g.__MARKO_CONFIG;
-} else {
-  config = g.__MARKO_CONFIG = {
-    // The default output mode for compiled templates
-    output: "html",
-
-    /**
-     * Whether the version should be written to the template as a comment e.g.
-     * // Compiled using marko@4.0.0 - DO NOT EDIT
-     */
-    writeVersionComment: true,
-
-    /**
-     * Whether unrecognized tags should be ignored or not. This flag will
-     * be enabled by default when compiling XML.
-     */
-    ignoreUnrecognizedTags: false,
-
-    /**
-     * Whether source maps should be output with the compiled templates.
-     * When `true` a `map` property will be available on the compile result.
-     * When `"inline"` the sourcemap will be inlined as a comment in the output code.
-     * When `"both"` both of the above will be used.
-     */
-    sourceMaps: false,
-
-    /**
-     * This option inlines all of the meta data in the template.
-     * You can also access this metadata via `compile(...).meta`.
-     * This API is sticking around for compatibility purposes.
-     */
-    meta: true,
-  };
-
-  if (process.env.MARKO_CONFIG) {
-    Object.assign(config, JSON.parse(process.env.MARKO_CONFIG));
-  }
-}
-
-module.exports = config;

package/src/compiler/index.js

@@ -1,164 +0,0 @@
-"use strict";
-
-var ok = require("assert").ok;
-var fs = require("fs");
-
-// eslint-disable-next-line no-constant-binary-expression
-var complain = "MARKO_DEBUG" && require("complain");
-var compiler = require("@marko/compiler");
-var extend = require("raptor-util/extend");
-var taglib = require("../taglib");
-var globalConfig = require("./config");
-var defaults = extend({}, globalConfig);
-
-// eslint-disable-next-line no-constant-condition
-if ("MARKO_DEBUG") {
-  if (
-    require.main &&
-    require.main.filename !== require.resolve("../../bin/markoc")
-  ) {
-    complain(
-      "Using `marko/compiler` has been deprecated, please upgrade to the `@marko/compiler` module.",
-    );
-  }
-}
-
-var defaultOptionsExportDefinition = {
-  get: function () {
-    return globalConfig;
-  },
-  enumerable: true,
-  configurable: false,
-};
-
-Object.defineProperties(exports, {
-  defaultOptions: defaultOptionsExportDefinition,
-  config: defaultOptionsExportDefinition,
-});
-
-function configure(newConfig) {
-  if (!newConfig) {
-    newConfig = {};
-  }
-
-  globalConfig = extend({}, defaults);
-  extend(globalConfig, newConfig);
-
-  compiler.configure(newConfig);
-}
-
-function resultCompat({ code, meta, map }, options = {}) {
-  if (options.sourceOnly !== false) {
-    return code;
-  } else {
-    return { code, meta, map };
-  }
-}
-
-function _compile(src, filename, userConfig, callback) {
-  ok(filename, '"filename" argument is required');
-  ok(typeof filename === "string", '"filename" argument should be a string');
-  var options = {};
-
-  extend(options, globalConfig);
-
-  if (userConfig) {
-    extend(options, userConfig);
-  }
-
-  if (callback) {
-    compiler.compile(src, filename, options).then(
-      (result) => callback(null, resultCompat(result, options)),
-      (error) => callback(error),
-    );
-  } else {
-    return resultCompat(compiler.compileSync(src, filename, options), options);
-  }
-}
-
-function compile(src, filename, options, callback) {
-  if (typeof options === "function") {
-    callback = options;
-    options = null;
-  }
-
-  options = options || {};
-  options.sourceOnly = options.sourceOnly !== false;
-
-  return _compile(src, filename, options, callback);
-}
-
-function compileForBrowser(src, filename, options, callback) {
-  if (typeof options === "function") {
-    callback = options;
-    options = null;
-  }
-
-  options = extend(
-    {
-      output: "dom",
-      meta: false,
-      sourceOnly: false,
-    },
-    options,
-  );
-
-  return compile(src, filename, options, callback);
-}
-
-function compileFile(filename, options, callback) {
-  if (typeof options === "function") {
-    callback = options;
-    options = null;
-  }
-
-  options = options || {};
-  options.sourceOnly = options.sourceOnly !== false;
-
-  if (callback) {
-    fs.readFile(filename, { encoding: "utf8" }, function (err, templateSrc) {
-      if (err) {
-        return callback(err);
-      }
-
-      _compile(templateSrc, filename, options, callback);
-    });
-  } else {
-    let templateSrc = fs.readFileSync(filename, { encoding: "utf8" });
-    return _compile(templateSrc, filename, options, callback);
-  }
-}
-
-function compileFileForBrowser(filename, options, callback) {
-  if (typeof options === "function") {
-    callback = options;
-    options = null;
-  }
-
-  options = extend({ output: "dom", meta: false, sourceOnly: false }, options);
-  return compileFile(filename, options, callback);
-}
-
-exports.compileFile = compileFile;
-exports.compile = compile;
-exports.compileForBrowser = compileForBrowser;
-exports.compileFileForBrowser = compileFileForBrowser;
-
-exports.configure = configure;
-
-exports.taglibLookup = taglib.lookup;
-exports.taglibLoader = taglib.loader;
-exports.taglibFinder = taglib.finder;
-exports.buildTaglibLookup = taglib.lookup.buildLookup;
-exports.clearCaches = function clearCaches() {
-  compiler._clearDefaults();
-  taglib.clearCache();
-};
-
-exports.registerTaglib = function (filePath) {
-  ok(typeof filePath === "string", '"filePath" should be a string');
-  taglib.registerFromFile(filePath);
-  exports.clearCaches();
-};
-
-exports.isVDOMSupported = true;

package/src/compiler/modules.js

@@ -1,5 +0,0 @@
-"use strict";
-
-if (typeof document === "undefined") {
-  exports.require = require;
-}

package/src/core-tags/.eslintrc

@@ -1,5 +0,0 @@
-{
-    "env": {
-        "browser": true
-    }
-}

package/src/core-tags/components/init-components-tag.js

@@ -1,54 +0,0 @@
-"use strict";
-
-const INIT_COMPONENTS_KEY = Symbol();
-
-const addComponentsFromContext =
-  require("../../runtime/components").___addComponentsFromContext;
-const getInitComponentsCode =
-  require("../../runtime/components").___getInitComponentsCode;
-
-function addComponentsFromOut(source, target) {
-  const sourceOut = source.out || source;
-  const targetOut = target || sourceOut;
-  const componentsContext = sourceOut.___components;
-  const componentDefs = targetOut.writer.get("componentDefs");
-  addComponentsFromContext(componentsContext, componentDefs);
-}
-
-function addInitScript(writer) {
-  const out = writer.state.root;
-  const componentDefs = writer.get("componentDefs");
-  writer.script(getInitComponentsCode(out, componentDefs));
-}
-
-module.exports = function render(input, out) {
-  const $global = out.global;
-  if ($global[INIT_COMPONENTS_KEY] === undefined) {
-    $global[INIT_COMPONENTS_KEY] = true;
-
-    out.on("await:finish", addComponentsFromOut);
-    out.on("___toString", addInitScript);
-
-    if (out.isSync() === true) {
-      // Generate initialization code for any of the UI components that were
-      // rendered synchronously
-      addComponentsFromOut(out);
-    } else {
-      // Generate initialization code for any of the UI components that were
-      // rendered asynchronously, but were outside an `<await>` tag
-      // (each `<await>` tag will have its own component initialization block)
-      const asyncOut = out.beginAsync({ last: true, timeout: -1 });
-      out.onLast(function (next) {
-        // Ensure we're getting init code starting from the root
-        let rootOut = out;
-        while (rootOut._parentOut) {
-          rootOut = rootOut._parentOut;
-        }
-        // Write out all of the component init code from the main out
-        addComponentsFromOut(rootOut, asyncOut);
-        asyncOut.end();
-        next();
-      });
-    }
-  }
-};

package/src/core-tags/components/preferred-script-location-tag.js

@@ -1,25 +0,0 @@
-"use strict";
-
-function forceScriptTagAtThisPoint(out) {
-  const writer = out.writer;
-
-  out.global.___isLastFlush = true;
-  const htmlSoFar = writer.toString();
-  out.global.___isLastFlush = undefined;
-
-  writer.clear();
-  writer.write(htmlSoFar);
-}
-
-module.exports = function render(input, out) {
-  if (out.isSync() === true) {
-    forceScriptTagAtThisPoint(out);
-  } else {
-    const asyncOut = out.beginAsync({ last: true, timeout: -1 });
-    out.onLast(function (next) {
-      forceScriptTagAtThisPoint(asyncOut);
-      asyncOut.end();
-      next();
-    });
-  }
-};

package/src/core-tags/components/preserve-tag.js

@@ -1 +0,0 @@
-module.exports = require("@internal/preserve-tag");

package/src/core-tags/core/__flush_here_and_after__.js

@@ -1,44 +0,0 @@
-const BufferedWriter = require("../../runtime/html/BufferedWriter");
-
-module.exports = function __flushHereAndAfter__(input, out) {
-  if (out.isSync()) {
-    // We create an async out that we pinky promise is going to be sync in order to postpone execution of the renderBody.
-    out._sync = false;
-    const asyncOut = out.beginAsync({ last: true });
-    out._sync = true;
-    asyncOut.sync();
-    out.onLast(() => {
-      input.renderBody(asyncOut);
-      asyncOut.end();
-    });
-  } else {
-    let flushed = false;
-    const asyncOut = out.beginAsync({ last: true });
-    const nextWriter = out.writer;
-
-    out.on("___toString", (writer) => {
-      if (writer instanceof BufferedWriter) {
-        if (flushed) {
-          const detachedOut = out.createOut();
-          detachedOut.sync();
-          input.renderBody(detachedOut);
-          writer._content = detachedOut.toString() + writer._content;
-        } else if (writer.next === nextWriter) {
-          asyncOut.sync();
-          input.renderBody(asyncOut);
-          asyncOut.end();
-          flushed = true;
-        }
-      }
-    });
-
-    out.onLast(() => {
-      if (!flushed) {
-        asyncOut.sync();
-        input.renderBody(asyncOut);
-        asyncOut.end();
-        flushed = true;
-      }
-    });
-  }
-};