proteum 1.0.2 → 2.0.0

package/cli/compiler/client/identite.ts

@@ -1,72 +1,99 @@
 // Npm
+import { createHash } from 'crypto';
+import path from 'path';
 import favicons from 'favicons';
 import fs from 'fs-extra';
 
-// Libs
-import cli from '../..';
-
 // Type
-import type App from '../../app';
+import type { App } from '../../app';
+
+export default async (app: App, outputDir: string, enabled: boolean = true) => {
+    if (!enabled) return;
 
-export default async ( app: App ) => {
+    const logoPath = path.join(app.paths.root, 'client', 'assets', 'identity', 'logo.svg');
+    const metadataPath = path.join(outputDir, '.proteum-identity-assets.json');
+    const options = createIdentityAssetsOptions(app);
+    const cacheKey = createHash('sha1').update(fs.readFileSync(logoPath)).update(JSON.stringify(options)).digest('hex');
 
-    const dossierCache = app.paths.root + '/public/app';
+    const currentMetadata = readIdentityAssetsMetadata(metadataPath);
+    if (
+        currentMetadata?.cacheKey === cacheKey &&
+        currentMetadata.files.length > 0 &&
+        currentMetadata.files.every((file) => fs.existsSync(path.join(outputDir, file)))
+    )
+        return;
 
-    if (!fs.existsSync(dossierCache)) {
+    console.info(`Generating identity assets ...`);
+    fs.emptyDirSync(outputDir);
 
-        console.info(`Generating identity assets ...`);
-        fs.emptyDirSync(dossierCache);
+    const response = await favicons(logoPath, options);
+    const generatedFiles = [...response.images.map((image) => image.name), ...response.files.map((file) => file.name)];
 
-        const identity = app.identity;
+    await Promise.all([
+        // Enregistrement images
+        ...response.images.map((image) => {
+            let destimg = outputDir + '/' + image.name;
+            return fs.writeFile(destimg, image.contents);
+        }),
 
-        const response = await favicons( app.paths.root + '/client/assets/identity/logo.svg', {
+        // Enregistrement fichiers
+        ...response.files.map((fichier) => {
+            let destfichier = outputDir + '/' + fichier.name;
+            return fs.writeFile(destfichier, fichier.contents);
+        }),
 
-            path: '/assets/img/identite/favicons/',
-            appName: identity.name,
-            appShortName: identity.name,
-            appDescription: identity.description,
-            developerName: identity.author.name,
-            developerURL: identity.author.url,
-            dir: "auto",
-            lang: identity.language,
-            background: "#fff",
-            theme_color: identity.maincolor,
-            appleStatusBarStyle: "default",
-            display: "standalone",
-            orientation: "any",
-            //scope: "/",
-            start_url: "/",
-            version: identity.web.version,
-            logging: false,
-            pixel_art: false,
-            icons: {
-                android: true,
-                appleIcon: true,
-                appleStartup: false,
-                coast: false,
-                favicons: true,
-                firefox: true,
-                windows: true,
-                yandex: false
-            }
+        fs.writeJSON(metadataPath, { cacheKey, files: generatedFiles }, { spaces: 2 }),
+    ]);
+};
 
-        });
+function createIdentityAssetsOptions(app: App) {
+    const identity = app.identity;
 
-        await Promise.all([
+    return {
+        path: '/assets/img/identite/favicons/',
+        appName: identity.name,
+        appShortName: identity.name,
+        appDescription: identity.description,
+        developerName: identity.author.name,
+        developerURL: identity.author.url,
+        dir: 'auto',
+        lang: identity.language,
+        background: '#fff',
+        theme_color: identity.maincolor,
+        appleStatusBarStyle: 'default',
+        display: 'standalone',
+        orientation: 'any',
+        start_url: '/',
+        version: identity.web.version,
+        logging: false,
+        pixel_art: false,
+        icons: {
+            android: true,
+            appleIcon: true,
+            appleStartup: false,
+            coast: false,
+            favicons: true,
+            windows: true,
+            yandex: false,
+        },
+    };
+}
 
-            // Enregistrement images
-            ...response.images.map((image) => {
-                let destimg = dossierCache + '/' + image.name;
-                return fs.writeFile(destimg, image.contents);
-            }),
+function readIdentityAssetsMetadata(metadataPath: string): null | { cacheKey: string; files: string[] } {
+    if (!fs.existsSync(metadataPath)) return null;
 
-            // Enregistrement fichiers
-            ...response.files.map((fichier) => {
-                let destfichier = dossierCache + '/' + fichier.name;
-                return fs.writeFile(destfichier, fichier.contents);
-            })
+    try {
+        const metadata = fs.readJSONSync(metadataPath);
+        if (
+            !metadata ||
+            typeof metadata.cacheKey !== 'string' ||
+            !Array.isArray(metadata.files) ||
+            !metadata.files.every((file: unknown) => typeof file === 'string')
+        )
+            return null;
 
-        ]);
+        return metadata;
+    } catch {
+        return null;
     }
-
 }

package/cli/compiler/client/index.ts

@@ -3,26 +3,15 @@
 ----------------------------------*/
 
 // Npm
-import webpack from 'webpack';
-import fs from 'fs-extra';
+import path from 'path';
+import { rspack, type Configuration, type Module } from '@rspack/core';
 
 // Plugins
-const TerserPlugin = require('terser-webpack-plugin');
-// Optimisations
-const BrotliCompression = require("brotli-webpack-plugin");
-import CompressionPlugin from "compression-webpack-plugin";
-const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
-const imageminWebp = require('imagemin-webp');
-const { extendDefaultPlugins } = require("svgo");
-// Ressources
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import WebpackAssetsManifest from 'webpack-assets-manifest';
-// Dev
-import PreactRefreshPlugin from '@prefresh/webpack';
 
 // Core
-import createCommonConfig, { TCompileMode, regex } from '../common';
+import createCommonConfig, { TCompileMode, TCompileOutputTarget, regex } from '../common';
+import { createClientBundleAnalysisPlugins } from '../common/bundleAnalysis';
+import { toRspackAliases } from '../common/rspackAliases';
 import identityAssets from './identite';
 import cli from '../..';
 
@@ -30,19 +19,48 @@ import cli from '../..';
 import type { App } from '../../app';
 
 const debug = false;
+const ssrScriptPattern = /\.ssr\.(ts|tsx)$/;
+const normalizedCoreRoot = cli.paths.core.root.replace(/\\/g, '/');
+const hmrClientEntry = path.join(cli.paths.core.root, 'client', 'dev', 'hmr.ts');
+
+const normalizeModulePath = (value?: string) => (value || '').replace(/\\/g, '/');
+const resolveFromAppOrCore = (app: App, request: string) =>
+    require.resolve(request, { paths: [app.paths.root, cli.paths.core.root] });
+
+const getModulePath = (module: Module) => {
+    const resource = typeof module.nameForCondition === 'function' ? module.nameForCondition() : undefined;
+    const fallbackModule = module as Module & { resource?: string; context?: string };
+
+    return normalizeModulePath(resource || fallbackModule.resource || fallbackModule.context);
+};
+
+const isExternalVendorModule = (module: Module) => {
+    const modulePath = getModulePath(module);
+
+    return modulePath.includes('/node_modules/') && !modulePath.includes('/node_modules/proteum/');
+};
+
+const isCoreSourceModule = (module: Module) => {
+    const modulePath = getModulePath(module);
+
+    return modulePath.startsWith(normalizedCoreRoot + '/') || modulePath.includes('/node_modules/proteum/');
+};
 
 /*----------------------------------
 - CONFIG
 ----------------------------------*/
-export default function createCompiler( app: App, mode: TCompileMode ): webpack.Configuration {
-
+export default function createCompiler(
+    app: App,
+    mode: TCompileMode,
+    outputTarget: TCompileOutputTarget = mode === 'dev' ? 'dev' : 'bin',
+): Configuration {
     console.info(`Creating compiler for client (${mode}).`);
     const dev = mode === 'dev';
+    const outputPath = app.outputPath(outputTarget);
 
-    const commonConfig = createCommonConfig(app, 'client', mode);
+    const commonConfig = createCommonConfig(app, 'client', mode, outputTarget);
 
-    // Pas besoin d'attendre que les assets soient générés pour lancer la compilation
-    identityAssets(app);
+    identityAssets(app, path.join(outputPath, 'public', 'app'));
 
     // Symlinks to public
     /*const publicDirs = fs.readdirSync(app.paths.root + '/public');
@@ -52,53 +70,57 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
             app.paths.public + '/' + publicDir
         );*/
 
-    // Convert tsconfig cli.paths to webpack aliases
-    const { aliases } = app.aliases.client.forWebpack({
-        modulesPath: app.paths.root + '/node_modules'
-    });
+    // Convert tsconfig paths into bundler aliases.
+    const { aliases } = app.aliases.client.forWebpack({ modulesPath: app.paths.root + '/node_modules' });
 
     // We're not supposed in any case to import server libs from client
-    delete aliases["@server"]; 
-    delete aliases["@/server"];
-
-    debug && console.log("client aliases", aliases);
-    const config: webpack.Configuration = {
-
+    delete aliases['@server'];
+    delete aliases['@/server'];
+    const rspackAliases = toRspackAliases(aliases);
+    rspackAliases['@/client/router$'] = cli.paths.core.root + '/client/router.ts';
+    rspackAliases['preact/jsx-runtime$'] = resolveFromAppOrCore(app, 'preact/jsx-runtime');
+    rspackAliases['react/jsx-runtime$'] = resolveFromAppOrCore(app, 'preact/jsx-runtime');
+    rspackAliases['react/jsx-dev-runtime$'] = resolveFromAppOrCore(app, 'preact/jsx-dev-runtime');
+
+    debug && console.log('client aliases', rspackAliases);
+    const config: Configuration = {
         ...commonConfig,
 
         name: 'client',
         target: 'web',
         entry: {
-            client: [
-                /*...(dev ? [
-                    process.env.framework + '/cli/compilation/webpack/libs/webpackHotDevClient.js',
-                    // https://github.com/webpack-contrib/webpack-hot-middleware#config
-                    cli.paths.core.root + '/node_modules' + '/webpack-hot-middleware/client?name=client&reload=true',
-                ] : []),*/
-                cli.paths.core.root + '/client/index.ts'
-            ]
+            client: dev
+                ? [hmrClientEntry, cli.paths.core.root + '/client/index.ts']
+                : [cli.paths.core.root + '/client/index.ts'],
         },
 
         output: {
-
             pathinfo: dev,
-            path: app.paths.bin + '/public',
+            path: outputPath + '/public',
             filename: '[name].js', // Output client.js
             assetModuleFilename: '[hash][ext]',
-
-            chunkFilename: dev
-                ? '[name].js'
-                : '[id].[hash:8].js'
+            environment: {
+                arrowFunction: true,
+                asyncFunction: true,
+                bigIntLiteral: true,
+                const: true,
+                destructuring: true,
+                dynamicImport: true,
+                forOf: true,
+                optionalChaining: true,
+                templateLiteral: true,
+            },
+            cssFilename: '[name].css',
+            cssChunkFilename: '[name].css',
+            chunkFilename: dev ? '[name].js' : '[id].[contenthash:8].js',
         },
 
         resolve: {
-
             ...commonConfig.resolve,
 
-            alias: aliases,
+            alias: rspackAliases,
 
-            // RAPPEL: on a besoin de résoudre les node_modules
-            extensions: [".mjs", '.ts', '.tsx', ".jsx", ".js", ".json", ".sql"],
+            extensions: ['.mjs', '.ts', '.tsx', '.jsx', '.js', '.json', '.sql'],
         },
 
         module: {
@@ -107,9 +129,29 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
 
             rules: [
                 {
-                    test: regex.scripts,
+                    test: ssrScriptPattern,
                     include: [
+                        app.paths.root + '/client',
+                        cli.paths.core.root + '/client',
+
+                        app.paths.root + '/common',
+                        cli.paths.core.root + '/common',
 
+                        app.paths.root + '/server',
+                        cli.paths.core.root + '/server',
+                    ],
+                    loader: path.join(
+                        cli.paths.core.root,
+                        'cli',
+                        'compiler',
+                        'common',
+                        'loaders',
+                        'forbid-ssr-import.js',
+                    ),
+                },
+                {
+                    test: regex.scripts,
+                    include: [
                         app.paths.root + '/client',
                         cli.paths.core.root + '/client',
 
@@ -117,9 +159,8 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
                         cli.paths.core.root + '/common',
 
                         app.paths.root + '/server/.generated/models.ts',
-
                     ],
-                    rules: require('../common/babel')(app, 'client', dev)
+                    rules: require('../common/scripts')({ app, side: 'client', dev }),
                 },
 
                 // Les pages étan tà la fois compilées dans le bundle client et serveur
@@ -128,10 +169,7 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
                     test: regex.style,
                     rules: require('../common/files/style')(app, dev, true),
 
-                    // Don't consider CSS imports dead code even if the
-                    // containing package claims to have no side effects.
-                    // Remove this when webpack adds a warning or an error for this.
-                    // See https://github.com/webpack/webpack/issues/6571
+                    // CSS imports stay side-effectful even when a package marks itself otherwise.
                     sideEffects: true,
                 },
 
@@ -150,186 +188,74 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
         },
 
         plugins: [
-
             ...(commonConfig.plugins || []),
 
-            ...((dev && false) ? [] : [
-                new MiniCssExtractPlugin({})
-            ]),
-            
-            // Emit a file with assets cli.paths
-            // https://github.com/webdeveric/webpack-assets-manifest#options
-            new WebpackAssetsManifest({
-                output: app.paths.root + `/bin/asset-manifest.json`,
-                publicPath: true,
-                writeToDisk: true, // Force la copie du fichier sur e disque, au lieu d'en mémoire en mode dev
-                customize: ({ key, value }) => {
-                    // You can prevent adding items to the manifest by returning false.
-                    if (key.toLowerCase().endsWith('.map')) return false;
-                    return { key, value };
-                },
-                done: (manifest, stats) => {
-                    // Write chunk-manifest.json.json
-                    const chunkFileName = app.paths.root + `/bin/chunk-manifest.json`;
-                    try {
-                        const fileFilter = file => !file.endsWith('.map');
-                        const addPath = file => manifest.getPublicPath(file);
-                        const chunkFiles = stats.compilation.chunkGroups.reduce((acc, c) => {
-                            acc[c.name] = [
-                                ...(acc[c.name] || []),
-                                ...c.chunks.reduce(
-                                    (files, cc) => [
-                                        ...files,
-                                        ...[...cc.files].filter(fileFilter).map(addPath),
-                                    ],
-                                    [],
-                                ),
-                            ];
-                            return acc;
-                        }, Object.create(null));
-                        fs.writeFileSync(chunkFileName, JSON.stringify(chunkFiles, null, 4));
-                    } catch (err) {
-                        console.error(`ERROR: Cannot write ${chunkFileName}: `, err);
-                        if (!dev) process.exit(1);
-                    }
-                },
-            }),
-
-            ...(dev ? [
-
-                // HMR pour preact
-                //new PreactRefreshPlugin(),
-
-            ] : [
+            ...(dev ? [] : [new rspack.CssExtractRspackPlugin({})]),
 
-                /*new MomentLocalesPlugin({
-                    localesToKeep: ['fr'],
-                }),*/
-
-                /*new CompressionPlugin({
-                    cache: true,
-                    minRatio: 0.99
-                }),
-
-                new BrotliCompression({
-                    algorithm: 'gzip',
-                    test: /\.js$|\.css$|\.html$/,
-                    threshold: 10240,
-                    minRatio: 0.8,
-                })*/
-
-                /*new webpack.HashedModuleIdsPlugin({
-                    hashFunction: 'sha256',
-                    hashDigest: 'hex',
-                    hashDigestLength: 20,
-                }),*/
-
-                /*new PurgecssPlugin({}),*/
-            ]),
+            ...createClientBundleAnalysisPlugins(app, outputTarget),
         ],
 
-        // CSP-safe in development: avoid any `eval`-based source map mode.
-        // https://webpack.js.org/configuration/devtool/#devtool
-        devtool: dev ? 'cheap-module-source-map' : 'source-map',
+        // Use the cheapest practical client source maps in dev for faster rebuilds.
+        devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
         /*devServer: {
             hot: true,
         },*/
 
         optimization: {
-
             // Code splitting serveur = même que client
             // La décomposition des chunks doit toujours être la même car le rendu des pages dépend de cette organisation
 
-            // https://webpack.js.org/plugins/split-chunks-plugin/#configuration
+            runtimeChunk: { name: 'runtime' },
             splitChunks: {
-
-                // This indicates which chunks will be selected for optimization
-                chunks: 'async',
-                // Minimum size, in bytes, for a chunk to be generated.
-                // Pour les imports async (ex: pages), on crée systématiquemen un chunk séparé
-                //      Afin que le css d'une page ne soit appliqué qu'à la page concernée
+                // Keep the initial shell lean while still preserving async route isolation.
+                chunks: 'all',
+                minSize: 20_000,
+                minRemainingSize: 0,
+                maxInitialRequests: 30,
+                maxAsyncRequests: 30,
                 cacheGroups: {
-                    defaultVendors: {
-                        test: (module) => {
-                            // Check if the module is in node_modules but not in node_modules/proteum
-                            return /[\\/]node_modules[\\/]/.test(module.context) && !/[\\/]node_modules[\\/]proteum[\\/]/.test(module.context);
-                        },
-                        priority: -10,
+                    framework: {
+                        test: isCoreSourceModule,
+                        chunks: 'initial',
+                        name: 'framework',
+                        priority: 40,
                         reuseExistingChunk: true,
+                        enforce: true,
                     },
-                    default: {
-                        minChunks: 2,
-                        priority: -20,
+                    initialVendors: {
+                        test: isExternalVendorModule,
+                        chunks: 'initial',
+                        name: 'vendors',
+                        priority: 30,
                         reuseExistingChunk: true,
+                        enforce: true,
                     },
-                },                
+                    asyncVendors: {
+                        test: isExternalVendorModule,
+                        chunks: 'async',
+                        priority: 20,
+                        reuseExistingChunk: true,
+                    },
+                    default: { minChunks: 2, priority: 10, reuseExistingChunk: true },
+                    defaultVendors: false,
+                },
             },
 
             // Production
-            ...(dev ? {} : {
-
-                // https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.prod.babel.js
-                minimize: true,
-                removeAvailableModules: true,
-                minimizer: [
-                    new TerserPlugin({
-                        terserOptions: {
-                            parse: {
-                                // We want terser to parse ecma 8 code. However, we don't want it
-                                // to apply any minification steps that turns valid ecma 5 code
-                                // into invalid ecma 5 code. This is why the 'compress' and 'output'
-                                // sections only apply transformations that are ecma 5 safe
-                                // https://github.com/facebook/create-react-app/pull/4234
-                                ecma: 8,
-                            },
-                            compress: {
-                                ecma: 5,
-                                warnings: false,
-                                // Disabled because of an issue with Uglify breaking seemingly valid code:
-                                // https://github.com/facebook/create-react-app/issues/2376
-                                // Pending further investigation:
-                                // https://github.com/mishoo/UglifyJS2/issues/2011
-                                comparisons: false,
-                                // Disabled because of an issue with Terser breaking valid code:
-                                // https://github.com/facebook/create-react-app/issues/5250
-                                // Pending further investigation:
-                                // https://github.com/terser-js/terser/issues/120
-                                inline: 2,
-                            },
-                            mangle: {
-                                safari10: true,
-                            },
-                            output: {
-                                ecma: 5,
-                                comments: false,
-                                // Turned on because emoji and regex is not minified properly using default
-                                // https://github.com/facebook/create-react-app/issues/2488
-                                ascii_only: true,
-                            },
-                        }
-                    }),
-
-                    ...(dev ? [] : [
-                        new CssMinimizerPlugin()
-                    ]),
-
-                    /*new ImageMinimizerPlugin({
-                        // (optional) add generators; you can also just import &format=webp (see below)
-                        generator: [
-                            {
-                                preset: "webp",
-                                implementation: ImageMinimizerPlugin.imageminGenerate,
-                                options: { plugins: ["imagemin-webp"] }
-                            }
-                        ]
-                    })*/
-                ],
-                nodeEnv: 'production',
-                sideEffects: true,
-            }),
-
+            ...(dev
+                ? {}
+                : {
+                      minimize: true,
+                      removeAvailableModules: true,
+                      minimizer: [
+                          new rspack.SwcJsMinimizerRspackPlugin({}),
+                          new rspack.LightningCssMinimizerRspackPlugin({}),
+                      ],
+                      nodeEnv: 'production',
+                      sideEffects: true,
+                  }),
         },
     };
 
     return config;
-};
+}