start-kit-core

Core build tools, Vite plugins, and CLI for start-kit projects.

Installation

pnpm add start-kit-core

Usage

Vite Configuration

// vite.config.js
import { defineConfig } from 'vite';
import baseConfig from 'start-kit-core';

export default defineConfig(baseConfig);

HTML Include Plugin

The plugin provides template includes, conditionals, loops, and data interpolation.

// vite.config.js
import { defineConfig } from 'vite';
import htmlIncludePlugin from 'start-kit-core/plugins/html-include';

export default defineConfig({
  plugins: [
    htmlIncludePlugin({
      root: 'src',
      engine: 'ast', // or 'legacy'
      strict: true,
      maxDepth: 10,
    }),
  ],
});

Template Syntax

Include

<!-- include:components/header -->
<!-- include:components/card title="Title" description="Desc" -->

Conditionals

<!-- if:data.showBanner -->
<div class="banner">Promo</div>
<!-- endif -->

Loops

<!-- for:item in data.products -->
<div>{{ item.name }} - {{ item.price }}</div>
<!-- endfor -->

Data Interpolation

<!-- Escaped output -->
<h1>{{ data.site.title }}</h1>

<!-- Raw HTML (trusted content only) -->
<div>{{{ data.page.content }}}</div>

Data Files

Place JSON files in src/data/:

src/data/
  site.json       → data.site
  pages.json      → data.pages
  products/
    electronics.json → data.products.electronics

Features

• HTML Includes: Reusable components and layouts
• Conditionals: @if / @endif directives
• Loops: @for / @endfor with index
• Data Layer: JSON-based data files
• SEO: Auto-injection of meta tags
• Image Optimization: Responsive images with WebP/AVIF
• HMR: Hot module replacement for templates

Scripts

pnpm run build      # Build TypeScript to dist/
pnpm run dev        # Watch mode
pnpm run test       # Run tests
pnpm run type-check # Type check only

License

MIT