vite-plugin-unit 0.0.5 → 1.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,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
@@ -12,7 +12,7 @@ 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,18 @@ 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;
+            while ((match = attrRegex.exec(attr)) !== null) {
+                map[match[1]] = match[2];
+            }
+            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)) {
@@ -48,9 +65,26 @@ export default function plugin(options = {}) {
             .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;
         })
@@ -180,7 +214,12 @@ export default function plugin(options = {}) {
                     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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "vite-plugin-unit",
-    "version": "0.0.5",
-    "description": "A vite plugin to enable you build websites in units using alpine.js",
+    "version": "1.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",
@@ -17,8 +17,11 @@
     },
     "keywords": [
         "vite",
-        "alpine",
+        "static",
+        "site",
+        "static site generator",
         "ui",
+        "website",
         "browser"
     ],
     "author": {
@@ -57,16 +60,16 @@
     },
     "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",
+        "@types/node": "^20.12.2",
+        "@typescript-eslint/eslint-plugin": "^6.21.0",
+        "@typescript-eslint/parser": "^6.21.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-prettier": "^5.1.3",
         "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"
+        "lint-staged": "^15.2.2",
+        "prettier": "^3.2.5",
+        "release-it": "^17.1.1",
+        "typescript": "^5.4.3",
+        "vite": "^5.2.7"
     }
 }