https://github.com/jakub-hajduk/compuse
An engine for monitoring usage of web components. Maybe even all components ;).
https://github.com/jakub-hajduk/compuse
Last synced: about 1 month ago
JSON representation
An engine for monitoring usage of web components. Maybe even all components ;).
- Host: GitHub
- URL: https://github.com/jakub-hajduk/compuse
- Owner: jakub-hajduk
- Created: 2025-06-01T07:26:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-06T17:38:26.000Z (6 months ago)
- Last Synced: 2026-02-07T01:44:43.464Z (6 months ago)
- Language: TypeScript
- Size: 94.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- fucking-awesome-angular - compuse - Unified API for analyzing Angular component usage across your codebase. (Development Utilities / Code Analysis)
- awesome-angular - compuse - Unified API for analyzing Angular component usage across your codebase. (Development Utilities / Code Analysis)
README
# Compuse
Compuse is a library for analyzing component usage in your codebase. It provides a unified interface to extract detailed information about how components are used, regardless of whether you're working with React, Vue, Angular, Svelte, Lit-HTML, or plain HTML.
## Features
- **Framework Agnostic:** Analyze component usage across multiple frameworks with a single API.
- **Detailed Analysis:** Extract component names, attributes, slots, and events.
- **Code Fragments:** Get the exact code fragment for each component usage.
- **Line Numbers:** Pinpoint the exact location of component usage in your code.
- **Extensible:** Easily create your own analyzers to support custom frameworks or specific analysis needs.
## Installation
Install Compuse using your favorite package manager:
```bash
# pnpm
pnpm add compuse
# npm
npm install compuse
# yarn
yarn add compuse
```
## Usage
The core of Compuse is the `analyzeCode` generator function. It takes your code and a framework-specific analyzer as input and yields detailed `ComponentUsage` objects.
### `analyzeCode(code, analyzer, options)`
- `code` (string): The source code to analyze.
- `analyzer` (Analyzer): The framework-specific analyzer to use.
- `options` (AnalyzeOptions): Optional configuration.
- `components` (string[]): A list of component tags to exclusively analyze.
### Example: Analyzing a React Component
```typescript
import { analyzeCode, reactAnalyzer } from 'compuse';
const code = `
function App() {
return (
Header
Default Content
);
}
`;
for (const usage of analyzeCode(code, reactAnalyzer)) {
console.log(usage);
}
```
This will output:
```json
{
"component": "MyComponent",
"attributes": [
{ "name": "id", "value": "my-id", "computed": false },
{ "name": "prop", "value": "someValue", "computed": true }
],
"events": [
{ "name": "onClick" }
],
"slots": [
{ "name": "slot", "fragment": "
Header" },
{ "name": "default", "fragment": "Default Content" }
],
"fragment": "\n Header\n Default Content\n",
"lines": { "start": 3, "end": 10 }
}
```
### Supported Analyzers
Compuse comes with built-in analyzers for popular frameworks:
- `angularAnalyzer`
- `htmlAnalyzer`
- `litHtmlAnalyzer`
- `reactAnalyzer`
- `svelteAnalyzer`
- `vueAnalyzer`
### Creating a Custom Analyzer
You can create a custom analyzer by implementing the `Analyzer` interface. This is useful for supporting custom frameworks or extending the functionality of existing analyzers.
```typescript
import type { Analyzer } from 'compuse';
import { parse } from 'fragmint';
import { customParsePlugin } from './custom-parse-plugin';
export const customAnalyzer: Analyzer = {
name: 'customAnalyzer',
parsePlugin: customParsePlugin, // A fragmint parse plugin
extractName(node) {
// Logic to extract the component name from an AST node
return node.tag;
},
extractAttributes(node) {
// Logic to extract attributes
return node.attributes || [];
},
extractEvents(node) {
// Logic to extract events
return (node.attributes || []).filter(attr => attr.name.startsWith('on-'));
},
extractSlots(node) {
// Logic to extract slots
return (node.children || []).map(child => ({
name: child.attributes?.find(attr => attr.name === 'slot')?.value || 'default',
fragment: child.raw,
}));
},
};
```
## Contributing
Contributions are welcome! Please see our `CONTRIBUTING.md` for more information.
## License
This project is licensed under the ISC License.