build(docs-infra): switch the generate-stackblitz/zips scripts to ESM (#42921)

Switch the JS scripts used for generating StackBlitz projects and zips
from CommonJS to ESM format. This is necessary for upgrading the
`globby` dependency to [version 12.0.0][1] in a subsequent commit.

[1]: https://github.com/sindresorhus/globby/releases/v12.0.0

PR Close #42921

aio/tools/stackblitz-builder/README.md

@@ -4,11 +4,11 @@
 In AIO we use it to share one or more runnable versions of our examples.
 
 Stackblitz can be used both on a separate page and in an embedded form.
-* `generateStackblitz.js` - executes each of the StackblitzBuilder to generate a stackblitz file for each example.
+* `generateStackblitz.mjs` - executes each of the StackblitzBuilder to generate a stackblitz file for each example.
 
 ## Stackblitz generation
 
-Both forms are created within `builder.js`.
+Both forms are created within `builder.mjs`.
 How is a stackblitz created?
 What is the process from a directory with files to a link with a stackblitz.
 
@@ -17,13 +17,13 @@ It contains an `<input>` element for each file we need in the stackblitz.
 
 The form will be submitted on load, so you can either double click the HTML file or open it with an anchor tag to open the stackblitz.
 
-So the `builder.js` job is to get all the needed files from an example and build this HTML file for you.
+So the `builder.mjs` job is to get all the needed files from an example and build this HTML file for you.
 
 ## Customizing the generation per example basis
 
 How does this tool know what is an example and what is not?
 It will look for all folders containing a `stackblitz.json` file.
-If found, all files within the folder and subfolders will be used in the stackblitz, with a few generic exceptions that you can find at `builder.js`.
+If found, all files within the folder and subfolders will be used in the stackblitz, with a few generic exceptions that you can find at `builder.mjs`.
 
 You can use the `stackblitz.json` to customize the stackblitz generation.
 For example:
@@ -44,7 +44,7 @@ Here you can specify a description for the stackblitz, some tags and also a file
 
 ## Executing the stackblitz generation
 
-`generateStackblitz.js` will create a stackblitz for each `stackblitz.json` it finds.
+`generateStackblitz.mjs` will create a stackblitz for each `stackblitz.json` it finds.
 
 Where?
 At `src/generated/live-examples/`.

aio/tools/stackblitz-builder/builder.mjs

@@ -1,15 +1,16 @@
-'use strict';
-
 // Canonical path provides a consistent path (i.e. always forward slashes) across different OSes
-const path = require('canonical-path');
-const fs = require('fs-extra');
-const globby = require('globby');
-const jsdom = require('jsdom');
-const json5 = require('json5');
+import path from 'canonical-path';
+import fs from 'fs-extra';
+import globby from 'globby';
+import jsdom from 'jsdom';
+import json5 from 'json5';
+import {fileURLToPath} from 'url';
 
-const regionExtractor = require('../transforms/examples-package/services/region-parser');
+import regionExtractor from '../transforms/examples-package/services/region-parser.js';
 
-class StackblitzBuilder {
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export class StackblitzBuilder {
   constructor(basePath, destPath) {
     this.basePath = basePath;
     this.destPath = destPath;
@@ -64,7 +65,9 @@ class StackblitzBuilder {
   _getBoilerplatePackageJson(exampleType) {
     if (!this._boilerplatePackageJsons.hasOwnProperty(exampleType)) {
       const pkgJsonPath = `${__dirname}/../examples/shared/boilerplate/${exampleType}/package.json`;
-      this._boilerplatePackageJsons[exampleType] = fs.existsSync(pkgJsonPath) ? require(pkgJsonPath) : null;
+      this._boilerplatePackageJsons[exampleType] = fs.existsSync(pkgJsonPath)
+          ? JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'))
+          : null;
     }
 
     return this._boilerplatePackageJsons[exampleType];
@@ -341,5 +344,3 @@ class StackblitzBuilder {
     }
   }
 }
-
-module.exports = StackblitzBuilder;

aio/tools/stackblitz-builder/generateStackblitz.js

@@ -1,8 +0,0 @@
-const path = require('path');
-const StackblitzBuilder = require('./builder');
-
-const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
-const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/generated/live-examples');
-
-new StackblitzBuilder(EXAMPLES_PATH, LIVE_EXAMPLES_PATH).build();
-

aio/tools/stackblitz-builder/generateStackblitz.mjs

@@ -0,0 +1,9 @@
+import {dirname, join} from 'path';
+import {fileURLToPath} from 'url';
+import {StackblitzBuilder} from './builder.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const EXAMPLES_PATH = join(__dirname, '../../content/examples');
+const LIVE_EXAMPLES_PATH = join(__dirname, '../../src/generated/live-examples');
+
+new StackblitzBuilder(EXAMPLES_PATH, LIVE_EXAMPLES_PATH).build();