add react dev with vite rolldown template.

README.md

@@ -64,12 +64,13 @@ mk-app --template react-ts my-app
 | :------- | :---------- |
 | **vanilla-js**            | Vanilla JS + Vite. |
 | **minimal-react**         | React + Vite. |
-| **react-tw**              | React + Vite + Tailwind CSS. |
-| **react-dev**             | React + Vite + Tailwind CSS + ESlint + React Testing Library. |
 | **minimal-react-wp**      | React + Webpack. |
-| **react-dev-webpack**     | React + Webpack + Tailwind CSS + ESlint + React Testing Library. |
+| **react-tw**              | React + Vite + Tailwind CSS. |
 | **react-ts**              | React + Vite + TypeScript + ESlint. |
+| **react-experimental**    | React 19 + Farm + Oxlint. |
+| **react-dev**             | React + Vite + Tailwind CSS + ESlint + React Testing Library. |
 | **react-dev-ts**          | React + Typescript + Vite + Tailwind CSS + ESlint + React Testing Library. |
-| **react-experimental**            | React 19 + Farm + Oxlint. |
+| **react-dev-rolldown**    | React + Vite + Rolldown Tailwind CSS + ESlint + React Testing Library. |
+| **react-dev-webpack**     | React + Webpack + Tailwind CSS + ESlint + React Testing Library. |
 | **vue-js**                | Vue + Vite. |
 | **node-express**          | NodeJS + Express + ESlint + Jest + Sequelize |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sharmaz/mk-app",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "type": "module",
   "description": "A quick way to start your web applications.",
   "main": "index.js",

src/templateList.js

@@ -11,46 +11,52 @@ const templates = [
     title: colors.react('Minimal React'),
     description: colors.error('React + Vite.'),
   },
-  {
-    value: 'react-tw',
-    title:  colors.react('React Tailwind CSS'),
-    description: colors.error('React + Vite + Tailwindcss.'),
-  },
-  {
-    value: 'react-dev',
-    title:  colors.react('React Dev'),
-    description: colors.error('React + Vite + Tailwind CSS + ESlint 8 + Jest + React Testing Library.'),
-  },
   {
     value: 'minimal-react-wp',
     title: colors.webpack('Minimal React Webpack'),
     description: colors.error('React + Webpack.')
   },
   {
-    value: 'react-dev-webpack',
-    title: colors.webpack('React Dev Webpack'),
-    description: colors.error('React + Webpack + Tailwind CSS + ESlint + Jest + React Testing Library.')
+    value: 'react-tw',
+    title:  colors.react('React Tailwind CSS'),
+    description: colors.error('React + Vite + Tailwindcss.'),
   },
   {
     value: 'react-ts',
     title:  colors.typescript('React TypeScript'),
     description: colors.error('React + Vite + TypeScript + ESlint.'),
   },
+  {
+    value: 'react-ex',
+    title:  colors.experimental('React Experimental'),
+    description: colors.error('React 19 + Farm + Oxlint.'),
+  },
+  {
+    value: 'react-dev',
+    title:  colors.react('React Dev'),
+    description: colors.error('React + Vite + Tailwind CSS + ESlint + Jest + React Testing Library.'),
+  },
   {
     value: 'react-dev-ts',
     title:  colors.typescript('React Dev Typescript'),
     description: colors.error('React + Vite + TypeScript + Tailwind CSS + ESlint + Jest + React Testing Library.'),
   },
   {
-    value: 'react-ex',
-    title:  colors.error('React Experimental'),
-    description: colors.error('React 19 + Farm + Oxlint.'),
+    value: 'react-dev-rolldown',
+    title: colors.rust('React Dev Rolldown'),
+    description: colors.error('React + Vite (Rolldown) + Tailwind CSS + ESlint + Jest + React Testing Library.'),
+  },
+  {
+    value: 'react-dev-webpack',
+    title: colors.webpack('React Dev Webpack'),
+    description: colors.error('React + Webpack + Tailwind CSS + ESlint + Jest + React Testing Library.')
   },
   {
     value: 'vue-js',
     title:  colors.vue('Vue'),
     description: colors.error('Vue + Vite'),
-  }, {
+  },
+  {
     value: 'node-express',
     title:  colors.node('Node Express'),
     description: colors.error('Node + Express + Jest + Eslint.'),

src/utils/colors.js

@@ -11,6 +11,8 @@ const colors = {
   warn: chalk.hex('#EC9942'),
   webpack: chalk.hex('#75AFCC'),
   node: chalk.hex('#417E38'),
+  rust: chalk.hex('#D34516'),
+  experimental: chalk.hex('#FA2200'),
 };
 
 export default colors;

templates/react-dev-rolldown/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

templates/react-dev-rolldown/__tests__/App.test.jsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import App from '../src/App';
+
+test('App component render', async () => {
+  render(<App />);
+
+  expect(screen.getByRole('button')).toHaveTextContent('count');
+});

templates/react-dev-rolldown/_gitignore

@@ -0,0 +1,89 @@
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

templates/react-dev-rolldown/eslint.config.js

@@ -0,0 +1,27 @@
+import js from "@eslint/js";
+import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+import pluginJest from 'eslint-plugin-jest';
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  { plugins: { jest: pluginJest }, },
+  { files: ["**/*.{js,mjs,cjs,jsx}"], plugins: { js }, extends: ["js/recommended"] },
+  { files: ["**/*.{js,mjs,cjs,jsx}"], languageOptions: { globals: { ...globals.browser, ...globals.jest } } },
+  pluginReact.configs.flat.recommended,
+  {
+		rules: {
+      ...pluginJest.configs.recommended.rules,
+			"react/react-in-jsx-scope": 0,
+      "react/jsx-uses-react": 0
+		},
+	},
+  {
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+  globalIgnores(["**/coverage/**", "**/dist/**"]),
+]);

templates/react-dev-rolldown/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="#" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React TailwindCSS ESlint React Testing Library</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

templates/react-dev-rolldown/jest.config.cjs

@@ -0,0 +1,13 @@
+/** @type {import('jest').Config} */
+const config = {
+  verbose: true,
+  transform: {"\\.[jt]sx?$": "babel-jest"},
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{js,jsx}'],
+  coverageDirectory: 'coverage',
+  testEnvironment: 'jest-environment-jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testMatch: ['**/__tests__/**/?(*.)+(spec|test).[j]s?(x)']
+};
+
+module.exports = config;

templates/react-dev-rolldown/jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

templates/react-dev-rolldown/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-dev-rolldown",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "test": "jest",
+    "coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@eslint/js": "^9.26.0",
+    "@tailwindcss/postcss": "^4.1.5",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "@vitejs/plugin-react-oxc": "^0.2.2",
+    "babel-jest": "^29.7.0",
+    "eslint": "^9.26.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^15.15.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.5",
+    "vite": "npm:rolldown-vite@latest"
+  }
+}

templates/react-dev-rolldown/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

templates/react-dev-rolldown/src/App.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex flex-col justify-center items-center h-screen bg-neutral-800">
+      <h1 className="text-5xl text-blue-400 text-center">React</h1>
+      <div className="p-8">
+        <button
+          className="bg-slate-950 px-4 py-2 rounded-lg text-slate-200"
+          onClick={() => setCount((counter) => counter + 1)}
+          type="button"
+        >
+          {`count is ${count}`}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default App;

templates/react-dev-rolldown/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

templates/react-dev-rolldown/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

templates/react-dev-rolldown/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-oxc';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});