@beforesemicolon/builder 1.0.0

package/.eslintignore

@@ -0,0 +1 @@
+src/**/*.spec.ts

package/.eslintrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier',
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    root: true,
+    rules: {
+        'no-prototype-builtins': ['off'],
+    },
+}

package/.prettierignore

@@ -0,0 +1,2 @@
+src/**/*.spec.ts
+src/docs/**/*.html

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@beforesemicolon/builder",
+    "version": "1.0.0",
+    "description": "Utilities to build npm packages and documentation website",
+    "engines": {
+        "node": ">=18.16.0"
+    },
+    "type": "module",
+    "scripts": {
+        "build": "rm -rf dist && npm-run-all lint && tsc",
+        "lint": "eslint ./src && prettier --check .",
+        "format": "eslint ./src --fix && prettier --write ."
+    },
+    "author": "Elson Correia",
+    "license": "BSD-3-Clause",
+    "repository": {
+        "url": "https://github.com/beforesemicolon/builder",
+        "type": "git"
+    },
+    "keywords": [
+        "builder",
+        "build npm",
+        "docs"
+    ],
+    "funding": {
+        "url": "https://github.com/sponsors/beforesemicolon",
+        "type": "github"
+    },
+    "devDependencies": {
+        "@gjsify/esbuild-plugin-transform-ext": "0.0.4",
+        "@types/jest": "^29.5.11",
+        "@types/jsdom": "^21.1.6",
+        "@types/jsdom-global": "^3.0.7",
+        "@types/node": "^20.10.5",
+        "@types/node-sass": "^4.11.7",
+        "@typescript-eslint/eslint-plugin": "^6.15.0",
+        "@typescript-eslint/parser": "^6.15.0",
+        "core-js": "^3.34.0",
+        "esbuild": "^0.19.10",
+        "esbuild-plugin-text-replace": "^1.3.0",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-config-standard": "^17.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-n": "^16.5.0",
+        "eslint-plugin-prettier": "^5.1.2",
+        "eslint-plugin-promise": "^6.1.1",
+        "front-matter": "^4.0.2",
+        "global-jsdom": "^9.2.0",
+        "highlight.js": "^11.10.0",
+        "install": "^0.13.0",
+        "isomorphic-dompurify": "^2.16.0",
+        "jsdom": "^23.0.1",
+        "marked": "^14.1.2",
+        "marked-highlight": "^2.1.4",
+        "nodemon": "^3.1.7",
+        "npm": "^10.8.3",
+        "npm-run-all": "^4.1.5",
+        "prettier": "3.1.1",
+        "tinybench": "^2.8.0",
+        "ts-jest": "^29.1.1",
+        "tsx": "^4.7.0",
+        "typescript": "^5.3.3"
+    }
+}

package/src/build-browser.ts

@@ -0,0 +1,35 @@
+import esbuild, { Plugin } from 'esbuild'
+
+// the Doc exported with @beforesemicolon/html-parser is not used so no need
+// to include it in the final package
+const emptyParserDoc = {
+    name: 'empty-parser-Doc-plugin',
+    setup(build) {
+        build.onResolve({ filter: /Doc$/ }, (args) => {
+            if (args.importer.includes('@beforesemicolon/html-parser')) {
+                return {
+                    path: args.path,
+                    namespace: 'empty-Doc',
+                }
+            }
+        })
+        build.onLoad({ filter: /.*/, namespace: 'empty-Doc' }, () => {
+            return {
+                contents: '',
+            }
+        })
+    },
+} as Plugin
+
+esbuild
+    .build({
+        entryPoints: ['src/client.ts'],
+        outfile: 'dist/client.js',
+        bundle: true,
+        keepNames: true,
+        sourcemap: true,
+        target: 'esnext',
+        minify: true,
+        plugins: [emptyParserDoc],
+    })
+    .catch(console.error)

package/src/build-modules.ts

@@ -0,0 +1,53 @@
+import esbuild from 'esbuild'
+import path from 'path'
+import fs from 'fs'
+import { transformExtPlugin } from '@gjsify/esbuild-plugin-transform-ext'
+
+function readFilesRecursively(directoryPath: string) {
+    const files: string[] = []
+
+    function readDirectory(currentPath: string) {
+        const entries = fs.readdirSync(currentPath, { withFileTypes: true })
+
+        for (const entry of entries) {
+            const fullPath = path.join(currentPath, entry.name)
+
+            if (entry.isDirectory()) {
+                readDirectory(fullPath)
+            } else {
+                files.push(fullPath)
+            }
+        }
+    }
+
+    readDirectory(directoryPath)
+    return files
+}
+
+const directoryPath = path.join(process.cwd(), 'src')
+const allFiles = readFilesRecursively(directoryPath).filter(
+    (file) => !file.endsWith('.spec.ts') && !file.endsWith('/client.ts')
+)
+
+Promise.all([
+    esbuild.build({
+        entryPoints: allFiles,
+        outdir: 'dist/esm',
+        target: 'esnext',
+        minify: true,
+        format: 'esm',
+        platform: 'node',
+        keepNames: true,
+        plugins: [transformExtPlugin({ outExtension: { '.ts': '.js' } })],
+    }),
+    esbuild.build({
+        entryPoints: allFiles,
+        outdir: 'dist/cjs',
+        target: 'esnext',
+        minify: true,
+        format: 'cjs',
+        platform: 'node',
+        keepNames: true,
+        plugins: [transformExtPlugin({ outExtension: { '.ts': '.js' } })],
+    }),
+]).catch(console.error)

package/src/docs/renderer/code.ts

@@ -0,0 +1,15 @@
+import { Tokens } from 'marked'
+
+export default function code({ lang, text }: Tokens.Code) {
+    return `<div class="code-snippet">
+        ${lang ? `<div class="label ${lang.toLowerCase()}">${lang}</div>` : ''}
+        <div class="content">
+            <pre>
+                <code class="hljs language-javascript">${text}</code>
+            </pre>
+        </div>
+        <button type="button" class="code-copy-btn" style="visibility: hidden">
+            copy
+        </button>
+    </div>`
+}

package/src/docs/renderer/heading.ts

@@ -0,0 +1,13 @@
+import { Tokens } from 'marked'
+
+export default function heading({ tokens, depth }: Tokens.Heading) {
+    // @ts-expect-error this
+    const text = this.parser.parseInline(tokens)
+    const escapedText = text
+        .toLowerCase()
+        .replace(/[^\w]+/g, ' ')
+        .trim()
+        .replace(/\s/g, '-')
+
+    return `<h${depth} id="${escapedText}"><a href="#${escapedText}">${text}</a></h${depth}>`
+}

package/src/docs/renderer/index.ts

@@ -0,0 +1,10 @@
+import heading from './heading.js'
+import code from './code.js'
+import link from './link.js'
+import { RendererObject } from 'marked'
+
+export default {
+    heading,
+    code,
+    link,
+} as unknown as RendererObject

package/src/docs/renderer/link.ts

@@ -0,0 +1,7 @@
+import { Tokens } from 'marked'
+
+export default function link({ href, text }: Tokens.Link) {
+    return `<a href="${href
+        .replace(/\.md/, '.html')
+        .replace(/index\.html/, '')}">${text}</a>`
+}

package/src/docs/run.ts

@@ -0,0 +1,212 @@
+import { Marked } from 'marked'
+import { cp, mkdir, readdir, readFile, writeFile } from 'fs/promises'
+import path from 'path'
+import fm from 'front-matter'
+import DOMPurify from 'isomorphic-dompurify'
+import { markedHighlight } from 'marked-highlight'
+import hljs from 'highlight.js'
+import defaultTemp from './templates/default.js'
+import { CustomOptions, PageProps, SiteMap } from './types.js'
+import renderer from './renderer/index.js'
+
+const layouts: Map<string, (props: PageProps) => string> = new Map()
+
+layouts.set('default', defaultTemp)
+
+let currentFileMeta: {
+    attributes: CustomOptions
+    siteMap: SiteMap
+}
+
+const marked = new Marked(
+    markedHighlight({
+        langPrefix: 'hljs language-',
+        highlight(code, lang) {
+            const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+            return hljs.highlight(code, { language }).value
+        },
+    })
+)
+
+marked.use({ renderer })
+
+const docsDir = path.resolve(process.cwd(), 'docs')
+const docsSiteDir = path.resolve(process.cwd(), 'website')
+const docsLayoutsDir = path.resolve(process.cwd(), 'docs/_layouts')
+const docsAssetsDir = path.resolve(process.cwd(), 'docs/assets')
+const docsStylesheetsDir = path.resolve(process.cwd(), 'docs/stylesheets')
+const docsScriptsDir = path.resolve(process.cwd(), 'docs/scripts')
+
+const traverseDirectory = async (dir: string) => {
+    const items = await readdir(dir)
+    const files: string[] = []
+
+    for (const item of items) {
+        const ext = path.extname(item)
+
+        if (/^[._]/.test(item)) continue
+
+        if (ext) {
+            files.push(path.join(dir, item))
+        } else if (!/(stylesheets|assets|scripts)/.test(item)) {
+            files.push(...(await traverseDirectory(path.join(dir, item))))
+        }
+    }
+
+    return files
+}
+
+marked.use({
+    hooks: {
+        postprocess(html: string) {
+            const { layout = 'default', ...options } =
+                currentFileMeta.attributes
+
+            html = DOMPurify.sanitize(html)
+
+            const tableOfContent = [
+                ...html.matchAll(
+                    /<h([0-6])\sid="[^"]+".*?>.*?<a\s+href="([^"]+)".*?>([^<]+)<\/a>/gm
+                ),
+            ].map((m) => ({ path: m[2], label: m[3], level: m[1] }))
+
+            return (
+                layouts.get(layout)?.({
+                    ...options,
+                    content: html,
+                    siteMap: currentFileMeta.siteMap,
+                    tableOfContent,
+                }) || html
+            )
+        },
+    },
+})
+;(async () => {
+    // create website dir
+    await mkdir(docsSiteDir, { recursive: true })
+
+    try {
+        await cp(docsAssetsDir, docsAssetsDir.replace(docsDir, docsSiteDir), {
+            recursive: true,
+        })
+    } catch (e) {
+        // ignore
+    }
+
+    try {
+        await cp(
+            docsStylesheetsDir,
+            docsStylesheetsDir.replace(docsDir, docsSiteDir),
+            { recursive: true }
+        )
+    } catch (e) {
+        // ignore
+    }
+
+    try {
+        await cp(docsScriptsDir, docsScriptsDir.replace(docsDir, docsSiteDir), {
+            recursive: true,
+        })
+    } catch (e) {
+        // ignore
+    }
+
+    try {
+        // import the layouts first
+        const layoutPaths = await traverseDirectory(docsLayoutsDir)
+
+        for (const layoutPath of layoutPaths) {
+            if (/\.(j|t)s$/.test(layoutPath)) {
+                const fileName = path
+                    .basename(layoutPath)
+                    .replace(path.extname(layoutPath), '')
+                const handler = await import(layoutPath)
+
+                layouts.set(fileName, handler.default)
+            }
+        }
+    } catch (e) {
+        // ignore
+    }
+
+    const filePaths = await traverseDirectory(docsDir)
+
+    const siteMap: SiteMap = new Map()
+
+    ;(
+        await Promise.all(
+            filePaths
+                .filter((filePath) => filePath.endsWith('.md'))
+                .map(async (filePath) => {
+                    const content = await readFile(filePath, 'utf-8')
+                    return {
+                        filePath,
+                        // @ts-expect-error call unknown
+                        ...(fm(content) as {
+                            attributes: CustomOptions
+                            body: string
+                        }),
+                    }
+                })
+        )
+    )
+        .sort((a, b) => a.attributes.order - b.attributes.order)
+        .map(({ attributes, body, filePath }) => {
+            const pathname = filePath
+                .replace(docsDir, '')
+                .replace(/\.md/, '.html')
+            const fileWebsitePath = filePath
+                .replace(docsDir, docsSiteDir)
+                .replace('.md', '.html')
+            const fileDirWebsitePath = fileWebsitePath.replace(
+                path.basename(fileWebsitePath),
+                ''
+            )
+
+            const fileName = path.basename(pathname) || '/'
+            const dir = pathname.replace(fileName, '').replace(/\/$/, '')
+
+            let currentDir = siteMap
+
+            dir.split('/')
+                .filter(Boolean)
+                .forEach((d) => {
+                    if (!currentDir.has(d)) {
+                        currentDir.set(d, new Map())
+                    }
+
+                    currentDir = currentDir.get(d) as SiteMap
+                })
+
+            const attrs = {
+                ...attributes,
+                path: pathname,
+            } as CustomOptions
+
+            if (!currentDir.has(fileName)) {
+                currentDir.set(fileName, attrs)
+            }
+
+            return {
+                attributes: attrs,
+                fileWebsitePath,
+                fileDirWebsitePath,
+                body,
+                siteMap,
+            }
+        })
+        .forEach(
+            async ({
+                attributes,
+                body,
+                fileDirWebsitePath,
+                fileWebsitePath,
+                siteMap,
+            }) => {
+                currentFileMeta = { attributes, siteMap }
+                const contentMd = await marked.parse(body)
+                await mkdir(fileDirWebsitePath, { recursive: true })
+                await writeFile(fileWebsitePath, contentMd)
+            }
+        )
+})()

package/src/docs/templates/default.ts

@@ -0,0 +1,19 @@
+import { PageProps } from '../types.js'
+
+export default ({ title, description, content }: PageProps) => `
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+        />
+        <meta name="description" content="${description}" />
+        <title>${title}</title>
+    </head>
+    <body>
+        ${content}
+    </body>
+</html>
+`

package/src/docs/types.ts

@@ -0,0 +1,16 @@
+export interface PageProps {
+    name: string
+    path: string
+    order: number
+    title: string
+    description: string
+    content: string
+    siteMap: SiteMap
+    tableOfContent: { path: string; label: string }[]
+}
+
+export interface CustomOptions extends Omit<PageProps, 'content'> {
+    layout: string
+}
+
+export type SiteMap = Map<string, CustomOptions | SiteMap>

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "es2015",
+        "types": ["node"],
+        "moduleResolution": "nodenext",
+        "lib": ["decorators", "es5", "scripthost", "es2015.promise"],
+        "outDir": "./dist",
+        "module": "nodenext",
+        "declaration": true,
+        "declarationMap": false,
+        "sourceMap": true,
+        "removeComments": true,
+        "downlevelIteration": true,
+        "strict": true,
+        "alwaysStrict": true,
+        "resolveJsonModule": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "allowJs": true
+    },
+    "include": ["./src/**/*"]
+}