onelaraveljs 1.0.0 → 1.1.3

package/scripts/dev-context.js

@@ -0,0 +1,311 @@
+#!/usr/bin/env node
+
+/**
+ * Development Script with Context Support (web/admin)
+ * - Watch blade files and JS core files (auto-detect from build.config.json)
+ * - Auto-compile templates when changed
+ * - Auto-rebuild webpack when JS changed
+ * - Run PHP artisan serve
+ */
+
+import { spawn } from 'child_process';
+import { watch } from 'fs';
+import { readFileSync, writeFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { WebSocketServer } from 'ws';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get context from command line argument
+const context = process.argv[2] || 'web'; // Default to 'web'
+
+if (!['web', 'admin'].includes(context)) {
+    console.error('❌ Invalid context. Use: web or admin');
+    process.exit(1);
+}
+
+// Load build config
+const buildConfigPath = path.resolve(__dirname, '../build.config.json');
+const buildConfig = JSON.parse(readFileSync(buildConfigPath, 'utf-8'));
+const contextConfig = buildConfig.contexts[context];
+
+if (!contextConfig) {
+    console.error(`❌ Context "${context}" not found in build.config.json`);
+    process.exit(1);
+}
+
+const config = {
+    context: context,
+    watchPaths: {
+        blade: contextConfig.sources, // Array of blade source paths from config
+        jsCore: 'resources/js/onejs', // Watch entire onejs directory
+        jsViewsExclude: 'resources/js/onejs/views', // Exclude views directory
+        compiler: 'scripts/compiler'
+    },
+    buildCommand: `npm run build:${context}`,
+    phpServeCommand: 'php artisan serve',
+    phpPort: context === 'admin' ? 8001 : 8000,
+    wsPort: context === 'admin' ? 3301 : 3300
+};
+
+class ContextDevServer {
+    constructor() {
+        this.processes = {
+            phpServe: null
+        };
+        this.wss = null;
+        this.isBuilding = false;
+        this.debounceTimer = null;
+        this.debounceDelay = 300; // ms
+    }
+
+    async start() {
+        console.log(`🚀 Starting Development Server for [${config.context.toUpperCase()}] context...\n`);
+        
+        // Initial build (templates + webpack)
+        await this.runBuild();
+        
+        // Start PHP artisan serve
+        this.startPhpServe();
+        
+        // Start WebSocket server for auto-reload
+        this.startWebSocketServer();
+        
+        // Create reload script file
+        this.createReloadScript();
+        
+        // Start file watcher for blade and compiler files
+        this.startWatcher();
+        
+        console.log('\n✅ Development server started!');
+        console.log(`📦 Context: ${config.context.toUpperCase()}`);
+        console.log('📝 Watching:');
+        console.log(`   - Blade files: ${config.watchPaths.blade.join(', ')}`);
+        console.log(`   - JS Core: ${config.watchPaths.jsCore} (excluding views)`);
+        console.log(`   - Compiler: ${config.watchPaths.compiler}`);
+        console.log(`🌐 Laravel Server: http://localhost:${config.phpPort}`);
+        console.log(`🔄 Auto-reload: Active (add script to your layout)`);
+        console.log(`⚡ Auto-rebuild: npm run build:${config.context}`);
+        console.log('\n💡 Add this to your blade layout:');
+        console.log(`   <script src="/reload-dev.js"></script>`);
+        console.log('\n💡 Press Ctrl+C to stop\n');
+    }
+
+    async runBuild() {
+        if (this.isBuilding) {
+            console.log('⏳ Build already in progress, skipping...');
+            return;
+        }
+        
+        this.isBuilding = true;
+        console.log(`🔨 Building [${config.context}] (templates + webpack)...`);
+        
+        return new Promise((resolve, reject) => {
+            const build = spawn('sh', ['-c', config.buildCommand], { 
+                stdio: 'inherit',
+                cwd: path.resolve(__dirname, '..')
+            });
+            
+            build.on('close', (code) => {
+                this.isBuilding = false;
+                if (code === 0) {
+                    console.log(`✅ Build completed for [${config.context}]`);
+                    // Trigger browser reload via WebSocket
+                    this.notifyReload();
+                    resolve();
+                } else {
+                    console.error(`❌ Build failed with code ${code}\n`);
+                    reject(new Error(`Build failed with code ${code}`));
+                }
+            });
+            
+            build.on('error', (err) => {
+                this.isBuilding = false;
+                console.error('❌ Failed to start build process:', err);
+                reject(err);
+            });
+        });
+    }
+
+    startWebSocketServer() {
+        console.log(`🔄 Starting WebSocket server on port ${config.wsPort}...\n`);
+        
+        this.wss = new WebSocketServer({ port: config.wsPort });
+        
+        this.wss.on('connection', (ws) => {
+            ws.on('error', console.error);
+        });
+    }
+
+    notifyReload() {
+        if (this.wss) {
+            console.log('🔄 Reloading browser...\n');
+            this.wss.clients.forEach((client) => {
+                if (client.readyState === 1) { // OPEN
+                    client.send('reload');
+                }
+            });
+        }
+    }
+
+    createReloadScript() {
+        const scriptContent = `
+(function() {
+    if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
+        return; // Only run on local development
+    }
+    
+    const ws = new WebSocket('ws://localhost:${config.wsPort}');
+    
+    ws.onmessage = function(event) {
+        if (event.data === 'reload') {
+            console.log('[DEV] Reloading page...');
+            window.location.reload();
+        }
+    };
+    
+    ws.onerror = function() {
+        console.log('[DEV] WebSocket connection failed');
+    };
+    
+    ws.onclose = function() {
+        // Reconnect after 1 second
+        setTimeout(function() {
+            window.location.reload();
+        }, 1000);
+    };
+})();
+`;
+        
+        const publicPath = path.resolve(__dirname, '../public/reload-dev.js');
+        writeFileSync(publicPath, scriptContent, 'utf-8');
+        console.log(`✅ Created reload script at public/reload-dev.js\n`);
+    }
+
+    startPhpServe() {
+        console.log(`🐘 Starting PHP server on port ${config.phpPort}...`);
+        
+        this.processes.phpServe = spawn('php', ['artisan', 'serve', `--port=${config.phpPort}`], {
+            stdio: 'inherit',
+            cwd: path.resolve(__dirname, '..')
+        });
+
+        this.processes.phpServe.on('error', (err) => {
+            console.error('❌ PHP server error:', err);
+        });
+
+        this.processes.phpServe.on('close', (code) => {
+            if (code !== 0 && code !== null) {
+                console.error(`❌ PHP server exited with code ${code}`);
+            }
+        });
+    }
+
+    startWatcher() {
+        // Watch blade files (multiple source directories from config)
+        config.watchPaths.blade.forEach(bladePath => {
+            console.log(`👀 Watching blade files in: ${bladePath}`);
+            watch(bladePath, { recursive: true }, (eventType, filename) => {
+                if (filename && filename.endsWith('.blade.php')) {
+                    this.handleFileChange('blade', path.join(bladePath, filename));
+                }
+            });
+        });
+
+        // Watch JS core files (entire onejs directory, excluding views)
+        console.log(`👀 Watching JS core in: ${config.watchPaths.jsCore} (excluding views)`);
+        watch(config.watchPaths.jsCore, { recursive: true }, (eventType, filename) => {
+            if (filename && filename.endsWith('.js')) {
+                const fullPath = path.join(config.watchPaths.jsCore, filename);
+                // Skip if file is in views directory
+                if (!fullPath.includes(path.sep + 'views' + path.sep) && !fullPath.endsWith(path.sep + 'views')) {
+                    this.handleFileChange('js-core', filename);
+                }
+            }
+        });
+
+        // Watch compiler files
+        console.log(`👀 Watching compiler in: ${config.watchPaths.compiler}`);
+        watch(config.watchPaths.compiler, { recursive: true }, (eventType, filename) => {
+            if (filename && (filename.endsWith('.py') || filename.endsWith('.js'))) {
+                this.handleFileChange('compiler', filename);
+            }
+        });
+    }
+
+    handleFileChange(type, filename) {
+        // Clear existing timer
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+
+        // Debounce to avoid multiple rapid builds
+        this.debounceTimer = setTimeout(() => {
+            console.log(`\n📝 [${type.toUpperCase()}] File changed: ${filename}`);
+            
+            // Rebuild everything (templates + webpack) for any changes
+            this.runBuild().catch(err => {
+                console.error('Build error:', err);
+            });
+        }, this.debounceDelay);
+    }
+
+    stop() {
+        console.log('\n🛑 Shutting down development server...');
+        
+        // Stop WebSocket Server
+        if (this.wss) {
+            console.log('   Stopping WebSocket server...');
+            this.wss.close();
+        }
+        
+        // Kill all processes
+        Object.keys(this.processes).forEach(key => {
+            const proc = this.processes[key];
+            if (proc && !proc.killed) {
+                console.log(`   Stopping ${key}...`);
+                proc.kill('SIGTERM');
+                
+                // Force kill after 2 seconds if not terminated
+                setTimeout(() => {
+                    if (!proc.killed) {
+                        proc.kill('SIGKILL');
+                    }
+                }, 2000);
+            }
+        });
+
+        console.log('✅ Development server stopped');
+        process.exit(0);
+    }
+}
+
+// Handle process termination
+process.on('SIGINT', () => {
+    if (devServer) {
+        devServer.stop();
+    }
+});
+
+process.on('SIGTERM', () => {
+    if (devServer) {
+        devServer.stop();
+    }
+});
+
+// Catch unhandled errors
+process.on('uncaughtException', (err) => {
+    console.error('❌ Uncaught exception:', err);
+    if (devServer) {
+        devServer.stop();
+    }
+});
+
+// Start development server
+const devServer = new ContextDevServer();
+devServer.start().catch(err => {
+    console.error('❌ Failed to start dev server:', err);
+    process.exit(1);
+});

package/scripts/dev.js

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+
+/**
+ * Development Script for Blade Compiler
+ * Provides development workflow with hot reload
+ */
+
+import { spawn } from 'child_process';
+import { watch } from 'fs';
+import path from 'path';
+
+const config = {
+    watchPaths: [
+        'resources/views',
+        'resources/js/app',
+        'scripts/compiler'
+    ],
+    buildCommand: 'cd scripts && python3 build.py',
+    viteCommand: 'npm run dev'
+};
+
+class DevServer {
+    constructor() {
+        this.buildProcess = null;
+        this.viteProcess = null;
+        this.isBuilding = false;
+    }
+
+    async start() {
+        console.log('🚀 Starting Blade Compiler Development Server...\n');
+        
+        // Initial build
+        await this.runBuild();
+        
+        // Start Vite dev server
+        this.startVite();
+        
+        // Start file watcher
+        this.startWatcher();
+        
+        console.log('✅ Development server started!');
+        console.log('📝 Watching for changes in:', config.watchPaths.join(', '));
+        console.log('🌐 Vite dev server: http://localhost:5173');
+        console.log('⚡ Blade compiler: Auto-rebuild on file changes\n');
+    }
+
+    async runBuild() {
+        if (this.isBuilding) return;
+        
+        this.isBuilding = true;
+        console.log('🔨 Building Blade templates...');
+        
+        return new Promise((resolve, reject) => {
+            const build = spawn('sh', ['-c', 'cd scripts && python3 build.py'], { 
+                stdio: 'inherit',
+                cwd: process.cwd()
+            });
+            
+            build.on('close', (code) => {
+                this.isBuilding = false;
+                if (code === 0) {
+                    console.log('✅ Build completed successfully\n');
+                    resolve();
+                } else {
+                    console.log('❌ Build failed\n');
+                    reject(new Error(`Build failed with code ${code}`));
+                }
+            });
+        });
+    }
+
+    startVite() {
+        this.viteProcess = spawn('npm', ['run', 'dev'], {
+            stdio: 'inherit',
+            cwd: process.cwd()
+        });
+    }
+
+    startWatcher() {
+        config.watchPaths.forEach(watchPath => {
+            watch(watchPath, { recursive: true }, (eventType, filename) => {
+                if (filename && (filename.endsWith('.blade.php') || filename.endsWith('.js'))) {
+                    console.log(`📝 File changed: ${filename}`);
+                    this.runBuild().catch(console.error);
+                }
+            });
+        });
+    }
+
+    stop() {
+        if (this.buildProcess) {
+            this.buildProcess.kill();
+        }
+        if (this.viteProcess) {
+            this.viteProcess.kill();
+        }
+        console.log('🛑 Development server stopped');
+    }
+}
+
+// Handle process termination
+process.on('SIGINT', () => {
+    console.log('\n🛑 Shutting down development server...');
+    process.exit(0);
+});
+
+// Start development server
+const devServer = new DevServer();
+devServer.start().catch(console.error);

package/scripts/generate-assets-order.js

@@ -0,0 +1,208 @@
+#!/usr/bin/env node
+
+/**
+ * Generate assets loading order for HTML
+ * Reads webpack build output and creates ordered script tags
+ * Supports context-based builds (web, admin, etc.)
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Load build.config.json from project root
+const projectRoot = process.env.ONEJS_PROJECT_ROOT || process.cwd();
+const configPath = path.join(projectRoot, 'build.config.json');
+
+try {
+    var buildConfig = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+} catch (e) {
+    console.error(`Error loading build.config.json from ${configPath}:`, e.message);
+    process.exit(1);
+}
+
+// Get context from environment variable
+const buildContext = process.env.BUILD_CONTEXT || 'web';
+
+// Determine static path based on context
+const STATIC_PATH = buildConfig.contexts[buildContext] 
+    ? path.join(projectRoot, path.dirname(buildConfig.contexts[buildContext].dist.bundle))
+    : path.join(projectRoot, 'public/static/app');
+
+// Determine base URL path for assets
+const BASE_URL = buildConfig.contexts[buildContext]
+    ? `/static/${buildContext}/js/`
+    : '/static/app/';
+
+const OUTPUT_FILE = path.join(projectRoot, 'resources/views/partials/assets-scripts.blade.php');
+
+function getAssetsByCategory() {
+    const assets = {
+        runtime: [],
+        framework: [],
+        main: [],
+        other: []
+    };
+
+    try {
+        if (!fs.existsSync(STATIC_PATH)) {
+            console.warn(`⚠️  Static path does not exist: ${STATIC_PATH}`);
+            return assets;
+        }
+
+        const files = fs.readdirSync(STATIC_PATH);
+        
+        files.forEach(file => {
+            if (!file.endsWith('.js') || file.endsWith('.map')) return;
+            
+            // Runtime chunk (must load first)
+            if (file.startsWith('runtime')) {
+                assets.runtime.push(file);
+            }
+            // Framework chunks (vendor, core libraries)
+            else if (file.startsWith('framework-')) {
+                assets.framework.push(file);
+            }
+            // Main chunks (application code)
+            else if (file.startsWith('main')) {
+                assets.main.push(file);
+            }
+            // Legacy or other chunks
+            else {
+                assets.other.push(file);
+            }
+        });
+
+        // Sort by filename to ensure consistent order
+        Object.keys(assets).forEach(key => {
+            assets[key].sort();
+        });
+
+        return assets;
+    } catch (error) {
+        console.error('Error reading assets:', error);
+        return assets;
+    }
+}
+
+function generateBladeTemplate(assets) {
+    const lines = [
+        '{{-- Auto-generated webpack assets --}}',
+        `{{-- Context: ${buildContext} --}}`,
+        '{{-- Generated at: ' + new Date().toISOString() + ' --}}',
+        '{{-- Load order: runtime → framework → main --}}',
+        ''
+    ];
+
+    // Runtime chunk (must load first)
+    if (assets.runtime.length > 0) {
+        lines.push('{{-- Runtime chunk (webpack runtime) --}}');
+        assets.runtime.forEach(file => {
+            lines.push(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+        lines.push('');
+    }
+
+    // Framework chunks (vendor dependencies)
+    if (assets.framework.length > 0) {
+        lines.push('{{-- Framework chunks (vendor dependencies) --}}');
+        assets.framework.forEach(file => {
+            lines.push(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+        lines.push('');
+    }
+
+    // Main application chunks
+    if (assets.main.length > 0) {
+        lines.push('{{-- Main application chunks --}}');
+        assets.main.forEach(file => {
+            lines.push(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+    }
+
+    // Other chunks (if any)
+    if (assets.other.length > 0) {
+        lines.push('');
+        lines.push('{{-- Other chunks --}}');
+        assets.other.forEach(file => {
+            lines.push(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+    }
+
+    return lines.join('\n');
+}
+
+function generateHTMLTemplate(assets) {
+    console.log('\n📋 **HTML Script Tags (in loading order):**\n');
+    
+    if (assets.runtime.length > 0) {
+        console.log('<!-- Runtime chunk (webpack runtime) -->');
+        assets.runtime.forEach(file => {
+            console.log(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+    }
+
+    if (assets.framework.length > 0) {
+        console.log('<!-- Framework chunks -->');
+        assets.framework.forEach(file => {
+            console.log(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+    }
+
+    if (assets.main.length > 0) {
+        console.log('<!-- Main chunks -->');
+        assets.main.forEach(file => {
+            console.log(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+    }
+
+    if (assets.other.length > 0) {
+        console.log('<!-- Other chunks -->');
+        assets.other.forEach(file => {
+            console.log(`<script src="${BASE_URL}${file}" defer></script>`);
+        });
+    }
+
+    console.log('\n💡 **Usage in your layout:**');    console.log('');
+}
+
+function main() {
+    console.log('🔍 Analyzing webpack assets...');
+    
+    const assets = getAssetsByCategory();
+    
+    const totalFiles = Object.values(assets).flat().length;
+    
+    console.log('📊 **Assets Summary:**');
+    console.log(`- Runtime chunks: ${assets.runtime.length}`);
+    console.log(`- Framework chunks: ${assets.framework.length}`);
+    console.log(`- Main chunks: ${assets.main.length}`);
+    console.log(`- Other chunks: ${assets.other.length}`);
+    console.log(`- Total JS files: ${totalFiles}`);
+
+    // Generate Blade template
+    const bladeContent = generateBladeTemplate(assets);
+    
+    try {
+        fs.writeFileSync(OUTPUT_FILE, bladeContent);
+        console.log(`✅ Generated Blade template: ${OUTPUT_FILE}`);
+    } catch (error) {
+        console.error('❌ Error writing Blade template:', error);
+    }
+
+    // Show HTML version
+    generateHTMLTemplate(assets);
+    
+    console.log('💡 **Usage in your layout:**');
+    console.log('@include("partials.assets-scripts")');
+}
+
+// Run if this is the main module
+if (import.meta.url === `file://${process.argv[1]}`) {
+    main();
+}
+
+export { getAssetsByCategory, generateBladeTemplate };