@itayzrihan/create-box-app 1.0.2 → 1.0.4

package/bin/create-box-app.js

@@ -33,6 +33,13 @@ async function init() {
     // Copy template directory recursively
     copyDir(templateDir, targetDir);
 
+    // Rename workspace file to project name
+    const oldWorkspacePath = path.join(targetDir, 'project.code-workspace');
+    const newWorkspacePath = path.join(targetDir, `${projectName}.code-workspace`);
+    if (fs.existsSync(oldWorkspacePath)) {
+      fs.renameSync(oldWorkspacePath, newWorkspacePath);
+    }
+
     // Customize package.json
     const pkgPath = path.join(targetDir, 'package.json');
     const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
@@ -40,15 +47,21 @@ async function init() {
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
 
     console.log(`✅ Project created successfully!\n`);
+    
+    console.log(`╔══════════════════════════════════════════════════════════════╗`);
+    console.log(`║  🎨 IMPORTANT: Open the WORKSPACE file for syntax highlighting`);
+    console.log(`╚══════════════════════════════════════════════════════════════╝\n`);
+    
     console.log(`📋 Next steps:\n`);
-    console.log(`   1. Navigate to your project:`);
-    console.log(`      cd ${projectName}\n`);
+    console.log(`   1. Open the workspace in VS Code (REQUIRED for .box highlighting):`);
+    console.log(`      code ${projectName}/${projectName}.code-workspace\n`);
     console.log(`   2. Install dependencies:`);
+    console.log(`      cd ${projectName}`);
     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(`   4. Open http://localhost:3000\n`);
+    console.log(`💡 TIP: Always open the .code-workspace file, not the folder!\n`);
     console.log(`📚 Learn more: https://github.com/itayzrihan/box\n`);
     console.log(`Happy BOXing! 🚀\n`);
   } catch (error) {

package/package.json

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

package/template/README.md

@@ -7,6 +7,23 @@ Welcome to your BOX Framework application! This is a fully functional starter te
 - Use **component composition** with `<include />`
 - Develop with **instant hot-reload** (HMR)
 
+---
+
+## ⚠️ IMPORTANT: Open the Workspace File!
+
+**For proper syntax highlighting in .box files, always open the `.code-workspace` file:**
+
+```bash
+code my-box-app.code-workspace
+```
+
+Or in VS Code: **File → Open Workspace from File → select `my-box-app.code-workspace`**
+
+> 💡 **AI Assistants:** This project uses `.box` files which are HTML-like components. 
+> The workspace file configures VS Code to treat them as HTML with full syntax highlighting and Emmet support.
+
+---
+
 ## Quick Start
 
 ```bash
@@ -20,10 +37,7 @@ Visit **http://localhost:3000** and start building!
 
 ```
 my-box-app/
-├── .vscode/
-│   ├── settings.json     # IDE settings (.box → HTML highlighting)
-│   ├── extensions.json   # Recommended VS Code extensions
-│   └── launch.json       # Debug configurations
+├── my-box-app.code-workspace  # ⬅️ OPEN THIS FILE in VS Code!
 ├── src/
 │   ├── main.box          # App entry point
 │   ├── counter.box       # State management example

package/template/project.code-workspace

@@ -0,0 +1,38 @@
+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "settings": {
+    "files.associations": {
+      "*.box": "html"
+    },
+    "emmet.includeLanguages": {
+      "box": "html"
+    },
+    "editor.quickSuggestions": {
+      "strings": true
+    },
+    "editor.formatOnSave": true,
+    "editor.tabSize": 2,
+    "editor.wordWrap": "on",
+    "editor.bracketPairColorization.enabled": true,
+    "html.autoClosingTags": true,
+    "css.colorDecorators": true,
+    "files.exclude": {
+      "**/node_modules": true
+    },
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/dist": true
+    }
+  },
+  "extensions": {
+    "recommendations": [
+      "formulahendry.auto-rename-tag",
+      "formulahendry.auto-close-tag",
+      "christian-kohler.path-intellisense"
+    ]
+  }
+}

package/template/.vscode/extensions.json

@@ -1,13 +0,0 @@
-{
-  "recommendations": [
-    "bradlc.vscode-tailwindcss",
-    "formulahendry.auto-rename-tag",
-    "formulahendry.auto-close-tag",
-    "christian-kohler.path-intellisense",
-    "pranaygp.vscode-css-peek",
-    "zignd.html-css-class-completion",
-    "ecmel.vscode-html-css",
-    "ritwickdey.liveserver"
-  ],
-  "unwantedRecommendations": []
-}

package/template/.vscode/launch.json

@@ -1,25 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "BOX Dev Server",
-      "type": "node",
-      "request": "launch",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev"],
-      "cwd": "${workspaceFolder}",
-      "console": "integratedTerminal",
-      "skipFiles": ["<node_internals>/**"]
-    },
-    {
-      "name": "BOX Production Server",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceFolder}/dist/server.js",
-      "cwd": "${workspaceFolder}",
-      "preLaunchTask": "npm: build",
-      "console": "integratedTerminal",
-      "skipFiles": ["<node_internals>/**"]
-    }
-  ]
-}

package/template/.vscode/settings.json

@@ -1,44 +0,0 @@
-{
-  // Associate .box files with HTML for syntax highlighting
-  "files.associations": {
-    "*.box": "html"
-  },
-  
-  // Enable Emmet in .box files for fast HTML typing
-  "emmet.includeLanguages": {
-    "box": "html"
-  },
-  
-  // Enable autocomplete in strings (useful for box-bind attributes)
-  "editor.quickSuggestions": {
-    "strings": true
-  },
-  
-  // Format on save for consistent code style
-  "editor.formatOnSave": true,
-  
-  // Use 2 spaces for indentation (HTML/CSS/JS standard)
-  "editor.tabSize": 2,
-  
-  // Wrap long lines for readability
-  "editor.wordWrap": "on",
-  
-  // Show matching brackets clearly
-  "editor.bracketPairColorization.enabled": true,
-  
-  // Auto-close HTML tags
-  "html.autoClosingTags": true,
-  
-  // Show color decorators in CSS
-  "css.colorDecorators": true,
-  
-  // Exclude build artifacts from explorer and search
-  "files.exclude": {
-    "**/node_modules": true,
-    "**/dist": false
-  },
-  "search.exclude": {
-    "**/node_modules": true,
-    "**/dist": true
-  }
-}