Build: Introduce ESM and Treeshaking to NPM package builds (#51517)

* Revert "Chore: Bump terser to fix security vulnerability (#53052)"

This reverts commit 7ae74d2a18.

* feat: use tsc and rollup directly with esbuild and publishConfig, files props

* refactor(grafana-data): fix isolatedModules re-export type error

* refactor(grafana-data): import paths from src not package name

* refactor(rollup): fix dts output.file

* chore(grafana-schema): delete dashboard_experimental.gen.ts - cannot work with isolatedModules

* refactor(grafana-e2e-selectors): fix export types isolatedModules error

* refactor(grafana-runtime): fix isolatedModules re-export type error

* refactor(grafana-ui): fix isolatedModules re-export type error

* feat(grafana-ui): use named imports for treeshaking

* refactor(grafana-ui): use named imports for treeshaking

* feat: react and react-dom as peerDeps for packages

* feat(grafana-ui): emotion packages as peerDeps

* feat(grafana-e2e): use tsc, rollup, esbuild for bundling

* chore(packages): clean up redundant dependencies

* chore(toolkit): deprecate unused package:build task

* chore(schema): put back dashboard_experimental and exclude to prevent isolatedModules error

* docs(packages): update readme

* chore(storybook): disable isolatedModules for builds

* chore: relax peerDeps for emotion and react

* revert(grafana-ui): put @emotion dependencies back

* refactor: replace relative package imports with package name

* build(packages): set emitDeclaration false for typecheck scripts to work

* test(publicdashboarddatasource): move test next to implementation. try to appease the betterer gods

* chore(storybook): override ts-node config for storybook compilation

* refactor(grafana-data): use ternary so babel doesnt complain about expecting flow types

* chore(toolkit): prefer files and publishConfig package.json props over copying

* build(npm): remove --contents dist arg from publishing commands

* chore(packages): introduce sideEffects prop to package.json to hint package can be treeshaken

* chore(packages): remove redundant index.js files

* feat(packages): set publishConfig.access to public

* feat(packages): use yarn berry and npm for packaging and publishing

* refactor(packages): simplify rollup configs

* chore(schema): add comment explaining need to exclude dashboard_experimental

* revert(toolkit): put back clean to prevent cli failures

* ci(packages): run packages:pack before a canary publish

* chore(gitignore): add npm-artifacts directory to ignore list

* test(publicdashboarddatasource): fix module mocking

* chore(packages): delete package.tgz when running clean

* chore(grafana-data): move dependencies from devDeps to prevent build resolution errors

packages/grafana-data/rollup.config.ts

@@ -1,44 +1,37 @@
-import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
 import path from 'path';
-import sourceMaps from 'rollup-plugin-sourcemaps';
-import { terser } from 'rollup-plugin-terser';
+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 {
-    input: `compiled/index.js`,
+export default [
+  {
+    input: 'src/index.ts',
+    plugins: [externals({ deps: true, packagePath: './package.json' }), resolve(), esbuild()],
     output: [
       {
-        file: `dist/index.${env}.js`,
-        name: libraryName,
         format: 'cjs',
         sourcemap: true,
-        exports: 'named',
-        globals: {},
+        dir: path.dirname(pkg.publishConfig.main),
+      },
+      {
+        format: 'esm',
+        sourcemap: true,
+        dir: path.dirname(pkg.publishConfig.module),
+        preserveModules: true,
+        // @ts-expect-error (TS cannot assure that `process.env.PROJECT_CWD` is a string)
+        preserveModulesRoot: path.join(process.env.PROJECT_CWD, `packages/grafana-data/src`),
       },
     ],
-    external: [
-      'lodash',
-      'rxjs',
-      '@grafana/schema', // Load from host
-    ],
-    plugins: [
-      resolve(),
-      json({
-        include: [path.relative('.', require.resolve('moment-timezone/data/packed/latest.json'))], // absolute path throws an error for whatever reason
-      }),
-      commonjs({
-        include: /node_modules/,
-      }),
-      resolve(),
-      sourceMaps(),
-      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',
+    },
+  },
+];