Use ESM (#5396)

* upgrade remark-emoji

* remove WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG

* migrate build-content-tree

* fix import

* use mjs

* read json

* use mjs

* fix __dirname

* fix __dirname

* fix lodash

* fix __dirname

* fix __dirname

* upgrade remark

* fix import

* upgrade remark-html

* upgrade remark-gfm

* Revert "upgrade remark-gfm"

This reverts commit 88d9713.

* upgrade remark-autolink-headings

* update remark-slug

* upgrade unist-util-visit

* clean up

* fix extension

* upgrade remark-gfm

* Revert "upgrade remark-gfm"

This reverts commit 7a3554e.

* fix __dirname

* fix __dirname

* fix tests for jest

jest.config.mjs

@@ -0,0 +1,11 @@
+import jestConfig from 'jest-config';
+export default {
+  verbose: true,
+  transform: {},
+  moduleFileExtensions: [...jestConfig.defaults.moduleFileExtensions, 'mjs'],
+  testMatch: [
+    '**/__tests__/**/*.[jt]s?(x)',
+    '**/?(*.)+(spec|test).[tj]s?(x)',
+    '**/*.test.mjs',
+  ],
+};

package.json

@@ -28,15 +28,15 @@
     "clean-printable": "rimraf src/content/**/printable.mdx",
     "preclean": "run-s clean-dist clean-printable",
     "clean": "rimraf src/content/**/_*.mdx src/**/_*.json repositories/*.json",
-    "start": "npm run clean-dist && webpack serve --config webpack.dev.js --env dev --progress --node-env development",
-    "content": "node src/scripts/build-content-tree.js ./src/content ./src/_content.json",
-    "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.js --node-env production && run-s printable content && webpack --config webpack.ssg.js --node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
-    "fetch-repos": "node src/utilities/fetch-package-repos.js",
+    "start": "npm run clean-dist && webpack serve --config webpack.dev.mjs --env dev --progress --node-env development",
+    "content": "node src/scripts/build-content-tree.mjs ./src/content ./src/_content.json",
+    "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.mjs --node-env production && run-s printable content && webpack --config webpack.ssg.mjs --node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
+    "fetch-repos": "node src/utilities/fetch-package-repos.mjs",
     "fetch": "run-p fetch:*",
-    "fetch:readmes": "node src/utilities/fetch-package-readmes.js",
-    "fetch:supporters": "node src/utilities/fetch-supporters.js",
+    "fetch:readmes": "node src/utilities/fetch-package-readmes.mjs",
+    "fetch:supporters": "node src/utilities/fetch-supporters.mjs",
     "prebuild": "npm run clean",
-    "build": "run-s fetch-repos fetch content && webpack --config webpack.prod.js --node-env production && run-s printable content && webpack --config webpack.ssg.js --node-env production --env ssg",
+    "build": "run-s fetch-repos fetch content && webpack --config webpack.prod.mjs --node-env production && run-s printable content && webpack --config webpack.ssg.mjs --node-env production --env ssg",
     "postbuild": "npm run sitemap",
     "build-test": "npm run build && http-server --port 4200 dist/",
     "test": "npm run lint",
@@ -50,8 +50,8 @@
     "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml",
     "serve": "npm run build && sirv start ./dist --port 4000",
     "preprintable": "npm run clean-printable",
-    "printable": "node ./src/scripts/concatenate-docs.js",
-    "jest": "jest",
+    "printable": "node ./src/scripts/concatenate-docs.mjs",
+    "jest": "NODE_OPTIONS=--experimental-vm-modules jest --config=jest.config.mjs",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "cypress:ci": "start-server-and-test build-test http://localhost:4200 cypress:run",
@@ -108,22 +108,22 @@
     "mini-css-extract-plugin": "^2.3.0",
     "mkdirp": "^1.0.4",
     "modularscale-sass": "^3.0.3",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^3.0.0",
     "npm-run-all": "^4.1.1",
     "postcss": "^8.3.6",
     "postcss-loader": "^6.1.1",
     "prettier": "^2.4.1",
     "react-refresh": "^0.10.0",
     "redirect-webpack-plugin": "^1.0.0",
-    "remark": "^13.0.0",
-    "remark-autolink-headings": "^6.1.0",
-    "remark-emoji": "^2.2.0",
+    "remark": "^14.0.1",
+    "remark-autolink-headings": "7.0.1",
+    "remark-emoji": "^3.0.1",
     "remark-extract-anchors": "1.1.1",
     "remark-frontmatter": "^3.0.0",
     "remark-gfm": "^1.0.0",
-    "remark-html": "^13.0.2",
+    "remark-html": "^14.0.0",
     "remark-refractor": "montogeek/remark-refractor",
-    "remark-slug": "^6.1.0",
+    "remark-slug": "^7.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.41.1",
     "sass-loader": "^12.1.0",
@@ -134,7 +134,7 @@
     "style-loader": "^3.2.1",
     "tailwindcss": "^2.2.15",
     "tap-spot": "^1.1.1",
-    "unist-util-visit": "^2.0.3",
+    "unist-util-visit": "^4.0.0",
     "webpack": "^5.53.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.8.0",
@@ -155,7 +155,6 @@
     "react-tiny-popover": "5",
     "react-use": "^17.3.1",
     "react-visibility-sensor": "^5.0.2",
-    "unist-util-visit": "^2.0.3",
     "webpack-pwa-manifest": "^4.3.0",
     "webpack.vote": "https://github.com/webpack/voting-app.git",
     "workbox-window": "^6.3.0"

src/ProdAssetsManifest.js → src/ProdAssetsManifest.mjs

@@ -1,4 +1,5 @@
-const { Compilation, sources } = require('webpack');
+import webpack from 'webpack';
+const { Compilation, sources } = webpack;
 
 // collect assets data (vendor.[contenthash].js and index.[contenthash].js) for ssg
 class ProdAssetsManifest {
@@ -46,4 +47,4 @@ class ProdAssetsManifest {
     });
   }
 }
-module.exports = ProdAssetsManifest;
+export default ProdAssetsManifest;

src/components/Site/Site.jsx

@@ -10,9 +10,9 @@ import {
   extractSections,
   getPageDescription,
   getPageTitle,
-} from '../../utilities/content-utils';
+} from '../../utilities/content-utils.mjs';
 import isClient from '../../utilities/is-client';
-import getAdjacentPages from '../../utilities/get-adjacent-pages';
+import getAdjacentPages from '../../utilities/get-adjacent-pages/index.mjs';
 
 // Import Components
 import NotificationBar from '../NotificationBar/NotificationBar';

src/remark-plugins/remark-cleanup-readme/index.js → src/remark-plugins/remark-cleanup-readme/index.mjs

@@ -1,8 +1,8 @@
-const visit = require('unist-util-visit');
+import { visit } from 'unist-util-visit';
 // remove items other than paragraphs in div[align="center"]
 // e.g., logo, title and so on.
 // see the original version at https://github.com/webpack/webpack.js.org/blob/webpack-4/src/utilities/process-readme.js#L71
-module.exports = function remarkCleanupReadme() {
+export default function remarkCleanupReadme() {
   return function transformer(tree) {
     visit(tree, 'mdxJsxFlowElement', visitor);
     function visitor(node) {
@@ -20,4 +20,4 @@ module.exports = function remarkCleanupReadme() {
       }
     }
   };
-};
+}

src/remark-plugins/remark-cleanup-readme/index.test.js → src/remark-plugins/remark-cleanup-readme/index.test.mjs

@@ -1,4 +1,5 @@
-const mdx = require('@mdx-js/mdx');
+import mdx from '@mdx-js/mdx';
+import CleanupReadme from './index.mjs';
 describe('cleanup readme', () => {
   it('should clean up div[align="center"] block without paragraph', () => {
     const mdxText = `
@@ -12,7 +13,7 @@ describe('cleanup readme', () => {
 </div>
 `;
     const html = mdx.sync(mdxText, {
-      remarkPlugins: [require('./index.js')],
+      remarkPlugins: [CleanupReadme],
     });
     expect(html).toMatchSnapshot();
   });
@@ -32,7 +33,7 @@ describe('cleanup readme', () => {
 </div>
     `;
     const html = mdx.sync(mdxText, {
-      remarkPlugins: [require('./index.js')],
+      remarkPlugins: [CleanupReadme],
     });
     expect(html).toMatchSnapshot();
   });
@@ -67,7 +68,7 @@ describe('cleanup readme', () => {
 </div>
         `;
     const html = mdx.sync(mdxText, {
-      remarkPlugins: [require('./index.js')],
+      remarkPlugins: [CleanupReadme],
     });
     expect(html).toMatchSnapshot();
   });

src/remark-plugins/remark-custom-asides/index.js → src/remark-plugins/remark-custom-asides/index.mjs

@@ -2,8 +2,8 @@
  * based on https://github.com/montogeek/remark-custom-blockquotes
  */
 
-const visit = require('unist-util-visit');
-module.exports = function customAsides(
+import { visit } from 'unist-util-visit';
+export default function customAsides(
   options = {
     mapping: {},
   }
@@ -67,4 +67,4 @@ module.exports = function customAsides(
       }
     }
   };
-};
+}

src/remark-plugins/remark-custom-asides/index.test.js → src/remark-plugins/remark-custom-asides/index.test.mjs

@@ -1,18 +1,20 @@
-import remark from 'remark';
+import { remark } from 'remark';
+import remarkHtml from 'remark-html';
+import Plugin from './index.mjs';
 describe('customize blockquote', () => {
   it('should transform W> into aside of warning', () => {
     remark()
-      .use(require('./index.js'), {
+      .use(Plugin, {
         mapping: {
           'W>': 'warning',
         },
       })
-      .use(require('remark-html'))
+      .use(remarkHtml)
       .process(
         `
 W> hello world
 `,
-        function (err, { contents }) {
+        function (err, { value: contents }) {
           expect(err).toBeNull();
           expect(contents).toContain('<aside class="warning"');
           expect(contents).toContain('<h6 class="warning__prefix"');

src/remark-plugins/remark-responsive-table/remark-responsive-table.js → src/remark-plugins/remark-responsive-table/remark-responsive-table.mjs

@@ -1,6 +1,6 @@
 // this plugin was first based on https://github.com/montogeek/remark-responsive-tables
-const visit = require('unist-util-visit');
-module.exports = function remarkResponsiveTable() {
+import { visit } from 'unist-util-visit';
+export default function remarkResponsiveTable() {
   return function transformer(tree) {
     visit(tree, 'table', visitor);
     function visitor(node) {
@@ -40,4 +40,4 @@ module.exports = function remarkResponsiveTable() {
       });
     }
   };
-};
+}

src/remark-plugins/remark-responsive-table/remark-responsive-table.test.js → src/remark-plugins/remark-responsive-table/remark-responsive-table.test.mjs

@@ -1,9 +1,14 @@
-import remark from 'remark';
+import { describe, expect } from '@jest/globals';
+
+import { remark } from 'remark';
+import remarkHtml from 'remark-html';
+import remarkGfm from 'remark-gfm';
+import remarkResponsiveTable from './remark-responsive-table.mjs';
 describe('responsive table', () => {
   const processor = remark()
-    .use(require('remark-gfm'))
-    .use(require('./remark-responsive-table.js'))
-    .use(require('remark-html'));
+    .use(remarkGfm)
+    .use(remarkResponsiveTable)
+    .use(remarkHtml);
   it('should add data-th', () => {
     processor.process(
       `
@@ -12,7 +17,7 @@ describe('responsive table', () => {
 | baz |  |
 | sam | chen |
       `,
-      (error, { contents }) => {
+      (error, { value: contents }) => {
         expect(error).toBeNull();
         expect(contents).toContain('data-th="foo"');
         expect(contents).toContain('data-th="bar"');
@@ -29,7 +34,7 @@ describe('responsive table', () => {
 | baz |  |
 | sam | chen |
       `,
-      (error, { contents }) => {
+      (error, { value: contents }) => {
         expect(error).toBeNull();
         expect(contents).toMatchSnapshot();
       }

src/scripts/build-content-tree.js → src/scripts/build-content-tree.mjs

@@ -1,26 +1,27 @@
 #!/usr/bin/env node
 // ./build-content-tree source output
 // ./build-content-tree "./src/content" ".src/_content.json"
-
-const directoryTree = require('directory-tree');
-const fs = require('fs');
-const path = require('path');
+import directoryTree from 'directory-tree';
+import fs from 'fs';
+import path from 'path';
 
 // Import Utils
-const { restructure } = require('../utilities/content-tree-enhancers.js');
+import { restructure } from '../utilities/content-tree-enhancers.mjs';
 
-if (require.main === module) {
-  main();
-} else {
-  module.exports = buildContentTree;
-}
+// if (require.main === module) {
+//   main();
+// } else {
+//   module.exports = buildContentTree;
+// }
 
 function main() {
   const source = process.argv[2];
   const output = process.argv[3];
   buildContentTree(source, output);
 }
 
+main();
+
 function buildContentTree(source, output) {
   if (!source) {
     return console.error('build-content-tree: you must provide a source path');

src/scripts/concatenate-docs.js → src/scripts/concatenate-docs.mjs

@@ -1,7 +1,7 @@
-const fs = require('fs');
-const path = require('path');
-const os = require('os');
-const front = require('front-matter');
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import front from 'front-matter';
 
 // root path
 const rootPath = path.join('src', 'content');

src/utilities/constants.js → src/utilities/constants.mjs

@@ -1,4 +1,4 @@
-const excludedLoaders = [
+export const excludedLoaders = [
   'webpack-contrib/config-loader',
   'webpack-contrib/eslint-loader',
   'webpack-contrib/transform-loader',
@@ -25,7 +25,7 @@ const excludedLoaders = [
   'webpack-contrib/istanbul-instrumenter-loader',
   'webpack-contrib/worker-loader',
 ];
-const excludedPlugins = [
+export const excludedPlugins = [
   'webpack-contrib/component-webpack-plugin',
   'webpack-contrib/extract-text-webpack-plugin',
   'webpack-contrib/i18n-webpack-plugin',
@@ -34,8 +34,3 @@ const excludedPlugins = [
   'webpack-contrib/zopfli-webpack-plugin',
   'webpack-contrib/closure-webpack-plugin',
 ];
-
-module.exports = {
-  excludedLoaders,
-  excludedPlugins,
-};