@wkovacs64/add-icon 0.1.0-dev.8f859e16 → 0.1.0-dev.b5c05efe

package/README.md

@@ -35,21 +35,7 @@ npx @wkovacs64/add-icon heroicons:arrow-up-circle --output-dir ./my-icons
 
 ### Transformations
 
-Apply built-in transformations:
-
-```bash
-# Remove width and height attributes
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --remove-size
-
-# Optimize SVG with SVGO
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --optimize
-
-# Minify SVG
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --minify
-
-# Apply multiple transformations
-npx @wkovacs64/add-icon heroicons:arrow-up-circle --remove-size --optimize --minify
-```
+The tool fetches SVG icons directly from the Iconify API with width and height attributes removed automatically. You can add custom transformations for more advanced modifications.
 
 ### Custom Transformations
 
@@ -77,7 +63,7 @@ export default function addTitle(args) {
 
 #### TypeScript Transform
 
-Create a custom transform file (e.g., `my-transform.ts`):
+Create a custom transform file (e.g., `my-transform.ts`) that will be imported directly:
 
 ```ts
 import type { TransformArgs } from '@wkovacs64/add-icon';
@@ -105,11 +91,11 @@ npx @wkovacs64/add-icon heroicons:arrow-up-circle --transform ./my-transform.ts
 
 ## Configuration File
 
-You can create a configuration file (`add-icon.config.js`) in your project root:
+You can create a configuration file in your project root, using either JavaScript (`add-icon.config.js`) or TypeScript (`add-icon.config.ts`).
 
-```js
-import { transforms } from '@wkovacs64/add-icon';
+### JavaScript Configuration
 
+```js
 // Define custom transform
 function addCustomAttribute(args) {
   return args.svg.replace(/<svg/, `<svg data-icon="${args.iconName}"`);
@@ -117,10 +103,32 @@ function addCustomAttribute(args) {
 
 export default {
   outputDir: './assets/icons',
-  transforms: [transforms.removeSize, transforms.optimizeSvg, addCustomAttribute],
+  transforms: [addCustomAttribute],
 };
 ```
 
+### TypeScript Configuration
+
+You can create a TypeScript configuration file and the tool will import it directly:
+
+```ts
+import type { IconifyConfig, TransformArgs } from '@wkovacs64/add-icon';
+
+// Define custom transform
+function addCustomAttribute(args: TransformArgs): string {
+  return args.svg.replace(/<svg/, `<svg data-icon="${args.iconName}"`);
+}
+
+const config = {
+  outputDir: './assets/icons',
+  transforms: [addCustomAttribute],
+} satisfies IconifyConfig;
+
+export default config;
+```
+
+> **Note:** TypeScript configuration and transform files are compiled in-memory using esbuild, without creating temporary JavaScript files. This provides a seamless TypeScript experience with no extra build steps.
+
 ## Using as a Library
 
 You can also use iconify-cli as a library in your own projects:
@@ -128,7 +136,7 @@ You can also use iconify-cli as a library in your own projects:
 ### JavaScript
 
 ```js
-import { downloadIcon, transforms } from '@wkovacs64/add-icon';
+import { downloadIcon } from '@wkovacs64/add-icon';
 
 // Create custom transform
 function addCustomAttribute(args) {
@@ -139,7 +147,7 @@ function addCustomAttribute(args) {
 async function downloadCustomIcon() {
   const iconPath = await downloadIcon('heroicons:heart', {
     outputDir: './icons',
-    transforms: [transforms.removeSize, transforms.optimizeSvg, addCustomAttribute],
+    transforms: [addCustomAttribute],
   });
 
   console.log(`Icon saved to: ${iconPath}`);
@@ -151,7 +159,7 @@ downloadCustomIcon();
 ### TypeScript
 
 ```ts
-import { downloadIcon, transforms, type TransformArgs } from '@wkovacs64/add-icon';
+import { downloadIcon, type TransformArgs } from '@wkovacs64/add-icon';
 
 // Create custom transform
 const addCustomAttribute = (args: TransformArgs): string => {
@@ -163,7 +171,7 @@ async function downloadCustomIcon(): Promise<void> {
   try {
     const iconPath = await downloadIcon('heroicons:heart', {
       outputDir: './icons',
-      transforms: [transforms.removeSize, transforms.optimizeSvg, addCustomAttribute],
+      transforms: [addCustomAttribute],
     });
 
     console.log(`Icon saved to: ${iconPath}`);

package/bin/add-icon.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+import url from 'node:url';
+import path from 'node:path';
+import os from 'node:os';
+import { runCli } from '../dist/index.js';
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// This logic ensures we only run the CLI when this file is called directly
+// and not when it's imported as a module
+if (
+  os.platform() === 'win32'
+    ? process.argv[1] === __filename
+    : process.argv[1] === __filename || process.argv[1] === __dirname
+) {
+  runCli();
+}

package/dist/config.js

@@ -1,5 +1,6 @@
-import fs from 'node:fs';
+import { existsSync } from 'node:fs';
 import path from 'node:path';
+import { importModule } from './import-module.js';
 /**
  * Default configuration
  */
@@ -12,19 +13,43 @@ export const defaultConfig = {
  * @returns Configuration object
  */
 export async function loadConfig(configPath) {
-    // Use provided config path or look for default config file
-    const configFile = configPath || path.resolve(process.cwd(), 'add-icon.config.js');
     try {
-        if (fs.existsSync(configFile)) {
-            // For ESM, we need to use dynamic import with file:// protocol
-            const fileUrl = `file://${configFile}`;
-            const config = await import(fileUrl);
+        // If a specific config path is provided, use it
+        if (configPath) {
+            // Use the unified import method for both JS and TS files
+            const config = await importModule(configPath);
             return { ...defaultConfig, ...config.default };
         }
+        // Try to find a config file in the current directory, checking both JS and TS
+        const jsConfigPath = path.resolve(process.cwd(), 'add-icon.config.js');
+        const tsConfigPath = path.resolve(process.cwd(), 'add-icon.config.ts');
+        // Check for TypeScript config first
+        if (existsSync(tsConfigPath)) {
+            try {
+                const config = await importModule(tsConfigPath);
+                return { ...defaultConfig, ...config.default };
+            }
+            catch (err) {
+                console.error('Error loading TypeScript config, falling back to default config:', err);
+                return defaultConfig;
+            }
+        }
+        // Then check for JavaScript config
+        if (existsSync(jsConfigPath)) {
+            try {
+                const config = await importModule(jsConfigPath);
+                return { ...defaultConfig, ...config.default };
+            }
+            catch (err) {
+                console.error('Error loading JavaScript config, falling back to default config:', err);
+                return defaultConfig;
+            }
+        }
+        // Fall back to default config
+        return defaultConfig;
     }
     catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        console.error(`Error loading config file: ${errorMessage}`);
+        console.error('Error loading config, using default config:', error);
+        return defaultConfig;
     }
-    return defaultConfig;
 }

package/dist/import-module.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Imports a module file (JavaScript or TypeScript) by processing it with esbuild
+ * @param filePath - Path to module file (JS or TS)
+ * @returns Module exports
+ */
+export declare function importModule(filePath: string): Promise<any>;

package/dist/import-module.js

@@ -0,0 +1,35 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import * as esbuild from 'esbuild';
+/**
+ * Imports a module file (JavaScript or TypeScript) by processing it with esbuild
+ * @param filePath - Path to module file (JS or TS)
+ * @returns Module exports
+ */
+export async function importModule(filePath) {
+    const absolutePath = path.resolve(filePath);
+    try {
+        // Read the module file content
+        const code = await fs.readFile(absolutePath, "utf-8");
+        // Determine the appropriate loader based on file extension
+        const loader = absolutePath.endsWith('.ts') ? 'ts' : 'js';
+        // Use esbuild to transform the code to ESM JS
+        const result = await esbuild.transform(code, {
+            loader, // Automatically use the appropriate loader
+            format: "esm", // Output format
+            sourcemap: false, // Disable source maps for data URI
+            sourcefile: absolutePath, // Helps with error messages
+            target: 'esnext',
+        });
+        const jsCode = result.code;
+        // Create data URI and import
+        const base64Code = Buffer.from(jsCode).toString("base64");
+        const dataUri = `data:text/javascript;base64,${base64Code}`;
+        // Import the transformed code as a module
+        return await import(dataUri);
+    }
+    catch (error) {
+        console.error(`Error importing module ${filePath} with esbuild:`, error);
+        throw error;
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
 import type { IconTransform, TransformArgs } from './types.js';
 export type { IconTransform, TransformArgs };
 export { downloadIcon, parseIconReference } from './iconify.js';
+export declare function runCli(): void;

package/dist/index.js

@@ -1,25 +1,28 @@
-#!/usr/bin/env node
-import fs from 'node:fs';
 import path from 'node:path';
-import url from 'node:url';
-import os from 'node:os';
-import { execSync } from 'node:child_process';
 import { Command } from 'commander';
 import { downloadIcon } from './iconify.js';
 import { loadConfig } from './config.js';
+import { importModule } from './import-module.js';
+import { getPackageInfo } from './package-info.js';
 // Re-export other useful functions
 export { downloadIcon, parseIconReference } from './iconify.js';
 // Create CLI program
 const program = new Command();
-program
-    .name('add-icon')
-    .description('Download and transform icons from Iconify')
-    .version('1.0.0')
-    .argument('<icon>', 'Icon reference (e.g., heroicons:arrow-up-circle)')
-    .option('-o, --output-dir <dir>', 'Directory to save icon')
-    .option('-c, --config <path>', 'Path to config file')
-    .option('-t, --transform <path>', 'Path to custom transform module (.js or .ts)')
-    .action(async (icon, options) => {
+// Set up the program with package info
+const setupProgram = async () => {
+    const { name, version, description } = await getPackageInfo();
+    return program
+        .name(name.split('/').pop() || name)
+        .description(description)
+        .version(version, '-v, --version', 'Output the current version')
+        .argument('<icon>', 'Icon reference (e.g., heroicons:arrow-up-circle)')
+        .option('-o, --output-dir <dir>', 'Directory to save icon')
+        .option('-c, --config <path>', 'Path to config file')
+        .option('-t, --transform <path>', 'Path to custom transform module (.js or .ts)');
+};
+// Initialize the program
+const initializedProgram = await setupProgram();
+initializedProgram.action(async (icon, options) => {
     try {
         // Load config (first from config file, then override with CLI options)
         const config = await loadConfig(options.config);
@@ -32,30 +35,14 @@ program
             try {
                 const transformPath = path.resolve(process.cwd(), options.transform);
                 let customTransform;
-                // Handle TypeScript files
-                if (transformPath.endsWith('.ts')) {
-                    // Create a temporary JS file for the transform
-                    const jsPath = transformPath.replace(/\.ts$/, '.js');
-                    try {
-                        // Use tsc to compile the TypeScript file
-                        execSync(`npx tsc "${transformPath}" --outDir "${path.dirname(transformPath)}" --target es2020 --module NodeNext --moduleResolution NodeNext --esModuleInterop`);
-                        // Import the compiled JS file
-                        customTransform = await import(`file://${jsPath}`);
-                        // Clean up temporary JS file if not in dev mode
-                        if (process.env.NODE_ENV !== 'development') {
-                            fs.unlinkSync(jsPath);
-                        }
-                    }
-                    catch (err) {
-                        const errorMessage = err instanceof Error ? err.message : String(err);
-                        console.error(`Error transpiling TypeScript transform: ${errorMessage}`);
-                        console.error('Make sure TypeScript is installed or use a JavaScript (.js) transform file.');
-                        process.exit(1);
-                    }
+                try {
+                    // Use unified import method for both JS and TS files
+                    customTransform = await importModule(transformPath);
                 }
-                else {
-                    // For JavaScript files, use dynamic import
-                    customTransform = await import(`file://${transformPath}`);
+                catch (err) {
+                    const errorMessage = err instanceof Error ? err.message : String(err);
+                    console.error(`Error loading transform: ${errorMessage}`);
+                    process.exit(1);
                 }
                 if (customTransform && typeof customTransform.default === 'function') {
                     config.transforms = [customTransform.default];
@@ -82,12 +69,7 @@ program
         process.exit(1);
     }
 });
-const __filename = url.fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-// This logic only runs when executed directly as CLI, not when imported as a library
-if (os.platform() === 'win32'
-    ? process.argv[1] === __filename
-    : process.argv[1] === __filename || process.argv[1] === __dirname) {
-    // Parse command line arguments
-    program.parse();
+// Parse command line arguments if called directly
+export function runCli() {
+    program.parse(process.argv);
 }

package/dist/package-info.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Loads package info from package.json
+ * @returns Package info with name, version, and description
+ */
+export declare function getPackageInfo(): Promise<{
+    name: string;
+    version: string;
+    description: string;
+}>;

package/dist/package-info.js

@@ -0,0 +1,34 @@
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+/**
+ * Loads package info from package.json
+ * @returns Package info with name, version, and description
+ */
+export async function getPackageInfo() {
+    // Get the directory of the current module
+    const currentFileUrl = import.meta.url;
+    const currentFilePath = fileURLToPath(currentFileUrl);
+    const currentDir = path.dirname(currentFilePath);
+    // Go up one level from src/ to the package root
+    const packageJsonPath = path.resolve(currentDir, '..', 'package.json');
+    try {
+        // Read and parse package.json
+        const packageJsonContent = await fs.readFile(packageJsonPath, 'utf-8');
+        const packageJson = JSON.parse(packageJsonContent);
+        return {
+            name: packageJson.name || 'unknown',
+            version: packageJson.version || '0.0.0',
+            description: packageJson.description || 'unknown',
+        };
+    }
+    catch (error) {
+        console.warn('Failed to read package.json:', error);
+        // Fallback values
+        return {
+            name: 'unknown',
+            version: '0.0.0',
+            description: 'unknown',
+        };
+    }
+}

package/dist/types.d.ts

@@ -1,14 +1,14 @@
 /**
  * Arguments passed to transform functions
  */
-export interface TransformArgs {
+export type TransformArgs = {
     /** The SVG content as a string */
     svg: string;
     /** The icon set (e.g., 'heroicons') */
     iconSet: string;
     /** The icon name (e.g., 'arrow-up-circle') */
     iconName: string;
-}
+};
 /**
  * SVG transformation function type
  */
@@ -16,9 +16,9 @@ export type IconTransform = (args: TransformArgs) => Promise<string> | string;
 /**
  * Configuration options for the Iconify CLI
  */
-export interface IconifyConfig {
+export type IconifyConfig = {
     /** Directory to output icons */
     outputDir: string;
     /** Array of transform functions to apply to icons */
     transforms?: IconTransform[];
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wkovacs64/add-icon",
-  "version": "0.1.0-dev.8f859e16",
+  "version": "0.1.0-dev.b5c05efe",
   "description": "CLI tool to download and transform icons from Iconify",
   "keywords": [
     "iconify",
@@ -18,10 +18,11 @@
     "./package.json": "./package.json"
   },
   "bin": {
-    "add-icon": "dist/index.js"
+    "add-icon": "bin/add-icon.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "bin"
   ],
   "scripts": {
     "build": "tsc",
@@ -44,7 +45,7 @@
   },
   "dependencies": {
     "commander": "^13.1.0",
-    "tsx": "^4.19.3",
+    "esbuild": "~0.25.2",
     "typescript": "^5.8.3"
   },
   "devDependencies": {
@@ -57,6 +58,7 @@
     "del-cli": "6.0.0",
     "eslint": "9.24.0",
     "npm-run-all2": "7.0.2",
-    "prettier": "3.5.3"
+    "prettier": "3.5.3",
+    "tsx": "4.19.3"
   }
 }