vue-expand-core

Static analysis tool that converts Vue.js Single File Components (SFCs) into validatable HTML snapshots using Cartesian coverage.

Features

• Extracts props and variables from <script setup> blocks
• Generates all possible HTML permutations from Vue templates
• Handles v-if, v-else, v-show, and v-for directives
• Outputs both plain HTML and annotated HTML with source locations

Installation

npm install vue-expand-core

Usage

As a Library

import { expand } from "vue-expand-core";

const sfc = `<template>
  <div :class="theme">Hello</div>
</template>
<script setup lang="ts">
const theme: 'light' | 'dark' = 'light'
</script>`;

const snapshots = expand(sfc);
// Returns array of { plain: string, annotated: string }

As a CLI

npx vue-expand path/to/Component.vue

API

expand(input: string): Snapshot[]

Converts a Vue SFC string into an array of HTML snapshots.

type Snapshot = {
  plain: string;      // Pure HTML for validation
  annotated: string;  // HTML with data-line/column attributes
};

How It Works

1. Script Analysis - Extracts props and variables with their possible values
2. Template Permutation - Forks template AST at control flow directives (v-if, v-show, v-for)
3. Rendering - Produces plain HTML and annotated HTML with source locations

License

MIT