bbcode-compiler 0.1.0

package/package.json

@@ -0,0 +1,68 @@
+{
+    "name": "bbcode-compiler",
+    "version": "0.1.0",
+    "description": "Fast BBCode parser and HTML generator with TypeScript support",
+    "exports": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "README.md",
+        "dist/*",
+        "src/*"
+    ],
+    "type": "module",
+    "sideEffects": false,
+    "repository": "https://github.com/Trinovantes/bbcode-compiler",
+    "author": "Stephen Li <hello@stephenli.ca> (https://www.stephenli.ca)",
+    "license": "MIT",
+    "private": false,
+    "scripts": {
+        "dev": "  NODE_ENV=development tsc --watch",
+        "build": "NODE_ENV=production  tsc -p tsconfig.prod.json",
+        "prepublishOnly": "rm -rf ./dist && yarn build",
+        "lint": "tsc --noemit && eslint --ext '.ts' --ignore-path .gitignore .",
+        "test": "jest",
+        "benchmark": " node --loader ts-node/esm --experimental-specifier-resolution=node                                 tests/benchmarks/benchmark.ts",
+        "profile": "   node --loader ts-node/esm --experimental-specifier-resolution=node --prof --no-logfile-per-isolate tests/benchmarks/profile.ts && node --prof-process v8.log > v8.txt",
+        "playground": "node --loader ts-node/esm --experimental-specifier-resolution=node                                 tests/playground/run.ts | tee tests/playground/index.html",
+        "serve": "python3 -m http.server --directory tests/playground 8080"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.12.10",
+        "@babel/plugin-transform-runtime": "^7.14.5",
+        "@babel/preset-env": "^7.12.11",
+        "@babel/preset-typescript": "^7.12.7",
+        "@babel/register": "^7.13.14",
+        "@bbob/html": "^2.8.1",
+        "@bbob/preset-html5": "^2.8.1",
+        "@thoughtsunificator/bbcode-parser-template": "^1.0.9",
+        "@types/benchmark": "^2.1.1",
+        "@types/jest": "^28.1.3",
+        "@types/markdown-it": "^12.2.3",
+        "@types/node": "^14",
+        "@typescript-eslint/eslint-plugin": "^5.23.0",
+        "@typescript-eslint/parser": "^5.23.0",
+        "babel-plugin-root-import": "^6.6.0",
+        "babel-plugin-transform-define": "^2.0.0",
+        "bbcode": "^0.1.5",
+        "bbcode-parser": "^1.0.10",
+        "bbcodejs": "^0.0.4",
+        "benchmark": "^2.1.4",
+        "eslint": "^8.15.0",
+        "eslint-config-standard": "^17.0.0",
+        "eslint-import-resolver-typescript": "^3.1.1",
+        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-n": "^15.2.0",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-promise": "^6.0.0",
+        "eslint-plugin-vue": "^9.1.1",
+        "jest": "^28.1.0",
+        "markdown-it": "^13.0.1",
+        "ts-bbcode-parser": "^1.0.4",
+        "ts-node": "^10.8.1",
+        "typescript": "^4.2.4",
+        "ya-bbcode": "^1.0.12"
+    },
+    "engines": {
+        "node": ">=14.16"
+    }
+}

package/src/generateHtml.ts

@@ -0,0 +1,15 @@
+import { Generator } from './generator/Generator'
+import { htmlTransforms } from './generator/transforms/htmlTransforms'
+import { Lexer } from './lexer/Lexer'
+import { Parser } from './parser/Parser'
+
+export function generateHtml(input: string, transforms = htmlTransforms): string {
+    const lexer = new Lexer()
+    const tokens = lexer.tokenize(input)
+
+    const parser = new Parser(transforms)
+    const root = parser.parse(input, tokens)
+
+    const generator = new Generator(transforms)
+    return generator.generate(root)
+}

package/src/generator/Generator.ts

@@ -0,0 +1,60 @@
+import { AstNode, AstNodeType, RootNode } from '../parser/AstNode'
+import { nodeIsType } from '../parser/nodeIsType'
+import { htmlTransforms } from './transforms/htmlTransforms'
+import type { Transform } from './transforms/Transform'
+
+export class Generator {
+    transforms: ReadonlyMap<string, Transform>
+
+    constructor(transforms = htmlTransforms) {
+        this.transforms = new Map(transforms.map((transform) => [transform.name, transform]))
+    }
+
+    generate(root: RootNode): string {
+        const stringify = (node: AstNode): string => {
+            let output = ''
+
+            if (nodeIsType(node, AstNodeType.TagNode)) {
+                const tagName = node.tagName
+                const transform = this.transforms.get(tagName)
+                if (!transform) {
+                    throw new Error(`Unrecognized bbcode ${node.tagName}`)
+                }
+
+                const renderedStartTag = transform.start(node)
+                const renderedEndTag = transform.end?.(node) ?? ''
+                const isInvalidTag = renderedStartTag === false
+
+                if (isInvalidTag) {
+                    output += node.ogStartTag
+                } else {
+                    output += renderedStartTag
+                }
+
+                if (!transform.skipChildren || isInvalidTag) {
+                    for (const child of node.children) {
+                        output += stringify(child)
+                    }
+                }
+
+                if (isInvalidTag) {
+                    output += node.ogEndTag
+                } else {
+                    output += renderedEndTag
+                }
+            } else if (nodeIsType(node, AstNodeType.TextNode)) {
+                output += node.str
+            } else if (nodeIsType(node, AstNodeType.LinebreakNode)) {
+                output += '\n'
+            } else {
+                for (const child of node.children) {
+                    output += stringify(child)
+                }
+            }
+
+            return output
+        }
+
+        return stringify(root)
+    }
+}

package/src/generator/transforms/Transform.ts

@@ -0,0 +1,15 @@
+import type { TagNode } from '../../parser/AstNode'
+
+export interface Transform {
+    name: string
+
+    skipChildren?: boolean // Do not recursively render children nodes (e.g. [img]url[/url] should not render url)
+    isStandalone?: boolean // Only has StartTag e.g. "[hr]"
+    isLinebreakTerminated?: boolean // Ends by linebreak e.g. "[*] list entry\n"
+
+    // Returns false when the StartTag failed validation and original bbcode will be displayed as plaintext
+    start: (tagNode: TagNode) => string | false
+
+    // Some tags do not need closing tag e.g. standalones like [hr] or wrappers like [img]
+    end?: (tagNode: TagNode) => string
+}

package/src/generator/transforms/htmlTransforms.ts

@@ -0,0 +1,205 @@
+import { getTagImmediateAttrVal } from '../utils/getTagImmediateAttrVal'
+import { getTagImmediateText } from '../utils/getTagImmediateText'
+import { getWidthHeightAttr } from '../utils/getWidthHeightAttr'
+import { isDangerousUrl } from '../utils/isDangerousUrl'
+import { isOrderedList } from '../utils/isOrderedList'
+import type { Transform } from './Transform'
+
+export const htmlTransforms: ReadonlyArray<Transform> = [
+    {
+        name: 'b',
+        start: () => {
+            return '<strong>'
+        },
+        end: () => {
+            return '</strong>'
+        },
+    },
+    {
+        name: 'i',
+        start: () => {
+            return '<em>'
+        },
+        end: () => {
+            return '</em>'
+        },
+    },
+    {
+        name: 'u',
+        start: () => {
+            return '<ins>'
+        },
+        end: () => {
+            return '</ins>'
+        },
+    },
+    {
+        name: 's',
+        start: () => {
+            return '<del>'
+        },
+        end: () => {
+            return '</del>'
+        },
+    },
+    {
+        name: 'style',
+        start: (tagNode) => {
+            let style = ''
+
+            for (const child of tagNode.attributes) {
+                switch (child.key) {
+                    case 'color': {
+                        style += `color:${child.val};`
+                        continue
+                    }
+                    case 'size': {
+                        if (/^\d+$/.test(child.val)) {
+                            style += `font-size:${child.val}%;` // When no units provided (i.e. just a number), then assume %
+                        } else {
+                            style += `font-size:${child.val};`
+                        }
+                        continue
+                    }
+                }
+            }
+
+            return `<span style="${style}">`
+        },
+        end: () => {
+            return '</span>'
+        },
+    },
+    {
+        name: 'color',
+        start: (tagNode) => {
+            const color = getTagImmediateAttrVal(tagNode)
+            return `<span style="color:${color};">`
+        },
+        end: () => {
+            return '</span>'
+        },
+    },
+    {
+        name: 'hr',
+        isStandalone: true,
+        start: () => {
+            return '<hr />'
+        },
+    },
+    {
+        name: 'list',
+        start: (tagNode) => {
+            return isOrderedList(tagNode)
+                ? '<ol>'
+                : '<ul>'
+        },
+        end: (tagNode) => {
+            return isOrderedList(tagNode)
+                ? '</ol>'
+                : '</ul>'
+        },
+    },
+    {
+        name: '*',
+        isLinebreakTerminated: true,
+        start: () => {
+            return '<li>'
+        },
+        end: () => {
+            return '</li>'
+        },
+    },
+    {
+        name: 'img',
+        skipChildren: true,
+        start: (tagNode) => {
+            const src = getTagImmediateText(tagNode)
+            if (!src) {
+                return false
+            }
+
+            if (isDangerousUrl(src)) {
+                return false
+            }
+
+            const { width, height } = getWidthHeightAttr(tagNode)
+
+            let str = `<img src="${src}"`
+            if (width) {
+                str += ` width="${width}"`
+            }
+            if (height) {
+                str += ` height="${height}"`
+            }
+            str += '>'
+            return str
+        },
+    },
+    {
+        name: 'url',
+        start: (tagNode) => {
+            const href = getTagImmediateAttrVal(tagNode) ?? getTagImmediateText(tagNode)
+            if (!href) {
+                return false
+            }
+
+            if (isDangerousUrl(href)) {
+                return false
+            }
+
+            return `<a href="${href}">`
+        },
+        end: () => {
+            return '</a>'
+        },
+    },
+    {
+        name: 'quote',
+        start: (tagNode) => {
+            const author = getTagImmediateAttrVal(tagNode)
+            return author
+                ? `<blockquote><strong>${author}</strong>`
+                : '<blockquote>'
+        },
+        end: () => {
+            return '</blockquote>'
+        },
+    },
+    {
+        name: 'table',
+        start: () => {
+            return '<table>'
+        },
+        end: () => {
+            return '</table>'
+        },
+    },
+    {
+        name: 'tr',
+        start: () => {
+            return '<tr>'
+        },
+        end: () => {
+            return '</tr>'
+        },
+    },
+    {
+        name: 'td',
+        start: () => {
+            return '<td>'
+        },
+        end: () => {
+            return '</td>'
+        },
+    },
+    {
+        name: 'code',
+        start: () => {
+            return '<code>'
+        },
+        end: () => {
+            return '</code>'
+        },
+    },
+]

package/src/generator/utils/getTagImmediateAttrVal.ts

@@ -0,0 +1,21 @@
+import type { TagNode } from '../../parser/AstNode'
+
+/**
+ * Gets the text of the immediate attribute of the current TagNode
+ *
+ *      [url=https://en.wikipedia.org]English Wikipedia[/url]
+ *
+ *      TagNode [url]
+ *        AttrNode VAL="https://en.wikipedia.org" (returns this string)
+ *          TextNode "https://en.wikipedia.org"
+ *        RootNode
+ *          TextNode "English Wikipedia"
+ */
+export function getTagImmediateAttrVal(tagNode: TagNode): string | undefined {
+    if (tagNode.attributes.length !== 1) {
+        return undefined
+    }
+
+    const attrNode = tagNode.attributes[0]
+    return attrNode.val
+}

package/src/generator/utils/getTagImmediateText.ts

@@ -0,0 +1,33 @@
+import { AstNodeType, TagNode } from '../../parser/AstNode'
+import { nodeIsType } from '../../parser/nodeIsType'
+
+/**
+ * Gets the text of the immediate descendant of the current TagNode
+ *
+ *      [url]https://en.wikipedia.org[/url]
+ *
+ *      TagNode [url]
+ *        RootNode
+ *          TextNode "https://en.wikipedia.org" (returns this string)
+ */
+export function getTagImmediateText(tagNode: TagNode): string | undefined {
+    if (tagNode.children.length !== 1) {
+        return undefined
+    }
+
+    const child = tagNode.children[0]
+    if (!nodeIsType(child, AstNodeType.RootNode)) {
+        return undefined
+    }
+
+    if (child.children.length !== 1) {
+        return undefined
+    }
+
+    const textNode = child.children[0]
+    if (!nodeIsType(textNode, AstNodeType.TextNode)) {
+        return undefined
+    }
+
+    return textNode.str
+}

package/src/generator/utils/getWidthHeightAttr.ts

@@ -0,0 +1,51 @@
+import type { TagNode } from '../../parser/AstNode'
+
+/**
+ * Gets the width/height attributes of the TagNode if they exist
+ *
+ *      [img 500x300]https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png[/img]
+ *
+ *      RootNode
+ *        TagNode [img] (returns width:500, height:300)
+ *          AttrNode VAL="500x300"
+ *            TextNode " 500x300"
+ *          RootNode
+ *            TextNode "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png"
+ *
+ *      [img width=500 height=300]https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png[/img]
+ *
+ *      RootNode
+ *        TagNode [img] (returns width:500, height:300)
+ *          AttrNode KEY="width" VAL="500"
+ *            TextNode " width"
+ *            TextNode "500"
+ *          AttrNode KEY="height" VAL="300"
+ *            TextNode " height"
+ *            TextNode "300"
+ *          RootNode
+ *            TextNode "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png
+ */
+export function getWidthHeightAttr(tagNode: TagNode): { width?: string; height?: string } {
+    let width: string | undefined
+    let height: string | undefined
+
+    for (const child of tagNode.attributes) {
+        if (child.key === 'width') {
+            width = child.val
+        }
+        if (child.key === 'height') {
+            height = child.val
+        }
+
+        const matches = /(\d+)x(\d+)/.exec(child.val)
+        if (matches) {
+            width = matches[1]
+            height = matches[2]
+        }
+    }
+
+    return {
+        width,
+        height,
+    }
+}

package/src/generator/utils/isDangerousUrl.ts

@@ -0,0 +1,17 @@
+const dangerousUriRe = /^(vbscript|javascript|file|data):/
+const safeDataUriRe = /^data:image\/(gif|png|jpeg|webp);/
+
+export function isDangerousUrl(url: string): boolean {
+    const normalizedUrl = url.trim().toLowerCase()
+
+    if (!dangerousUriRe.test(normalizedUrl)) {
+        return false
+    }
+
+    // Only a subset of data uris are considered safe
+    if (safeDataUriRe.test(normalizedUrl)) {
+        return false
+    }
+
+    return true
+}

package/src/generator/utils/isOrderedList.ts

@@ -0,0 +1,28 @@
+import type { TagNode } from '../../parser/AstNode'
+
+/**
+ * Determines if the StartTag has an attribute of "1" to indicate that it's an ordered list
+ *
+ *      [list=1]
+ *
+ *      TagNode [list]
+ *        AttrNode VAL="1"
+ *          TextNode "1"
+ *        RootNode
+ *          TagNode [*]
+ *            RootNode
+ *              TextNode "Entry 1"
+ *          TagNode [*]
+ *            RootNode
+ *              TextNode "Entry 2"
+ */
+export function isOrderedList(node: TagNode): boolean {
+    for (const child of node.attributes) {
+        const val = child.val
+        if (val === '1') {
+            return true
+        }
+    }
+
+    return false
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export * from './generateHtml'
+
+export * from './lexer/Lexer'
+export * from './lexer/Token'
+export * from './lexer/TokenType'
+
+export * from './parser/Parser'
+export * from './parser/AstNode'
+export * from './parser/nodeIsType'
+
+export * from './generator/Generator'
+export * from './generator/transforms/Transform'
+export * from './generator/transforms/htmlTransforms'
+export * from './generator/utils/getWidthHeightAttr'
+export * from './generator/utils/getTagImmediateAttrVal'
+export * from './generator/utils/getTagImmediateText'
+export * from './generator/utils/isDangerousUrl'
+export * from './generator/utils/isOrderedList'

package/src/lexer/Lexer.ts

@@ -0,0 +1,89 @@
+import { symbolTable, TokenType } from './TokenType'
+import type { Token } from './Token'
+
+export class Lexer {
+    tokenize(input: Readonly<string>): Array<Token> {
+        const tokens = new Array<Token>()
+
+        const re = /\n|\[\/|\[(\w+|\*)|\]|=|&|<|>|'|"/g
+        let offset = 0
+
+        while (true) {
+            // Match until next symbol
+            const match = re.exec(input)
+            if (!match) {
+                break
+            }
+
+            // Everything between previous symbol and current symbol is treated as plaintext
+            //
+            //  [...]plaintext[/...]
+            //      |         |
+            //      offset    match.index
+            //                (new) offset
+            //
+            const length = match.index - offset
+            if (length > 0) {
+                tokens.push({
+                    type: TokenType.STR,
+                    offset,
+                    length,
+                })
+            }
+
+            offset = match.index
+
+            // Only add BACKSLASH token if it's preceded by L_BRACKET
+            // In the regex '[/' takes precedence over '['
+            if (match[0] === '[/') {
+                tokens.push({
+                    type: TokenType.L_BRACKET,
+                    offset,
+                    length: 1,
+                })
+                offset += 1
+
+                tokens.push({
+                    type: TokenType.BACKSLASH,
+                    offset,
+                    length: 1,
+                })
+                offset += 1
+            } else if (match[0].startsWith('[')) {
+                tokens.push({
+                    type: TokenType.L_BRACKET,
+                    offset,
+                    length: 1,
+                })
+                offset += 1
+
+                const length = match[0].length - 1
+                tokens.push({
+                    type: TokenType.STR,
+                    offset,
+                    length,
+                })
+                offset += length
+            } else {
+                tokens.push({
+                    type: symbolTable[match[0]] ?? TokenType.STR,
+                    offset,
+                    length: 1,
+                })
+                offset += 1
+            }
+        }
+
+        // Add any leftover non-symbol text
+        const length = input.length - offset
+        if (length > 0) {
+            tokens.push({
+                type: TokenType.STR,
+                offset,
+                length,
+            })
+        }
+
+        return tokens
+    }
+}

package/src/lexer/Token.ts

@@ -0,0 +1,64 @@
+import { TokenType } from './TokenType'
+
+export interface Token {
+    type: TokenType
+    offset: number
+    length: number
+}
+
+export function stringifyTokens(ogText: string, tokens: ReadonlyArray<Token>): string {
+    let s = ''
+
+    for (const token of tokens) {
+        switch (token.type) {
+            case TokenType.STR: {
+                s += ogText.substring(token.offset, token.offset + token.length)
+                break
+            }
+            case TokenType.LINEBREAK: {
+                s += '\n'
+                break
+            }
+
+            case TokenType.L_BRACKET: {
+                s += '['
+                break
+            }
+            case TokenType.R_BRACKET: {
+                s += ']'
+                break
+            }
+            case TokenType.BACKSLASH: {
+                s += '/'
+                break
+            }
+            case TokenType.EQUALS: {
+                s += '='
+                break
+            }
+
+            case TokenType.XSS_AMP: {
+                s += '&amp;'
+                break
+            }
+            case TokenType.XSS_LT: {
+                s += '&lt;'
+                break
+            }
+            case TokenType.XSS_GT: {
+                s += '&gt;'
+                break
+            }
+            case TokenType.XSS_D_QUOTE: {
+                s += '&quot;'
+                break
+            }
+            case TokenType.XSS_S_QUOTE: {
+                s += '&#x27;'
+                break
+            }
+        }
+    }
+
+    return s
+}