minor #2866 Migrate bin/*.js to TypeScript, use tsx (Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

Migrate `bin/*.js` to TypeScript, use `tsx`

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | no <!-- required for new features -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Update/add documentation as required (we can help!)
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

Types ✨

Following #2865, in fact I didn't go with Node & `--experimental-strip-types` flag, but with https://tsx.is/ instead.

Commits
-------

a0103b4 Migrate `bin/*.js` to TypeScript, use `tsx`

Author: Kocal

bin/build_package.js renamed to bin/build_package.ts

@@ -2,13 +2,13 @@
  * This file is used to compile the assets from an UX package.
  */
 
-const { parseArgs } = require('node:util');
-const path = require('node:path');
-const fs = require('node:fs');
-const glob = require('glob');
-const rollup = require('rollup');
-const LightningCSS = require('lightningcss');
-const { getRollupConfiguration } = require('./rollup');
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { parseArgs } from 'node:util';
+import * as LightningCSS from 'lightningcss';
+import * as rollup from 'rollup';
+import { globSync } from 'tinyglobby';
+import { getRollupConfiguration } from './rollup.ts';
 
 const args = parseArgs({
     allowPositionals: true,
@@ -34,7 +34,7 @@ async function main() {
         process.exit(1);
     }
 
-    const packageData = require(path.join(packageRoot, 'package.json'));
+    const packageData = await import(path.join(packageRoot, 'package.json'), {with: { type: 'json'}});
     const packageName = packageData.name;
     const srcDir = path.join(packageRoot, 'src');
     const distDir = path.join(packageRoot, 'dist');
@@ -51,7 +51,7 @@ async function main() {
     }
 
     const inputScriptFiles = [
-        ...glob.sync(path.join(srcDir, '*controller.ts')),
+        ...globSync(path.join(srcDir, '*controller.ts')),
         ...(['@symfony/ux-react', '@symfony/ux-vue', '@symfony/ux-svelte'].includes(packageName)
             ? [path.join(srcDir, 'loader.ts'), path.join(srcDir, 'components.ts')]
             : []),
@@ -62,12 +62,10 @@ async function main() {
 
     const inputStyleFile = packageData.config?.css_source;
     const buildCss = async () => {
-        const inputStyleFileDist = inputStyleFile
-            ? path.resolve(distDir, `${path.basename(inputStyleFile, '.css')}.min.css`)
-            : undefined;
         if (!inputStyleFile) {
             return;
         }
+        const inputStyleFileDist = path.resolve(distDir, `${path.basename(inputStyleFile, '.css')}.min.css`);
 
         console.log('Minifying CSS...');
         const css = await fs.promises.readFile(inputStyleFile, 'utf-8');
@@ -82,34 +80,41 @@ async function main() {
 
     if (inputScriptFiles.length === 0) {
         console.error(
-            `No input files found for package "${packageName}" (directory "${packageRoot}").\nEnsure you have at least a file matching the pattern "src/*_controller.ts", or manually specify input files in "${__filename}" file.`
+            `No input files found for package "${packageName}" (directory "${packageRoot}").\nEnsure you have at least a file matching the pattern "src/*_controller.ts", or manually specify input files in "${import.meta.filename}" file.`
         );
         process.exit(1);
     }
 
-    const rollupConfig = getRollupConfiguration({ packageRoot, inputFiles: inputScriptFiles, isWatch });
+    const rollupConfig = getRollupConfiguration({
+        packageRoot,
+        inputFiles: inputScriptFiles,
+        isWatch,
+        additionalPlugins: [
+            ...(isWatch && inputStyleFile
+                ? [
+                      {
+                          name: 'watcher',
+                          buildStart(this: rollup.PluginContext) {
+                              this.addWatchFile(inputStyleFile);
+                          },
+                      },
+                  ]
+                : []),
+        ],
+    });
 
     if (isWatch) {
         console.log(
             `Watching for JavaScript${inputStyleFile ? ' and CSS' : ''} files modifications in "${srcDir}" directory...`
         );
 
-        if (inputStyleFile) {
-            rollupConfig.plugins = (rollupConfig.plugins || []).concat({
-                name: 'watcher',
-                buildStart() {
-                    this.addWatchFile(inputStyleFile);
-                },
-            });
-        }
-
         const watcher = rollup.watch(rollupConfig);
         watcher.on('event', (event) => {
             if (event.code === 'ERROR') {
                 console.error('Error during build:', event.error);
             }
 
-            if (event.result) {
+            if ((event.code === 'BUNDLE_END' || event.code === 'ERROR') && event.result) {
                 event.result.close();
             }
         });
@@ -126,6 +131,13 @@ async function main() {
         console.log(`Building JavaScript files from ${packageName} package...`);
         const start = Date.now();
 
+        if (typeof rollupConfig.output === 'undefined' || Array.isArray(rollupConfig.output)) {
+            console.error(
+                `The rollup configuration for package "${packageName}" does not contain a valid output configuration.`
+            );
+            process.exit(1);
+        }
+
         const bundle = await rollup.rollup(rollupConfig);
         await bundle.write(rollupConfig.output);