@bobfrankston/importgen 0.1.29 → 0.1.31

package/README.md

@@ -137,6 +137,32 @@ For each dependency, `importgen` reads that package's `package.json` and picks t
 - **`file:` paths** (`file:../path/to/package`) -- resolved relative to `package.json`
 - **`workspace:` references** -- resolved from `node_modules/`
 
+## Monorepo / npm Workspaces
+
+`importgen` works in npm workspaces (monorepos) without any configuration. When a dependency isn't in the local `node_modules/`, it walks up the directory tree checking each ancestor's `node_modules/` -- the same resolution strategy Node uses. The import map path is generated relative to the HTML file.
+
+Example layout:
+
+```
+my-monorepo/                    ← root, has node_modules/quill/
+  packages/
+    client/                     ← workspace, package.json lists quill
+      compose/
+        compose.html            ← importgen target
+```
+
+Running `importgen compose/compose.html` from `client/` finds `quill` in the root `node_modules/` and generates:
+
+```json
+{
+    "imports": {
+        "quill": "../../node_modules/quill/dist/quill.js"
+    }
+}
+```
+
+If the dependency exists in the local `node_modules/` it is found there first (existing behavior preserved).
+
 ## `.dependencies` Override
 
 Add a `.dependencies` field to `package.json` to override resolution paths for specific packages without changing the real `dependencies`:

package/index-new.js

@@ -0,0 +1,305 @@
+#!/usr/bin/env node
+/**
+ * Generate ES Module import map from package.json dependencies
+ * Injects into HTML files for native browser module loading
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import chokidar from 'chokidar';
+import packageJson from './package.json' with { type: 'json' };
+/** Timestamp prefix for log messages */
+function ts() {
+    return `[${new Date().toLocaleTimeString()}]`;
+}
+/**
+ * Resolve dependency path based on version specifier
+ */
+function resolveDependencyPath(packageDir, depName, depVersion) {
+    if (depVersion.startsWith('file:')) {
+        // Handle file: protocol - resolve relative to package directory
+        const relativePath = depVersion.slice(5); // Remove 'file:' prefix
+        return path.resolve(packageDir, relativePath);
+    }
+    else {
+        // npm or workspace dependency - walk up looking for node_modules (monorepo support)
+        let dir = packageDir;
+        while (true) {
+            const candidate = path.join(dir, 'node_modules', depName);
+            if (fs.existsSync(candidate)) {
+                return candidate;
+            }
+            const parent = path.dirname(dir);
+            if (parent === dir)
+                break; // filesystem root
+            dir = parent;
+        }
+        return null;
+    }
+}
+/**
+ * Resolve entry point from package.json
+ */
+function resolveEntryPoint(pkg, packageDir) {
+    // 1. Check exports field (modern)
+    if (pkg.exports) {
+        if (typeof pkg.exports === 'string') {
+            return pkg.exports;
+        }
+        else if (pkg.exports['.']) {
+            const dotExport = pkg.exports['.'];
+            if (typeof dotExport === 'string') {
+                return dotExport;
+            }
+            else if (dotExport.import) {
+                return dotExport.import;
+            }
+            else if (dotExport.default) {
+                return dotExport.default;
+            }
+        }
+    }
+    // 2. Check module field (ESM)
+    if (pkg.module) {
+        return pkg.module;
+    }
+    // 3. Fall back to main field
+    if (pkg.main) {
+        return pkg.main;
+    }
+    // 4. Default to index.js
+    return './index.js';
+}
+/**
+ * Recursively collect all dependencies, avoiding circular references.
+ * Import map paths are computed relative to the HTML file's directory.
+ */
+function collectDependencies(packageJsonPath, visited, dependencies, htmlDir, warnings, depPaths) {
+    try {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        const packageDir = path.dirname(packageJsonPath);
+        const deps = packageJson.dependencies || {};
+        const dotDeps = packageJson['.dependencies'] || {};
+        for (const [depName, depVersion] of Object.entries(deps)) {
+            // Skip if already processed (circular dependency protection)
+            if (visited.has(depName)) {
+                continue;
+            }
+            visited.add(depName);
+            // Check if .dependencies has an override path for this package
+            const overrideVersion = dotDeps[depName];
+            const versionToUse = overrideVersion || depVersion;
+            // Resolve dependency path (real filesystem location)
+            let depPath = resolveDependencyPath(packageDir, depName, versionToUse);
+            if (!depPath) {
+                const warning = `Could not follow path for ${depName} (${versionToUse})`;
+                console.warn(`${ts()} [generate-importmap] Warning: ${warning}`);
+                warnings.push(warning);
+                continue;
+            }
+            // Check for .dependency backup directory and use it if it exists
+            const dependencyBackupPath = depPath + '.dependency';
+            if (fs.existsSync(dependencyBackupPath)) {
+                const warning = `Using backup path ${dependencyBackupPath}`;
+                console.warn(`${ts()} [generate-importmap] Warning: ${warning}`);
+                warnings.push(warning);
+                depPath = dependencyBackupPath;
+            }
+            // Track resolved dependency directory for watch mode
+            if (depPaths) {
+                depPaths.add(depPath);
+            }
+            const depPackageJsonPath = path.join(depPath, 'package.json');
+            if (!fs.existsSync(depPackageJsonPath)) {
+                const warning = `Could not follow path for ${depName} - no package.json found at ${depPath}`;
+                console.warn(`${ts()} [generate-importmap] Warning: ${warning}`);
+                warnings.push(warning);
+                continue;
+            }
+            // Read dependency's package.json
+            const depPackageJson = JSON.parse(fs.readFileSync(depPackageJsonPath, 'utf-8'));
+            // Resolve entry point
+            const entryPoint = resolveEntryPoint(depPackageJson, depPath);
+            const entryFile = entryPoint.startsWith('./') ? entryPoint.slice(2) : entryPoint;
+            // Generate import path relative to HTML directory
+            const relPath = path.relative(htmlDir, depPath).split(path.sep).join('/');
+            const depPrefix = relPath.startsWith('.') ? relPath : `./${relPath}`;
+            dependencies.set(depName, `${depPrefix}/${entryFile}`);
+            // Recursively process this dependency's dependencies
+            collectDependencies(depPackageJsonPath, visited, dependencies, htmlDir, warnings, depPaths);
+        }
+    }
+    catch (e) {
+        console.error(`${ts()} [generate-importmap] Error processing ${packageJsonPath}:`, e.message);
+        throw e; // Propagate so callers can avoid overwriting HTML with empty map
+    }
+}
+function generateImportMap(packageJsonPath, htmlFilePath) {
+    const result = { depDirs: [] };
+    try {
+        const htmlDir = path.dirname(htmlFilePath);
+        const visited = new Set();
+        const dependencies = new Map();
+        const depPaths = new Set();
+        const warnings = [];
+        // Recursively collect all dependencies
+        try {
+            collectDependencies(packageJsonPath, visited, dependencies, htmlDir, warnings, depPaths);
+        }
+        catch {
+            // Root package.json unreadable (e.g., mid-write) — skip update to preserve existing HTML
+            return result;
+        }
+        result.depDirs = Array.from(depPaths);
+        // Convert Map to plain object for JSON
+        const imports = {};
+        for (const [name, importPath] of dependencies) {
+            imports[name] = importPath;
+        }
+        // Generate warning comments
+        let warningComments = '';
+        if (warnings.length > 0) {
+            warningComments = warnings.map(w => `<!-- importgen: ${w} -->`).join('\n    ') + '\n    ';
+        }
+        const timestamp = new Date().toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'long' });
+        const generatedComment = `<!-- Generated by importgen ${packageJson.version} on ${timestamp} -->`;
+        const importMapScript = `${warningComments}${generatedComment}\n    <script type="importmap">
+    ${JSON.stringify({ imports }, null, 12)}
+    </script>`;
+        // Read HTML file
+        let html = fs.readFileSync(htmlFilePath, 'utf-8');
+        // Replace import map section (including importgen comments and generated-by timestamp)
+        const importMapRegex = /(<!--\s*importgen:.*?-->\s*)*(<!--\s*Generated by importgen.*?-->\s*)?<script type="importmap">[\s\S]*?<\/script>/;
+        if (importMapRegex.test(html)) {
+            html = html.replace(importMapRegex, importMapScript);
+        }
+        else {
+            // Insert before </head> if not found
+            html = html.replace('</head>', `    ${importMapScript}\n</head>`);
+        }
+        // Write back to HTML file
+        fs.writeFileSync(htmlFilePath, html, 'utf-8');
+        console.log(`${ts()} [generate-importmap] Updated import map`);
+        console.log(`  Scanned ${visited.size} dependencies, generated ${dependencies.size} entries`);
+        if (dependencies.size > 0) {
+            console.log('  Packages:', Array.from(dependencies.keys()).join(', '));
+        }
+    }
+    catch (e) {
+        console.error(`${ts()} [generate-importmap] Error:`, e.message);
+        process.exit(1);
+    }
+    return result;
+}
+/**
+ * API: run importgen on a directory.
+ * @param appDir - directory containing package.json and HTML file (defaults to cwd)
+ * @param htmlFile - HTML filename to update (auto-detected if omitted)
+ * @returns GenerateResult with resolved dependency directories
+ */
+export function importgen(appDir, htmlFile) {
+    const dir = appDir || process.cwd();
+    const pkgPath = path.join(dir, 'package.json');
+    if (!fs.existsSync(pkgPath)) {
+        throw new Error(`package.json not found in ${dir}`);
+    }
+    const possibleHtmlFiles = ['index.html', 'default.html', 'default.htm'];
+    const htmlName = htmlFile || possibleHtmlFiles.find(f => fs.existsSync(path.join(dir, f)));
+    const htmlPath = htmlName ? path.join(dir, htmlName) : null;
+    if (!htmlPath || !fs.existsSync(htmlPath)) {
+        throw new Error(htmlFile
+            ? `${htmlFile} not found in ${dir}`
+            : `No HTML file found in ${dir}. Looking for: ${possibleHtmlFiles.join(', ')}`);
+    }
+    return generateImportMap(pkgPath, htmlPath);
+}
+// CLI entry point
+if (import.meta.main) {
+    const args = process.argv.slice(2);
+    if (args.includes('-v') || args.includes('--version')) {
+        console.log(`importgen ${packageJson.version}`);
+        process.exit(0);
+    }
+    const knownFlags = new Set(['-w', '--watch', '-v', '--version']);
+    const unknownArgs = args.filter(a => a.startsWith('-') && !knownFlags.has(a));
+    if (unknownArgs.length > 0) {
+        console.error(`${ts()} [importgen] Error: unrecognized argument(s): ${unknownArgs.join(', ')}`);
+        console.error(`  Usage: importgen [htmlfile] [-w|--watch] [-v|--version]`);
+        process.exit(1);
+    }
+    const watchMode = args.includes('-w') || args.includes('--watch');
+    const positionalArgs = args.filter(a => !a.startsWith('-'));
+    if (positionalArgs.length > 1) {
+        console.error(`${ts()} [importgen] Error: too many arguments: ${positionalArgs.join(', ')}`);
+        console.error(`  Usage: importgen [htmlfile] [-w|--watch] [-v|--version]`);
+        process.exit(1);
+    }
+    const htmlArg = positionalArgs[0];
+    const packageJsonPath = path.join(process.cwd(), 'package.json');
+    const possibleHtmlFiles = ['index.html', 'default.html', 'default.htm'];
+    const htmlFileName = htmlArg || possibleHtmlFiles.find(f => fs.existsSync(path.join(process.cwd(), f)));
+    const htmlFilePath = htmlFileName ? path.join(process.cwd(), htmlFileName) : null;
+    if (!fs.existsSync(packageJsonPath)) {
+        console.error(`${ts()} [generate-importmap] Error: package.json not found in current directory`);
+        process.exit(1);
+    }
+    if (!htmlFilePath || !fs.existsSync(htmlFilePath)) {
+        if (htmlArg) {
+            console.error(`${ts()} [generate-importmap] Error: ${htmlArg} not found in current directory`);
+        }
+        else {
+            console.error(`${ts()} [generate-importmap] Error: No HTML file found. Looking for: ${possibleHtmlFiles.join(', ')}`);
+        }
+        process.exit(1);
+    }
+    if (watchMode) {
+        let result = generateImportMap(packageJsonPath, htmlFilePath);
+        let watchedDepDirs = new Set();
+        const watcher = chokidar.watch([packageJsonPath], {
+            persistent: true,
+            ignoreInitial: true
+        });
+        function syncWatchedDeps(depDirs) {
+            const newDirs = new Set(depDirs);
+            for (const dir of watchedDepDirs) {
+                if (!newDirs.has(dir)) {
+                    watcher.unwatch(dir);
+                }
+            }
+            for (const dir of newDirs) {
+                if (!watchedDepDirs.has(dir)) {
+                    watcher.add(dir);
+                }
+            }
+            watchedDepDirs = newDirs;
+        }
+        syncWatchedDeps(result.depDirs);
+        let debounceTimer = null;
+        const onChange = () => {
+            if (debounceTimer)
+                clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                result = generateImportMap(packageJsonPath, htmlFilePath);
+                syncWatchedDeps(result.depDirs);
+            }, 100);
+        };
+        watcher.on('change', onChange);
+        watcher.on('add', onChange);
+        watcher.on('unlink', onChange);
+        watcher.on('ready', () => {
+            const total = 1 + watchedDepDirs.size;
+            console.log(`${ts()} [generate-importmap] Watching ${total} directories for changes...`);
+            if (watchedDepDirs.size > 0) {
+                for (const dir of watchedDepDirs) {
+                    console.log(`  ${dir}`);
+                }
+            }
+        });
+        watcher.on('error', (error) => {
+            console.error(`${ts()} [generate-importmap] Watcher error:`, error.message);
+        });
+    }
+    else {
+        generateImportMap(packageJsonPath, htmlFilePath);
+    }
+}
+//# sourceMappingURL=index.js.map

package/index.js

@@ -20,19 +20,18 @@ function resolveDependencyPath(packageDir, depName, depVersion) {
         const relativePath = depVersion.slice(5); // Remove 'file:' prefix
         return path.resolve(packageDir, relativePath);
     }
-    else if (depVersion.startsWith('workspace:')) {
-        // Workspace dependencies - look in node_modules
-        const nodeModulesPath = path.join(packageDir, 'node_modules', depName);
-        if (fs.existsSync(nodeModulesPath)) {
-            return nodeModulesPath;
-        }
-        return null;
-    }
     else {
-        // npm version - look in node_modules
-        const nodeModulesPath = path.join(packageDir, 'node_modules', depName);
-        if (fs.existsSync(nodeModulesPath)) {
-            return nodeModulesPath;
+        // npm or workspace dependency - walk up looking for node_modules (monorepo support)
+        let dir = packageDir;
+        while (true) {
+            const candidate = path.join(dir, 'node_modules', depName);
+            if (fs.existsSync(candidate)) {
+                return candidate;
+            }
+            const parent = path.dirname(dir);
+            if (parent === dir)
+                break; // filesystem root
+            dir = parent;
         }
         return null;
     }
@@ -122,14 +121,24 @@ function collectDependencies(packageJsonPath, visited, dependencies, htmlDir, no
             // Resolve entry point
             const entryPoint = resolveEntryPoint(depPackageJson, depPath);
             const entryFile = entryPoint.startsWith('./') ? entryPoint.slice(2) : entryPoint;
-            // Generate import map path through node_modules (follows symlinks)
-            // Check if hoisted to top-level node_modules first
-            const topLevelDir = path.join(htmlDir, 'node_modules', depName);
-            let depPrefix;
-            if (fs.existsSync(topLevelDir)) {
-                depPrefix = `./node_modules/${depName}`;
+            // Generate import map path through node_modules
+            // Walk up from htmlDir looking for node_modules/depName (handles monorepo hoisting)
+            let depPrefix = null;
+            let searchDir = htmlDir;
+            while (true) {
+                const candidate = path.join(searchDir, 'node_modules', depName);
+                if (fs.existsSync(candidate)) {
+                    const rel = path.relative(htmlDir, candidate).split(path.sep).join('/');
+                    depPrefix = rel.startsWith('.') ? rel : `./${rel}`;
+                    break;
+                }
+                const parent = path.dirname(searchDir);
+                if (parent === searchDir)
+                    break; // filesystem root
+                searchDir = parent;
             }
-            else {
+            if (!depPrefix) {
+                // Fallback for deps not in any ancestor node_modules
                 depPrefix = `${nodeModulesPrefix}/${depName}`;
             }
             dependencies.set(depName, `${depPrefix}/${entryFile}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/importgen",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "Generate ES Module import maps from package.json dependencies for native browser module loading",
   "main": "index.js",
   "exports": {