svelte-bundle 0.2.0-beta.1 → 0.3.0

package/ReadMe.md

@@ -1,36 +1,18 @@
-> ⚠️ **NOTICE:** While this tool is currently functional, it has not nearly been battle-tested enough to ensure it works in most use-cases.
+> **Early release** — functional but not yet battle-tested across all use-cases.
 
 ![svelte-bundle](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcwfyh1w8r8g4f2ap1hff.png)
 
-## Usage
-```bash
-svelte-bundle create my-app
-cd my-app
-svelte-bundle build
-```
-
-### Full Documentation: [https://github.com/uhteddy/svelte-bundle/wiki](https://github.com/uhteddy/svelte-bundle/wiki)
+# svelte-bundle
 
-# Svelte Bundle CLI
+Scaffold a Svelte 5 + Vite project and bundle it into a **single self-contained `.html` file** — CSS and JS fully inlined, no web server required.
 
-**Svelte Bundle CLI** is a command-line tool that scaffolds a Svelte 5 + Vite project and bundles it into a single self-contained `.html` file. The goal of this tool is to make it easy to develop with Svelte and deploy anywhere — particularly for cases where everything needs to be contained in a single file.
+Built for environments that only accept plain HTML: legacy CMS platforms or anywhere you need real reactivity without a build server.
 
-Just note, the purpose of this tool is **NOT** to bundle an entire large-scale Svelte app. The purpose is to expand the capabilities of Svelte to work on systems like certain Content Management Systems (CMS) that only allow HTML, CSS, and JS. It was also built with SSR hydration support so the generated file is SEO-safe, with necessary elements already pre-rendered.
+> **Not a SvelteKit tool.** This scaffolds a standalone Svelte 5 app and outputs one `.html` file.
 
-Utilizing this you will be able to develop a page with the joy of Svelte — components, reactivity, TypeScript, Tailwind — and output a single `.html` file you can drop anywhere.
-
-⚠️ **Note**: This tool is **NOT** made to function with SvelteKit natively. It scaffolds a standalone Svelte 5 app (not a SvelteKit project) and outputs a single `.html` file.
-
-## Inspiration
-This tool was inspired by the need I had when it came to updating the CMS for a company I worked for. They were looking for more custom content on their website which used an outdated CMS. Pages were only able to include HTML, CSS, and JS.
-
-Pure HTML, CSS, and JS can be granular and more importantly, lacks the reactivity that Svelte has. Meaning, to develop certain features I had to focus a lot more on the "what to do" when data changes, rather than Svelte handling that for me.
-
-So, I searched for tools around that could be of assistance. I found [figsvelte](https://github.com/thomas-lowry/figsvelte) which was of so much help in the underlying understanding of what to do. But, it did not accomplish all I was looking for. I needed a solution that didn't just generate an HTML file with JS that hydrated the page. Through a lot of tinkering I was finally able to get the system to work.
-
-I noticed through a lot of Google searches I wasn't the only one looking for a solution like this, yet I was unable to find one that addressed everything I was looking for. So, for this reason I built svelte-bundle to take care of this in a much more simplistic and CLI-driven way.
+---
 
-## Installation
+## Install
 
 ```bash
 npm install -g svelte-bundle
@@ -38,49 +20,57 @@ npm install -g svelte-bundle
 bun add -g svelte-bundle
 ```
 
-`sb` is available as a short alias:
+Short alias `sb` is also available.
+
+---
+
+## Quickstart
 
 ```bash
-sb create my-app
-sb build --hydrate
+svelte-bundle create my-app
+cd my-app
+npm run dev          # develop with hot reload
+svelte-bundle build  # → dist/index.html
 ```
 
 ---
 
-## `svelte-bundle create`
+## Commands
+
+### `svelte-bundle create [name]`
 
-Scaffolds a new Vite + Svelte 5 project with TypeScript configured and ready to go.
+Scaffolds a new project with Svelte 5, Vite, and TypeScript — ready to run.
 
 ```bash
 svelte-bundle create my-app
 ```
 
-Interactive prompts will ask for:
-- **Package manager** — bun, npm, pnpm, or yarn
-- **Optional features** — Tailwind CSS, ESLint, Prettier, Vitest
-- **Git** — initialize a repository
-- **Install** — run the package manager automatically
+Interactive prompts let you choose a package manager and optional features. You can also skip prompts with flags:
+
+```bash
+svelte-bundle create my-app --pm bun --no-git
+```
 
 | Flag | Description |
 |---|---|
-| `--template / -t` | Template to use (currently: `default`) |
-| `--pm` | Skip the package manager prompt (`bun`, `npm`, `pnpm`, `yarn`) |
+| `-t, --template` | Template to use (default: `default`) |
+| `--pm` | Package manager: `bun`, `npm`, `pnpm`, `yarn` |
 | `--no-install` | Skip dependency installation |
 | `--no-git` | Skip git initialization |
 
-```bash
-svelte-bundle create my-app --pm bun --no-git
-```
-
-### Project structure
+**Optional features** (selected during prompts):
+- **Tailwind CSS** — `@tailwindcss/vite` v4, zero config
+- **ESLint** — with Svelte plugin
+- **Prettier** — with Svelte plugin
+- **Vitest** — unit testing setup
 
+**Output structure:**
 ```
 my-app/
 ├── src/
 │   ├── App.svelte       ← root component
 │   ├── main.ts          ← entry point
-│   └── lib/
-│       └── index.ts     ← library re-export entry
+│   └── lib/index.ts
 ├── public/
 ├── index.html
 ├── vite.config.ts
@@ -88,71 +78,41 @@ my-app/
 └── package.json
 ```
 
-### Dev server
-
-```bash
-cd my-app
-npm run dev
-```
-
 ---
 
-## `svelte-bundle build`
-
-Builds the project into a **single self-contained `dist/index.html`** with all CSS and JavaScript inlined — no separate asset files, no web server needed.
-
-```bash
-cd my-app
-svelte-bundle build
-```
-
-| Flag | Default | Description |
-|---|---|---|
-| `--hydrate` | `false` | Pre-render with Svelte SSR for SEO-friendly output |
-| `--entry` | `src/App.svelte` | Root component for SSR pre-rendering |
-| `--outfile` | `dist/index.html` | Output file path |
-| `--mode / -m` | `production` | Vite build mode |
+### `svelte-bundle build`
 
-### Default build
+Compiles the project and inlines everything into a single `dist/index.html`.
 
 ```bash
 svelte-bundle build
 ```
 
-Produces a single `dist/index.html` with CSS and JS fully inlined. Open it directly in a browser — no web server required. Drop it into any CMS, email, or embedded environment.
-
-### Hydrated build (SSR)
+Add `--hydrate` to pre-render with SSR — useful for SEO, fast LCP, or CMS environments that crawl content:
 
 ```bash
 svelte-bundle build --hydrate
 ```
 
-Pre-renders the root component server-side so the page contains real HTML content before JavaScript executes. Useful for:
-
-- **SEO** — search engine crawlers see actual content immediately
-- **LCP** — Largest Contentful Paint is not blocked by JS execution
-- **CMS / embedded use** — a fully pre-rendered, static single file
+With `--hydrate`, the root component is server-rendered first so real HTML content exists before JavaScript runs. The client JS automatically calls `hydrate()` or `mount()` depending on what it finds — no extra config needed.
 
-The client JS automatically detects whether SSR content is present and calls `hydrate()` or `mount()` accordingly — no separate builds or entry points needed.
+| Flag | Default | Description |
+|---|---|---|
+| `--hydrate` | `false` | Pre-render with Svelte SSR |
+| `--entry` | `src/App.svelte` | Root component for SSR |
+| `--outfile` | `dist/index.html` | Output path |
+| `-m, --mode` | `production` | Vite build mode |
 
-### How the build pipeline works
+**How the build works:**
+1. `vite build` compiles and minifies the Svelte app
+2. Every `<link rel="stylesheet">` is replaced with an inline `<style>` block
+3. Every `<script src="...">` is replaced with an inline `<script type="module">` block
+4. *(with `--hydrate`)* A Vite SSR build pre-renders the component and injects the HTML into `<div id="app">`
 
-1. **Client bundle** — `vite build` compiles and minifies the Svelte app via your `vite.config.ts`
-2. **Inline** — every `<link rel="stylesheet">` becomes an inline `<style>` block; every `<script src="...">` becomes an inline `<script type="module">` block
-3. **SSR** *(with `--hydrate` only)* — a temporary Vite SSR build server-renders the component; the HTML is injected into `<div id="app">` before inlining; all temp files are cleaned up automatically
+The result is one `.html` file you can open directly in a browser or drop into any system.
 
 ---
 
-## Features
-- [x] Scaffold a Svelte 5 + Vite project with a single command
-- [x] Outputs a single `.html` file ready for deployment anywhere
-- [x] All CSS and JS fully inlined — zero external dependencies at runtime
-- [x] SSR hydration support for SEO-safe output
-- [x] Tailwind CSS support out of the box (selected during `create`)
-- [x] Optional ESLint, Prettier, and Vitest setup
-- [x] TypeScript everywhere, strict mode enforced
-- [x] Works with any Vite plugin ecosystem
-
 ## Requirements
 
 - Node.js 18+ or Bun 1.0+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-bundle",
-  "version": "0.2.0-beta.1",
+  "version": "0.3.0",
   "description": "A powerful CLI for scaffolding and bundling Svelte components",
   "type": "module",
   "bin": {
@@ -18,7 +18,9 @@
     "build": "bun build src/cli.ts --outfile dist/cli.js --target node --format esm",
     "dev": "bun run src/cli.ts",
     "test": "bun test",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "release": "release-it",
+    "prepare": "husky"
   },
   "dependencies": {
     "@clack/prompts": "^0.9.1",
@@ -26,7 +28,11 @@
     "picocolors": "^1.1.1"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.4.3",
+    "@commitlint/config-conventional": "^20.4.3",
+    "@release-it/conventional-changelog": "^10.0.5",
     "@types/bun": "latest",
+    "husky": "^9.1.7",
     "release-it": "^19.2.4",
     "typescript": "^5"
   }