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

rigs/heft-node-rig/profiles/default/config/heft.json

@@ -4,31 +4,132 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/heft/heft.schema.json",
 
+  /**
+   * Optionally specifies another JSON config file that this file extends from. This provides a way for standard
+   * settings to be shared across multiple projects.
+   */
+  // "extends": "base-project/config/heft.json",
+
   "eventActions": [
+    // {
+    //   /**
+    //    * (Required) The kind of built-in operation that should be performed.
+    //    * The "deleteGlobs" action deletes files or folders that match the specified glob patterns.
+    //    */
+    //   "actionKind": "deleteGlobs",
+    //
+    //   /**
+    //    * (Required) The Heft stage when this action should be performed.  Note that heft.json event actions
+    //    * are scheduled after any plugin tasks have processed the event.  For example, a "compile" event action
+    //    * will be performed after the TypeScript compiler has been invoked.
+    //    *
+    //    * Options: "clean", "pre-compile", "compile", "bundle", "post-build"
+    //    */
+    //   "heftEvent": "clean",
+    //
+    //   /**
+    //    * (Required) A user-defined tag whose purpose is to allow configs to replace/delete handlers that
+    //    * were added by other configs.
+    //    */
+    //   "actionId": "my-example-action",
+    //
+    //   /**
+    //    * (Required) Glob patterns to be deleted. The paths are resolved relative to the project folder.
+    //    * Documentation for supported glob syntaxes: https://www.npmjs.com/package/fast-glob
+    //    */
+    //   "globsToDelete": [
+    //     "dist",
+    //     "lib",
+    //     "lib-esnext",
+    //     "temp"
+    //   ]
+    // },
+    //
+    // {
+    //   /**
+    //    * (Required) The kind of built-in operation that should be performed.
+    //    * The "copyFiles" action copies files that match the specified patterns.
+    //    */
+    //   "actionKind": "copyFiles",
+    //
+    //   /**
+    //    * (Required) The Heft stage when this action should be performed.  Note that heft.json event actions
+    //    * are scheduled after any plugin tasks have processed the event.  For example, a "compile" event action
+    //    * will be performed after the TypeScript compiler has been invoked.
+    //    *
+    //    * Options: "pre-compile", "compile", "bundle", "post-build"
+    //    */
+    //   "heftEvent": "pre-compile",
+    //
+    //   /**
+    //    * (Required) A user-defined tag whose purpose is to allow configs to replace/delete handlers that
+    //    * were added by other configs.
+    //    */
+    //   "actionId": "my-example-action",
+    //
+    //   /**
+    //    * (Required) An array of copy operations to run perform during the specified Heft event.
+    //    */
+    //   "copyOperations": [
+    //     {
+    //       /**
+    //        * (Required) The base folder that files will be copied from, relative to the project root.
+    //        * Settings such as "includeGlobs" and "excludeGlobs" will be resolved relative
+    //        * to this folder.
+    //        * NOTE: Assigning "sourceFolder" does not by itself select any files to be copied.
+    //        */
+    //       "sourceFolder": "src",
+    //
+    //       /**
+    //        * (Required) One or more folders that files will be copied into, relative to the project root.
+    //        * If you specify more than one destination folder, Heft will read the input files only once, using
+    //        * streams to efficiently write multiple outputs.
+    //        */
+    //       "destinationFolders": ["dist/assets"],
+    //
+    //       /**
+    //        * If specified, this option recursively scans all folders under "sourceFolder" and includes any files
+    //        * that match the specified extensions.  (If "fileExtensions" and "includeGlobs" are both
+    //        * specified, their selections are added together.)
+    //        */
+    //       "fileExtensions": [".jpg", ".png"],
+    //
+    //       /**
+    //        * A list of glob patterns that select files to be copied.  The paths are resolved relative
+    //        * to "sourceFolder".
+    //        * Documentation for supported glob syntaxes: https://www.npmjs.com/package/fast-glob
+    //        */
+    //       "includeGlobs": ["assets/*.md"],
+    //
+    //       /**
+    //        * A list of glob patterns that exclude files/folders from being copied.  The paths are resolved relative
+    //        * to "sourceFolder".  These exclusions eliminate items that were selected by the "includeGlobs"
+    //        * or "fileExtensions" setting.
+    //        */
+    //       "excludeGlobs": [],
+    //
+    //       /**
+    //        * Normally, when files are selected under a child folder, a corresponding folder will be created in
+    //        * the destination folder.  Specify flatten=true to discard the source path and copy all matching files
+    //        * to the same folder.  If two files have the same name an error will be reported.
+    //        * The default value is false.
+    //        */
+    //       "flatten": false,
+    //
+    //       /**
+    //        * If true, filesystem hard links will be created instead of copying the file.  Depending on the
+    //        * operating system, this may be faster. (But note that it may cause unexpected behavior if a tool
+    //        * modifies the link.)  The default value is false.
+    //        */
+    //       "hardlink": false
+    //     }
+    //   ]
+    // }
+
     {
-      /**
-       * The kind of built-in operation that should be performed.
-       * The "deleteGlobs" action deletes files or folders that match the
-       * specified glob patterns.
-       */
       "actionKind": "deleteGlobs",
-
-      /**
-       * The stage of the Heft run during which this action should occur. Note that actions specified in heft.json
-       * occur at the end of the stage of the Heft run.
-       */
       "heftEvent": "clean",
-
-      /**
-       * A user-defined tag whose purpose is to allow configs to replace/delete handlers that were added by other
-       * configs.
-       */
       "actionId": "defaultClean",
-
-      /**
-       * Glob patterns to be deleted. The paths are resolved relative to the project folder.
-       * Recommend exactly matching with "projectOutputFolderNames" in rush-project.json.
-       */
       "globsToDelete": ["dist", "lib", "temp"]
     }
   ],
@@ -37,16 +138,18 @@
    * The list of Heft plugins to be loaded.
    */
   "heftPlugins": [
-    {
-      /**
-       * The path to the plugin package.
-       */
-      "plugin": "@rushstack/heft-jest-plugin"
+    // {
+    //  /**
+    //   * The path to the plugin package.
+    //   */
+    //  "plugin": "path/to/my-plugin",
+    //
+    //  /**
+    //   * An optional object that provides additional settings that may be defined by the plugin.
+    //   */
+    //  // "options": { }
+    // }
 
-      /**
-       * An optional object that provides additional settings that may be defined by the plugin.
-       */
-      // "options": { }
-    }
+    { "plugin": "@rushstack/heft-jest-plugin" }
   ]
 }

rigs/heft-node-rig/profiles/default/config/typescript.json

@@ -4,6 +4,12 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/heft/typescript.schema.json",
 
+  /**
+   * Optionally specifies another JSON config file that this file extends from. This provides a way for standard
+   * settings to be shared across multiple projects.
+   */
+  // "extends": "base-project/config/typescript.json",
+
   /**
    * If provided, emit these module kinds in addition to the modules specified in the tsconfig.
    * Note that this option only applies to the main tsconfig.json configuration.
@@ -22,6 +28,16 @@
     // }
   ],
 
+  /**
+   * If true, emit CommonJS module output to the folder specified in the tsconfig "outDir" compiler option with the .cjs extension alongside (or instead of, if TSConfig specifies CommonJS) the default compilation output.
+   */
+  // "emitCjsExtensionForCommonJS": true,
+
+  /**
+   * If true, emit ESNext module output to the folder specified in the tsconfig "outDir" compiler option with the .mjs extension alongside (or instead of, if TSConfig specifies ESNext) the default compilation output.
+   */
+  // "emitMjsExtensionForESModule": true,
+
   /**
    * Specifies the intermediary folder that tests will use.  Because Jest uses the
    * Node.js runtime to execute tests, the module format must be CommonJS.
@@ -42,7 +58,8 @@
   // "maxWriteParallelism": 50,
 
   /**
-   * Describes the way files should be statically coped from src to TS output folders
+   * Configures additional file types that should be copied into the TypeScript compiler's emit folders, for example
+   * so that these files can be resolved by import statements.
    */
   "staticAssetsToCopy": {
     /**

rigs/heft-node-rig/profiles/default/tsconfig-base.json

@@ -13,6 +13,7 @@
     "inlineSources": true,
     "experimentalDecorators": true,
     "strict": true,
+    "useUnknownInCatchVariables": false,
     "esModuleInterop": true,
     "noEmitOnError": false,
     "allowUnreachableCode": false,

rigs/heft-web-rig/package.json

@@ -19,10 +19,26 @@
     "@microsoft/api-extractor": "workspace:*",
     "@rushstack/heft-jest-plugin": "workspace:*",
     "@rushstack/heft-sass-plugin": "workspace:*",
-    "@rushstack/heft-webpack4-plugin": "workspace:*",
+    "@rushstack/heft-webpack5-plugin": "workspace:*",
+    "@rushstack/node-core-library": "workspace:*",
     "eslint": "~8.7.0",
     "jest-environment-jsdom": "~27.4.2",
-    "typescript": "~4.5.2"
+    "typescript": "~4.5.5",
+    "autoprefixer": "~10.4.2",
+    "css-loader": "~6.6.0",
+    "css-minimizer-webpack-plugin": "~3.4.1",
+    "html-webpack-plugin": "~5.5.0",
+    "mini-css-extract-plugin": "~2.5.3",
+    "postcss-loader": "~6.2.1",
+    "postcss": "~8.4.6",
+    "sass-loader": "~12.4.0",
+    "sass": "~1.49.7",
+    "source-map-loader": "~3.0.1",
+    "style-loader": "~3.3.1",
+    "terser-webpack-plugin": "~5.3.1",
+    "url-loader": "~4.1.1",
+    "webpack-bundle-analyzer": "~4.5.0",
+    "webpack-merge": "~5.8.0"
   },
   "devDependencies": {
     "@rushstack/heft": "workspace:*"