@vixoniccom/module-packager 2.10.2-test.5 → 2.10.2-test.7

package/dist/electron.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+import { app, BrowserWindow } from 'electron';
+import remoteMain from '@electron/remote/main/index.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import commandLineArgs from 'command-line-args';
+import fs from 'fs';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const optionDefinitions = [
+    { name: 'externals', type: String, defaultValue: [], multiple: true },
+    { name: 'src', type: String, defaultValue: path.join(__dirname, 'src') },
+    { name: 'build', type: String, defaultValue: path.join(__dirname, 'build') },
+    { name: 'config', type: String, defaultValue: './webpack.config.js' },
+    { name: 'port', type: Number, defaultValue: 8080 },
+    { name: 'mode', type: String, defaultValue: 'run' }
+];
+const options = commandLineArgs(optionDefinitions);
+console.log('🚀 [ELECTRON] options:', options);
+if (options.mode === 'watch') {
+    (await import('electron-debug')).default({ showDevTools: true });
+}
+remoteMain.initialize();
+let mainWindow = null;
+function createWindow() {
+    console.log('[ELECTRON] Creating BrowserWindow…');
+    mainWindow = new BrowserWindow({
+        show: false,
+        x: 100,
+        y: 100,
+        width: 1024,
+        height: 768,
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js'),
+            nodeIntegrationInSubFrames: true,
+            nodeIntegration: true,
+            contextIsolation: false,
+            webSecurity: false,
+            webviewTag: true
+        }
+    });
+    remoteMain.enable(mainWindow.webContents);
+    const devUrl = `http://localhost:${options.port}/index.html`;
+    const fileUrl = `file://${path.join(options.build, 'index.html')}`;
+    console.log('[ELECTRON] build dir:', options.build);
+    console.log('[ELECTRON] index.html exists?', fs.existsSync(path.join(options.build, 'index.html')));
+    const url = options.mode === 'watch' ? devUrl : fileUrl;
+    console.log('[ELECTRON] Loading URL:', url);
+    console.log('[ELECTRON] Loading URL:', url);
+    mainWindow.loadURL(url);
+    mainWindow.webContents.once('did-finish-load', () => {
+        console.log('[ELECTRON] did-finish-load → show()');
+        mainWindow?.show();
+        mainWindow?.webContents.send('init', options);
+    });
+    mainWindow.on('closed', () => (mainWindow = null));
+    // mainWindow.webContents.openDevTools({ mode: 'detach' });
+}
+app.whenReady().then(() => {
+    console.log('[ELECTRON] App is ready');
+    createWindow();
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+        }
+    });
+});
+app.on('window-all-closed', () => app.quit());

package/dist/main.js

@@ -1,6 +1,21 @@
 #!/usr/bin/env node
 'use strict';
-const commandLineArgs = require('command-line-args');
+import commandLineArgs from 'command-line-args';
+import path from 'path';
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import { spawn, exec } from 'child_process';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+import archiver from 'archiver';
+import clc from 'cli-color';
+import { Configuration } from '@vixoniccom/modules';
+import tsNode from 'ts-node';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const electronPath = path.join(__dirname, 'electron.js');
+// import pjson from '../package.json' assert { type: 'json' }
+// console.log(`VIXONIC PACKAGER: Version ${pjson.version}`)
 const optionDefinitions = [
     { name: 'externals', type: String, defaultValue: [], multiple: true },
     { name: 'target', type: String, defaultValue: 'web' },
@@ -14,22 +29,11 @@ const optionDefinitions = [
     { name: 'tsOverride', type: Boolean }
 ];
 const options = commandLineArgs(optionDefinitions);
-const path = require('path');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const { exec } = require('child_process');
-const electronPath = path.resolve(__dirname, '..', 'electron.js');
-const fs = require('fs');
-const archiver = require('archiver');
-const clc = require('cli-color');
-const pjson = require(path.resolve(__dirname, '../package.json'));
-console.log(`VIXONIC PACKAGER: Version ${pjson.version}`);
 if (options.target !== 'electron-renderer' && options.externals.length > 0) {
     throw new Error(`Can't use external dependencies if target is not electron-renderer.`);
 }
 if (options.mode === 'build') {
     pack(() => {
-        // Install externals only if not web.
         if (options.target === 'electron-renderer') {
             installExternals(() => {
                 zip();
@@ -41,6 +45,7 @@ if (options.mode === 'build') {
     });
 }
 else if (options.mode === 'watch') {
+    console.log('[DEBUG] Entrando a watch()');
     watch();
 }
 else if (options.mode === 'run') {
@@ -52,50 +57,75 @@ else if (options.mode === 'generate-configuration') {
 else if (options.mode === 'validate-configuration') {
     validateConfiguration();
 }
-function pack(callback) {
+function runElectron() {
+    const electronProcess = spawn('npx', [
+        'electron',
+        electronPath,
+        '--src', path.resolve(options.src),
+        '--build', path.resolve(options.build),
+        '--port', `${options.port}`,
+        '--mode', options.mode,
+        '--config', options.config,
+        '--externals', options.externals.join(',')
+    ], {
+        cwd: __dirname,
+        env: { ...process.env, NODE_ENV: 'development' },
+        stdio: 'inherit'
+    });
+    electronProcess.on('close', (code) => {
+        console.log(`Electron process exited with code ${code}`);
+        if (code !== 0) {
+            console.error('Electron process exited with an error.');
+        }
+    });
+}
+async function pack(callback) {
     console.log(clc.blue('Building module...'));
     validateConfiguration();
     const configPath = path.resolve(__dirname, '../', options.config);
-    webpack(require(options.config)(options), function (err, stats) {
-        if (err) {
-            // Imprime el error como string y con detalles si existen
-            console.error('Build error:', err);
-            if (err.details) {
-                console.error('Details:', err.details);
-            }
-            if (err.errors) {
-                console.error('TS Errors:', JSON.stringify(err.errors, null, 2));
-            }
-            throw err;
-        }
-        else {
-            if (stats.hasErrors()) {
-                // Imprime los errores de Webpack de forma legible
-                const info = stats.toJson('errors-only');
-                console.error(clc.red('Webpack errors:'));
-                if (info.errors && info.errors.length) {
-                    info.errors.forEach((e) => {
-                        console.error(clc.red(typeof e === 'object' ? JSON.stringify(e, null, 2) : e));
-                    });
+    try {
+        const webpackConfig = (await import(configPath)).default(options);
+        webpack(webpackConfig, function (err, stats) {
+            if (err) {
+                console.error('Build error:', err);
+                if (err.details) {
+                    console.error('Details:', err.details);
                 }
-                else {
-                    console.error(clc.red(JSON.stringify(info, null, 2)));
+                if (err.errors) {
+                    console.error('TS Errors:', JSON.stringify(err.errors, null, 2));
                 }
-                callback && callback(stats);
+                throw err;
             }
             else {
-                console.log(clc.green('Build OK.'));
-                callback && callback(null);
+                if (stats.hasErrors()) {
+                    const info = stats.toJson('errors-only');
+                    console.error(clc.red('Webpack errors:'));
+                    if (info.errors && info.errors.length) {
+                        info.errors.forEach((e) => {
+                            console.error(clc.red(typeof e === 'object' ? JSON.stringify(e, null, 2) : e));
+                        });
+                    }
+                    else {
+                        console.error(clc.red(JSON.stringify(info, null, 2)));
+                    }
+                    callback && callback(stats);
+                }
+                else {
+                    console.log(clc.green('Build OK.'));
+                    callback && callback(null);
+                }
             }
-        }
-    });
+        });
+    }
+    catch (e) {
+        console.error(clc.red('Failed to load webpack config'));
+        throw e;
+    }
 }
 function installExternals(callback) {
-    // Get external versions.
     let externals = options.externals.map((x) => {
-        return `${x}@${JSON.parse(fs.readFileSync(path.resolve(options.src, '..', 'node_modules', x, 'package.json'))).version}`;
+        return `${x}@${JSON.parse(fs.readFileSync(path.resolve(options.src, '..', 'node_modules', x, 'package.json'), 'utf8')).version}`;
     });
-    // Install external versions.
     if (externals.length) {
         externals = externals.join(' ');
         console.log(clc.blue(`Installing externals ${externals}...`));
@@ -127,37 +157,28 @@ function zip() {
     });
     clc.move(-2, 0);
 }
-function watch() {
-    const devServerOptions = {
-        static: path.join(__dirname, options.src, '..'),
-        port: options.port
-    };
-    let webpackConfigPath;
-    try {
-        webpackConfigPath = path.resolve(process.cwd(), options.config);
-        require.resolve(webpackConfigPath);
-    }
-    catch (e) {
-        webpackConfigPath = path.resolve(__dirname, options.config);
-    }
-    const compiler = webpack(require(webpackConfigPath)(options));
-    const server = new WebpackDevServer(devServerOptions, compiler);
-    server.start().then(() => {
-        console.log(`Dev server is listening on port ${options.port}`);
-    });
-    var environment = process.env;
-    environment.NODE_ENV = 'development';
-    console.log(`build ${path.resolve(options.build)}`);
-    console.log('[DEBUG] Ejecutando Electron con comando:');
-    console.log(`npx electron ${electronPath} --src ${path.resolve(options.src)} --build ${path.resolve(options.build)} --port ${options.port} --mode ${options.mode} --config ${options.config} --externals ${options.externals}`);
-    exec(`npx electron ${electronPath} --src ${path.resolve(options.src)} --build ${path.resolve(options.build)} --port ${options.port} --mode ${options.mode} --config ${options.config} --externals ${options.externals}`, {
-        cwd: __dirname,
-        env: environment
-    }, (err) => {
-        if (err)
-            throw err;
-        process.exit();
-    });
+async function watch() {
+    console.log('[VMP] ▸ starting dev-server & electron in watch mode…');
+    const cfgPath = path.resolve(__dirname, '..', 'webpack.config.js');
+    const webpackConfigFactory = (await import(cfgPath)).default;
+    console.log("🚀 ~ watch ~ webpackConfigFactory:", webpackConfigFactory);
+    const compiler = webpack(webpackConfigFactory(options));
+    const server = new WebpackDevServer({ static: path.join(__dirname, options.src, '..'), port: options.port }, compiler);
+    await server.start();
+    console.log(`[VMP] ▸ dev-server listening on http://localhost:${options.port}`);
+    const cmd = [
+        'npx', 'electron', electronPath,
+        '--src', path.resolve(options.src),
+        '--build', path.resolve(options.build),
+        '--port', String(options.port),
+        '--mode', 'watch',
+        '--config', options.config,
+        '--externals', options.externals.join(',')
+    ].join(' ');
+    console.log(`[VMP] ▸ ${cmd}`);
+    const child = exec(cmd, { cwd: __dirname, env: { ...process.env, NODE_ENV: 'development' } });
+    child.stdout?.pipe(process.stdout);
+    child.stderr?.pipe(process.stderr);
 }
 function run() {
     pack((err) => {
@@ -165,15 +186,19 @@ function run() {
             throw err;
         }
         else {
-            exec(`npx electron ${electronPath}  --src ${path.resolve(options.src)} --build ${path.resolve(options.build)} --port ${options.port} --mode ${options.mode} --config ${options.config} --externals ${options.externals}`, {
-                cwd: __dirname
-            });
+            runElectron();
         }
     });
 }
 function loadConfiguration() {
-    require('@vixoniccom/modules');
-    require('ts-node').register({ compilerOptions: { moduleResolution: 'node', module: 'commonjs', target: 'es2015', checkJs: false } });
+    tsNode.register({
+        compilerOptions: {
+            moduleResolution: 'node',
+            module: 'commonjs',
+            target: 'es2015',
+            checkJs: false
+        }
+    });
     return require(path.resolve(options.confDefinition, 'index.ts')).configuration;
 }
 function generateConfiguration() {
@@ -190,11 +215,12 @@ function generateConfiguration() {
 }
 function validateConfiguration() {
     try {
-        const { Configuration } = require('@vixoniccom/modules');
-        const json = require(path.resolve(options.src, '../', 'configuration.json'));
+        const jsonPath = path.resolve(options.src, '../', 'configuration.json');
+        const json = JSON.parse(fs.readFileSync(jsonPath, 'utf8')); // Leer y parsear el archivo JSON
         const conf = Configuration.fromJSON(json);
         if (conf.durationFormula) {
-            const values = require(path.resolve(options.src, 'test', 'parameters.json'));
+            const valuesPath = path.resolve(options.src, 'test', 'parameters.json');
+            const values = JSON.parse(fs.readFileSync(valuesPath, 'utf8')); // Leer y parsear otro archivo JSON
             console.log('Validate duration');
             console.log('Duration on undefined:', conf.getDuration({}), 'seconds');
             console.log('Duration:', conf.getDuration(values.parameters), 'seconds');

package/dist/webpack.config.js

@@ -1,112 +1,144 @@
-const path = require('path')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
-
-module.exports = (options) => {
-  const isDev = options.mode === 'watch'
-  const buildPath = path.resolve(options.build)
-  const controllerHtmlPath = path.resolve(options.src, 'index.html')
-  const controllerStaticPath = path.resolve(path.dirname(controllerHtmlPath), '../static')
-  const controllerFontsPath = path.resolve(path.dirname(controllerHtmlPath), '../fonts')
-
-  return {
-    mode: isDev ? 'development' : 'production',
-    target: 'electron-renderer',
-    entry: path.resolve(options.src, 'main'),
-    output: {
-      path: buildPath,
-      filename: '[name].bundle.js',
-      publicPath: '/'
-    },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js', '.jsx', '.mjs'],
-      mainFields: ['module', 'browser', 'main'],
-      fullySpecified: false,
-      modules: [
-        'node_modules',
-        path.resolve(__dirname, '../../node_modules') 
-      ]
-    },
-    module: {
-      rules: [
-        {
-          test: /\.(ts|tsx|js|jsx)$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader',
-            options: {
-              presets: [
-                '@babel/preset-env',
-                '@babel/preset-react',
-                '@babel/preset-typescript'
-              ]
-            }
-          }
+import path from 'path';
+import { fileURLToPath } from 'url';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export default (env = {}, argv = {}) => {
+    const options = {
+        src: env.src ?? './src',
+        build: env.build ?? './build',
+        port: env.port ?? 8080,
+        mode: argv.mode ?? 'production',
+    };
+    const isDev = options.mode === 'watch';
+    const buildPath = path.resolve(options.build);
+    const controllerHtmlPath = path.resolve(options.src, 'index.html');
+    console.log("🚀 ~ controllerHtmlPath:", controllerHtmlPath);
+    const controllerStaticPath = path.resolve(path.dirname(controllerHtmlPath), '../static');
+    const controllerFontsPath = path.resolve(path.dirname(controllerHtmlPath), '../fonts');
+    return {
+        mode: isDev ? 'development' : 'production',
+        target: 'electron-renderer',
+        entry: path.resolve(options.src, 'main.ts'),
+        output: {
+            path: buildPath,
+            filename: '[name].bundle.js',
+            publicPath: '/'
         },
-        {
-          test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
-          exclude: /node_modules/
+        externals: {
+            '@vixoniccom/module-controller': 'commonjs @vixoniccom/module-controller',
+            webpack: 'commonjs webpack',
+            'terser-webpack-plugin': 'commonjs terser-webpack-plugin',
+            esbuild: 'commonjs esbuild',
+            '@swc/core': 'commonjs @swc/core',
+            '@swc/wasm': 'commonjs @swc/wasm'
         },
-        {
-          test: /\.(png|jpe?g|gif|svg|woff2?|ttf|eot)$/,
-          type: 'asset/resource',
-          generator: {
-            filename: 'assets/[hash][ext][query]'
-          }
+        resolve: {
+            extensions: ['.tsx', '.ts', '.js', '.jsx', '.mjs'],
+            mainFields: ['module', 'browser', 'main'],
+            fullySpecified: false,
+            modules: [
+                'node_modules',
+                path.resolve(__dirname, '../../node_modules')
+            ]
         },
-        {
-          test: /\.html$/,
-          use: {
-            loader: 'html-loader',
-            options: {
-              sources: false,
-            }
-          }
-        }
-      ]
-    },
-    plugins: [
-      new CleanWebpackPlugin(),
-      new HtmlWebpackPlugin({
-        template: controllerHtmlPath,
-        inject: 'body'
-      }),
-      new CopyWebpackPlugin({
-        patterns: [
-          { from: controllerStaticPath, to: 'static', noErrorOnMissing: true },
-          { from: controllerFontsPath, to: 'fonts', noErrorOnMissing: true }
-        ]
-      })
-    ],
-    optimization: isDev ? undefined : {
-      minimize: true,
-      minimizer: [
-        new TerserPlugin({
-          extractComments: false,
-          terserOptions: {
-            format: {
-              comments: false
+        module: {
+            rules: [
+                {
+                    test: /\.(ts|tsx|js|jsx)$/,
+                    exclude: /node_modules/,
+                    use: {
+                        loader: 'ts-loader',
+                        options: {
+                            transpileOnly: true
+                        }
+                    }
+                },
+                {
+                    test: /\.s[ac]ss$/,
+                    use: ['style-loader', 'css-loader', 'sass-loader']
+                },
+                {
+                    test: /\.jsx?$/,
+                    exclude: /node_modules/,
+                    use: {
+                        loader: 'ts-loader',
+                        options: {
+                            allowTsInNodeModules: true
+                        }
+                    }
+                },
+                {
+                    test: /\.css$/,
+                    use: ['style-loader', 'css-loader'],
+                    exclude: /node_modules/
+                },
+                {
+                    test: /\.(png|jpe?g|gif|svg|woff2?|ttf|eot)$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'assets/[hash][ext][query]'
+                    }
+                },
+                {
+                    test: /\.html$/,
+                    use: {
+                        loader: 'html-loader',
+                        options: {
+                            sources: false,
+                        }
+                    }
+                }
+            ]
+        },
+        plugins: [
+            new CleanWebpackPlugin(),
+            new HtmlWebpackPlugin({
+                template: controllerHtmlPath,
+                filename: 'index.html',
+                inject: 'body',
+                chunks: ['main']
+            }),
+            new CopyWebpackPlugin({
+                patterns: [
+                    { from: controllerStaticPath, to: 'static', noErrorOnMissing: true },
+                    { from: controllerFontsPath, to: 'fonts', noErrorOnMissing: true }
+                ]
+            })
+        ],
+        optimization: isDev ? undefined : {
+            minimize: false,
+            minimizer: [
+                new TerserPlugin({
+                    minify: TerserPlugin.terserMinify,
+                    terserOptions: {
+                        ecma: 2020,
+                        compress: true,
+                        mangle: true,
+                        format: { comments: false }
+                    }
+                })
+            ]
+        },
+        devtool: isDev ? 'source-map' : false,
+        devServer: isDev ? {
+            static: {
+                directory: path.resolve(options.src)
+            },
+            open: false,
+            client: {
+                overlay: true
             },
-            compress: true,
-            mangle: true
-          }
-        })
-      ]
-    },
-    devtool: isDev ? 'source-map' : false,
-    devServer: isDev ? {
-      static: {
-        directory: path.resolve(options.src)
-      },
-      port: options.port || 8080,
-      hot: true,
-      historyApiFallback: true,
-      devMiddleware: {
-        publicPath: '/'
-      }
-    } : undefined
-  }
-}
+            port: options.port || 8080,
+            hot: true,
+            historyApiFallback: true,
+            devMiddleware: {
+                publicPath: '/',
+                writeToDisk: false
+            }
+        } : undefined
+    };
+};