createElement
What?
Forgive the unoriginal module name, but this 'script is here to encourage you to use the browser native document
interface,
rather than any attempt to brand itself.
A few principles here:
- (0) Save space, save bandwidth, save parse time.
For writing out HTML with attached events, the DOM API is so full-featured there is no need for a template DSL or front end framework.
Take responsibility for every kilobyte you ship to your users.
The lib
contains a handful of functions and is measured in bytes (~492 bytes with gzip/minify) rather than kilobytes.
- (1) There's no need for document query selectors.
Avoid the class of errors caused by over or under-binding events, the need to match class/id/tag, or waiting for your elements to appear on the document. Leave classNames for styling.
Bind events to elements created in memory, before they are attached to the document. Attach/append to the document when you are ready to give an interactive element to the user, not to query or store intermediate application states.
- (2) Components are still the way to go.
This is a rejection of front end frameworks, diff algorithms, even jQuery, but it is not a rejection of component-based view architecture.
Even using the document
API, you can still compose your views by a hierarchy of components.
Related Information
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
http://youmightnotneedjquery.com/
Similar to: https://github.com/hyperhype/hyperscript + https://github.com/ohanhi/hyperscript-helpers
Import
// CJS module styleconst createElement = ;const render = createElementrender;const nominate = createElementnominate;
// ESM style, also available in TypeScript
import { createElement, nominate, render } from 'nominal-create-element/createElement.esm';
API
Although there is only one source file of 100 lines, here is the API:
;;;
You'll mostly use a partial binding of the createElement
function with the tag already provided, via the
nominate(string)
function.
;;
You can also use the provided render
function if you adhere to a certain component interface.
examples
"Hold the phone, my friend. What about bundlers and typescript
and tsx
and component organization? Take me straight to the enterprisey example."
or, start simple:
const div = ;const span = ;
Create a simple element.
; // HTMLDivElement
Create an element with a css class
.
;
Create an element with a css class
, some body text and additional attributes
.
;
; // no attributes.
Nest elements
;
A todo list example.
; const div = ;const li = ;const ul = ;const form = ;const input = ;const h = ;const button = ; /** * * @implements component_t * */ { /** * @type */ thislist = 'add something to my todo list' ; /** @type */ thisform = null; /** @type */ thisinput = null; /** @type */ thiselement = null; } /** * @returns */ { // This is equivalent to the following HTML: const html = ` <div style="margin: 25px; padding: 15px;"> <h5>To Do List</h5> <ul> <li>add something to my todo list</li> </ul> <form> <input placeholder="Enter to submit"> <button type="submit">Add</button> </form> </div> `; return thiselement = ; } var todo = ;documentbody;
Test
open test.html
in your browser.
Curios
An HTML
-to-createElement
converter can be found here.
An enterprisey example written in ts/tsx
can be found here.