diff options
Diffstat (limited to 'test/bun.js/solid-dom-fixtures/attributeExpressions')
3 files changed, 511 insertions, 0 deletions
diff --git a/test/bun.js/solid-dom-fixtures/attributeExpressions/code.js b/test/bun.js/solid-dom-fixtures/attributeExpressions/code.js new file mode 100644 index 000000000..b64949434 --- /dev/null +++ b/test/bun.js/solid-dom-fixtures/attributeExpressions/code.js @@ -0,0 +1,115 @@ +const selected = true; +let id = "my-h1"; +let link; +const template = ( + <div + id="main" + {...results} + classList={{ selected: unknown }} + style={{ color }} + > + <h1 + class="base" + id={id} + {...results()} + disabled + readonly="" + title={welcoming()} + style={{ "background-color": color(), "margin-right": "40px" }} + classList={{ dynamic: dynamic(), selected }} + > + <a href={"/"} ref={link} classList={{ "ccc ddd": true }} readonly={value}> + Welcome + </a> + </h1> + </div> +); + +const template2 = ( + <div {...getProps("test")}> + <div textContent={rowId} /> + <div textContent={row.label} /> + <div innerHTML={"<div/>"} /> + </div> +); + +const template3 = ( + <div + id={/*@once*/ state.id} + style={/*@once*/ { "background-color": state.color }} + name={state.name} + textContent={/*@once*/ state.content} + /> +); + +const template4 = ( + <div class="hi" className={state.class} classList={{ "ccc:ddd": true }} /> +); + +const template5 = <div class="a" className="b"></div>; + +const template6 = <div style={someStyle()} textContent="Hi" />; + +const template7 = ( + <div + style={{ + "background-color": color(), + "margin-right": "40px", + ...props.style, + }} + style:padding-top={props.top} + class:my-class={props.active} + /> +); + +let refTarget; +const template8 = <div ref={refTarget} />; + +const template9 = <div ref={(e) => console.log(e)} />; + +const template10 = <div ref={refFactory()} />; + +const template11 = <div use:something use:another={thing} use:zero={0} />; + +const template12 = <div prop:htmlFor={thing} />; + +const template13 = <input type="checkbox" checked={true} />; + +const template14 = <input type="checkbox" checked={state.visible} />; + +const template15 = <div class="`a">`$`</div>; + +const template16 = ( + <button + class="static" + classList={{ + hi: "k", + }} + type="button" + > + Write + </button> +); + +const template17 = ( + <button + classList={{ + a: true, + b: true, + c: true, + }} + onClick={increment} + > + Hi + </button> +); + +const template18 = ( + <div + {...{ + get [key()]() { + return props.value; + }, + }} + /> +); diff --git a/test/bun.js/solid-dom-fixtures/attributeExpressions/output.bun.js b/test/bun.js/solid-dom-fixtures/attributeExpressions/output.bun.js new file mode 100644 index 000000000..4bb3e1b39 --- /dev/null +++ b/test/bun.js/solid-dom-fixtures/attributeExpressions/output.bun.js @@ -0,0 +1,155 @@ +var _tmpl = _template$( + '<div id="main"><h1 class="base" disabled readonly><a href="/">Welcome</a></h1></div>', + 6 + ), + _tmpl$2 = _template$( + '<div><div/><div/><div innerHTML="<div/>"/></div>', + 2 + ), + _tmpl$2 = _template$("<div/>", 0), + _tmpl$3 = _template$('<div class="hi"/>', 0), + _tmpl$5 = _template$('<div class="a" class="b"/>', 0), + _tmpl$5 = _template$('<div textContent="Hi"/>', 0), + _tmpl$6 = _template$("<div use:something use:zero=0/>", 0), + _tmpl$8 = _template$('<input type="checkbox" checked/>', 0), + _tmpl$8 = _template$('<input type="checkbox"/>', 0), + _tmpl$10 = _template$('<div class="`a">`$`</div>', 2), + _tmpl$10 = _template$( + '<button class="static" type="button">Write</button>', + 2 + ), + _tmpl$11 = _template$("<button>Hi</button>", 2); +const selected = true; +let id = "my-h1"; +let link; +const template = () => { + var _el = _tmpl.cloneNode(true), + _el$1 = _el.firstChild, + _el$2 = _el$1.nextSibling; + effect(() => { + return setAttribute(_el, "classList", { selected: unknown }); + }); + setAttribute(_el$1, "id", id); + effect(() => { + return setAttribute(_el$1, "title", welcoming()); + }); + effect(() => { + return setAttribute(_el$1, "classList", { dynamic: dynamic(), selected }); + }); + setAttribute(_el$2, "ref", link); + effect(() => { + return setAttribute(_el$2, "classList", { "ccc ddd": true }); + }); + setAttribute(_el$2, "readonly", value); + return _el; +}; +const template2 = () => { + var _el = _tmpl$1.cloneNode(true), + _el$1 = _el.firstChild; + setAttribute(_el, "textContent", rowId); + effect(() => { + return setAttribute(_el$1, "textContent", row.label); + }); + return _el; +}; +const template3 = () => { + var _el = _tmpl$2.cloneNode(true); + effect(() => { + return setAttribute(_el, "id", state.id); + }); + effect(() => { + return setAttribute(_el, "name", state.name); + }); + effect(() => { + return setAttribute(_el, "textContent", state.content); + }); + return _el; +}; +const template4 = () => { + var _el = _tmpl$3.cloneNode(true); + effect(() => { + return setAttribute(_el, "className", state.class); + }); + effect(() => { + return setAttribute(_el, "classList", { "ccc:ddd": true }); + }); + return _el; +}; +const template5 = _tmpl$5.cloneNode(true); +const template6 = () => { + var _el = _tmpl$5.cloneNode(true); + return _el; +}; +const template7 = () => { + var _el = _tmpl$2.cloneNode(true); + effect(() => { + return setAttribute(_el, "style:padding-top", props.top); + }); + effect(() => { + return setAttribute(_el, "class:my-class", props.active); + }); + return _el; +}; +let refTarget; +const template8 = () => { + var _el = _tmpl$2.cloneNode(true); + setAttribute(_el, "ref", refTarget); + return _el; +}; +const template9 = () => { + var _el = _tmpl$2.cloneNode(true); + effect(() => { + return setAttribute(_el, "ref", (e) => console.log(e)); + }); + return _el; +}; +const template10 = () => { + var _el = _tmpl$2.cloneNode(true); + effect(() => { + return setAttribute(_el, "ref", refFactory()); + }); + return _el; +}; +const template11 = () => { + var _el = _tmpl$6.cloneNode(true); + setAttribute(_el, "use:another", thing); + return _el; +}; +const template12 = () => { + var _el = _tmpl$2.cloneNode(true); + setAttribute(_el, "prop:htmlFor", thing); + return _el; +}; +const template13 = _tmpl$8.cloneNode(true); +const template14 = () => { + var _el = _tmpl$8.cloneNode(true); + effect(() => { + return setAttribute(_el, "checked", state.visible); + }); + return _el; +}; +const template15 = _tmpl$10.cloneNode(true); +const template16 = () => { + var _el = _tmpl$10.cloneNode(true); + effect(() => { + return setAttribute(_el, "classList", { + hi: "k", + }); + }); + return _el; +}; +const template17 = () => { + var _el = _tmpl$11.cloneNode(true); + effect(() => { + return setAttribute(_el, "classList", { + a: true, + b: true, + c: true, + }); + }); + effect(() => { + return (_el.$$click = increment); + }); + return _el; +}; +const template18 = _tmpl$2.cloneNode(true); diff --git a/test/bun.js/solid-dom-fixtures/attributeExpressions/output.js b/test/bun.js/solid-dom-fixtures/attributeExpressions/output.js new file mode 100644 index 000000000..14f700218 --- /dev/null +++ b/test/bun.js/solid-dom-fixtures/attributeExpressions/output.js @@ -0,0 +1,241 @@ +const _tmpl$ = /*#__PURE__*/ _$template( + `<div id="main"><h1 class="base selected" id="my-h1" disabled readonly=""><a href="/">Welcome</a></h1></div>`, + 6 + ), + _tmpl$2 = /*#__PURE__*/ _$template( + `<div><div></div><div> </div><div></div></div>`, + 8 + ), + _tmpl$3 = /*#__PURE__*/ _$template(`<div></div>`, 2), + _tmpl$4 = /*#__PURE__*/ _$template(`<div class="a b"></div>`, 2), + _tmpl$5 = /*#__PURE__*/ _$template(`<input type="checkbox">`, 1), + _tmpl$6 = /*#__PURE__*/ _$template(`<div class="\`a">\`$\`</div>`, 2), + _tmpl$7 = /*#__PURE__*/ _$template( + `<button class="static hi" type="button">Write</button>`, + 2 + ), + _tmpl$8 = /*#__PURE__*/ _$template(`<button class="a b c">Hi</button>`, 2); + +const selected = true; +let id = "my-h1"; +let link; + +const template = (() => { + const _el$ = _tmpl$.cloneNode(true), + _el$2 = _el$.firstChild, + _el$3 = _el$2.firstChild; + + _$spread(_el$, results, false, true); + + _el$.classList.toggle("selected", unknown); + + _el$.style.setProperty("color", color); + + _$spread(_el$2, results, false, true); + + _el$2.style.setProperty("margin-right", "40px"); + + const _ref$ = link; + typeof _ref$ === "function" ? _ref$(_el$3) : (link = _el$3); + + _$classList(_el$3, { + "ccc ddd": true, + }); + + _el$3.readOnly = value; + + _$effect( + (_p$) => { + const _v$ = welcoming(), + _v$2 = color(), + _v$3 = !!dynamic(); + + _v$ !== _p$._v$ && _$setAttribute(_el$2, "title", (_p$._v$ = _v$)); + _v$2 !== _p$._v$2 && + _el$2.style.setProperty("background-color", (_p$._v$2 = _v$2)); + _v$3 !== _p$._v$3 && _el$2.classList.toggle("dynamic", (_p$._v$3 = _v$3)); + return _p$; + }, + { + _v$: undefined, + _v$2: undefined, + _v$3: undefined, + } + ); + + return _el$; +})(); + +const template2 = (() => { + const _el$4 = _tmpl$2.cloneNode(true), + _el$5 = _el$4.firstChild, + _el$6 = _el$5.nextSibling, + _el$7 = _el$6.firstChild, + _el$8 = _el$6.nextSibling; + + _$spread(_el$4, () => getProps("test"), false, true); + + _el$5.textContent = rowId; + _el$8.innerHTML = "<div/>"; + + _$effect(() => (_el$7.data = row.label)); + + return _el$4; +})(); + +const template3 = (() => { + const _el$9 = _tmpl$3.cloneNode(true); + + _$setAttribute(_el$9, "id", state.id); + + _el$9.style.setProperty("background-color", state.color); + + _el$9.textContent = state.content; + + _$effect(() => _$setAttribute(_el$9, "name", state.name)); + + return _el$9; +})(); + +const template4 = (() => { + const _el$10 = _tmpl$3.cloneNode(true); + + _$classList(_el$10, { + "ccc:ddd": true, + }); + + _$effect(() => _$className(_el$10, `hi ${state.class || ""}`)); + + return _el$10; +})(); + +const template5 = _tmpl$4.cloneNode(true); + +const template6 = (() => { + const _el$12 = _tmpl$3.cloneNode(true); + + _el$12.textContent = "Hi"; + + _$effect((_$p) => _$style(_el$12, someStyle(), _$p)); + + return _el$12; +})(); + +const template7 = (() => { + const _el$13 = _tmpl$3.cloneNode(true); + + _$effect( + (_p$) => { + const _v$4 = { + "background-color": color(), + "margin-right": "40px", + ...props.style, + }, + _v$5 = props.top, + _v$6 = !!props.active; + + _p$._v$4 = _$style(_el$13, _v$4, _p$._v$4); + _v$5 !== _p$._v$5 && + _el$13.style.setProperty("padding-top", (_p$._v$5 = _v$5)); + _v$6 !== _p$._v$6 && + _el$13.classList.toggle("my-class", (_p$._v$6 = _v$6)); + return _p$; + }, + { + _v$4: undefined, + _v$5: undefined, + _v$6: undefined, + } + ); + + return _el$13; +})(); + +let refTarget; + +const template8 = (() => { + const _el$14 = _tmpl$3.cloneNode(true); + + const _ref$2 = refTarget; + typeof _ref$2 === "function" ? _ref$2(_el$14) : (refTarget = _el$14); + return _el$14; +})(); + +const template9 = (() => { + const _el$15 = _tmpl$3.cloneNode(true); + + ((e) => console.log(e))(_el$15); + + return _el$15; +})(); + +const template10 = (() => { + const _el$16 = _tmpl$3.cloneNode(true); + + const _ref$3 = refFactory(); + + typeof _ref$3 === "function" && _ref$3(_el$16); + return _el$16; +})(); + +const template11 = (() => { + const _el$17 = _tmpl$3.cloneNode(true); + + zero(_el$17, () => 0); + another(_el$17, () => thing); + something(_el$17, () => true); + return _el$17; +})(); + +const template12 = (() => { + const _el$18 = _tmpl$3.cloneNode(true); + + _el$18.htmlFor = thing; + return _el$18; +})(); + +const template13 = (() => { + const _el$19 = _tmpl$5.cloneNode(true); + + _el$19.checked = true; + return _el$19; +})(); + +const template14 = (() => { + const _el$20 = _tmpl$5.cloneNode(true); + + _$effect(() => (_el$20.checked = state.visible)); + + return _el$20; +})(); + +const template15 = _tmpl$6.cloneNode(true); + +const template16 = _tmpl$7.cloneNode(true); + +const template17 = (() => { + const _el$23 = _tmpl$8.cloneNode(true); + + _$addEventListener(_el$23, "click", increment, true); + + return _el$23; +})(); + +const template18 = (() => { + const _el$24 = _tmpl$3.cloneNode(true); + + _$spread( + _el$24, + () => ({ + get [key()]() { + return props.value; + }, + }), + false, + false + ); + + return _el$24; +})(); + +_$delegateEvents(["click"]); |