@itayzrihan/create-box-app 1.0.0

package/README.md

@@ -0,0 +1,50 @@
+# create-box-app
+
+> Scaffold a new BOX Framework project in seconds
+
+## Quick Start
+
+```bash
+npx create-box-app my-project
+cd my-project
+npm install
+npm run dev
+```
+
+That's it! Your BOX app is ready at `http://localhost:3000`
+
+## What's Inside
+
+The scaffolder creates a minimal BOX project with:
+
+- ✅ Pre-configured `.vscode` settings for HTML syntax highlighting
+- ✅ Sample `main.box` component demonstrating the framework
+- ✅ Example API endpoint (`api+hello.box`)
+- ✅ Ready-to-use npm scripts (`dev`, `build`, `start`)
+- ✅ Clean folder structure following BOX conventions
+
+## Features
+
+- **Zero Setup**: No global installs. Just `npx` and go.
+- **Fast**: Generates a working project in under 5 seconds
+- **Minimal**: Only essential files, no bloat
+- **Beautiful**: Includes a stylish welcome component
+
+## Commands
+
+Once your project is created:
+
+```bash
+npm run dev      # Start dev server with HMR
+npm run build    # Build for production
+npm start        # Run production server
+```
+
+## Learn More
+
+- [BOX Framework Docs](https://github.com/itayzrihan/box)
+- [GitHub Repository](https://github.com/itayzrihan/box)
+
+## License
+
+MIT © Itay Zrihan

package/bin/create-box-app.js

@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+
+/**
+ * create-box-app
+ * Scaffolding CLI for BOX Framework
+ * Usage: npx create-box-app my-project
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const projectName = process.argv[2] || 'my-box-app';
+const targetDir = path.join(process.cwd(), projectName);
+const templateDir = path.join(__dirname, '..', 'template');
+
+async function init() {
+  console.log(`\n╔══════════════════════════════════════════════════════════════╗
+║                   📦 BOX Framework Setup                      ║
+╚══════════════════════════════════════════════════════════════╝\n`);
+
+  console.log(`📁 Creating your BOX project: ${projectName}\n`);
+
+  // Check if folder already exists
+  if (fs.existsSync(targetDir)) {
+    console.error(`❌ Folder already exists: ${projectName}`);
+    process.exit(1);
+  }
+
+  try {
+    // Create directory
+    fs.mkdirSync(targetDir, { recursive: true });
+
+    // Copy template directory recursively
+    copyDir(templateDir, targetDir);
+
+    // Customize package.json
+    const pkgPath = path.join(targetDir, 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+    pkg.name = projectName;
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+    console.log(`✅ Project created successfully!\n`);
+    console.log(`📋 Next steps:\n`);
+    console.log(`   1. Navigate to your project:`);
+    console.log(`      cd ${projectName}\n`);
+    console.log(`   2. Install dependencies:`);
+    console.log(`      npm install\n`);
+    console.log(`   3. Start the dev server:`);
+    console.log(`      npm run dev\n`);
+    console.log(`   4. Open in VS Code:`);
+    console.log(`      code .\n`);
+    console.log(`📚 Learn more: https://github.com/itayzrihan/box\n`);
+    console.log(`Happy BOXing! 🚀\n`);
+  } catch (error) {
+    console.error(`❌ Error: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+/**
+ * Recursively copy directory
+ */
+function copyDir(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const files = fs.readdirSync(src);
+
+  files.forEach(file => {
+    const srcPath = path.join(src, file);
+    const destPath = path.join(dest, file);
+    const stat = fs.statSync(srcPath);
+
+    if (stat.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  });
+}
+
+init();

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@itayzrihan/create-box-app",
+  "version": "1.0.0",
+  "description": "Create a new BOX Framework application with one command",
+  "main": "bin/create-box-app.js",
+  "bin": {
+    "create-box-app": "./bin/create-box-app.js"
+  },
+  "files": [
+    "bin/",
+    "template/",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "box",
+    "framework",
+    "scaffolding",
+    "cli",
+    "boilerplate",
+    "template",
+    "generator",
+    "create",
+    "vanilla",
+    "zero-dependency"
+  ],
+  "author": "Itay Zrihan <itayzrihan@github.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/itayzrihan/box.git"
+  },
+  "bugs": {
+    "url": "https://github.com/itayzrihan/box/issues"
+  },
+  "homepage": "https://github.com/itayzrihan/box#readme",
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/template/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.associations": {
+    "*.box": "html"
+  },
+  "emmet.includeLanguages": {
+    "box": "html"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  }
+}

package/template/README.md

@@ -0,0 +1,12 @@
+# BOX Project
+
+Auto-generated BOX Framework project. Edit your `.box` files in the `src/` folder and run `npm run dev` to see live updates!
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+Visit http://localhost:3000

package/template/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "my-box-app",
+  "version": "1.0.0",
+  "description": "A BOX Framework application",
+  "scripts": {
+    "build": "box build",
+    "dev": "box dev",
+    "start": "node dist/server.js"
+  },
+  "keywords": [
+    "box",
+    "framework"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "box-framework": "^1.0.0"
+  }
+}

package/template/src/api+hello.box

@@ -0,0 +1,15 @@
+/* BOX_CONFIG: { "method": "GET", "auth": false } */
+
+export default async (req, res, context) => {
+  try {
+    const greeting = {
+      message: "Hello from BOX API!",
+      timestamp: new Date().toISOString(),
+      framework: "BOX Framework v1.0.0"
+    };
+    
+    return { status: 200, data: greeting };
+  } catch (err) {
+    return { status: 500, error: "Server error" };
+  }
+};

package/template/src/main.box

@@ -0,0 +1,17 @@
+<style>
+  .app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+</style>
+
+<template>
+  <div class="app">
+    <include src="./welcome.box" />
+  </div>
+</template>
+
+<script>
+  console.log('📦 BOX App initialized!');
+</script>

package/template/src/welcome.box

@@ -0,0 +1,82 @@
+<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>