rename str to html str
...because I have plans to implement more content types
This commit is contained in:
parent
1a67959b1a
commit
6c175effb4
2 changed files with 29 additions and 24 deletions
|
@ -2,14 +2,14 @@ import { assertEquals } from "testing/asserts.ts";
|
||||||
import { TextNode } from "../core/node.ts";
|
import { TextNode } from "../core/node.ts";
|
||||||
import { E, F } from "./node.ts";
|
import { E, F } from "./node.ts";
|
||||||
|
|
||||||
import { StrRenderer } from "./str.ts";
|
import { HtmlStrRenderer } from "./html_str.ts";
|
||||||
|
|
||||||
Deno.test({
|
Deno.test({
|
||||||
name: "should render text node",
|
name: "should render text node",
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const tn = new TextNode("hello world");
|
const tn = new TextNode("hello world");
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(tn);
|
const res = ren.render(tn);
|
||||||
|
|
||||||
assertEquals(res, "hello world");
|
assertEquals(res, "hello world");
|
||||||
|
@ -21,7 +21,7 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const el = E("p", [], "hello world");
|
const el = E("p", [], "hello world");
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(el);
|
const res = ren.render(el);
|
||||||
|
|
||||||
assertEquals(res, "<p>hello world</p>");
|
assertEquals(res, "<p>hello world</p>");
|
||||||
|
@ -33,7 +33,7 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const frag = F([]);
|
const frag = F([]);
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(frag);
|
const res = ren.render(frag);
|
||||||
|
|
||||||
assertEquals(res, "");
|
assertEquals(res, "");
|
||||||
|
@ -49,7 +49,7 @@ Deno.test({
|
||||||
E("p", [], "world"),
|
E("p", [], "world"),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(frag);
|
const res = ren.render(frag);
|
||||||
|
|
||||||
assertEquals(res, 'hello world<div class="hello"></div><p>world</p>');
|
assertEquals(res, 'hello world<div class="hello"></div><p>world</p>');
|
||||||
|
@ -65,7 +65,7 @@ Deno.test({
|
||||||
]),
|
]),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
|
||||||
assertEquals(res, '<body><div id="root"><p>hello world</p></div></body>');
|
assertEquals(res, '<body><div id="root"><p>hello world</p></div></body>');
|
||||||
|
@ -81,7 +81,7 @@ Deno.test({
|
||||||
]),
|
]),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
|
||||||
assertEquals(
|
assertEquals(
|
||||||
|
@ -96,7 +96,7 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const layout = E("html", []);
|
const layout = E("html", []);
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
|
||||||
assertEquals(res, "<!doctype html><html></html>");
|
assertEquals(res, "<!doctype html><html></html>");
|
||||||
|
@ -108,7 +108,7 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const layout = E("html", []);
|
const layout = E("html", []);
|
||||||
|
|
||||||
const ren = new StrRenderer({
|
const ren = new HtmlStrRenderer({
|
||||||
doctype:
|
doctype:
|
||||||
'html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"',
|
'html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"',
|
||||||
});
|
});
|
||||||
|
@ -126,7 +126,7 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const layout = E("body", [], []);
|
const layout = E("body", [], []);
|
||||||
|
|
||||||
const ren = new StrRenderer({ forceRenderDoctype: true });
|
const ren = new HtmlStrRenderer({ forceRenderDoctype: true });
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
|
||||||
assertEquals(res, "<!doctype html><body></body>");
|
assertEquals(res, "<!doctype html><body></body>");
|
||||||
|
@ -138,7 +138,9 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const layout = E("body", [], []);
|
const layout = E("body", [], []);
|
||||||
|
|
||||||
const ren = new StrRenderer({ wrapNode: (node) => E("html", [], [node]) });
|
const ren = new HtmlStrRenderer({
|
||||||
|
wrapNode: (node) => E("html", [], [node]),
|
||||||
|
});
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
|
||||||
assertEquals(res, "<!doctype html><html><body></body></html>");
|
assertEquals(res, "<!doctype html><html><body></body></html>");
|
||||||
|
@ -154,7 +156,7 @@ Deno.test({
|
||||||
rel: "nofollow noopener",
|
rel: "nofollow noopener",
|
||||||
}, "hello world");
|
}, "hello world");
|
||||||
|
|
||||||
const ren = new StrRenderer({
|
const ren = new HtmlStrRenderer({
|
||||||
onVisitAttr: ([key, val]) => [`data-${key}`, val],
|
onVisitAttr: ([key, val]) => [`data-${key}`, val],
|
||||||
});
|
});
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
@ -173,7 +175,7 @@ Deno.test({
|
||||||
href: "/hello/world",
|
href: "/hello/world",
|
||||||
}, "hello world");
|
}, "hello world");
|
||||||
|
|
||||||
const ren = new StrRenderer({
|
const ren = new HtmlStrRenderer({
|
||||||
onVisitAttr: ([key, val]) => [key, "/eng" + val],
|
onVisitAttr: ([key, val]) => [key, "/eng" + val],
|
||||||
});
|
});
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
@ -190,7 +192,7 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const layout = E("input", { type: "number", disabled: false });
|
const layout = E("input", { type: "number", disabled: false });
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
|
||||||
assertEquals(
|
assertEquals(
|
||||||
|
@ -205,7 +207,7 @@ Deno.test({
|
||||||
fn: () => {
|
fn: () => {
|
||||||
const layout = E("input", { type: "number", disabled: true });
|
const layout = E("input", { type: "number", disabled: true });
|
||||||
|
|
||||||
const ren = new StrRenderer();
|
const ren = new HtmlStrRenderer();
|
||||||
const res = ren.render(layout);
|
const res = ren.render(layout);
|
||||||
|
|
||||||
assertEquals(
|
assertEquals(
|
|
@ -13,14 +13,14 @@ import {
|
||||||
import { concat, join } from "../core/utils.ts";
|
import { concat, join } from "../core/utils.ts";
|
||||||
import { Renderer } from "./types.ts";
|
import { Renderer } from "./types.ts";
|
||||||
|
|
||||||
interface StrRendererOpts {
|
interface HtmlStrRendererOpts {
|
||||||
doctype?: string;
|
doctype?: string;
|
||||||
forceRenderDoctype?: boolean;
|
forceRenderDoctype?: boolean;
|
||||||
wrapNode?: (node: AnyNode) => AnyNode;
|
wrapNode?: (node: AnyNode) => AnyNode;
|
||||||
onVisitAttr?: (entry: AttrEntry, params: OnVisitAttrParams) => AttrEntry;
|
onVisitAttr?: (entry: AttrEntry, params: OnVisitAttrParams) => AttrEntry;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface StrRendererHooks {
|
interface HtmlStrRendererHooks {
|
||||||
onVisitAttr: (entry: AttrEntry, params: OnVisitAttrParams) => AttrEntry;
|
onVisitAttr: (entry: AttrEntry, params: OnVisitAttrParams) => AttrEntry;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -29,13 +29,13 @@ export interface OnVisitAttrParams {
|
||||||
readonly attrs: Attrs;
|
readonly attrs: Attrs;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class StrRenderer implements Renderer<string> {
|
export class HtmlStrRenderer implements Renderer<string> {
|
||||||
#doctype: string;
|
#doctype: string;
|
||||||
#forceRenderDoctype: boolean;
|
#forceRenderDoctype: boolean;
|
||||||
#wrapNode: (node: AnyNode) => AnyNode;
|
#wrapNode: (node: AnyNode) => AnyNode;
|
||||||
#hooks: StrRendererHooks;
|
#hooks: HtmlStrRendererHooks;
|
||||||
|
|
||||||
constructor(opts?: StrRendererOpts) {
|
constructor(opts?: HtmlStrRendererOpts) {
|
||||||
this.#doctype = opts?.doctype ?? "html";
|
this.#doctype = opts?.doctype ?? "html";
|
||||||
this.#forceRenderDoctype = opts?.forceRenderDoctype ?? false;
|
this.#forceRenderDoctype = opts?.forceRenderDoctype ?? false;
|
||||||
this.#wrapNode = opts?.wrapNode ?? identity;
|
this.#wrapNode = opts?.wrapNode ?? identity;
|
||||||
|
@ -63,7 +63,7 @@ function encodeDoctype(value: string): string {
|
||||||
return `<!doctype ${value}>`;
|
return `<!doctype ${value}>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function encodeAnyNode(node: AnyNode, hooks: StrRendererHooks): string {
|
function encodeAnyNode(node: AnyNode, hooks: HtmlStrRendererHooks): string {
|
||||||
return isTextNode(node)
|
return isTextNode(node)
|
||||||
? encodeTextNode(node)
|
? encodeTextNode(node)
|
||||||
: isFragment(node)
|
: isFragment(node)
|
||||||
|
@ -75,13 +75,16 @@ function encodeTextNode(node: TextNode): string {
|
||||||
return node.innerText;
|
return node.innerText;
|
||||||
}
|
}
|
||||||
|
|
||||||
function encodeHtmlFragment(node: Fragment, hooks: StrRendererHooks): string {
|
function encodeHtmlFragment(
|
||||||
|
node: Fragment,
|
||||||
|
hooks: HtmlStrRendererHooks,
|
||||||
|
): string {
|
||||||
return concat(node.children.map((ch) => encodeAnyNode(ch, hooks)));
|
return concat(node.children.map((ch) => encodeAnyNode(ch, hooks)));
|
||||||
}
|
}
|
||||||
|
|
||||||
function encodeHtmlElement(
|
function encodeHtmlElement(
|
||||||
{ tagName, attrs, children }: Elem,
|
{ tagName, attrs, children }: Elem,
|
||||||
hooks: StrRendererHooks,
|
hooks: HtmlStrRendererHooks,
|
||||||
): string {
|
): string {
|
||||||
const open = `<${join(" ", [tagName, encodeAttrs(tagName, attrs, hooks)])}>`;
|
const open = `<${join(" ", [tagName, encodeAttrs(tagName, attrs, hooks)])}>`;
|
||||||
if (isSelfClosedTagName(tagName)) return open;
|
if (isSelfClosedTagName(tagName)) return open;
|
||||||
|
@ -93,7 +96,7 @@ function encodeHtmlElement(
|
||||||
function encodeAttrs(
|
function encodeAttrs(
|
||||||
tagName: string,
|
tagName: string,
|
||||||
attrs: Attrs,
|
attrs: Attrs,
|
||||||
hooks: StrRendererHooks,
|
hooks: HtmlStrRendererHooks,
|
||||||
): string {
|
): string {
|
||||||
return join(
|
return join(
|
||||||
" ",
|
" ",
|
Reference in a new issue