vite-plugin-unit 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Henry Hale (https://github.com/henryhale)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# vite-plugin-unit
+
+[![npm](https://img.shields.io/npm/v/vite-plugin-unit.svg?style=for-the-badge)](https://www.npmjs.com/package/vite-plugin-unit)
+
+A vite plugin for handling unit.js projects
+
+## installation
+
+```sh
+npm i -D vite-plugin-unit
+```
+
+## usage
+
+```js
+import unit from "vite-plugin-unit";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    plugins: [
+        unit({/* options */})
+    ]
+});
+```
+
+## configuration
+
+```ts
+type PluginOptions = {
+    pages: string;
+    template: string;
+    slot: string;
+};
+```
+
+- `options.template`: _string_ - The HTML file in which compiles .unit files will be mounted
+- `options.pages`: _string_ - The folder under `src` folder containing the pages or routes
+- `options.slot`: _string_ - The slot identifier in the template to be replaced by compiled .unit files
+
+## default options
+
+```js
+const defaultOptions = {
+    pages: "pages/",
+    template: "template.html",
+    slot: "#slot#"
+};
+```
+
+## License
+
+Released under the [MIT License](./LICENSE.md)
+
+Copyright © 2024-present, [Henry Hale](https://github.com/henryhale)

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ *  vite-plugin-unit
+ *  @author Henry Hale
+ *  @license MIT
+ *  @url https://github.com/unit-js/vite-plugin-unit
+ */
+import type { Plugin } from "vite";
+export type PluginOptions = {
+    pages: string;
+    template: string;
+    slot: string;
+};
+export default function plugin(options: Partial<PluginOptions>): Plugin[];

package/dist/index.js

@@ -0,0 +1,218 @@
+/**
+ *  vite-plugin-unit
+ *  @author Henry Hale
+ *  @license MIT
+ *  @url https://github.com/unit-js/vite-plugin-unit
+ */
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, extname, join } 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#"
+};
+export default function plugin(options) {
+    const opt = Object.assign({}, defaultOptions, options);
+    // unit file extension
+    const ext = ".unit";
+    // source code folder
+    const srcDir = "src/";
+    // intermediate output folder for unit.js
+    const outputDir = "./.unit/";
+    // regexp to match single html tag
+    const htmlRegex = /<(.+?) ([/]?|.+?)>/g;
+    // mapping file path to thier contents
+    const pathToCode = new Map();
+    // function that compiles .unit files
+    function compile(file = "", code = "") {
+        let filePath = null;
+        let content = null;
+        const nameToPath = new Map();
+        // remove all import statements while saving the import names & content
+        return (code
+            .replace(/import (.+?) from "(.+?)"(.+?)/g, (_, importName, importPath) => {
+            filePath = join(dirname(file), importPath);
+            nameToPath.set(importName, filePath);
+            if (!pathToCode.has(filePath)) {
+                content = compile(filePath, readFileSync(filePath, "utf-8"));
+                pathToCode.set(filePath, content);
+            }
+            return "";
+        })
+            // replace every html tag matching an import name
+            .replace(htmlRegex, (match, tag, attr = "") => {
+            const path = nameToPath.get(tag);
+            if (path) {
+                if (attr.endsWith("/"))
+                    attr = attr.slice(0, -1);
+                return pathToCode.get(path).replace(/<(.+?)>/, (m) => m.slice(0, -1) + " " + attr + ">");
+            }
+            return match;
+        })
+            .trim());
+    }
+    return [
+        {
+            /**
+             * Unit.js - Server plugin
+             */
+            name: "vite-plugin-unit-serve",
+            /**
+             * use this plugin in development mode
+             */
+            apply: "serve",
+            /**
+             * partial config
+             */
+            config() {
+                return {
+                    root: srcDir
+                };
+            },
+            /**
+             * intercept vite server requests and compile .unit files on demand
+             */
+            configureServer({ middlewares, config }) {
+                /**
+                 * register a middleware to intercept the server's requests
+                 */
+                middlewares.use(async (req, res, next) => {
+                    /**
+                     * function to send compiled .unit file as html
+                     */
+                    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 compiled = compile(file, await readFile(file, { encoding: "utf-8" }));
+                        res.end(contents.replace(opt.slot, compiled));
+                    }
+                    // folder containing pages
+                    const srcDir = join(config.root, opt.pages);
+                    // generate actual file path
+                    let filePath = join(srcDir, req.url + (req.url?.endsWith("/") ? "index.html" : ""));
+                    // check if the requested html file does not exist
+                    if (filePath.endsWith(".html") && !existsSync(filePath)) {
+                        filePath = filePath.replace(".html", ext);
+                        if (existsSync(filePath)) {
+                            // print request to the console
+                            log(req.method?.toUpperCase(), req.url, filePath);
+                            // send requested file
+                            return await respond(filePath);
+                        }
+                    }
+                    // try checking if the requested asset exists in the `src` folder
+                    if (filePath.lastIndexOf(".") > -1) {
+                        filePath = join(config.root, req.url);
+                        if (existsSync(filePath)) {
+                            // direct the file path relative to the `src` folder
+                            req.url = filePath;
+                        }
+                    }
+                    return next();
+                });
+            }
+        },
+        {
+            /**
+             * Unit.js - Build plugin
+             */
+            name: "vite-plugin-unit-build",
+            /**
+             * only apply this plugin on `vite build` command
+             */
+            apply: "build",
+            /**
+             * modify vite config in favor of this plugin
+             */
+            config() {
+                return {
+                    base: "./",
+                    root: outputDir
+                };
+            },
+            /**
+             * function invoked when the build process begins
+             */
+            async buildStart(options) {
+                const output = join(__dirname, outputDir);
+                /**
+                 * Create unit.js compiled output directory
+                 */
+                if (existsSync(output)) {
+                    rm(output, { recursive: true, force: true });
+                }
+                await mkdir(outputDir);
+                /**
+                 * Copy entire `src/` to `.unit/`
+                 */
+                await cp("./src/", outputDir, { recursive: true });
+                /**
+                 * Grab the template file
+                 */
+                const templateFile = join(outputDir, opt.template);
+                const template = await readFile(templateFile, { encoding: "utf-8" });
+                /**
+                 * Capture the pages
+                 */
+                const srcDir = join(outputDir, "./pages/");
+                const srcFiles = await readdir(srcDir, { recursive: true });
+                const pages = srcFiles.filter((file) => extname(file) === ext);
+                log("pages: ", pages);
+                /**
+                 * Function that generate .html file from compiled .unit file
+                 */
+                async function generateBuild(page) {
+                    const filePath = join(srcDir, page);
+                    if (Array.isArray(options.input)) {
+                        options.input.push(join(outputDir, page.replace(ext, ".html")));
+                    }
+                    else {
+                        // ...
+                    }
+                    const fileContent = await readFile(filePath, { encoding: "utf-8" });
+                    const compiledPage = compile(filePath, fileContent);
+                    const result = template.replace(opt.template, compiledPage);
+                    log("build: ", page);
+                    return await writeFile(join(outputDir, page.replace(ext, ".html")), result);
+                }
+                /**
+                 * Clear the input files
+                 */
+                if (options.input.length) {
+                    options.input.length = 0;
+                }
+                else {
+                    options.input = [];
+                }
+                /**
+                 * Generate builds, add input files for rollup to resolve dependencies
+                 */
+                await Promise.all(pages.map((page) => generateBuild(page)));
+            },
+            /**
+             * function invoked when the output bundle is complete
+             */
+            async closeBundle() {
+                /**
+                 * Remove the dist folder if exists
+                 */
+                const distFolder = join(__dirname, "dist");
+                if (existsSync(distFolder)) {
+                    await rm(distFolder, { recursive: true, force: true });
+                }
+                /**
+                 * Copy the entire unit dist folder to the root of the project
+                 */
+                await cp(outputDir + "dist", distFolder, { recursive: true });
+                // await new Promise((res) => setTimeout(res, 5000));
+                /**
+                 * Delete the entire unit output folder
+                 */
+                await rm(outputDir, { recursive: true, force: true });
+            }
+        }
+    ];
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+    "name": "vite-plugin-unit",
+    "version": "0.0.1",
+    "description": "A vite plugin for handling unit.js projects",
+    "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"
+    }
+}