@leancodepl/vite-plugin-favicon 9.5.2

package/README.md

@@ -0,0 +1,84 @@
+# @leancodepl/vite-plugin-favicon
+
+A Typescript library for generating favicon formats and sizes from a source logo and injecting the HTML tags into the
+build output. Extracted from [vite favicon plugin](https://github.com/josh-hemphill/vite-plugin-favicon) and adjusted to
+be dev mode compatible.
+
+## Installation
+
+```bash
+npm install @leancodepl/vite-plugin-favicon
+```
+
+## API
+
+### `ViteFaviconsPlugin(options)`
+
+Creates a Vite plugin for generating favicons from a source logo.
+
+**Parameters:**
+
+- `options` - Configuration options for favicon generation
+
+**Returns:** Vite plugin instance
+
+### `ViteFaviconsPluginOptions`
+
+Configuration options for the Vite favicon plugin.
+
+**Properties:**
+
+- `logo?: string` - Source logo path for favicon generation (default: "assets/logo.png")
+- `inject?: boolean` - Whether to inject HTML links and metadata (default: true)
+- `favicons?: Partial<FaviconOptions>`
+- `outputPath?: string`
+
+## Usage Examples
+
+### Basic Configuration
+
+```javascript
+// vite.config.js
+import { ViteFaviconsPlugin } from "@leancodepl/vite-plugin-favicon"
+
+export default {
+  plugins: [ViteFaviconsPlugin()],
+}
+```
+
+### Custom Logo Path
+
+```javascript
+// vite.config.js
+import { ViteFaviconsPlugin } from "@leancodepl/vite-plugin-favicon"
+
+export default {
+  plugins: [
+    ViteFaviconsPlugin({
+      logo: "src/assets/logo.png",
+    }),
+  ],
+}
+```
+
+### Advanced Favicon Configuration
+
+```javascript
+// vite.config.js
+import { ViteFaviconsPlugin } from "@leancodepl/vite-plugin-favicon"
+
+export default {
+  plugins: [
+    ViteFaviconsPlugin({
+      logo: "src/assets/logo.png",
+      favicons: {
+        appName: "My Application",
+        appShortName: "MyApp",
+        themeColor: "#ffffff",
+        background: "#000000",
+        display: "standalone",
+      },
+    }),
+  ],
+}
+```

package/index.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./index.cjs.js').default;

package/index.cjs.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var favicons = require('favicons');
+var parse5 = require('parse5');
+var path = require('path');
+
+/**
+ * Creates a Vite plugin for generating favicons from a source logo.
+ *
+ * Generates various favicon formats and sizes, then injects the appropriate
+ * HTML tags into the build output. Supports watching for logo changes during development.
+ *
+ * @param options - Configuration options for favicon generation
+ * @returns Vite plugin instance
+ * @example
+ * ```javascript
+ * // vite.config.js
+ * import { ViteFaviconsPlugin } from '@leancodepl/vite-plugin-favicon'
+ *
+ * export default {
+ *   plugins: [
+ *     ViteFaviconsPlugin({
+ *       logo: 'src/assets/logo.png',
+ *       favicons: {
+ *         appName: 'My App',
+ *         appShortName: 'App',
+ *         themeColor: '#ffffff'
+ *       }
+ *     })
+ *   ]
+ * }
+ * ```
+ */
+function ViteFaviconsPlugin(options = {}) {
+  options.inject ??= true;
+  const logoPath = path.resolve(options.logo ?? path.join("assets", "logo.png"));
+  let faviconResponse = undefined;
+  const rebuildFavicons = async ctx => {
+    ctx.addWatchFile(logoPath);
+    faviconResponse = await favicons(logoPath, options.favicons);
+    for (const {
+      name,
+      contents
+    } of [...faviconResponse.files, ...faviconResponse.images]) {
+      ctx.emitFile({
+        type: "asset",
+        name,
+        source: contents
+      });
+    }
+  };
+  return {
+    name: "vite-plugin-favicon",
+    apply: "build",
+    async buildStart() {
+      await rebuildFavicons(this);
+    },
+    transformIndexHtml(_, ctx) {
+      if (!options.inject || !faviconResponse) return;
+      const tags = [];
+      const assets = Object.values(ctx.bundle ?? {});
+      for (const tag of faviconResponse.html) {
+        const node = parse5.parseFragment(tag).childNodes[0];
+        if ("attrs" in node) {
+          tags.push({
+            tag: node.tagName,
+            attrs: node.attrs.reduce((acc, v) => {
+              const name = assets.find(({
+                name
+              }) => name === v.value.slice(1))?.fileName;
+              acc[v.name] = name ? `/${name}` : v.value;
+              return acc;
+            }, {})
+          });
+        }
+      }
+      return tags;
+    }
+  };
+}
+
+exports.ViteFaviconsPlugin = ViteFaviconsPlugin;

package/index.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './index.cjs.js';
+export { _default as default } from './index.cjs.default.js';

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.esm.js

@@ -0,0 +1,80 @@
+import favicons from 'favicons';
+import { parseFragment } from 'parse5';
+import path from 'path';
+
+/**
+ * Creates a Vite plugin for generating favicons from a source logo.
+ *
+ * Generates various favicon formats and sizes, then injects the appropriate
+ * HTML tags into the build output. Supports watching for logo changes during development.
+ *
+ * @param options - Configuration options for favicon generation
+ * @returns Vite plugin instance
+ * @example
+ * ```javascript
+ * // vite.config.js
+ * import { ViteFaviconsPlugin } from '@leancodepl/vite-plugin-favicon'
+ *
+ * export default {
+ *   plugins: [
+ *     ViteFaviconsPlugin({
+ *       logo: 'src/assets/logo.png',
+ *       favicons: {
+ *         appName: 'My App',
+ *         appShortName: 'App',
+ *         themeColor: '#ffffff'
+ *       }
+ *     })
+ *   ]
+ * }
+ * ```
+ */
+function ViteFaviconsPlugin(options = {}) {
+  options.inject ??= true;
+  const logoPath = path.resolve(options.logo ?? path.join("assets", "logo.png"));
+  let faviconResponse = undefined;
+  const rebuildFavicons = async ctx => {
+    ctx.addWatchFile(logoPath);
+    faviconResponse = await favicons(logoPath, options.favicons);
+    for (const {
+      name,
+      contents
+    } of [...faviconResponse.files, ...faviconResponse.images]) {
+      ctx.emitFile({
+        type: "asset",
+        name,
+        source: contents
+      });
+    }
+  };
+  return {
+    name: "vite-plugin-favicon",
+    apply: "build",
+    async buildStart() {
+      await rebuildFavicons(this);
+    },
+    transformIndexHtml(_, ctx) {
+      if (!options.inject || !faviconResponse) return;
+      const tags = [];
+      const assets = Object.values(ctx.bundle ?? {});
+      for (const tag of faviconResponse.html) {
+        const node = parseFragment(tag).childNodes[0];
+        if ("attrs" in node) {
+          tags.push({
+            tag: node.tagName,
+            attrs: node.attrs.reduce((acc, v) => {
+              const name = assets.find(({
+                name
+              }) => name === v.value.slice(1))?.fileName;
+              acc[v.name] = name ? `/${name}` : v.value;
+              return acc;
+            }, {})
+          });
+        }
+      }
+      return tags;
+    }
+  };
+}
+
+export { ViteFaviconsPlugin };

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@leancodepl/vite-plugin-favicon",
+  "version": "9.5.2",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leancodepl/js_corelibrary.git",
+    "directory": "packages/vite-plugin-favicon"
+  },
+  "homepage": "https://github.com/leancodepl/js_corelibrary",
+  "bugs": {
+    "url": "https://github.com/leancodepl/js_corelibrary/issues"
+  },
+  "description": "Vite plugin for generating favicons",
+  "keywords": [
+    "vite",
+    "favicon",
+    "leancode"
+  ],
+  "author": {
+    "name": "LeanCode",
+    "url": "https://leancode.co"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "vite": ">=4.0.0"
+  },
+  "dependencies": {
+    "favicons": "^7.2.0",
+    "parse5": "^8.0.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "module": "./index.esm.js",
+      "types": "./index.d.ts",
+      "import": "./index.cjs.mjs",
+      "default": "./index.cjs.js"
+    }
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
+  "types": "./index.d.ts"
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib";

package/src/lib/index.d.ts

@@ -0,0 +1,53 @@
+import { FaviconOptions } from "favicons";
+import type { Plugin } from "vite";
+/**
+ * Configuration options for the Vite favicon plugin.
+ */
+export type ViteFaviconsPluginOptions = {
+    /** Source logo path for favicon generation.
+     * @default "assets/logo.png"
+     */
+    logo?: string;
+    /** Whether to inject HTML links and metadata.
+     * @default true
+     */
+    inject?: boolean;
+    /** Favicons configuration options.
+     * See [favicons documentation](https://github.com/itgalaxy/favicons) for details.
+     */
+    favicons?: Partial<FaviconOptions>;
+    /** Project root directory for metadata loading.
+     * @default process.cwd()
+     */
+    outputPath?: string;
+};
+type FaviconsPluginArgs = Partial<ViteFaviconsPluginOptions>;
+/**
+ * Creates a Vite plugin for generating favicons from a source logo.
+ *
+ * Generates various favicon formats and sizes, then injects the appropriate
+ * HTML tags into the build output. Supports watching for logo changes during development.
+ *
+ * @param options - Configuration options for favicon generation
+ * @returns Vite plugin instance
+ * @example
+ * ```javascript
+ * // vite.config.js
+ * import { ViteFaviconsPlugin } from '@leancodepl/vite-plugin-favicon'
+ *
+ * export default {
+ *   plugins: [
+ *     ViteFaviconsPlugin({
+ *       logo: 'src/assets/logo.png',
+ *       favicons: {
+ *         appName: 'My App',
+ *         appShortName: 'App',
+ *         themeColor: '#ffffff'
+ *       }
+ *     })
+ *   ]
+ * }
+ * ```
+ */
+export declare function ViteFaviconsPlugin(options?: FaviconsPluginArgs): Plugin;
+export {};