sheetgl 2.0.0 → 2.0.2

package/README.md

@@ -1,19 +1,20 @@
-# SheetGL Pro v2.0 Enterprise ⚡
+# SheetGL v2.0.2 ⚡
 
 > **Next-Generation High-Performance WebGL & Canvas Excel DataGrid for React**  
-> Combining **GPU-Accelerated 60 FPS Canvas Virtualization** and **Microsoft Excel UX** with **Enterprise DataGrid Architecture** (Full Event Lifecycle, Async Cascading Backend Lookups, Dynamic Summaries, Batch CRUD, and Role-Based Permissions). Zero dependencies, zero DOM bloat, **100% Free under the MIT License**.
+> Combining **GPU-Accelerated Canvas Virtualization** and **Microsoft Excel UX** with **Enterprise DataGrid Architecture** (Full Event Lifecycle, Async Cascading Backend Lookups, Dynamic Summaries, Batch CRUD, and Role-Based Permissions). Zero dependencies, zero DOM bloat, **100% Free under the MIT License**.
 
+[![Version](https://img.shields.io/badge/version-2.0.2-0284c7.svg)](https://www.npmjs.com/package/sheetgl)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![React](https://img.shields.io/badge/React-19-61dafb.svg)](https://react.dev)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0%2B-blue.svg)](https://www.typescriptlang.org)
-[![Performance](https://img.shields.io/badge/Performance-60_FPS_Canvas-success.svg)](#)
+[![Performance](https://img.shields.io/badge/Performance-Zero_DOM_Canvas-success.svg)](#)
 [![i18n](https://img.shields.io/badge/i18n-Multi--Language-orange.svg)](#)
 
 ---
 
-## 🌟 Key Highlights in v2.0
+## 🌟 Key Highlights in v2.0.2
 
-- 🏎️ **Ultra-Fast 60 FPS Canvas Virtualization:** Renders 10,000–100,000+ rows and dozens of columns on a single high-DPI `<canvas>` element with right-side live scroll indicators, quick jump controls (`⤒` / `⤓`), and automatic edge-scrolling during drag operations.
+- 🏎️ **Ultra-Fast Canvas Virtualization:** Renders 10,000–100,000+ rows and dozens of columns on a single high-DPI `<canvas>` element with right-side live scroll indicators, quick jump controls (`⤒` / `⤓`), and automatic edge-scrolling during drag operations.
 - 📐 **Complete Microsoft Excel UX:**
   - **Bottom-Right Fill Handle & Smart AutoFill:** Drag the corner square across rows or columns to duplicate values or auto-increment sequential codes (`ACC-100001` → `ACC-100002`).
   - **Right-Side Quick Cell Duplicate Handle (`+`):** Click or drag the right-edge `+` pill on any active selection to duplicate cell values.
@@ -37,12 +38,12 @@
 
 ## ⚖️ Comparison: SheetGL vs. Traditional Grids
 
-| Feature | SheetGL Pro v2.0 | Traditional Enterprise Grids | AG-Grid Enterprise | Standard React Table |
+| Feature | SheetGL v2.0.2 | Traditional Enterprise Grids | AG-Grid Enterprise | Standard React Table |
 | :--- | :---: | :---: | :---: | :---: |
 | **Licensing** | **Free (MIT)** | Commercial ($1,200+/yr) | Commercial ($1,200+/yr) | Free (MIT) |
 | **Rendering Engine** | **HTML5 Canvas 2D** | DOM Virtualization | DOM Virtualization | 100% DOM Nodes |
 | **DOM Overhead** | **1 Canvas Element** | 500+ DOM Nodes | 400+ DOM Nodes | 1,000+ DOM Nodes |
-| **Scroll Performance (100k rows)** | **Silky 60 FPS** | 30–45 FPS | 45–55 FPS | Lag / Crash |
+| **Scroll Performance (100k rows)** | **Ultra-Smooth** | Moderate | Fast | Lag / Crash |
 | **Memory Footprint** | **~15 MB** | ~60 MB | ~55 MB | 150+ MB |
 | **Fill Handle & Quick Duplicate** | **Built-in** | ❌ Manual | Plugin | ❌ Not supported |
 | **Async Cascading Lookups** | **Built-in** | Supported | ❌ Complex | ❌ Not supported |

package/bin/cli.mjs

@@ -19,9 +19,9 @@ const RESET = '\x1b[0m';
 function readPkgVersion() {
   try {
     const pkg = JSON.parse(fs.readFileSync(path.join(pkgRoot, 'package.json'), 'utf8'));
-    return pkg.version || '2.0.0';
+    return pkg.version || '2.0.2';
   } catch {
-    return '2.0.0';
+    return '2.0.2';
   }
 }
 
@@ -29,7 +29,7 @@ function printBanner() {
   const version = readPkgVersion();
   console.log(`
 ${CYAN}${BOLD}  ╔══════════════════════════════════════════════════════════════╗
-  ║   ⚡ SheetGL Pro v${version} — Enterprise Canvas Excel DataGrid   ║
+  ║   ⚡ SheetGL v${version} — Enterprise Canvas Excel DataGrid   ║
   ╚══════════════════════════════════════════════════════════════╝${RESET}
 `);
 }
@@ -157,23 +157,48 @@ export function SheetGLGrid() {
 export default SheetGLGrid;
 `;
 
-function handleInit(targetRelPath) {
+function handleInit(rawArgs) {
   printBanner();
-  const outPath = path.resolve(process.cwd(), targetRelPath || 'src/components/SheetGLGrid.tsx');
+  let dirOpt = null;
+  let nameOpt = null;
+  let rowsOpt = 1000;
+  let positionalPath = null;
+
+  for (let i = 0; i < rawArgs.length; i++) {
+    const arg = rawArgs[i];
+    if (arg === '--dir' || arg === '-d') {
+      dirOpt = rawArgs[++i];
+    } else if (arg === '--name' || arg === '-n') {
+      nameOpt = rawArgs[++i];
+    } else if (arg === '--rows' || arg === '-r') {
+      const parsed = parseInt(rawArgs[++i], 10);
+      if (!Number.isNaN(parsed) && parsed > 0) rowsOpt = parsed;
+    } else if (!arg.startsWith('-') && !positionalPath) {
+      positionalPath = arg;
+    }
+  }
+
+  const componentName = (nameOpt || 'SheetGLGrid').replace(/\.(tsx|ts|jsx|js)$/i, '');
+  const defaultRelPath = path.join(dirOpt || 'src/components', `${componentName}.tsx`);
+  const outPath = path.resolve(process.cwd(), positionalPath || defaultRelPath);
   const outDir = path.dirname(outPath);
 
   if (!fs.existsSync(outDir)) {
     fs.mkdirSync(outDir, { recursive: true });
   }
 
-  fs.writeFileSync(outPath, STARTER_COMPONENT_TEMPLATE, 'utf8');
+  const customizedTemplate = STARTER_COMPONENT_TEMPLATE
+    .replace(/SheetGLGrid/g, componentName)
+    .replace('length: 1000', `length: ${rowsOpt}`);
+
+  fs.writeFileSync(outPath, customizedTemplate, 'utf8');
   console.log(`${GREEN}✔ Created SheetGL starter component at:${RESET} ${BOLD}${outPath}${RESET}`);
   console.log(`
 ${BOLD}Next steps:${RESET}
   1. Ensure ${CYAN}sheetgl${RESET} is installed in your project:
      ${YELLOW}npm install sheetgl${RESET}
-  2. Import and render ${CYAN}<SheetGLGrid />${RESET} in your ${BOLD}App.tsx${RESET}:
-     ${DIM}import { SheetGLGrid } from './components/SheetGLGrid';${RESET}
+  2. Import and render ${CYAN}<${componentName} />${RESET} in your ${BOLD}App.tsx${RESET}:
+     ${DIM}import { ${componentName} } from './components/${componentName}';${RESET}
 `);
 }
 
@@ -224,7 +249,7 @@ function handleCreate(projectName) {
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>${projectName} — SheetGL Pro</title>
+    <title>${projectName} — SheetGL</title>
   </head>
   <body style="margin:0;padding:0;overflow:hidden;">
     <div id="root"></div>
@@ -331,7 +356,7 @@ const args = process.argv.slice(2);
 const cmd = (args[0] || 'help').toLowerCase();
 
 if (cmd === 'init' || cmd === 'setup') {
-  handleInit(args[1]);
+  handleInit(args.slice(1));
 } else if (cmd === 'create') {
   handleCreate(args[1]);
 } else if (cmd === 'doctor' || cmd === 'info' || cmd === 'check') {