Compare commits
5 commits
f1d6a2e989
...
1a67959b1a
| Author | SHA1 | Date | |
|---|---|---|---|
| 1a67959b1a | |||
| 6a03f421b3 | |||
| d39979645d | |||
| 0a70e34a13 | |||
| c3014d690b |
6 changed files with 146 additions and 34 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,8 +1,5 @@
|
|||
/*
|
||||
|
||||
# editors
|
||||
!/.vscode
|
||||
|
||||
# makefile
|
||||
!/makefile
|
||||
|
||||
|
|
|
|||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"editor.tabSize": 2
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
import { Nilable } from "./utils.ts";
|
||||
|
||||
export type Attrs = Record<string, string>;
|
||||
export type Attrs = Record<string, AttrVal>;
|
||||
export type AttrEntry = [key: string, value: AttrVal];
|
||||
export type AttrVal = boolean | string;
|
||||
export type AnyNode = Fragment | FragmentNode;
|
||||
|
||||
export function isTextNode(val: unknown): val is TextNode {
|
||||
|
|
|
|||
12
makefile
12
makefile
|
|
@ -1,12 +1,8 @@
|
|||
|
||||
build:
|
||||
npx tsc && make fix-decl
|
||||
test-w:
|
||||
deno test --watch
|
||||
|
||||
watch:
|
||||
npx tsc-watch --onSuccess "make fix-decl"
|
||||
test:
|
||||
deno test
|
||||
|
||||
fix-decl:
|
||||
./scripts/fix_decl.sh
|
||||
|
||||
clean:
|
||||
rm -rf lib
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { assertEquals } from "testing/asserts.ts";
|
||||
import { E, F, TextNode } from "../core/node.ts";
|
||||
import { TextNode } from "../core/node.ts";
|
||||
import { E, F } from "./node.ts";
|
||||
|
||||
import { StrRenderer } from "./str.ts";
|
||||
|
||||
|
|
@ -131,3 +132,85 @@ Deno.test({
|
|||
assertEquals(res, "<!doctype html><body></body>");
|
||||
},
|
||||
});
|
||||
|
||||
Deno.test({
|
||||
name: "should wrap node",
|
||||
fn: () => {
|
||||
const layout = E("body", [], []);
|
||||
|
||||
const ren = new StrRenderer({ wrapNode: (node) => E("html", [], [node]) });
|
||||
const res = ren.render(layout);
|
||||
|
||||
assertEquals(res, "<!doctype html><html><body></body></html>");
|
||||
},
|
||||
});
|
||||
|
||||
Deno.test({
|
||||
name: "should change attr key",
|
||||
fn: () => {
|
||||
const layout = E("a", {
|
||||
target: "_blank",
|
||||
href: "/hello/world",
|
||||
rel: "nofollow noopener",
|
||||
}, "hello world");
|
||||
|
||||
const ren = new StrRenderer({
|
||||
onVisitAttr: ([key, val]) => [`data-${key}`, val],
|
||||
});
|
||||
const res = ren.render(layout);
|
||||
|
||||
assertEquals(
|
||||
res,
|
||||
'<a data-target="_blank" data-href="/hello/world" data-rel="nofollow noopener">hello world</a>',
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
Deno.test({
|
||||
name: "should change attr value",
|
||||
fn: () => {
|
||||
const layout = E("a", {
|
||||
href: "/hello/world",
|
||||
}, "hello world");
|
||||
|
||||
const ren = new StrRenderer({
|
||||
onVisitAttr: ([key, val]) => [key, "/eng" + val],
|
||||
});
|
||||
const res = ren.render(layout);
|
||||
|
||||
assertEquals(
|
||||
res,
|
||||
'<a href="/eng/hello/world">hello world</a>',
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
Deno.test({
|
||||
name: "should filter attr",
|
||||
fn: () => {
|
||||
const layout = E("input", { type: "number", disabled: false });
|
||||
|
||||
const ren = new StrRenderer();
|
||||
const res = ren.render(layout);
|
||||
|
||||
assertEquals(
|
||||
res,
|
||||
'<input type="number">',
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
Deno.test({
|
||||
name: "should render boolean attr",
|
||||
fn: () => {
|
||||
const layout = E("input", { type: "number", disabled: true });
|
||||
|
||||
const ren = new StrRenderer();
|
||||
const res = ren.render(layout);
|
||||
|
||||
assertEquals(
|
||||
res,
|
||||
'<input type="number" disabled>',
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
73
ren/str.ts
73
ren/str.ts
|
|
@ -1,6 +1,8 @@
|
|||
import {
|
||||
AnyNode,
|
||||
AttrEntry,
|
||||
Attrs,
|
||||
AttrVal,
|
||||
Elem,
|
||||
Fragment,
|
||||
isElem,
|
||||
|
|
@ -14,63 +16,98 @@ import { Renderer } from "./types.ts";
|
|||
interface StrRendererOpts {
|
||||
doctype?: string;
|
||||
forceRenderDoctype?: boolean;
|
||||
wrapNode?: (node: AnyNode) => AnyNode;
|
||||
onVisitAttr?: (entry: AttrEntry, params: OnVisitAttrParams) => AttrEntry;
|
||||
}
|
||||
|
||||
interface StrRendererHooks {
|
||||
onVisitAttr: (entry: AttrEntry, params: OnVisitAttrParams) => AttrEntry;
|
||||
}
|
||||
|
||||
export interface OnVisitAttrParams {
|
||||
readonly tagName: string;
|
||||
readonly attrs: Attrs;
|
||||
}
|
||||
|
||||
export class StrRenderer implements Renderer<string> {
|
||||
#opts: StrRendererOpts;
|
||||
#doctype: string;
|
||||
#forceRenderDoctype: boolean;
|
||||
#wrapNode: (node: AnyNode) => AnyNode;
|
||||
#hooks: StrRendererHooks;
|
||||
|
||||
constructor(opts?: StrRendererOpts) {
|
||||
this.#opts = opts ?? {};
|
||||
this.#doctype = opts?.doctype ?? "html";
|
||||
this.#forceRenderDoctype = opts?.forceRenderDoctype ?? false;
|
||||
this.#wrapNode = opts?.wrapNode ?? identity;
|
||||
this.#hooks = {
|
||||
onVisitAttr: opts?.onVisitAttr ?? identity,
|
||||
};
|
||||
}
|
||||
|
||||
render(node: AnyNode): string {
|
||||
const shouldRenderDoctype = this.#opts.forceRenderDoctype ||
|
||||
(isElem(node) && node.tagName === "html");
|
||||
const wrappedNode = this.#wrapNode(node);
|
||||
const shouldRenderDoctype = this.#forceRenderDoctype ||
|
||||
(isElem(wrappedNode) && wrappedNode.tagName === "html");
|
||||
return concat([
|
||||
shouldRenderDoctype && encodeDoctype(this.#opts.doctype),
|
||||
encodeAnyNode(node),
|
||||
shouldRenderDoctype && encodeDoctype(this.#doctype),
|
||||
encodeAnyNode(wrappedNode, this.#hooks),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
function encodeDoctype(value?: string): string {
|
||||
return `<!doctype ${value ?? "html"}>`;
|
||||
function identity<T>(val: T): T {
|
||||
return val;
|
||||
}
|
||||
|
||||
function encodeAnyNode(node: AnyNode): string {
|
||||
function encodeDoctype(value: string): string {
|
||||
return `<!doctype ${value}>`;
|
||||
}
|
||||
|
||||
function encodeAnyNode(node: AnyNode, hooks: StrRendererHooks): string {
|
||||
return isTextNode(node)
|
||||
? encodeTextNode(node)
|
||||
: isFragment(node)
|
||||
? encodeHtmlFragment(node)
|
||||
: encodeHtmlElement(node);
|
||||
? encodeHtmlFragment(node, hooks)
|
||||
: encodeHtmlElement(node, hooks);
|
||||
}
|
||||
|
||||
function encodeTextNode(node: TextNode): string {
|
||||
return node.innerText;
|
||||
}
|
||||
|
||||
function encodeHtmlFragment(node: Fragment): string {
|
||||
return concat(node.children.map(encodeAnyNode));
|
||||
function encodeHtmlFragment(node: Fragment, hooks: StrRendererHooks): string {
|
||||
return concat(node.children.map((ch) => encodeAnyNode(ch, hooks)));
|
||||
}
|
||||
|
||||
function encodeHtmlElement(
|
||||
{ tagName, attrs, children }: Elem,
|
||||
hooks: StrRendererHooks,
|
||||
): string {
|
||||
const open = `<${join(" ", [tagName, encodeAttrs(attrs)])}>`;
|
||||
const open = `<${join(" ", [tagName, encodeAttrs(tagName, attrs, hooks)])}>`;
|
||||
if (isSelfClosedTagName(tagName)) return open;
|
||||
|
||||
const encodedChildren = children.map(encodeAnyNode);
|
||||
const encodedChildren = children.map((ch) => encodeAnyNode(ch, hooks));
|
||||
return `${open}${concat(encodedChildren)}</${tagName}>`;
|
||||
}
|
||||
|
||||
function encodeAttrs(attrs: Attrs): string {
|
||||
function encodeAttrs(
|
||||
tagName: string,
|
||||
attrs: Attrs,
|
||||
hooks: StrRendererHooks,
|
||||
): string {
|
||||
return join(
|
||||
" ",
|
||||
Object.entries(attrs).map(([key, value]) => encodeAttr(key, value)),
|
||||
Object.entries(attrs).map((entry) => {
|
||||
const [key, value] = hooks.onVisitAttr(entry, { tagName, attrs });
|
||||
return encodeAttr(key, value);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function encodeAttr(key: string, value: string): string {
|
||||
function encodeAttr(key: string, value: AttrVal): string {
|
||||
if (typeof value === "boolean") {
|
||||
return value ? key : "";
|
||||
}
|
||||
return `${key}="${value}"`;
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in a new issue