feat(terser): update to terser v5 and use its esm build

package.json

@@ -111,7 +111,7 @@
     "semiver": "^1.1.0",
     "semver": "7.3.2",
     "sizzle": "^2.3.5",
-    "terser": "4.8.0",
+    "terser": "5.1.0",
     "tslib": "^2.0.0",
     "typescript": "4.0.0-beta",
     "webpack": "^4.44.1",

scripts/bundles/compiler.ts

@@ -13,10 +13,11 @@ import { replacePlugin } from './plugins/replace-plugin';
 import { sizzlePlugin } from './plugins/sizzle-plugin';
 import { sysModulesPlugin } from './plugins/sys-modules-plugin';
 import { writePkgJson } from '../utils/write-pkg-json';
-import { BuildOptions } from '../utils/options';
-import { RollupOptions, OutputChunk } from 'rollup';
+import type { BuildOptions } from '../utils/options';
+import type { RollupOptions, OutputChunk } from 'rollup';
 import { typescriptSourcePlugin } from './plugins/typescript-source-plugin';
-import terser from 'terser';
+import { MinifyOptions, minify } from 'terser';
+import { terserPlugin } from './plugins/terser-plugin';
 
 export async function compiler(opts: BuildOptions) {
   const inputDir = join(opts.buildDir, 'compiler');
@@ -56,6 +57,7 @@ export async function compiler(opts: BuildOptions) {
     },
     plugins: [
       typescriptSourcePlugin(opts),
+      terserPlugin(opts),
       {
         name: 'compilerMockDocResolvePlugin',
         resolveId(id) {
@@ -115,7 +117,7 @@ export async function compiler(opts: BuildOptions) {
           if (opts.isProd) {
             const compilerFilename = Object.keys(bundleFiles).find(f => f.includes('stencil'));
             const compilerBundle = bundleFiles[compilerFilename] as OutputChunk;
-            const minified = minifyStencilCompiler(compilerBundle.code, opts);
+            const minified = await minifyStencilCompiler(compilerBundle.code, opts);
             await fs.writeFile(join(opts.output.compilerDir, compilerFilename.replace('.js', '.min.js')), minified);
           }
         },
@@ -142,8 +144,8 @@ export async function compiler(opts: BuildOptions) {
   return [compilerBundle];
 }
 
-function minifyStencilCompiler(code: string, opts: BuildOptions) {
-  const minifyOpts: terser.MinifyOptions = {
+async function minifyStencilCompiler(code: string, opts: BuildOptions) {
+  const minifyOpts: MinifyOptions = {
     ecma: 2018,
     compress: {
       ecma: 2018,
@@ -152,17 +154,13 @@ function minifyStencilCompiler(code: string, opts: BuildOptions) {
       unsafe_arrows: true,
       unsafe_methods: true,
     },
-    output: {
+    format: {
       ecma: 2018,
       comments: false,
     },
   };
 
-  const results = terser.minify(code, minifyOpts);
-
-  if (results.error) {
-    throw results.error;
-  }
+  const results = await minify(code, minifyOpts);
 
   code = getBanner(opts, `Stencil Compiler`, true) + '\n' + results.code;
 

scripts/bundles/dev-server.ts

@@ -7,9 +7,9 @@ import { aliasPlugin } from './plugins/alias-plugin';
 import { relativePathPlugin } from './plugins/relative-path-plugin';
 import { replacePlugin } from './plugins/replace-plugin';
 import { writePkgJson } from '../utils/write-pkg-json';
-import { BuildOptions } from '../utils/options';
-import { RollupOptions, OutputChunk, Plugin } from 'rollup';
-import terser from 'terser';
+import type { BuildOptions } from '../utils/options';
+import type { RollupOptions, OutputChunk, Plugin } from 'rollup';
+import { minify } from 'terser';
 import ts from 'typescript';
 import { prettyMinifyPlugin } from './plugins/pretty-minify';
 
@@ -145,7 +145,7 @@ export async function devServer(opts: BuildOptions) {
       appErrorCssPlugin(),
       {
         name: 'clientConnectorPlugin',
-        generateBundle(_options, bundle) {
+        async generateBundle(_options, bundle) {
           if (bundle[connectorName]) {
             let code = (bundle[connectorName] as OutputChunk).code;
 
@@ -164,13 +164,10 @@ export async function devServer(opts: BuildOptions) {
             code = intro + code + outro;
 
             if (opts.isProd) {
-              const minifyResults = terser.minify(code, {
+              const minifyResults = await minify(code, {
                 compress: { hoist_vars: true, hoist_funs: true, ecma: 5 },
-                output: { ecma: 5 },
+                format: { ecma: 5 },
               });
-              if (minifyResults.error) {
-                throw minifyResults.error;
-              }
               code = minifyResults.code;
             }
 

scripts/bundles/internal-platform-client.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import { basename, join } from 'path';
-import { BuildOptions } from '../utils/options';
+import type { BuildOptions } from '../utils/options';
 import { aliasPlugin } from './plugins/alias-plugin';
 import { replacePlugin } from './plugins/replace-plugin';
 import { reorderCoreStatementsPlugin } from './plugins/reorder-statements';
@@ -114,7 +114,7 @@ export async function internalClient(opts: BuildOptions) {
             let code = transpileToEs5.outputText;
 
             if (opts.isProd) {
-              const minifyResults = minify(code);
+              const minifyResults = await minify(code);
               code = minifyResults.code;
             }
 

scripts/bundles/plugins/parse5-plugin.ts

@@ -1,11 +1,11 @@
 import fs from 'fs-extra';
 import { aliasPlugin } from './alias-plugin';
 import { join } from 'path';
-import { BuildOptions } from '../../utils/options';
+import type { BuildOptions } from '../../utils/options';
 import rollupCommonjs from '@rollup/plugin-commonjs';
 import rollupResolve from '@rollup/plugin-node-resolve';
 import { rollup, OutputChunk, Plugin } from 'rollup';
-import terser from 'terser';
+import { minify } from 'terser';
 
 export function parse5Plugin(opts: BuildOptions): Plugin {
   return {
@@ -77,22 +77,18 @@ async function bundleParse5(opts: BuildOptions) {
   let code = output[0].code;
 
   if (opts.isProd) {
-    const minified = terser.minify(code, {
+    const minified = await minify(code, {
       ecma: 2018,
       module: true,
       compress: {
         ecma: 2018,
         passes: 2,
       },
-      output: {
+      format: {
         ecma: 2018,
         comments: false,
       },
     });
-
-    if (minified.error) {
-      throw minified.error;
-    }
     code = minified.code;
   }
 

scripts/bundles/plugins/pretty-minify.ts

@@ -1,26 +1,25 @@
-import { BuildOptions } from '../../utils/options';
-import { Plugin, OutputChunk } from 'rollup';
-import terser from 'terser';
+import type { BuildOptions } from '../../utils/options';
+import type { Plugin, OutputChunk } from 'rollup';
+import { minify } from 'terser';
 
 export function prettyMinifyPlugin(opts: BuildOptions, preamble?: string): Plugin {
   if (opts.isProd) {
     return {
       name: 'prettyMinifyPlugin',
-      generateBundle(_, bundles) {
-        Object.keys(bundles).forEach(fileName => {
-          const b = bundles[fileName] as OutputChunk;
-          if (typeof b.code === 'string') {
-            const minifyResults = terser.minify(b.code, {
-              compress: { hoist_vars: true, hoist_funs: true, ecma: 2018, keep_fnames: true, keep_classnames: true, module: true, arrows: true, passes: 2 },
-              output: { ecma: 2018, indent_level: 1, beautify: true, comments: false, preamble },
-              sourceMap: false,
-            });
-            if (minifyResults.error) {
-              throw minifyResults.error;
+      async generateBundle(_, bundles) {
+        await Promise.all(
+          Object.keys(bundles).map(async fileName => {
+            const b = bundles[fileName] as OutputChunk;
+            if (typeof b.code === 'string') {
+              const minifyResults = await minify(b.code, {
+                compress: { hoist_vars: true, hoist_funs: true, ecma: 2018, keep_fnames: true, keep_classnames: true, module: true, arrows: true, passes: 2 },
+                format: { ecma: 2018, indent_level: 1, beautify: true, comments: false, preamble },
+                sourceMap: false,
+              });
+              b.code = minifyResults.code;
             }
-            b.code = minifyResults.code;
-          }
-        });
+          }),
+        );
       },
     };
   }

scripts/bundles/plugins/terser-plugin.ts

@@ -0,0 +1,64 @@
+import fs from 'fs-extra';
+import { join } from 'path';
+import type { BuildOptions } from '../../utils/options';
+import { rollup, Plugin } from 'rollup';
+import { minify } from 'terser';
+
+export function terserPlugin(opts: BuildOptions): Plugin {
+  return {
+    name: 'terserPlugin',
+    resolveId(id) {
+      if (id === 'terser') {
+        return id;
+      }
+      return null;
+    },
+    async load(id) {
+      if (id === 'terser') {
+        return await bundleTerser(opts);
+      }
+      return null;
+    },
+  };
+}
+
+async function bundleTerser(opts: BuildOptions) {
+  const fileName = `terser-${opts.terserVersion.replace(/\./g, '_')}-bundle-cache${opts.isProd ? '.min' : ''}.js`;
+  const cacheFile = join(opts.scriptsBuildDir, fileName);
+
+  try {
+    return await fs.readFile(cacheFile, 'utf8');
+  } catch (e) {}
+
+  const rollupBuild = await rollup({
+    input: join(opts.nodeModulesDir, 'terser', 'main.js'),
+    external: ['source-map'],
+  });
+
+  const { output } = await rollupBuild.generate({
+    format: 'es',
+    preferConst: true,
+    strict: false,
+  });
+
+  let code = output[0].code;
+
+  if (opts.isProd) {
+    const minified = await minify(code, {
+      ecma: 2018,
+      compress: {
+        ecma: 2018,
+        passes: 2,
+      },
+      format: {
+        ecma: 2018,
+        comments: false,
+      },
+    });
+    code = minified.code;
+  }
+
+  await fs.writeFile(cacheFile, code);
+
+  return code;
+}

scripts/bundles/plugins/typescript-source-plugin.ts

@@ -1,8 +1,8 @@
 import fs from 'fs-extra';
-import { Plugin } from 'rollup';
+import type { Plugin } from 'rollup';
 import { join } from 'path';
-import { BuildOptions } from '../../utils/options';
-import terser from 'terser';
+import type { BuildOptions } from '../../utils/options';
+import { minify } from 'terser';
 
 export function typescriptSourcePlugin(opts: BuildOptions): Plugin {
   const tsPath = require.resolve('typescript');
@@ -73,22 +73,18 @@ async function bundleTypeScriptSource(tsPath: string, opts: BuildOptions) {
   code = o.join('\n');
 
   if (opts.isProd) {
-    const minified = terser.minify(code, {
+    const minified = await minify(code, {
       ecma: 2018,
       module: true,
       compress: {
         ecma: 2018,
         passes: 2,
       },
-      output: {
+      format: {
         ecma: 2018,
         comments: false,
       },
     });
-
-    if (minified.error) {
-      throw minified.error;
-    }
     code = minified.code;
   }
 

scripts/bundles/sys-node.ts

@@ -1,11 +1,11 @@
 import fs from 'fs-extra';
 import { join } from 'path';
 import webpack from 'webpack';
-import terser from 'terser';
+import { minify } from 'terser';
 import rollupCommonjs from '@rollup/plugin-commonjs';
 import rollupResolve from '@rollup/plugin-node-resolve';
-import { BuildOptions } from '../utils/options';
-import { RollupOptions } from 'rollup';
+import type { BuildOptions } from '../utils/options';
+import type { RollupOptions } from 'rollup';
 import { relativePathPlugin } from './plugins/relative-path-plugin';
 import { aliasPlugin } from './plugins/alias-plugin';
 import { prettyMinifyPlugin } from './plugins/pretty-minify';
@@ -191,12 +191,13 @@ function bundleExternal(opts: BuildOptions, outputDir: string, cachedDir: string
             let code = await fs.readFile(outputFile, 'utf8');
 
             if (opts.isProd) {
-              const minifyResults = terser.minify(code);
-              if (minifyResults.error) {
-                rejectBundle(minifyResults.error);
+              try {
+                const minifyResults = await minify(code);
+                code = minifyResults.code;
+              } catch (e) {
+                rejectBundle(e);
                 return;
               }
-              code = minifyResults.code;
             }
             await fs.writeFile(cachedFile, code);
             await fs.writeFile(outputFile, code);

src/compiler/config/validate-config.ts

@@ -47,8 +47,6 @@ export const validateConfig = (userConfig?: Config) => {
   setBooleanConfig(config, 'minifyJs', null, !config.devMode);
   setBooleanConfig(config, 'sourceMap', null, false);
   setBooleanConfig(config, 'watch', 'watch', false);
-  setBooleanConfig(config, 'minifyCss', null, !config.devMode);
-  setBooleanConfig(config, 'minifyJs', null, !config.devMode);
   setBooleanConfig(config, 'buildDocs', 'docs', !config.devMode);
   setBooleanConfig(config, 'buildDist', 'esm', !config.devMode || config.buildEs5);
   setBooleanConfig(config, 'profile', 'profile', config.devMode);