Page MenuHomeSealhub
Files F7112566

derived.ts
No OneTemporary
Actions

derived.ts
View Options

import { randomUUID } from "crypto";
import { FlatTemplatable, tempstream } from "tempstream";
import { FormField } from "../fields/field";
import { FormControl } from "./form-control";
export class Derived<
Consts extends Record<string, unknown> | undefined
> extends FormControl {
role = <const>"decoration";
constructor(
public fields: FormField[],
public _render: (
values: Record<string, string>,
consts: Consts
) => string,
public consts: Consts
) {
super();
}
render(): FlatTemplatable {
const id = "A" + randomUUID(); // the A makes it always a valid id, as it cannot start with a number
return tempstream/* HTML */ `<div>
<script>
(function () {
const consts = {
${Object.entries(this.consts || {})
.map(([key, value]) => {
return `"${key}": ${
typeof value === "object"
? JSON.stringify(value)
: (value as string).toString()
}`;
})
.join(",")},
};
const form_container =
document.currentScript.closest(".form-container");
const render = ${this._render.toString()};
function getValues() {
return Object.fromEntries(
${JSON.stringify(
this.fields.map((field) => field.name)
)}.map((field_name) => {
let input = form_container.querySelector(
\`input[name="\${field_name}"]\`
);
if (input.type === "radio") {
input = form_container.querySelector(
\`input[name="\${field_name}"]:checked\`
);
}
return [field_name, input.value];
})
);
}
function setupWatcher(field_name) {
form_container
.querySelectorAll(\`input[name="\${field_name}"]\`)
.forEach((input) => {
input.onchange = () => {
document.querySelector("#${id}").innerHTML =
render(getValues(), consts);
};
});
}
${JSON.stringify(
this.fields.map((field) => field.name)
)}.forEach(setupWatcher);
setTimeout(
() =>
(document.querySelector("#${id}").innerHTML =
render(getValues(), consts)),
0
);
})();
</script>
<div id="${id}">${this._render({}, this.consts)}</div>
</div>`;
}
}

File Metadata

Mime Type
text/html
Expires
Thu, Jul 3, 20:56 (15 h, 29 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
797788
Default Alt Text
derived.ts (2 KB)

Event Timeline