Data-driven declarative & extensible HTML form generation. github 
This is a support package for @thi.ng/rdom.
This package uses vanilla JS objects to define component specs for various types of form elements (various factory functions are provided). These specs can then be passed to the polymorphic & dynamically extensible compileForm() function to generate the actual form elements/components in hiccup format, which can then be used with thi.ng/rdom or for static (or SSR) HTML generation via thi.ng/hiccup. All generated form elements are unstyled by default, but can be fully customized (in various stages) via user-provided options.
import { compileForm, form, hidden, password, str, submit } from 'https://esm.run/@thi.ng/rdom-forms'; // compile form from given field descriptions const loginForm = compileForm( form({ action: "/login", method: "post" }, // string input str({ id: "user", label: "Username ", desc: "or email address" }), // password password({ id: "pass", label: "Password ", desc: "min. 8 characters", min: 8 }), // hidden form value hidden({ name: "target", value: "user-home" }), submit({ title: "Login", label: "" }) ), { // disable reactive value subscriptions behaviors: { values: false }, // customize attribs for label descriptions descAttribs: { class: "desc" } } ); // use thi.ng/hiccup to serialize as HTML import { serialize } from 'https://esm.run/@thi.ng/hiccup'; console.log(serialize(loginForm));
The following async functions are how we participate in the expectations of our ESM Snippet Template. The emit() function puts our form element on the page
export async function emit(el) { el.innerHTML = serialize(loginForm); };
and the bind() function, which in this case only sends a resize message to the parent window and provides information about the height of the current document body.
export async function bind(el) { window.parent.postMessage({ action: "resize", height: document.body.offsetHeight }, "*") };
# Application Frame
//wiki.ralfbarkow.ch/assets/pages/snippet-template/esm.html
See Create New Page