marko 5.37.0 → 6.0.0-3.4

package/dist/translator/util/optimize-vdom-create.js

@@ -1,164 +0,0 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.analyzeStaticVDOM = analyzeStaticVDOM;exports.optimizeStaticVDOM = optimizeStaticVDOM;var _compiler = require("@marko/compiler");
-var _babelUtils = require("@marko/compiler/babel-utils");
-
-
-
-
-
-
-var _he = require("he");
-
-var _attributes = _interopRequireDefault(require("../tag/native-tag[vdom]/attributes"));
-var _keyManager = require("./key-manager");
-var _vdomOutWrite = _interopRequireDefault(require("./vdom-out-write"));
-
-const skipDirectives = new Set([
-"key",
-"w-bind",
-"no-update",
-"no-update-if",
-"no-update-body",
-"no-update-body-if"]
-);
-const staticNodes = new WeakSet();
-
-const mergeStaticCreateVisitor = {
-  MarkoText(path, state) {
-    const { node } = path;
-    state.currentRoot = _compiler.types.callExpression(
-      _compiler.types.memberExpression(state.currentRoot, _compiler.types.identifier("t")),
-      [_compiler.types.stringLiteral((0, _he.decode)(node.value))]
-    );
-  },
-  MarkoPlaceholder(path, state) {
-    const computed = (0, _babelUtils.computeNode)(path.node.value);
-    state.currentRoot = _compiler.types.callExpression(
-      _compiler.types.memberExpression(state.currentRoot, _compiler.types.identifier("t")),
-      [
-      _compiler.types.stringLiteral(
-        computed && computed.value != null ? `${computed.value}` : ""
-      )]
-
-    );
-  },
-  MarkoTag(path, state) {
-    (0, _keyManager.getKeyManager)(path).resolveKey(path);
-    state.currentRoot = _compiler.types.callExpression(
-      _compiler.types.memberExpression(state.currentRoot, _compiler.types.identifier("e")),
-      getConstElementArgs(path)
-    );
-  }
-};
-
-const analyzeStaticVisitor = {
-  MarkoText(path) {
-    staticNodes.add(path.node);
-  },
-  MarkoPlaceholder(path) {
-    if (path.node.escape) {
-      const computed = (0, _babelUtils.computeNode)(path.node.value);
-      if (computed) {
-        staticNodes.add(path.node);
-      }
-    }
-  },
-  MarkoTag: {
-    enter(path) {
-      // needed to handle global keys on elements that don't have specific key attributes
-      if ((0, _babelUtils.isLoopTag)(path)) path.skip();
-    },
-    exit(path) {
-      // check name
-      let isStatic =
-      (0, _babelUtils.isNativeTag)(path) &&
-      !path.node.attributeTags.length &&
-      !path.node.body.attributeTags &&
-      !path.node.body.params.length &&
-      !path.node.arguments &&
-      !(0, _keyManager.hasUserKey)(path);
-
-      const tagDef = (0, _babelUtils.getTagDef)(path);
-      isStatic = isStatic && !tagDef.translator;
-
-      // check attributes
-      isStatic =
-      isStatic &&
-      path.
-      get("attributes").
-      every(
-        (attr) =>
-        _compiler.types.isMarkoAttribute(attr) &&
-        !(
-        attr.node.arguments ||
-        attr.node.modifier ||
-        skipDirectives.has(attr.node.name) ||
-        !(0, _babelUtils.computeNode)(attr.node.value))
-
-      );
-
-      // check children
-      isStatic =
-      isStatic &&
-      path.
-      get("body").
-      get("body").
-      every((t) => staticNodes.has(t.node));
-
-      if (isStatic) staticNodes.add(path.node);
-    }
-  }
-};
-
-function optimizeStaticVDOM(path) {
-  const {
-    hub: { file }
-  } = path;
-
-  if (
-  !shouldRun(file.markoOpts) ||
-  !staticNodes.has(path.node) ||
-  staticNodes.has(path.parentPath.parentPath.node))
-  {
-    return;
-  }
-
-  const identifier = path.scope.generateUidIdentifier("marko_node");
-  const state = {
-    currentRoot: _compiler.types.callExpression(
-      (0, _babelUtils.importDefault)(
-        file,
-        "marko/src/runtime/vdom/helpers/const-element.js",
-        "marko_constElement"
-      ),
-      getConstElementArgs(path)
-    )
-  };
-
-  path.traverse(mergeStaticCreateVisitor, state);
-
-  const d = _compiler.types.variableDeclaration("const", [
-  _compiler.types.variableDeclarator(identifier, state.currentRoot)]
-  );
-  file.path.node.body.push(d);
-  path.replaceWith((0, _vdomOutWrite.default)("n", identifier, file._componentInstanceIdentifier));
-  path.skip();
-}
-
-function analyzeStaticVDOM(path) {
-  if (shouldRun(path.hub.file.markoOpts)) {
-    path.traverse(analyzeStaticVisitor);
-  }
-}
-
-function shouldRun(markoOpts) {
-  return markoOpts.optimize && markoOpts.output !== "html";
-}
-
-function getConstElementArgs(path) {
-  const { node } = path;
-  return [
-  node.name,
-  (0, _attributes.default)(path, path.get("attributes")),
-  _compiler.types.numericLiteral(node.body.body.length)];
-
-}

package/dist/translator/util/plugin-hooks.js

@@ -1,22 +0,0 @@
-"use strict";exports.__esModule = true;exports.enter = enter;exports.exit = exit; // Utilities for executing multi step compiler hooks (code generators in this package).
-
-function enter(plugin, ...args) {
-  const fn =
-  plugin && (
-  plugin.enter ||
-  plugin.default && plugin.default.enter ||
-  plugin.default) ||
-  plugin;
-  if (typeof fn === "function") {
-    fn(...args);
-  }
-}
-
-function exit(plugin, ...args) {
-  const fn =
-  plugin && (
-  plugin.exit || (plugin.default ? plugin.default.exit : undefined));
-  if (typeof fn === "function") {
-    fn(...args);
-  }
-}

package/dist/translator/util/runtime-flags.js

@@ -1,3 +0,0 @@
-"use strict";exports.__esModule = true;exports.SPREAD_ATTRS = exports.IS_CUSTOM_ELEMENT = exports.HAS_SIMPLE_ATTRS = void 0;const HAS_SIMPLE_ATTRS = exports.HAS_SIMPLE_ATTRS = 1;
-const IS_CUSTOM_ELEMENT = exports.IS_CUSTOM_ELEMENT = 2; // TODO: impl custom elements.
-const SPREAD_ATTRS = exports.SPREAD_ATTRS = 4; // TODO: impl custom elements.

package/dist/translator/util/vdom-out-write.js

@@ -1,10 +0,0 @@
-"use strict";exports.__esModule = true;exports.default = write;var _compiler = require("@marko/compiler");
-
-function write(method, ...args) {
-  return _compiler.types.expressionStatement(
-    _compiler.types.callExpression(
-      _compiler.types.memberExpression(_compiler.types.identifier("out"), _compiler.types.identifier(method)),
-      args
-    )
-  );
-}

package/dist/translator/util/with-previous-location.js

@@ -1,6 +0,0 @@
-"use strict";exports.__esModule = true;exports.default = withPreviousLocation;function withPreviousLocation(newNode, originalNode) {
-  newNode.start = originalNode.start;
-  newNode.loc = originalNode.loc;
-  newNode.end = originalNode.end;
-  return newNode;
-}

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

@@ -1,291 +0,0 @@
-<a href="#">
-  <img src="https://cdn-images-1.medium.com/max/1000/1*Cmy6UutD5-ogL8dr1DySMQ.png" alt="Marko logo" width="100%" />
-</a><br />
-
-> This article was published in August 2017. You can find the original ["10 Awesome Marko Features" article here](https://medium.com/@austinkelleher/10-awesome-marko-features-afba9d094d42)!
-
-# 10 Awesome Marko Features
-
-[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
-particular order...
-
-#### 1. Shorthand Attributes
-
-Tired of constantly typing out `class` and `id` attributes? No need with Marko.
-Simply utilize the shorthand based on CSS selectors:
-
-```marko
-style {
-  .count {
-    color:#09c;
-  }
-}
-
-// Equivalent to <div class="count"/>
-<div.count/>
-
-// Equivalent to <span id="my-id"/>
-<span#my-id/>
-
-// Combined
-<button#submit.primary/>
-```
-
-#### 2. All attribute values are Just JavaScript™
-
-Unlike with HTML, you are not limited to string attribute values when using
-Marko. Attributes can have types, which makes it really easy to pass data to
-custom tags and it works for standard HTML tags too:
-
-```marko
-<div class=input.myClassName/>
-<input type="checkbox" checked=input.isChecked/>
-<awesome-component myString="Hello"/>
-<awesome-component myNumber=1/>
-<awesome-component myTemplateString=`Hello ${name}`/>
-<awesome-component myBoolean=true/>
-<awesome-component myArray=[1, 2, 3]/>
-<awesome-component myObject={hello: 'world'}/>
-<awesome-component myVariable=name/>
-<awesome-component myFunctionCall=input.foo()/>
-```
-
-#### 3. Isomorphic UI components made easy
-
-Tired of boilerplate code and trouble managing component input and state? Marko
-makes it a breeze to develop self-contained and individually testable
-components. Changing state is completely synchronous, so there won’t be any
-headaches. You can also use inline styles making it very easy to develop small
-components quickly.
-
-```marko
-class {
-  onInput(input) {
-    this.state = {
-      count: input.count || 0
-    };
-  }
-  increment() {
-    this.state.count++;
-  }
-}
-
-style {
-  .count {
-    color:#09c;
-  }
-}
-
-<div.count>${state.count}</div>
-<button on-click('increment')>
-  Click me!
-</button>
-```
-
-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](https://markojs.com/docs/class-components/#multi-file-components):
-
-```
-components/
-  click-counter/
-    component.js
-    index.marko
-    style.css
-```
-
-#### 4. Concise syntax
-
-The DOM is just a tree structure. Indentation is a great way to describe a DOM
-tree without having to worry about matching up beginning and ending tags. Marko
-lets you choose between a concise, indentation-based syntax, and a familiar HTML
-syntax:
-
-```marko
-<!-- Count our clicks! -->
-<div.count>
-  <p>Count: ${state.count}</p>
-</div>
-<button.example-button on-click('increment')>
-  Click me!
-</button>
-```
-
-Here’s the same thing with the concise syntax:
-
-```marko
-// Count our clicks!
-div.count
-  p -- Count: ${state.count}
-button.example-button on-click('increment') -- Click me!
-```
-
-Can’t make up your mind or just want to paste in that code snippet from
-StackOverflow? HTML syntax can be used within in the concise syntax. You’ll come
-back and make it consistent…_one day_.
-
-#### 5. Import JavaScript modules
-
-Do you have some helper JavaScript functions that you need to use in your views?
-Marko lets you import any JavaScript module into your template using the same
-syntax as the JavaScript `import` statement without using Babel or any other
-build tool. No need for problematic globals (you could do that too, but please
-don’t or your coworkers will hate you).
-
-```marko
-import sum from './utils/sum';
-
-<div>The sum of 2 + 3 is ${sum(2, 3)}</div>
-```
-
-#### 6. No need to import custom tags (it’s a good thing, trust me)
-
-Marko uses your directory structure as a method for automatically registering
-custom tags. This means that Marko can implicitly import tags based on where the
-template is located on disk. Marko will search up the directory looking for
-custom tags in `components/`directories similar to how Node.js discovers modules
-in `node_modules/` directories.
-
-Given the following directory structure:
-
-```
-components/
-  fancy-button/
-    index.marko
-  fancy-container/
-    index.marko
-```
-
-If `fancy-button` is used inside of `fancy-container`, it will be implicitly<br>
-imported:
-
-```marko
-<!-- No need to use `require` or `import` because it will implicitly import custom tags -->
-<div>
-  <fancy-button color=input.buttonColor/>
-</div>
-```
-
-#### 7. Use JavaScript to set CSS classes and styles
-
-Setting CSS classes and styles is made easy using JavaScript! Marko will happily
-accept simple strings, JavaScript objects and arrays (_falsy values will be
-ignored)._
-
-```marko
-$ const fontColor = input.color || 'blue';
-$ const isActive = input.active === true;
-
-<div class=['person', isActive && 'active']
-  style={color: fontColor} />
-```
-
-#### 8. Inline JavaScript Statements
-
-Marko takes HTML and makes it more like JavaScript. You can exit out of HTML
-mode to embed a JavaScript statement by starting the line with a `$`. You can
-use this feature to embed JavaScript variables, functions, etc. where they are
-needed (take that, “separation of concerns”).
-
-```marko
-$ const randomNumber = Math.random();
-$ const person = {
-  name: 'Frank',
-  age: 32
-};
-
-<div>Random number: ${randomNumber}</div>
-<div>${person.name} is ${person.age} years old</div>
-```
-
-If you want to combine multiple JavaScript statements you can do that too:
-
-```marko
-$ {
-  const randomNumber = Math.random();
-  const person = {
-    name: 'Frank',
-    age: 32
-  };
-}
-
-<div>Random number: ${randomNumber}</div>
-<div>${person.name} is ${person.age} years old</div>
-```
-
-#### 9. Async rendering with the `<await>` tag
-
-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](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
-
-```marko
-$ const searchResultsPromise = searchService.performSearch(keywords);
-
-<await(searchResultsPromise)>
-  <@then|person|>
-    Hello ${person.name}!
-  </@then>
-  <@catch|err|>
-    The error was: ${err.message}.
-  </@catch>
-</await>
-```
-
-#### 10. Server side rendering is easy
-
-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 rendered on the server when the page loads in the browser):
-
-```js
-require("@marko/compiler/register"); // require .marko files!
-
-const http = require("http");
-const template = require("./template");
-
-http
-  .createServer()
-  .on("request", (req, res) => {
-    template.render(
-      {
-        name: "Frank",
-        count: 30,
-        colors: ["red", "green", "blue"],
-      },
-      res,
-    );
-  })
-  .listen(8080);
-```
-
-#### Bonus: Friendly compile-time errors
-
-We all make mistakes _every now and then_. Typo in your custom tag? Forgot an
-ending tag? No worries! Marko will give you a friendly error message and point
-you right to the problematic code.
-
-```marko
-<!-- Ahhhh typo! This should be <fancy-button/> -->
-<fancy-buttn/>
-```
-
-You may have missed it, but it was obvious to Marko:
-
-```
-Unrecognized tag: fancy-buttn — More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag at line 2 col 1
-```
-
-Coming soon: auto correction and autonomous coding
-
----
-
-[_Cover image from Wikipedia_](https://commons.wikimedia.org/wiki/File:Amanhecer_no_Hercules_--.jpg)