packages/cli: switch rollup to use esbuild

packages/cli/@types/rollup-plugin-esbuild.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare module 'rollup-plugin-esbuild';

packages/cli/package.json

@@ -63,6 +63,7 @@
     "recursive-readdir": "^2.2.2",
     "replace-in-file": "^6.0.0",
     "rollup": "^2.3.2",
+    "rollup-plugin-esbuild": "^1.4.1",
     "rollup-plugin-image-files": "^1.4.2",
     "rollup-plugin-peer-deps-external": "^2.2.2",
     "rollup-plugin-postcss": "^3.1.1",

packages/cli/src/lib/packager/config.ts

@@ -15,14 +15,13 @@
  */
 
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import typescript from 'rollup-plugin-typescript2';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import postcss from 'rollup-plugin-postcss';
+import esbuild from 'rollup-plugin-esbuild';
 import imageFiles from 'rollup-plugin-image-files';
 import json from '@rollup/plugin-json';
 import { RollupWatchOptions } from 'rollup';
-import { paths } from '../paths';
 
 export const makeConfig = (): RollupWatchOptions => {
   return {
@@ -45,20 +44,8 @@ export const makeConfig = (): RollupWatchOptions => {
       postcss(),
       imageFiles(),
       json(),
-      typescript({
-        include: `${paths.resolveTarget('src')}/**/*.{js,jsx,ts,tsx}`,
-        tsconfigOverride: {
-          // The dev folder is for the local plugin serve, ignore it in the build
-          // If we don't do this we get a folder structure similar to dist/{src,dev}/...
-          exclude: ['dev'],
-          compilerOptions: {
-            // Use absolute path to src dir as root for declarations, relying on the default
-            // seems to produce declaration maps that are relative to dist/ instead of src/
-            // Using a relative path like ../src doesn't work either becaus it will be used as is in subdirs.
-            sourceRoot: paths.resolveTarget('src'),
-          },
-        },
-        clean: true,
+      esbuild({
+        target: 'es2019',
       }),
     ],
   };

packages/cli/src/lib/packager/packager.ts

@@ -16,6 +16,7 @@
 
 import { rollup, OutputOptions } from 'rollup';
 import chalk from 'chalk';
+import { relative as relativePath } from 'path';
 import { paths } from '../paths';
 import { makeConfig } from './config';
 
@@ -24,8 +25,19 @@ function formatErrorMessage(error: any) {
 
   if (error.code === 'PLUGIN_ERROR') {
     // typescript2 plugin has a complete message with all codeframes
-    if (error.plugin === 'rpt2') {
-      msg += `${error.message}\n`;
+    if (error.plugin === 'esbuild') {
+      msg += `${error.message}\n\n`;
+      for (const { text, location } of error.errors) {
+        const { line, column } = location;
+        const path = relativePath(paths.targetDir, error.id);
+        const loc = chalk.cyan(`${path}:${line}:${column}`);
+
+        if (text === 'Unexpected "<"' && error.id.endsWith('.js')) {
+          msg += `${loc}: ${text}, JavaScript files with JSX should use a .jsx extension`;
+        } else {
+          msg += `${loc}: ${text}`;
+        }
+      }
     } else {
       // Log which plugin is causing errors to make it easier to identity.
       // If we see these in logs we likely want to provide some custom error

yarn.lock

@@ -2557,7 +2557,7 @@
     is-module "^1.0.0"
     resolve "^1.14.2"
 
-"@rollup/pluginutils@^3.0.0", "@rollup/pluginutils@^3.0.8":
+"@rollup/pluginutils@^3.0.0", "@rollup/pluginutils@^3.0.10", "@rollup/pluginutils@^3.0.8":
   version "3.0.10"
   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
   integrity sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==
@@ -8471,6 +8471,11 @@ es6-shim@^0.35.5:
   resolved "https://registry.npmjs.org/es6-shim/-/es6-shim-0.35.5.tgz#46f59dc0a84a1c5029e8ff1166ca0a902077a9ab"
   integrity sha512-E9kK/bjtCQRpN1K28Xh4BlmP8egvZBGJJ+9GtnzOwt7mdqtrjHFuVGr7QJfdjBIKqrlU5duPf3pCBoDrkjVYFg==
 
+esbuild@^0.3.0:
+  version "0.3.3"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.3.3.tgz#7791f4c8d7db77fe7fef304a7ed1e09749b24594"
+  integrity sha512-RFl1rLwo8MPHjq1G2EfPYbt6a0cvi74H+sPzkiNPq9mkQJj2d1U78j+ukZMDayZah9MptCM0rDuxFC+WUi2xUQ==
+
 escape-goat@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
@@ -17400,6 +17405,14 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-esbuild@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-1.4.1.tgz#b388ebd4cda1198208d7746feea7656d485019b0"
+  integrity sha512-gTzKtVo/OiOOe6pwRFHQCyCtEeYxcxLmjpqMiT4TnwXtPdF8RNP9c5wh/NZPztQydcMdEe1W+TO7poXwbLQekw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.10"
+    esbuild "^0.3.0"
+
 rollup-plugin-image-files@^1.4.2:
   version "1.4.2"
   resolved "https://registry.npmjs.org/rollup-plugin-image-files/-/rollup-plugin-image-files-1.4.2.tgz#0a329723bace95168a9a6efdacb51370c14fbfe5"