AST-based code analyzer for King Design Vue components with on-demand modular imports
npm install king-design-analyzerAST-based code analyzer for King Design Vue components with on-demand modular imports.
``bash`
npm install king-design-analyzer
| Module | Import Path | Description |
|--------|-------------|-------------|
| Static Check | king-design-analyzer/static | SFC structure & syntax validation |king-design-analyzer/ast
| AST Analysis | | Component rules, props, events, slots checking |king-design-analyzer/runtime
| Runtime | | Script execution pre-check |king-design-analyzer/full
| Full | | All three layers combined |
`typescript
// Only static check - minimal bundle size
import { validateCompilation, compileSFC } from 'king-design-analyzer/static';
// Only AST analysis
import { analyzeCodeWithAST, componentRegistry } from 'king-design-analyzer/ast';
// Only runtime detection
import { validateRuntimePrecheck } from 'king-design-analyzer/runtime';
// Full validation (compilation + AST + runtime)
import { validateCode, validateCodeSync } from 'king-design-analyzer/full';
`
`typescript`
import {
validateCode,
analyzeCodeWithAST,
compileSFC,
validateCompilation,
validateRuntimePrecheck
} from 'king-design-analyzer';
`typescript
// Validate SFC structure and syntax
function validateCompilation(code: string): ValidationLayer;
// Compile Vue SFC, extract template/script/style
function compileSFC(code: string, scopeId: string): CompilationResult;
interface ValidationLayer {
name: string;
passed: boolean;
errors: string[];
}
`
`typescript
// Analyze code for component rule violations
async function analyzeCodeWithAST(code: string): Promise
// Component metadata registry
const componentRegistry: ComponentRegistry;
interface RuleViolation {
rule: string;
match: string;
suggestion: string;
}
`
`typescript`
// Pre-check if script can execute correctly
function validateRuntimePrecheck(code: string): ValidationLayer;
`typescript
// Full validation with all three layers (async)
async function validateCode(code: string): Promise
// Sync version without AST check
function validateCodeSync(code: string): SyncValidationResult;
interface UnifiedValidationResult {
passed: boolean;
layers: {
compilation: ValidationLayer;
ast: ValidationLayer;
runtime: ValidationLayer;
};
summary: string;
}
`
`typescript
import { validateCode } from 'king-design-analyzer/full';
const code =
;
const result = await validateCode(code);
if (result.passed) {
console.log('✅ All checks passed');
} else {
console.log('❌ Validation failed:', result.summary);
result.layers.compilation.errors.forEach(e => console.log(' Compile:', e));
result.layers.ast.errors.forEach(e => console.log(' AST:', e));
result.layers.runtime.errors.forEach(e => console.log(' Runtime:', e));
}
`
For full functionality, install these peer dependencies:
`bash`
npm install @vue/compiler-sfc typescript
> Note: @vue/compiler-sfc is required for AST analysis. typescript` is optional.
MIT