@itayzrihan/create-box-app 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itayzrihan/create-box-app",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Create a new BOX Framework application with one command",
   "main": "bin/create-box-app.js",
   "bin": {

package/template/README.md

@@ -38,6 +38,7 @@ Visit **http://localhost:3000** and start building!
 ```
 my-box-app/
 ├── my-box-app.code-workspace  # ⬅️ OPEN THIS FILE in VS Code!
+├── box.config.json       # Build configuration
 ├── src/
 │   ├── main.box          # App entry point
 │   ├── counter.box       # State management example
@@ -114,8 +115,51 @@ Files named `api+name.box` become routes:
 |---------|-------------|
 | `npm run dev` | Start development server with HMR |
 | `npm run build` | Build for production |
+| `npm run build:analyze` | Build with detailed bundle analysis |
+| `npm run build:prod` | Build with aggressive minification |
 | `npm run start` | Run production server |
 | `npm run preview` | Build and run production |
+| `npm run clean` | Remove dist/ and build artifacts |
+| `npm run lint` | Validate all .box files for errors |
+
+## 📦 CLI Commands
+
+The BOX CLI offers powerful tools for development:
+
+```bash
+# Generate new components
+box add ui header        # Create UI component
+box add api users        # Create API endpoint
+box add page about       # Create full page with SEO meta
+box add layout main      # Create layout wrapper
+
+# Development
+box dev                  # Start dev server with HMR
+box build                # Production build
+box build --analyze      # Show bundle analysis
+box build --minify=none  # Disable minification
+
+# Maintenance
+box clean                # Remove build artifacts
+box lint                 # Validate .box files
+```
+
+## ⚙️ Configuration
+
+Your project includes `box.config.json` for customization:
+
+```json
+{
+  "minify": "basic",        // none | basic | aggressive
+  "outDir": "dist",
+  "srcDir": "src",
+  "port": 3000,
+  "build": {
+    "cleanFirst": false,
+    "analyze": false
+  }
+}
+```
 
 ## 🔌 VS Code Setup
 

package/template/box.config.json

@@ -0,0 +1,14 @@
+{
+  "//": "BOX Framework Configuration",
+  "//": "See: https://github.com/itayzrihan/box#configuration",
+  
+  "minify": "basic",
+  "outDir": "dist",
+  "srcDir": "src",
+  "port": 3000,
+  
+  "build": {
+    "cleanFirst": false,
+    "analyze": false
+  }
+}

package/template/package.json

@@ -5,8 +5,12 @@
   "scripts": {
     "dev": "box dev",
     "build": "box build",
+    "build:analyze": "box build --analyze",
+    "build:prod": "box build --minify=aggressive",
     "start": "node dist/server.js",
-    "preview": "npm run build && npm run start"
+    "preview": "npm run build && npm run start",
+    "clean": "box clean",
+    "lint": "box lint"
   },
   "keywords": [
     "box",
@@ -16,6 +20,6 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@itayzrihan/box-framework": "^1.0.0"
+    "@itayzrihan/box-framework": "^1.1.0"
   }
 }

package/template/src/main.box

@@ -85,6 +85,4 @@
   // This is your app's entry point
   // BOX automatically includes all files referenced with <include />
   console.log('🚀 BOX App loaded successfully!');
-</script>
-  console.log('📦 BOX App initialized!');
 </script>

package/template/src/welcome.box

@@ -1,82 +0,0 @@
-<style>
-  .welcome {
-    text-align: center;
-    padding: 3rem 2rem;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-  }
-  
-  .welcome-title {
-    font-size: 3.5rem;
-    font-weight: bold;
-    margin-bottom: 1rem;
-    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
-  }
-  
-  .welcome-subtitle {
-    font-size: 1.25rem;
-    margin-bottom: 2rem;
-    opacity: 0.95;
-  }
-  
-  .welcome-box {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    padding: 2rem;
-    border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    max-width: 600px;
-    margin: 2rem 0;
-  }
-  
-  .welcome-text {
-    font-size: 1rem;
-    line-height: 1.6;
-  }
-  
-  .welcome-link {
-    display: inline-block;
-    margin-top: 1.5rem;
-    padding: 0.75rem 1.5rem;
-    background: white;
-    color: #667eea;
-    text-decoration: none;
-    border-radius: 8px;
-    font-weight: 600;
-    transition: transform 0.2s;
-  }
-  
-  .welcome-link:hover {
-    transform: scale(1.05);
-  }
-</style>
-
-<template>
-  <div class="welcome">
-    <h1 class="welcome-title">Welcome to BOX 📦</h1>
-    <p class="welcome-subtitle">A zero-dependency, full-stack framework</p>
-    
-    <div class="welcome-box">
-      <p class="welcome-text">
-        Your BOX project is ready! Edit <strong>src/main.box</strong> to get started.
-      </p>
-      <p class="welcome-text">
-        This welcome component demonstrates the power of reactive state management.
-      </p>
-      <a href="https://github.com/itayzrihan/box" class="welcome-link">
-        Learn More →
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-  console.log('🎉 Welcome component loaded!');
-  console.log('💡 Tip: Run "npm run dev" to start the dev server');
-  console.log('📚 Read the docs: https://github.com/itayzrihan/box#readme');
-</script>