auto-svelte-pages-ts

Generate Svelte TypeScript entry + component files from root HTML pages and auto-sync Vite multi-page rollupOptions.input.

Features

• Scan root *.html files and generate:
  • HTML boilerplate (#app + script to ./src/entry/<name>.ts) for empty HTML files
  • src/entry/<name>.ts
  • src/component/<Name>.svelte
• Targeted mode: generate only selected files (auto-svelte-pages-ts file1 file2)
• Auto-update vite.config.js input block using markers
• Reusable as CLI or JavaScript module

Install

npm i -D auto-svelte-pages-ts

Required Vite Markers

In vite.config.ts, add this marker block inside build.rollupOptions.input:

 build: {
    rollupOptions: {
      input: {
        // AUTO-GENERATED VITE INPUT START
        // AUTO-GENERATED VITE INPUT END
      },
    },
  },

The CLI replaces only the content between those markers.

CLI Options

• --no-vite skip updating vite.config.ts
• --root-only only use root HTML files for Vite input (no recursive scan)
• --root <path> project root (default: current directory)
• --src-dir <dir> source directory under root (default: src)
• --entry-dir <dir> entry directory under src (default: entry)
• --component-dir <dir> component directory under src (default: component)
• --vite-config <file> Vite config path from root (default: vite.config.ts)
• --css-import <path> CSS import path for generated entry files (default: ../app.css)
• --config <file> config file path (default: auto-svelte-pages.config.ts, fallback .js)
• --watch watch root HTML files and regenerate on changes

Script Setup Example

{
  "scripts": {
    "generate:all": "auto-svelte-pages-ts",
    "generate:": "auto-svelte-pages-ts",
    "generate:watch:ts": "auto-svelte-pages-ts --watch"  
  }
}

Config File

Create auto-svelte-pages.config.ts in project root:

export default {
  dirs: {
    src: 'src',
    entry: 'entry',
    component: 'component',
  },
  cssImport: '../app.css',
  markers: {
    start: '// AUTO-GENERATED VITE INPUT START',
    end: '// AUTO-GENERATED VITE INPUT END',
  },
};

Priority order:

• CLI args
• config file
• built-in defaults

Use

Single file:

npm run generate: -- file

Multiple files:

npm run generate: -- file1 file2

All files:

npm run generate:all

Watch mode:

npm run generate:watch:ts

Programmatic API

import { generatePages } from "auto-svelte-pages-ts";

await generatePages({
  force: false,
  updateVite: true,
});

Changelog

• See CHANGELOG.md for release notes.