create-template-html-css 2.0.4 → 2.2.0

package/CODE-SPLITTING-GUIDE.md

@@ -0,0 +1,274 @@
+# Code Splitting Guide 🚀
+
+This guide explains how to use code splitting features in your React projects to reduce bundle size and improve performance.
+
+## What is Code Splitting?
+
+Code splitting is a technique that splits your JavaScript bundle into smaller chunks that can be loaded on demand. This reduces the initial load time of your application by only loading the code that's needed for the current page.
+
+## Features
+
+### 1. Lazy Loading with React.lazy() and Suspense
+
+When you enable `--lazy-load` flag, your components are loaded dynamically using React's built-in lazy loading:
+
+```bash
+create-template create --react -c button -n my-app --lazy-load
+```
+
+This generates an App.jsx like this:
+
+```jsx
+import { lazy, Suspense } from 'react';
+import './components/Button/Button.css';
+
+// Component is loaded only when needed
+const Button = lazy(() => import('./components/Button/Button'));
+
+function App() {
+  return (
+    <Suspense fallback={<div className="loading">Loading...</div>}>
+      {/* Your component usage */}
+    </Suspense>
+  );
+}
+
+export default App;
+```
+
+**Benefits:**
+- ✅ Smaller initial bundle size
+- ✅ Faster page load time
+- ✅ Better performance on slow networks
+- ✅ Improved user experience with loading states
+
+### 2. Build Optimizations
+
+When you enable `--optimize-build` flag, your vite.config.js includes advanced optimizations:
+
+```bash
+create-template create --react -c button -n my-app --optimize-build
+```
+
+This generates:
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // Split vendor code into separate chunk
+          vendor: ['react', 'react-dom'],
+        },
+      },
+    },
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true, // Remove console.log in production
+      },
+    },
+  },
+});
+```
+
+**Benefits:**
+- ✅ Vendor code (React, ReactDOM) in separate chunk
+- ✅ Better caching (vendor chunk rarely changes)
+- ✅ Smaller main bundle
+- ✅ Console.log removal in production
+- ✅ Better compression
+
+### 3. Combine Both for Maximum Performance
+
+```bash
+create-template create --react -c counter -n my-app --lazy-load --optimize-build
+```
+
+This gives you:
+- Dynamic component loading
+- Optimized vendor chunking
+- Production-ready configuration
+
+## Interactive Mode
+
+You can also enable these features interactively:
+
+```bash
+create-template create
+```
+
+Then answer:
+- Framework: **React (JSX + CSS)**
+- Project type: **Full React project**
+- Component: *Choose your component*
+- Name: *Your project name*
+- Lazy loading: **Yes**
+- Build optimizations: **Yes**
+
+## Performance Impact
+
+### Without Code Splitting
+```
+bundle.js    150 KB
+├── React     45 KB
+├── ReactDOM  40 KB
+└── Your App  65 KB
+
+Initial Load: 150 KB (slower)
+```
+
+### With Code Splitting
+```
+vendor.js     85 KB  (cached)
+├── React     45 KB
+└── ReactDOM  40 KB
+
+main.js       35 KB  (loaded first)
+└── Core App  35 KB
+
+Button.js     30 KB  (lazy loaded)
+└── Component 30 KB
+
+Initial Load: 120 KB (faster!) ⚡
+Subsequent loads: 35 KB only (vendor cached)
+```
+
+## Advanced Usage
+
+### Route-Based Code Splitting
+
+For multi-page apps, you can extend this pattern:
+
+```jsx
+import { lazy, Suspense } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+const Home = lazy(() => import('./pages/Home'));
+const About = lazy(() => import('./pages/About'));
+const Contact = lazy(() => import('./pages/Contact'));
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Suspense fallback={<div>Loading page...</div>}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/contact" element={<Contact />} />
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
+  );
+}
+```
+
+### Custom Loading Component
+
+Replace the fallback with a custom loader:
+
+```jsx
+const Spinner = () => (
+  <div className="spinner">
+    <div className="spinner-circle"></div>
+  </div>
+);
+
+<Suspense fallback={<Spinner />}>
+  <Button />
+</Suspense>
+```
+
+## Bundle Analysis
+
+To analyze your bundle size:
+
+```bash
+npm install --save-dev rollup-plugin-visualizer
+```
+
+Update vite.config.js:
+
+```js
+import { visualizer } from 'rollup-plugin-visualizer';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    visualizer({
+      filename: './dist/stats.html',
+      open: true,
+    }),
+  ],
+  // ... rest of config
+});
+```
+
+Then run:
+
+```bash
+npm run build
+```
+
+This opens a visual representation of your bundle!
+
+## Best Practices
+
+1. **Always lazy load routes** in multi-page apps
+2. **Split vendor code** for better caching
+3. **Add meaningful loading states** for better UX
+4. **Analyze your bundle** to find optimization opportunities
+5. **Use lazy loading wisely** - don't split too aggressively
+6. **Test on slow networks** to verify improvements
+
+## Migration Guide
+
+### Existing Projects
+
+To add code splitting to an existing project:
+
+1. **Add lazy loading to App.jsx:**
+
+```jsx
+// Before
+import Button from './components/Button/Button';
+
+// After
+import { lazy, Suspense } from 'react';
+const Button = lazy(() => import('./components/Button/Button'));
+
+// Wrap your component in Suspense
+<Suspense fallback={<div>Loading...</div>}>
+  <Button />
+</Suspense>
+```
+
+2. **Update vite.config.js:**
+
+Add the build optimization section from this guide.
+
+3. **Test thoroughly:**
+
+```bash
+npm run build
+npm run preview
+```
+
+## Learn More
+
+- [React Code Splitting](https://react.dev/reference/react/lazy)
+- [Vite Build Optimizations](https://vitejs.dev/guide/build.html)
+- [Web Performance](https://web.dev/performance/)
+
+## Examples
+
+See the `templates-react/` directory for examples of components that can benefit from code splitting.
+
+---
+
+**Happy optimizing! 🎉**

package/COMPONENTS-GALLERY.html

@@ -252,20 +252,24 @@
 <body>
     <div class="container">
         <header>
-            <h1>🎨 Create Template HTML/CSS</h1>
-            <p>Interactive Component Gallery - v2.0.0</p>
+            <h1>🎨 Create Template HTML/CSS ⚛️</h1>
+            <p>Interactive Component Gallery - v2.1.0</p>
             <div class="stats">
                 <div class="stat">
-                    <div class="stat-number">46</div>
+                    <div class="stat-number">61</div>
                     <div class="stat-label">Total Templates</div>
                 </div>
                 <div class="stat">
-                    <div class="stat-number">16</div>
-                    <div class="stat-label">Interactive Games</div>
+                    <div class="stat-number">15</div>
+                    <div class="stat-label">React Components</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-number">46</div>
+                    <div class="stat-label">HTML Templates</div>
                 </div>
                 <div class="stat">
-                    <div class="stat-number">30</div>
-                    <div class="stat-label">UI Components</div>
+                    <div class="stat-number">16</div>
+                    <div class="stat-label">Interactive Games</div>
                 </div>
             </div>
         </header>
@@ -357,6 +361,137 @@
             </div>
         </div>
 
+        <!-- React Components -->
+        <div class="category" data-category="react">
+            <div class="category-header">
+                <span class="category-icon">⚛️</span>
+                <h2 class="category-title">React Components (NEW)</h2>
+                <span class="category-count">15 components</span>
+            </div>
+            <div class="components-grid">
+                <div class="component-card" data-name="react alert notification">
+                    <h3 class="component-name">Alert <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Alert/notification with 4 types (success, error, warning, info)</p>
+                    <div class="component-command">
+                        create-template create --react -c alert -n my-alert
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react badge status count">
+                    <h3 class="component-name">Badge <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Status badge with counts, dots, and variants</p>
+                    <div class="component-command">
+                        create-template create --react -c badge -n my-badge
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react button">
+                    <h3 class="component-name">Button</h3>
+                    <p class="component-description">Customizable button with variants and sizes</p>
+                    <div class="component-command">
+                        create-template create --react -c button -n my-react-button
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react card">
+                    <h3 class="component-name">Card</h3>
+                    <p class="component-description">Display content in elegant card with image support</p>
+                    <div class="component-command">
+                        create-template create --react -c card -n my-card
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react checkbox form input">
+                    <h3 class="component-name">Checkbox <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Checkbox with sizes, colors, indeterminate state</p>
+                    <div class="component-command">
+                        create-template create --react -c checkbox -n my-checkbox
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react counter">
+                    <h3 class="component-name">Counter</h3>
+                    <p class="component-description">Interactive counter with increment/decrement</p>
+                    <div class="component-command">
+                        create-template create --react -c counter -n my-counter
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react dropdown select">
+                    <h3 class="component-name">Dropdown <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Select dropdown with search & multi-select</p>
+                    <div class="component-command">
+                        create-template create --react -c dropdown -n my-dropdown
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react form validation">
+                    <h3 class="component-name">Form</h3>
+                    <p class="component-description">Flexible form with validation & multiple fields</p>
+                    <div class="component-command">
+                        create-template create --react -c form -n my-react-form
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react input text field">
+                    <h3 class="component-name">Input <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Text input with validation, icons, and states</p>
+                    <div class="component-command">
+                        create-template create --react -c input -n my-input
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react modal dialog">
+                    <h3 class="component-name">Modal</h3>
+                    <p class="component-description">Dialog modal with overlay and close handlers</p>
+                    <div class="component-command">
+                        create-template create --react -c modal -n my-modal
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react navbar navigation">
+                    <h3 class="component-name">Navbar <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Responsive navbar with mobile hamburger menu</p>
+                    <div class="component-command">
+                        create-template create --react -c navbar -n my-navbar
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react progress bar loading">
+                    <h3 class="component-name">Progress <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Progress bar with variants and animations</p>
+                    <div class="component-command">
+                        create-template create --react -c progress -n my-progress
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react switch toggle">
+                    <h3 class="component-name">Switch <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Toggle switch for on/off states</p>
+                    <div class="component-command">
+                        create-template create --react -c switch -n my-switch
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react todo list">
+                    <h3 class="component-name">Todo List</h3>
+                    <p class="component-description">Complete todo list with CRUD operations</p>
+                    <div class="component-command">
+                        create-template create --react -c todo-list -n my-todos
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react tooltip hint">
+                    <h3 class="component-name">Tooltip <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Contextual tooltip with positions & triggers</p>
+                    <div class="component-command">
+                        create-template create --react -c tooltip -n my-tooltip
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- Authentication Forms -->
         <div class="category" data-category="auth">
             <div class="category-header">
@@ -704,7 +839,7 @@
                 <a href="https://www.npmjs.com/package/create-template-html-css" target="_blank">📦 npm Package</a> | 
                 <a href="https://github.com/benshabbat/create-template-html-css" target="_blank">🐙 GitHub Repo</a>
             </p>
-            <p style="margin-top: 20px; opacity: 0.8;">v2.0.0 - 46 Templates Available</p>
+            <p style="margin-top: 20px; opacity: 0.8;">v2.1.0 - 46 HTML Templates + 15 React Components</p>
         </footer>
     </div>