Hello World!
');
- expect(renderedHtml).toContain('Another div
');
- });
+ it('should add classes based on the ClassRecord', () => {
+ const renderedHtml = jsonToHtml(sampleNodeMap, [classRecordPlugin])
+ expect(renderedHtml).toContain('Hello World!
')
+ expect(renderedHtml).toContain('Another div
')
+ })
- it("should not add classes with a value of false", () => {
- const renderedHtml = jsonToHtml(sampleNodeMap, [classRecordPlugin]);
- expect(renderedHtml).not.toContain("class-two");
- });
-});
+ it('should not add classes with a value of false', () => {
+ const renderedHtml = jsonToHtml(sampleNodeMap, [classRecordPlugin])
+ expect(renderedHtml).not.toContain('class-two')
+ })
+})
-describe("Markdown Plugin with jsonToHtml", () => {
- it("should convert a simple markdown text to HTML", () => {
+describe('Markdown Plugin with jsonToHtml', () => {
+ it('should convert a simple markdown text to HTML', () => {
const input = {
sampleId: {
- tag: "div",
- markdown: "# Hello\nThis is **bold**.",
+ tag: 'div',
+ markdown: '# Hello\nThis is **bold**.',
},
- };
+ }
- const output = jsonToHtml(input, [markdownPlugin]);
+ const output = jsonToHtml(input, [markdownPlugin])
- const expectedOutput = `Hello
\nThis is bold.
Hello
\nThis is bold.
Just a regular div.
`;
- expect(output).toBe(expectedOutput);
- });
-});
+ const expectedOutput = `Just a regular div.
`
+ expect(output).toBe(expectedOutput)
+ })
+})
diff --git a/htmlody/htmlody-plugins.ts b/htmlody/htmlody-plugins.ts
index f980f31..62ee3c4 100644
--- a/htmlody/htmlody-plugins.ts
+++ b/htmlody/htmlody-plugins.ts
@@ -1,70 +1,70 @@
-import { convertMarkdownToHTML } from "../utils/text-utils";
-import { ExtensionRec, JsonTagElNode, ResponsiveClassRecord } from "./htmlody-types";
+import { convertMarkdownToHTML } from '../utils/text-utils'
+import { ExtensionRec, JsonTagElNode, ResponsiveClassRecord } from './htmlody-types'
// this will be the node that will be attached to our json node
export type ClassRecordAttributes = {
- cr?: ResponsiveClassRecord;
-};
+ cr?: ResponsiveClassRecord
+}
-export type CRNode = JsonTagElNodeSample Content
');
- });
+ ]
+ const html = jsonToHtml(nodeMap, plugins)
+ expect(html).toBe('Sample Content
')
+ })
- it("should throw an error if tag name is not provided", () => {
+ it('should throw an error if tag name is not provided', () => {
const nodeMap = {
div: {
attributes: {
- class: "sample-class",
+ class: 'sample-class',
},
- content: "Sample Content",
+ content: 'Sample Content',
},
- }; // @ts-expect-error
- const plugins = [];
+ } // @ts-expect-error
+ const plugins = []
expect(() =>
// @ts-expect-error
@@ -118,251 +118,248 @@ describe("jsonToHtml", () => {
}),
).toThrow(
'Tag name not provided for node. \n \n Content: Sample Content\n\n {\n "attributes": {\n "class": "sample-class"\n },\n "content": "Sample Content"\n}\n ',
- );
- });
+ )
+ })
- it("should render entire HTML structure from node map", () => {
+ it('should render entire HTML structure from node map', () => {
const nodeMap: JsonHtmlNodeTree = {
div_id1: {
- tag: "div",
- content: "Sample Content",
+ tag: 'div',
+ content: 'Sample Content',
attributes: {
- id: "sample-id",
- class: "sample-class",
+ id: 'sample-id',
+ class: 'sample-class',
},
child: {
span_id1: {
- tag: "span",
- content: "Child Content",
+ tag: 'span',
+ content: 'Child Content',
},
},
},
- };
-
- const rendered = jsonToHtml(nodeMap, []);
- expect(rendered).toContain(nodeMap.div_id1.content);
- expect(rendered).toContain(nodeMap.div_id1.attributes!.id);
- expect(rendered).toContain(nodeMap.div_id1.attributes!.class);
- expect(rendered).toContain(nodeMap.div_id1.child!.span_id1.content);
- });
-});
-
-describe("renderChildren", () => {
- it("should render children recursively", () => {
+ }
+
+ const rendered = jsonToHtml(nodeMap, [])
+ expect(rendered).toContain(nodeMap.div_id1.content)
+ expect(rendered).toContain(nodeMap.div_id1.attributes!.id)
+ expect(rendered).toContain(nodeMap.div_id1.attributes!.class)
+ expect(rendered).toContain(nodeMap.div_id1.child!.span_id1.content)
+ })
+})
+
+describe('renderChildren', () => {
+ it('should render children recursively', () => {
const children: JsonHtmlNodeTree = {
div_id: {
- tag: "div",
+ tag: 'div',
content: `content-${Math.floor(Math.random() * 1000)}`,
},
- };
- const rendered = renderChildrenNodes(children, []);
- expect(rendered).toContain(children.div_id.content);
- });
-});
+ }
+ const rendered = renderChildrenNodes(children, [])
+ expect(rendered).toContain(children.div_id.content)
+ })
+})
-describe("getValidatedTagName", () => {
+describe('getValidatedTagName', () => {
it("should return the tag name if it's valid", () => {
- const tagName = "div";
- const result = validateTagName(tagName);
- expect(result).toBe(tagName);
- });
+ const tagName = 'div'
+ const result = validateTagName(tagName)
+ expect(result).toBe(tagName)
+ })
- it("should throw an error for invalid tags", () => {
- expect(() => validateTagName("invalidTag")).toThrow("Invalid tag name provided: invalidTag");
- });
-});
+ it('should throw an error for invalid tags', () => {
+ expect(() => validateTagName('invalidTag')).toThrow('Invalid tag name provided: invalidTag')
+ })
+})
-describe("getValidatedAttributesStr", () => {
+describe('getValidatedAttributesStr', () => {
it("should return the attributes string if it's valid", () => {
- const attributesStr = 'id="test"';
- const result = getValidatedAttributesStr(attributesStr);
- expect(result).toBe(attributesStr);
- });
-
- it("should throw an error for invalid attributes string", () => {
- expect(() => getValidatedAttributesStr("invalid=attr")).toThrow("Invalid attributes string provided: invalid=attr");
- });
-});
-
-describe("getHtmlTags", () => {
- it("should return start and close tags for non-self closing tags", () => {
- const { startTag, closeTag } = getHtmlTags("div", 'class="test"');
- expect(startTag).toBe('');
- expect(closeTag).toBe("
");
- });
-
- it("should return only start tag for self-closing tags", () => {
- const { startTag, closeTag } = getHtmlTags("img", 'src="test.jpg"');
- expect(startTag).toBe('
');
- expect(closeTag).toBe("");
- });
-});
-
-describe("formatAttributes", () => {
- it("should format an attributes object into a string", () => {
+ const attributesStr = 'id="test"'
+ const result = getValidatedAttributesStr(attributesStr)
+ expect(result).toBe(attributesStr)
+ })
+
+ it('should throw an error for invalid attributes string', () => {
+ expect(() => getValidatedAttributesStr('invalid=attr')).toThrow('Invalid attributes string provided: invalid=attr')
+ })
+})
+
+describe('getHtmlTags', () => {
+ it('should return start and close tags for non-self closing tags', () => {
+ const { startTag, closeTag } = getHtmlTags('div', 'class="test"')
+ expect(startTag).toBe('')
+ expect(closeTag).toBe('
')
+ })
+
+ it('should return only start tag for self-closing tags', () => {
+ const { startTag, closeTag } = getHtmlTags('img', 'src="test.jpg"')
+ expect(startTag).toBe('')
+ expect(closeTag).toBe('')
+ })
+})
+
+describe('formatAttributes', () => {
+ it('should format an attributes object into a string', () => {
const attributes = {
- id: "test",
- class: "sample",
- };
- const result = formatAttributes(attributes);
- expect(result).toBe('id="test" class="sample"');
- });
-});
-
-describe("isValidAttributesString", () => {
- it("should return true for valid attributes string", () => {
- const isValid = isValidAttributesString('id="test" class="sample"');
- expect(isValid).toBe(true);
- });
-
- it("should return false for invalid attributes string", () => {
- const isValid = isValidAttributesString("id=test class=sample");
- expect(isValid).toBe(false);
- });
-});
-
-describe("renderNodeToHtml", () => {
- it("should throw an error if tag name is not provided", () => {
+ id: 'test',
+ class: 'sample',
+ }
+ const result = formatAttributes(attributes)
+ expect(result).toBe('id="test" class="sample"')
+ })
+})
+
+describe('isValidAttributesString', () => {
+ it('should return true for valid attributes string', () => {
+ const isValid = isValidAttributesString('id="test" class="sample"')
+ expect(isValid).toBe(true)
+ })
+
+ it('should return false for invalid attributes string', () => {
+ const isValid = isValidAttributesString('id=test class=sample')
+ expect(isValid).toBe(false)
+ })
+})
+
+describe('renderNodeToHtml', () => {
+ it('should throw an error if tag name is not provided', () => {
const node = {
attributes: {
- class: "sample-class",
+ class: 'sample-class',
},
- content: "Sample Content",
- };
+ content: 'Sample Content',
+ }
// @ts-expect-error
- expect(() => renderNodeToHtml(node, [])).toThrow("Tag name not provided for node.");
- });
+ expect(() => renderNodeToHtml(node, [])).toThrow('Tag name not provided for node.')
+ })
- it("should handle nested children in the node", () => {
+ it('should handle nested children in the node', () => {
const node = {
- tag: "div",
+ tag: 'div',
attributes: {
- id: "sample-id",
- class: "sample-class",
+ id: 'sample-id',
+ class: 'sample-class',
},
children: {
span_id1: {
- tag: "span",
- content: "Child Content",
+ tag: 'span',
+ content: 'Child Content',
},
},
- };
+ }
- const rendered = renderNodeToHtml(node, []);
- expectHtmlToMatch(rendered, 'Child Content
');
- });
-});
+ const rendered = renderNodeToHtml(node, [])
+ expectHtmlToMatch(rendered, 'Child Content
')
+ })
+})
-describe("createNodeFactory", () => {
- const plugins = [classRecordPlugin, markdownPlugin] satisfies HTMLodyPluginSample ContentChild Content
',
- );
- });
- });
+ const html = renderNodeTreeToHtml(nodeMap)
+ expectHtmlToMatch(html, 'Sample ContentChild Content
')
+ })
+ })
// check that markdown plugin works
- it("should convert markdown to HTML", () => {
- const { div } = nodeFactory();
+ it('should convert markdown to HTML', () => {
+ const { div } = nodeFactory()
const markdownDiv = div({
- markdown: "# Hello World!",
- });
- const html = renderSingleNode(markdownDiv);
- expectHtmlToMatch(html, "Hello World!
Hello World!
Sample Content
');
- });
+ const html = renderSingleNode(node)
+ expectHtmlToMatch(html, 'Sample Content
')
+ })
- it("should render a single node to HTML", () => {
- const div = nodeFactory().div;
+ it('should render a single node to HTML', () => {
+ const div = nodeFactory().div
const node = div({
- content: "Sample Content",
+ content: 'Sample Content',
attributes: {
- id: "sample-id",
- class: "sample-class",
+ id: 'sample-id',
+ class: 'sample-class',
},
- });
- const html = renderNodeToHtml(node, []);
- expectHtmlToMatch(html, 'Sample Content
');
- });
-});
-
-describe("renderNodeWithPlugins", () => {
- it("should throw an error if tag name is not provided", () => {
+ })
+ const html = renderNodeToHtml(node, [])
+ expectHtmlToMatch(html, 'Sample Content
')
+ })
+})
+
+describe('renderNodeWithPlugins', () => {
+ it('should throw an error if tag name is not provided', () => {
const node = {
attributes: {
- id: "sample-id",
+ id: 'sample-id',
},
- content: "Sample Content",
- };
- const plugins = [];
+ content: 'Sample Content',
+ }
+ const plugins = []
expect(() => renderNodeWithPlugins(node, plugins)).toThrow(
'Tag name not provided for node. \n ID: id="sample-id"\n Content: Sample Content\n\n {\n "attributes": {\n "id": "sample-id"\n },\n "content": "Sample Content"\n}\n ',
- );
- });
-});
+ )
+ })
+})
diff --git a/htmlody/json-to-html-engine.ts b/htmlody/json-to-html-engine.ts
index 26b7464..0a497bf 100644
--- a/htmlody/json-to-html-engine.ts
+++ b/htmlody/json-to-html-engine.ts
@@ -1,39 +1,39 @@
-import { htmlRes, middlewareFactory } from "../server";
-import { HtmlTags, SELF_CLOSING_TAGS, htmlTags } from "./constants";
-import { generateCSS, generateColorVariables } from "./css-engine";
-import { HTMLodyPlugin } from "./htmlody-plugins";
-import { ExtensionRec, JsonHtmlNodeTree, JsonTagElNode } from "./htmlody-types";
-import { formatAttributes, isValidAttributesString, isValidHtmlTag } from "./htmlody-utils";
+import { htmlRes, middlewareFactory } from '../server'
+import { HtmlTags, SELF_CLOSING_TAGS, htmlTags } from './constants'
+import { generateCSS, generateColorVariables } from './css-engine'
+import { HTMLodyPlugin } from './htmlody-plugins'
+import { ExtensionRec, JsonHtmlNodeTree, JsonTagElNode } from './htmlody-types'
+import { formatAttributes, isValidAttributesString, isValidHtmlTag } from './htmlody-utils'
export function validateTagName(tagName: HtmlTags): string {
if (!isValidHtmlTag(tagName)) {
- throw new Error(`Invalid tag name provided: ${tagName}`);
+ throw new Error(`Invalid tag name provided: ${tagName}`)
}
- return tagName;
+ return tagName
}
export function getValidatedAttributesStr(attributesStr: string): string {
- if (attributesStr !== "" && !isValidAttributesString(attributesStr)) {
- throw new Error(`Invalid attributes string provided: ${attributesStr}`);
+ if (attributesStr !== '' && !isValidAttributesString(attributesStr)) {
+ throw new Error(`Invalid attributes string provided: ${attributesStr}`)
}
- return attributesStr;
+ return attributesStr
}
export function getHtmlTags(tagName: string, attributesStr: string): { startTag: string; closeTag: string } {
- const space = attributesStr ? " " : "";
+ const space = attributesStr ? ' ' : ''
// Check if the tag is a self-closing tag using Set lookup
if (SELF_CLOSING_TAGS.has(tagName)) {
return {
startTag: `<${tagName}${space}${attributesStr} />`,
- closeTag: "",
- };
+ closeTag: '',
+ }
}
return {
startTag: `<${tagName}${space}${attributesStr}>`,
closeTag: ``,
- };
+ }
}
export function renderHtmlTag({
@@ -43,24 +43,24 @@ export function renderHtmlTag({
tagName,
validate,
}: {
- tagName: HtmlTags;
- attributesStr: string;
- content: string;
- childrenHtml: string;
- validate?: boolean;
+ tagName: HtmlTags
+ attributesStr: string
+ content: string
+ childrenHtml: string
+ validate?: boolean
}): string {
if (validate) {
- validateTagName(tagName);
+ validateTagName(tagName)
}
- const validatedAttributesStr = getValidatedAttributesStr(attributesStr);
+ const validatedAttributesStr = getValidatedAttributesStr(attributesStr)
const { startTag, closeTag } = getHtmlTags(
// validatedTagName,
tagName,
validatedAttributesStr,
- );
+ )
- return `${startTag}${content}${childrenHtml}${closeTag}`;
+ return `${startTag}${content}${childrenHtml}${closeTag}`
}
export function renderChildrenNodes