@bobfrankston/extractids 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,69 @@
+# extractids
+
+`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.
+
+## How It Works
+- Scans `index.html` for all `id` attributes.
+- Scans all `.css` files for class names.
+- Generates a `generated-types.ts` file containing:
+  - `htmlIDs` type: all HTML IDs found
+  - `cssClasses` type: all CSS class names found
+
+You can then import these types in your TypeScript code:
+
+```typescript
+import { type htmlIDs, type cssClasses } from './generated-types.js';
+```
+
+
+## Automatic Generation with VS Code Tasks
+Install using
+```shell
+npm install -g @bobfrankston/extractids
+```
+
+
+If `extractids` is installed as a CLI app, you can run it automatically on startup by adding it to your `.vscode/tasks.json`. Here is an example:
+
+```jsonc
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "extractids: watch",
+      "type": "shell",
+      "command": "extractids",
+      "args": [],
+      "runOptions": {
+        "runOn": "folderOpen"
+      },
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": false
+      }
+    }
+  ]
+}
+```
+
+This will run `extractids` automatically when you open your project in VS Code, keeping your type definitions up to date.
+
+## Usage Example
+```typescript
+import { htmlIDs, cssClasses } from './generated-types';
+
+function setClass(elementId: htmlIDs, className: cssClasses) {
+  const el = document.getElementById(elementId);
+  if (el) el.classList.add(className);
+}
+```
+
+## Benefits
+- Type safety for DOM operations
+- Autocomplete for IDs and class names
+- Automatic updates when HTML or CSS changes
+
+---
+
+Feel free to customize the task label and command to fit your workflow.

package/index.js

@@ -1,17 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 // scripts/generateTypes.ts
-var fs = require("node:fs");
-var path = require("node:path");
-var cheerio = require("cheerio");
-var chokidar_1 = require("chokidar");
+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) {
-    var $ = cheerio.load(html);
-    var ids = new Set();
-    $('[id]').each(function (_, elem) {
-        var id = $(elem).attr('id');
+    const $ = cheerio.load(html);
+    const ids = new Set();
+    $('[id]').each((_, elem) => {
+        const id = $(elem).attr('id');
         if (id)
             ids.add(id);
     });
@@ -20,9 +18,9 @@ function getHtmlIDs(html) {
 // Helper function to extract all class names from CSS files
 function getCssClasses(css) {
     // Match any .classname { or .classname,
-    var classPattern = /\.([a-zA-Z0-9_-]+)\s*[{,]/g;
-    var classes = new Set();
-    var match;
+    const classPattern = /\.([a-zA-Z0-9_-]+)\s*[{,]/g;
+    const classes = new Set();
+    let match;
     while ((match = classPattern.exec(css))) {
         classes.add(match[1]);
     }
@@ -30,12 +28,11 @@ function getCssClasses(css) {
 }
 function globReadCssFiles() {
     // Recursively find all .css files in project folder, ignoring node_modules
-    var result = [];
+    const result = [];
     function walk(dir) {
-        var entries = fs.readdirSync(dir, { withFileTypes: true });
-        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-            var entry = entries_1[_i];
-            var fullPath = path.join(dir, entry.name);
+        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;
@@ -50,28 +47,29 @@ function globReadCssFiles() {
     return result;
 }
 function generateTypes(ids, classes) {
-    var idType = ids.length > 0
-        ? "export type htmlIDs = ".concat(ids.map(function (id) { return "\"".concat(id, "\""); }).join(' | '), ";\n")
-        : "export type htmlIDs = never;\n";
-    var classType = classes.length > 0
-        ? "export type cssClasses = ".concat(classes.map(function (cls) { return "\"".concat(cls, "\""); }).join(' | '), ";\n")
-        : "export type cssClasses = never;\n";
+    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() {
-    var html = fs.readFileSync('index.html', 'utf8');
-    var ids = getHtmlIDs(html);
-    var cssFiles = globReadCssFiles();
-    var allClasses = new Set();
-    cssFiles.forEach(function (file) {
-        var css = fs.readFileSync(file, 'utf8');
-        getCssClasses(css).forEach(function (cls) { return allClasses.add(cls); });
+    const html = fs.readFileSync('index.html', 'utf8');
+    const ids = getHtmlIDs(html);
+    const cssFiles = globReadCssFiles();
+    const allClasses = new Set();
+    cssFiles.forEach(file => {
+        const css = fs.readFileSync(file, 'utf8');
+        getCssClasses(css).forEach(cls => allClasses.add(cls));
     });
-    var types = generateTypes(ids, Array.from(allClasses));
+    const types = generateTypes(ids, Array.from(allClasses));
     fs.writeFileSync('generated-types.ts', types);
     console.log('[Type generation] Updated generated-types.ts');
 }
 // Initial run
 updateTypesFile();
 // Watch for changes on HTML and CSS
-chokidar_1.default.watch(['index.html', '**/*.css'], { ignored: /node_modules/ }).on('change', function () { return updateTypesFile(); });
+chokidar.watch(['index.html', '**/*.css'], { ignored: /node_modules/ }).on('change', () => updateTypesFile());
+//# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@bobfrankston/extractids",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
+  "bin": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -18,4 +19,4 @@
   "devDependencies": {
     "@types/node": "^24.5.2"
   }
-}
+}

package/tsconfig.json

@@ -3,9 +3,9 @@
     "target": "esnext",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "allowImportingTsExtensions": true,
+    // "allowImportingTsExtensions": true,
     "sourceMap": true,
-    "noEmit": true,
+    // "noEmit": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,