chore(web): remove install and build warnings (#7343)

2021-10-13 23:27:30 -04:00 · 2021-10-13 23:27:30 -04:00 · fc3573f1ca
commit fc3573f1ca
parent b611b8b4f9
11 changed files with 118 additions and 64 deletions
--- a/e2e/react/src/react-package.test.ts
+++ b/e2e/react/src/react-package.test.ts
@ -109,20 +109,14 @@ describe('Build React libraries and apps', () => {
      /*
       * 1. Without dependencies
       */
-      const childLibOutput = runCLI(`build ${childLib}`)
-        // FIX for windows and OSX where output names might get broken to multipleline
-        .replace(/\s\s\s││\s\s\s/gm, '');
-      const childLib2Output = runCLI(`build ${childLib2}`)
-        // FIX for windows and OSX where output names might get broken to multipleline
-        .replace(/\s\s\s││\s\s\s/gm, '');
+      runCLI(`build ${childLib}`);
+      runCLI(`build ${childLib2}`);

      checkFilesExist(`dist/libs/${childLib}/${childLib}.esm.js`);
      checkFilesExist(`dist/libs/${childLib}/${childLib}.umd.js`);
-      expect(childLibOutput).toContain(`Bundle complete: ${childLib}`);

      checkFilesExist(`dist/libs/${childLib2}/${childLib2}.esm.js`);
      checkFilesExist(`dist/libs/${childLib2}/${childLib2}.umd.js`);
-      expect(childLib2Output).toContain(`Bundle complete: ${childLib2}`);

      checkFilesExist(`dist/libs/${childLib}/assets/hello.txt`);
      checkFilesExist(`dist/libs/${childLib2}/README.md`);
@ -130,13 +124,10 @@ describe('Build React libraries and apps', () => {
      /*
       * 2. With dependencies
       */
-      let parentLibOutput = runCLI(`build ${parentLib}`)
-        // FIX for windows and OSX where output names might get broken to multipleline
-        .replace(/\s\s\s││\s\s\s/gm, '');
+      runCLI(`build ${parentLib}`);

      checkFilesExist(`dist/libs/${parentLib}/${parentLib}.esm.js`);
      checkFilesExist(`dist/libs/${parentLib}/${parentLib}.umd.js`);
-      expect(parentLibOutput).toContain(`Bundle complete: ${parentLib}`);

      const jsonFile = readJson(`dist/libs/${parentLib}/package.json`);
      expect(jsonFile.peerDependencies).toEqual(
@ -151,13 +142,11 @@ describe('Build React libraries and apps', () => {
       */
      rmDist();

-      parentLibOutput = runCLI(
-        `build ${parentLib} --with-deps --skip-nx-cache`
-      ).replace(/\s\s\s││\s\s\s/gm, '');
+      runCLI(`build ${parentLib} --with-deps --skip-nx-cache`);

-      expect(parentLibOutput).toContain(`Bundle complete: ${parentLib}`);
-      expect(parentLibOutput).toContain(`Bundle complete: ${childLib}`);
-      expect(parentLibOutput).toContain(`Bundle complete: ${childLib2}`);
+      checkFilesExist(`dist/libs/${parentLib}/${parentLib}.esm.js`);
+      checkFilesExist(`dist/libs/${childLib}/${childLib}.esm.js`);
+      checkFilesExist(`dist/libs/${childLib2}/${childLib2}.esm.js`);
    });

    it('should support --format option', () => {
--- a/e2e/react/src/react.test.ts
+++ b/e2e/react/src/react.test.ts
@ -70,7 +70,7 @@ describe('React Applications', () => {
    const libTestResults = await runCLIAsync(
      `build ${libName} --no-extract-css`
    );
-    expect(libTestResults.stdout).toContain(`Bundle complete: ${libName}`);
+    expect(libTestResults.stdout).toMatch(/Done in \d+\.\d+s/);

    checkFilesExist(
      `dist/libs/${libName}/package.json`,
--- a/package.json
+++ b/package.json
@ -145,7 +145,7 @@
    "eslint-plugin-react": "7.23.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "express": "4.17.1",
-    "file-loader": "4.2.0",
+    "file-loader": "^6.2.0",
    "file-type": "^16.2.0",
    "flat": "^5.0.2",
    "fork-ts-checker-webpack-plugin": "6.2.10",
@ -174,7 +174,7 @@
    "karma-webpack": "4.0.2",
    "kill-port": "^1.6.1",
    "less": "3.12.2",
-    "less-loader": "5.0.0",
+    "less-loader": "^10.1.0",
    "license-webpack-plugin": "2.3.15",
    "loader-utils": "1.2.3",
    "memfs": "^3.0.1",
@ -198,7 +198,7 @@
    "prettier": "2.3.2",
    "pretty-quick": "^3.1.0",
    "protractor": "5.4.3",
-    "raw-loader": "3.1.0",
+    "raw-loader": "^4.0.2",
    "react-redux": "7.2.3",
    "react-refresh": "^0.10.0",
    "react-router-dom": "5.1.2",
@ -206,23 +206,22 @@
    "release-it": "^14.11.3",
    "rollup": "^2.56.2",
    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-filesize": "^9.1.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.1",
    "rollup-plugin-typescript2": "^0.30.0",
    "rxjs": "6.6.7",
    "rxjs-for-await": "0.0.2",
    "sass": "^1.42.1",
-    "sass-loader": "8.0.2",
+    "sass-loader": "^12.2.0",
    "semver": "7.3.4",
    "source-map": "0.7.3",
    "source-map-loader": "^3.0.0",
    "source-map-support": "0.5.19",
    "strip-json-comments": "^3.1.1",
-    "style-loader": "1.0.0",
+    "style-loader": "^3.3.0",
    "styled-components": "5.0.0",
    "stylus": "0.54.5",
-    "stylus-loader": "3.0.2",
+    "stylus-loader": "^6.2.0",
    "tailwindcss": "^2.2.7",
    "tcp-port-used": "^1.0.2",
    "terser": "4.3.8",
@ -242,7 +241,7 @@
    "typedoc-plugin-markdown": "^3.10.3",
    "typescript": "~4.3.5",
    "unzipper": "^0.10.11",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
    "verdaccio": "^5.0.4",
    "webpack-dev-server": "^4.3.1",
    "webpack-sources": "^3.0.2",
--- a/packages/next/package.json
+++ b/packages/next/package.json
@ -45,7 +45,7 @@
    "chalk": "4.1.0",
    "eslint-config-next": "^11.1.2",
    "fs-extra": "^9.1.0",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
    "tsconfig-paths": "^3.9.0",
    "ts-node": "~9.1.1",
    "webpack-merge": "^5.8.0"
--- a/packages/react/package.json
+++ b/packages/react/package.json
@ -46,7 +46,7 @@
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "react-refresh": "^0.10.0",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
    "webpack": "^5.58.1",
    "webpack-merge": "^5.8.0",
    "@storybook/node-logger": "6.1.20",
--- a/packages/web/package.json
+++ b/packages/web/package.json
@ -48,11 +48,12 @@
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "autoprefixer": "^10.2.5",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.2.2",
    "babel-plugin-const-enum": "^1.0.1",
    "babel-plugin-macros": "^2.8.0",
    "babel-plugin-transform-async-to-promises": "^0.8.15",
    "babel-plugin-transform-typescript-metadata": "^0.3.1",
+    "bytes": "^3.1.0",
    "browserslist": "^4.16.6",
    "caniuse-lite": "^1.0.30001251",
    "chalk": "4.1.0",
@ -61,14 +62,14 @@
    "react-refresh": "^0.10.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
    "core-js": "^3.6.5",
-    "css-loader": "3.6.0",
+    "css-loader": "^6.4.0",
    "css-minimizer-webpack-plugin": "^3.1.1",
-    "file-loader": "4.2.0",
+    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "6.2.10",
    "fs-extra": "^9.1.0",
    "identity-obj-proxy": "3.0.0",
    "less": "3.12.2",
-    "less-loader": "5.0.0",
+    "less-loader": "^10.1.0",
    "license-webpack-plugin": "2.3.15",
    "loader-utils": "1.2.3",
    "mini-css-extract-plugin": "^2.1.0",
@ -77,25 +78,24 @@
    "open": "^7.4.2",
    "postcss": "8.3.0",
    "postcss-import": "14.0.2",
-    "postcss-loader": "4.2.0",
-    "raw-loader": "3.1.0",
+    "postcss-loader": "^6.1.1",
+    "raw-loader": "^4.0.2",
    "rxjs": "^6.5.4",
    "rxjs-for-await": "0.0.2",
    "rimraf": "^3.0.2",
    "rollup": "^2.56.2",
    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-filesize": "^9.1.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.1",
    "rollup-plugin-typescript2": "^0.30.0",
    "sass": "^1.42.1",
-    "sass-loader": "8.0.2",
+    "sass-loader": "^12.2.0",
    "semver": "7.3.4",
    "source-map": "0.7.3",
    "source-map-loader": "^3.0.0",
-    "style-loader": "1.0.0",
+    "style-loader": "^3.3.0",
    "stylus": "0.54.5",
-    "stylus-loader": "3.0.2",
+    "stylus-loader": "^6.2.0",
    "terser": "4.3.8",
    "terser-webpack-plugin": "^5.1.1",
    "ts-loader": "^9.2.6",
--- a/packages/web/src/executors/package/lib/analyze-plugin.ts
+++ b/packages/web/src/executors/package/lib/analyze-plugin.ts
@ -0,0 +1,22 @@
+import * as chalk from 'chalk';
+import { logger } from '@nrwl/devkit';
+
+const formatBytes = (bytes) => {
+  if (bytes === 0) return '0 Byte';
+  const k = 1000;
+  const dm = 3;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+export function analyze() {
+  return {
+    name: 'rollup-plugin-nx-analyzer',
+    renderChunk(source, chunk) {
+      const sourceBytes = formatBytes(source.length);
+      const fileName = chunk.fileName;
+      logger.info(`  ${chalk.bold(fileName)} ${chalk.cyan(sourceBytes)}`);
+    },
+  };
+}
--- a/packages/web/src/executors/package/package.impl.ts
+++ b/packages/web/src/executors/package/package.impl.ts
@ -27,6 +27,7 @@ import {
  NormalizedWebPackageOptions,
  normalizePackageOptions,
 } from './lib/normalize';
+import { analyze } from './lib/analyze-plugin';

 // These use require because the ES import isn't correct.
 const commonjs = require('@rollup/plugin-commonjs');
@ -35,7 +36,6 @@ const image = require('@rollup/plugin-image');
 const json = require('@rollup/plugin-json');
 const copy = require('rollup-plugin-copy');
 const postcss = require('rollup-plugin-postcss');
-const filesize = require('rollup-plugin-filesize');

 const fileExtensions = ['.js', '.jsx', '.ts', '.tsx'];

@ -114,6 +114,8 @@ export default async function* run(
      deleteOutputDir(context.root, options.outputPath);
    }

+    const start = process.hrtime.bigint();
+
    return from(rollupOptions)
      .pipe(
        concatMap((opts) =>
@ -121,26 +123,31 @@ export default async function* run(
            catchError((e) => {
              logger.error(`Error during bundle: ${e}`);
              return of({ success: false });
-            }),
-            last(),
-            tap({
-              next: (result) => {
-                if (result.success) {
-                  updatePackageJson(
-                    options,
-                    context,
-                    target,
-                    dependencies,
-                    packageJson
-                  );
-                  logger.info(`Bundle complete: ${context.projectName}`);
-                } else {
-                  logger.error(`Bundle failed: ${context.projectName}`);
-                }
-              },
            })
          )
-        )
+        ),
+        last(),
+        tap({
+          next: (result) => {
+            if (result.success) {
+              const end = process.hrtime.bigint();
+              const duration = `${(Number(end - start) / 1_000_000_000).toFixed(
+                2
+              )}s`;
+
+              updatePackageJson(
+                options,
+                context,
+                target,
+                dependencies,
+                packageJson
+              );
+              logger.info(`⚡ Done in ${duration}`);
+            } else {
+              logger.error(`Bundle failed: ${context.projectName}`);
+            }
+          },
+        })
      )
      .toPromise();
  }
@ -209,7 +216,7 @@ export function createRollupOptions(
        ].filter(Boolean),
      }),
      commonjs(),
-      filesize(),
+      analyze(),
      json(),
    ];

--- a/packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts
+++ b/packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts
@ -153,8 +153,10 @@ export function getStylesConfig(
          loader: require.resolve('less-loader'),
          options: {
            sourceMap: cssSourceMap,
-            javascriptEnabled: true,
-            ...lessPathOptions,
+            lessOptions: {
+              javascriptEnabled: true,
+              ...lessPathOptions,
+            },
          },
        },
      ],
@ -166,7 +168,9 @@ export function getStylesConfig(
          loader: require.resolve('stylus-loader'),
          options: {
            sourceMap: cssSourceMap,
-            paths: includePaths,
+            stylusOptions: {
+              include: includePaths,
+            },
          },
        },
      ],
--- a/packages/web/src/utils/web.config.ts
+++ b/packages/web/src/utils/web.config.ts
@ -258,7 +258,9 @@ export function getStylesPartial(
            {
              loader: require.resolve('less-loader'),
              options: {
-                paths: includePaths,
+                lessOptions: {
+                  paths: includePaths,
+                },
              },
            },
          ],
@ -270,7 +272,9 @@ export function getStylesPartial(
            {
              loader: require.resolve('stylus-loader'),
              options: {
-                paths: includePaths,
+                stylusOptions: {
+                  include: includePaths,
+                },
              },
            },
          ],
--- a/yarn.lock
+++ b/yarn.lock
@ -16799,6 +16799,13 @@ less-loader@5.0.0:
    loader-utils "^1.1.0"
    pify "^4.0.1"

+less-loader@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-10.1.0.tgz#4379bdff409d1eef36c4cb50611b8944a27659b2"
+  integrity sha512-Xz5e/YLoLmdWFu7XzzA6LVX8a2+6onDz5LJb8oLWAkOnIZ5Hjcpe+nf+Sta6UgEoIMfzWVrR3XlIVfPeZDb10A==
+  dependencies:
+    klona "^2.0.4"
+
 less@3.12.2:
  version "3.12.2"
  resolved "https://registry.yarnpkg.com/less/-/less-3.12.2.tgz#157e6dd32a68869df8859314ad38e70211af3ab4"
@ -22522,6 +22529,14 @@ sass-loader@^10.1.0:
    schema-utils "^3.0.0"
    semver "^7.3.2"

+sass-loader@^12.2.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.2.0.tgz#b370010fb0ababae2ef9c6c89e05d6c6debc6042"
+  integrity sha512-qducnp5vSV+8A8MZxuH6zV0MUg4MOVISScl2wDTCAn/2WJX+9Auxh92O/rnkdR2bvi5QxZBafnzkzRrWGZvm7w==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
 sass@1.36.0:
  version "1.36.0"
  resolved "https://registry.yarnpkg.com/sass/-/sass-1.36.0.tgz#5912ef9d5d16714171ba11cb17edb274c4bbc07e"
@ -23728,6 +23743,11 @@ style-loader@^1.3.0:
    loader-utils "^2.0.0"
    schema-utils "^2.7.0"

+style-loader@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.0.tgz#d66ea95fc50b22f8b79b69a9e414760fcf58d8d8"
+  integrity sha512-szANub7ksJtQioJYtpbWwh1hUl99uK15n5HDlikeCRil/zYMZgSxucHddyF/4A3qJMUiAjPhFowrrQuNMA7jwQ==
+
 style-to-object@0.3.0, style-to-object@^0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
@ -23801,6 +23821,15 @@ stylus-loader@6.1.0:
    klona "^2.0.4"
    normalize-path "^3.0.0"

+stylus-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-6.2.0.tgz#0ba499e744e7fb9d9b3977784c8639728a7ced8c"
+  integrity sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==
+  dependencies:
+    fast-glob "^3.2.7"
+    klona "^2.0.4"
+    normalize-path "^3.0.0"
+
 stylus@0.54.5:
  version "0.54.5"
  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"