update rollup config

Author: kevinwcyu

.gitignore

@@ -5,4 +5,5 @@ cypress/report.json
 cypress/screenshots/actual
 cypress/videos/
 dist/
+compiled/
 yarn-error.log

.npmignore

@@ -1,4 +1,5 @@
 pkg
 src
 node_modules
-coverage
+coverage
+compiled

package.json

@@ -8,19 +8,27 @@
     "build": "yarn clean && yarn typecheck && yarn bundle",
     "bundle": "rollup -c rollup.config.ts",
     "clean": "rimraf ./dist ./compiled",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc -p ./tsconfig.build.json ",
     "test": "jest --notify --watch",
     "test:coverage": "jest --coverage",
     "test-ci": "grafana-toolkit plugin:test"
   },
+  "publishConfig": {
+    "main": "dist/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/index.d.ts",
+    "access": "public"
+  },
   "files": [
     "index.js",
     "dist"
   ],
   "repository": "github:grafana/grafana-async-query-support",
   "author": "Grafana Labs <team@grafana.com> (https://grafana.com)",
   "license": "Apache-2.0",
-  "dependencies": {},
+  "dependencies": {
+    "tslib": "^2.4.1"
+  },
   "devDependencies": {
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
@@ -29,9 +37,7 @@
     "@grafana/runtime": "8.4.7",
     "@grafana/toolkit": "8.4.7",
     "@grafana/ui": "8.4.7",
-    "@rollup/plugin-commonjs": "11.0.2",
-    "@rollup/plugin-json": "4.0.3",
-    "@rollup/plugin-node-resolve": "7.1.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.1.0",
@@ -47,16 +53,16 @@
     "@types/rollup-plugin-visualizer": "2.6.0",
     "@types/sinon": "^7.5.2",
     "babel-jest": "^26.6.3",
+    "esbuild": "^0.15.13",
     "jest": "^26.6.3",
     "pretty-format": "25.1.0",
     "react-select-event": "^5.3.0",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "2.0.6",
-    "rollup-plugin-sourcemaps": "0.5.0",
-    "rollup-plugin-terser": "5.3.0",
-    "rollup-plugin-typescript2": "^0.29.0",
-    "rollup-plugin-visualizer": "3.3.1",
+    "rollup": "^2.79.1",
+    "rollup-plugin-dts": "^5.0.0",
+    "rollup-plugin-esbuild": "^4.10.1",
+    "rollup-plugin-node-externals": "^5.0.2",
     "sinon": "8.1.1"
   },
   "resolutions": {

rollup.config.ts

@@ -1,43 +1,43 @@
 import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import { terser } from 'rollup-plugin-terser';
-
-import typescript from 'rollup-plugin-typescript2';
+import path from 'path';
+import dts from 'rollup-plugin-dts';
+import esbuild from 'rollup-plugin-esbuild';
+import { externals } from 'rollup-plugin-node-externals';
 
 const pkg = require('./package.json');
 
-const libraryName = pkg.name;
-
-const buildCjsPackage = ({ env }) => {
-  return {
+export default [
+  {
     input: 'src/index.ts',
+    plugins: [
+      externals({
+        deps: true,
+        include: ['react', '@grafana/data', '@grafana/ui', '@grafana/runtime', 'lodash', 'rxjs'],
+        packagePath: './package.json',
+      }),
+      resolve(),
+      esbuild(),
+    ],
     output: [
       {
-        file: `dist/index.${env}.js`,
-        name: libraryName,
         format: 'cjs',
         sourcemap: true,
-        chunkFileNames: `[name].${env}.js`,
-        strict: false,
-        exports: 'named',
-        globals: {
-          react: 'React',
-          'prop-types': 'PropTypes',
-        },
+        dir: path.dirname(pkg.publishConfig.main),
+      },
+      {
+        format: 'esm',
+        sourcemap: true,
+        dir: path.dirname(pkg.publishConfig.module),
+        preserveModules: true,
       },
     ],
-    external: ['react', '@grafana/data', '@grafana/ui', '@grafana/runtime', 'lodash', 'rxjs'],
-    plugins: [
-      typescript({
-        rollupCommonJSResolveHack: false,
-        clean: true,
-      }),
-      commonjs({
-        include: /node_modules/,
-      }),
-      resolve(),
-      env === 'production' && terser(),
-    ],
-  };
-};
-export default [buildCjsPackage({ env: 'development' }), buildCjsPackage({ env: 'production' })];
+  },
+  {
+    input: './compiled/index.d.ts',
+    plugins: [dts()],
+    output: {
+      file: pkg.publishConfig.types,
+      format: 'es',
+    },
+  },
+];

tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "exclude": ["**/*.test.ts*", "**/*.test.tsx", "dist", "node_modules"],
+  "extends": "./tsconfig.json"
+}

tsconfig.json

@@ -1,12 +1,11 @@
 {
-  "extends": "@grafana/tsconfig/base.json",
+  "extends": "@grafana/tsconfig",
   "include": ["src", "index.js"],
   "compilerOptions": {
-    "rootDir": "./src",
     "baseUrl": "./src",
+    "rootDir": "./src",
     "typeRoots": ["./node_modules/@types"],
-    "declaration": true,
-    "outDir": "dist",
-    "target": "es6"
+    "declarationDir": "./compiled",
+    "emitDeclarationOnly": true
   }
 }