archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2026-02-01 16:07:13 +00:00
Code Issues Projects Releases Wiki Activity

fix: stateless event handlers in tags API

Browse Source
This commit is contained in:
LuLaValva 2026-01-12 13:41:31 -08:00 committed by Dylan Piercey
parent 68738ea895
commit 8eb4d4b552
15 changed files with 474 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/csr.expected.md Normal file
View File

@ -0,0 +1,55 @@
# Render
```html
<!---->
<button>
Say Hi
</button>
<span
id="display"
/>
```
# Mutations
```
INSERT #comment, #text0, #text1, span
INSERT button
INSERT button/#text0
INSERT button/#text4
INSERT button/#text1
INSERT button/#text3
INSERT button/#text2
```
# Render ASYNC
```html
<!---->
<button>
Say Hi
</button>
<span
id="display"
>
Hi!
</span>
```
# Mutations
```
INSERT span/#text
```
# Render
```js
container.querySelector("button").click();
```
```html
<!---->
<button>
Say Hi
</button>
<span
id="display"
>
Hi!
</span>
```

22
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/dom.expected/components/my-button/component-browser.js Normal file
View File

@ -0,0 +1,22 @@
import { t as _t } from "marko/src/runtime/vdom/index.js";
const _marko_componentType = "__tests__/components/my-button/component-browser.marko",
_marko_template = _t(_marko_componentType);
export default _marko_template;
export default class {
handleClick(e) {
if (!this.input.disabled) {
this.emit("click", e);
}
}
}
import _marko_renderer from "marko/src/runtime/components/renderer.js";
import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
_marko_registerComponent(_marko_componentType, () => _marko_template);
const _marko_component = {};
_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {}, {
t: _marko_componentType,
i: true,
d: true
}, _marko_component);
import _marko_defineComponent from "marko/src/runtime/components/defineComponent.js";
_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

24
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/dom.expected/components/my-button/index.js Normal file
View File

@ -0,0 +1,24 @@
import { t as _t } from "marko/src/runtime/vdom/index.js";
const _marko_componentType = "__tests__/components/my-button/index.marko",
_marko_template = _t(_marko_componentType);
export default _marko_template;
import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
import _marko_attrs from "marko/src/runtime/vdom/helpers/attrs.js";
import _marko_renderer from "marko/src/runtime/components/renderer.js";
import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
import _marko_split_component from "./component-browser.marko";
_marko_registerComponent(_marko_componentType, () => _marko_split_component);
const _marko_component = {};
_marko_split_component.renderer = _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
out.be("button", _marko_attrs(input), "0", _component, null, 4, {
"onclick": _componentDef.d("click", "handleClick", false)
});
_marko_dynamic_tag(out, input.renderBody, null, null, null, null, _componentDef, "1");
out.ee();
}, {
t: _marko_componentType,
s: true,
d: true
}, _marko_component);
import _marko_defineComponent from "marko/src/runtime/components/defineComponent.js";
_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

4
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/dom.expected/template.hydrate.js Normal file
View File

@ -0,0 +1,4 @@
import init6 from "virtual:./template.marko.hydrate-6.js import { init } from \"@marko/runtime-tags/debug/dom\";\nimport \"./template.marko\";\nexport default () => init();";
import init5 from "virtual:./template.marko.hydrate-5.js import { register, init } from \"marko/src/runtime/components/index.js\";\nimport component_0 from \"./components/my-button/component-browser.marko\";\nregister(\"__tests__/components/my-button/index.marko\", component_0);\nexport default () => init();";
init6();
init5();

19
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/dom.expected/template.js Normal file
View File

@ -0,0 +1,19 @@
import "marko/src/runtime/helpers/tags-compat/dom-debug.mjs";
export const $template = "<!><!><span id=display></span>";
export const $walks = /* over(1), replace, over(2) */"b%c";
import _myButton from "./components/my-button/index.marko";
import * as _ from "@marko/runtime-tags/debug/dom";
_._resume("__tests__/components/my-button/index.marko", _myButton);
_._resume_dynamic_tag();
const $mybutton_content = _._content_resume("__tests__/template.marko_1_content", "Say Hi", /* over(1) */"b");
const $dynamicTag = /* @__PURE__ */_._dynamic_tag("#text/0", $mybutton_content);
export function $setup($scope) {
$dynamicTag($scope, _myButton, () => ({
onClick: $onClick
}));
}
function $onClick() {
document.getElementById("display").innerHTML = "Hi!";
}
_._resume("__tests__/template.marko_0/onClick", $onClick);
export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

18
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/html.expected/components/my-button/component-browser.js Normal file
View File

@ -0,0 +1,18 @@
import { t as _t } from "marko/src/runtime/html/index.js";
const _marko_componentType = "__tests__/components/my-button/component-browser.marko",
_marko_template = _t(_marko_componentType);
export default _marko_template;
export default class {
handleClick(e) {
if (!this.input.disabled) {
this.emit("click", e);
}
}
}
import _marko_renderer from "marko/src/runtime/components/renderer.js";
const _marko_component = {};
_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {}, {
t: _marko_componentType,
i: true,
d: true
}, _marko_component);

20
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/html.expected/components/my-button/index.js Normal file
View File

@ -0,0 +1,20 @@
import { t as _t } from "marko/src/runtime/html/index.js";
const _marko_componentType = "__tests__/components/my-button/index.marko",
_marko_template = _t(_marko_componentType);
export default _marko_template;
import _marko_dynamic_tag from "marko/src/runtime/helpers/dynamic-tag.js";
import _marko_props from "marko/src/runtime/html/helpers/data-marko.js";
import _marko_attrs from "marko/src/runtime/html/helpers/attrs.js";
import _marko_renderer from "marko/src/runtime/components/renderer.js";
const _marko_component = {};
_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
out.w(`<button${_marko_props(out, _componentDef, {
"onclick": _componentDef.d("click", "handleClick", false)
})}${_marko_attrs(input)}>`);
_marko_dynamic_tag(out, input.renderBody, null, null, null, null, _componentDef, "1");
out.w("</button>");
}, {
t: _marko_componentType,
s: true,
d: true
}, _marko_component);

16
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/html.expected/template.js Normal file
View File

@ -0,0 +1,16 @@
import { s as _s } from "marko/src/runtime/helpers/tags-compat/html-debug.mjs";
import _myButton from "./components/my-button/index.marko";
_s(_myButton, "__tests__/components/my-button/index.marko");
import * as _ from "@marko/runtime-tags/debug/html";
export default _._template("__tests__/template.marko", input => {
const $scope0_id = _._scope_id();
_._dynamic_tag($scope0_id, "#text/0", _myButton, {
onClick: _._resume(function () {
document.getElementById("display").innerHTML = "Hi!";
}, "__tests__/template.marko_0/onClick")
}, _._content_resume("__tests__/template.marko_1_content", () => {
const $scope1_id = _._scope_id();
_._html("Say Hi");
}, $scope0_id), 0, 0);
_._html("<span id=display></span>");
});

195
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/resume.expected.md Normal file
View File

@ -0,0 +1,195 @@
# Render
```html
<html>
<head />
<body>
<button>
Say Hi
</button>
<span
id="display"
/>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0, 1,
{
m5c: "_0",
m5i: _.a = {
renderBody: _.c = {}
}
},
{
m5c: "_0-1"
}], _.a.renderBody = _._[
"__tests__/template.marko_1_content"
](_.c), _.b), _ =&gt; (_.d = [-3, _.c]), "$compat_setScope 3"];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
"w": [
["_0", 0, 2,
{
"e": [
["click", [
"__tests__/template.marko_0/onClick",
null
]]
],
"f": 1,
"r": [
"__tests__/template.marko_1_content",
1
]
}]
],
"t": [
"__tests__/components/my-button/index.marko"
]
});
M._.r.push("$compat_setScope 2");
M._.w()
</script>
</body>
</html>
```
# Mutations
```
INSERT html/body/#text0
INSERT html/body/#text1
REMOVE #comment before html/body/#text0
REMOVE #comment after html/body/#text1
INSERT html/body/button/#text0
INSERT html/body/button/#text4
INSERT html/body/button/#text1
INSERT html/body/button/#text3
REMOVE #comment after html/body/button/#text1
REMOVE #comment after html/body/button/#text2
REMOVE html/body/button/#text4 after html/body/button/#text3
INSERT html/body/button/#text4
```
# Render ASYNC
```html
<html>
<head />
<body>
<button>
Say Hi
</button>
<span
id="display"
>
Hi!
</span>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0, 1,
{
m5c: "_0",
m5i: _.a = {
renderBody: _.c = {}
}
},
{
m5c: "_0-1"
}], _.a.renderBody = _._[
"__tests__/template.marko_1_content"
](_.c), _.b), _ =&gt; (_.d = [-3, _.c]), "$compat_setScope 3"];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
"w": [
["_0", 0, 2,
{
"e": [
["click", [
"__tests__/template.marko_0/onClick",
null
]]
],
"f": 1,
"r": [
"__tests__/template.marko_1_content",
1
]
}]
],
"t": [
"__tests__/components/my-button/index.marko"
]
});
M._.r.push("$compat_setScope 2");
M._.w()
</script>
</body>
</html>
```
# Mutations
```
INSERT html/body/span/#text
```
# Render
```js
container.querySelector("button").click();
```
```html
<html>
<head />
<body>
<button>
Say Hi
</button>
<span
id="display"
>
Hi!
</span>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0, 1,
{
m5c: "_0",
m5i: _.a = {
renderBody: _.c = {}
}
},
{
m5c: "_0-1"
}], _.a.renderBody = _._[
"__tests__/template.marko_1_content"
](_.c), _.b), _ =&gt; (_.d = [-3, _.c]), "$compat_setScope 3"];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
"w": [
["_0", 0, 2,
{
"e": [
["click", [
"__tests__/template.marko_0/onClick",
null
]]
],
"f": 1,
"r": [
"__tests__/template.marko_1_content",
1
]
}]
],
"t": [
"__tests__/components/my-button/index.marko"
]
});
M._.r.push("$compat_setScope 2");
M._.w()
</script>
</body>
</html>
```

78
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/ssr.expected.md Normal file
View File

@ -0,0 +1,78 @@
# Write
<!--M#_0--><button><!--F#1-->Say Hi<!--F/--></button><!--M/--><span id=display></span><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,1,{m5c:"_0",m5i:_.a={renderBody:_.c={}}},{m5c:"_0-1"}],_.a.renderBody=_._["__tests__/template.marko_1_content"](_.c),_.b),_=>(_.d=[-3,_.c]),"$compat_setScope 3"];M._.w();$MC=(window.$MC||[]).concat({"p":"_","w":[["_0",0,2,{"e":[["click",["__tests__/template.marko_0/onClick",null]]],"f":1,"r":["__tests__/template.marko_1_content",1]}]],"t":["__tests__/components/my-button/index.marko"]});M._.r.push("$compat_setScope 2");M._.w()</script>
# Render End
```html
<html>
<head />
<body>
<!--M#_0-->
<button>
<!--F#1-->
Say Hi
<!--F/-->
</button>
<!--M/-->
<span
id="display"
/>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0, 1,
{
m5c: "_0",
m5i: _.a = {
renderBody: _.c = {}
}
},
{
m5c: "_0-1"
}], _.a.renderBody = _._[
"__tests__/template.marko_1_content"
](_.c), _.b), _ =&gt; (_.d = [-3, _.c]), "$compat_setScope 3"];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
"w": [
["_0", 0, 2,
{
"e": [
["click", [
"__tests__/template.marko_0/onClick",
null
]]
],
"f": 1,
"r": [
"__tests__/template.marko_1_content",
1
]
}]
],
"t": [
"__tests__/components/my-button/index.marko"
]
});
M._.r.push("$compat_setScope 2");
M._.w()
</script>
</body>
</html>
```
# Mutations
```
INSERT html
INSERT html/head
INSERT html/body
INSERT html/body/#comment0
INSERT html/body/button
INSERT html/body/button/#comment0
INSERT html/body/button/#text
INSERT html/body/button/#comment1
INSERT html/body/#comment1
INSERT html/body/span
INSERT html/body/script
INSERT html/body/script/#text
```

7
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/components/my-button/component-browser.marko Normal file
View File

@ -0,0 +1,7 @@
export default class {
handleClick(e) {
if (!this.input.disabled) {
this.emit("click", e)
}
}
}

3
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/components/my-button/index.marko Normal file
View File

@ -0,0 +1,3 @@
<button on-click("handleClick") ...input>
<${input.renderBody}/>
</button>

5
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/template.marko Normal file
View File

@ -0,0 +1,5 @@
// use tags
<my-button onClick() { document.getElementById("display")!.innerHTML = "Hi!" }>
Say Hi
</my-button>
<span#display/>

5
packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/test.ts Normal file
View File

@ -0,0 +1,5 @@
export const steps = [{}, click];
function click(container: Element) {
(container.querySelector("button") as HTMLButtonElement).click();
}

4
packages/runtime-tags/src/html/compat.ts
View File

@ -77,7 +77,9 @@ export const compat = {
if (!compatRegistered) {
const registered = getRegistered(this);
if (registered) {
const scopeId = getScopeId(registered.scope as Scope);
const scopeId = registered.scope
? getScopeId(registered.scope as Scope)
: undefined;
if (scopeId !== undefined) {
writeScopeToState(state, scopeId, {});
}