Initial Fork Changes for bbcode-compiler-react

We're now reacting baybeeee!

Author: BellCubeDev

.eslintrc.cjs

@@ -34,6 +34,7 @@ module.exports = {
     ],
 
     rules: {
+        'no-use-before-define': 'off',
         semi: 'off',
         'comma-dangle': 'off',
         'no-undef': 'off',

README.md

@@ -1,32 +1,35 @@
-# BBCode Compiler
+# BBCode Compiler - React
 
-This is a fast BBCode parser and HTML generator with TypeScript support.
+A fast BBCode parser and React generator with TypeScript support. Forked from [Trinovantes/bbcode-compiler](https://github.com/Trinovantes/bbcode-compiler).
 
-**Note:** This package is only available in ESM format.
+**Note:** This package is a [Pure ESM package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
 
 ## Usage
 
 ```ts
-import { generateHtml } from 'bbcode-compiler'
+import { generateReact } from 'bbcode-compiler-react'
 
-// <strong>Hello World</strong>
-const html = generateHtml('[b]Hello World[/b]')
+// React: <b>Hello World</b>
+const react = generateReact('[b]Hello World[/b]')
 ```
 
 ## Extending With Custom Tags
 
-```ts
-import { generateHtml, getTagImmediateText, htmlTransforms, getWidthHeightAttr } from 'bbcode-compiler'
+```tsx
+import { generateReact, defaultTransforms, getWidthHeightAttr } from 'bbcode-compiler-react'
 
-const customTransforms: typeof htmlTransforms = [
+const customTransforms: typeof defaultTransforms = [
     // Default tags included with this package
-    ...htmlTransforms,
+    ...defaultTransforms,
 
     // You can override a default tag by including it after the original in the transforms array
     {
         name: 'b',
-        start: () => '<b>',
-        end: () => '</b>',
+        component({ tagNode, children }) {
+            return <b>
+                {children}
+            </b>
+        }
     },
 
     // Create new tag
@@ -35,8 +38,8 @@ const customTransforms: typeof htmlTransforms = [
     {
         name: 'youtube',
         skipChildren: true, // Do not actually render the "https://www.youtube.com/watch?v=dQw4w9WgXcQ" text
-        start: (tagNode) => {
-            const src = getTagImmediateText(tagNode)
+        component({ tagNode, children }) {
+            const src = tagNode.getTagImmediateText()
             if (!src) {
                 return false
             }
@@ -49,17 +52,15 @@ const customTransforms: typeof htmlTransforms = [
             const videoId = matches[1]
             const { width, height } = getWidthHeightAttr(tagNode)
 
-            return `
-                <iframe
-                    width="${width ?? 560}"
-                    height="${height ?? 315}"
-                    src="https://www.youtube.com/embed/${videoId}"
-                    title="YouTube Video Player"
-                    frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen
-                ></iframe>
-            `
+            return <iframe
+                width={width ?? 560}
+                height={height ?? 315}
+                src={`https://www.youtube.com/embed/${videoId}`}
+                title="YouTube Video Player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+            />
         },
     },
 ]
@@ -69,9 +70,9 @@ const customTransforms: typeof htmlTransforms = [
 //     height="315"
 //     src="https://www.youtube.com/embed/dQw4w9WgXcQ"
 //     title="YouTube Video Player"
-//     frameborder="0"
+//     frameBorder="0"
 //     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-//     allowfullscreen
+//     allowFullScreen
 // ></iframe>
-const html = generateHtml('[youtube]https://www.youtube.com/watch?v=dQw4w9WgXcQ[/youtube]', customTransforms)
+const html = generateReact('[youtube]https://www.youtube.com/watch?v=dQw4w9WgXcQ[/youtube]', customTransforms)
 ```

package.json

@@ -1,7 +1,7 @@
 {
-    "name": "bbcode-compiler",
-    "version": "0.1.5",
-    "description": "Parses BBCode and generates HTML ",
+    "name": "bbcode-compiler-react",
+    "version": "1.0.0",
+    "description": "Compiles BBCode into React components",
     "exports": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "files": [
@@ -13,13 +13,9 @@
     "sideEffects": false,
     "repository": {
         "type": "git",
-        "url": "https://github.com/Trinovantes/bbcode-compiler"
-    },
-    "author": {
-        "name": "Stephen",
-        "email": "hello@stephenli.ca",
-        "url": "https://www.stephenli.ca"
+        "url": "https://github.com/BellCubeDev/bbcode-compiler-react"
     },
+    "author": "BellCube",
     "license": "MIT",
     "private": false,
     "scripts": {
@@ -28,8 +24,8 @@
         "prepublishOnly": "rm -rf ./dist && yarn build",
         "lint": "tsc --noemit && eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
         "test": "vitest",
-        "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"
+        "benchmark": " yarn build && node --loader ts-node/esm --experimental-specifier-resolution=node                                 tests/benchmarks/benchmark.ts",
+        "profile": "   yarn build && 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"
     },
     "devDependencies": {
         "@bbob/html": "^3.0.0",
@@ -38,9 +34,12 @@
         "@types/benchmark": "^2.1.1",
         "@types/markdown-it": "^13.0.1",
         "@types/node": "^20.7.0",
+        "@types/react": "^18.3.2",
+        "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.5.0",
         "@typescript-eslint/parser": "^7.5.0",
         "bbcode": "^0.1.5",
+        "bbcode-compiler": "^0.1.5",
         "bbcode-parser": "^1.0.10",
         "bbcodejs": "^0.0.4",
         "benchmark": "^2.1.4",
@@ -53,10 +52,14 @@
         "eslint-plugin-promise": "^6.0.0",
         "eslint-plugin-vue": "^9.9.0",
         "markdown-it": "^14.0.0",
+        "react-dom": "^18.3.1",
         "ts-bbcode-parser": "^1.0.4",
         "ts-node": "^10.8.1",
         "typescript": "^5.0.2",
         "vitest": "^1.2.1",
         "ya-bbcode": "^4.0.0"
+    },
+    "dependencies": {
+        "react": "^18.3.1"
     }
 }

src/generateHtml.ts

@@ -0,0 +1,28 @@
+import { Generator } from './generator/Generator.js'
+import { defaultTransforms } from './generator/transforms/defaultTransforms.js'
+import { Lexer } from './lexer/Lexer.js'
+import { Parser } from './parser/Parser.js'
+
+export function generateReact(
+    /** BBCode to parse */
+    input: string,
+    /** A list of transforms
+     *
+     * @see defaultTransforms
+     */
+    transforms = defaultTransforms,
+    /** If true, throws an error when a tag is not in the transforms list. This is the default behavior.
+     *
+     * If false, will only throw a warning and render the tag as plain text.
+    */
+    errorIfNoTransform = true,
+): React.ReactElement {
+    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, errorIfNoTransform)
+    return generator.generate(root)
+}

src/generateReact.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { AstNode, AstNodeType, RootNode } from '../parser/AstNode.js'
+import { defaultTransforms } from './transforms/defaultTransforms.js'
+import type { Transform } from './transforms/Transform.js'
+
+export class Generator {
+    transforms: ReadonlyMap<string, Transform>
+
+    constructor(transforms = defaultTransforms, public errorIfNoTransform = true) {
+        this.transforms = new Map(transforms.map((transform) => [transform.name, transform]))
+    }
+
+    private joinAdjacentStrings(children: Array<React.ReactNode>): Array<React.ReactNode> {
+        return children.reduce((acc: Array<React.ReactNode>, child) => {
+            if (typeof child === 'string' && typeof acc[acc.length - 1]! === 'string') {
+                acc[acc.length - 1]! += child
+            } else {
+                acc.push(child)
+            }
+            return acc
+        }, [] as Array<React.ReactNode>)
+    }
+
+    private generateForNode(this: Generator, node: AstNode, i: number): [number, React.ReactNode] {
+        switch (node.nodeType) {
+            case AstNodeType.LinebreakNode: {
+                return [i + 1, <br key={i} />]
+            } case AstNodeType.TextNode: {
+                return [i, node.str]
+            } case AstNodeType.TagNode: {
+                const tagName = node.tagName
+                const transform = this.transforms.get(tagName)
+                if (!transform) {
+                    if (this.errorIfNoTransform) {
+                        throw new Error(`Unrecognized bbcode ${node.tagName}`)
+                    } else {
+                        console.warn(`Unrecognized bbcode ${node.tagName}`)
+                    }
+                    return [i, node.ogEndTag]
+                }
+
+                const renderedChildren = node.children.map((child, j) => {
+                    const [newI, renderedChild] = this.generateForNode(child,  i)
+                    i = newI
+                    return renderedChild
+                })
+
+                const { component: Component } = transform
+                const renderedTag = <Component tagNode={node} key={i}>
+                    {this.joinAdjacentStrings(renderedChildren)}
+                </Component>
+
+                if ((renderedTag as any) === false) {
+                    return [i, node.ogStartTag + renderedChildren + node.ogEndTag]
+                }
+
+                return [i + 1, renderedTag]
+            } default: {
+                const renderedChildren = node.children.map((child, j) => {
+                    const [newI, renderedChild] = this.generateForNode(child, i)
+                    i = newI
+                    return renderedChild
+                });
+
+                return [i + 1, this.joinAdjacentStrings(renderedChildren)]
+            }
+        }
+    }
+
+    public generate(root: RootNode): React.ReactElement {
+        return <>
+            {this.generateForNode(root, 0)[1]}
+        </>
+    }
+}