Chore: Remove rollup-plugin-dts (#106442)

* chore(packages): remove rollup dts plugin

* build(packages): add rollup copy plugin settings to copy ts declarations to esm and cjs builds

* build(packages): remove copy settings as result doesnt pass attw cli checks

* build(packages): use single types output in dist/types directory

* ci(packages): update prepare and validate scripts for single type builds

* fix(grafana-schema): copy raw types to dist/esm directory for grafana/scenes support

packages/grafana-data/package.json

@@ -38,7 +38,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "files": [
@@ -96,7 +96,6 @@
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
     "rollup": "^4.22.4",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "6.2.0",
     "rollup-plugin-node-externals": "^8.0.0",
     "typescript": "5.7.3"

packages/grafana-data/rollup.config.ts

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module';
 
-import { entryPoint, plugins, esmOutput, cjsOutput, tsDeclarationOutput } from '../rollup.config.parts';
+import { entryPoint, plugins, esmOutput, cjsOutput } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
@@ -16,18 +16,4 @@ export default [
     plugins,
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-data')],
   },
-  tsDeclarationOutput(pkg),
-  tsDeclarationOutput(pkg, {
-    input: './compiled/unstable.d.ts',
-    output: [
-      {
-        file: './dist/cjs/unstable.d.cts',
-        format: 'cjs',
-      },
-      {
-        file: './dist/esm/unstable.d.mts',
-        format: 'es',
-      },
-    ],
-  }),
 ];

packages/grafana-data/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "declarationDir": "./compiled",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "rootDirs": ["."]

packages/grafana-e2e-selectors/package.json

@@ -21,7 +21,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "files": [
@@ -45,7 +45,6 @@
     "esbuild": "0.25.0",
     "rimraf": "6.0.1",
     "rollup": "^4.22.4",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "6.2.0",
     "rollup-plugin-node-externals": "^8.0.0"
   },

packages/grafana-e2e-selectors/rollup.config.ts

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module';
 
-import { cjsOutput, entryPoint, esmOutput, plugins, tsDeclarationOutput } from '../rollup.config.parts';
+import { cjsOutput, entryPoint, esmOutput, plugins } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
@@ -11,5 +11,4 @@ export default [
     plugins,
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-e2e-selectors')],
   },
-  tsDeclarationOutput(pkg),
 ];

packages/grafana-e2e-selectors/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "declarationDir": "./compiled",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "rootDirs": ["."]

packages/grafana-flamegraph/package.json

@@ -21,7 +21,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "files": [
@@ -77,7 +77,6 @@
     "jest": "^29.6.4",
     "jest-canvas-mock": "2.5.2",
     "rollup": "^4.22.4",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "6.2.0",
     "rollup-plugin-node-externals": "^8.0.0",
     "ts-jest": "29.2.5",

packages/grafana-flamegraph/rollup.config.ts

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module';
 
-import { cjsOutput, entryPoint, esmOutput, plugins, tsDeclarationOutput } from '../rollup.config.parts';
+import { cjsOutput, entryPoint, esmOutput, plugins } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
@@ -11,5 +11,4 @@ export default [
     plugins,
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-flamegraph')],
   },
-  tsDeclarationOutput(pkg),
 ];

packages/grafana-flamegraph/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "baseUrl": "./",
-    "declarationDir": "./compiled",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "rootDirs": ["."]

packages/grafana-i18n/package.json

@@ -35,7 +35,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "files": [

packages/grafana-i18n/rollup.config.ts

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';
 import copy from 'rollup-plugin-copy';
 
-import { entryPoint, plugins, esmOutput, cjsOutput, tsDeclarationOutput } from '../rollup.config.parts';
+import { entryPoint, plugins, esmOutput, cjsOutput } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
@@ -17,5 +17,4 @@ export default [
     ],
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-i18n')],
   },
-  tsDeclarationOutput(pkg),
 ];

packages/grafana-i18n/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "declarationDir": "./compiled",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "rootDirs": ["."]

packages/grafana-prometheus/package.json

@@ -26,7 +26,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "scripts": {
@@ -96,7 +96,6 @@
     "react-dom": "18.3.1",
     "react-select-event": "5.5.1",
     "rollup": "^4.22.4",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "6.2.0",
     "rollup-plugin-node-externals": "^8.0.0",
     "testing-library-selector": "0.3.1",

packages/grafana-prometheus/rollup.config.ts

@@ -1,7 +1,7 @@
 import image from '@rollup/plugin-image';
 import { createRequire } from 'node:module';
 
-import { cjsOutput, entryPoint, esmOutput, plugins, tsDeclarationOutput } from '../rollup.config.parts';
+import { cjsOutput, entryPoint, esmOutput, plugins } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
@@ -12,5 +12,4 @@ export default [
     plugins: [...plugins, image()],
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-prometheus')],
   },
-  tsDeclarationOutput(pkg),
 ];

packages/grafana-prometheus/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "alwaysStrict": true,
-    "declarationDir": "./compiled",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "allowJs": true,

packages/grafana-runtime/package.json

@@ -35,7 +35,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "files": [
@@ -84,7 +84,6 @@
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
     "rollup": "^4.22.4",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "6.2.0",
     "rollup-plugin-node-externals": "^8.0.0",
     "rollup-plugin-sourcemaps": "0.6.3",

packages/grafana-runtime/rollup.config.ts

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module';
 
-import { cjsOutput, entryPoint, esmOutput, plugins, tsDeclarationOutput } from '../rollup.config.parts';
+import { cjsOutput, entryPoint, esmOutput, plugins } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
@@ -16,18 +16,4 @@ export default [
     plugins,
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-runtime')],
   },
-  tsDeclarationOutput(pkg),
-  tsDeclarationOutput(pkg, {
-    input: './compiled/unstable.d.ts',
-    output: [
-      {
-        file: './dist/cjs/unstable.d.cts',
-        format: 'cjs',
-      },
-      {
-        file: './dist/esm/unstable.d.mts',
-        format: 'es',
-      },
-    ],
-  }),
 ];

packages/grafana-runtime/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "baseUrl": "./",
-    "declarationDir": "./compiled",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "allowJs": true,

packages/grafana-schema/package.json

@@ -18,7 +18,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "files": [
@@ -42,7 +42,6 @@
     "glob": "^11.0.0",
     "rimraf": "6.0.1",
     "rollup": "^4.22.4",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "6.2.0",
     "rollup-plugin-node-externals": "^8.0.0",
     "typescript": "5.7.3"

packages/grafana-schema/rollup.config.ts

@@ -2,8 +2,9 @@ import { glob } from 'glob';
 import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 import path from 'path';
+import copy from 'rollup-plugin-copy';
 
-import { cjsOutput, entryPoint, esmOutput, plugins, tsDeclarationOutput } from '../rollup.config.parts';
+import { cjsOutput, entryPoint, esmOutput, plugins } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
@@ -16,7 +17,6 @@ export default [
     plugins,
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-schema')],
   },
-  tsDeclarationOutput(pkg, { input: './dist/esm/index.d.ts' }),
   {
     input: Object.fromEntries(
       glob
@@ -26,7 +26,21 @@ export default [
           fileURLToPath(new URL(file, import.meta.url)),
         ])
     ),
-    plugins: [noderesolve, esbuild],
+    plugins: [
+      noderesolve,
+      esbuild,
+      // Support @grafana/scenes that pulls in types from nested @grafana/schema files.
+      copy({
+        targets: [
+          {
+            src: 'dist/types/raw/composable/**/*.d.ts',
+            dest: 'dist/esm/raw/composable',
+            rename: (_name, _extension, fullpath) => fullpath.split(path.sep).slice(4).join('/'),
+          },
+        ],
+        hook: 'writeBundle',
+      }),
+    ],
     output: {
       format: 'esm',
       dir: path.dirname(pkg.publishConfig.module),

packages/grafana-schema/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "declarationDir": "./dist/esm",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "rootDirs": ["."]

packages/grafana-ui/package.json

@@ -37,7 +37,7 @@
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",
-    "types": "./dist/cjs/index.d.cts",
+    "types": "./dist/types/index.d.ts",
     "access": "public"
   },
   "files": [
@@ -193,7 +193,6 @@
     "rimraf": "6.0.1",
     "rollup": "^4.22.4",
     "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "6.2.0",
     "rollup-plugin-node-externals": "^8.0.0",
     "rollup-plugin-svg-import": "3.0.0",

packages/grafana-ui/rollup.config.ts

@@ -2,7 +2,7 @@ import { createRequire } from 'node:module';
 import copy from 'rollup-plugin-copy';
 import svg from 'rollup-plugin-svg-import';
 
-import { cjsOutput, entryPoint, esmOutput, plugins, tsDeclarationOutput } from '../rollup.config.parts';
+import { cjsOutput, entryPoint, esmOutput, plugins } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const icons = rq('../../public/app/core/icons/cached.json');
@@ -38,18 +38,4 @@ export default [
     ],
     output: [cjsOutput(pkg), esmOutput(pkg, 'grafana-ui')],
   },
-  tsDeclarationOutput(pkg),
-  tsDeclarationOutput(pkg, {
-    input: './compiled/unstable.d.ts',
-    output: [
-      {
-        file: './dist/cjs/unstable.d.cts',
-        format: 'cjs',
-      },
-      {
-        file: './dist/esm/unstable.d.mts',
-        format: 'es',
-      },
-    ],
-  }),
 ];

packages/grafana-ui/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "baseUrl": "./",
-    "declarationDir": "./compiled",
+    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "allowJs": true,

packages/rollup.config.parts.ts

@@ -1,7 +1,6 @@
 // This file contains the common parts of the rollup configuration that are shared across multiple packages.
 import nodeResolve from '@rollup/plugin-node-resolve';
-import { dirname, join, resolve } from 'node:path';
+import { dirname, resolve } from 'node:path';
-import dts from 'rollup-plugin-dts';
 import esbuild from 'rollup-plugin-esbuild';
 import { nodeExternals } from 'rollup-plugin-node-externals';
 
@@ -45,22 +44,3 @@ export function esmOutput(pkg, pkgName) {
     preserveModulesRoot: resolve(projectCwd, `packages/${pkgName}/src`),
   };
 }
-
-// Generate a rollup configuration for rolling up typescript declaration files into a single file.
-export function tsDeclarationOutput(pkg, overrides = {}) {
-  return {
-    input: './compiled/index.d.ts',
-    plugins: [dts()],
-    output: [
-      {
-        file: pkg.publishConfig.types,
-        format: 'cjs',
-      },
-      {
-        file: join(dirname(pkg.publishConfig.module), 'index.d.mts'),
-        format: 'es',
-      },
-    ],
-    ...overrides,
-  };
-}

scripts/prepare-npm-package.js

@@ -1,6 +1,5 @@
 import PackageJson from '@npmcli/package-json';
 import { mkdir } from 'node:fs/promises';
-import { join, dirname } from 'node:path';
 
 const cwd = process.cwd();
 
@@ -8,18 +7,17 @@ try {
   const pkgJson = await PackageJson.load(cwd);
   const cjsIndex = pkgJson.content.publishConfig?.main ?? pkgJson.content.main;
   const esmIndex = pkgJson.content.publishConfig?.module ?? pkgJson.content.module;
-  const cjsTypes = pkgJson.content.publishConfig?.types ?? pkgJson.content.types;
+  const typesIndex = pkgJson.content.publishConfig?.types ?? pkgJson.content.types;
-  const esmTypes = `./${join(dirname(esmIndex), 'index.d.mts')}`;
 
   const exports = {
     './package.json': './package.json',
     '.': {
       import: {
-        types: esmTypes,
+        types: typesIndex,
         default: esmIndex,
       },
       require: {
-        types: cjsTypes,
+        types: typesIndex,
         default: cjsIndex,
       },
     },
@@ -43,7 +41,7 @@ try {
 
   pkgJson.update({
     main: cjsIndex,
-    types: cjsTypes,
+    types: typesIndex,
     module: esmIndex,
     exports,
   });
@@ -60,11 +58,11 @@ try {
         ...pkgJson.content.exports,
         [`./${aliasName}`]: {
           import: {
-            types: esmTypes.replace('index', aliasName),
+            types: typesIndex.replace('index', aliasName),
             default: esmIndex.replace('index', aliasName),
           },
           require: {
-            types: cjsTypes.replace('index', aliasName),
+            types: typesIndex.replace('index', aliasName),
             default: cjsIndex.replace('index', aliasName),
           },
         },
@@ -88,7 +86,7 @@ async function createAliasPackageJsonFiles(packageJsonContent, aliasName) {
     const pkgJson = await PackageJson.create(pkgJsonPath, {
       data: {
         name: pkgName,
-        types: `../dist/cjs/${aliasName}.d.cts`,
+        types: `../dist/types/${aliasName}.d.ts`,
         main: `../dist/cjs/${aliasName}.cjs`,
         module: `../dist/esm/${aliasName}.mjs`,
       },

yarn.lock

@@ -121,7 +121,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.3, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.24.2, @babel/code-frame@npm:^7.26.2":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.3, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.26.2":
   version: 7.26.2
   resolution: "@babel/code-frame@npm:7.26.2"
   dependencies:
@@ -3057,7 +3057,6 @@ __metadata:
     react-use: "npm:17.6.0"
     rimraf: "npm:6.0.1"
     rollup: "npm:^4.22.4"
-    rollup-plugin-dts: "npm:^6.1.1"
     rollup-plugin-esbuild: "npm:6.2.0"
     rollup-plugin-node-externals: "npm:^8.0.0"
     rxjs: "npm:7.8.2"
@@ -3084,7 +3083,6 @@ __metadata:
     esbuild: "npm:0.25.0"
     rimraf: "npm:6.0.1"
     rollup: "npm:^4.22.4"
-    rollup-plugin-dts: "npm:^6.1.1"
     rollup-plugin-esbuild: "npm:6.2.0"
     rollup-plugin-node-externals: "npm:^8.0.0"
     semver: "npm:^7.7.0"
@@ -3201,7 +3199,6 @@ __metadata:
     react-use: "npm:17.6.0"
     react-virtualized-auto-sizer: "npm:1.0.25"
     rollup: "npm:^4.22.4"
-    rollup-plugin-dts: "npm:^6.1.1"
     rollup-plugin-esbuild: "npm:6.2.0"
     rollup-plugin-node-externals: "npm:^8.0.0"
     tinycolor2: "npm:1.6.0"
@@ -3448,7 +3445,6 @@ __metadata:
     react-use: "npm:17.6.0"
     react-window: "npm:1.8.11"
     rollup: "npm:^4.22.4"
-    rollup-plugin-dts: "npm:^6.1.1"
     rollup-plugin-esbuild: "npm:6.2.0"
     rollup-plugin-node-externals: "npm:^8.0.0"
     rxjs: "npm:7.8.2"
@@ -3492,7 +3488,6 @@ __metadata:
     react-use: "npm:17.6.0"
     rimraf: "npm:6.0.1"
     rollup: "npm:^4.22.4"
-    rollup-plugin-dts: "npm:^6.1.1"
     rollup-plugin-esbuild: "npm:6.2.0"
     rollup-plugin-node-externals: "npm:^8.0.0"
     rollup-plugin-sourcemaps: "npm:0.6.3"
@@ -3559,7 +3554,6 @@ __metadata:
     glob: "npm:^11.0.0"
     rimraf: "npm:6.0.1"
     rollup: "npm:^4.22.4"
-    rollup-plugin-dts: "npm:^6.1.1"
     rollup-plugin-esbuild: "npm:6.2.0"
     rollup-plugin-node-externals: "npm:^8.0.0"
     tslib: "npm:2.8.1"
@@ -3755,7 +3749,6 @@ __metadata:
     rimraf: "npm:6.0.1"
     rollup: "npm:^4.22.4"
     rollup-plugin-copy: "npm:3.5.0"
-    rollup-plugin-dts: "npm:^6.1.1"
     rollup-plugin-esbuild: "npm:6.2.0"
     rollup-plugin-node-externals: "npm:^8.0.0"
     rollup-plugin-svg-import: "npm:3.0.0"
@@ -22078,7 +22071,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.10, magic-string@npm:^0.30.5":
+"magic-string@npm:^0.30.5":
   version: 0.30.10
   resolution: "magic-string@npm:0.30.10"
   dependencies:
@@ -27795,22 +27788,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-plugin-dts@npm:^6.1.1":
-  version: 6.1.1
-  resolution: "rollup-plugin-dts@npm:6.1.1"
-  dependencies:
-    "@babel/code-frame": "npm:^7.24.2"
-    magic-string: "npm:^0.30.10"
-  peerDependencies:
-    rollup: ^3.29.4 || ^4
-    typescript: ^4.5 || ^5.0
-  dependenciesMeta:
-    "@babel/code-frame":
-      optional: true
-  checksum: 10/8a66833a5af32f77d9bbc746339097d4af2382e5160f7629d85dcecb4efad12cbfebd37c79147fa688f073c333d71f53135e08a225a3fc3e9a3b3f92c46b2381
-  languageName: node
-  linkType: hard
-
 "rollup-plugin-esbuild@npm:6.2.0":
   version: 6.2.0
   resolution: "rollup-plugin-esbuild@npm:6.2.0"