proteum 1.0.0-1

package/cli/compiler/client/index.ts

@@ -0,0 +1,334 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import webpack from 'webpack';
+import fs from 'fs-extra';
+
+// 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 identityAssets from './identite';
+import cli from '../..';
+
+// Type
+import type { App } from '../../app';
+
+const debug = false;
+
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+export default function createCompiler( app: App, mode: TCompileMode ): webpack.Configuration {
+
+    console.info(`Creating compiler for client (${mode}).`);
+    const dev = mode === 'dev';
+
+    const commonConfig = createCommonConfig(app, 'client', mode);
+
+    // Pas besoin d'attendre que les assets soient générés pour lancer la compilation
+    identityAssets(app);
+
+    // Symlinks to public
+    /*const publicDirs = fs.readdirSync(app.paths.root + '/public');
+    for (const publicDir of publicDirs)
+        fs.symlinkSync( 
+            app.paths.root + '/public/' + publicDir,  
+            app.paths.public + '/' + publicDir
+        );*/
+
+    // Convert tsconfig cli.paths to webpack 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 = {
+
+        ...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'
+            ]
+        },
+
+        output: {
+
+            pathinfo: dev,
+            path: app.paths.bin + '/public',
+            filename: '[name].js', // Output client.js
+            assetModuleFilename: '[hash][ext]',
+
+            chunkFilename: dev
+                ? '[name].js'
+                : '[id].[hash:8].js'
+        },
+
+        resolve: {
+
+            ...commonConfig.resolve,
+
+            alias: aliases,
+
+            // RAPPEL: on a besoin de résoudre les node_modules
+            extensions: [".mjs", '.ts', '.tsx', ".jsx", ".js", ".json", ".sql"],
+        },
+
+        module: {
+            // Make missing exports an error instead of warning
+            strictExportPresence: true,
+
+            rules: [
+                {
+                    test: regex.scripts,
+                    include: [
+
+                        app.paths.root + '/client',
+                        cli.paths.core.root + '/client',
+
+                        app.paths.root + '/common',
+                        cli.paths.core.root + '/common',
+
+                        app.paths.root + '/server/.generated/models.ts',
+
+                    ],
+                    rules: require('../common/babel')(app, 'client', dev)
+                },
+
+                // Les pages étan tà la fois compilées dans le bundle client et serveur
+                // On ne compile les ressources (css) qu'une seule fois
+                {
+                    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
+                    sideEffects: true,
+                },
+
+                ...require('../common/files/images')(app, dev, true),
+
+                ...require('../common/files/autres')(app, dev, true),
+
+                // Exclude dev modules from production build
+                /*...(dev ? [] : [
+                    {
+                        test: app.paths.root + '/node_modules/react-deep-force-update/lib/index.js'),
+                        loader: 'null-loader',
+                    },
+                ]),*/
+            ],
+        },
+
+        plugins: [
+
+            ...(commonConfig.plugins || []),
+
+            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(),
+
+            ] : [
+
+                /*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({}),*/
+            ]),
+        ],
+
+        // https://webpack.js.org/configuration/devtool/#devtool
+        devtool: '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
+            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
+                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,
+                        reuseExistingChunk: true,
+                    },
+                    default: {
+                        minChunks: 2,
+                        priority: -20,
+                        reuseExistingChunk: true,
+                    },
+                },                
+            },
+
+            // 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,
+            }),
+
+        },
+    };
+
+    return config;
+};

package/cli/compiler/common/babel/index.ts

@@ -0,0 +1,170 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import type webpack from 'webpack';
+import PresetBabel, { Options } from '@babel/preset-env';
+
+import cli from '@cli';
+import type { TAppSide, App } from '@cli/app';
+
+/*----------------------------------
+- REGLES
+----------------------------------*/
+module.exports = (app: App, side: TAppSide, dev: boolean): webpack.RuleSetRule[] => {
+
+    const babelPresetEnvConfig: Options = side === 'client'  ? {
+
+        // Ajoute automatiquement les polyfills babel
+        // https://stackoverflow.com/a/61517521/12199605
+        "useBuiltIns": "usage", // alternative mode: "entry"
+        "corejs": 3, // default would be 2
+
+        targets: {
+            browsers: dev
+                ? 'last 2 versions'
+                : app.packageJson.browserslist,
+        },
+        forceAllTransforms: !dev, // for UglifyJS
+        modules: false,
+        debug: false,
+        bugfixes: !dev
+    } : {
+        targets: {
+            node: true,//pkg.engines.node.match(/(\d+\.?)+/)[0],
+        },
+        modules: false,
+        useBuiltIns: false,
+        debug: false,
+    }
+
+    return [{
+        loader: require.resolve('babel-loader'),
+        exclude: (filePath) => {
+            // 1) If not in "node_modules" at all => transpile it
+            if (!filePath.includes('node_modules')) {
+                return false;
+            }
+        
+            // 2) If it’s "node_modules/proteum" but NOT "node_modules/proteum/node_modules",
+            //    then transpile. Otherwise, exclude.
+            if (
+                filePath.includes('node_modules/proteum') &&
+                !filePath.includes('node_modules/proteum/node_modules')
+            ) {
+                return false;
+            }
+        
+            // 3) Everything else in node_modules is excluded
+            return true;
+          },
+        options: { 
+            
+            // https://github.com/babel/babel-loader#options
+
+            // ATTENTION: Ne prend pas toujours compte des màj des plugins babel
+            cacheDirectory: cli.args.cache === true,
+            // Désactive car ralenti compilation
+            cacheCompression: false,
+
+            compact: !dev,
+
+            // https://babeljs.io/docs/usage/options/
+            babelrc: false,
+            presets: [
+
+                // https://github.com/babel/babel-preset-env
+                [PresetBabel, babelPresetEnvConfig],
+
+                [require("@babel/preset-typescript"), {
+                    useDefineForClassFields: true,
+                    //jsxPragma: "h"
+                }],
+
+                // JSX
+                // https://github.com/babel/babel/tree/master/packages/babel-preset-react
+                [require('@babel/preset-react'), {
+                    //pragma: "h"
+                    development: dev
+                }],
+
+            ],
+            plugins: [
+
+                // NOTE: On résoud les plugins et presets directement ici
+                //      Autrement, babel-loader les cherchera dans projet/node_modules
+
+                [require("@babel/plugin-proposal-decorators"), { "legacy": true }],
+
+                [require('@babel/plugin-proposal-class-properties'), { "loose": true }],
+
+                [require('@babel/plugin-proposal-private-methods'), { "loose": true }],
+
+                // Masque erreur associée à @babel/plugin-proposal-decorators legacy: true
+                [require('@babel/plugin-proposal-private-property-in-object'), { "loose": true }],
+
+                ...(dev ? [
+
+                    ...(side === 'client' ? [
+                        
+
+                    ] : [])
+
+                ] : [
+
+                    // Les 3 plugins suivants sont tirés de https://github.com/jamiebuilds/babel-react-optimize
+
+                    // Remove unnecessary React propTypes from the production build
+                    // https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
+                    [require('babel-plugin-transform-react-remove-prop-types')],
+                    // Treat React JSX elements as value types and hoist them to the highest scope
+                    // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
+                    [require('@babel/plugin-transform-react-constant-elements')],
+
+                    // Pour du tree shaking manuel
+                    // https://www.npmjs.com/package/babel-plugin-transform-imports
+                    [require("babel-plugin-transform-imports"), {
+                        "lodash": {
+                            "transform": "lodash/${member}",
+                            "preventFullImport": true
+                        }
+                    }],
+
+                    ...(side === 'client' ? [
+                        
+                        [require('babel-plugin-transform-remove-console')],
+
+                    ] : [])
+                ]),
+
+                require('./routes/routes')({ side, app, debug: false }),
+
+                ...(side === 'client' ? [
+
+                ] : [
+
+                    require('./plugins/services')({ side, app, debug: false }),
+
+                ]),
+
+                // Allow to import multiple fiels with one import statement thanks to glob patterns
+                require('babel-plugin-glob-import')({ 
+                    debug: false,
+                    removeAliases: (source: string) => app.paths.withoutAlias(source, side)
+                }, [
+                    // Routes imports on frontend side
+                    require('./routes/imports')(app, side, dev)
+                ])
+            ],
+
+            overrides: [
+                
+                ...(side === 'client' ? [
+
+                ] : [
+                ]),
+            ]
+        }
+    }]
+}