Skip to content

Commit daaa368

Browse files
sanderhahnsanderhahn
committed
feat: add new APIs for raw, comment and toHtml
1 parent 6bb01d5 commit daaa368

8 files changed

Lines changed: 358 additions & 88 deletions

File tree

‎.github/workflows/actions.yaml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ jobs:
2727
# stored as a .lcov file which integrates well with services such as Codecov, Coveralls and Travis CI.
2828
- run: deno coverage --lcov coverage > cov.lcov
2929

30+
- name: Upload coverage to Coveralls.io
31+
# Any code coverage service can be used, Coveralls.io is used here as an example.
32+
uses: coverallsapp/github-action@master
33+
with:
34+
github-token: ${{ secrets.GITHUB_TOKEN }} # Generated by GitHub.
35+
path-to-lcov: cov.lcov
36+
3037
publish:
3138
runs-on: ubuntu-latest
3239

‎README.md‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@ flexible functions.
1010
- Great for templating or dynamic HTML generation in TypeScript/JavaScript
1111
projects.
1212

13+
## API
14+
15+
- `html`: Generate an HTML source document from the `HtmlNode`, with options
16+
for: `doctype`, `indentText`, and `insertNewLines`.
17+
- `tag`: Generate an HTML tag, can have attributes and an arbitrary number of
18+
children nodes as arguments.
19+
- `raw`: Insert raw unescaped HTML.
20+
- `comment`: Generate an HTML comment.
21+
- `toHtml`: Convert an object value to an `HtmlNode`.
22+
1323
## Installation
1424

1525
To install the library, use:
@@ -27,37 +37,55 @@ bunx jsr add @sander/html
2737
Here’s a quick example to get started:
2838

2939
```typescript
30-
import { html, tag } from "@sander/html";
40+
import { assertEquals } from "@std/assert";
41+
import { html, tag } from "./html.ts";
3142

32-
// Generate a simple HTML structure
3343
const page = html(
3444
tag("html", [
3545
tag("h1", "Welcome to HTML Generator"),
36-
tag("p", "This is an example of generated HTML."),
46+
tag("div", { class: "banner" }, "This is an example of generated HTML."),
3747
]),
3848
{
3949
doctype: "html",
4050
},
4151
);
4252

43-
console.log(page);
44-
// Output:
45-
// <!doctype html>
46-
// <html>
47-
// <h1>
48-
// Welcome to HTML Generator
49-
// </h1>
50-
// <p>
51-
// This is an example of generated HTML.
52-
// </p>
53-
// </html>
53+
assertEquals(
54+
page,
55+
`\
56+
<!doctype html>
57+
<html>
58+
<h1>
59+
Welcome to HTML Generator
60+
</h1>
61+
<div class="banner">
62+
This is an example of generated HTML.
63+
</div>
64+
</html>
65+
`,
66+
);
5467
```
5568

5669
For a longer example, check out [`example.ts`](./example.ts).
5770

71+
The `ToHtml` interface with an `toHtml` method can be used implement custom
72+
types that can be converted to HTML.
73+
74+
```ts
75+
import { type HtmlNode, tag, type ToHtml } from "@sander/html";
76+
77+
class Custom implements ToHtml {
78+
constructor(public value: string) {}
79+
80+
toHtml(): HtmlNode {
81+
return tag("div", { class: "custom" }, this.value);
82+
}
83+
}
84+
```
85+
5886
## Prerequisites
5987

60-
- Deno
88+
- Deno, Node, Bun, or another JavaScript runtime.
6189

6290
## Contributing
6391

‎deno.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
{
22
"name": "@sander/html",
3-
"version": "0.1.4",
3+
"version": "0.1.5",
44
"license": "MIT",
55
"exports": "./mod.ts",
66
"tasks": {
77
"test": "deno test --doc",
8+
"test:watch": "deno test --watch",
89
"doc": "deno doc --html html.ts",
910
"coverage": "rm -Rf ./coverage && deno test --coverage && deno coverage ./coverage",
1011
"coverage:html": "rm -Rf ./coverage && deno test --coverage && deno coverage ./coverage --html",
1112
"embed:example": "deno run -A embed_example.ts"
1213
},
1314
"authors": [
1415
"Sander Hahn <sanderhahn@gmail.com>"
15-
]
16+
],
17+
"imports": {
18+
"@std/assert": "jsr:@std/assert@^1.0.10"
19+
}
1620
}

‎deno.lock‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { html, type HtmlNode, tag } from "./html.ts";
2-
import { assertEquals } from "jsr:@std/assert/equals";
1+
import { html, type HtmlNode, tag } from "@sander/html";
2+
import { assertEquals } from "@std/assert";
33

44
const title = "Cool Projects";
55

@@ -23,7 +23,7 @@ const cssRules = [
2323
];
2424

2525
function list(items: HtmlNode[]) {
26-
return tag("ul", {}, items.map((item) => tag("li", {}, item)));
26+
return tag("ul", items.map((item) => tag("li", item)));
2727
}
2828

2929
function link({ title, url }: Project) {
@@ -32,13 +32,13 @@ function link({ title, url }: Project) {
3232

3333
const result = html(
3434
tag("html", { lang: "en" }, [
35-
tag("head", {}, [
35+
tag("head", [
3636
tag("meta", { charset: "utf-8" }),
37-
tag("title", {}, title),
38-
tag("style", {}, cssRules),
37+
tag("title", title),
38+
tag("style", cssRules),
3939
]),
40-
tag("body", {}, [
41-
tag("h1", {}, title),
40+
tag("body", [
41+
tag("h1", title),
4242
list(projects.map(link)),
4343
]),
4444
]),

0 commit comments

Comments
 (0)