create-rolldown 0.0.3 → 0.0.5

package/README.md

@@ -2,6 +2,8 @@
 
 [![npm version](https://img.shields.io/npm/v/create-rolldown.svg)](https://www.npmjs.com/package/create-rolldown)
 [![license](https://img.shields.io/npm/l/create-rolldown.svg)](https://github.com/rolldown/create-rolldown/blob/main/LICENSE)
+[![test](https://img.shields.io/badge/tests-77%20passed-brightgreen.svg)](https://github.com/sunny-117/create-rolldown)
+[![coverage](https://img.shields.io/badge/coverage-60.87%25-yellow.svg)](https://github.com/sunny-117/create-rolldown)
 
 Scaffolding tool for [Rolldown](https://rolldown.rs) library projects - a fast JavaScript bundler written in Rust.
 
@@ -79,27 +81,6 @@ Available templates:
   svelte                       Svelte component library
 ```
 
-## Examples
-
-### Create a React library (components, hooks, utilities)
-
-```bash
-npm create rolldown@latest my-react-lib
-# Select "react"
-```
-
-### Create a utility library and start immediately
-
-```bash
-npm create rolldown@latest my-utils -- --template vanilla --immediate
-```
-
-### Create a Vue composables library in CI/CD
-
-```bash
-npm create rolldown@latest my-vue-composables -- --template vue --no-interactive
-```
-
 ## Supported Templates
 
 | Template  | Description                      | Use Cases                          | Playground |
@@ -110,64 +91,18 @@ npm create rolldown@latest my-vue-composables -- --template vue --no-interactive
 | `solid`   | SolidJS library with TypeScript  | Solid components, primitives       | ✅ Vite    |
 | `svelte`  | Svelte 5 library with TypeScript | Svelte components, actions         | ✅ Vite    |
 
-### Template Architecture
-
-**Vanilla Template** - For pure TypeScript/JavaScript libraries:
-
-```
-your-library/
-├── src/
-│   └── index.ts           # Main entry point
-├── dist/                  # Build output (generated)
-├── rolldown.config.ts
-├── tsconfig.json
-└── package.json
-```
-
-**Framework Templates** (React, Vue, Solid, Svelte) - For framework-specific libraries:
-
-```
-your-library/
-├── src/                    # Component library source code
-│   ├── index.ts           # Main entry point (exports)
-│   └── MyButton.*         # Example component
-├── playground/            # Development playground (Vite)
-│   ├── src/
-│   │   ├── App.*         # Playground app
-│   │   ├── index.*       # Playground entry
-│   │   └── style.css     # Playground styles
-│   ├── index.html
-│   └── public/
-├── dist/                  # Build output (generated)
-├── rolldown.config.js     # Rolldown configuration
-├── vite.config.ts         # Vite configuration (for playground)
-├── tsconfig.json
-├── package.json
-└── README.md
-```
-
-**Key Features:**
-
-- `src/` - Your library source code (built with Rolldown)
-- `playground/` - Development environment (powered by Vite with HMR)
-- `npm run build` - Build library with Rolldown
-- `npm run dev` - Watch mode for library development
-- `npm run play` - Start Vite playground for testing your library
-- Ready for npm publishing with proper exports configuration
-- Perfect for component libraries, utility libraries, hooks, composables, and more
-
 ## Development
 
 ### Prerequisites
 
 - Node.js 20.19.0+ or 22.12.0+
-- pnpm (recommended) or npm
+- pnpm (recommended)
 
 ### Setup
 
 ```bash
 # Clone the repository
-git clone https://github.com/rolldown/create-rolldown.git
+git clone https://github.com/Sunny-117/create-rolldown.git
 cd create-rolldown
 
 # Install dependencies
@@ -185,6 +120,9 @@ pnpm test
 # Run tests in watch mode
 pnpm test:watch
 
+# Generate test coverage report
+pnpm test:coverage
+
 # Type checking
 pnpm typecheck
 
@@ -198,51 +136,6 @@ pnpm format
 pnpm format:check
 ```
 
-### Project Structure
-
-```
-create-rolldown/
-├── src/
-│   ├── cli.ts             # Main CLI entry point
-│   └── utils/             # Utility modules
-│       ├── args.ts        # Argument parsing
-│       ├── command.ts     # Command execution
-│       ├── constants.ts   # Framework definitions
-│       ├── file.ts        # File operations
-│       ├── package-manager.ts  # Package manager detection
-│       ├── prompts.ts     # Interactive prompts
-│       ├── types.ts       # TypeScript types
-│       └── validation.ts  # Input validation
-├── __tests__/
-│   └── cli.spec.ts        # Integration tests
-├── template-vanilla/      # Vanilla TS template
-├── template-react/        # React template
-├── template-vue/          # Vue template
-├── template-solid/        # Solid template
-├── template-svelte/       # Svelte template
-├── index.js               # CLI entry point
-├── package.json
-└── tsconfig.json
-```
-
-### Testing
-
-The project uses a comprehensive testing strategy:
-
-- **Unit Tests**: Test specific functions and edge cases
-- **Property-Based Tests**: Test universal properties across many inputs using [fast-check](https://github.com/dubzzz/fast-check)
-- **Integration Tests**: Test complete CLI workflows
-
-Run tests:
-
-```bash
-# Run all tests once
-pnpm test
-
-# Run tests in watch mode
-pnpm test:watch
-```
-
 ### Adding a New Template
 
 1. Create a new directory: `template-{framework}` (e.g., `template-preact`)
@@ -269,10 +162,6 @@ pnpm test:watch
 6. **Update files** (package.json name, metadata)
 7. **Optionally install dependencies** and start playground
 
-## Requirements
-
-- Node.js ^20.19.0 || >=22.12.0
-
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rolldown",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Scaffolding tool for Rolldown projects",
   "keywords": [
     "bundler",
@@ -24,9 +24,11 @@
     "create-rolldown": "index.js"
   },
   "files": [
+    "dist",
     "index.js",
-    "template-*",
-    "dist"
+    "LICENSE",
+    "README.md",
+    "template-*/**"
   ],
   "type": "module",
   "scripts": {
@@ -35,6 +37,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest --run",
     "test:watch": "vitest",
+    "test:coverage": "vitest --run --coverage",
     "lint": "oxlint",
     "format": "oxfmt",
     "format:check": "oxfmt --check",
@@ -53,6 +56,7 @@
     "@types/cross-spawn": "^6.0.6",
     "@types/mri": "^1.1.5",
     "@types/node": "^20.11.0",
+    "@vitest/coverage-v8": "^1.6.1",
     "changelogen": "^0.6.2",
     "execa": "^9.0.0",
     "fast-check": "^3.15.0",

package/template-react/.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig helps maintain consistent coding styles
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/template-react/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+- Initial release
+- React component library setup with Rolldown
+- Vite playground for development
+- TypeScript support
+- Example MyButton component
+
+---
+
+Created with [create-rolldown](https://github.com/sunny-117/create-rolldown)

package/template-react/CONTRIBUTING.md

@@ -0,0 +1,46 @@
+# Contributing
+
+Thanks for your interest in contributing to this project! 🎉
+
+## Development Setup
+
+1. Fork and clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the playground:
+   ```bash
+   npm run play
+   ```
+
+## Making Changes
+
+1. Create a new branch for your feature/fix
+2. Make your changes in the `src/` directory
+3. Test your changes in the playground
+4. Build the library to ensure no errors:
+   ```bash
+   npm run build
+   ```
+5. Run type checking:
+   ```bash
+   npm run typecheck
+   ```
+
+## Submitting Changes
+
+1. Commit your changes with a clear message
+2. Push to your fork
+3. Open a Pull Request with a description of your changes
+
+## Code Style
+
+- Follow the existing code style
+- Use TypeScript for type safety
+- Add JSDoc comments for public APIs
+- Keep components simple and focused
+
+---
+
+This project was created with [create-rolldown](https://github.com/sunny-117/create-rolldown)

package/template-react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [author]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template-react/README.md

@@ -0,0 +1,164 @@
+# Rolldown React Starter
+
+> 🚀 Created with [create-rolldown](https://github.com/sunny-117/create-rolldown) - Fast scaffolding for Rolldown library projects
+
+A modern React component library starter powered by Rolldown - the blazingly fast JavaScript bundler written in Rust.
+
+## ✨ Features
+
+- ⚡️ **Lightning Fast** - Powered by [Rolldown](https://rolldown.rs), a Rust-based bundler
+- ⚛️ **React 19** - Latest React with full TypeScript support
+- 🎮 **Live Playground** - Vite-powered dev environment with HMR
+- 📦 **NPM Ready** - Pre-configured for publishing React libraries
+- 🔧 **TypeScript First** - Full type safety and IntelliSense
+- 🔄 **Watch Mode** - Instant feedback during library development
+- 💡 **Perfect For** - React components, hooks, utilities, and UI libraries
+
+## 🚀 Quick Start
+
+Install dependencies:
+
+```bash
+npm install
+# or
+pnpm install
+# or
+yarn install
+```
+
+## 📦 Development Workflow
+
+### 🎮 Run the playground (Recommended for development)
+
+```bash
+npm run play
+```
+
+Opens a Vite dev server at `http://localhost:5173` with:
+
+- ⚡️ Hot Module Replacement (HMR)
+- 🔄 Instant updates when you edit components
+- 🎨 Live preview of your library
+
+**Tip**: Edit `src/MyButton.tsx` and see changes instantly in the playground!
+
+### 📦 Build the library
+
+```bash
+npm run build
+```
+
+Outputs to `dist/` directory with:
+
+- `index.js` - ESM bundle
+- `index.d.ts` - TypeScript declarations
+
+### 🔄 Watch mode for library development
+
+```bash
+npm run dev
+```
+
+Automatically rebuilds the library on file changes. Use this when:
+
+- Testing your library in another project
+- Preparing for publishing
+- Running alongside the playground
+
+### 🔍 Type checking
+
+```bash
+npm run typecheck
+```
+
+## 📁 Project Structure
+
+```
+your-library/
+├── src/                    # 📚 Your library source code
+│   ├── index.ts           # 📝 Main entry - export your components here
+│   └── MyButton.tsx       # 🎨 Example component (replace with yours)
+│
+├── playground/            # 🎮 Development playground (Vite)
+│   ├── src/
+│   │   ├── App.tsx       # 🎪 Test your components here
+│   │   ├── index.tsx     # 🚪 Playground entry point
+│   │   └── style.css     # 🎨 Playground styles
+│   ├── index.html        # 📄 HTML template
+│   └── public/           # 📁 Static assets
+│
+├── dist/                  # 📦 Build output (generated)
+│   ├── index.js          # ESM bundle
+│   └── index.d.ts        # Type declarations
+│
+├── rolldown.config.js     # ⚙️ Rolldown bundler config
+├── vite.config.ts         # ⚡️ Vite playground config
+├── tsconfig.json          # 🔧 TypeScript config
+└── package.json           # 📋 Package metadata
+```
+
+## 💡 Usage Example
+
+After building and publishing, users can import your components:
+
+```tsx
+import { MyButton } from 'your-library-name';
+
+function App() {
+  return (
+    <div>
+      <MyButton />
+    </div>
+  );
+}
+```
+
+## 📤 Publishing to NPM
+
+1. Update `package.json` with your library details:
+   - `name` - Your package name (e.g., `@yourname/react-components`)
+   - `version` - Semantic version (start with `0.1.0`)
+   - `description` - What your library does
+   - `author` - Your name and email
+   - `repository` - Your git repository URL
+   - `keywords` - Help users find your package
+
+2. Build the library:
+
+   ```bash
+   npm run build
+   ```
+
+3. Test the build locally:
+
+   ```bash
+   npm pack
+   # Creates a .tgz file you can test in another project
+   ```
+
+4. Publish to npm:
+   ```bash
+   npm publish
+   ```
+
+The `prepublishOnly` script ensures your library is built before publishing.
+
+## 🎯 Best Practices
+
+- **Export Strategy**: Export all public components from `src/index.ts`
+- **Peer Dependencies**: React and ReactDOM are peer dependencies (users provide them)
+- **Tree Shaking**: Use named exports for better tree-shaking
+- **TypeScript**: Add proper types and JSDoc comments
+- **Testing**: Test components in the playground before publishing
+- **Versioning**: Follow [semantic versioning](https://semver.org/)
+
+## 🔗 Learn More
+
+- [Rolldown Documentation](https://rolldown.rs)
+- [create-rolldown](https://github.com/sunny-117/create-rolldown)
+- [React Documentation](https://react.dev)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+
+---
+
+Built with ❤️ using create-rolldown

package/template-react/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "rolldown-react-starter",
+  "version": "0.0.0",
+  "description": "A starter for creating a React library with Rolldown.",
+  "keywords": [
+    "bundler",
+    "component",
+    "library",
+    "react",
+    "rolldown",
+    "typescript"
+  ],
+  "homepage": "https://github.com/author/library#readme",
+  "bugs": {
+    "url": "https://github.com/author/library/issues"
+  },
+  "license": "MIT",
+  "author": "Author Name <author.name@mail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/author/library.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rolldown -c rolldown.config.js",
+    "dev": "rolldown -c rolldown.config.js --watch",
+    "play": "vite",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "rolldown": "^1.0.0-beta.60",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/template-react/playground/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/rolldown.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rolldown + React</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/template-react/playground/public/rolldown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/></svg>

package/template-react/playground/src/App.tsx

@@ -0,0 +1,18 @@
+import { MyButton } from '../../src';
+
+export function App() {
+  return (
+    <>
+      <div>
+        <a href="https://rolldown.rs" target="_blank" rel="noopener noreferrer">
+          <img src="/rolldown.svg" className="logo" alt="Rolldown logo" />
+        </a>
+      </div>
+      <h1>Rolldown + React</h1>
+      <div className="card">
+        <MyButton />
+      </div>
+      <p className="read-the-docs">Click on the Rolldown logo to learn more</p>
+    </>
+  );
+}

package/template-react/playground/src/index.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App.tsx';
+import './style.css';
+
+createRoot(document.querySelector('#app')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/template-react/playground/src/style.css

@@ -0,0 +1,93 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}