@itayzrihan/create-box-app 1.0.3 → 1.0.4

package/bin/create-box-app.js

@@ -8,87 +8,11 @@
 
 const fs = require('fs');
 const path = require('path');
-const os = require('os');
 
 const projectName = process.argv[2] || 'my-box-app';
 const targetDir = path.join(process.cwd(), projectName);
 const templateDir = path.join(__dirname, '..', 'template');
 
-/**
- * Get VS Code global settings path based on OS
- */
-function getVSCodeSettingsPath() {
-  const platform = os.platform();
-  const home = os.homedir();
-  
-  if (platform === 'win32') {
-    return path.join(process.env.APPDATA || path.join(home, 'AppData', 'Roaming'), 'Code', 'User', 'settings.json');
-  } else if (platform === 'darwin') {
-    return path.join(home, 'Library', 'Application Support', 'Code', 'User', 'settings.json');
-  } else {
-    return path.join(home, '.config', 'Code', 'User', 'settings.json');
-  }
-}
-
-/**
- * Configure VS Code to recognize .box files as HTML globally
- */
-function configureVSCodeGlobally() {
-  const settingsPath = getVSCodeSettingsPath();
-  
-  try {
-    let settings = {};
-    
-    // Read existing settings if file exists
-    if (fs.existsSync(settingsPath)) {
-      const content = fs.readFileSync(settingsPath, 'utf-8');
-      // Remove comments from JSONC (VS Code settings can have comments)
-      const cleanContent = content.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
-      try {
-        settings = JSON.parse(cleanContent);
-      } catch {
-        // If parsing fails, try to work with the raw content
-        // Check if .box association already exists
-        if (content.includes('"*.box"')) {
-          return { success: true, alreadyConfigured: true };
-        }
-        // Can't safely modify, skip
-        return { success: false, reason: 'Could not parse existing settings' };
-      }
-    }
-    
-    // Check if already configured
-    if (settings['files.associations'] && settings['files.associations']['*.box'] === 'html') {
-      return { success: true, alreadyConfigured: true };
-    }
-    
-    // Add file association
-    if (!settings['files.associations']) {
-      settings['files.associations'] = {};
-    }
-    settings['files.associations']['*.box'] = 'html';
-    
-    // Add emmet support
-    if (!settings['emmet.includeLanguages']) {
-      settings['emmet.includeLanguages'] = {};
-    }
-    settings['emmet.includeLanguages']['box'] = 'html';
-    
-    // Ensure directory exists
-    const settingsDir = path.dirname(settingsPath);
-    if (!fs.existsSync(settingsDir)) {
-      fs.mkdirSync(settingsDir, { recursive: true });
-    }
-    
-    // Write updated settings
-    fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
-    
-    return { success: true, alreadyConfigured: false };
-  } catch (error) {
-    return { success: false, reason: error.message };
-  }
-}
-
 async function init() {
   console.log(`\n╔══════════════════════════════════════════════════════════════╗
 ║                   📦 BOX Framework Setup                      ║
@@ -109,38 +33,35 @@ 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'));
     pkg.name = projectName;
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
 
-    // Configure VS Code globally
-    const vscodeResult = configureVSCodeGlobally();
-    
     console.log(`✅ Project created successfully!\n`);
     
-    // Show VS Code configuration status
-    if (vscodeResult.success) {
-      if (vscodeResult.alreadyConfigured) {
-        console.log(`🎨 VS Code: .box files already configured as HTML\n`);
-      } else {
-        console.log(`🎨 VS Code: Configured .box files as HTML globally!\n`);
-      }
-    } else {
-      console.log(`💡 Tip: Add this to your VS Code settings for .box syntax highlighting:`);
-      console.log(`   "files.associations": { "*.box": "html" }\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.3",
+  "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
-  }
-}