fix(betterer): make it work in an esm environment

.betterer.cjs

@@ -1,3 +1,4 @@
+// @ts-check
 import { BettererFileTest } from '@betterer/betterer';
 import { ESLint } from 'eslint';
 import { promises as fs } from 'fs';
@@ -52,8 +53,10 @@ function countUndocumentedStories() {
 /**
  *  Generic regexp pattern matcher, similar to @betterer/regexp.
  *  The only difference is that the positions of the errors are not reported, as this may cause a lot of merge conflicts.
+ * @param {RegExp} pattern - The regular expression pattern to match.
+ * @param {string} issueMessage - The message to display for the issue.
  */
-function regexp(pattern: RegExp, issueMessage: string) {
+function regexp(pattern, issueMessage) {
   return new BettererFileTest(async (filePaths, fileTestResult) => {
     await Promise.all(
       filePaths.map(async (filePath) => {

.prettierrc.js

@@ -1,5 +1,7 @@
-module.exports = {
+const config = {
   trailingComma: 'es5',
   singleQuote: true,
   printWidth: 120,
 };
+
+export default config;

eslint.config.js

@@ -16,6 +16,9 @@ const grafanaPlugin = require('@grafana/eslint-plugin');
 const bettererConfig = require('./.betterer.eslint.config');
 const getEnvConfig = require('./scripts/webpack/env-util');
 
+/**
+ * @type {Record<string, unknown>}
+ */
 const envConfig = getEnvConfig();
 const enableBettererRules = envConfig.frontend_dev_betterer_eslint_rules;
 

package.json

@@ -57,7 +57,7 @@
     "ci:test-frontend": "yarn run test:ci",
     "i18n:stats": "node ./scripts/cli/reportI18nStats.mjs",
     "betterer": "betterer --tsconfig ./scripts/cli/tsconfig.json",
-    "betterer:stats": "ts-node --transpile-only --project ./scripts/cli/tsconfig.json ./scripts/cli/reportBettererStats.ts",
+    "betterer:stats": "node ./scripts/cli/reportBettererStats.mjs",
     "betterer:issues": "ts-node --transpile-only --project ./scripts/cli/tsconfig.json ./scripts/cli/generateBettererIssues.ts",
     "betterer:ci": "betterer ci --tsconfig ./scripts/cli/tsconfig.json",
     "plugin:build": "nx run-many -t build --projects='tag:scope:plugin'",

tsconfig.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    // "skipLibCheck": true,
+    "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -49,6 +49,5 @@
     "packages/grafana-data/typings",
     "packages/grafana-ui/src/types"
   ],
-  "exclude": ["public/app/**/webpack.config.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "exclude": ["public/app/**/webpack.config.ts"]
 }

tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

vite.config.ts

@@ -69,7 +69,7 @@ export default defineConfig({
 // https://vitejs.dev/guide/api-plugin.html#simple-examples
 
 // The webpack output from https://github.com/WearyMonkey/ngtemplate-loader looks like this:
-// var code = "\n<div class=\"graph-annotation\">\n\t<div class=\"graph-annotation__header\">\n\t\t<div class=\"graph-annotation__user\" bs-tooltip=\"'Created by {{ctrl.login}}'\">\n\t\t</div>\n\n\t\t<div class=\"graph-annotation__title\">\n\t\t\t<span ng-if=\"!ctrl.event.id\">Add annotation</span>\n\t\t\t<span ng-if=\"ctrl.event.id\">Edit annotation</span>\n\t\t</div>\n\n    <div class=\"graph-annotation__time\">{{ctrl.timeFormated}}</div>\n\t</div>\n\n\t<form name=\"ctrl.form\" class=\"graph-annotation__body text-center\">\n\t\t<div style=\"display: inline-block\">\n\t\t\t<div class=\"gf-form gf-form--v-stretch\">\n\t\t\t\t<span class=\"gf-form-label width-7\">Description</span>\n\t\t\t\t<textarea class=\"gf-form-input width-20\" rows=\"2\" ng-model=\"ctrl.event.text\" placeholder=\"Description\"></textarea>\n\t\t\t</div>\n\n\t\t\t<div class=\"gf-form\">\n\t\t\t\t<span class=\"gf-form-label width-7\">Tags</span>\n\t\t\t\t<bootstrap-tagsinput ng-model=\"ctrl.event.tags\" tagclass=\"label label-tag\" placeholder=\"add tags\">\n\t\t\t\t</bootstrap-tagsinput>\n\t\t\t</div>\n\n\t\t\t<div class=\"gf-form-button-row\">\n\t\t\t\t<button type=\"submit\" class=\"btn btn-primary\" ng-click=\"ctrl.save()\">Save</button>\n\t\t\t\t<button ng-if=\"ctrl.event.id && ctrl.canDelete()\" type=\"submit\" class=\"btn btn-danger\" ng-click=\"ctrl.delete()\">Delete</button>\n\t\t\t\t<a class=\"btn-text\" ng-click=\"ctrl.close();\">Cancel</a>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>\n";
+// var code = "\n<div class=\"graph-annotation\">\n\t<div class=\"graph-annotation__header\">\n\t\t</div></div>\n";
 // Exports
 // var _module_exports =code;;
 // var path = 'public/app/features/annotations/partials/event_editor.html';