fix: partially revert 2380

.changeset/lucky-onions-check.md

@@ -0,0 +1,8 @@
+---
+"@marko/translator-tags": patch
+"@marko/babel-utils": patch
+"@marko/compiler": patch
+"marko": patch
+---
+
+Partially revert #2380 which was causing non idempotent builds.

.sizes.json

@@ -14,61 +14,61 @@
     {
       "name": "counter",
       "user": {
-        "min": 208,
-        "brotli": 146
+        "min": 209,
+        "brotli": 147
       },
       "runtime": {
         "min": 3737,
         "brotli": 1580
       },
       "total": {
-        "min": 3945,
-        "brotli": 1726
+        "min": 3946,
+        "brotli": 1727
       }
     },
     {
       "name": "counter 💧",
       "user": {
-        "min": 130,
+        "min": 131,
         "brotli": 125
       },
       "runtime": {
         "min": 3137,
         "brotli": 1416
       },
       "total": {
-        "min": 3267,
+        "min": 3268,
         "brotli": 1541
       }
     },
     {
       "name": "comments",
       "user": {
-        "min": 1000,
+        "min": 1003,
         "brotli": 491
       },
       "runtime": {
         "min": 7744,
         "brotli": 3141
       },
       "total": {
-        "min": 8744,
+        "min": 8747,
         "brotli": 3632
       }
     },
     {
       "name": "comments 💧",
       "user": {
-        "min": 851,
-        "brotli": 449
+        "min": 854,
+        "brotli": 451
       },
       "runtime": {
         "min": 8751,
         "brotli": 3547
       },
       "total": {
-        "min": 9602,
-        "brotli": 3996
+        "min": 9605,
+        "brotli": 3998
       }
     }
   ]

.sizes/comments.csr/entry.js

@@ -1,4 +1,4 @@
-// size: 1000 (min) 491 (brotli)
+// size: 1003 (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(
-    "c",
+    "a0",
     createRenderer(
       "<ul></ul>",
       "/ b&",
@@ -34,7 +34,7 @@ const _expr_comment_id$ifBody = intersection(
     () => _id$forBody,
   ),
   _if$forBody = conditional(4),
-  _open$forBody_effect = effect("d", (_scope) =>
+  _open$forBody_effect = effect("a1", (_scope) =>
     on(
       _scope[2],
       "click",
@@ -76,7 +76,7 @@ const _expr_comment_id$ifBody = intersection(
   _for = loopOf(
     0,
     register(
-      "e",
+      "a2",
       createRenderer(
         "<li><span> </span><button> </button><!></li>",
         " E l D l%",
@@ -107,7 +107,7 @@ function _setup_(_scope) {
   _scope[0];
 }
 createTemplate(
-  "a",
+  "b",
   "<ul></ul>",
   "/ b&",
   _setup_,

.sizes/comments.ssr/entry.js

@@ -1,4 +1,4 @@
-// size: 851 (min) 449 (brotli)
+// size: 854 (min) 451 (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(
-    "c",
+    "a0",
     createRenderer(
       "<ul></ul>",
       "/ b&",
@@ -34,7 +34,7 @@ const _expr_comment_id$ifBody = intersection(
     () => _id$forBody,
   ),
   _if$forBody = conditional(4),
-  _open$forBody_effect = effect("d", (_scope) =>
+  _open$forBody_effect = effect("a1", (_scope) =>
     on(
       _scope[2],
       "click",
@@ -76,7 +76,7 @@ const _expr_comment_id$ifBody = intersection(
   _for = loopOf(
     0,
     register(
-      "e",
+      "a2",
       createRenderer(
         "<li><span> </span><button> </button><!></li>",
         " E l D l%",

.sizes/counter.csr/entry.js

@@ -1,5 +1,5 @@
-// size: 208 (min) 146 (brotli)
-const _clickCount_effect = effect("b", (_scope) =>
+// size: 209 (min) 147 (brotli)
+const _clickCount_effect = effect("a0", (_scope) =>
     on(
       _scope[0],
       "click",

.sizes/counter.ssr/entry.js

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

packages/babel-utils/src/tags.js

@@ -323,14 +323,33 @@ export function getTemplateId(opts, request, child) {
   const optimize = typeof opts === "object" ? opts.optimize : opts;
 
   if (optimize) {
-    const optimizeRegistryId =
-      typeof opts === "object" && opts.optimizeRegistryId;
-
-    if (optimizeRegistryId) {
-      const result = optimizeRegistryId(
-        child ? request + "_" + child : request,
-      );
-      return typeof result === "number" ? encodeTemplateId(result) : result;
+    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 hash = createHash("shake256", templateIdHashOpts).update(id);

packages/compiler/config.d.ts

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

packages/compiler/src/config.js

@@ -114,10 +114,11 @@ const config = {
   optimize: undefined,
 
   /**
-   * If `optimize` is enabled this function will be called to resolve the "template id" used for Marko's
-   * hydration registry.
+   * 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.
    */
-  optimizeRegistryId: undefined,
+  optimizeKnownTemplates: undefined,
 
   /**
    * This option should be set if `hydrate` output is specified.

packages/marko/docs/compiler.md

@@ -206,17 +206,12 @@ Default: [environment based](https://github.com/marko-js/marko/blob/0f212897d2d3
 
 Enables production mode optimizations.
 
-#### `optimizeRegistryId`
+#### `optimizeKnownTemplates`
 
-Type: `(request: string) => string | number`<br>
+Type: `string[]`<br>
 Default: `undefined`
 
-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.
+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.
 
 #### `resolveVirtualDependency`
 

packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.hydrate.js

@@ -1,8 +1,8 @@
-// size: 189 (min) 129 (brotli)
+// size: 190 (min) 126 (brotli)
 const _lastClickCount = _$.state(4, (_scope, lastClickCount) =>
     _$.data(_scope[2], lastClickCount),
   ),
-  _clickCount_effect = _$.effect("b", (_scope) =>
+  _clickCount_effect = _$.effect("a0", (_scope) =>
     _$.on(
       _scope[0],
       "click",

packages/translator-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 131 (min) 84 (brotli)
+// size: 133 (min) 82 (brotli)
 _$.dynamicTagAttrs(0),
-  _$.register("c", _$.createRendererWithOwner("Goodbye", "")),
-  _$.register("d", _$.createRendererWithOwner("Hello", ""));
+  _$.register("b0", _$.createRendererWithOwner("Goodbye", "")),
+  _$.register("b1", _$.createRendererWithOwner("Hello", ""));

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/dom.expected/template.hydrate.js

@@ -1,2 +1,3 @@
-// size: 74 (min) 70 (brotli)
-_$.dynamicTagAttrs(0), _$.register("c", _$.createRendererWithOwner("Foo!", ""));
+// size: 75 (min) 70 (brotli)
+_$.dynamicTagAttrs(0),
+  _$.register("b0", _$.createRendererWithOwner("Foo!", ""));

packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.hydrate.js

@@ -1,5 +1,5 @@
-// size: 189 (min) 135 (brotli)
-const _disabled_effect = _$.effect("b", (_scope) =>
+// size: 190 (min) 135 (brotli)
+const _disabled_effect = _$.effect("a0", (_scope) =>
     _$.on(
       _scope[1],
       "click",

packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.hydrate.js

@@ -1,11 +1,11 @@
-// size: 299 (min) 179 (brotli)
+// size: 301 (min) 178 (brotli)
 const _text_ = _$.value(5, (_scope, text) => _$.data(_scope[1], text)),
-  _onClick__effect = _$.effect("d", (_scope) => {
+  _onClick__effect = _$.effect("a0", (_scope) => {
     const { 4: onClick } = _scope;
     _$.on(_scope[0], "click", onClick);
   }),
   _onClick_ = _$.value(4, (_scope, onClick) => _onClick__effect(_scope)),
-  _onClick = _$.register("c", (_scope) => {
+  _onClick = _$.register("b0", (_scope) => {
     const { 1: clickCount } = _scope;
     return function () {
       _clickCount(_scope, clickCount + 1);

packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.hydrate.js

@@ -1,11 +1,11 @@
-// size: 299 (min) 181 (brotli)
-const _onClick__effect = _$.effect("d", (_scope) => {
+// size: 301 (min) 183 (brotli)
+const _onClick__effect = _$.effect("a0", (_scope) => {
     const { 5: onClick } = _scope;
     _$.on(_scope[0], "click", onClick);
   }),
   _onClick_ = _$.value(5, (_scope, onClick) => _onClick__effect(_scope)),
   _text_ = _$.value(4, (_scope, text) => _$.data(_scope[1], text)),
-  _onClick = _$.register("c", (_scope) => {
+  _onClick = _$.register("b0", (_scope) => {
     const { 1: clickCount } = _scope;
     return function () {
       _clickCount(_scope, clickCount + 1);

packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 492 (min) 231 (brotli)
+// size: 495 (min) 228 (brotli)
 const _text_ = _$.value(7, (_scope, text) => {
     _$.data(_scope[1], text),
       ((_scope, textAlias) => {
@@ -8,18 +8,18 @@ const _text_ = _$.value(7, (_scope, text) => {
   _pattern__ = _$.value(6, (_scope, _pattern_) =>
     _text_(_scope, _pattern_.text),
   ),
-  _onClick__effect = _$.effect("e", (_scope) => {
+  _onClick__effect = _$.effect("a0", (_scope) => {
     const { 5: onClick } = _scope;
     _$.on(_scope[0], "click", onClick);
   }),
   _onClick_ = _$.value(5, (_scope, onClick) => _onClick__effect(_scope)),
-  _onClick = _$.register("c", (_scope) => {
+  _onClick = _$.register("b0", (_scope) => {
     const { 2: clickCount } = _scope;
     return function () {
       _clickCount(_scope, clickCount + 1);
     };
   }),
-  _onClick2 = _$.register("d", (_scope) => {
+  _onClick2 = _$.register("b1", (_scope) => {
     const { 2: clickCount } = _scope;
     return function () {
       _clickCount(_scope, clickCount + 1);

packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.hydrate.js

@@ -1,16 +1,16 @@
-// size: 332 (min) 188 (brotli)
+// size: 334 (min) 189 (brotli)
 const _text_ = _$.value(6, (_scope, text) => {
     _$.data(_scope[1], text),
       ((_scope, textAlias) => {
         _$.data(_scope[2], textAlias);
       })(_scope, text);
   }),
-  _onClick__effect = _$.effect("d", (_scope) => {
+  _onClick__effect = _$.effect("a0", (_scope) => {
     const { 5: onClick } = _scope;
     _$.on(_scope[0], "click", onClick);
   }),
   _onClick_ = _$.value(5, (_scope, onClick) => _onClick__effect(_scope)),
-  _onClick = _$.register("c", (_scope) => {
+  _onClick = _$.register("b0", (_scope) => {
     const { 1: clickCount } = _scope;
     return function () {
       _clickCount(_scope, clickCount + 1);

packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.hydrate.js

@@ -1,11 +1,11 @@
-// size: 299 (min) 179 (brotli)
+// size: 301 (min) 178 (brotli)
 const _text_ = _$.value(5, (_scope, text) => _$.data(_scope[1], text)),
-  _onClick__effect = _$.effect("d", (_scope) => {
+  _onClick__effect = _$.effect("a0", (_scope) => {
     const { 4: onClick } = _scope;
     _$.on(_scope[0], "click", onClick);
   }),
   _onClick_ = _$.value(4, (_scope, onClick) => _onClick__effect(_scope)),
-  _onClick = _$.register("c", (_scope) => {
+  _onClick = _$.register("b0", (_scope) => {
     const { 1: clickCount } = _scope;
     return function () {
       _clickCount(_scope, clickCount + 1);