create-rolldown 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rolldown",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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": {

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" class="logo" alt="Rolldown logo" />
+        </a>
+      </div>
+      <h1>Rolldown + React</h1>
+      <div class="card">
+        <MyButton />
+      </div>
+      <p class="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;
+  }
+}