Factories.ts: Build HTML/SVG/MathML with plain TypeScript…
0 reactions
Factories.ts: Build HTML/SVG/MathML with plain TypeScript functions, no template engine
**Factories.ts** is a lightweight DSL for generating markup directly in JavaScript/TypeScript. Elements are ordinary functions you nest together, so the full structure is built with regular JS/TS, including loops, conditionals, and type checking, instead of a separate template language:
import { ul, li } from "@ts-series/factories"
const items = [
{ name: "Coffee", inStock: true },
{ name: "Tea", inStock: false },
];
const list = ul(
... items.map(item =>
li(item.name, item.inStock ? null : " (sold out)")
.class(item.inStock ? "available" : "unavailable")
)
);
console.log(list.expand());import { ul, li } from "@ts-series/factories"
const items = [
{ name: "Coffee", inStock: true },
{ name: "Tea", inStock: false },
];
const list = ul(
... items.map(item =>
li(item.name, item.inStock ? null : " (sold out)")
.class(item.inStock ? "available" : "unavailable")
)
);
console.log(list.expand());
The functions, referred to here as "factories", return element objects that store their content as plain arrays. This makes the approach highly efficient and, unlike JSX, requires no separate build process.
Works in Deno and Node.
#programming #dev #technology
**Factories.ts** is a lightweight DSL for generating markup directly in JavaScript/TypeScript. Elements are ordinary functions you nest together, so the full structure is built with regular JS/TS, including loops, conditionals, and type checking, instead of a separate template language:
import { ul, li } from "@ts-series/factories"
const items = [
{ name: "Coffee", inStock: true },
{ name: "Tea", inStock: false },
];
const list = ul(
... items.map(item =>
li(item.name, item.inStock ? null : " (sold out)")
.class(item.inStock ? "available" : "unavailable")
)
);
console.log(list.expand());import { ul, li } from "@ts-series/factories"
const items = [
{ name: "Coffee", inStock: true },
{ name: "Tea", inStock: false },
];
const list = ul(
... items.map(item =>
li(item.name, item.inStock ? null : " (sold out)")
.class(item.inStock ? "available" : "unavailable")
)
);
console.log(list.expand());
The functions, referred to here as "factories", return element objects that store their content as plain arrays. This makes the approach highly efficient and, unlike JSX, requires no separate build process.
Works in Deno and Node.
#programming #dev #technology
| 4,000 mlx | |
| 5 | |
| 0 |