favgen 0.2.0 → 0.2.2

package/README.md

@@ -31,3 +31,19 @@ const outputDirPath = "__favicons__"
 const paletteSize = 64 // default value
 produceIcons(inputFilePath, outputDirPath, paletteSize)
 ```
+
+Vite plugin usage:
+```js
+import { defineConfig } from "vite"
+import { favgenVitePlugin } from "favgen"
+
+export default defineConfig({
+  plugins: [
+    favgenVitePlugin({
+      source: "src/assets/logo.svg",
+      colors: 64,
+      assetsPath: "favicons",
+    }),
+  ],
+})
+```

package/lib/index.d.mts

@@ -0,0 +1,3 @@
+export { default as produceIcons } from "./generator.js";
+export { default as favgenVitePlugin } from "./vite-plugin.js";
+export type { FavgenVitePluginOptions } from "./vite-plugin.js";

package/lib/index.d.ts

@@ -1 +1,3 @@
 export { default as produceIcons } from "./generator";
+export { default as favgenVitePlugin } from "./vite-plugin";
+export type { FavgenVitePluginOptions } from "./vite-plugin";

package/lib/index.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.produceIcons = void 0;
+exports.favgenVitePlugin = exports.produceIcons = void 0;
 // eslint-disable-next-line import/prefer-default-export
 var generator_1 = require("./generator");
 Object.defineProperty(exports, "produceIcons", { enumerable: true, get: function () { return __importDefault(generator_1).default; } });
+var vite_plugin_1 = require("./vite-plugin");
+Object.defineProperty(exports, "favgenVitePlugin", { enumerable: true, get: function () { return __importDefault(vite_plugin_1).default; } });

package/lib/index.mjs

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.favgenVitePlugin = exports.produceIcons = void 0;
+var generator_js_1 = require("./generator.js");
+Object.defineProperty(exports, "produceIcons", { enumerable: true, get: function () { return __importDefault(generator_js_1).default; } });
+var vite_plugin_js_1 = require("./vite-plugin.js");
+Object.defineProperty(exports, "favgenVitePlugin", { enumerable: true, get: function () { return __importDefault(vite_plugin_js_1).default; } });

package/lib/vite-plugin.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from "vite";
+export declare type FavgenVitePluginOptions = {
+    source: string;
+    colors?: number;
+    assetsPath?: string;
+};
+export default function favgenVitePlugin(options: FavgenVitePluginOptions): Plugin;

package/lib/vite-plugin.js

@@ -0,0 +1,155 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const promises_1 = __importDefault(require("fs/promises"));
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+const generator_1 = __importDefault(require("./generator"));
+function normalizeAssetsPath(rawPath) {
+    if (!rawPath) {
+        return "";
+    }
+    return rawPath.replace(/^\/+/, "").replace(/\/+$/, "");
+}
+function getAssetUrl(base, assetsPath, filename) {
+    const relativePath = assetsPath
+        ? path_1.default.posix.join(assetsPath, filename)
+        : filename;
+    const normalizedBase = base.trim();
+    if (normalizedBase === "." || normalizedBase === "./") {
+        return relativePath;
+    }
+    if (/^https?:\/\//.test(normalizedBase)) {
+        return new URL(relativePath, normalizedBase).toString();
+    }
+    const baseWithSlash = normalizedBase.endsWith("/")
+        ? normalizedBase
+        : `${normalizedBase}/`;
+    return `${baseWithSlash}${relativePath}`;
+}
+function isValidPaletteSize(size) {
+    return Number.isInteger(size) && size >= 2 && size <= 256;
+}
+function rewriteManifest(manifestBuffer, base, assetsPath) {
+    const manifest = JSON.parse(manifestBuffer.toString("utf8"));
+    if (Array.isArray(manifest.icons)) {
+        manifest.icons = manifest.icons.map((icon) => {
+            const sourcePath = icon.src;
+            const iconFilename = typeof sourcePath === "string"
+                ? path_1.default.posix.basename(sourcePath)
+                : "";
+            return {
+                ...icon,
+                src: getAssetUrl(base, assetsPath, iconFilename),
+            };
+        });
+    }
+    return Buffer.from(JSON.stringify(manifest, null, 2));
+}
+function getHtmlTags(base, assetsPath, hasSvgIcon) {
+    const tags = [
+        {
+            tag: "link",
+            attrs: {
+                rel: "icon",
+                href: getAssetUrl(base, assetsPath, "favicon.ico"),
+                sizes: "any",
+            },
+            injectTo: "head",
+        },
+        {
+            tag: "link",
+            attrs: {
+                rel: "apple-touch-icon",
+                href: getAssetUrl(base, assetsPath, "apple-touch-icon.png"),
+            },
+            injectTo: "head",
+        },
+        {
+            tag: "link",
+            attrs: {
+                rel: "manifest",
+                href: getAssetUrl(base, assetsPath, "manifest.webmanifest"),
+            },
+            injectTo: "head",
+        },
+    ];
+    if (hasSvgIcon) {
+        tags.splice(1, 0, {
+            tag: "link",
+            attrs: {
+                rel: "icon",
+                href: getAssetUrl(base, assetsPath, "icon.svg"),
+                type: "image/svg+xml",
+            },
+            injectTo: "head",
+        });
+    }
+    return tags;
+}
+function favgenVitePlugin(options) {
+    const assetsPath = normalizeAssetsPath(options.assetsPath);
+    const paletteSize = options.colors ?? 64;
+    const sourcePath = options.source;
+    let config = null;
+    let tempDirPath = null;
+    let generatedAssets = [];
+    let hasSvgIcon = false;
+    return {
+        name: "favgen-vite-plugin",
+        apply: "build",
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        async buildStart() {
+            if (!config) {
+                throw new Error("favgen-vite-plugin: Vite config is not resolved.");
+            }
+            if (!sourcePath || sourcePath.trim().length === 0) {
+                throw new Error("favgen-vite-plugin: `source` option is required.");
+            }
+            if (!isValidPaletteSize(paletteSize)) {
+                throw new Error("favgen-vite-plugin: `colors` must be an integer between 2 and 256.");
+            }
+            const resolvedSourcePath = path_1.default.isAbsolute(sourcePath)
+                ? sourcePath
+                : path_1.default.resolve(config.root, sourcePath);
+            tempDirPath = await promises_1.default.mkdtemp(path_1.default.join(os_1.default.tmpdir(), "favgen-vite-"));
+            await (0, generator_1.default)(resolvedSourcePath, tempDirPath, paletteSize);
+            const fileNames = (await promises_1.default.readdir(tempDirPath)).sort();
+            hasSvgIcon = fileNames.includes("icon.svg");
+            const assets = await Promise.all(fileNames.map(async (filename) => ({
+                filename,
+                source: await promises_1.default.readFile(path_1.default.join(tempDirPath, filename)),
+            })));
+            generatedAssets = assets.map((asset) => (asset.filename === "manifest.webmanifest"
+                ? {
+                    ...asset,
+                    source: rewriteManifest(asset.source, config?.base ?? "/", assetsPath),
+                }
+                : asset));
+        },
+        generateBundle() {
+            generatedAssets.forEach((asset) => {
+                this.emitFile({
+                    type: "asset",
+                    fileName: assetsPath
+                        ? path_1.default.posix.join(assetsPath, asset.filename)
+                        : asset.filename,
+                    source: asset.source,
+                });
+            });
+        },
+        transformIndexHtml() {
+            return getHtmlTags(config?.base ?? "/", assetsPath, hasSvgIcon);
+        },
+        async closeBundle() {
+            if (tempDirPath) {
+                await promises_1.default.rm(tempDirPath, { recursive: true, force: true });
+            }
+        },
+    };
+}
+exports.default = favgenVitePlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "favgen",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "CLI tool to generate a set of favicons from a single input file.",
   "keywords": [
     "favicon"
@@ -10,18 +10,36 @@
   "homepage": "https://github.com/favgen/favgen",
   "repository": "https://github.com/favgen/favgen.git",
   "main": "lib/index.js",
+  "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
   "bin": "bin/index.js",
   "files": [
     "lib/",
     "bin/"
   ],
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">= 16"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",
     "build:dev": "tsc --watch --project tsconfig.json",
+    "test": "npm run build && vitest run",
+    "test:watch": "npm run build && vitest",
     "prepublishOnly": "npm run build",
     "huskify": "husky install && husky add .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit",
     "lint": "eslint --ext .js,.cjs,.mjs,.ts,.cts,.mts --fix --ignore-path .gitignore --cache",
@@ -49,6 +67,7 @@
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "vitest": "^3.2.4"
   }
 }