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
This commit is contained in:
George Kalpakas
2021-07-22 14:38:18 +03:00
committed by Dylan Hunn
parent 99f833869d
commit 662addb355
8 changed files with 50 additions and 44 deletions
+5 -5
View File
@@ -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/`.