Merge pull request #2324 from jpmorganchase/feature/v4.2

Feature/v4.2
jpmorganchase · Mar 28, 2023 · f8daf18 · f8daf18
2 parents 348da35 + 2c25504
commit f8daf18
Show file tree

Hide file tree

Showing 137 changed files with 5,000 additions and 4,627 deletions.
diff --git a/.changeset/bright-donuts-approve.md b/.changeset/bright-donuts-approve.md
@@ -0,0 +1,5 @@
+---
+'modular-scripts': minor
+---
+
+Modular test works on non-modular packages with test script
diff --git a/.changeset/cyan-peaches-visit.md b/.changeset/cyan-peaches-visit.md
@@ -0,0 +1,5 @@
+---
+"modular-scripts": minor
+---
+
+Support public assets for esm-views
diff --git a/.changeset/new-pans-tell.md b/.changeset/new-pans-tell.md
@@ -0,0 +1,5 @@
+---
+"modular-scripts": minor
+---
+
+Support custom `public/index.html` for esm-views
diff --git a/.changeset/plenty-jeans-call.md b/.changeset/plenty-jeans-call.md
@@ -0,0 +1,5 @@
+---
+'modular-scripts': minor
+---
+
+Fix support for SSL certificates in esbuild mode
diff --git a/.changeset/sixty-lions-kneel.md b/.changeset/sixty-lions-kneel.md
@@ -0,0 +1,5 @@
+---
+'modular-scripts': minor
+---
+
+Rewrote Webpack Configuration in TypeScript
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -2,9 +2,9 @@ name: Lint
 
 on:
   push:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   Static:

diff --git a/.github/workflows/test-windows.yml b/.github/workflows/test-windows.yml
@@ -5,9 +5,9 @@ name: Windows Test
 
 on:
   push:
-    branches: [main, 'release/**', 'feature/v4.1']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**', 'feature/v4.1']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   Test:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -5,9 +5,9 @@ name: Test
 
 on:
   push:
-    branches: [main, 'release/**', 'feature/v4.1']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**', 'feature/v4.1']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   Test:

diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -1,9 +1,9 @@
 name: 'Validate'
 on:
   push:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   check-yarn-lock-registry:

diff --git a/__fixtures__/non-modular/packages/app/src/App.tsx b/__fixtures__/non-modular/packages/app/src/App.tsx
@@ -6,7 +6,7 @@ function App(): JSX.Element {
     <div className="App">
       <p>This is the sum:</p>
       <p>
-        <code>7 + 7 = {sum(7, 7)}</code>
+        <code>{`The result is ${sum(7, 7)}`}</code>
       </p>
     </div>
   );

diff --git a/__fixtures__/non-modular/packages/app/src/__tests__/App.test.tsx b/__fixtures__/non-modular/packages/app/src/__tests__/App.test.tsx
@@ -4,6 +4,6 @@ import App from '../App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/The result is 14/i);
   expect(linkElement).toBeInTheDocument();
 });
diff --git a/...ages/non-modular-non-buildable/.gitignore → ...lar-non-buildable-non-testable/.gitignore b/...ages/non-modular-non-buildable/.gitignore → ...lar-non-buildable-non-testable/.gitignore
diff --git a/__fixtures__/non-modular/packages/non-modular-non-buildable-non-testable/package.json b/__fixtures__/non-modular/packages/non-modular-non-buildable-non-testable/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "non-modular-non-buildable-non-testable",
+  "private": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "UNLICENSED",
+  "main": "./dist/index.js",
+  "version": "1.0.0"
+}
diff --git a/...non-buildable/src/__tests__/index.test.ts → ...-non-testable/src/__tests__/index.test.ts b/...non-buildable/src/__tests__/index.test.ts → ...-non-testable/src/__tests__/index.test.ts
diff --git a/...es/non-modular-non-buildable/src/index.ts → ...r-non-buildable-non-testable/src/index.ts b/...es/non-modular-non-buildable/src/index.ts → ...r-non-buildable-non-testable/src/index.ts
diff --git a/...s/non-modular-non-buildable/tsconfig.json → ...-non-buildable-non-testable/tsconfig.json b/...s/non-modular-non-buildable/tsconfig.json → ...-non-buildable-non-testable/tsconfig.json
diff --git a/__fixtures__/non-modular/packages/non-modular-testable/.gitignore b/__fixtures__/non-modular/packages/non-modular-testable/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/...es/non-modular-non-buildable/package.json → ...ackages/non-modular-testable/package.json b/...es/non-modular-non-buildable/package.json → ...ackages/non-modular-testable/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "non-modular-non-buildable",
+  "name": "non-modular-testable",
   "private": false,
   "scripts": {
-    "test": "echo 'Test done!'"
+    "test": "echo 'non-modular-testable was tested'"
   },
   "files": [
     "dist",

diff --git a/__fixtures__/non-modular/packages/non-modular-testable/src/__tests__/index.test.ts b/__fixtures__/non-modular/packages/non-modular-testable/src/__tests__/index.test.ts
@@ -0,0 +1,5 @@
+import add from '../index';
+
+test('it should add two numbers', () => {
+  expect(add(1, 2)).toBe(3);
+});
diff --git a/__fixtures__/non-modular/packages/non-modular-testable/src/index.ts b/__fixtures__/non-modular/packages/non-modular-testable/src/index.ts
@@ -0,0 +1,3 @@
+export default function add(a: number, b: number): number {
+  return a + b;
+}
diff --git a/__fixtures__/non-modular/packages/non-modular-testable/tsconfig.json b/__fixtures__/non-modular/packages/non-modular-testable/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "es2018",
+    "outDir": "dist",
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true
+  }
+}
diff --git a/docs/commands/build.md b/docs/commands/build.md
@@ -169,14 +169,13 @@ will:
 - Build `e`, because it only depends on `a`, that got built in the previous
   step.
 
-  ## Non-Modular packages
-
-  Packages without a `modular` configuration are built only if they have a
-  `build`
-  [script](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#scripts)
-  in their `package.json`. For example, if you have a Modular package named
-  "app" of type `app` that imports a simple non-Modular package called
-  "non-modular-buildable" that is able to build itself using `tsc`:
+## Non-Modular packages
+
+Packages without a `modular` configuration are built only if they have a `build`
+[script](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#scripts) in
+their `package.json`. For example, if you have a Modular package named "app" of
+type `app` that imports a simple non-Modular package called
+"non-modular-buildable" that is able to build itself using `tsc`:
 
 ### packages/non-modular-buildable/package.json
 

diff --git a/docs/commands/start.md b/docs/commands/start.md
@@ -16,6 +16,33 @@ module within a template app, which we stage in a `node_modules/.modular`
 folder. You can develop your view as you normally would an app and it will
 automatically re-compile as you make changes in the view package.
 
+## HTTPS
+
+That are several options for enabling HTTPS in local development.
+
+Modular follows the
+[CRA implementation to enable HTTPS](https://create-react-app.dev/docs/using-https-in-development/#custom-ssl-certificate).
+
+There are two SSL certificate options available:
+
+1. Plain, self-signed (default): use the default self-signed certificate that
+   gets generated automatically (requires user to accept an invalid cert)
+2. A custom, signed certificate: you want to use a custom certificate (e.g. to
+   get a valid certificate chain that will enable authentication flows)
+
+To use custom certificates, provide the `SSL_CRT_FILE` and `SSL_KEY_FILE`
+environment variables:
+
+```bash
+HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key yarn modular start
+```
+
+Both values can be filenames or paths to files within the project. Modular will
+look for your files:
+
+1. In the individual package directory
+2. In the monorepo root
+
 ## Options:
 
 `--verbose`: Run yarn commands with the --verbose flag set
diff --git a/docs/commands/test.md b/docs/commands/test.md
@@ -5,9 +5,30 @@ title: modular test
 
 # `modular test [options] [packages...]`
 
-`test` is an opinionated wrapper around [`jest`](https://jestjs.io/) which runs
-tests against the entire `modular` project. It comes with out-of-the-box
-configuration and opinionation.
+Search workspaces based on their `name` field in the `package.json` and test:
+
+- Modular packages, according to their respective `modular.type`. In this case,
+  `modular test` will act as an opinionated wrapper around
+  [`jest`](https://jestjs.io/), which comes with out-of-the-box configuration.
+- Non-Modular packages (i.e. packages without a `modular` configuration), only
+  if they have a `test`
+  [script](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#scripts),
+  by running `yarn test` on the package's
+  [workspace](https://classic.yarnpkg.com/en/docs/cli/workspace).
+
+When the `[packages...]` argument is empty and no selective option has been
+specified (for example when running `yarn modular test`), tests will be run for
+all testable packages in the repo. When the `[packages...]` argument contains
+one or more non-existing package name, the non-existing packages will be ignored
+without an error. If any package or selective option have been defined but
+Modular can't find any package to test, Modular will warn on `stdout` and exit
+with code `0`.
+
+Test order is unspecified by design, so please don't rely on the assumption that
+certain tests will run before others, that Modular tests will run before
+non-Modular tests, or that they will run sequentially. An exception to this,
+valid only for Modular tests (that are run by Jest), is when
+[the `--runinband` option is specified](https://jestjs.io/docs/cli#--runinband).
 
 ## Configuration
 

diff --git a/docs/package-types/esm-view.md b/docs/package-types/esm-view.md
@@ -16,8 +16,6 @@ following essential differences:
 1. All their external `import`s are rewritten to point to an
    [ESM CDN](../esm-views/esm-cdn.md).
 
-1. They don't allow the user to specify a custom `index.html`
-
 1. They don't include a `public` folder in the build
 
 1. They expect their entry-point (`src/index.tsx`) to not render to the DOM, but
@@ -63,9 +61,12 @@ for external dependencies that are re-written to an ESM CDN (this behaviour is
 
 ### Dynamically loading vs statically serving ESM Views
 
-The resulting output of an ESM View contains a synthetically-generated
-`index.html` file and a `_trampoline.js` loader, which allows an ESM View to be
-served like a static website. The JS and CSS bundle are hashed and linked in the
+The resulting output of an ESM View contains an `index.html` file, which is
+generated from the user-specified `public/index.html` or is synthetically
+generated from a simple internal template if that file is missing. Either way,
+the resulting `index.html` links to a synthetically-generated `_trampoline.js`
+module, which allows an ESM View to be served like a static website. The JS and
+CSS bundles are hashed and linked in the
 [generated package.json](../esm-views/output-package-manifest.md), that the
 loading code can fetch and examine before importing the `esm-view` at runtime.
 For example, this is the stucture of a built ESM View on the filesystem:
@@ -85,10 +86,10 @@ For example, this is the stucture of a built ESM View on the filesystem:
       └── main.bf0399f0.js.map
 ```
 
-where `/index.html` and `/static/js/_trampoline` are generated to statically
-serve the ESM View. It is also possible to load the ESM view dynamically, by
-discovering the hashed JS (`/static/js/main.bf0399f0.js`) and CSS
-(`/static/css/main.1915b736.css`) entrypoints from the generated
+where `/static/js/_trampoline` (and, possibly, `index.html`) is generated to
+statically serve the ESM View. It is also possible to load the ESM view
+dynamically, by discovering the hashed JS (`/static/js/main.bf0399f0.js`) and
+CSS (`/static/css/main.1915b736.css`) entrypoints from the generated
 `/package.json`:
 
 ```
@@ -145,9 +146,9 @@ a React component as default for this to work.
 
 ## Entry-point
 
-ESM-Views need an entry-point file located at `src/index.tsx`, which typically
-exports a React component as default for the synthetically generated
-`index.html` and the `start` command to work.
+ESM-Views need an entry-point file located at `src/index.tsx`, which by
+convention exports a React component as default for the `modular start` command
+to work.
 
 ## Template
 

diff --git a/docs/package-types/index.md b/docs/package-types/index.md
@@ -22,7 +22,7 @@ details their unique features.
 | Type                        | [start](../commands/start.md) | [build](../commands/build.md) | [test](../commands/test.md) | [lint](../commands/lint.md) | Custom index / assets      | Bundled               | Entry-point                    |
 | --------------------------- | ----------------------------- | ----------------------------- | --------------------------- | --------------------------- | -------------------------- | --------------------- | ------------------------------ |
 | [`app`](./app.md)           | ✅                            | ✅                            | ✅                          | ✅                          | ✅                         | ✅                    | `src/index.tsx`                |
-| [`esm-view`](./esm-view.md) | ✅                            | ✅                            | ✅                          | ✅                          | ❌                         | ✅†                   | `src/index.tsx`                |
+| [`esm-view`](./esm-view.md) | ✅                            | ✅                            | ✅                          | ✅                          | ✅                         | ✅†                   | `src/index.tsx`                |
 | [`package`](./package.md)   | ❌                            | ✅                            | ✅                          | ✅                          | **N/A**                    | ❌                    | `main` field of `package.json` |
 | [`view`](./view.md)         | ✅                            | ✅                            | ✅                          | ✅                          | ❌                         | ❌                    | `main` field of `package.json` |
 | [`source`](./source.md)     | ❌                            | ❌                            | ✅                          | ✅                          | **N/A**                    | **N/A** - never built | **N/A** - never built          |

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "lint:fix": "yarn lint --fix",
     "create-modular-react-app": "ts-node packages/create-modular-react-app/src/cli.ts",
     "modular": "ts-node packages/modular-scripts/src/cli.ts",
-    "test": "yarn modular test --watchAll false --runInBand --env node",
+    "test": "yarn modular test --regex --watchAll false --runInBand --env node",
     "build": "yarn workspace @modular-scripts/workspace-resolver build && yarn workspace create-modular-react-app build && yarn workspace modular-scripts build && yarn workspace modular-views.macro build && yarn modular build @modular-scripts/remote-view && yarn prepare:remote-view",
     "prepare": "is-ci || husky install",
     "prepare:remote-view:copy": "cp -R dist/modular-scripts-remote-view packages/remote-view/dist",

diff --git a/packages/modular-scripts/package.json b/packages/modular-scripts/package.json
@@ -24,7 +24,7 @@
     "modular": "ts-node src/cli.ts",
     "clean": "rimraf build dist-cjs",
     "prebuild": "yarn clean",
-    "build": "babel --source-maps --root-mode upward src --out-dir dist-cjs --extensions .ts --ignore 'src/**/*.test.ts'"
+    "build": "babel --source-maps --root-mode upward src --out-dir dist-cjs --extensions .ts,.js --ignore 'src/**/*.test.ts'"
   },
   "dependencies": {
     "@babel/code-frame": "7.18.6",
@@ -34,11 +34,17 @@
     "@rollup/plugin-commonjs": "22.0.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "@schemastore/tsconfig": "0.0.9",
     "@svgr/core": "6.2.1",
     "@svgr/webpack": "6.2.1",
+    "@types/case-sensitive-paths-webpack-plugin": "^2.1.6",
     "@types/lodash": "^4.14.191",
     "@types/micromatch": "4.0.2",
+    "@types/node": "^18.11.18",
     "@types/npmcli__arborist": "^5.6.0",
+    "@types/postcss-normalize": "^9.0.1",
+    "@types/shell-quote": "^1.7.1",
+    "@types/webpack": "^5.28.0",
     "@types/yarnpkg__lockfile": "^1.1.5",
     "@yarnpkg/lockfile": "^1.1.0",
     "address": "1.2.1",
@@ -81,7 +87,7 @@
     "jest-circus": "^29.0.0",
     "jest-cli": "^29.0.0",
     "jest-config": "^29.0.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^29.4.2",
     "jest-runner-eslint": "1.1.0",
     "jest-transform-stub": "2.0.0",
     "jest-watch-typeahead": "^2.0.0",
@@ -115,6 +121,7 @@
     "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-postcss": "4.0.2",
     "sass-loader": "13.0.2",
+    "selfsigned": "^2.1.1",
     "semver": "7.3.7",
     "semver-regex": "3.1.4",
     "shell-quote": "1.7.3",
@@ -128,8 +135,8 @@
     "update-notifier": "5.1.0",
     "url-loader": "4.1.1",
     "validate-npm-package-name": "^4.0.0",
-    "webpack": "5.74.0",
-    "webpack-dev-server": "4.9.3",
+    "webpack": "5.75.0",
+    "webpack-dev-server": "4.11.1",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-merge": "^5.8.0",
     "ws": "8.8.1"
@@ -154,6 +161,7 @@
     "@schemastore/package": "0.0.6",
     "@schemastore/tsconfig": "0.0.9",
     "@types/js-yaml": "^4.0.5",
+    "@types/loader-utils": "^2.0.3",
     "@types/validate-npm-package-name": "^4.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/packages/modular-scripts/react-dev-utils/errorOverlayMiddleware.js b/packages/modular-scripts/react-dev-utils/errorOverlayMiddleware.js