@gravity-ui/app-builder 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.6.2](https://github.com/gravity-ui/app-builder/compare/v0.6.1...v0.6.2) (2023-07-24)
+
+
+### Bug Fixes
+
+* **build-lib:** correctly transform svg icons ([#53](https://github.com/gravity-ui/app-builder/issues/53)) ([9c9d3a6](https://github.com/gravity-ui/app-builder/commit/9c9d3a626ea6375a9edf93462fe0f7b367046b16))
+
+## [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)
 
 

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

@@ -32,14 +32,13 @@ 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)((0, utils_2.getCacheDir)());
-        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) {
@@ -50,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,
             },
@@ -60,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) {
@@ -96,7 +98,6 @@ class ControllableScript {
                     this.process.removeAllListeners();
                 }
                 this.process = undefined;
-                fs.unlinkSync(this.tmpFileName);
                 resolve();
             });
         });

package/dist/common/library/index.js

@@ -259,6 +259,7 @@ function buildLibrary(config) {
             try {
                 const component = await (0, core_1.transform)(fs_1.default.readFileSync(iconFile, 'utf-8'), {
                     jsxRuntime: config.lib.newJsxTransform ? 'automatic' : 'classic',
+                    plugins: [require.resolve('@svgr/plugin-jsx')],
                 });
                 babel.transform(component, {
                     filename: iconFile,

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,11 +69,13 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@statoscope/webpack-plugin": "^5.26.2",
     "@svgr/core": "^8.0.0",
+    "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/webpack": "^8.0.1",
     "babel-loader": "^9.1.2",
     "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,8 +84,8 @@
     "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",
@@ -91,11 +93,12 @@
     "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",
@@ -109,16 +112,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",
+    "terser-webpack-plugin": "5.3.9",
     "ts-node": "10.9.1",
-    "tslib": "^2.5.0",
-    "typescript": "^5.1.3",
-    "webpack": "^5.85.1",
+    "tslib": "^2.6.0",
+    "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",