mirror of
https://github.com/marko-js/marko.git
synced 2026-02-01 16:07:13 +00:00
fix: tags api reference in ssr (#2360)
This commit is contained in:
Dylan Piercey
GitHub
parent
77c22d6079
commit
c94a263389
6
.changeset/giant-melons-think.md
Normal file
6
.changeset/giant-melons-think.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@marko/translator-tags": patch
|
||||
"@marko/runtime-tags": patch
|
||||
---
|
||||
|
||||
Fix issue with referencing $global in tags api SSR.
|
||||
@ -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<t.${t}>;`,
|
||||
).join(BREAK),
|
||||
);
|
||||
|
||||
export default result;
|
||||
|
||||
@ -24,10 +24,10 @@ export {
|
||||
} from "./html/dynamic-tag";
|
||||
export { createTemplate } from "./html/template";
|
||||
export {
|
||||
$global,
|
||||
ensureScopeWithId,
|
||||
fork,
|
||||
getScopeById,
|
||||
getStreamData,
|
||||
markResumeCleanup,
|
||||
markResumeControlEnd,
|
||||
markResumeControlSingleNodeEnd,
|
||||
|
||||
@ -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<T>(
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
# Render {"$global":{"x":1,"serializedGlobals":["x"]}}
|
||||
```html
|
||||
<div>
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
@ -28,6 +33,11 @@ container.querySelector("button").click()
|
||||
|
||||
```html
|
||||
<div>
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
# Render {"$global":{"x":1,"serializedGlobals":["x"]}}
|
||||
```html
|
||||
<div>
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
@ -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
|
||||
<div>
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
@ -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
|
||||
```
|
||||
@ -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("<span> </span>", "D ", o)),
|
||||
n = t.conditional(0, 0),
|
||||
e = t.effect("a1", (a) =>
|
||||
t.on(
|
||||
a[1],
|
||||
t = a.register(
|
||||
"a0",
|
||||
a.createRenderer("<span class=hidden> </span>", "D ", n),
|
||||
),
|
||||
r = (e) => {
|
||||
a.data(e[0], e.$global.x);
|
||||
},
|
||||
o = a.register("a1", a.createRenderer("<span> </span>", "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();
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
export const _template_ = "<div><!><button>Toggle</button></div>";
|
||||
export const _walks_ = /* next(1), replace, over(1), get, out(1) */"D%b l";
|
||||
export const _template_ = "<div><!><!><button>Toggle</button></div>";
|
||||
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("<span class=hidden> </span>", /* 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("<span> </span>", /* 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);
|
||||
|
||||
@ -6,17 +6,28 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
|
||||
let _ifScopeId, _ifRenderer;
|
||||
if (show) {
|
||||
const _scope1_id = _$.nextScopeId();
|
||||
_$.write(`<span>${_$.escapeXML(_$.getStreamData().global.x)}</span>`);
|
||||
_$.write(`<span>${_$.escapeXML(_$.$global().x)}</span>`);
|
||||
_$.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)}<button>Toggle</button>${_$.markResumeNode(_scope0_id, "#button/1")}</div>`);
|
||||
_$.write(`${_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _ifScopeId)}`);
|
||||
let _ifScopeId2, _ifRenderer2;
|
||||
if (!show) {
|
||||
const _scope2_id = _$.nextScopeId();
|
||||
_$.write(`<span class=hidden>${_$.escapeXML(_$.$global().x)}</span>`);
|
||||
_$.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)}<button>Toggle</button>${_$.markResumeNode(_scope0_id, "#button/2")}</div>`);
|
||||
_$.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);
|
||||
@ -1,6 +1,11 @@
|
||||
# Render {"$global":{"x":1,"serializedGlobals":["x"]}}
|
||||
```html
|
||||
<div>
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
@ -28,6 +33,11 @@ container.querySelector("button").click()
|
||||
|
||||
```html
|
||||
<div>
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
|
||||
@ -5,13 +5,19 @@
|
||||
<body>
|
||||
<div>
|
||||
<!--M_|0 #text/0 -->
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<!--M_|0 #text/1 1-->
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
<!--M_*0 #button/1-->
|
||||
<!--M_*0 #button/2-->
|
||||
</div>
|
||||
<script>
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a={0:{show:!1},$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={0:{show:!1,"#text/1(":_._["packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer"],"#text/1!":_.a={}},1:_.a,$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -34,13 +40,14 @@ container.querySelector("button").click()
|
||||
<span>
|
||||
1
|
||||
</span>
|
||||
<!--M_|0 #text/1 1-->
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
<!--M_*0 #button/1-->
|
||||
<!--M_*0 #button/2-->
|
||||
</div>
|
||||
<script>
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a={0:{show:!1},$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={0:{show:!1,"#text/1(":_._["packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer"],"#text/1!":_.a={}},1:_.a,$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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()
|
||||
<body>
|
||||
<div>
|
||||
<!--M_|0 #text/0 -->
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
<!--M_*0 #button/1-->
|
||||
<!--M_*0 #button/2-->
|
||||
</div>
|
||||
<script>
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a={0:{show:!1},$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={0:{show:!1,"#text/1(":_._["packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer"],"#text/1!":_.a={}},1:_.a,$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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()
|
||||
<span>
|
||||
1
|
||||
</span>
|
||||
<!--M_|0 #text/1 1-->
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
<!--M_*0 #button/1-->
|
||||
<!--M_*0 #button/2-->
|
||||
</div>
|
||||
<script>
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a={0:{show:!1},$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={0:{show:!1,"#text/1(":_._["packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer"],"#text/1!":_.a={}},1:_.a,$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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
|
||||
```
|
||||
@ -1,6 +1,11 @@
|
||||
# Render "End"
|
||||
```html
|
||||
<div>
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Write
|
||||
<div><!--M_|0 #text/0 --><button>Toggle</button><!--M_*0 #button/1--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a={0:{show:!1},$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()</script>
|
||||
<div><!--M_|0 #text/0 --><span class=hidden>1</span><!--M_|0 #text/1 1--><button>Toggle</button><!--M_*0 #button/2--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={0:{show:!1,"#text/1(":_._["packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer"],"#text/1!":_.a={}},1:_.a,$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()</script>
|
||||
|
||||
|
||||
# Render "End"
|
||||
@ -9,13 +9,19 @@
|
||||
<body>
|
||||
<div>
|
||||
<!--M_|0 #text/0 -->
|
||||
<span
|
||||
class="hidden"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<!--M_|0 #text/1 1-->
|
||||
<button>
|
||||
Toggle
|
||||
</button>
|
||||
<!--M_*0 #button/1-->
|
||||
<!--M_*0 #button/2-->
|
||||
</div>
|
||||
<script>
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a={0:{show:!1},$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={0:{show:!1,"#text/1(":_._["packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_2_renderer"],"#text/1!":_.a={}},1:_.a,$:{x:1}}),0,"packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show",0];M._.w()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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
|
||||
```
|
||||
@ -3,6 +3,10 @@
|
||||
<if=show>
|
||||
<span>${$global.x}</span>
|
||||
</if>
|
||||
|
||||
<if=!show>
|
||||
<span.hidden>${$global.x}</span>
|
||||
</if>
|
||||
<button onClick() { show = !show; }>
|
||||
Toggle
|
||||
</button>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as _$ from "@marko/runtime-tags/debug/html";
|
||||
const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
|
||||
const _scope0_id = _$.nextScopeId();
|
||||
_$.write(`<div><span>${_$.escapeXML(_$.getStreamData().global.x)}</span></div>`);
|
||||
_$.write(`<div><span>${_$.escapeXML(_$.$global().x)}</span></div>`);
|
||||
});
|
||||
export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/migrate-out-global/template.marko", _renderer);
|
||||
@ -1,4 +1,8 @@
|
||||
# Render "Error"
|
||||
# Render "End"
|
||||
```html
|
||||
|
||||
<div>
|
||||
<span>
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
@ -1,13 +1,27 @@
|
||||
# Emit error
|
||||
TypeError: Cannot read properties of undefined (reading 'x')
|
||||
# Write
|
||||
<div><span>1</span></div>
|
||||
|
||||
|
||||
# Render "Error"
|
||||
# Render "End"
|
||||
```html
|
||||
|
||||
<html>
|
||||
<head />
|
||||
<body>
|
||||
<div>
|
||||
<span>
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# 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
|
||||
```
|
||||
@ -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(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user