@gravity-ui/app-builder 0.5.6 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.6.1](https://github.com/gravity-ui/app-builder/compare/v0.6.0...v0.6.1) (2023-07-24)
+
+
+### Features
+
+* **css:** use Lightning CSS ([#52](https://github.com/gravity-ui/app-builder/issues/52)) ([d16cd09](https://github.com/gravity-ui/app-builder/commit/d16cd09067276eee9b0952f2c198e6e4e6365c3d))
+
+
+### Bug Fixes
+
+* **s3-client:** add charset to content type ([#50](https://github.com/gravity-ui/app-builder/issues/50)) ([8b1a944](https://github.com/gravity-ui/app-builder/commit/8b1a944d675e0f1b88f80fa43d0929148ce82a05))
+
+## [0.6.0](https://github.com/gravity-ui/app-builder/compare/v0.5.6...v0.6.0) (2023-07-23)
+
+
+### Features
+
+* add caching to worker loader ([#48](https://github.com/gravity-ui/app-builder/issues/48)) ([c7db4fb](https://github.com/gravity-ui/app-builder/commit/c7db4fb2786729a173e5fbe0f62c679639b9a99a))
+
 ## [0.5.6](https://github.com/gravity-ui/app-builder/compare/v0.5.5...v0.5.6) (2023-07-21)
 
 

package/README.md

@@ -232,6 +232,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `highlight.js` (`string[]`) — list of language names to include, e.g. `['javascript', 'python', 'bash']`;
   - `locale`: (`string[]=['ru']`) — list of `moment.js` or `day.js` locales to include, e.g. `['de', 'es']`. Locale `En` is always present.
 - `safari10` (`boolean`) — Enables `safari10` terser's option. [Terser options](https://github.com/terser/terser#minify-options)
+- `transformCssWithLightningCss` (`boolean`) — use [Lighting CSS](https://lightningcss.dev) to transform and minimize css instead of PostCSS and cssnano
 
 ##### Monaco editor support
 

package/dist/common/child-process/controllable-script.d.ts

@@ -7,7 +7,6 @@ export declare class ControllableScript {
     isRunning: boolean;
     private process?;
     private script;
-    private tmpFileName;
     private debugInfo;
     constructor(script: string, debugInfo: IDebugInfo | null);
     start(): void;

package/dist/common/child-process/controllable-script.js

@@ -22,27 +22,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ControllableScript = void 0;
 const utils_1 = require("./utils");
-const path_1 = __importDefault(require("path"));
 const fs = __importStar(require("fs-extra"));
 const execa = __importStar(require("execa"));
+const utils_2 = require("../utils");
 class ControllableScript {
     constructor(script, debugInfo) {
         this.isRunning = false;
         this.script = '';
-        this.tmpFileName = '';
         this.script = script;
         this.debugInfo = debugInfo;
     }
     start() {
         const args = [];
-        this.tmpFileName = (0, utils_1.tmpNameSync)(path_1.default.join(process.cwd(), 'node_modules'));
-        fs.outputFileSync(this.tmpFileName, this.script);
+        const tmpFileName = (0, utils_1.tmpNameSync)((0, utils_2.getCacheDir)());
+        fs.outputFileSync(tmpFileName, this.script);
         this.isRunning = true;
         // Passing --inspect isn't necessary for the child process to launch a port, but it allows some editors to automatically attach
         if (this.debugInfo) {
@@ -53,7 +49,7 @@ class ControllableScript {
                 args.push(`--inspect=${this.debugInfo.port}`);
             }
         }
-        this.process = execa.node(this.tmpFileName, args, {
+        this.process = execa.node(tmpFileName, args, {
             env: {
                 ...process.env,
             },
@@ -63,6 +59,9 @@ class ControllableScript {
         this.process.on('unhandledRejection', () => {
             this.stop('SIGABRT');
         });
+        this.process.on('exit', () => {
+            fs.unlinkSync(tmpFileName);
+        });
     }
     async stop(signal = null, code) {
         if (!this.process) {
@@ -99,7 +98,6 @@ class ControllableScript {
                     this.process.removeAllListeners();
                 }
                 this.process = undefined;
-                fs.unlinkSync(this.tmpFileName);
                 resolve();
             });
         });

package/dist/common/models/index.d.ts

@@ -167,6 +167,8 @@ export interface ClientConfig {
     newWebWorkerSyntax?: boolean;
     babelCacheDirectory?: boolean | string;
     cache?: boolean | FileCacheOptions | MemoryCacheOptions;
+    /** Use [Lighting CSS](https://lightningcss.dev) to transform and minimize css instead of PostCSS and cssnano*/
+    transformCssWithLightningCss?: boolean;
 }
 interface CdnUploadConfig {
     bucket: string;

package/dist/common/s3-upload/s3-client.js

@@ -84,16 +84,27 @@ async function detectContentTypeFromBuffer(buffer) {
     if (!type) {
         throw Error('Cannot detect content type for buffer');
     }
-    return type.mime;
+    let contentType = type.mime;
+    // use default charset for content type
+    const charset = mime.charset(contentType);
+    if (charset) {
+        contentType += `; charset=${charset.toLowerCase()}`;
+    }
+    return contentType;
 }
 function detectContentTypeFromExt(filePath) {
     // Compressed file Content-type must be the same as original file Content-type
     if (filePath.endsWith('.br') || filePath.endsWith('.gz')) {
         filePath = filePath.slice(0, -3);
     }
-    const type = mime.lookup(filePath);
-    if (!type) {
+    let contentType = mime.lookup(filePath);
+    if (!contentType) {
         throw Error(`Cannot detect content type for file ${filePath}`);
     }
-    return type;
+    // use default charset for content type
+    const charset = mime.charset(contentType);
+    if (charset) {
+        contentType += `; charset=${charset.toLowerCase()}`;
+    }
+    return contentType;
 }

package/dist/common/utils.d.ts

@@ -1,2 +1,3 @@
 export declare function createRunFolder(): void;
 export declare function shouldCompileTarget(target: 'client' | 'server' | undefined, targetName: string): boolean;
+export declare function getCacheDir(): string;

package/dist/common/utils.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldCompileTarget = exports.createRunFolder = void 0;
+exports.getCacheDir = exports.shouldCompileTarget = exports.createRunFolder = void 0;
 const fs_1 = __importDefault(require("fs"));
+const os_1 = __importDefault(require("os"));
+const find_cache_dir_1 = __importDefault(require("find-cache-dir"));
 const paths_1 = __importDefault(require("./paths"));
 function createRunFolder() {
     const runPath = paths_1.default.appRun;
@@ -17,3 +19,7 @@ function shouldCompileTarget(target, targetName) {
     return target === undefined || target === targetName;
 }
 exports.shouldCompileTarget = shouldCompileTarget;
+function getCacheDir() {
+    return (0, find_cache_dir_1.default)({ name: '@gravity-ui/app-builder', create: true }) || os_1.default.tmpdir();
+}
+exports.getCacheDir = getCacheDir;

package/dist/common/webpack/config.js

@@ -36,9 +36,7 @@ const clean_webpack_plugin_1 = require("clean-webpack-plugin");
 const webpack_manifest_plugin_1 = require("webpack-manifest-plugin");
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
-const postcss_preset_env_1 = __importDefault(require("postcss-preset-env"));
 const webpack_assets_manifest_1 = __importDefault(require("webpack-assets-manifest"));
 const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
 const moment_timezone_data_webpack_plugin_1 = __importDefault(require("moment-timezone-data-webpack-plugin"));
@@ -348,16 +346,20 @@ function createStylesRule({ isEnvDevelopment, isEnvProduction, config, }) {
             importLoaders: 2,
         },
     });
-    loaders.push({
-        loader: require.resolve('postcss-loader'),
-        options: {
-            sourceMap: !config.disableSourceMapGeneration,
-            postcssOptions: {
-                config: false,
-                plugins: [(0, postcss_preset_env_1.default)({ enableClientSidePolyfills: false })],
+    if (!config.transformCssWithLightningCss) {
+        loaders.push({
+            loader: require.resolve('postcss-loader'),
+            options: {
+                sourceMap: !config.disableSourceMapGeneration,
+                postcssOptions: {
+                    config: false,
+                    plugins: [
+                        [require.resolve('postcss-preset-env'), { enableClientSidePolyfills: false }],
+                    ],
+                },
             },
-        },
-    });
+        });
+    }
     loaders.push({
         loader: require.resolve('resolve-url-loader'),
         options: {
@@ -609,16 +611,6 @@ function configurePlugins(options) {
             chunkFilename: 'css/[name].[contenthash:8].chunk.css',
             ignoreOrder: true,
         }));
-        plugins.push(new css_minimizer_webpack_plugin_1.default({
-            minimizerOptions: {
-                preset: [
-                    'default',
-                    {
-                        svgo: false,
-                    },
-                ],
-            },
-        }));
         if (config.analyzeBundle === 'true') {
             plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
                 openAnalyzer: false,
@@ -691,7 +683,7 @@ function configurePlugins(options) {
     }
     return plugins;
 }
-function configureOptimization({ isEnvProduction, config, }) {
+function configureOptimization({ config }) {
     const configVendors = config.vendors ?? [];
     const vendorsList = [
         'react',
@@ -708,7 +700,6 @@ function configureOptimization({ isEnvProduction, config, }) {
         ...configVendors,
     ];
     const optimization = {
-        minimize: isEnvProduction && !config.reactProfiling,
         splitChunks: {
             chunks: 'all',
             cacheGroups: {
@@ -721,16 +712,48 @@ function configureOptimization({ isEnvProduction, config, }) {
             },
         },
         runtimeChunk: 'single',
+        minimizer: [
+            (compiler) => {
+                // CssMinimizerWebpackPlugin works with MiniCSSExtractPlugin, so only relevant for production builds.
+                // Lazy load the CssMinimizerPlugin plugin
+                const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+                if (config.transformCssWithLightningCss) {
+                    const lightningCss = require('lightningcss');
+                    const browserslist = require('browserslist');
+                    new CssMinimizerPlugin({
+                        minify: CssMinimizerPlugin.lightningCssMinify,
+                        minimizerOptions: {
+                            targets: lightningCss.browserslistToTargets(browserslist()),
+                        },
+                    }).apply(compiler);
+                }
+                else {
+                    new CssMinimizerPlugin({
+                        minimizerOptions: {
+                            preset: [
+                                'default',
+                                {
+                                    svgo: false,
+                                },
+                            ],
+                        },
+                    }).apply(compiler);
+                }
+            },
+            (compiler) => {
+                // Lazy load the Terser plugin
+                const TerserPlugin = require('terser-webpack-plugin');
+                new TerserPlugin({
+                    terserOptions: {
+                        compress: {
+                            passes: 2,
+                        },
+                        safari10: config.safari10,
+                        mangle: !config.reactProfiling,
+                    },
+                }).apply(compiler);
+            },
+        ],
     };
-    if (config.safari10) {
-        const TerserPlugin = require('terser-webpack-plugin');
-        optimization.minimizer = [
-            new TerserPlugin({
-                terserOptions: {
-                    safari10: true,
-                },
-            }),
-        ];
-    }
     return optimization;
 }

package/dist/common/webpack/worker/worker-loader.js

@@ -11,6 +11,7 @@ const WebWorkerTemplatePlugin_1 = __importDefault(require("webpack/lib/webworker
 const FetchCompileWasmPlugin_1 = __importDefault(require("webpack/lib/web/FetchCompileWasmPlugin"));
 const FetchCompileAsyncWasmPlugin_1 = __importDefault(require("webpack/lib/web/FetchCompileAsyncWasmPlugin"));
 const paths_1 = __importDefault(require("../../paths"));
+const pluginId = 'APP_BUILDER_WORKER_LOADER';
 const publicPath = node_path_1.default.resolve(__dirname, 'public-path.worker.js');
 const pitch = function (request) {
     this.cacheable(false);
@@ -18,7 +19,7 @@ const pitch = function (request) {
         throw new Error('Something went wrong');
     }
     const compilerOptions = this._compiler.options;
-    const logger = this.getLogger('APP_BUILDER_WORKER_LOADER');
+    const logger = this.getLogger(pluginId);
     if (compilerOptions.output.globalObject === 'window') {
         logger.warn('Warning (app-builder-worker-loader): output.globalObject is set to "window". It should be set to "self" or "this" to support HMR in Workers.');
     }
@@ -67,23 +68,39 @@ const pitch = function (request) {
                 .join('\n');
             return cb(new Error('Child compilation failed:\n' + errorDetails));
         }
-        const contents = compilation.assets[filename]?.source();
-        const mapFile = `${filename}.map`;
-        let map = compilation.assets[mapFile]?.source();
-        if (map) {
-            const sourceMap = JSON.parse(map.toString());
-            if (Array.isArray(sourceMap.sources)) {
-                sourceMap.sources = sourceMap.sources.map((pathname) => pathname.replace(/webpack:\/\/[^/]+\//, 'webpack://'));
+        const cache = workerCompiler.getCache(pluginId);
+        const cacheIdent = request;
+        const cacheETag = cache.getLazyHashedEtag(compilation.assets[filename]);
+        return cache.get(cacheIdent, cacheETag, (getCacheError, cacheContent) => {
+            if (getCacheError) {
+                return cb(getCacheError);
             }
-            map = JSON.stringify(sourceMap);
-        }
-        for (const [assetName, asset] of Object.entries(compilation.assets)) {
-            if ([filename, mapFile].includes(assetName)) {
-                continue;
+            if (cacheContent) {
+                return cb(null, cacheContent.content, cacheContent.map);
             }
-            workerCompiler.parentCompilation?.emitAsset(assetName, asset, compilation.assetsInfo.get(assetName));
-        }
-        return cb(null, contents, map?.toString());
+            const content = compilation.assets[filename]?.source();
+            const mapFile = `${filename}.map`;
+            let map = compilation.assets[mapFile]?.source();
+            if (map) {
+                const sourceMap = JSON.parse(map.toString());
+                if (Array.isArray(sourceMap.sources)) {
+                    sourceMap.sources = sourceMap.sources.map((pathname) => pathname.replace(/webpack:\/\/[^/]+\//, 'webpack://'));
+                }
+                map = JSON.stringify(sourceMap);
+            }
+            for (const [assetName, asset] of Object.entries(compilation.assets)) {
+                if ([filename, mapFile].includes(assetName)) {
+                    continue;
+                }
+                workerCompiler.parentCompilation?.emitAsset(assetName, asset, compilation.assetsInfo.get(assetName));
+            }
+            return cache.store(cacheIdent, cacheETag, { content, map: map?.toString() }, (storeCacheError) => {
+                if (storeCacheError) {
+                    return cb(storeCacheError);
+                }
+                return cb(null, content, map?.toString());
+            });
+        });
     });
 };
 exports.pitch = pitch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.5.6",
+  "version": "0.6.1",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "main": "dist/index.js",
@@ -74,6 +74,7 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "browserslist": "^4.21.9",
     "chalk": "^4.1.2",
     "circular-dependency-plugin": "^5.2.2",
     "clean-webpack-plugin": "^4.0.0",
@@ -82,19 +83,21 @@
     "cosmiconfig": "^8.1.3",
     "cosmiconfig-typescript-loader": "^4.3.0",
     "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "dotenv": "^16.1.4",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "dotenv": "^16.3.1",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.12",
     "file-type": "^16.5.3",
+    "find-cache-dir": "^3.3.2",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^11.1.1",
     "get-port": "^5.1.1",
+    "lightningcss": "^1.21.5",
     "lodash": "^4.17.21",
     "mime-types": "^2.1.35",
     "mini-css-extract-plugin": "^2.7.6",
     "moment-timezone-data-webpack-plugin": "^1.5.1",
-    "nodemon": "^2.0.22",
+    "nodemon": "^3.0.1",
     "p-map": "^4.0.0",
     "p-queue": "^6.6.2",
     "pino-pretty": "^10.0.0",
@@ -108,16 +111,17 @@
     "rimraf": "^5.0.0",
     "sass": "^1.62.1",
     "sass-loader": "^13.3.1",
-    "semver": "^7.5.2",
+    "semver": "^7.5.4",
     "signal-exit": "^3.0.7",
     "source-map-loader": "^4.0.1",
     "strip-ansi": "^6.0.1",
     "style-loader": "^3.3.3",
     "svgo": "^3.0.2",
     "ts-node": "10.9.1",
-    "tslib": "^2.5.0",
-    "typescript": "^5.1.3",
-    "webpack": "^5.85.1",
+    "tslib": "^2.6.0",
+    "terser-webpack-plugin": "5.3.9",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.1",
     "webpack-assets-manifest": "^5.1.0",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-dev-server": "^4.15.0",
@@ -133,6 +137,7 @@
     "@gravity-ui/tsconfig": "^1.0.0",
     "@types/circular-dependency-plugin": "^5.0.5",
     "@types/common-tags": "^1.8.1",
+    "@types/find-cache-dir": "^3.2.1",
     "@types/fs-extra": "^11.0.1",
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.195",