@gravity-ui/app-builder 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.6.3](https://github.com/gravity-ui/app-builder/compare/v0.6.2...v0.6.3) (2023-07-31)
+
+
+### Bug Fixes
+
+* **build-lib:** replace style and svg paths with babel plugin ([#60](https://github.com/gravity-ui/app-builder/issues/60)) ([3b7760e](https://github.com/gravity-ui/app-builder/commit/3b7760e0af7350e60c9d3c7a704e510958d46050))
+* **build:** always dedupe css modules ([#55](https://github.com/gravity-ui/app-builder/issues/55)) ([6ea483e](https://github.com/gravity-ui/app-builder/commit/6ea483eb335eb24f80f9dddc33943f0a12336281))
+* **css:** disable sass loaders for pure css ([#56](https://github.com/gravity-ui/app-builder/issues/56)) ([1c23832](https://github.com/gravity-ui/app-builder/commit/1c2383299f1f4cbbc826acdd2b6231c15ab26956))
+* **webworker:** correctly handle licenses and do not emit assets twice ([#58](https://github.com/gravity-ui/app-builder/issues/58)) ([e514bc6](https://github.com/gravity-ui/app-builder/commit/e514bc68ac9bed6cbbfaeddbaa95d8ea8f459acc))
+
+## [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)
 
 

package/dist/common/library/babel-plugin-remove-css-imports.d.ts

@@ -0,0 +1,6 @@
+declare const _default: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
+    visitor: {
+        ImportDeclaration(this: import("@babel/core").PluginPass, path: import("@babel/traverse").NodePath<import("@babel/types").ImportDeclaration>): void;
+    };
+};
+export default _default;

package/dist/common/library/babel-plugin-remove-css-imports.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const helper_plugin_utils_1 = require("@babel/helper-plugin-utils");
+exports.default = (0, helper_plugin_utils_1.declare)(function () {
+    return {
+        visitor: {
+            ImportDeclaration(path) {
+                const source = path.node.source.value;
+                if (source.endsWith('.css')) {
+                    path.remove();
+                }
+            },
+        },
+    };
+});

package/dist/common/library/babel-plugin-replace-paths.d.ts

@@ -0,0 +1,8 @@
+declare const _default: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
+    visitor: {
+        ImportDeclaration(this: import("@babel/core").PluginPass, path: import("@babel/traverse").NodePath<import("@babel/types").ImportDeclaration>): void;
+        ExportNamedDeclaration(this: import("@babel/core").PluginPass, path: import("@babel/traverse").NodePath<import("@babel/types").ExportNamedDeclaration>): void;
+        CallExpression(this: import("@babel/core").PluginPass, path: import("@babel/traverse").NodePath<import("@babel/types").CallExpression>): void;
+    };
+};
+export default _default;

package/dist/common/library/babel-plugin-replace-paths.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const helper_plugin_utils_1 = require("@babel/helper-plugin-utils");
+const svgPathRe = /^\.\.\/(.*)\/assets\/(.*)\.svg$/;
+exports.default = (0, helper_plugin_utils_1.declare)(function (api) {
+    return {
+        visitor: {
+            ImportDeclaration(path) {
+                const source = path.node.source.value;
+                if (source.startsWith('.') && source.endsWith('.scss')) {
+                    path.node.source.value = source.slice(0, -4) + 'css';
+                }
+                else {
+                    const match = source.match(svgPathRe);
+                    if (match) {
+                        path.node.source.value = `${match[1]}/assets/${match[2]}`;
+                    }
+                }
+            },
+            ExportNamedDeclaration(path) {
+                const sourceNode = path.node.source;
+                const specifier = path.node.specifiers[0];
+                if (api.types.isStringLiteral(sourceNode) &&
+                    api.types.isExportSpecifier(specifier) &&
+                    specifier.local.name === 'default') {
+                    const match = sourceNode.value.match(svgPathRe);
+                    if (match) {
+                        sourceNode.value = `${match[1]}/assets/${match[2]}`;
+                    }
+                }
+            },
+            CallExpression(path) {
+                const firstArgument = path.node.arguments[0];
+                if (path.node.callee.type === 'Import' &&
+                    api.types.isStringLiteral(firstArgument)) {
+                    const match = firstArgument.value.match(svgPathRe);
+                    if (match) {
+                        firstArgument.value = `${match[1]}/assets/${match[2]}`;
+                    }
+                }
+            },
+        },
+    };
+});

package/dist/common/library/index.js

@@ -72,13 +72,13 @@ function compileToCjs(code, file, inputSourceMap, sourceDir = paths_1.default.sr
     const compiledCjsDir = path_1.default.dirname(compiledCjsFile);
     const sourcemapCjsFile = getFilePath(file, { dir: compiledDir, ext: 'js.map' });
     const sourcemapCjsUrl = `// #sourceMappingURL=${path_1.default.basename(sourcemapCjsFile)}`;
-    const finalCode = code.replace(/import '(.*)\.css';/g, '');
     fs_1.default.mkdirSync(compiledCjsDir, { recursive: true });
-    babel.transform(finalCode, {
+    babel.transform(code, {
         filename: sourceFile,
         plugins: [
-            '@babel/plugin-transform-modules-commonjs',
-            '@babel/plugin-proposal-dynamic-import',
+            require.resolve('./babel-plugin-remove-css-imports'),
+            require.resolve('@babel/plugin-transform-modules-commonjs'),
+            require.resolve('@babel/plugin-proposal-dynamic-import'),
         ],
         sourceMaps: true,
         inputSourceMap,
@@ -193,6 +193,7 @@ function buildLibrary(config) {
                     },
                 ],
                 require.resolve('babel-plugin-lodash'),
+                require.resolve('./babel-plugin-replace-paths'),
             ],
             sourceMaps: true,
         }, (err, transformed) => {
@@ -202,13 +203,8 @@ function buildLibrary(config) {
                 throw err;
             }
             else if (transformed) {
-                let code = transformed.code
-                    ?.replace(/import '\.(.*)\.scss';/g, "import '.$1.css';")
-                    ?.replace(/import (\w*) from '\.\.\/(.*)\/assets\/(.*)\.svg';/g, "import $1 from '$2/assets/$3';")
-                    ?.replace(/export { *default as (\w*) *} from '\.\.\/(.*)\/assets\/(.*)\.svg';/g, "export { default as $1 } from '$2/assets/$3';")
-                    ?.replace(/import\('\.\.\/(.*)\/assets\/(.*)\.svg'\)/g, "import('$1/assets/$2')") ?? '';
-                code += (code.length ? '\n' : '') + sourcemapUrl;
-                fs_1.default.writeFile(compiledFile, code, errorHandlerFactory(`Source compilation has failed on writing ${compiledFile}`));
+                const code = transformed.code ?? '';
+                fs_1.default.writeFile(compiledFile, (code.length ? '\n' : '') + sourcemapUrl, errorHandlerFactory(`Source compilation has failed on writing ${compiledFile}`));
                 if (transformed.map) {
                     fs_1.default.writeFile(sourcemapFile, JSON.stringify(transformed.map), errorHandlerFactory(`Source compilation has failed on writing ${sourcemapFile}`));
                 }
@@ -259,6 +255,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/webpack/config.js

@@ -102,6 +102,7 @@ function configureModuleRules(helperOptions) {
                 createWorkerRule(helperOptions),
                 createJavaScriptRule(helperOptions, jsLoader),
                 createStylesRule(helperOptions),
+                createSassStylesRule(helperOptions),
                 createIconsRule(helperOptions),
                 createIconsRule(helperOptions, jsLoader),
                 ...createAssetsRules(helperOptions),
@@ -328,7 +329,46 @@ function createWorkerRule(options) {
         ],
     };
 }
+function createSassStylesRule({ isEnvDevelopment, isEnvProduction, config, }) {
+    const loaders = getCssLoaders({
+        isEnvDevelopment,
+        isEnvProduction,
+        config,
+    });
+    loaders.push({
+        loader: require.resolve('resolve-url-loader'),
+        options: {
+            sourceMap: !config.disableSourceMapGeneration,
+        },
+    });
+    loaders.push({
+        loader: require.resolve('sass-loader'),
+        options: {
+            sourceMap: true,
+            sassOptions: {
+                includePaths: [paths_1.default.appClient],
+            },
+        },
+    });
+    return {
+        test: /\.scss$/,
+        sideEffects: isEnvProduction ? true : undefined,
+        use: loaders,
+    };
+}
 function createStylesRule({ isEnvDevelopment, isEnvProduction, config, }) {
+    const loaders = getCssLoaders({
+        isEnvDevelopment,
+        isEnvProduction,
+        config,
+    });
+    return {
+        test: /\.css$/,
+        sideEffects: isEnvProduction ? true : undefined,
+        use: loaders,
+    };
+}
+function getCssLoaders({ isEnvDevelopment, isEnvProduction, config }) {
     const loaders = [];
     if (isEnvProduction) {
         loaders.push(mini_css_extract_plugin_1.default.loader);
@@ -360,26 +400,7 @@ function createStylesRule({ isEnvDevelopment, isEnvProduction, config, }) {
             },
         });
     }
-    loaders.push({
-        loader: require.resolve('resolve-url-loader'),
-        options: {
-            sourceMap: !config.disableSourceMapGeneration,
-        },
-    });
-    loaders.push({
-        loader: require.resolve('sass-loader'),
-        options: {
-            sourceMap: true,
-            sassOptions: {
-                includePaths: [paths_1.default.appClient],
-            },
-        },
-    });
-    return {
-        test: /\.s?css$/,
-        sideEffects: isEnvProduction ? true : undefined,
-        use: loaders,
-    };
+    return loaders;
 }
 function createIconsRule({ isEnvProduction, config }, jsLoader) {
     const iconIncludes = config.icons || [];
@@ -709,6 +730,12 @@ function configureOptimization({ config }) {
                     test: new RegExp(`([\\\\/])node_modules\\1(${vendorsList.join('|')})\\1`),
                     priority: Infinity,
                 },
+                css: {
+                    test: /\.css$/,
+                    enforce: true,
+                    minChunks: 2,
+                    reuseExistingChunk: true,
+                },
             },
         },
         runtimeChunk: 'single',

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

@@ -78,7 +78,7 @@ const pitch = function (request) {
             if (cacheContent) {
                 return cb(null, cacheContent.content, cacheContent.map);
             }
-            const content = compilation.assets[filename]?.source();
+            let content = compilation.assets[filename]?.source().toString();
             const mapFile = `${filename}.map`;
             let map = compilation.assets[mapFile]?.source();
             if (map) {
@@ -88,11 +88,24 @@ const pitch = function (request) {
                 }
                 map = JSON.stringify(sourceMap);
             }
-            for (const [assetName, asset] of Object.entries(compilation.assets)) {
-                if ([filename, mapFile].includes(assetName)) {
-                    continue;
+            const licenseFile = `${filename}.LICENSE.txt`;
+            const license = compilation.assets[licenseFile]?.source().toString();
+            if (license && content) {
+                if (content.startsWith('/*')) {
+                    content = content.replace(/^\/\*.*?\*\//, license);
+                }
+            }
+            const parentCompilation = workerCompiler.parentCompilation;
+            if (parentCompilation) {
+                for (const [assetName, asset] of Object.entries(compilation.assets)) {
+                    if ([filename, mapFile, licenseFile].includes(assetName)) {
+                        continue;
+                    }
+                    if (parentCompilation.assetsInfo.has(assetName)) {
+                        continue;
+                    }
+                    parentCompilation.emitAsset(assetName, asset, compilation.assetsInfo.get(assetName));
                 }
-                workerCompiler.parentCompilation?.emitAsset(assetName, asset, compilation.assetsInfo.get(assetName));
             }
             return cache.store(cacheIdent, cacheETag, { content, map: map?.toString() }, (storeCacheError) => {
                 if (storeCacheError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "main": "dist/index.js",
@@ -58,6 +58,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.353.0",
     "@babel/core": "^7.21.4",
+    "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/plugin-proposal-decorators": "^7.21.0",
     "@babel/plugin-proposal-dynamic-import": "^7.18.6",
     "@babel/plugin-transform-modules-commonjs": "^7.21.2",
@@ -69,6 +70,7 @@
     "@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",
@@ -117,9 +119,9 @@
     "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.6.0",
-    "terser-webpack-plugin": "5.3.9",
     "typescript": "^5.1.6",
     "webpack": "^5.88.1",
     "webpack-assets-manifest": "^5.1.0",
@@ -135,6 +137,7 @@
     "@gravity-ui/eslint-config": "^1.0.2",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
+    "@types/babel__helper-plugin-utils": "^7.10.0",
     "@types/circular-dependency-plugin": "^5.0.5",
     "@types/common-tags": "^1.8.1",
     "@types/find-cache-dir": "^3.2.1",
@@ -152,6 +155,7 @@
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@types/webpack-manifest-plugin": "^3.0.5",
     "@types/yargs": "17.0.11",
+    "babel-plugin-tester": "^11.0.4",
     "eslint": "^8.42.0",
     "husky": "^8.0.3",
     "jest": "^29.5.0",