refactor(documentation-ui): migrate to TypeScript

.changeset/happy-cities-refuse.md

@@ -0,0 +1,5 @@
+---
+"@nodesecure/documentation-ui": major
+---
+
+Migrate to TypeScript

package.json

@@ -17,7 +17,7 @@
  "lint-fix": "npm run lint -- --fix",
  "prepublishOnly": "rimraf ./dist && npm run build && pkg-ok",
  "dev": "npm run build:workspaces && node ./esbuild.dev.config.ts",
- "build": "npm run build:front && npm run build:workspaces",
+ "build": "npm run build:workspaces && npm run build:front",
  "build:front": "node ./esbuild.config.ts",
  "build:workspaces": "npm run build --ws --if-present",
  "test": "npm run test:cli && npm run lint && npm run lint:css",
@@ -92,7 +92,8 @@
  "rimraf": "6.1.3",
  "stylelint": "17.5.0",
  "stylelint-config-standard": "40.0.0",
- "typescript": "^5.8.3"
+ "typescript": "^5.8.3",
+ "vite": "8.0.2"
  },
  "dependencies": {
  "@lit/task": "^1.0.3",

tsconfig.json

@@ -9,6 +9,9 @@
  },
  {
  "path": "./workspaces/size-satisfies"
+ },
+ {
+ "path": "./workspaces/documentation-ui"
  }
  ]
 }

workspaces/documentation-ui/README.md

@@ -32,7 +32,6 @@ Portable documentation/wiki UI for NodeSecure tools like [CLI](https://github.co
 
 - Render [NodeSecure flags](https://github.com/NodeSecure/flags/blob/main/FLAGS.md) using the package `@nodesecure/flags`.
 - Render [NodeSecure JS-X-RAY SAST Warnings](https://github.com/NodeSecure/js-x-ray).
-- Written in vanilla.js for maximum performance.
 
 > [!NOTE]
 > The content is retrieved from the github API (and sometimes it transform raw markdown response to HTML, that's why we use [markdown-it](https://github.com/markdown-it/markdown-it#readme) as dependency).
@@ -83,18 +82,22 @@ export interface RenderDocumentationUIOptions {
 
 ### Fetch assets required for the bundler
 
-An incomplete example for esbuild.
+An incomplete example for Vite.
 
-```js
+```ts
 // Import Third-party Dependencies
 import { getBuildConfiguration } from "@nodesecure/documentation-ui/node";
-import esbuild from "esbuild";
+import { defineConfig } from "vite";
 
 // Note: all entry points for assets (css etc..).
 const { entryPoints } = getBuildConfiguration();
 
-await esbuild.build({
- entryPoints: [...entryPoints],
+export default defineConfig({
+ build: {
+ rollupOptions: {
+ input: [...entryPoints],
+ },
+ },
 });
 ```
 
@@ -149,11 +152,12 @@ $ npm run example
 
 ```json
 "scripts": {
- "example": "npm run example:build && http-server ./dist",
- "example:build": "node esbuild.config.js"
+ "example": "vite"
 }
 ```
 
+This starts a [Vite](https://vite.dev/) dev server with HMR, opening `example/demo.html` automatically in your browser.
+
 ## License
 
 MIT

workspaces/documentation-ui/example/demo.html

@@ -8,8 +8,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="src/css/main.css" />
-<script src="example/master.js" type="module"></script>
+<script src="master.ts" type="module"></script>
 <style>
  html,
 body,

workspaces/documentation-ui/example/master.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+// Import Internal Dependencies
+import "../src/css/main.css";
+import * as documentationUI from "../src/index.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+ const mainElement = document.getElementById("main");
+ if (!mainElement) {
+ throw new Error("Main element not found");
+ }
+
+ documentationUI.render(mainElement, {
+ prefetch: true
+ });
+});

workspaces/documentation-ui/package.json

@@ -4,8 +4,10 @@
  "description": "Portable UI for NodeSecure tools (guides on flags, security docs etc..)",
  "type": "module",
  "scripts": {
- "example": "npm run example:build && http-server ./dist",
- "example:build": "node esbuild.config.js"
+ "build": "tsc && cp -r src/css dist/css",
+ "prepublishOnly": "npm run build",
+ "lint": "eslint src example",
+ "example": "vite"
  },
  "publishConfig": {
  "registry": "https://registry.npmjs.org",
@@ -18,14 +20,18 @@
  "directory": "workspaces/documentation-ui"
  },
  "files": [
- "index.js",
- "src"
+ "dist"
  ],
  "exports": {
- ".": "./index.js",
- "./node": "./src/nodejs/esm.js"
+ ".": {
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.js"
+ },
+ "./node": {
+ "types": "./dist/nodejs/esm.d.ts",
+ "default": "./dist/nodejs/esm.js"
+ }
  },
- "types": "./index.d.ts",
  "keywords": [
  "nodesecure",
  "documentation",
@@ -34,9 +40,12 @@
  "author": "GENTILHOMME Thomas <gentilhomme.thomas@gmail.com>",
  "license": "MIT",
  "dependencies": {
- "@nodesecure/flags": "^3.0.3",
+ "@nodesecure/flags": "3.0.3",
  "@nodesecure/js-x-ray": "14.2.0",
- "highlight.js": "^11.10.0",
+ "highlight.js": "11.11.1",
  "markdown-it": "14.1.1"
+ },
+ "devDependencies": {
+ "@types/markdown-it": "14.1.2"
  }
 }