aboutsummaryrefslogtreecommitdiff
path: root/test/bun.js/solid-dom-fixtures/attributeExpressions
diff options
context:
space:
mode:
Diffstat (limited to 'test/bun.js/solid-dom-fixtures/attributeExpressions')
-rw-r--r--test/bun.js/solid-dom-fixtures/attributeExpressions/code.js115
-rw-r--r--test/bun.js/solid-dom-fixtures/attributeExpressions/output.bun.js155
-rw-r--r--test/bun.js/solid-dom-fixtures/attributeExpressions/output.js241
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="&lt;div/&gt;"/></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"]);