Merge pull request #3204 from microsoft/octogonz/heft-web-rig-revamp

[heft-web-rig] Add an "app" profile, upgrade to Webpack 5, implement new CSS rules

README.md

@@ -91,6 +91,8 @@ These GitHub repositories provide supplementary resources for Rush Stack:
 | [/build-tests-samples/heft-node-rig-tutorial](./build-tests-samples/heft-node-rig-tutorial/) | (Copy of sample project) Building this project is a regression test for Heft |
 | [/build-tests-samples/heft-storybook-react-tutorial](./build-tests-samples/heft-storybook-react-tutorial/) | (Copy of sample project) Building this project is a regression test for Heft |
 | [/build-tests-samples/heft-storybook-react-tutorial-storykit](./build-tests-samples/heft-storybook-react-tutorial-storykit/) | Storybook build dependencies for heft-storybook-react-tutorial |
+| [/build-tests-samples/heft-web-rig-app-tutorial](./build-tests-samples/heft-web-rig-app-tutorial/) | (Copy of sample project) Building this project is a regression test for Heft |
+| [/build-tests-samples/heft-web-rig-library-tutorial](./build-tests-samples/heft-web-rig-library-tutorial/) | (Copy of sample project) Building this project is a regression test for Heft |
 | [/build-tests-samples/heft-webpack-basic-tutorial](./build-tests-samples/heft-webpack-basic-tutorial/) | (Copy of sample project) Building this project is a regression test for Heft |
 | [/build-tests-samples/packlets-tutorial](./build-tests-samples/packlets-tutorial/) | (Copy of sample project) Building this project is a regression test for @rushstack/eslint-plugin-packlets |
 | [/build-tests/api-documenter-test](./build-tests/api-documenter-test/) | Building this project is a regression test for api-documenter |

apps/heft/src/schemas/README-ModifyingSchemas.md

@@ -1,4 +1,4 @@
 ## Important
 
-If you change the Heft schemas, be sure to update the example files under **src/templates**.
+If you change the Heft schemas, be sure to update the example files under **schemas/templates**.
 The templates are used as a reference when updating the website documentation.

build-tests-samples/heft-storybook-react-tutorial-storykit/package.json

@@ -11,25 +11,26 @@
     "_phase:build": ""
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@storybook/addon-actions": "~6.3.6",
-    "@storybook/addon-essentials": "~6.3.6",
-    "@storybook/addon-links": "~6.3.6",
-    "@storybook/cli": "~6.3.6",
-    "@storybook/components": "~6.3.0",
-    "@storybook/core-events": "~6.3.0",
-    "@storybook/react": "~6.3.6",
-    "@storybook/theming": "~6.3.0",
+    "@babel/core": "~7.17.0",
+    "@storybook/addon-actions": "~6.4.18",
+    "@storybook/addon-essentials": "~6.4.18",
+    "@storybook/addon-links": "~6.4.18",
+    "@storybook/cli": "~6.4.18",
+    "@storybook/components": "~6.4.18",
+    "@storybook/core-events": "~6.4.18",
+    "@storybook/react": "~6.4.18",
+    "@storybook/theming": "~6.4.18",
     "@types/heft-jest": "1.0.1",
-    "@types/react-dom": "16.9.8",
-    "@types/react": "16.9.45",
+    "@types/react-dom": "16.9.14",
+    "@types/react": "16.14.23",
     "@types/webpack-env": "1.13.0",
-    "babel-loader": "^8.2.2",
-    "css-loader": "~4.2.1",
+    "babel-loader": "~8.2.3",
+    "css-loader": "~5.2.7",
     "jest": "~27.4.2",
     "react-dom": "~16.13.1",
     "react": "~16.13.1",
-    "style-loader": "~1.2.1",
+    "style-loader": "~2.0.0",
+    "terser-webpack-plugin": "~3.0.8",
     "typescript": "~4.5.2",
     "webpack": "~4.44.2"
   }

build-tests-samples/heft-storybook-react-tutorial/config/heft.json

@@ -40,7 +40,7 @@
       /**
        * The path to the plugin package.
        */
-      "plugin": "@rushstack/heft-webpack5-plugin"
+      "plugin": "@rushstack/heft-webpack4-plugin"
 
       /**
        * An optional object that provides additional settings that may be defined by the plugin.

build-tests-samples/heft-storybook-react-tutorial/package.json

@@ -6,27 +6,28 @@
   "scripts": {
     "build": "heft build --clean",
     "start": "heft start",
+    "storybook": "heft start --storybook",
     "_phase:build": "heft build --clean",
     "_phase:test": "heft test --no-build"
   },
   "devDependencies": {
     "@rushstack/eslint-config": "workspace:*",
     "@rushstack/heft-jest-plugin": "workspace:*",
     "@rushstack/heft-storybook-plugin": "workspace:*",
-    "@rushstack/heft-webpack5-plugin": "workspace:*",
+    "@rushstack/heft-webpack4-plugin": "workspace:*",
     "@rushstack/heft": "workspace:*",
     "@types/heft-jest": "1.0.1",
-    "@types/react-dom": "16.9.8",
-    "@types/react": "16.9.45",
+    "@types/react-dom": "16.9.14",
+    "@types/react": "16.14.23",
     "@types/webpack-env": "1.13.0",
-    "css-loader": "~4.2.1",
+    "css-loader": "~5.2.7",
     "eslint": "~8.7.0",
     "heft-storybook-react-tutorial-storykit": "workspace:*",
-    "html-webpack-plugin": "~5.5.0",
+    "html-webpack-plugin": "~4.5.2",
     "react-dom": "~16.13.1",
     "react": "~16.13.1",
-    "source-map-loader": "~1.1.2",
-    "style-loader": "~1.2.1",
+    "source-map-loader": "~1.1.3",
+    "style-loader": "~2.0.0",
     "typescript": "~4.5.2",
     "webpack": "~4.44.2"
   }

build-tests-samples/heft-web-rig-app-tutorial/.eslintrc.js

@@ -0,0 +1,7 @@
+// This is a workaround for https://github.com/eslint/eslint/issues/3458
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+
+module.exports = {
+  extends: ['@rushstack/eslint-config/profile/web-app', '@rushstack/eslint-config/mixins/react'],
+  parserOptions: { tsconfigRootDir: __dirname }
+};

build-tests-samples/heft-web-rig-app-tutorial/README.md

@@ -0,0 +1,8 @@
+# heft-web-rig-app-tutorial
+
+This is a copy of the
+[heft-web-rig-app-tutorial](https://github.com/microsoft/rushstack-samples/tree/main/heft/heft-web-rig-app-tutorial)
+tutorial project from the [rushstack-samples](https://github.com/microsoft/rushstack-samples) repo.
+
+The copy here serves as a regression test, by using `"workspace:*"` references to the local projects in this repo.
+Please update the copy from time to time to keep it in sync with the official tutorial.

build-tests-samples/heft-web-rig-app-tutorial/assets/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Example Application</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

build-tests-samples/heft-web-rig-app-tutorial/config/jest.config.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@rushstack/heft-web-rig/profiles/library/config/jest.config.json"
+}

build-tests-samples/heft-web-rig-app-tutorial/config/rig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+
+  "rigPackageName": "@rushstack/heft-web-rig",
+  "rigProfile": "library"
+}

build-tests-samples/heft-web-rig-app-tutorial/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "heft-web-rig-app-tutorial",
+  "description": "(Copy of sample project) Building this project is a regression test for Heft",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "heft test --clean",
+    "start": "heft start",
+    "_phase:build": "heft build --clean",
+    "_phase:test": "heft test --no-build"
+  },
+  "dependencies": {
+    "heft-web-rig-library-tutorial": "workspace:*",
+    "react": "~16.13.1",
+    "react-dom": "~16.13.1",
+    "tslib": "~2.3.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-config": "workspace:*",
+    "@rushstack/heft-web-rig": "workspace:*",
+    "@rushstack/heft": "workspace:*",
+    "@types/heft-jest": "1.0.1",
+    "@types/react-dom": "16.9.14",
+    "@types/react": "16.14.23",
+    "@types/webpack-env": "1.13.0",
+    "typescript": "~4.5.2"
+  }
+}

build-tests-samples/heft-web-rig-app-tutorial/src/ExampleApp.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ToggleSwitch, IToggleEventArgs } from 'heft-web-rig-library-tutorial';
+
+/**
+ * This React component renders the application page.
+ */
+export class ExampleApp extends React.Component {
+  public render(): React.ReactNode {
+    const appStyle: React.CSSProperties = {
+      backgroundColor: '#ffffff',
+      padding: '20px',
+      margin: '20px',
+      borderRadius: '5px',
+      width: '400px'
+    };
+
+    return (
+      <div style={appStyle}>
+        <h2>Hello, world!</h2>
+        <p>Here is an example control:</p>
+        <ToggleSwitch leftColor={'#800000'} rightColor={'#008000'} onToggle={this._onToggle} />
+
+        <p>Here is an example image:</p>
+        <img src={require('./example-image.png')} />
+      </div>
+    );
+  }
+
+  // React event handlers should be represented as fields instead of methods to ensure the "this" pointer
+  // is bound correctly.  This form does not work with virtual/override inheritance, so use regular methods
+  // everywhere else.
+  private _onToggle = (sender: ToggleSwitch, args: IToggleEventArgs): void => {
+    console.log('Toggle switch changed: ' + args.sliderPosition);
+  };
+}

build-tests-samples/heft-web-rig-app-tutorial/src/start.css

@@ -0,0 +1,11 @@
+/**
+ * This file gets copied to the "lib" folder because its extension is registered in copy-static-assets.json
+ * Then Webpack uses css-loader to embed it in the application bundle, and then style-loader applies to the DOM.
+ */
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background-color: #c0c0c0;
+  font-family: Tahoma, sans-serif;
+}

build-tests-samples/heft-web-rig-app-tutorial/src/start.tsx

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { ExampleApp } from './ExampleApp';
+
+import './start.css';
+
+const rootDiv: HTMLElement = document.getElementById('root') as HTMLElement;
+ReactDOM.render(<ExampleApp />, rootDiv);

build-tests-samples/heft-web-rig-app-tutorial/src/test/ToggleSwitch.test.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
+// See LICENSE in the project root for license information.
+
+// Note that Jest tests import the CommonJS files (from lib-commonjs/*.js)
+// whereas Webpack will import the ESM files (from lib/*.js)
+import { ToggleSwitch } from 'heft-web-rig-library-tutorial';
+
+describe('ToggleSwitch', () => {
+  it('can be tested', () => {
+    expect(ToggleSwitch).toBeDefined();
+  });
+});

build-tests-samples/heft-web-rig-app-tutorial/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./node_modules/@rushstack/heft-web-rig/profiles/app/tsconfig-base.json",
+  "compilerOptions": {
+    "types": ["heft-jest", "webpack-env"]
+  }
+}

build-tests-samples/heft-web-rig-app-tutorial/webpack.config.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const createWebpackConfig = require('@rushstack/heft-web-rig/profiles/app/webpack-base.config');
+
+module.exports = function createConfig(env, argv) {
+  return createWebpackConfig({
+    env: env,
+    argv: argv,
+    projectRoot: __dirname,
+    // Documentation: https://webpack.js.org/configuration/
+    configOverride: {
+      resolve: {
+        alias: {
+          // Use the bundled library
+          'heft-web-rig-library-tutorial':
+            'heft-web-rig-library-tutorial/dist/heft-web-rig-library-tutorial.js'
+        }
+      },
+      performance: {
+        hints: env.production ? 'error' : false
+        // This specifies the bundle size limit that will trigger Webpack's warning saying:
+        // "The following entrypoint(s) combined asset size exceeds the recommended limit."
+        // maxEntrypointSize: 500000,
+        // maxAssetSize: 500000
+      }
+    }
+  });
+};

build-tests-samples/heft-web-rig-library-tutorial/.eslintrc.js

@@ -0,0 +1,7 @@
+// This is a workaround for https://github.com/eslint/eslint/issues/3458
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+
+module.exports = {
+  extends: ['@rushstack/eslint-config/profile/web-app', '@rushstack/eslint-config/mixins/react'],
+  parserOptions: { tsconfigRootDir: __dirname }
+};

build-tests-samples/heft-web-rig-library-tutorial/README.md

@@ -0,0 +1,8 @@
+# heft-web-rig-library-tutorial
+
+This is a copy of the
+[heft-web-rig-library-tutorial](https://github.com/microsoft/rushstack-samples/tree/main/heft/heft-web-rig-library-tutorial)
+tutorial project from the [rushstack-samples](https://github.com/microsoft/rushstack-samples) repo.
+
+The copy here serves as a regression test, by using `"workspace:*"` references to the local projects in this repo.
+Please update the copy from time to time to keep it in sync with the official tutorial.