@number10/jsx-icon-generator 5.0.0

package/dist/generate-icons.js

@@ -0,0 +1,502 @@
+#!/usr/bin/env node
+import { watch } from "node:fs";
+import { access, readFile, readdir, writeFile } from "node:fs/promises";
+import { basename, dirname, extname, join, relative, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { parseArgs } from "node:util";
+//#region src/generate-icons.ts
+/**
+* Unified icon generator
+* Can generate types and/or loaders based on configuration
+*
+* Usage:
+*   generate-icons --config ./icon-generator.config.ts
+*   generate-icons --types-only
+*   generate-icons --loaders-only
+*   generate-icons --config ./icon-generator.config.ts --watch
+*/
+var TS_CONFIG_EXTENSIONS = new Set([
+	".ts",
+	".mts",
+	".cts",
+	".tsx"
+]);
+/**
+* Find icon package in node_modules
+*/
+async function findIconPackage(packageName, cwd) {
+	const fs = await import("node:fs");
+	const pnpmBase = join(cwd, "node_modules/.pnpm");
+	if (fs.existsSync(pnpmBase)) {
+		const entries = await readdir(pnpmBase);
+		for (const entry of entries) if (entry.startsWith(`${packageName}@`)) {
+			const packagePath = join(pnpmBase, entry, "node_modules", packageName);
+			if (fs.existsSync(packagePath)) return packagePath;
+		}
+	}
+	const standardPath = join(cwd, "node_modules", packageName);
+	if (fs.existsSync(standardPath)) return standardPath;
+	throw new Error(`Could not find package: ${packageName}`);
+}
+/**
+* Recursively find all TypeScript files
+*/
+async function findTsFiles(dir, exclude = []) {
+	const files = [];
+	const entries = await readdir(dir, { withFileTypes: true });
+	for (const entry of entries) {
+		const fullPath = join(dir, entry.name);
+		if (exclude.some((pattern) => fullPath.includes(pattern))) continue;
+		if (entry.isDirectory()) {
+			if (entry.name === "node_modules" || entry.name === "dist") continue;
+			files.push(...await findTsFiles(fullPath, exclude));
+		} else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name)) files.push(fullPath);
+	}
+	return files;
+}
+/**
+* Extract icon names from file content
+*/
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function addStringLiteralIcons(expression, iconNames) {
+	const stringLiteralPattern = /(["'])([^"'\r\n]+)\1/g;
+	let match;
+	while ((match = stringLiteralPattern.exec(expression)) !== null) {
+		const iconName = match[2];
+		if (iconName) iconNames.add(iconName);
+	}
+}
+function addIconTypeDeclarationIcons(content, iconNames) {
+	const iconTypeLiteralDeclarationPattern = /\b(?:const|let|var)\s+\w+\s*:\s*[^=;\r\n]*\bIconType\b[^=;\r\n]*=\s*(["'])([^"']+)\1/g;
+	let match;
+	while ((match = iconTypeLiteralDeclarationPattern.exec(content)) !== null) {
+		const iconName = match[2];
+		if (iconName) iconNames.add(iconName);
+	}
+}
+function extractIconNames(content, componentNames, customPatterns) {
+	const iconNames = /* @__PURE__ */ new Set();
+	let match;
+	for (const componentName of componentNames) {
+		const escapedComponentName = escapeRegExp(componentName);
+		const typePattern = new RegExp(`<${escapedComponentName}\\s+[^>]*\\btype=(?:["']([^"']+)["']|\\{["']([^"']+)["']\\})`, "g");
+		while ((match = typePattern.exec(content)) !== null) {
+			const iconName = match[1] || match[2];
+			if (iconName) iconNames.add(iconName);
+		}
+		const typeExpressionPattern = new RegExp(`<${escapedComponentName}\\s+[^>]*\\btype=\\{([^}]*)\\}`, "g");
+		while ((match = typeExpressionPattern.exec(content)) !== null) {
+			const expression = match[1];
+			if (expression) addStringLiteralIcons(expression, iconNames);
+		}
+	}
+	addIconTypeDeclarationIcons(content, iconNames);
+	const themedPattern = /themed\.(\w*[Ii]con)\s*\?\?\s*["']([^"']+)["']/g;
+	while ((match = themedPattern.exec(content)) !== null) if (match[2]) iconNames.add(match[2]);
+	const iconPropPattern = /(?:icon|iconType):\s*["']([^"']+)["']/g;
+	while ((match = iconPropPattern.exec(content)) !== null) if (match[1]) iconNames.add(match[1]);
+	if (customPatterns) for (const customPattern of customPatterns) {
+		const pattern = new RegExp(customPattern.pattern, "g");
+		while ((match = pattern.exec(content)) !== null) {
+			const iconName = match[customPattern.captureGroup];
+			if (iconName) iconNames.add(iconName);
+		}
+	}
+	return iconNames;
+}
+/**
+* Load available icons from types file
+*/
+async function loadAvailableIcons(typesFile) {
+	try {
+		const match = (await readFile(typesFile, "utf-8")).match(/(?:export\s+)?type\s+\w+\s*=\s*([\s\S]+?)(?=\n\nexport|\n\/\/|$)/s);
+		if (!match?.[1]) return null;
+		const typeContent = match[1];
+		const icons = /* @__PURE__ */ new Set();
+		const iconPattern = /'([^']+)'/g;
+		let iconMatch;
+		while ((iconMatch = iconPattern.exec(typeContent)) !== null) {
+			const iconName = iconMatch[1];
+			if (iconName) icons.add(iconName);
+		}
+		return icons;
+	} catch {
+		return null;
+	}
+}
+/**
+* Generate icon types
+* Exported for use by Vite plugin
+*/
+async function generateTypes(config, cwd) {
+	if (!config.types?.enabled) return null;
+	console.log("\n📝 Generating icon types...");
+	const sources = Array.isArray(config.source) ? config.source : [config.source];
+	const allIconNames = [];
+	const sourceInfos = [];
+	const sourceIconSets = /* @__PURE__ */ new Map();
+	for (let i = 0; i < sources.length; i++) {
+		const source = sources[i];
+		if (!source) continue;
+		let iconsDir;
+		let sourceName;
+		if (source.directory) {
+			iconsDir = resolve(cwd, source.directory);
+			sourceName = source.label || source.directory;
+			console.log(`📁 Scanning directory: ${source.directory}`);
+		} else if (source.package) {
+			iconsDir = join(await findIconPackage(source.package, cwd), source.iconsPath || "icons");
+			sourceName = source.label || source.package;
+			console.log(`📦 Scanning package: ${source.package}`);
+		} else throw new Error("Either source.package or source.directory must be specified");
+		const iconNames = (await readdir(iconsDir)).filter((file) => file.endsWith(".svg")).map((file) => basename(file, ".svg"));
+		console.log(`✓ Found ${iconNames.length} icons from ${sourceName}`);
+		allIconNames.push(...iconNames);
+		sourceInfos.push({
+			name: sourceName,
+			count: iconNames.length
+		});
+		sourceIconSets.set(i, new Set(iconNames));
+	}
+	const uniqueIconNames = [...new Set(allIconNames)].sort();
+	console.log(`✓ Total unique icons: ${uniqueIconNames.length}`);
+	const typeDefinition = uniqueIconNames.map((name) => `  | '${name}'`).join("\n");
+	const typeName = config.types.typeName || "IconType";
+	const output = `/**
+ * Auto-generated icon type definitions
+ * Sources: ${sourceInfos.length === 1 && sourceInfos[0] ? sourceInfos[0].name : sourceInfos.map((s) => `${s.name} (${s.count})`).join(", ")}
+ * Total unique icons: ${uniqueIconNames.length}
+ *
+ * @generated by @number10/jsx-icon-generator/generate-icons
+ * @cspell: disable
+ */
+
+/**
+ * All available icon names
+ * Type-only definition - no runtime imports, zero bundle impact
+ */
+export type ${typeName} =
+${typeDefinition}
+`;
+	const outputPath = resolve(cwd, config.types.output);
+	await writeFile(outputPath, output, "utf-8");
+	console.log(`✓ Generated: ${outputPath}`);
+	console.log(`✓ Type name: ${typeName}`);
+	return {
+		iconNames: uniqueIconNames,
+		sourceIconSets
+	};
+}
+/**
+* Scan icon sources without generating the types file
+* Used by Vite plugin to get sourceIconSets for loader generation without full type regeneration
+* @param config - Icon generator configuration
+* @param cwd - Current working directory
+* @returns Icon names and source mapping
+*/
+async function scanIconSources(config, cwd) {
+	const sources = Array.isArray(config.source) ? config.source : [config.source];
+	const allIconNames = [];
+	const sourceIconSets = /* @__PURE__ */ new Map();
+	for (let i = 0; i < sources.length; i++) {
+		const source = sources[i];
+		if (!source) continue;
+		let iconsDir;
+		if (source.directory) iconsDir = resolve(cwd, source.directory);
+		else if (source.package) iconsDir = join(await findIconPackage(source.package, cwd), source.iconsPath || "icons");
+		else throw new Error("Either source.package or source.directory must be specified");
+		const iconNames = (await readdir(iconsDir)).filter((file) => file.endsWith(".svg")).map((file) => basename(file, ".svg"));
+		allIconNames.push(...iconNames);
+		sourceIconSets.set(i, new Set(iconNames));
+	}
+	return {
+		iconNames: [...new Set(allIconNames)].sort(),
+		sourceIconSets
+	};
+}
+/**
+* Generate icon loaders
+* Exported for use by Vite plugin
+*/
+async function generateLoaders(config, cwd, typesResult) {
+	if (!config.loaders?.enabled) return;
+	console.log("\n⚡ Generating icon loaders...");
+	const scanDir = resolve(cwd, config.loaders.scanDir);
+	const componentNames = config.loaders.componentNames || ["Icon"];
+	console.log(`📁 Scanning directory: ${scanDir}`);
+	console.log(`🔍 Looking for components: ${componentNames.join(", ")}`);
+	let availableIconsSet = null;
+	let sourceIconSets = null;
+	if (typesResult) {
+		availableIconsSet = new Set(typesResult.iconNames);
+		sourceIconSets = typesResult.sourceIconSets;
+		console.log(`✓ Loaded ${availableIconsSet.size} available icons for validation`);
+	} else if (config.loaders.validate && config.types?.output) {
+		availableIconsSet = await loadAvailableIcons(resolve(cwd, config.types.output));
+		if (availableIconsSet) console.log(`✓ Loaded ${availableIconsSet.size} available icons for validation`);
+	}
+	const files = await findTsFiles(scanDir, config.exclude);
+	console.log(`📄 Found ${files.length} TypeScript files`);
+	const allIconNames = /* @__PURE__ */ new Set();
+	for (const file of files) extractIconNames(await readFile(file, "utf-8"), componentNames, config.customPatterns).forEach((icon) => allIconNames.add(icon));
+	let iconArray = Array.from(allIconNames).sort();
+	if (availableIconsSet) {
+		const invalidIcons = iconArray.filter((icon) => !availableIconsSet.has(icon));
+		if (invalidIcons.length > 0) {
+			console.warn(`⚠️  Found ${invalidIcons.length} icons not in types file:`);
+			console.warn(`   ${invalidIcons.slice(0, 5).join(", ")}${invalidIcons.length > 5 ? "..." : ""}`);
+		}
+		iconArray = iconArray.filter((icon) => availableIconsSet.has(icon));
+	}
+	console.log(`✓ Found ${iconArray.length} unique icons`);
+	if (iconArray.length > 0) console.log(`  Icons: ${iconArray.slice(0, 10).join(", ")}${iconArray.length > 10 ? "..." : ""}`);
+	const sources = Array.isArray(config.source) ? config.source : [config.source];
+	const iconSourceMap = /* @__PURE__ */ new Map();
+	for (const icon of iconArray) if (sourceIconSets) for (let i = 0; i < sources.length; i++) {
+		const source = sources[i];
+		const iconsForThisSource = sourceIconSets.get(i);
+		if (!source || !iconsForThisSource) continue;
+		if (iconsForThisSource.has(icon)) {
+			let iconPath = "";
+			if (source.package) iconPath = `${source.package}/${source.iconsPath || "icons"}/${icon}.svg`;
+			else if (source.directory) iconPath = `${source.directory}/${icon}.svg`;
+			if (iconPath) {
+				if (source.directory && config.loaders.output) {
+					iconPath = relative(dirname(resolve(cwd, config.loaders.output)), resolve(cwd, iconPath));
+					iconPath = "./" + iconPath.replace(/\\/g, "/");
+				}
+				iconSourceMap.set(icon, {
+					path: iconPath,
+					isPackage: !!source.package
+				});
+				break;
+			}
+		}
+	}
+	else for (const source of sources) {
+		let iconPath = "";
+		let exists = false;
+		if (source.package) {
+			iconPath = `${source.package}/${source.iconsPath || "icons"}/${icon}.svg`;
+			exists = availableIconsSet ? availableIconsSet.has(icon) : true;
+		} else if (source.directory) {
+			const dirPath = source.directory;
+			iconPath = `${dirPath}/${icon}.svg`;
+			try {
+				await access(resolve(cwd, dirPath, `${icon}.svg`));
+				exists = true;
+			} catch {
+				exists = false;
+			}
+		}
+		if (exists && iconPath) {
+			if (source.directory && config.loaders.output) {
+				iconPath = relative(dirname(resolve(cwd, config.loaders.output)), resolve(cwd, iconPath));
+				iconPath = "./" + iconPath.replace(/\\/g, "/");
+			}
+			iconSourceMap.set(icon, {
+				path: iconPath,
+				isPackage: !!source.package
+			});
+			break;
+		}
+	}
+	const loaders = Array.from(iconSourceMap.entries()).map(([icon, { path, isPackage }]) => {
+		if (isPackage) return `  '${icon}': () => import('${path}?raw'),`;
+		else return `  '${icon}': () => import('${path}?raw'),`;
+	}).join("\n");
+	const outputContent = `/**
+ * Auto-generated icon loaders
+ * Generated by scanning: ${config.loaders.scanDir}
+ *
+ * @generated by @number10/jsx-icon-generator/generate-icons
+ */
+export type IconLoaderFn = () => Promise<{ default: string }>
+
+export const iconLoaders: Record<string, IconLoaderFn> = {
+${loaders}
+}
+`;
+	const outputPath = resolve(cwd, config.loaders.output);
+	await writeFile(outputPath, outputContent, "utf-8");
+	console.log(`✓ Generated: ${outputPath}`);
+	console.log(`✓ Registered ${iconArray.length} icon loaders`);
+}
+/**
+* Load config file
+*/
+/**
+* Load icon generator config file
+* Exported for use by Vite plugin and other tools
+*/
+async function loadConfig(configPath, cwd = process.cwd()) {
+	const absolutePath = resolve(cwd, configPath);
+	const fileUrl = pathToFileURL(absolutePath).href;
+	const extension = extname(absolutePath).toLowerCase();
+	try {
+		const module = await import(fileUrl);
+		return module.default || module;
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		if (TS_CONFIG_EXTENSIONS.has(extension) || errorMessage.includes("Unknown file extension")) try {
+			const { tsImport } = await import("tsx/esm/api");
+			const module = await tsImport(fileUrl, import.meta.url);
+			return module.default || module;
+		} catch (tsxError) {
+			const tsxMessage = tsxError instanceof Error ? tsxError.message : String(tsxError);
+			throw new Error(`Failed to load config from ${configPath}: ${tsxMessage} (after tsx fallback)`, { cause: tsxError });
+		}
+		throw new Error(`Failed to load config from ${configPath}: ${errorMessage}`, { cause: error });
+	}
+}
+/**
+* Run generation with config
+*/
+async function runGeneration(config, cwd) {
+	console.log("🎨 Icon Generator");
+	console.log("─".repeat(50));
+	await generateLoaders(config, cwd, await generateTypes(config, cwd) || void 0);
+	console.log("\n✨ Done!\n");
+}
+/**
+* Watch mode - monitor files and regenerate on changes
+*/
+async function watchMode(config, cwd) {
+	console.log("👁️  Watch mode enabled");
+	console.log("📁 Monitoring for changes...\n");
+	await runGeneration(config, cwd);
+	const watchDirs = /* @__PURE__ */ new Set();
+	if (config.loaders?.enabled) {
+		const scanDir = resolve(cwd, config.loaders.scanDir);
+		watchDirs.add(scanDir);
+	}
+	const sources = Array.isArray(config.source) ? config.source : [config.source];
+	for (const source of sources) if (source.directory) watchDirs.add(resolve(cwd, source.directory));
+	let regenerateTimeout = null;
+	const scheduleRegenerate = () => {
+		if (regenerateTimeout) clearTimeout(regenerateTimeout);
+		regenerateTimeout = setTimeout(async () => {
+			console.log("\n🔄 Changes detected, regenerating...");
+			try {
+				await runGeneration(config, cwd);
+			} catch (error) {
+				console.error("❌ Error during regeneration:", error);
+			}
+		}, 300);
+	};
+	for (const dir of watchDirs) watch(dir, { recursive: true }, (eventType, filename) => {
+		if (!filename) return;
+		if (filename.includes("node_modules") || filename.includes(".git") || filename.endsWith(".generated.ts") || filename.startsWith(".")) return;
+		if (/\.(tsx?|svg)$/.test(filename)) {
+			console.log(`📝 ${eventType}: ${filename}`);
+			scheduleRegenerate();
+		}
+	}).on("error", (error) => {
+		console.error(`❌ Watch error for ${dir}:`, error);
+	});
+	console.log(`👀 Watching ${watchDirs.size} directories`);
+	console.log("Press Ctrl+C to stop\n");
+	await new Promise(() => {});
+}
+/**
+* Main function
+*/
+async function main() {
+	const { values } = parseArgs({ options: {
+		config: {
+			type: "string",
+			short: "c"
+		},
+		typesOnly: { type: "boolean" },
+		loadersOnly: { type: "boolean" },
+		watch: {
+			type: "boolean",
+			short: "w"
+		},
+		help: {
+			type: "boolean",
+			short: "h"
+		}
+	} });
+	if (values.help) {
+		console.log(`
+Usage: generate-icons [options]
+
+Options:
+  -c, --config <path>     Path to config file (e.g., ./icon-generator.config.ts)
+  --typesOnly             Only generate types (skip loaders)
+  --loadersOnly           Only generate loaders (skip types)
+  -h, --help              Show this help message
+
+Config File Example:
+  // icon-generator.config.ts
+  import { defineIconConfig } from '@number10/jsx-icon-generator/icon-generator-config'
+
+  export default defineIconConfig({
+    source: {
+      package: 'bootstrap-icons',
+      iconsPath: 'icons',
+    },
+    types: {
+      enabled: true,
+      output: './src/icon-types.generated.ts',
+      typeName: 'IconType',
+    },
+    loaders: {
+      enabled: true,
+      output: './src/icon-loaders.generated.ts',
+      scanDir: './src',
+      componentNames: ['Icon', 'BootstrapIcon'],
+      validate: true,
+    },
+  })
+
+Examples:
+  # Using config file
+  generate-icons --config ./icon-generator.config.ts
+
+  # Generate only types
+  generate-icons --config ./icon-generator.config.ts --typesOnly
+
+  # Generate only loaders
+  generate-icons --config ./icon-generator.config.ts --loadersOnly
+
+  # Watch mode - regenerate on file changes
+  generate-icons --config ./icon-generator.config.ts --watch
+`);
+		process.exit(0);
+	}
+	if (!values.config) {
+		console.error("❌ Error: --config is required");
+		console.error("Run with --help for usage information");
+		process.exit(1);
+	}
+	try {
+		const cwd = process.cwd();
+		let config = await loadConfig(values.config);
+		if (values.typesOnly && config.loaders) config = {
+			...config,
+			loaders: {
+				...config.loaders,
+				enabled: false
+			}
+		};
+		if (values.loadersOnly && config.types) config = {
+			...config,
+			types: {
+				...config.types,
+				enabled: false
+			}
+		};
+		if (values.watch) await watchMode(config, cwd);
+		else await runGeneration(config, cwd);
+	} catch (error) {
+		console.error("❌ Error:", error);
+		process.exit(1);
+	}
+}
+if (import.meta.url === `file://${process.argv[1]}`) main();
+//#endregion
+export { generateLoaders, generateTypes, loadConfig, scanIconSources };

package/dist/icon-generator-config.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Configuration schema for icon generators
+ * This file defines the TypeScript types for icon-generator.config.ts
+ */
+/**
+ * Source configuration - where to find icons
+ */
+export interface IconSource {
+    /** Icon package name from node_modules (e.g., 'bootstrap-icons') */
+    package?: string;
+    /** Local directory with SVG files (alternative to package) */
+    directory?: string;
+    /** Relative path to icons within package (default: 'icons') */
+    iconsPath?: string;
+    /** Optional label for this source (used in logs for multi-source) */
+    label?: string;
+}
+/**
+ * Type generation configuration
+ */
+export interface TypesConfig {
+    /** Enable types generation */
+    enabled: boolean;
+    /** Output file path for generated types */
+    output: string;
+    /** TypeScript type name (default: 'IconType') */
+    typeName?: string;
+    /**
+     * When to scan icon directories (Vite plugin only)
+     * - 'never': Never scan (types must be generated manually)
+     * - 'start': Scan once at startup
+     * - 'watch': Scan at startup and on SVG file changes (default)
+     */
+    scanIconDirectory?: 'never' | 'start' | 'watch';
+}
+/**
+ * Loader generation configuration
+ */
+export interface LoadersConfig {
+    /** Enable loaders generation */
+    enabled: boolean;
+    /** Output file path for generated loaders */
+    output: string;
+    /** Source directory to scan for icon usage */
+    scanDir: string;
+    /** Component names to search for (e.g., ['Icon', 'BootstrapIcon']) */
+    componentNames?: string[];
+    /** Validate against types file (enables warnings for invalid icons) */
+    validate?: boolean;
+    /**
+     * When to generate loaders (Vite plugin only)
+     * - 'start': Generate once at startup
+     * - 'watch': Generate at startup and on code file changes (default)
+     */
+    generateLoaders?: 'start' | 'watch';
+}
+/**
+ * Custom pattern for detecting icon usage
+ */
+export interface CustomPattern {
+    /** Pattern name/description */
+    name: string;
+    /** Regex pattern as string (will be compiled with 'g' flag) */
+    pattern: string;
+    /** Capture group index for icon name (1-based) */
+    captureGroup: number;
+}
+/**
+ * Main configuration for icon generator
+ */
+export interface IconGeneratorConfig {
+    /** Icon source configuration - single source or array of sources */
+    source: IconSource | IconSource[];
+    /** Type generation configuration */
+    types?: TypesConfig;
+    /** Loader generation configuration */
+    loaders?: LoadersConfig;
+    /** Custom patterns for detecting icon usage in loaders */
+    customPatterns?: CustomPattern[];
+    /** Exclude patterns (glob) when scanning for icons */
+    exclude?: string[];
+}
+/**
+ * Helper function to define config with type safety
+ */
+export declare function defineIconConfig(config: IconGeneratorConfig): IconGeneratorConfig;

package/dist/icon-generator-config.js

@@ -0,0 +1,9 @@
+//#region src/icon-generator-config.ts
+/**
+* Helper function to define config with type safety
+*/
+function defineIconConfig(config) {
+	return config;
+}
+//#endregion
+export { defineIconConfig };

package/dist/vite-plugin-icons.d.ts

@@ -0,0 +1,28 @@
+import type { Plugin } from 'vite';
+export interface IconGeneratorPluginOptions {
+    /** Path to icon generator config file */
+    configPath: string;
+    /**
+     * When to scan icon directories and generate types
+     * - 'never': Don't generate in plugin (use CLI manually)
+     * - 'start': Only at server start (default)
+     * - 'watch': At start + when SVG files change
+     */
+    scanIconDirectory?: 'never' | 'start' | 'watch';
+    /**
+     * When to scan code and generate loaders
+     * - 'start': Only at server start
+     * - 'watch': At start + when code changes (default)
+     */
+    generateLoaders?: 'start' | 'watch';
+    /** @deprecated Use scanIconDirectory instead */
+    watch?: boolean;
+    /** @deprecated Use scanIconDirectory='never' + generateLoaders='start' instead */
+    typesOnly?: boolean;
+    /** @deprecated Use scanIconDirectory='start' instead */
+    loadersOnly?: boolean;
+}
+/**
+ * Vite plugin for icon generation
+ */
+export declare function iconGeneratorPlugin(options: IconGeneratorPluginOptions): Plugin;