vite-plugin-unit 0.0.5 → 2.0.0

package/README.md

@@ -4,6 +4,8 @@
 
 A vite plugin to enable you build websites in units using alpine.js
 
+Check out the [create-unit](https://github.com/henryhale/create-unit) library for details.
+
 ## installation
 
 ```sh

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  *  vite-plugin-unit
- *  @description A vite plugin to enable you build websites in units using alpine.js
+ *  @description A vite plugin to enable you build websites in units.
  *  @author Henry Hale
  *  @license MIT
  *  @url https://github.com/henryhale/vite-plugin-unit

package/dist/index.js

@@ -1,18 +1,18 @@
 /**
  *  vite-plugin-unit
- *  @description A vite plugin to enable you build websites in units using alpine.js
+ *  @description A vite plugin to enable you build websites in units.
  *  @author Henry Hale
  *  @license MIT
  *  @url https://github.com/henryhale/vite-plugin-unit
  */
+import { log } from "node:console";
 import { existsSync, readFileSync } from "node:fs";
+import { cp, mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
 import { dirname, extname, join, resolve } from "node:path";
-import { cp, mkdir, readFile, readdir, rm, writeFile } from "node:fs/promises";
-import { log } from "node:console";
 const defaultOptions = {
     pages: "pages/",
     template: "template.html",
-    slot: "#slot#"
+    slot: "<slot></slot>"
 };
 export default function plugin(options = {}) {
     const opt = Object.assign({}, defaultOptions, options);
@@ -23,9 +23,17 @@ export default function plugin(options = {}) {
     // source code folder
     const srcDir = "src/";
     // intermediate output folder for unit.js
-    const outputDir = "./.unit/";
-    // regexp to match single html tag
+    const outputDir = ".unit/";
+    // regexp to match single html tag with attributes
     const htmlRegex = /<(.+?) ([/]?|.+?)>/g;
+    // import statements
+    const importRegex = /import (.+?) from "(.+?)"(.+?)/g;
+    // html tag regexp
+    const tagRegex = /<(.+?)>/;
+    // regexp to match attributes in html tag
+    const attrRegex = /(\w+(?:-\w+)*)\s*=\s*["']([^"']+)["']/g;
+    // regexp to match placeholders like {text}
+    const valueRegex = /{(\w*)}/g;
     // mapping file path to thier contents
     const pathToCode = new Map();
     // function that compiles .unit files
@@ -33,9 +41,19 @@ export default function plugin(options = {}) {
         let filePath = null;
         let content = null;
         const nameToPath = new Map();
+        // create a key-value object from attributes of an html tag
+        function mapAttributes(attr = "") {
+            const map = {};
+            let match = attrRegex.exec(attr);
+            while (match !== null) {
+                map[match[1]] = match[2];
+                match = attrRegex.exec(attr);
+            }
+            return map;
+        }
         // remove all import statements while saving the import names & content
         return (code
-            .replace(/import (.+?) from "(.+?)"(.+?)/g, (_, importName, importPath) => {
+            .replace(importRegex, (_, importName, importPath) => {
             filePath = join(dirname(file), importPath);
             nameToPath.set(importName, filePath);
             if (!pathToCode.has(filePath)) {
@@ -45,12 +63,29 @@ export default function plugin(options = {}) {
             return "";
         })
             // replace every html tag matching an import name
-            .replace(htmlRegex, (match, tag, attr = "") => {
+            .replace(htmlRegex, (match, tag, attr) => {
             const path = nameToPath.get(tag);
             if (path) {
+                // get rid of trailing forward slash
                 if (attr.endsWith("/"))
                     attr = attr.slice(0, -1);
-                return pathToCode.get(path).replace(/<(.+?)>/, (m) => m.slice(0, -1) + " " + attr + ">");
+                const map = mapAttributes(attr);
+                return (pathToCode
+                    .get(path)
+                    ?.replace(valueRegex, (m, key) => {
+                    const value = map[key];
+                    if (value) {
+                        delete map[key];
+                        return value;
+                    }
+                    return m;
+                })
+                    .replace(tagRegex, (m) => {
+                    const others = Object.entries(map).reduce((r, [k, v]) => {
+                        return `${r + k}=${/'/.test(v) ? `"${v}"` : `'${v}'`}`;
+                    }, "");
+                    return `${m.slice(0, -1)} ${others}>`;
+                }) ?? "");
             }
             return match;
         })
@@ -88,7 +123,9 @@ export default function plugin(options = {}) {
                     async function respond(file) {
                         res.statusCode = 200;
                         res.setHeader("Content-Type", "text/html");
-                        const contents = await readFile(join(config.root, opt.template), { encoding: "utf-8" });
+                        const contents = await readFile(join(config.root, opt.template), {
+                            encoding: "utf-8"
+                        });
                         pathToCode.clear();
                         const compiled = compile(file, await readFile(file, { encoding: "utf-8" }));
                         res.end(contents.replace(opt.slot, compiled));
@@ -109,7 +146,7 @@ export default function plugin(options = {}) {
                     }
                     // try checking if the requested asset exists in the `src` folder
                     if (filePath.lastIndexOf(".") > -1) {
-                        filePath = join(config.root, req.url);
+                        filePath = join(config.root, req.url || "");
                         if (existsSync(filePath)) {
                             // direct the file path relative to the `src` folder
                             req.url = filePath;
@@ -157,7 +194,9 @@ export default function plugin(options = {}) {
                  * Grab the template file
                  */
                 const templateFile = join(outputDir, opt.template);
-                const template = await readFile(templateFile, { encoding: "utf-8" });
+                const template = await readFile(templateFile, {
+                    encoding: "utf-8"
+                });
                 /**
                  * Capture the pages
                  */
@@ -176,11 +215,18 @@ export default function plugin(options = {}) {
                     else {
                         // ...
                     }
-                    const fileContent = await readFile(filePath, { encoding: "utf-8" });
+                    const fileContent = await readFile(filePath, {
+                        encoding: "utf-8"
+                    });
                     const compiledPage = compile(filePath, fileContent);
                     const result = template.replace(opt.slot, compiledPage);
                     log("build: ", page);
-                    return await writeFile(join(outputDir, page.replace(ext, ".html")), result);
+                    const fullPath = join(outputDir, page.replace(ext, ".html"));
+                    const dirPath = dirname(fullPath);
+                    if (!existsSync(dirPath)) {
+                        await mkdir(dirPath, { recursive: true });
+                    }
+                    return await writeFile(fullPath, result);
                 }
                 /**
                  * Clear the input files
@@ -210,7 +256,7 @@ export default function plugin(options = {}) {
                 /**
                  * Copy the entire unit dist folder to the root of the project
                  */
-                await cp(outputDir + "dist", distFolder, { recursive: true });
+                await cp(`${outputDir}dist`, distFolder, { recursive: true });
                 // await new Promise((res) => setTimeout(res, 5000));
                 /**
                  * Delete the entire unit output folder

package/package.json

@@ -1,72 +1,60 @@
 {
-    "name": "vite-plugin-unit",
-    "version": "0.0.5",
-    "description": "A vite plugin to enable you build websites in units using alpine.js",
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "files": [
-        "./dist/",
-        "./LICENSE.md",
-        "./README.md",
-        "./package.json"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/henryhale/vite-plugin-unit.git"
-    },
-    "keywords": [
-        "vite",
-        "alpine",
-        "ui",
-        "browser"
-    ],
-    "author": {
-        "name": "Henry Hale",
-        "url": "https://github.com/henryhale"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/henryhale/vite-plugin-unit/issues"
-    },
-    "homepage": "https://github.com/henryhale/vite-plugin-unit#readme",
-    "type": "module",
-    "scripts": {
-        "build": "tsc -b",
-        "dev": "tsc -w",
-        "lint": "eslint --cache --ext .ts source/ && prettier -c source/",
-        "lint:fix": "eslint --cache --ext .ts source/ --fix && prettier -c -w source/",
-        "prepack": "pnpm build",
-        "prepare": "husky install",
-        "release": "release-it",
-        "test": "echo \"Error: no test specified\""
-    },
-    "engines": {
-        "node": ">=18",
-        "pnpm": ">=8"
-    },
-    "lint-staged": {
-        "*.ts": "pnpm lint:fix"
-    },
-    "prettier": {
-        "printWidth": 120,
-        "tabWidth": 4,
-        "semi": true,
-        "singleQuote": false,
-        "trailingComma": "none"
-    },
-    "devDependencies": {
-        "@release-it/conventional-changelog": "^8.0.1",
-        "@types/node": "^20.10.6",
-        "@typescript-eslint/eslint-plugin": "^6.16.0",
-        "@typescript-eslint/parser": "^6.16.0",
-        "eslint": "^8.56.0",
-        "eslint-plugin-prettier": "^5.1.2",
-        "husky": "^8.0.3",
-        "lint-staged": "^15.2.0",
-        "prettier": "^3.1.1",
-        "release-it": "^17.0.1",
-        "typescript": "^5.3.3",
-        "vite": "^5.0.11"
-    }
+  "name": "vite-plugin-unit",
+  "version": "2.0.0",
+  "description": "A vite plugin to enable you build websites in units.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist/",
+    "./LICENSE.md",
+    "./README.md",
+    "./package.json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/henryhale/vite-plugin-unit.git"
+  },
+  "keywords": [
+    "vite",
+    "static",
+    "site",
+    "static site generator",
+    "ui",
+    "website",
+    "browser"
+  ],
+  "author": {
+    "name": "Henry Hale",
+    "url": "https://github.com/henryhale"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/henryhale/vite-plugin-unit/issues"
+  },
+  "homepage": "https://github.com/henryhale/vite-plugin-unit#readme",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -w",
+    "lint": "biome check",
+    "lint:fix": "biome check --fix",
+    "prepack": "pnpm build",
+    "prepare": "husky || true",
+    "release": "release-it",
+    "test": "echo \"Error: no test specified\""
+  },
+  "lint-staged": {
+    "*.ts": "pnpm lint:fix"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.10",
+    "@release-it/conventional-changelog": "^10.0.6",
+    "@types/node": "^25.5.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "release-it": "^19.2.4",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3"
+  }
 }