diff --git a/aio/package.json b/aio/package.json index d789f5af43..5d8c4db672 100644 --- a/aio/package.json +++ b/aio/package.json @@ -63,8 +63,8 @@ "boilerplate:add": "node ./tools/examples/example-boilerplate add", "boilerplate:remove": "node ./tools/examples/example-boilerplate remove", "boilerplate:test": "node tools/examples/test.js", - "generate-stackblitz": "node ./tools/stackblitz-builder/generateStackblitz", - "generate-zips": "node ./tools/example-zipper/generateZips", + "generate-stackblitz": "node ./tools/stackblitz-builder/generateStackblitz.mjs", + "generate-zips": "node ./tools/example-zipper/generateZips.mjs", "create-example": "node ./tools/examples/create-example.js", "build-404-page": "node scripts/build-404-page", "update-webdriver": "node ../scripts/webdriver-manager-update.js", diff --git a/aio/tools/example-zipper/README.md b/aio/tools/example-zipper/README.md index 1a1f5f01ec..4aedac701e 100644 --- a/aio/tools/example-zipper/README.md +++ b/aio/tools/example-zipper/README.md @@ -5,7 +5,7 @@ These zip files are generated by the utility in this folder. ## Example zipper -The `exampleZipper.js` tool is very similar to the Stackblitz's `builder.js`. +The `exampleZipper.mjs` tool is very similar to the Stackblitz's `builder.mjs`. The latter creates an HTML file with all the examples' files and the former creates a zip file instead. They both use the `stackblitz.json` file to flag an example as something to stackblitz or zip. For example: @@ -35,7 +35,7 @@ These example types have separate boilerplate directories with the files that ar There are appropriate `package.json` files for each type of example in the boilerplate directories. If there is no special `package.json` file for an example type, the one from the `cli` boilerplate directory will be used instead. -The `exampleZipper.js` won't include any `System.js` related files for CLI-based projects. +The `exampleZipper.mjs` won't include any `System.js` related files for CLI-based projects. ## The zipper.json @@ -46,7 +46,7 @@ In those cases, you can create a `zipper.json` file with the same syntax. It wil ## Executing the zip generation -`generateZips.js` will create a zip for each `stackblitz.json` or `zipper.json` it finds. +`generateZips.mjs` will create a zip for each `stackblitz.json` or `zipper.json` it finds. Where? At `src/generated/zips/`. diff --git a/aio/tools/example-zipper/exampleZipper.js b/aio/tools/example-zipper/exampleZipper.mjs similarity index 91% rename from aio/tools/example-zipper/exampleZipper.js rename to aio/tools/example-zipper/exampleZipper.mjs index a3830bf0fc..4cfae83512 100644 --- a/aio/tools/example-zipper/exampleZipper.js +++ b/aio/tools/example-zipper/exampleZipper.mjs @@ -1,16 +1,16 @@ -'use strict'; - // Canonical path provides a consistent path (i.e. always forward slashes) across different OSes -const path = require('canonical-path'); -const archiver = require('archiver'); -const fs = require('fs-extra'); -const globby = require('globby'); +import archiver from 'archiver'; +import path from 'canonical-path'; +import fs from 'fs-extra'; +import globby from 'globby'; +import {fileURLToPath} from 'url'; -const regionExtractor = require('../transforms/examples-package/services/region-parser'); +import regionExtractor from '../transforms/examples-package/services/region-parser.js'; +const __dirname = path.dirname(fileURLToPath(import.meta.url)); const EXAMPLE_CONFIG_NAME = 'example-config.json'; -class ExampleZipper { +export class ExampleZipper { constructor(sourceDirName, outputDirName) { this.examplesPackageJson = path.join(__dirname, '../examples/shared/package.json'); this.examplesSystemjsConfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/systemjs.config.js'); @@ -46,12 +46,16 @@ class ExampleZipper { _getExampleType(sourceFolder) { const filePath = path.join(sourceFolder, EXAMPLE_CONFIG_NAME); try { - return require(filePath, 'utf-8').projectType || 'cli'; + return this._loadJson(filePath).projectType || 'cli'; } catch (err) { // empty file, so it is cli return 'cli'; } } + _loadJson(filePath) { + return JSON.parse(fs.readFileSync(filePath, 'utf8')); + } + // rename a custom main.ts or index.html file _renameFile(file, exampleType) { if (/src\/main[-.]\w+\.ts$/.test(file) && exampleType !== 'universal') { @@ -66,7 +70,7 @@ class ExampleZipper { } _zipExample(configFileName, sourceDirName, outputDirName) { - let json = require(configFileName, 'utf-8'); + let json = this._loadJson(configFileName); const basePath = json.basePath || ''; const jsonFileName = configFileName.replace(/^.*[\\\/]/, ''); let relativeDirName = path.dirname(path.relative(sourceDirName, configFileName)); @@ -176,5 +180,3 @@ class ExampleZipper { zip.finalize(); } } - -module.exports = ExampleZipper; diff --git a/aio/tools/example-zipper/generateZips.js b/aio/tools/example-zipper/generateZips.mjs similarity index 50% rename from aio/tools/example-zipper/generateZips.js rename to aio/tools/example-zipper/generateZips.mjs index 3054386107..3ae43b83cf 100644 --- a/aio/tools/example-zipper/generateZips.js +++ b/aio/tools/example-zipper/generateZips.mjs @@ -1,6 +1,8 @@ -const ExampleZipper = require('./exampleZipper'); -const path = require('canonical-path'); +import path from 'canonical-path'; +import {fileURLToPath} from 'url'; +import {ExampleZipper} from './exampleZipper.mjs'; +const __dirname = path.dirname(fileURLToPath(import.meta.url)); const EXAMPLES_PATH = path.join(__dirname, '../../content/examples'); const ZIPS_PATH = path.join(__dirname, '../../src/generated/zips'); diff --git a/aio/tools/stackblitz-builder/README.md b/aio/tools/stackblitz-builder/README.md index bd2673e573..ca84140818 100644 --- a/aio/tools/stackblitz-builder/README.md +++ b/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 `` 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/`. diff --git a/aio/tools/stackblitz-builder/builder.js b/aio/tools/stackblitz-builder/builder.mjs similarity index 96% rename from aio/tools/stackblitz-builder/builder.js rename to aio/tools/stackblitz-builder/builder.mjs index 78d937807f..71e299798f 100644 --- a/aio/tools/stackblitz-builder/builder.js +++ b/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; diff --git a/aio/tools/stackblitz-builder/generateStackblitz.js b/aio/tools/stackblitz-builder/generateStackblitz.js deleted file mode 100644 index 0b80089ce0..0000000000 --- a/aio/tools/stackblitz-builder/generateStackblitz.js +++ /dev/null @@ -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(); - diff --git a/aio/tools/stackblitz-builder/generateStackblitz.mjs b/aio/tools/stackblitz-builder/generateStackblitz.mjs new file mode 100644 index 0000000000..8a8e91b0de --- /dev/null +++ b/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();