@microrender/html@0.1.2

latest

A basic HTML transformer for MicroRender.

JSR Score

94%

Published

3 months ago (0.1.2)

HTML

A basic SSR html transformer for MicroRender.

Example

import { HTMLRewriter, type Element } from "jsr:@microrender/html"

// Compile this using ESBuild and @microrender/html/compiler
import html from "./template.html"

const rewriter = new HTMLRewriter()

rewriter.on("#content", (el: Element) => {
  el.attr.style = "border: 1px solid lightgrey; border-radius: 1rem";
  el.setChildString("Hello from Javascript!")
})

// `deno serve` / cloudflare workers
export default {
  fetch() {
    return rewriter.transformToResponse(html)
  }
}

MicroRender will eventually provide a fragment-based approach to this which will also include CSR reactivity and fragment nesting.

Contained here

@microrender/html/compiler: AOT compiler for HTML documents.
@microrender/html/nodes: Typing for the HTML nodes produced by @microrender/html/compiler.
@microrender/html/selectors: CSS selector parsing and matching.
@microrender/html/transform: Lower-level transform API to transform and serialise HTML nodes.
@microrender/html/rewriter: Higher-level transform API that manages element overrides and selector parsing automatically. Vaguely inspired by Cloudflare Workers's HTMLRewriter API.

All submodules except @microrender/html/compiler (which is a build-time dependency, not run-time) are re-exported as @microrender/html.

CSS Selectors

@microrender/html uses CSS selectors to decide which elements to transform. The implementation status is below:

Selector	Parser	Matcher	SelectorType enum member	Description
`:not(...)`	✅	✅	`SelectorType.NOT`	not
Compound Selectors	✅	✅	`SelectorType.AND`	and
Selector List	✅	✅	`SelectorType.OR`	or
`:is(...)`, `:where(...)`	✅	✅	`SelectorType.OR`	selector lists within compound or complex selectors
`+`	✅	✅	`SelectorType.LAST_SIBLING`	next sibling
`~`	✅	✅	`SelectorType.ANTECEDENT_SIBLLING`	subsequent sibling
`>`	✅	✅	`SelectorType.PARENT`	child
	✅	✅	`SelectorType.ANCESTOR`	descendant
`*`	✅	✅	`SelectorType.ANY`	any
`element`	✅	✅	`SelectorType.ELEMENT`	element
`#id`	✅	✅	`SelectorType.ATTR_EXACT`	id attribute
`.class`	✅	✅	`SelectorType.ATTR_MATCHES`	class attribute
`[attr]`	✅	✅	`SelectorType.ATTR_EXISTS`	attribute exists
`[attr=value]`	✅	✅	`SelectorType.ATTR_EXACT` or `SelectorType.ATTR_EXACT_I`	attribute exact equals
`[attr~=value]`	✅	✅	`SelectorType.ATTR_MATCHES`	attribute whitespace-separated list
`[attr\|=value]`	✅	✅	`SelectorType.ATTR_MATCHES`	attribute hyphen-separated list first item
`[attr^=value]`	✅	✅	`SelectorType.ATTR_MATCHES`	attribute begins with
`[attr$=value]`	✅	✅	`SelectorType.ATTR_MATCHES`	attribute ends with
`[attr*=value]`	✅	✅	`SelectorType.ATTR_MATCHES`	attribute contains
`[attr=value s]`	✅	✅	`SelectorType.ATTR_EXACT` or `SelectorType.ATTR_MATCHES`	case-sensitive attr mode
`[attr=value i]`	✅	✅	`SelectorType.ATTR_EXACT_I` or `SelectorType.ATTR_MATCHES`	case-insensitive attr mode
`:first-child`	✅	✅	`SelectorType.NTH_CHILD_SINGLE`	first child
`:first-of-type`	❎	❎		first child of type
`:nth-child(a)`	✅	✅	`SelectorType.NTH_CHILD_SINGLE`	nth child, single matches
`:nth-child(an+b)`	✅	✅	`SelectorType.NTH_CHILD_MULTIPLE`	nth child, multiple match
`:nth-of-type(...)`	❎	❎		nth child of element type
`:last-child`	❎	❎		last child
`:last-of-type`	❎	❎		last child of element type
`:nth-last-child(...)`	❎	❎		nth child from end
`:nth-last-of-type(...)`	❎	❎		nth last child of type from end
`:has(...)`	❎	❎		switch hierarchal selector direction

Note that SelectorTypes are based from the perpective of the element being matched, so many are named the inverse of the actual selector name.

SelectorType.ATTR_EXACT and SelectorType.ATTR_EXACT_I are higher performance replacements for ATTR_MATCHES (which uses a regex) when making exact comparisons (ie. =, not |= or similar).

Add Package

deno add jsr:@microrender/html

Import symbol

import * as html from "@microrender/html";

---- OR ----

Import directly with a jsr specifier

import * as html from "jsr:@microrender/html";

Add Package

npx jsr add @microrender/html

Import symbol

import * as html from "@microrender/html";

Add Package

yarn dlx jsr add @microrender/html

Import symbol

import * as html from "@microrender/html";

Add Package

pnpm dlx jsr add @microrender/html

Import symbol

import * as html from "@microrender/html";

Add Package

bunx jsr add @microrender/html

Import symbol

import * as html from "@microrender/html";