Grafana/data: Fix theme types schema resolution (#116240)

* fix(grafana-data): copy theme schema json to types so declaration resolves

* refactor(grafana-data): move node scripts out of source code

* feat(grafana-data): generate types for theme schema

* chore(codeowners): update for grafana-data/scripts file move

* feat(grafana-data): put back copy plugin for theme json files

* revert(grafana-data): remove definition output

* feat(grafana-data): make builds great again

* minor tidy up

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

.github/CODEOWNERS

@@ -543,6 +543,7 @@ i18next.config.ts @grafana/grafana-frontend-platform
 /packages/grafana-data/tsconfig.json @grafana/grafana-frontend-platform
 /packages/grafana-data/test/ @grafana/grafana-frontend-platform
 /packages/grafana-data/typings/ @grafana/grafana-frontend-platform
+/packages/grafana-data/scripts/ @grafana/grafana-frontend-platform
 
 /packages/grafana-data/src/**/*logs* @grafana/observability-logs
 /packages/grafana-data/src/context/plugins/ @grafana/plugins-platform-frontend

packages/grafana-data/package.json

@@ -35,6 +35,14 @@
     },
     "./test": {
       "@grafana-app/source": "./test/index.ts"
+    },
+    "./themes/schema.generated.json": {
+      "@grafana-app/source": "./src/themes/schema.generated.json",
+      "default": "./dist/esm/themes/schema.generated.json"
+    },
+    "./themes/definitions/*.json": {
+      "@grafana-app/source": "./src/themes/themeDefinitions/*.json",
+      "default": "./dist/esm/themes/themeDefinitions/*.json"
     }
   },
   "publishConfig": {
@@ -52,7 +60,7 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit",
     "prepack": "cp package.json package.json.bak && node ../../scripts/prepare-npm-package.js",
     "postpack": "mv package.json.bak package.json",
-    "themes-schema": "tsx ./src/themes/scripts/generateSchema.ts"
+    "themes-schema": "tsx ./scripts/generateSchema.ts"
   },
   "dependencies": {
     "@braintree/sanitize-url": "7.0.1",
@@ -102,6 +110,7 @@
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
     "rollup": "^4.22.4",
+    "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-node-externals": "^8.0.0",
     "tsx": "^4.21.0",

packages/grafana-data/rollup.config.ts

@@ -1,21 +1,40 @@
 import json from '@rollup/plugin-json';
 import { createRequire } from 'node:module';
+import copy from 'rollup-plugin-copy';
 
 import { entryPoint, plugins, esmOutput, cjsOutput } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
 
+const grafanaDataPlugins = [
+  ...plugins,
+  copy({
+    targets: [
+      {
+        src: 'src/themes/schema.generated.json',
+        dest: 'dist/esm/',
+      },
+      {
+        src: 'src/themes/themeDefinitions/*.json',
+        dest: 'dist/esm/',
+      },
+    ],
+    flatten: false,
+  }),
+  json(),
+];
+
 export default [
   {
     input: entryPoint,
-    plugins: [...plugins, json()],
+    plugins: grafanaDataPlugins,
     output: [cjsOutput(pkg, 'grafana-data'), esmOutput(pkg, 'grafana-data')],
     treeshake: false,
   },
   {
     input: 'src/unstable.ts',
-    plugins: [...plugins, json()],
+    plugins: grafanaDataPlugins,
     output: [cjsOutput(pkg, 'grafana-data'), esmOutput(pkg, 'grafana-data')],
     treeshake: false,
   },

packages/grafana-data/scripts/generateSchema.ts

@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { NewThemeOptionsSchema } from '../src/themes/createTheme';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const jsonOut = path.join(__dirname, '..', 'src', 'themes', 'schema.generated.json');
+
+fs.writeFileSync(
+  jsonOut,
+  JSON.stringify(
+    NewThemeOptionsSchema.toJSONSchema({
+      target: 'draft-07',
+    }),
+    undefined,
+    2
+  )
+);
+
+console.log('Successfully generated theme schema');

packages/grafana-data/src/internal/index.ts

@@ -93,7 +93,6 @@ export { DataTransformerID } from '../transformations/transformers/ids';
 
 export { mergeTransformer } from '../transformations/transformers/merge';
 export { getThemeById } from '../themes/registry';
-export * as experimentalThemeDefinitions from '../themes/themeDefinitions';
 export { GrafanaEdition } from '../types/config';
 export { SIPrefix } from '../valueFormats/symbolFormatters';
 

packages/grafana-data/src/themes/registry.ts

@@ -1,7 +1,18 @@
 import { Registry, RegistryItem } from '../utils/Registry';
 
 import { createTheme, NewThemeOptionsSchema } from './createTheme';
-import * as extraThemes from './themeDefinitions';
+import aubergine from './themeDefinitions/aubergine.json';
+import debug from './themeDefinitions/debug.json';
+import desertbloom from './themeDefinitions/desertbloom.json';
+import gildedgrove from './themeDefinitions/gildedgrove.json';
+import gloom from './themeDefinitions/gloom.json';
+import mars from './themeDefinitions/mars.json';
+import matrix from './themeDefinitions/matrix.json';
+import sapphiredusk from './themeDefinitions/sapphiredusk.json';
+import synthwave from './themeDefinitions/synthwave.json';
+import tron from './themeDefinitions/tron.json';
+import victorian from './themeDefinitions/victorian.json';
+import zen from './themeDefinitions/zen.json';
 import { GrafanaTheme2 } from './types';
 
 export interface ThemeRegistryItem extends RegistryItem {
@@ -9,6 +20,21 @@ export interface ThemeRegistryItem extends RegistryItem {
   build: () => GrafanaTheme2;
 }
 
+const extraThemes: { [key: string]: unknown } = {
+  aubergine,
+  debug,
+  desertbloom,
+  gildedgrove,
+  gloom,
+  mars,
+  matrix,
+  sapphiredusk,
+  synthwave,
+  tron,
+  victorian,
+  zen,
+};
+
 /**
  * @internal
  * Only for internal use, never use this from a plugin

packages/grafana-data/src/themes/scripts/generateSchema.ts

@@ -1,19 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-import { NewThemeOptionsSchema } from '../createTheme';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-fs.writeFileSync(
-  path.join(__dirname, '../schema.generated.json'),
-  JSON.stringify(
-    NewThemeOptionsSchema.toJSONSchema({
-      target: 'draft-07',
-    }),
-    undefined,
-    2
-  )
-);

packages/grafana-data/src/themes/themeDefinitions/index.ts

@@ -1,12 +0,0 @@
-export { default as aubergine } from './aubergine.json';
-export { default as debug } from './debug.json';
-export { default as desertbloom } from './desertbloom.json';
-export { default as gildedgrove } from './gildedgrove.json';
-export { default as mars } from './mars.json';
-export { default as matrix } from './matrix.json';
-export { default as sapphiredusk } from './sapphiredusk.json';
-export { default as synthwave } from './synthwave.json';
-export { default as tron } from './tron.json';
-export { default as victorian } from './victorian.json';
-export { default as zen } from './zen.json';
-export { default as gloom } from './gloom.json';

packages/grafana-data/src/unstable.ts

@@ -9,4 +9,4 @@
  * and be subject to the standard policies
  */
 
-export { default as themeJsonSchema } from './themes/schema.generated.json';
+export {};

packages/grafana-data/tsconfig.json

@@ -8,7 +8,8 @@
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "rootDirs": ["."],
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true
   },
   "exclude": ["dist/**/*"],
   "include": [

public/app/features/theme-playground/ThemePlayground.tsx

@@ -2,8 +2,20 @@ import { css } from '@emotion/css';
 import { useId, useState } from 'react';
 
 import { createTheme, GrafanaTheme2, NewThemeOptions } from '@grafana/data';
-import { experimentalThemeDefinitions, NewThemeOptionsSchema } from '@grafana/data/internal';
-import { themeJsonSchema } from '@grafana/data/unstable';
+import { NewThemeOptionsSchema } from '@grafana/data/internal';
+import aubergine from '@grafana/data/themes/definitions/aubergine.json';
+import debug from '@grafana/data/themes/definitions/debug.json';
+import desertbloom from '@grafana/data/themes/definitions/desertbloom.json';
+import gildedgrove from '@grafana/data/themes/definitions/gildedgrove.json';
+import gloom from '@grafana/data/themes/definitions/gloom.json';
+import mars from '@grafana/data/themes/definitions/mars.json';
+import matrix from '@grafana/data/themes/definitions/matrix.json';
+import sapphiredusk from '@grafana/data/themes/definitions/sapphiredusk.json';
+import synthwave from '@grafana/data/themes/definitions/synthwave.json';
+import tron from '@grafana/data/themes/definitions/tron.json';
+import victorian from '@grafana/data/themes/definitions/victorian.json';
+import zen from '@grafana/data/themes/definitions/zen.json';
+import themeJsonSchema from '@grafana/data/themes/schema.generated.json';
 import { t } from '@grafana/i18n';
 import { useChromeHeaderHeight } from '@grafana/runtime';
 import { CodeEditor, Combobox, Field, Stack, useStyles2 } from '@grafana/ui';
@@ -34,8 +46,23 @@ const themeMap: Record<string, NewThemeOptions> = {
   },
 };
 
+const experimentalDefinitions: Record<string, unknown> = {
+  aubergine,
+  debug,
+  desertbloom,
+  gildedgrove,
+  gloom,
+  mars,
+  matrix,
+  sapphiredusk,
+  synthwave,
+  tron,
+  victorian,
+  zen,
+};
+
 // Add additional themes
-for (const [name, json] of Object.entries(experimentalThemeDefinitions)) {
+for (const [name, json] of Object.entries(experimentalDefinitions)) {
   const result = NewThemeOptionsSchema.safeParse(json);
   if (!result.success) {
     console.error(`Invalid theme definition for theme ${name}: ${result.error.message}`);

scripts/validate-npm-packages.sh

@@ -11,6 +11,7 @@ failed_checks=()
 for file in "$ARTIFACTS_DIR"/*.tgz; do
   echo "🔍 Checking NPM package: $file"
 
+  # If you need to debug ATTW issues, pass "--format json" to get verbose output.
   if ! NODE_OPTIONS="-C @grafana-app/source" yarn attw "$file" --ignore-rules "false-cjs" --profile "node16"; then
     echo "attw check failed for $file"
     echo ""

yarn.lock

@@ -3324,6 +3324,7 @@ __metadata:
     react-use: "npm:17.6.0"
     rimraf: "npm:6.0.1"
     rollup: "npm:^4.22.4"
+    rollup-plugin-copy: "npm:3.5.0"
     rollup-plugin-esbuild: "npm:6.2.1"
     rollup-plugin-node-externals: "npm:^8.0.0"
     rxjs: "npm:7.8.2"