onelaraveljs 1.0.0 → 1.1.1

package/README.md

@@ -71,7 +71,7 @@ Ensure your main layout file injects the configuration:
 OneJS comes with a built-in Event Service for cross-component communication:
 
 ```javascript
-import { App } from '@onelaravel/onejs';
+import { App } from 'onelaraveljs';
 
 // Listen
 App.Event.on('user:logged-in', (user) => {

package/bin/onejs-build.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+import { spawn } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Path to the python script in the library
+const scriptPath = path.resolve(__dirname, '../scripts/build.py');
+
+// Get arguments passed to the CLI
+const args = process.argv.slice(2);
+
+console.log('🚀 OneJS Build System');
+console.log('Script:', scriptPath);
+
+// Spawn python process
+const pythonProcess = spawn('python3', [scriptPath, ...args], {
+    stdio: 'inherit',
+    env: {
+        ...process.env,
+        // PASS THE PROJECT ROOT (Current Working Directory of the user)
+        ONEJS_PROJECT_ROOT: process.cwd(),
+        // PASS THE LIBRARY ROOT (Where the script lives)
+        ONEJS_LIB_ROOT: path.resolve(__dirname, '..')
+    }
+});
+
+pythonProcess.on('close', (code) => {
+    process.exit(code);
+});

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "onelaraveljs",
-  "version": "1.0.0",
-  "description": "OneLaravel JS Framework Core",
+  "version": "1.1.1",
+  "description": "OneLaravel JS Framework Core & Compiler",
   "main": "index.js",
+  "bin": {
+    "onejs-build": "./bin/onejs-build.js"
+  },
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": ["framework", "laravel", "spa"],
+  "keywords": [
+    "framework",
+    "laravel",
+    "spa",
+    "compiler"
+  ],
   "author": "OneLaravel",
   "license": "MIT"
 }

package/scripts/README-template-compiler.md

@@ -0,0 +1,133 @@
+# Template Compiler
+
+Python compiler để chuyển đổi Blade `@template` và `@useTemplate` thành JavaScript.
+
+## 🎯 Tính năng
+
+- ✅ Chuyển đổi `@template` thành JavaScript function
+- ✅ Chuyển đổi `@useTemplate` thành `this.renderTemplate()`
+- ✅ Hỗ trợ `@params`, `@subscribe`, `@props`
+- ✅ Xóa `@template` blocks khỏi view sau khi compile
+- ✅ Tự động detect array type (indexed/associative)
+- ✅ Context fallback mechanism
+- ✅ Watch mode để tự động compile
+
+## 🚀 Sử dụng
+
+### 1. Compile một lần
+```bash
+python3 scripts/compile-templates.py
+```
+
+### 2. Watch mode (tự động compile khi có thay đổi)
+```bash
+python3 scripts/watch-templates.py
+```
+
+### 3. Compile file cụ thể
+```bash
+python3 scripts/compiler/template_compiler.py input.js output.js
+```
+
+## 📝 Cú pháp Blade
+
+### Template Definition
+```blade
+@template('profile', @params($userState, $isEditModalOpen), @subscribe($userState, $isEditModalOpen))
+    <div class="profile">
+        <h1>{{ $userState['name'] }}</h1>
+        <p>{{ $userState['email'] }}</p>
+        @if($isEditModalOpen)
+            <div class="modal">Edit Mode</div>
+        @endif
+    </div>
+@endtemplate
+```
+
+### Template Usage
+```blade
+@useTemplate('profile', [$userState, $isEditModalOpen])
+@useTemplate('sidebar', ['items' => $items])
+@useTemplate('header')
+```
+
+## 🔄 Kết quả compile
+
+### Template Engine Setup
+```javascript
+const templateEngine = new TemplateEngine(App, View, self, subscribe);
+templateEngine.setTemplates({
+    "profile": function(context, data) {
+        let {userState, isEditModalOpen} = context;
+        const userState = Array.isArray(data) ? data[0] : (data.userState || null);
+        const isEditModalOpen = Array.isArray(data) ? data[1] : (data.isEditModalOpen || null);
+        // Subscribe to: userState, isEditModalOpen
+        return `<div class="profile">
+            <h1>${userState?.name || 'Unknown'}</h1>
+            <p>${userState?.email || 'No email'}</p>
+            <p>Role: ${userState?.role || 'User'}</p>
+            <p>Modal open: ${isEditModalOpen ? 'Yes' : 'No'}</p>
+        </div>`;
+    }
+});
+self.setTemplateEngine(templateEngine);
+```
+
+### Template Usage
+```javascript
+this.renderTemplate('profile', [userState, isEditModalOpen])
+this.renderTemplate('sidebar', ['items' => items])
+this.renderTemplate('header')
+```
+
+## 🛠️ Cấu trúc file
+
+```
+scripts/
+├── compiler/
+│   └── template_compiler.py    # Main compiler
+├── compile-templates.py        # One-time compile script
+├── watch-templates.py          # Watch mode script
+└── README-template-compiler.md # Documentation
+```
+
+## 📋 Requirements
+
+- Python 3.6+
+- No external dependencies
+
+## 🔧 Cấu hình
+
+### Input/Output Directories
+- **Input**: `resources/js/app/views/`
+- **Output**: `public/build/views/`
+
+### Supported File Types
+- `.js` files only
+
+## 🐛 Troubleshooting
+
+### Lỗi thường gặp
+
+1. **Template không được compile**
+   - Kiểm tra cú pháp Blade
+   - Đảm bảo `@template` và `@endtemplate` đúng
+
+2. **Variable không hiển thị**
+   - Kiểm tra `@params` declaration
+   - Đảm bảo variable được pass vào `@useTemplate`
+
+3. **Array type detection sai**
+   - Compiler tự động detect array type
+   - Kiểm tra data format khi pass vào template
+
+### Debug
+
+Để debug, kiểm tra file output trong `public/build/views/`:
+```bash
+cat public/build/views/YourView.js
+```
+
+## 📚 Examples
+
+Xem file `resources/js/app/views/ExampleView.js` để tham khảo cú pháp và cách sử dụng.

package/scripts/README.md

@@ -0,0 +1,61 @@
+# Scripts Directory
+
+Thư mục này chứa các script Python để build và compile Blade templates.
+
+## Cấu trúc
+
+```
+scripts/
+├── build.py              # Script chính để build Blade templates
+├── compile.py            # Wrapper cho Blade compiler
+├── dev.js               # Development server với hot reload
+└── compiler/            # Thư mục chứa compiler modules
+    ├── __init__.py
+    ├── config.py        # Configuration cho compiler
+    ├── compiler.config.json  # File config JSON
+    └── ...              # Các module compiler khác
+```
+
+## Sử dụng
+
+### Từ thư mục gốc:
+```bash
+npm run build:templates  # Build Blade templates
+npm run compile         # Build templates + webpack
+npm run dev:blade       # Development server
+```
+
+### Từ thư mục scripts:
+```bash
+cd scripts
+python3 build.py        # Build Blade templates
+```
+
+## Configuration
+
+File `compiler/compiler.config.json` chứa cấu hình đường dẫn:
+
+- `views_input`: Thư mục chứa Blade templates (`resources/views`)
+- `js_input`: Thư mục chứa JavaScript modules (`resources/js/app`)
+- `build_output`: Thư mục build tạm thời (`resources/js/build`)
+- `app_output`: Thư mục output cuối cùng (`public/static/app`)
+
+## Development
+
+Script `dev.js` cung cấp development server với:
+- Hot reload khi file Blade templates thay đổi
+- Auto-rebuild khi có thay đổi
+- Vite dev server cho frontend
+
+## Notes
+
+- Tất cả đường dẫn được tính từ project root
+- Compiler tự động detect và build tất cả `.blade.php` files
+- Output được copy vào `resources/js/app/views/templates.js`
+
+
+
+
+
+
+