Grafana UI: Expose unstable entrypoint (#97080)

* feat(grafana-ui): build unstable entrypoint for experimental components

* feat(plugins): expose grafana/ui/unstable

* build(grafana-ui): add rollup plugin to create alias package.json for unstable entrypoint

* build(packages): rewrite prepare npm script to generate alias packagejson files

* chore(packages): use relative paths in publishConfig for exports generation

* chore(frontend): move npmcli/package-json package to root package.json

* revert(grafana-ui): remove rollup plugin for generating alias package.json files

* chore(grafana-ui): clean up unstable directory postpack to prevent yarn lock issues

* build(packages): fix scope for pkgName usage

* feat(packages): create separate cjs and esm builds that validate with arethetypeswrong cli

* chore(yarn): refresh lock file

* fix(packages): make sure alias package.jsons point to existing files

scripts/prepare-npm-package.js

@@ -0,0 +1,84 @@
+import PackageJson from '@npmcli/package-json';
+import { mkdir } from 'node:fs/promises';
+import { join, dirname } from 'node:path';
+
+const cwd = process.cwd();
+
+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 esmTypes = `./${join(dirname(esmIndex), 'index.d.mts')}`;
+
+  const exports = {
+    './package.json': './package.json',
+    '.': {
+      import: {
+        types: esmTypes,
+        default: esmIndex,
+      },
+      require: {
+        types: cjsTypes,
+        default: cjsIndex,
+      },
+    },
+  };
+
+  pkgJson.update({
+    main: cjsIndex,
+    types: cjsTypes,
+    module: esmIndex,
+    exports,
+  });
+
+  await pkgJson.save();
+
+  // If an alias package name is provided we add an exports entry for the alias
+  // then generate an additional "nested" package.json for typescript resolution that
+  // doesn't use the exports property in package.json.
+  if (process.env.ALIAS_PACKAGE_NAME) {
+    const aliasName = process.env.ALIAS_PACKAGE_NAME;
+    pkgJson.update({
+      exports: {
+        ...pkgJson.content.exports,
+        [`./${aliasName}`]: {
+          import: {
+            types: esmTypes.replace('index', aliasName),
+            default: esmIndex.replace('index', aliasName),
+          },
+          require: {
+            types: cjsTypes.replace('index', aliasName),
+            default: cjsTypes.replace('index', aliasName),
+          },
+        },
+      },
+      files: [...pkgJson.content.files, aliasName],
+    });
+    await pkgJson.save();
+    await createAliasPackageJsonFiles(pkgJson.content, aliasName);
+  }
+} catch (e) {
+  console.error(e);
+  process.exit(1);
+}
+
+async function createAliasPackageJsonFiles(packageJsonContent, aliasName) {
+  const pkgName = `${packageJsonContent.name}/${aliasName}`;
+  try {
+    console.log(`📦 Writing alias package.json for ${pkgName}.`);
+    const pkgJsonPath = `${cwd}/${aliasName}`;
+    await mkdir(pkgJsonPath, { recursive: true });
+    const pkgJson = await PackageJson.create(pkgJsonPath, {
+      data: {
+        name: pkgName,
+        types: `../dist/cjs/${aliasName}.d.cts`,
+        main: `../dist/cjs/${aliasName}.cjs`,
+        module: `../dist/esm/${aliasName}.mjs`,
+      },
+    });
+    await pkgJson.save();
+  } catch (error) {
+    throw new Error(`Error generating package.json for ${pkgName}`, error);
+  }
+}

scripts/prepare-packagejson.js

@@ -1,21 +0,0 @@
-const fs = require('fs');
-
-const cwd = process.cwd();
-const packageJson = require(`${cwd}/package.json`);
-
-const newPackageJson = {
-  ...packageJson,
-  main: packageJson.publishConfig?.main ?? packageJson.main,
-};
-
-if (packageJson.publishConfig?.types) {
-  newPackageJson.types = packageJson.publishConfig.types;
-}
-
-if (packageJson.publishConfig?.module) {
-  newPackageJson.module = packageJson.publishConfig.module;
-}
-
-try {
-  fs.writeFileSync(`${cwd}/package.json`, JSON.stringify(newPackageJson, null, 2));
-} catch (e) {}

scripts/validate-npm-packages.sh

@@ -43,14 +43,14 @@ for file in "$ARTIFACTS_DIR"/*.tgz; do
   fi
 
   # Assert commonjs builds
-  if [ ! -d dist ] || [ ! -f dist/index.js ] || [ ! -f dist/index.d.ts ]; then
+  if [ ! -d dist ] || [ ! -f dist/cjs/index.cjs ] || [ ! -f dist/cjs/index.d.cts ]; then
     echo -e "❌ Failed: Missing 'dist' directory or required commonjs files in package $dir_name.\n"
     exit 1
   fi
 
-  if [ "$(jq -r '.main' package.json)" != "dist/index.js" ] || \
-     [ "$(jq -r '.types' package.json)" != "dist/index.d.ts" ]; then
-    echo -e "❌ Failed: Incorrect package.json properties in package $dir_name.\n"
+  if [ "$(jq -r '.main' package.json)" != "./dist/cjs/index.cjs" ] || \
+     [ "$(jq -r '.types' package.json)" != "./dist/cjs/index.d.cts" ]; then
+    echo -e "❌ Failed: Incorrect cjs package.json properties in package $dir_name.\n"
     exit 1
   fi
 
@@ -58,13 +58,13 @@ for file in "$ARTIFACTS_DIR"/*.tgz; do
   esm_packages=("grafana-data" "grafana-ui" "grafana-runtime" "grafana-e2e-selectors" "grafana-schema")
   for esm_package in "${esm_packages[@]}"; do
     if [[ "$dir_name" == "$esm_package" ]]; then
-      if [ ! -d dist/esm ] || [ ! -f dist/esm/index.js ]; then
+      if [ ! -d dist/esm ] || [ ! -f dist/esm/index.mjs ]; then
         echo -e "❌ Failed: Missing 'dist/esm' directory or required esm files in package $dir_name.\n"
         exit 1
       fi
 
-      if [ "$(jq -r '.module' package.json)" != "dist/esm/index.js" ]; then
-        echo -e "❌ Failed: Incorrect package.json properties in package $dir_name.\n"
+      if [ "$(jq -r '.module' package.json)" != "./dist/esm/index.mjs" ]; then
+        echo -e "❌ Failed: Incorrect esm package.json properties in package $dir_name.\n"
         exit 1
       fi
     fi