@ui-doc/html-renderer 0.3.0 → 1.0.0

package/dist/index.mjs

@@ -6,6 +6,10 @@ class HTMLRendererError extends Error {
 }
 
 class HTMLRendererSyntaxError extends SyntaxError {
+    code;
+    line;
+    column;
+    source;
     constructor({ message, code, column, line, source, }) {
         super(message);
         this.name = 'HTMLRendererSyntaxError';
@@ -27,19 +31,20 @@ class ParserError extends Error {
 class TagNodeError extends Error {
     constructor(message) {
         super(message);
-        this.name = 'TagNodeSyntaxError';
+        this.name = 'TagNodeError';
     }
 }
 
 const IDENTIFIER_CHARS = {
-    identifier: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-.',
+    'identifier': 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-.',
     'tag-identifier': 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
 };
 class HtmlCurlyBraceLexer {
+    reader;
+    currentTokens = [];
+    tagConsuming = false;
+    tagIdentified = false;
     constructor(reader) {
-        this.currentTokens = [];
-        this.tagConsuming = false;
-        this.tagIdentified = false;
         this.reader = reader;
     }
     debug() {
@@ -69,11 +74,11 @@ class HtmlCurlyBraceLexer {
         if (this.tagConsuming) {
             return this.progressTag();
         }
-        const char = this.reader.peak();
-        if (char === '{' && this.reader.peak(2) === '{{') {
+        const char = this.reader.peek();
+        if (char === '{' && this.reader.peek(2) === '{{') {
             return this.consumeTagOpen();
         }
-        if (char === '<' && this.reader.peak(4) === '<!--') {
+        if (char === '<' && this.reader.peek(4) === '<!--') {
             return this.consumeComment();
         }
         return this.consumeTemplate();
@@ -104,7 +109,7 @@ class HtmlCurlyBraceLexer {
         this.reader.consume(4);
         let content = '';
         while (!this.reader.isEof()) {
-            if (this.reader.peak(3) === '-->') {
+            if (this.reader.peek(3) === '-->') {
                 this.reader.consume(3);
                 break;
             }
@@ -118,11 +123,11 @@ class HtmlCurlyBraceLexer {
     consumeTemplate() {
         let content = '';
         while (!this.reader.isEof()) {
-            const peek = this.reader.peak();
-            if (peek === '{' && this.reader.peak(2) === '{{') {
+            const peek = this.reader.peek();
+            if (peek === '{' && this.reader.peek(2) === '{{') {
                 break;
             }
-            if (peek === '<' && this.reader.peak(4) === '<!--') {
+            if (peek === '<' && this.reader.peek(4) === '<!--') {
                 break;
             }
             content += this.reader.consume();
@@ -133,12 +138,12 @@ class HtmlCurlyBraceLexer {
         };
     }
     progressTag() {
-        const char = this.reader.peak();
+        const char = this.reader.peek();
         if (char === ' ' || char === '\n' || char === '\r' || char === '\t') {
             this.reader.consume();
             return this.progressTag();
         }
-        if (char === '}' && this.reader.peak(2) === '}}') {
+        if (char === '}' && this.reader.peek(2) === '}}') {
             return this.consumeTagClose();
         }
         if (char === '/') {
@@ -151,25 +156,25 @@ class HtmlCurlyBraceLexer {
         if (char === ':') {
             return this.consumeTagSeparator();
         }
-        if (char === '"' || char === "'") {
+        if (char === '"' || char === '\'') {
             return this.consumeString();
         }
-        if (char === '1' ||
-            char === '2' ||
-            char === '3' ||
-            char === '4' ||
-            char === '5' ||
-            char === '6' ||
-            char === '7' ||
-            char === '8' ||
-            char === '9' ||
-            char === '0') {
+        if (char === '1'
+            || char === '2'
+            || char === '3'
+            || char === '4'
+            || char === '5'
+            || char === '6'
+            || char === '7'
+            || char === '8'
+            || char === '9'
+            || char === '0') {
             return this.consumeNumber();
         }
-        if (char === 't' && this.reader.peak(4) === 'true') {
+        if (char === 't' && this.reader.peek(4) === 'true') {
             return this.consumeBoolean(true);
         }
-        if (char === 'f' && this.reader.peak(5) === 'false') {
+        if (char === 'f' && this.reader.peek(5) === 'false') {
             return this.consumeBoolean(false);
         }
         if (char === '=' || char === '!' || char === '<' || char === '>') {
@@ -201,18 +206,18 @@ class HtmlCurlyBraceLexer {
     consumeNumber() {
         let value = '';
         while (!this.reader.isEof()) {
-            const char = this.reader.peak();
-            if (char === '1' ||
-                char === '2' ||
-                char === '3' ||
-                char === '4' ||
-                char === '5' ||
-                char === '6' ||
-                char === '7' ||
-                char === '8' ||
-                char === '9' ||
-                char === '0' ||
-                char === '.') {
+            const char = this.reader.peek();
+            if (char === '1'
+                || char === '2'
+                || char === '3'
+                || char === '4'
+                || char === '5'
+                || char === '6'
+                || char === '7'
+                || char === '8'
+                || char === '9'
+                || char === '0'
+                || char === '.') {
                 value += this.reader.consume();
             }
             else {
@@ -221,7 +226,7 @@ class HtmlCurlyBraceLexer {
         }
         return {
             type: 'number',
-            value: parseFloat(value),
+            value: Number.parseFloat(value),
         };
     }
     consumeBoolean(value) {
@@ -234,7 +239,7 @@ class HtmlCurlyBraceLexer {
     consumeOperator() {
         let operator = '';
         while (!this.reader.isEof()) {
-            const char = this.reader.peak();
+            const char = this.reader.peek();
             if (char === '=' || char === '!' || char === '<' || char === '>') {
                 operator += this.reader.consume();
             }
@@ -251,7 +256,7 @@ class HtmlCurlyBraceLexer {
         const chars = IDENTIFIER_CHARS[type];
         let name = '';
         while (!this.reader.isEof()) {
-            const char = this.reader.peak();
+            const char = this.reader.peek();
             if (!chars.includes(char)) {
                 break;
             }
@@ -265,14 +270,16 @@ class HtmlCurlyBraceLexer {
 }
 
 class InlineReader {
+    input;
+    source;
+    currentLine = 1;
+    currentPos = 1;
+    currentContent = '';
     constructor(input, source = 'inline') {
-        this.currentLine = 1;
-        this.currentPos = 1;
-        this.currentContent = '';
         this.input = input;
         this.source = source;
     }
-    peak(k = 1) {
+    peek(k = 1) {
         return this.input.slice(0, k);
     }
     consume(k = 1) {
@@ -305,16 +312,19 @@ class InlineReader {
 }
 
 function instanceofReader(object) {
-    return (typeof object.peak === 'function' &&
-        typeof object.consume === 'function' &&
-        typeof object.isEof === 'function' &&
-        typeof object.debug === 'function');
+    return (object !== null
+        && typeof object === 'object'
+        && typeof object.peek === 'function'
+        && typeof object.consume === 'function'
+        && typeof object.isEof === 'function'
+        && typeof object.debug === 'function');
 }
 class HtmlRenderer {
+    parser;
+    layouts = {};
+    partials = {};
+    pages = {};
     constructor(parser) {
-        this.layouts = {};
-        this.partials = {};
-        this.pages = {};
         this.parser = parser;
     }
     addLayout(name, layout) {
@@ -349,26 +359,26 @@ class HtmlRenderer {
         }
     }
     generate(context, layout) {
-        layout = layout !== null && layout !== void 0 ? layout : 'default';
-        const content = this.layouts[layout] || undefined;
-        if (!content) {
+        layout = layout ?? 'default';
+        const content = this.layouts[layout];
+        if (content === undefined) {
             throw new HTMLRendererError(`Layout "${layout}" not found. Please register it using "addLayout" method.`);
         }
         return this.render(content, this.generateContext(context));
     }
     page(name, context) {
-        const content = this.pages[name] || this.pages.default || undefined;
-        if (!content) {
+        const content = this.pages[name] ?? this.pages.default;
+        if (content === undefined) {
             throw new HTMLRendererError(`Page "${name}" not found. Please register it using "addPage" method.`);
         }
         return this.render(content, context);
     }
     partial(name, context) {
-        const content = this.partials[name] || this.partials.default || undefined;
-        if (!content) {
+        const content = this.partials[name] ?? this.partials.default;
+        if (content === undefined) {
             throw new HTMLRendererError(`Partial "${name}" not found. Please register it using "addPartial" method.`);
         }
-        return this.render(content, context !== null && context !== void 0 ? context : {});
+        return this.render(content, context ?? {});
     }
     render(rootNode, context) {
         return rootNode.render(context, this);
@@ -392,8 +402,9 @@ class HtmlRenderer {
 
 const nodeOperators = ['==', '!=', '===', '!==', '<', '<=', '>', '>='];
 class Node {
+    type;
+    childNodes = [];
     constructor(type) {
-        this.childNodes = [];
         this.type = type;
     }
     append(node) {
@@ -411,11 +422,12 @@ class Node {
 }
 
 class CommentNode extends Node {
+    content;
     constructor(content) {
         super('comment');
         this.content = content;
     }
-    render() {
+    render(_context, _renderer) {
         return `<!-- ${this.content} -->`;
     }
 }
@@ -428,15 +440,16 @@ function readNestedValue(name, target) {
     if (name === '') {
         return target;
     }
+    const obj = target;
     if (index <= 0) {
-        return target[name];
+        return obj[name];
     }
     const currentName = name.substring(0, index);
     const nextName = name.substring(index + 1);
-    if (!target[currentName]) {
+    if (obj[currentName] === undefined || obj[currentName] === null) {
         return undefined;
     }
-    return readNestedValue(nextName, target[currentName]);
+    return readNestedValue(nextName, obj[currentName]);
 }
 function escapeHtml(unsafe) {
     return unsafe
@@ -444,20 +457,21 @@ function escapeHtml(unsafe) {
         .replaceAll('<', '&lt;')
         .replaceAll('>', '&gt;')
         .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#039;');
+        .replaceAll('\'', '&#039;');
 }
 
 class TagNode extends Node {
 }
 
 class TagDebugNode extends TagNode {
+    contextKey;
     constructor({ contextKey }) {
         super('tag-debug');
-        this.contextKey = contextKey !== null && contextKey !== void 0 ? contextKey : 'this';
+        this.contextKey = contextKey ?? 'this';
     }
     render(context) {
         const debugContext = this.contextKey !== 'this' ? readNestedValue(this.contextKey, context) : context;
-        const debugContent = debugContext
+        const debugContent = debugContext !== undefined && debugContext !== null
             ? JSON.stringify(debugContext, null, 2)
             : `Current context for "${this.contextKey}" is empty`;
         return `<pre>${debugContent}</pre>`;
@@ -493,16 +507,17 @@ const parseTagDebugNode = {
 };
 
 class TagForNode extends TagNode {
+    contextKey;
     constructor({ contextKey }) {
         super('tag-for');
-        this.contextKey = contextKey !== null && contextKey !== void 0 ? contextKey : 'this';
+        this.contextKey = contextKey ?? 'this';
     }
     render(context, renderer) {
         const contextNew = this.contextKey === 'this' ? context : readNestedValue(this.contextKey, context);
         if (Array.isArray(contextNew)) {
             return this.renderArray(contextNew, context, renderer);
         }
-        if (typeof contextNew === 'object') {
+        if (contextNew !== null && typeof contextNew === 'object') {
             return this.renderObject(contextNew, context, renderer);
         }
         return '';
@@ -511,7 +526,7 @@ class TagForNode extends TagNode {
         return context
             .map((item, index) => {
             return this.renderChildNodes({
-                ...(typeof item === 'object' ? item : {}),
+                ...(item !== null && typeof item === 'object' ? item : {}),
                 _contextKey: this.contextKey,
                 _loop: { index, value: item },
                 _parent: parentContext,
@@ -522,10 +537,11 @@ class TagForNode extends TagNode {
     renderObject(context, parentContext, renderer) {
         return Object.keys(context)
             .map((key, index) => {
+            const value = context[key];
             return this.renderChildNodes({
-                ...(typeof context[key] === 'object' ? context[key] : {}),
+                ...(value !== null && typeof value === 'object' ? value : {}),
                 _contextKey: this.contextKey,
-                _loop: { index, key, value: context[key] },
+                _loop: { index, key, value },
                 _parent: parentContext,
             }, renderer);
         })
@@ -562,6 +578,7 @@ const parseTagForNode = {
 };
 
 class TagIfNode extends TagNode {
+    options;
     constructor(options) {
         super('tag-if');
         this.options = options;
@@ -571,7 +588,8 @@ class TagIfNode extends TagNode {
         if (this.options.operator) {
             value = this.compare(value, this.getValue(context, 'secondValue', 'secondContextKey'), this.options.operator);
         }
-        return value ? this.renderChildNodes(context, renderer) : '';
+        const isTruthy = value !== undefined && value !== null && value !== false && value !== 0 && value !== '';
+        return isTruthy ? this.renderChildNodes(context, renderer) : '';
     }
     getValue(context, valueKey, contextKey) {
         return this.options[contextKey] !== undefined
@@ -657,9 +675,9 @@ const parseTagIfNode = {
                 if (options.operator === undefined && options.firstContextKey === undefined) {
                     throw new TagNodeError('Expected context key when no operator is given');
                 }
-                if (options.operator !== undefined &&
-                    options.secondContextKey === undefined &&
-                    options.secondValue === undefined) {
+                if (options.operator !== undefined
+                    && options.secondContextKey === undefined
+                    && options.secondValue === undefined) {
                     throw new TagNodeError('Expected second context key or value when operator is given');
                 }
                 return new TagIfNode(options);
@@ -669,14 +687,18 @@ const parseTagIfNode = {
 };
 
 class TagPageNode extends TagNode {
+    name;
+    contextKey;
     constructor({ name, contextKey }) {
         super('tag-page');
-        this.name = name !== null && name !== void 0 ? name : 'default';
-        this.contextKey = contextKey !== null && contextKey !== void 0 ? contextKey : 'this';
+        this.name = name ?? 'default';
+        this.contextKey = contextKey ?? 'this';
     }
     render(context, renderer) {
         let pageName = this.name;
-        const newContext = this.contextKey === 'this' ? context : readNestedValue(this.contextKey, context);
+        const newContext = this.contextKey === 'this'
+            ? context
+            : readNestedValue(this.contextKey, context);
         if (pageName.includes('.')) {
             const foundName = readNestedValue(pageName, context);
             if (typeof foundName === 'string' && foundName) {
@@ -705,10 +727,10 @@ const parseTagPageNode = {
                 if (token.type !== 'identifier') {
                     throw new TagNodeError('Expected tag identifier');
                 }
-                if (options.name && options.contextKey) {
+                if ((options.name !== undefined && options.name !== '') && (options.contextKey !== undefined && options.contextKey !== '')) {
                     throw new TagNodeError('Expected only one name and context key');
                 }
-                if (options.name) {
+                if (options.name !== undefined && options.name !== '') {
                     options.contextKey = token.name;
                 }
                 else {
@@ -723,13 +745,17 @@ const parseTagPageNode = {
 };
 
 class TagPartialNode extends TagNode {
+    name;
+    contextKey;
     constructor({ name, contextKey }) {
         super('tag-partial');
         this.name = name;
-        this.contextKey = contextKey !== null && contextKey !== void 0 ? contextKey : 'this';
+        this.contextKey = contextKey ?? 'this';
     }
     render(context, renderer) {
-        const newContext = this.contextKey === 'this' ? context : readNestedValue(this.contextKey, context);
+        const newContext = this.contextKey === 'this'
+            ? context
+            : readNestedValue(this.contextKey, context);
         return renderer.partial(this.name, newContext);
     }
 }
@@ -752,10 +778,10 @@ const parseTagPartialNode = {
                 if (token.type !== 'identifier') {
                     throw new TagNodeError('Expected tag identifier');
                 }
-                if (options.name && options.contextKey) {
+                if ((options.name !== undefined && options.name !== '') && (options.contextKey !== undefined && options.contextKey !== '')) {
                     throw new TagNodeError('Expected only one name and context key');
                 }
-                if (options.name) {
+                if (options.name !== undefined && options.name !== '') {
                     options.contextKey = token.name;
                 }
                 else {
@@ -763,7 +789,7 @@ const parseTagPartialNode = {
                 }
             },
             create() {
-                if (!options.name) {
+                if (options.name === undefined || options.name === '') {
                     throw new TagNodeError('Expected partial name');
                 }
                 return new TagPartialNode(options);
@@ -773,16 +799,16 @@ const parseTagPartialNode = {
 };
 
 class TagVarNode extends TagNode {
+    contextKey;
+    escape;
     constructor({ contextKey, escape }) {
         super('tag-var');
         this.contextKey = contextKey;
         this.escape = !!escape;
     }
     render(context) {
-        let value = readNestedValue(this.contextKey, context) || '';
-        if (typeof value !== 'string') {
-            value = String(value);
-        }
+        const rawValue = readNestedValue(this.contextKey, context);
+        const value = rawValue === undefined || rawValue === null ? '' : String(rawValue);
         return this.escape ? escapeHtml(value) : value;
     }
 }
@@ -818,7 +844,7 @@ const parseTagVarNode = {
                 options.escape = true;
             },
             create() {
-                if (!options.contextKey) {
+                if (options.contextKey === undefined || options.contextKey === '') {
                     throw new TagNodeError('Expected context key');
                 }
                 return new TagVarNode(options);
@@ -837,19 +863,18 @@ const tagNodes = [
 ];
 
 class TemplateNode extends Node {
+    content;
     constructor(content) {
         super('template');
         this.content = content;
     }
-    render() {
+    render(_context, _renderer) {
         return this.content;
     }
 }
 
 class NodeParser {
-    constructor() {
-        this.tags = {};
-    }
+    tags = {};
     static init() {
         const parser = new NodeParser();
         tagNodes.forEach(tag => parser.registerTagParser(tag));
@@ -867,7 +892,6 @@ class NodeParser {
         return this.parseChildren(lexer, tree);
     }
     parseChildren(lexer, parent) {
-        var _a;
         let token = lexer.consume();
         while (token) {
             switch (token.type) {
@@ -878,12 +902,20 @@ class NodeParser {
                     parent.append(new CommentNode(token.content));
                     break;
                 case 'tag-open':
-                    if (((_a = lexer.peek()) === null || _a === void 0 ? void 0 : _a.type) === 'tag-end') {
+                    if (lexer.peek()?.type === 'tag-end') {
                         return parent;
                     }
                     parent.append(this.parseTag(lexer));
                     break;
-                default:
+                case 'string':
+                case 'number':
+                case 'boolean':
+                case 'tag-identifier':
+                case 'identifier':
+                case 'operator':
+                case 'tag-close':
+                case 'tag-end':
+                case 'tag-separator':
                     throw new ParserError(`Unexpected token type "${token.type}"`);
             }
             token = lexer.consume();
@@ -891,13 +923,12 @@ class NodeParser {
         return parent;
     }
     parseTag(lexer) {
-        var _a, _b, _c;
         const tagIdentifier = lexer.consume();
         if (!tagIdentifier || tagIdentifier.type !== 'tag-identifier') {
             throw new ParserError('Expected tag identifier');
         }
         const tagDefinition = this.tags[tagIdentifier.name];
-        if (!tagDefinition) {
+        if (tagDefinition === undefined) {
             throw new ParserError(`Unknown tag "${tagIdentifier.name}"`);
         }
         const { addToken, create } = tagDefinition.parse();
@@ -912,7 +943,8 @@ class NodeParser {
         }
         catch (error) {
             if (error instanceof TagNodeError) {
-                throw new ParserError(`Error parsing tag ${tagIdentifier.name} - ${error.message}\nShould be something like: ${tagDefinition.example}`);
+                throw new ParserError(`Error parsing tag ${tagIdentifier.name} - ${error.message}\n`
+                    + `Should be something like: ${tagDefinition.example}`);
             }
             throw error;
         }
@@ -921,11 +953,11 @@ class NodeParser {
         }
         this.parseChildren(lexer, node);
         const closeTokens = lexer.consume(3);
-        if (!closeTokens ||
-            ((_a = closeTokens[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'tag-end' ||
-            ((_b = closeTokens[1]) === null || _b === void 0 ? void 0 : _b.type) !== 'tag-identifier' ||
-            closeTokens[1].name !== tagIdentifier.name ||
-            ((_c = closeTokens[2]) === null || _c === void 0 ? void 0 : _c.type) !== 'tag-close') {
+        if (closeTokens === undefined
+            || closeTokens[0]?.type !== 'tag-end'
+            || closeTokens[1]?.type !== 'tag-identifier'
+            || closeTokens[1].name !== tagIdentifier.name
+            || closeTokens[2]?.type !== 'tag-close') {
             throw new ParserError('Expected closing tag');
         }
         return node;
@@ -933,24 +965,26 @@ class NodeParser {
 }
 
 class TemplateLoader {
-    static async load({ renderer, fileSystem, templateBasePath = '@ui-doc/html-renderer/templates', }) {
-        const templatePath = await fileSystem.assetLoader().packagePath(templateBasePath);
-        const layoutFinder = fileSystem.createFileFinder([`${templatePath}/layouts/*.html`]);
-        const pageFinder = fileSystem.createFileFinder([`${templatePath}/pages/*.html`]);
-        const partialFinder = fileSystem.createFileFinder([`${templatePath}/partials/*.html`]);
-        const name = (file) => fileSystem.fileBasename(file);
-        const content = async (file) => (await fileSystem.fileRead(file)).trim();
-        await Promise.all([
-            layoutFinder.search(async (file) => {
-                renderer.addLayout(name(file), { content: await content(file), source: file });
-            }),
-            pageFinder.search(async (file) => {
-                renderer.addPage(name(file), { content: await content(file), source: file });
-            }),
-            partialFinder.search(async (file) => {
-                renderer.addPartial(name(file), { content: await content(file), source: file });
-            }),
-        ]);
+    static TEMPLATES_PACKAGE = '@ui-doc/html-renderer/templates';
+    static async load({ renderer, fileSystem, templatePath, }) {
+        const paths = [
+            { folderName: 'layouts', addFunction: 'addLayout' },
+            { folderName: 'pages', addFunction: 'addPage' },
+            { folderName: 'partials', addFunction: 'addPartial' },
+        ];
+        await Promise.all(paths.map(async ({ folderName, addFunction }) => {
+            const searchPath = `${templatePath}/${folderName}`;
+            if (!(await fileSystem.isDirectory(searchPath))) {
+                return;
+            }
+            const finder = fileSystem.createFileFinder([`${searchPath}/*.html`]);
+            await finder.search(async (file) => {
+                renderer[addFunction](fileSystem.fileBasename(file), {
+                    content: (await fileSystem.fileRead(file)).trim(),
+                    source: file,
+                });
+            });
+        }));
     }
 }