Giancarmine SalucciandClaude Opus 4.8
cba4f44f45
New Pass B detector (report-only). F5a: ast-grep extracts JSX/template elements and
SKELETON-CLUSTERS repeated markup (cpd misses renamed markup) → judge → "extract <Name>
(dumb/smart), props {…}, used in N places". F5b: god component → smart/dumb split.
Classifies dumb vs smart by counting state/effect/store/fetch signals (per-framework).
Framework-agnostic: JSX/TSX native in ast-grep; Vue/Svelte/Angular via opt-in grammars
(sgconfig.frontend.yml; Vue grammar build documented, Svelte already shipped, Angular beta);
LLM-judge fallback classifies without a grammar. Validated: card found ×3 across React
fixtures (cpd found 0), Vue template parsed, 33 repeated-markup clusters on the real
software-house Svelte dashboard.
Adds references/COMPONENTS.md, sgconfig.frontend.yml, fixtures/frontend/{react,vue},
SKILL.md F5 wiring, ANTIPATTERNS rows, ledger kind:"component" + props/component_kind.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
40 lines
1.5 KiB
YAML
40 lines
1.5 KiB
YAML
# Frontend-enabled ast-grep config — OPT-IN (for F5 component extraction on Vue/Svelte/Angular).
|
|
#
|
|
# JSX/TSX needs NO config (built into ast-grep). This config adds the non-built-in
|
|
# frameworks. Build each grammar once (needs only a C compiler; grammars ship prebuilt
|
|
# parser.c) into grammars/<lang>.<ext>:
|
|
# git clone --depth 1 https://github.com/tree-sitter-grammars/tree-sitter-vue /tmp/tsv
|
|
# cc -shared -fPIC -O2 -I /tmp/tsv/src /tmp/tsv/src/parser.c /tmp/tsv/src/scanner.c -o grammars/vue.so
|
|
# # svelte: see sgconfig.svelte.yml ; angular: https://github.com/dlvandenberg/tree-sitter-angular (beta)
|
|
# Then: ast-grep scan -c sgconfig.frontend.yml --inline-rules '<rule>' <paths>
|
|
# Without a grammar, F5 still works via cpd discovery + the LLM judge reading the file.
|
|
ruleDirs:
|
|
- rules
|
|
|
|
customLanguages:
|
|
vue:
|
|
libraryPath: ./grammars/vue.so
|
|
extensions: [vue]
|
|
expandoChar: _
|
|
svelte:
|
|
libraryPath: ./grammars/svelte.so
|
|
extensions: [svelte]
|
|
expandoChar: _
|
|
# angular:
|
|
# libraryPath: ./grammars/angular.so # tree-sitter-angular is beta; build if needed
|
|
# extensions: [component.html]
|
|
|
|
languageInjections:
|
|
- hostLanguage: vue
|
|
rule: { pattern: '<script setup lang="ts">$CONTENT</script>' }
|
|
injected: typescript
|
|
- hostLanguage: vue
|
|
rule: { pattern: '<script setup>$CONTENT</script>' }
|
|
injected: javascript
|
|
- hostLanguage: svelte
|
|
rule: { pattern: '<script lang="ts">$CONTENT</script>' }
|
|
injected: typescript
|
|
- hostLanguage: svelte
|
|
rule: { pattern: "<script>$CONTENT</script>" }
|
|
injected: javascript
|