Remove references to fs/promises and add a snapshot for esbuild to ma…

…intain compatibility
jpmorganchase · Sep 21, 2021 · a99dea2 · a99dea2
1 parent f6377a7
commit a99dea2
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 16 deletions.
diff --git a/.changeset/tame-ducks-check.md b/.changeset/tame-ducks-check.md
@@ -0,0 +1,6 @@
+---
+'modular-scripts': patch
+---
+
+Remove references to fs/promises and add a snapshot for esbuild to maintain
+compatibility
diff --git a/.eslintignore b/.eslintignore
@@ -5,6 +5,7 @@ node_modules
 
 # created by tests in modular-scripts
 packages/sample-app
+packages/sample-esbuild-app
 packages/sample-view
 packages/sample-package
 

diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ node_modules
 
 # created by tests in modular-scripts
 packages/sample-app
+packages/sample-esbuild-app
 packages/sample-view
 packages/sample-package
 packages/nested

diff --git a/babel.config.js b/babel.config.js
@@ -24,6 +24,9 @@ module.exports = (api) => {
       ],
       '@babel/preset-react',
     ],
+    plugins: [
+      ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ],
     overrides: [
       {
         test: /\.tsx?$/,

diff --git a/packages/modular-scripts/package.json b/packages/modular-scripts/package.json
@@ -49,8 +49,8 @@
     "detect-port-alt": "1.1.6",
     "dotenv": "10.0.0",
     "dotenv-expand": "5.1.0",
-    "esbuild-loader": "2.15.1",
     "esbuild": "0.12.28",
+    "esbuild-loader": "2.15.1",
     "escape-string-regexp": "2.0.0",
     "eslint": "7.32.0",
     "execa": "5.1.1",
@@ -68,8 +68,8 @@
     "is-ci": "2.0.0",
     "is-root": "2.1.0",
     "jest": "26.6.3",
-    "jest-cli": "26.6.3",
     "jest-circus": "26.6.3",
+    "jest-cli": "26.6.3",
     "jest-config": "26.6.3",
     "jest-runner-eslint": "0.10.1",
     "jest-transform-stub": "2.0.0",

diff --git a/packages/modular-scripts/react-dev-utils/typescriptFormatter.js b/packages/modular-scripts/react-dev-utils/typescriptFormatter.js
@@ -13,9 +13,8 @@ const issueOrigins = {
 function formatter(issue) {
   const { origin, severity, file, line, message, code, character } = issue;
 
-  const colors = new chalk.constructor();
-  const messageColor = severity === 'warning' ? colors.yellow : colors.red;
-  const fileAndNumberColor = colors.bold.cyan;
+  const messageColor = severity === 'warning' ? chalk.yellow : chalk.red;
+  const fileAndNumberColor = chalk.bold.cyan;
 
   const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8');
   const frame = source

diff --git a/packages/modular-scripts/src/__tests__/__snapshots__/app.esbuild.test.ts.snap b/packages/modular-scripts/src/__tests__/__snapshots__/app.esbuild.test.ts.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when working with an app can generate a index.html 1`] = `
+"<!DOCTYPE html>
+<html lang=\\"en\\">
+  <head>
+    <meta charset=\\"utf-8\\" />
+    <link rel=\\"icon\\" href=\\"/favicon.ico\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\" />
+    <meta name=\\"theme-color\\" content=\\"#000000\\" />
+    <meta
+      name=\\"description\\"
+      content=\\"Web site created using create-modular-app\\"
+    />
+    <link rel=\\"apple-touch-icon\\" href=\\"/logo192.png\\" />
+    <link rel=\\"manifest\\" href=\\"/manifest.json\\" />
+    <title>React App</title>
+    <link rel=\\"stylesheet\\" href=\\"/index.css\\" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id=\\"root\\"></div>
+    <script type=\\"module\\" src=\\"/index.js\\"></script>
+  </body>
+</html>
+"
+`;
diff --git a/packages/modular-scripts/src/__tests__/__snapshots__/app.test.ts.snap b/packages/modular-scripts/src/__tests__/__snapshots__/app.test.ts.snap
@@ -16493,7 +16493,7 @@ exports[`when working with an app can generate a index.html 1`] = `
     <meta name=\\"theme-color\\" content=\\"#000000\\" />
     <meta
       name=\\"description\\"
-      content=\\"Web site created using create-react-app\\"
+      content=\\"Web site created using create-modular-app\\"
     />
     <link rel=\\"apple-touch-icon\\" href=\\"/logo192.png\\" />
     <link rel=\\"manifest\\" href=\\"/manifest.json\\" />

diff --git a/packages/modular-scripts/src/__tests__/app.esbuild.test.ts b/packages/modular-scripts/src/__tests__/app.esbuild.test.ts
@@ -0,0 +1,110 @@
+import execa from 'execa';
+import rimraf from 'rimraf';
+import tree from 'tree-view-for-tests';
+import path from 'path';
+import fs from 'fs-extra';
+import prettier from 'prettier';
+
+import getModularRoot from '../utils/getModularRoot';
+
+const modularRoot = getModularRoot();
+
+// These tests must be executed sequentially with `--runInBand`.
+
+const packagesPath = path.join(getModularRoot(), 'packages');
+
+function modular(str: string, opts: Record<string, unknown> = {}) {
+  return execa('yarnpkg', ['modular', ...str.split(' ')], {
+    cwd: modularRoot,
+    cleanup: true,
+    // @ts-ignore
+    env: {
+      USE_MODULAR_ESBUILD: 'true',
+    },
+    ...opts,
+  });
+}
+
+function cleanup() {
+  rimraf.sync(path.join(packagesPath, 'sample-esbuild-app'));
+  rimraf.sync(path.join(modularRoot, 'dist/sample-esbuild-app'));
+
+  // run yarn so yarn.lock gets reset
+  return execa.sync('yarnpkg', ['--silent'], {
+    cwd: modularRoot,
+  });
+}
+
+beforeAll(cleanup);
+afterAll(cleanup);
+
+describe('when working with an app', () => {
+  beforeAll(async () => {
+    await modular(
+      'add sample-esbuild-app --unstable-type app --unstable-name sample-esbuild-app',
+      { stdio: 'inherit' },
+    );
+
+    await modular('build sample-esbuild-app', {
+      stdio: 'inherit',
+    });
+  });
+
+  it('can add an app', () => {
+    expect(tree(path.join(packagesPath, 'sample-esbuild-app')))
+      .toMatchInlineSnapshot(`
+      "sample-esbuild-app
+      ├─ package.json
+      ├─ public
+      │  ├─ favicon.ico #6pu3rg
+      │  ├─ index.html #1wohq3p
+      │  ├─ logo192.png #1nez7vk
+      │  ├─ logo512.png #1hwqvcc
+      │  ├─ manifest.json #19gah8o
+      │  └─ robots.txt #1sjb8b3
+      ├─ src
+      │  ├─ App.css #1o0zosm
+      │  ├─ App.tsx #c80ven
+      │  ├─ __tests__
+      │  │  └─ App.test.tsx #16urcos
+      │  ├─ index.css #o7sk21
+      │  ├─ index.tsx #zdn6mw
+      │  ├─ logo.svg #1okqmlj
+      │  └─ react-app-env.d.ts #t4ygcy
+      └─ tsconfig.json #6rw46b"
+    `);
+  });
+
+  it('can build an app', () => {
+    expect(tree(path.join(modularRoot, 'dist', 'sample-esbuild-app')))
+      .toMatchInlineSnapshot(`
+      "sample-esbuild-app
+      ├─ favicon.ico #6pu3rg
+      ├─ index.css #1g5dmd3
+      ├─ index.css.map #u2fo3e
+      ├─ index.html #1pinlfh
+      ├─ index.js #1o0ba8n
+      ├─ index.js.map #ek9rs
+      ├─ logo-PGX3QVVN.svg #1okqmlj
+      ├─ logo192.png #1nez7vk
+      ├─ logo512.png #1hwqvcc
+      ├─ manifest.json #19gah8o
+      └─ robots.txt #1sjb8b3"
+    `);
+  });
+
+  it('can generate a index.html', async () => {
+    expect(
+      prettier.format(
+        String(
+          await fs.readFile(
+            path.join(modularRoot, 'dist', 'sample-esbuild-app', 'index.html'),
+          ),
+        ),
+        {
+          filepath: 'index.html',
+        },
+      ),
+    ).toMatchSnapshot();
+  });
+});
diff --git a/packages/modular-scripts/src/build/buildPackage/makeBundle.ts b/packages/modular-scripts/src/build/buildPackage/makeBundle.ts
@@ -101,7 +101,15 @@ export async function makeBundle(
           ],
           require.resolve('@babel/preset-react'),
         ],
-        plugins: [require.resolve('@babel/plugin-proposal-class-properties')],
+        plugins: [
+          require.resolve('@babel/plugin-proposal-class-properties'),
+          [
+            require.resolve(
+              '@babel/plugin-proposal-private-property-in-object',
+            ),
+            { loose: true },
+          ],
+        ],
         extensions,
         include: [`packages/**/*`],
         exclude: 'node_modules/**',

diff --git a/packages/modular-scripts/src/esbuild-scripts/api.ts b/packages/modular-scripts/src/esbuild-scripts/api.ts
@@ -18,22 +18,22 @@ export async function createIndex(
     (node) => node.nodeName === 'head',
   ) as parse5.Element;
   head.childNodes.push(
-    ...parse5.parse(
+    ...parse5.parseFragment(
       `<link rel="stylesheet" href="%PUBLIC_URL%/index.css"></script>`,
     ).childNodes,
   );
   const body = html.childNodes.find(
     (node) => node.nodeName === 'body',
   ) as parse5.Element;
   body.childNodes.push(
-    ...parse5.parse(
+    ...parse5.parseFragment(
       `<script type="module" src="%PUBLIC_URL%/index.js"></script>`,
     ).childNodes,
   );
 
   if (includeRuntime) {
     body.childNodes.push(
-      ...parse5.parse(
+      ...parse5.parseFragment(
         `<script type="module" src="%PUBLIC_URL%/_runtime/index.js"></script>`,
       ).childNodes,
     );

diff --git a/packages/modular-scripts/src/esbuild-scripts/build/index.ts b/packages/modular-scripts/src/esbuild-scripts/build/index.ts
@@ -29,7 +29,7 @@ export default async function build(target: string, paths: Paths) {
       decodeEntities: true,
       minifyCSS: true,
       minifyJS: true,
-      removeAttributeQuotes: true,
+      removeAttributeQuotes: false,
       removeComments: true,
       removeTagWhitespace: true,
     }),

diff --git a/packages/modular-scripts/src/esbuild-scripts/plugins/incrementalCompile.ts b/packages/modular-scripts/src/esbuild-scripts/plugins/incrementalCompile.ts
@@ -1,7 +1,7 @@
 import { JSONSchemaForNPMPackageJsonFiles as PackageJson } from '@schemastore/package';
 import { Plugin } from 'esbuild';
 import chalk from 'chalk';
-import * as fs from 'fs/promises';
+import * as fs from 'fs-extra';
 import { Paths } from '../../utils/createPaths';
 import * as logger from '../../utils/logger';
 import { InstructionURLS } from '../config/urls';

diff --git a/packages/modular-scripts/src/esbuild-scripts/plugins/svgr.ts b/packages/modular-scripts/src/esbuild-scripts/plugins/svgr.ts
@@ -1,4 +1,4 @@
-import * as fs from 'fs/promises';
+import * as fs from 'fs-extra';
 import esbuild from 'esbuild';
 
 // @ts-ignore

diff --git a/packages/modular-scripts/src/esbuild-scripts/start/index.ts b/packages/modular-scripts/src/esbuild-scripts/start/index.ts
@@ -2,7 +2,7 @@ import * as esbuild from 'esbuild';
 import chalk from 'chalk';
 import * as express from 'express';
 import ws from 'express-ws';
-import * as fs from 'fs/promises';
+import * as fs from 'fs-extra';
 import * as http from 'http';
 import * as path from 'path';
 import * as tmp from 'tmp';

diff --git a/packages/modular-scripts/src/esbuild-scripts/utils/formatError.ts b/packages/modular-scripts/src/esbuild-scripts/utils/formatError.ts
@@ -1,6 +1,6 @@
 import { Message } from 'esbuild';
 import chalk from 'chalk';
-import * as fs from 'fs/promises';
+import * as fs from 'fs-extra';
 import codeFrame from 'babel-code-frame';
 
 export async function formatError(error: Message): Promise<string> {

diff --git a/packages/modular-scripts/types/app/public/index.html b/packages/modular-scripts/types/app/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Web site created using create-modular-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--