refactor(compiler): use comment to mark target (#1774)

.circleci/config.yml

@@ -670,7 +670,9 @@ jobs:
           key: cache-{{ .Revision }}-benchmark-app
           paths:
             - benchmarks/latest/dist/app.latest.js
+            - benchmarks/latest/dist/app-big-template.latest.js
             - benchmarks/local/dist/app.local.js
+            - benchmarks/local/dist/app-big-template.local.js
 
   tacho_benchmark:
     executor: docker_circleci_bench
@@ -859,6 +861,18 @@ workflows:
           command: npm run bench:rerender10k
           requires:
             - tacho_benchmark_prep
+      - tacho_benchmark:
+          <<: *filter_ignore_develop_release
+          name: benchmark_rerender1k-big-template
+          command: npm run bench:rerender1k-big
+          requires:
+            - tacho_benchmark_prep
+      - tacho_benchmark:
+          <<: *filter_ignore_develop_release
+          name: benchmark_startup1k-big-template
+          command: npm run bench:startup1k-big
+          requires:
+            - tacho_benchmark_prep
       - tacho_benchmark:
           <<: *filter_ignore_develop_release
           name: benchmark_update

benchmarks/app-big-template.js

@@ -0,0 +1,66 @@
+import { Aurelia, CustomElement, StandardConfiguration } from '@aurelia/runtime-html';
+import { createItems } from './utils/data.js';
+
+let $count = 0;
+
+const App = CustomElement.define({
+    name: 'app',
+    template: '<div>'
+        + '<div><div repeat.for="i of 10">Col ${i}</div></div></div>'
+        + '<div repeat.for="i of items">'
+            + '<p>Cell <var>${i}</var></p>'
+            + '<p>Cell <strong>${i}</strong></td>'
+            + '<p>Cell <b>${i}</b></p>'
+            + '<p>Cell <span>${i}</span></p>'
+            + '<p>Cell <div>${i}</div></p>'
+
+            + '<p>Cell <var>${i}</var></p>'
+            + '<p>Cell <strong>${i}</strong></td>'
+            + '<p>Cell <b>${i}</b></p>'
+            + '<p>Cell <span>${i}</span></p>'
+            + '<p>Cell <div>${i}</div></p>'
+
+            + '<p>Cell <var>${i}</var></p>'
+            + '<p>Cell <strong>${i}</strong></td>'
+            + '<p>Cell <b>${i}</b></p>'
+            + '<p>Cell <span>${i}</span></p>'
+            + '<p>Cell <div>${i}</div></p>'
+
+            + '<p>Cell <var>${i}</var></p>'
+            + '<p>Cell <strong>${i}</strong></td>'
+            + '<p>Cell <b>${i}</b></p>'
+            + '<p>Cell <span>${i}</span></p>'
+            + '<p>Cell <div>${i}</div></p>'
+
+            + '<p>Cell <var>${i}</var></p>'
+            + '<p>Cell <strong>${i}</strong></td>'
+            + '<p>Cell <b>${i}</b></p>'
+            + '<p>Cell <span>${i}</span></p>'
+            + '<p>Cell <div>${i}</div></p>'
+        + '</div>'
+    + '</div>'
+}, class {
+    constructor() {
+        this.newItems($count);
+    }
+
+    newItems(count, seed = 0) {
+        this.items = createItems(count, seed);
+    }
+
+    updateItems() {
+        const count = this.items.length;
+        this.items.forEach((i, idx) => i.update(count - idx + 1))
+    }
+});
+
+export const start = (host, count = 0) => {
+    $count = count;
+    const au = new Aurelia().register(StandardConfiguration).app({
+        component: App,
+        host
+    });
+    au.start();
+
+    return au;
+};

benchmarks/latest/rollup.config.js

@@ -3,8 +3,8 @@ import terser from '@rollup/plugin-terser';
 import alias from '@rollup/plugin-alias';
 import path from 'path';
 
-/** @type {import('rollup').RollupOptions} */
-export default {
+/** @type {import('rollup').RollupOptions[]} */
+export default [{
   input: '../app',
   output: {
     file: 'dist/app.latest.js',
@@ -29,4 +29,29 @@ export default {
     nodeResolve(),
     terser()
   ]
-}
+}, {
+  input: '../app-big-template',
+  output: {
+    file: 'dist/app-big-template.latest.js',
+    sourcemap: true
+  },
+  plugins: [
+    alias({
+      entries: [
+        ...[
+          'kernel',
+          'metadata',
+          'runtime',
+          'runtime-html',
+          'platform',
+          'platform-browser',
+        ].map(name => ({
+          find: `@aurelia/${name}`,
+          replacement: path.resolve(__dirname, `node_modules/@aurelia/${name}/dist/esm/index.mjs`)
+        }))
+      ]
+    }),
+    nodeResolve(),
+    terser()
+  ]
+}]

benchmarks/local/rollup.config.js

@@ -3,8 +3,8 @@ import terser from '@rollup/plugin-terser';
 import alias from '@rollup/plugin-alias';
 import path from 'path';
 
-/** @type {import('rollup').RollupOptions} */
-export default {
+/** @type {import('rollup').RollupOptions[]} */
+export default [{
   input: '../app',
   output: {
     file: 'dist/app.local.js',
@@ -29,4 +29,29 @@ export default {
     nodeResolve(),
     terser()
   ]
-}
+}, {
+  input: '../app-big-template',
+  output: {
+    file: 'dist/app-big-template.local.js',
+    sourcemap: true
+  },
+  plugins: [
+    alias({
+      entries: [
+        ...[
+          'kernel',
+          'metadata',
+          'runtime',
+          'runtime-html',
+          'platform',
+          'platform-browser',
+        ].map(name => ({
+          find: `@aurelia/${name}`,
+          replacement: path.resolve(__dirname, `../../node_modules/@aurelia/${name}/dist/esm/index.mjs`)
+        }))
+      ]
+    }),
+    nodeResolve(),
+    terser()
+  ]
+}]

benchmarks/package.json

@@ -7,7 +7,9 @@
     "build:runtime": "cd ../packages/runtime && npm run build",
     "build:runtime-html": "cd ../packages/runtime-html && npm run build",
     "build:all": "concurrently \"npm run build:kernel\" \"npm run build:runtime\" \"npm run build:runtime-html\"",
-    "bench": "npm run bench rerender1k && npm run bench:startup1k && npm run bench:update1k",
+    "bench": "npm run bench rerender1k && npm run bench:startup1k && npm run bench:update1k && npm run bench:rerender1k-big && npm run bench:startup1k-big",
+    "bench:rerender1k-big": "tach --config rerender-1k-big-template.json --json-file results/rerender-1k-big-template.json",
+    "bench:startup1k-big": "tach --config startup-1k-big-template.json --json-file results/startup-1k-big-template.json",
     "bench:rerender10k": "tach --config rerender-10k.json --json-file results/rerender-10k.json",
     "bench:startup10k": "tach --config startup-10k.json --json-file results/startup-10k.json",
     "bench:update1k": "tach --config update-1k.json --json-file results/update-1k.json"

benchmarks/rerender-1k-big-template.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://raw.githubusercontent.com/Polymer/tachometer/master/config.schema.json",
+  "root": "../../",
+
+  "benchmarks": [
+    {
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "addArguments": ["--js-flags=--expose-gc", "--enable-precise-memory-info"]
+      },
+      "measurement": [
+        { "name": "perf", "mode": "performance", "entryName": "rerender1k-big-template" }
+      ],
+      "expand": [
+        {
+          "name": "rerender 1k latest (big template)",
+          "url": "rerender1k-latest-big-template.html"
+        },
+        {
+          "name": "rerender 1k local (big template)",
+          "url": "rerender1k-local-big-template.html"
+        }
+      ]
+    }
+  ],
+  "timeout": 0.5
+}

benchmarks/rerender1k-latest-big-template.html

@@ -0,0 +1,17 @@
+<script type="module">
+import { start } from './latest/dist/app-big-template.latest.js';
+
+const host = document.body.appendChild(document.createElement('div'));
+const au = start(host);
+performance.mark('1k-start');
+
+au.root.controller.viewModel.newItems(500);
+
+performance.mark('1k-end');
+
+// measure memory in MBs
+window.jsHeapSize = performance.memory.usedJSHeapSize / 1e6;
+
+performance.measure('rerender1k-big-template', '1k-start', '1k-end');
+
+</script>

benchmarks/rerender1k-local-big-template.html

@@ -0,0 +1,16 @@
+<script type="module">
+import { start } from './local/dist/app-big-template.local.js';
+
+const host = document.body.appendChild(document.createElement('div'));
+const au = start(host);
+performance.mark('1k-start');
+
+au.root.controller.viewModel.newItems(500);
+
+performance.mark('1k-end');
+
+// measure memory in MBs
+window.jsHeapSize = performance.memory.usedJSHeapSize / 1e6;
+
+performance.measure('rerender1k-big-template', '1k-start', '1k-end');
+</script>