king-design-analyzer

king-design-analyzer

AST-based code analyzer for King Design Vue components with on-demand modular imports.

Installation

npm install king-design-analyzer

Features

Usage

On-demand Import (Recommended)

// 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';

Full Import

import { 
  validateCode,
  analyzeCodeWithAST,
  compileSFC,
  validateCompilation,
  validateRuntimePrecheck
} from 'king-design-analyzer';

API Reference

Static Module (/static)

// 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[];
}

AST Module (/ast)

// Analyze code for component rule violations
async function analyzeCodeWithAST(code: string): Promise<RuleViolation[]>;

// Component metadata registry
const componentRegistry: ComponentRegistry;

interface RuleViolation {
  rule: string;
  match: string;
  suggestion: string;
}

Runtime Module (/runtime)

// Pre-check if script can execute correctly
function validateRuntimePrecheck(code: string): ValidationLayer;

Full Module (/full)

// Full validation with all three layers (async)
async function validateCode(code: string): Promise<UnifiedValidationResult>;

// Sync version without AST check
function validateCodeSync(code: string): SyncValidationResult;

interface UnifiedValidationResult {
  passed: boolean;
  layers: {
    compilation: ValidationLayer;
    ast: ValidationLayer;
    runtime: ValidationLayer;
  };
  summary: string;
}

Example

import { validateCode } from 'king-design-analyzer/full';

const code = `
<script setup lang="ts">
import { Button } from '@king-design/vue';
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
  <Button @click="count++">{{ count }}</Button>
</template>
`;

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));
}

Peer Dependencies

For full functionality, install these peer dependencies:

npm install @vue/compiler-sfc typescript

Note: @vue/compiler-sfc is required for AST analysis. typescript is optional.

License

MIT