diff --git a/.changeset/giant-melons-think.md b/.changeset/giant-melons-think.md new file mode 100644 index 000000000..61ffc0867 --- /dev/null +++ b/.changeset/giant-melons-think.md @@ -0,0 +1,6 @@ +--- +"@marko/translator-tags": patch +"@marko/runtime-tags": patch +--- + +Fix issue with referencing $global in tags api SSR. diff --git a/packages/compiler/scripts/types/babel-traverse.js b/packages/compiler/scripts/types/babel-traverse.js index 3340c4fe8..0a95f6256 100644 --- a/packages/compiler/scripts/types/babel-traverse.js +++ b/packages/compiler/scripts/types/babel-traverse.js @@ -94,9 +94,10 @@ ${HUB_INTERFACE} ASSERT, ASSERT + BREAK + - MARKO_TYPES.map((t) => `assert${t}(opts?: object | null): void;`).join( - BREAK, - ), + MARKO_TYPES.map( + (t) => + `assert${t}(opts?: object | null): asserts this is NodePath;`, + ).join(BREAK), ); export default result; diff --git a/packages/runtime-tags/src/html.ts b/packages/runtime-tags/src/html.ts index c9b70baa8..973115318 100644 --- a/packages/runtime-tags/src/html.ts +++ b/packages/runtime-tags/src/html.ts @@ -24,10 +24,10 @@ export { } from "./html/dynamic-tag"; export { createTemplate } from "./html/template"; export { + $global, ensureScopeWithId, fork, getScopeById, - getStreamData, markResumeCleanup, markResumeControlEnd, markResumeControlSingleNodeEnd, diff --git a/packages/runtime-tags/src/html/writer.ts b/packages/runtime-tags/src/html/writer.ts index 8ee5b2f11..3ec38e2b4 100644 --- a/packages/runtime-tags/src/html/writer.ts +++ b/packages/runtime-tags/src/html/writer.ts @@ -188,8 +188,8 @@ export function ensureScopeWithId(scopeId: number) { return scope; } -export function getStreamData() { - return $chunk.boundary.state; +export function $global() { + return $chunk.boundary.state.$global; } export function fork( diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr-sanitized.expected.md index 67668cb15..43cc2a6fe 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr-sanitized.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr-sanitized.expected.md @@ -1,6 +1,11 @@ # Render {"$global":{"x":1,"serializedGlobals":["x"]}} ```html
+ @@ -28,6 +33,11 @@ container.querySelector("button").click() ```html
+ diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr.expected.md b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr.expected.md index cd0b05fe5..2257d5b9f 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/csr.expected.md @@ -1,6 +1,11 @@ # Render {"$global":{"x":1,"serializedGlobals":["x"]}} ```html
+ @@ -31,6 +36,8 @@ container.querySelector("button").click() ``` inserted div0/span0 removed #text after div0/span0 +inserted div0/#text1 +removed span after div0/#text1 ``` @@ -39,6 +46,11 @@ container.querySelector("button").click() ```html
+ @@ -49,6 +61,8 @@ container.querySelector("button").click() ``` inserted div0/#text0 removed span after div0/#text0 +inserted div0/span1 +removed #text after div0/span1 ``` @@ -70,4 +84,6 @@ container.querySelector("button").click() ``` inserted div0/span0 removed #text after div0/span0 +inserted div0/#text1 +removed span after div0/#text1 ``` \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js index df3b24406..ce3025cff 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js @@ -1,25 +1,33 @@ -// size: 347 (min) 225 (brotli) +// size: 488 (min) 250 (brotli) -import * as t from "@marko/runtime-tags/dom"; -import { init as a } from "@marko/runtime-tags/dom"; -const o = (a) => { - t.data(a[0], a.$global.x); +import * as a from "@marko/runtime-tags/dom"; +import { init as e } from "@marko/runtime-tags/dom"; +const n = (e) => { + a.data(e[0], e.$global.x); }, - r = t.register("a0", t.createRenderer(" ", "D ", o)), - n = t.conditional(0, 0), - e = t.effect("a1", (a) => - t.on( - a[1], + t = a.register( + "a0", + a.createRenderer("", "D ", n), + ), + r = (e) => { + a.data(e[0], e.$global.x); + }, + o = a.register("a1", a.createRenderer(" ", "D ", r)), + s = a.conditional(1, 0), + i = a.conditional(0, 0), + l = a.effect("a2", (e) => + a.on( + e[2], "click", - ((t) => { - const { 2: a } = t; + ((a) => { + const { 3: e } = a; return function () { - m(t, !a); + c(a, !e); }; - })(a), + })(e), ), ), - m = t.state(2, (t, a) => { - e(t), n(t, a ? r : null); + c = a.state(3, (a, e) => { + l(a), i(a, e ? o : null), s(a, e ? null : t); }); -a(); +e(); diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js index 3420e8495..1db8570b5 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js @@ -1,10 +1,15 @@ -export const _template_ = "
"; -export const _walks_ = /* next(1), replace, over(1), get, out(1) */"D%b l"; +export const _template_ = "
"; +export const _walks_ = /* next(1), replace, over(1), replace, over(1), get, out(1) */"D%b%b l"; import * as _$ from "@marko/runtime-tags/debug/dom"; +const _setup$ifBody2 = _scope => { + _$.data(_scope["#text/0"], _scope.$global.x); +}; +const _ifBody2 = _$.register("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer", /* @__PURE__ */_$.createRenderer("", /* next(1), get */"D ", _setup$ifBody2)); const _setup$ifBody = _scope => { _$.data(_scope["#text/0"], _scope.$global.x); }; const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(" ", /* next(1), get */"D ", _setup$ifBody)); +const _if2 = /* @__PURE__ */_$.conditional("#text/1", 0); const _if = /* @__PURE__ */_$.conditional("#text/0", 0); const _onClick = _scope => { const { @@ -14,10 +19,11 @@ const _onClick = _scope => { _show(_scope, !show); }; }; -const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope))); +const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope))); const _show = /* @__PURE__ */_$.state("show", (_scope, show) => { _show_effect(_scope); _if(_scope, show ? _ifBody : null); + _if2(_scope, !show ? _ifBody2 : null); }); export function _setup_(_scope) { _show(_scope, false); diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/html.expected/template.js index 7c0647cc3..00ff754c3 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/html.expected/template.js @@ -6,17 +6,28 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { let _ifScopeId, _ifRenderer; if (show) { const _scope1_id = _$.nextScopeId(); - _$.write(`${_$.escapeXML(_$.getStreamData().global.x)}`); + _$.write(`${_$.escapeXML(_$.$global().x)}`); _$.writeScope(_scope1_id, {}); _$.register(_ifRenderer = /* @__PURE__ */_$.createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_1_renderer"); _ifScopeId = _scope1_id; } - _$.write(`${_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _ifScopeId)}${_$.markResumeNode(_scope0_id, "#button/1")}
`); + _$.write(`${_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _ifScopeId)}`); + let _ifScopeId2, _ifRenderer2; + if (!show) { + const _scope2_id = _$.nextScopeId(); + _$.write(``); + _$.writeScope(_scope2_id, {}); + _$.register(_ifRenderer2 = /* @__PURE__ */_$.createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer"); + _ifScopeId2 = _scope2_id; + } + _$.write(`${_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/1", _ifScopeId2)}${_$.markResumeNode(_scope0_id, "#button/2")}
`); _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show"); _$.writeScope(_scope0_id, { "show": show, "#text/0(": _ifRenderer, - "#text/0!": _$.getScopeById(_ifScopeId) + "#text/0!": _$.getScopeById(_ifScopeId), + "#text/1(": _ifRenderer2, + "#text/1!": _$.getScopeById(_ifScopeId2) }); }); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko", _renderer); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume-sanitized.expected.md index 67668cb15..43cc2a6fe 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume-sanitized.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume-sanitized.expected.md @@ -1,6 +1,11 @@ # Render {"$global":{"x":1,"serializedGlobals":["x"]}} ```html
+ @@ -28,6 +33,11 @@ container.querySelector("button").click() ```html
+ diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume.expected.md index 0b959809f..19b2175b0 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/resume.expected.md @@ -5,13 +5,19 @@
+ + - +
@@ -34,13 +40,14 @@ container.querySelector("button").click() 1 + - +
@@ -50,6 +57,9 @@ container.querySelector("button").click() ``` inserted #document/html0/body1/div0/span0 removed #comment after #document/html0/body1/div0/span0 +removed #document/html0/body1/div0/#comment1 after span +inserted #document/html0/body1/div0/#comment1 +removed span after #document/html0/body1/div0/#comment1 ``` @@ -62,13 +72,18 @@ container.querySelector("button").click()
+ - +
@@ -78,6 +93,8 @@ container.querySelector("button").click() ``` inserted #document/html0/body1/div0/#comment0 removed span after #document/html0/body1/div0/#comment0 +inserted #document/html0/body1/div0/span1 +removed #comment after #document/html0/body1/div0/span1 ``` @@ -92,13 +109,14 @@ container.querySelector("button").click() 1 + - +
@@ -108,4 +126,6 @@ container.querySelector("button").click() ``` inserted #document/html0/body1/div0/span0 removed #comment after #document/html0/body1/div0/span0 +inserted #document/html0/body1/div0/#comment1 +removed span after #document/html0/body1/div0/#comment1 ``` \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr-sanitized.expected.md index 53e0cf27d..9fc1669de 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr-sanitized.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr-sanitized.expected.md @@ -1,6 +1,11 @@ # Render "End" ```html
+ diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr.expected.md index db5d39e79..7283ed38e 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/ssr.expected.md @@ -1,5 +1,5 @@ # Write -
+
# Render "End" @@ -9,13 +9,19 @@
+ + - +
@@ -28,9 +34,12 @@ inserted #document/html0/head0 inserted #document/html0/body1 inserted #document/html0/body1/div0 inserted #document/html0/body1/div0/#comment0 -inserted #document/html0/body1/div0/button1 -inserted #document/html0/body1/div0/button1/#text0 +inserted #document/html0/body1/div0/span1 +inserted #document/html0/body1/div0/span1/#text0 inserted #document/html0/body1/div0/#comment2 +inserted #document/html0/body1/div0/button3 +inserted #document/html0/body1/div0/button3/#text0 +inserted #document/html0/body1/div0/#comment4 inserted #document/html0/body1/script1 inserted #document/html0/body1/script1/#text0 ``` \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko index 4ca57d14b..30c4ee9a1 100644 --- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko +++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko @@ -3,6 +3,10 @@ ${$global.x} + + + ${$global.x} + diff --git a/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.js index 8e9caeee0..d322f6e56 100644 --- a/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.js @@ -1,6 +1,6 @@ import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); - _$.write(`
${_$.escapeXML(_$.getStreamData().global.x)}
`); + _$.write(`
${_$.escapeXML(_$.$global().x)}
`); }); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/migrate-out-global/template.marko", _renderer); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr-sanitized.expected.md index 138a0360f..5027b2bac 100644 --- a/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr-sanitized.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr-sanitized.expected.md @@ -1,4 +1,8 @@ -# Render "Error" +# Render "End" ```html - +
+ + 1 + +
``` \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr.expected.md index 4e1ab3c4e..e433dacff 100644 --- a/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr.expected.md +++ b/packages/translator-tags/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr.expected.md @@ -1,13 +1,27 @@ -# Emit error - TypeError: Cannot read properties of undefined (reading 'x') +# Write +
1
-# Render "Error" +# Render "End" ```html - + + + +
+ + 1 + +
+ + ``` # Mutations ``` - +inserted #document/html0 +inserted #document/html0/head0 +inserted #document/html0/body1 +inserted #document/html0/body1/div0 +inserted #document/html0/body1/div0/span0 +inserted #document/html0/body1/div0/span0/#text0 ``` \ No newline at end of file diff --git a/packages/translator-tags/src/visitors/referenced-identifier.ts b/packages/translator-tags/src/visitors/referenced-identifier.ts index b612751e5..5d074c7d0 100644 --- a/packages/translator-tags/src/visitors/referenced-identifier.ts +++ b/packages/translator-tags/src/visitors/referenced-identifier.ts @@ -45,10 +45,7 @@ export default { case "$global": if (isOutputHTML()) { identifier.replaceWith( - t.memberExpression( - t.callExpression(importRuntime("getStreamData"), []), - t.identifier("global"), - ), + t.callExpression(importRuntime("$global"), []), ); } else { identifier.replaceWith(