feat: optimize registry id compiler api (#2380)

.changeset/hip-dryers-hunt.md

@@ -0,0 +1,9 @@
+---
+"@marko/translator-default": minor
+"@marko/translator-tags": minor
+"@marko/babel-utils": minor
+"@marko/compiler": minor
+"marko": minor
+---
+
+Replace `optimizeKnownTemplates` with a better an simpler `optimizeRegistryId` api.

.sizes.json

@@ -14,61 +14,61 @@
     {
       "name": "counter",
       "user": {
-        "min": 222,
-        "brotli": 159
+        "min": 208,
+        "brotli": 146
       },
       "runtime": {
         "min": 3737,
         "brotli": 1580
       },
       "total": {
-        "min": 3959,
-        "brotli": 1739
+        "min": 3945,
+        "brotli": 1726
       }
     },
     {
       "name": "counter 💧",
       "user": {
-        "min": 137,
-        "brotli": 114
+        "min": 130,
+        "brotli": 125
       },
       "runtime": {
         "min": 3137,
         "brotli": 1416
       },
       "total": {
-        "min": 3274,
-        "brotli": 1530
+        "min": 3267,
+        "brotli": 1541
       }
     },
     {
       "name": "comments",
       "user": {
-        "min": 1028,
-        "brotli": 518
+        "min": 1000,
+        "brotli": 491
       },
       "runtime": {
         "min": 7744,
         "brotli": 3141
       },
       "total": {
-        "min": 8772,
-        "brotli": 3659
+        "min": 8744,
+        "brotli": 3632
       }
     },
     {
       "name": "comments 💧",
       "user": {
-        "min": 872,
-        "brotli": 470
+        "min": 851,
+        "brotli": 449
       },
       "runtime": {
         "min": 8751,
         "brotli": 3547
       },
       "total": {
-        "min": 9623,
-        "brotli": 4017
+        "min": 9602,
+        "brotli": 3996
       }
     }
   ]

.sizes/comments.csr/entry.js

@@ -1,4 +1,4 @@
-// size: 1028 (min) 518 (brotli)
+// size: 1000 (min) 491 (brotli)
 const _expr_comment_id$ifBody = intersection(
     2,
     (_scope) => {
@@ -12,7 +12,7 @@ const _expr_comment_id$ifBody = intersection(
   _id$ifBody = closure(8, 0, void 0, () => _expr_comment_id$ifBody),
   _comment$ifBody = closure(6, 0, void 0, () => _expr_comment_id$ifBody),
   _ifBody = register(
-    "QURHKITf",
+    "c",
     createRenderer(
       "<ul></ul>",
       "/ b&",
@@ -34,7 +34,7 @@ const _expr_comment_id$ifBody = intersection(
     () => _id$forBody,
   ),
   _if$forBody = conditional(4),
-  _open$forBody_effect = effect("ZcKJNKFe", (_scope) =>
+  _open$forBody_effect = effect("d", (_scope) =>
     on(
       _scope[2],
       "click",
@@ -76,7 +76,7 @@ const _expr_comment_id$ifBody = intersection(
   _for = loopOf(
     0,
     register(
-      "$F_EaYZk",
+      "e",
       createRenderer(
         "<li><span> </span><button> </button><!></li>",
         " E l D l%",
@@ -107,7 +107,7 @@ function _setup_(_scope) {
   _scope[0];
 }
 createTemplate(
-  "rUbTinTf",
+  "a",
   "<ul></ul>",
   "/ b&",
   _setup_,

.sizes/comments.ssr/entry.js

@@ -1,4 +1,4 @@
-// size: 872 (min) 470 (brotli)
+// size: 851 (min) 449 (brotli)
 const _expr_comment_id$ifBody = intersection(
     2,
     (_scope) => {
@@ -12,7 +12,7 @@ const _expr_comment_id$ifBody = intersection(
   _id$ifBody = closure(8, 0, void 0, () => _expr_comment_id$ifBody),
   _comment$ifBody = closure(6, 0, void 0, () => _expr_comment_id$ifBody),
   _ifBody = register(
-    "QURHKITf",
+    "c",
     createRenderer(
       "<ul></ul>",
       "/ b&",
@@ -34,7 +34,7 @@ const _expr_comment_id$ifBody = intersection(
     () => _id$forBody,
   ),
   _if$forBody = conditional(4),
-  _open$forBody_effect = effect("ZcKJNKFe", (_scope) =>
+  _open$forBody_effect = effect("d", (_scope) =>
     on(
       _scope[2],
       "click",
@@ -76,7 +76,7 @@ const _expr_comment_id$ifBody = intersection(
   _for = loopOf(
     0,
     register(
-      "$F_EaYZk",
+      "e",
       createRenderer(
         "<li><span> </span><button> </button><!></li>",
         " E l D l%",

.sizes/counter.csr/entry.js

@@ -1,5 +1,5 @@
-// size: 222 (min) 159 (brotli)
-const _clickCount_effect = effect("XBSGKvBc", (_scope) =>
+// size: 208 (min) 146 (brotli)
+const _clickCount_effect = effect("b", (_scope) =>
     on(
       _scope[0],
       "click",
@@ -17,9 +17,4 @@ const _clickCount_effect = effect("XBSGKvBc", (_scope) =>
 function _setup_(_scope) {
   _clickCount(_scope, 0);
 }
-createTemplate(
-  "tPaZsVqd",
-  "<div><button> </button></div>",
-  "D D m",
-  _setup_,
-).mount();
+createTemplate("a", "<div><button> </button></div>", "D D m", _setup_).mount();

.sizes/counter.ssr/entry.js

@@ -1,5 +1,5 @@
-// size: 137 (min) 114 (brotli)
-const _clickCount_effect = effect("XBSGKvBc", (_scope) =>
+// size: 130 (min) 125 (brotli)
+const _clickCount_effect = effect("b", (_scope) =>
     on(
       _scope[0],
       "click",

packages/babel-utils/src/tags.js

@@ -317,51 +317,28 @@ function resolveMarkoFile(file, filename) {
 }
 
 const idCache = new WeakMap();
+const templateIdHashOpts = { outputLength: 5 };
 export function getTemplateId(opts, request, child) {
   const id = relative(ROOT, request);
   const optimize = typeof opts === "object" ? opts.optimize : opts;
 
   if (optimize) {
-    const optimizeKnownTemplates =
-      typeof opts === "object" && opts.optimizeKnownTemplates;
-    const knownTemplatesSize = optimizeKnownTemplates?.length || 0;
-
-    if (knownTemplatesSize) {
-      let lookup = idCache.get(optimizeKnownTemplates);
-      if (!lookup) {
-        lookup = new Map();
-        idCache.set(optimizeKnownTemplates, lookup);
-        for (let i = 0; i < knownTemplatesSize; i++) {
-          lookup.set(optimizeKnownTemplates[i], {
-            id: encodeTemplateId(i),
-            children: new Map(),
-          });
-        }
-      }
-      let registered = lookup.get(request);
-      if (registered) {
-        if (child) {
-          let childId = registered.children.get(child);
-          if (childId === undefined) {
-            childId = registered.children.size;
-            registered.children.set(child, childId);
-          }
-          return registered.id + childId;
-        }
-
-        return registered.id;
-      }
-    }
+    const optimizeRegistryId =
+      typeof opts === "object" && opts.optimizeRegistryId;
 
-    const hash = createHash("MD5").update(id);
+    if (optimizeRegistryId) {
+      const result = optimizeRegistryId(
+        child ? request + "_" + child : request,
+      );
+      return typeof result === "number" ? encodeTemplateId(result) : result;
+    }
 
+    const hash = createHash("shake256", templateIdHashOpts).update(id);
     if (child) {
       hash.update(child);
     }
 
-    return encodeTemplateId(
-      parseInt(hash.digest("hex").slice(0, 11), 16) + knownTemplatesSize,
-    );
+    return encodeTemplateId(parseInt(hash.digest("hex"), 16));
   }
 
   return id + (child ? `_${child}` : "");
@@ -414,18 +391,21 @@ function createNewFileOpts(opts, filename) {
   };
 }
 
-const ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_";
-const ENCODE_CHARS_LEN = ENCODE_CHARS.length;
-
 function encodeTemplateId(index) {
-  let id = "";
+  const encodeChars =
+    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789";
+  const encodeLen = encodeChars.length;
+  const encodeStartLen = encodeLen - 11; // Avoids chars that cannot start a property name and _ (reserved).
   let cur = index;
-
-  do {
-    const mod = cur % ENCODE_CHARS_LEN;
-    id += ENCODE_CHARS[mod];
-    cur = (cur - mod) / ENCODE_CHARS_LEN;
-  } while (cur > 0);
+  let mod = cur % encodeStartLen;
+  let id = encodeChars[mod];
+  cur = (cur - mod) / encodeStartLen;
+
+  while (cur > 0) {
+    mod = cur % encodeLen;
+    id += encodeChars[mod];
+    cur = (cur - mod) / encodeLen;
+  }
 
   return id;
 }

packages/compiler/config.d.ts

@@ -24,7 +24,7 @@ declare const Config: {
   hydrateIncludeImports?: RegExp | ((request: string) => boolean);
   hydrateInit?: boolean;
   optimize?: boolean;
-  optimizeKnownTemplates?: string[];
+  optimizeRegistryId?: (request: string) => string | number;
   cache?: Map<unknown, unknown>;
   hot?: boolean;
   /** @deprecated */

packages/compiler/src/config.js

@@ -114,11 +114,10 @@ const config = {
   optimize: undefined,
 
   /**
-   * If `optimize` is enabled you can provide an array of template paths which the compiler will
-   * use to generate shorter registry/template ids using incrementing ids. This can only be used
-   * if the same `optimizeKnownTemplates` are used for both server and client compilations.
+   * If `optimize` is enabled this function will be called to resolve the "template id" used for Marko's
+   * hydration registry.
    */
-  optimizeKnownTemplates: undefined,
+  optimizeRegistryId: undefined,
 
   /**
    * This option should be set if `hydrate` output is specified.

packages/marko/docs/compiler.md

@@ -206,12 +206,17 @@ Default: [environment based](https://github.com/marko-js/marko/blob/0f212897d2d3
 
 Enables production mode optimizations.
 
-#### `optimizeKnownTemplates`
+#### `optimizeRegistryId`
 
-Type: `string[]`<br>
+Type: `(request: string) => string | number`<br>
 Default: `undefined`
 
-If `optimize` is enabled you can provide an array of template paths which the compiler will use to generate shorter registry/template ids using incrementing ids. This can only be used if the same `optimizeKnownTemplates` are used for both server and client compilations.
+If `optimize` is enabled this function will be called with each "template id" / "registry id" that Marko uses for hydration.
+The function must return a number (which will be encoded) or a string which is used verbatim.
+
+It is _required_ that when a template is compiled for the server it is given the same id when it is compiled for the browser.
+
+Without this function Marko will use a generic hash of the raw `request` id.
 
 #### `resolveVirtualDependency`
 

packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/htmlProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/html/index.js";
-const _marko_componentType = "kxPbdNSf",
+const _marko_componentType = "EfEqrWk",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tag-inside-if-tag/snapshots/vdomProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/vdom/index.js";
-const _marko_componentType = "kxPbdNSf",
+const _marko_componentType = "EfEqrWk",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/htmlProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/html/index.js";
-const _marko_componentType = "sUNz$TS",
+const _marko_componentType = "Dpsy1jc",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tags-dynamic-and-static/snapshots/vdomProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/vdom/index.js";
-const _marko_componentType = "sUNz$TS",
+const _marko_componentType = "Dpsy1jc",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/htmlProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/html/index.js";
-const _marko_componentType = "NFoDYqBe",
+const _marko_componentType = "nMR2LCn",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tags-dynamic-tag-parent/snapshots/vdomProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/vdom/index.js";
-const _marko_componentType = "NFoDYqBe",
+const _marko_componentType = "nMR2LCn",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/htmlProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/html/index.js";
-const _marko_componentType = "mPcXYlXc",
+const _marko_componentType = "Qmm9QYd",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { x as _marko_escapeXml } from "marko/dist/runtime/html/helpers/escape-xml.js";

packages/translator-default/test/fixtures/at-tags-dynamic-with-params/snapshots/vdomProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/vdom/index.js";
-const _marko_componentType = "mPcXYlXc",
+const _marko_componentType = "Qmm9QYd",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/htmlProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/html/index.js";
-const _marko_componentType = "LOwmoBub",
+const _marko_componentType = "cEWK9zh",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";

packages/translator-default/test/fixtures/at-tags-dynamic/snapshots/vdomProduction-expected.js

@@ -1,5 +1,5 @@
 import { t as _t } from "marko/dist/runtime/vdom/index.js";
-const _marko_componentType = "LOwmoBub",
+const _marko_componentType = "cEWK9zh",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import { r as _marko_repeated_attr_tag, a as _marko_repeatable_attr_tag, i as _marko_render_input } from "marko/dist/runtime/helpers/attr-tag.js";