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.

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.
• 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:

import { type htmlIDs, type cssClasses } from './generated-types.js';

Automatic Generation with VS Code Tasks

Install using

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:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "extractids: watch",
      "type": "shell",
      "command": "extractids",
      "args": ["-w"],
      "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

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.