@bobfrankston/extractids 1.0.7 → 1.0.9

package/README.md

@@ -2,6 +2,14 @@
 
 `extractids` is a TypeScript utility that scans your `index.html` and all CSS files in your project to automatically generate type definitions for HTML IDs and CSS classes. These types allow you to perform type-checked DOM and class operations in your code, improving safety and developer experience.
 
+## Commands
+
+### extractids
+Scans HTML and CSS files to generate TypeScript type definitions.
+
+### generate-importmap
+Generates ES Module import maps from package.json dependencies for native browser module loading.
+
 ## How It Works
 - Scans `index.html` for all `id` attributes.
 - Scans all `.css` files for class names.

package/generate-importmap.js

@@ -0,0 +1,85 @@
+#!/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 'fs';
+import path from 'path';
+import chokidar from 'chokidar';
+
+function generateImportMap(packageJsonPath, htmlFilePath) {
+    try {
+        // Read package.json
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        const dependencies = packageJson.dependencies || {};
+        
+        // Generate import map
+        const imports = {};
+        for (const [name, version] of Object.entries(dependencies)) {
+            imports[name] = `./node_modules/${name}/index.js`;
+        }
+        
+        const importMapScript = `<script type="importmap">
+    ${JSON.stringify({ imports }, null, 12)}
+    </script>`;
+        
+        // Read HTML file
+        let html = fs.readFileSync(htmlFilePath, 'utf-8');
+        
+        // Replace import map section
+        const importMapRegex = /<!-- Import map.*?-->|<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('[generate-importmap] Updated import map');
+        console.log('  Dependencies:', Object.keys(dependencies).join(', ') || '(none)');
+    } catch (e) {
+        console.error('[generate-importmap] Error:', e.message);
+        process.exit(1);
+    }
+}
+
+// Parse CLI arguments
+const args = process.argv.slice(2);
+const watchMode = args.includes('-w') || args.includes('--watch');
+const packageJsonPath = path.join(process.cwd(), 'package.json');
+const htmlFilePath = path.join(process.cwd(), 'index.html');
+
+// Check if files exist
+if (!fs.existsSync(packageJsonPath)) {
+    console.error('[generate-importmap] Error: package.json not found in current directory');
+    process.exit(1);
+}
+if (!fs.existsSync(htmlFilePath)) {
+    console.error('[generate-importmap] Error: index.html not found in current directory');
+    process.exit(1);
+}
+
+if (watchMode) {
+    generateImportMap(packageJsonPath, htmlFilePath);
+    console.log('[generate-importmap] Watching for changes...');
+    
+    const watcher = chokidar.watch([packageJsonPath], { 
+        persistent: true,
+        ignoreInitial: true 
+    });
+    
+    watcher.on('change', () => generateImportMap(packageJsonPath, htmlFilePath));
+    watcher.on('ready', () => {
+        console.log('[generate-importmap] Watcher is ready and running.');
+    });
+    watcher.on('error', (error) => {
+        console.error('[generate-importmap] Watcher error:', error.message);
+    });
+} else {
+    generateImportMap(packageJsonPath, htmlFilePath);
+}

package/index.js

@@ -49,10 +49,10 @@ function globReadCssFiles() {
 }
 function generateTypes(ids, classes) {
     const idType = ids.length > 0
-        ? `export type htmlIDs = ${ids.map(id => `"${id}"`).join(' | ')};\n`
+        ? `export type htmlIDs = ${ids.map(id => `"${id}"`).join(' |\n')};\n`
         : `export type htmlIDs = never;\n`;
     const classType = classes.length > 0
-        ? `export type cssClasses = ${classes.map(cls => `"${cls}"`).join(' | ')};\n`
+        ? `export type cssClasses = ${classes.map(cls => `"${cls}"`).join(' |\n')};\n`
         : `export type cssClasses = never;\n`;
     return idType + classType;
 }
@@ -71,7 +71,7 @@ function updateTypesFile() {
 }
 // Parse CLI arguments for -w or --watch
 const args = process.argv.slice(2);
-const watchMode = args.includes('-w') || args.includes('--watch');
+const watchMode = args.includes('-w') || args.includes('-watch') || args.includes('--watch');
 if (watchMode) {
     updateTypesFile();
     console.log('[extractids] Watching for changes...');

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@bobfrankston/extractids",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Extracd html and css as types",
   "main": "index.js",
   "bin": {
-    "extractids": "index.js"
+    "extractids": "index.js",
+    "generate-importmap": "generate-importmap.js"
   },
   "module": "main.js",
   "scripts": {

package/.gitattributes

@@ -1,7 +0,0 @@
-* text=auto
-*.ts text eol=lf
-*.json text eol=lf
-*.gitignore text eol=lf
-*.npmignore text eol=lf
-*.gitattributes text eol=lf
-*.md text eol=lf

package/.vscode/launch.json

@@ -1,21 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch Program",
-            "program": "${workspaceFolder}/index.js",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "outFiles": [
-                "${workspaceFolder}/**/*.js"
-            ],
-            "cwd": "y:\\x\\bin\\WallClock"
-        }
-    ]
-}

package/.vscode/oldtasks.json

@@ -1,23 +0,0 @@
-{
-    // Template 1.0 y:\x\bin\MakeCodeTemplates\vscode\
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "type": "typescript",
-            "tsconfig": "tsconfig.json",
-            "option": "watch",
-            "runOptions": {
-                "runOn": "folderOpen"
-            },
-            "problemMatcher": [
-                "$tsc-watch"
-            ],
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            }
-        }
-    ]
-}

package/.vscode/settings.json

@@ -1,23 +0,0 @@
-{
-    "workbench.colorCustomizations": {
-        "activityBar.activeBackground": "#588e2f",
-        "activityBar.background": "#588e2f",
-        "activityBar.foreground": "#e7e7e7",
-        "activityBar.inactiveForeground": "#e7e7e799",
-        "activityBarBadge.background": "#284a78",
-        "activityBarBadge.foreground": "#e7e7e7",
-        "commandCenter.border": "#e7e7e799",
-        "sash.hoverBorder": "#588e2f",
-        "statusBar.background": "#406822",
-        "statusBar.foreground": "#e7e7e7",
-        "statusBarItem.hoverBackground": "#588e2f",
-        "statusBarItem.remoteBackground": "#406822",
-        "statusBarItem.remoteForeground": "#e7e7e7",
-        "titleBar.activeBackground": "#406822",
-        "titleBar.activeForeground": "#e7e7e7",
-        "titleBar.inactiveBackground": "#40682299",
-        "titleBar.inactiveForeground": "#e7e7e799"
-    },
-    "peacock.color": "#406822",
-    "workbench.colorTheme": "Visual Studio 2019 Dark"
-}

package/.vscode/tasks.json

@@ -1,20 +0,0 @@
-{
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "label": "tsc: watch",
-            "type": "shell",
-            "command": "tsc",
-            "args": ["--watch"],
-            "runOptions": {
-                "runOn": "folderOpen"
-            },
-            "problemMatcher": "$tsc-watch",
-            "isBackground": true,
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            }
-        }
-    ]
-}

package/CLAUDE.md

@@ -1,60 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-`extractids` is a TypeScript CLI utility that extracts HTML IDs and CSS class names to generate TypeScript type definitions. The tool scans `index.html` and all `.css` files in a project to create a `generated-types.ts` file with type-safe DOM and styling operations.
-
-## Architecture
-- **Single-file architecture**: Main functionality in `index.ts`
-- **Entry point**: `index.js` (compiled from `index.ts`) serves as both CLI binary and main module
-- **Type generation**: Produces `generated-types.ts` with `htmlIDs` and `cssClasses` union types
-- **File scanning**: Uses cheerio for HTML parsing and regex for CSS class extraction
-- **Watch mode**: Uses chokidar for file system watching
-
-## Development Commands
-
-### Build
-```bash
-tsc
-```
-Compiles TypeScript to JavaScript using the tsconfig.json configuration.
-
-### Run locally
-```bash
-node index.js
-# or with watch mode
-node index.js -w
-```
-
-### Test the CLI
-```bash
-# Install globally for testing
-npm install -g .
-extractids
-extractids -w
-```
-
-## Key Components
-
-### Core Functions
-- `getHtmlIDs(html)`: Parses HTML with cheerio to extract ID attributes
-- `getCssClasses(css)`: Uses regex `/\.([a-zA-Z0-9_-]+)\s*[{,]/g` to extract CSS class names
-- `globReadCssFiles()`: Recursively finds all `.css` files while ignoring `node_modules`
-- `generateTypes()`: Creates TypeScript union types from extracted IDs and classes
-- `updateTypesFile()`: Main orchestration function that combines all operations
-
-### File Dependencies
-- Expects `index.html` in the current working directory
-- Scans all `.css` files recursively from current directory
-- Outputs `generated-types.ts` in current directory
-
-### CLI Options
-- `-w` or `--watch`: Enables file system watching for automatic regeneration
-- No arguments: Single-run mode that generates types once
-
-## TypeScript Configuration
-- Target: ESNext with NodeNext module resolution
-- Source maps enabled for debugging
-- Strict type checking with some relaxed settings (`strictNullChecks: false`)
-- Includes all `.ts` files, excludes `node_modules`

package/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.ts

@@ -1,99 +0,0 @@
-#!/usr/bin/env node
-// scripts/generateTypes.ts
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as cheerio from 'cheerio';
-import chokidar from 'chokidar';
-// import * as glob from 'glob';
-
-// Helper function to extract all id attributes from HTML
-function getHtmlIDs(html: string) {
-    const $ = cheerio.load(html);
-    const ids = new Set<string>();
-    $('[id]').each((_, elem) => {
-        const id = $(elem).attr('id');
-        if (id) ids.add(id);
-    });
-    return Array.from(ids).sort();
-}
-
-// Helper function to extract all class names from CSS files
-function getCssClasses(css: string) {
-    // Match any .classname { or .classname,
-    const classPattern = /\.([a-zA-Z0-9_-]+)\s*[{,]/g;
-    const classes = new Set<string>();
-    let match: RegExpExecArray | null;
-    while ((match = classPattern.exec(css))) {
-        classes.add(match[1]);
-    }
-    return Array.from(classes).sort();
-}
-
-
-function globReadCssFiles(): string[] {
-    // Recursively find all .css files in project folder, ignoring node_modules
-    const result: string[] = [];
-    function walk(dir: string) {
-        const entries = fs.readdirSync(dir, { withFileTypes: true });
-        for (const entry of entries) {
-            const fullPath = path.join(dir, entry.name);
-            if (entry.isDirectory()) {
-                if (entry.name === 'node_modules') continue;
-                walk(fullPath);
-            } else if (entry.isFile() && fullPath.endsWith('.css')) {
-                result.push(fullPath);
-            }
-        }
-    }
-    walk(process.cwd());
-    return result;
-}
-
-function generateTypes(ids: string[], classes: string[]) {
-    const idType =
-        ids.length > 0
-            ? `export type htmlIDs = ${ids.map(id => `"${id}"`).join(' | ')};\n`
-            : `export type htmlIDs = never;\n`;
-    const classType =
-        classes.length > 0
-            ? `export type cssClasses = ${classes.map(cls => `"${cls}"`).join(' | ')};\n`
-            : `export type cssClasses = never;\n`;
-    return idType + classType;
-}
-
-function updateTypesFile() {
-    const html = fs.readFileSync('index.html', 'utf8');
-    const ids = getHtmlIDs(html);
-
-    const cssFiles = globReadCssFiles();
-    const allClasses = new Set<string>();
-    cssFiles.forEach(file => {
-        const css = fs.readFileSync(file, 'utf8');
-        getCssClasses(css).forEach(cls => allClasses.add(cls));
-    });
-
-    const types = generateTypes(ids, Array.from(allClasses));
-    fs.writeFileSync('generated-types.ts', types);
-    console.log('[Type generation] Updated generated-types.ts');
-}
-
-
-// Parse CLI arguments for -w or --watch
-const args = process.argv.slice(2);
-const watchMode = args.includes('-w') || args.includes('--watch');
-
-if (watchMode) {
-    updateTypesFile();
-    console.log('[extractids] Watching for changes...');
-    const watcher = chokidar.watch(['index.html', '**/*.css'], { ignored: /node_modules/ });
-    watcher.on('change', () => updateTypesFile());
-    watcher.on('ready', () => {
-        console.log('[extractids] Watcher is ready and running.');
-    });
-    watcher.on('error', (error:any) => {
-        console.error('[extractids] Watcher error:', error.message);
-    });
-    // No need for setInterval; watcher should keep process alive
-} else {
-    updateTypesFile();
-}

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    // "allowImportingTsExtensions": true,
-    "sourceMap": true,
-    // "noEmit": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": false,
-    "noImplicitThis": true,
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    "strictNullChecks": false,
-    "skipLibCheck": true
-  },
-  "include": [
-    "**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-  ]
-}