Introduce a Heft plugin for generating types for static assets. (#5666)

* Introduce the heft-image-typings-generator-plugin.

* Use the new plugin in build-tests projects.

* Add the typigns generator to the web rig.

* Rewrite the plugin to handle general static assets.

* fixup! Rewrite the plugin to handle general static assets.

* fixup! Rewrite the plugin to handle general static assets.

* Remove usage of the plugin in the heft-typescript-composite-test project.

* fixup! Use the new plugin in build-tests projects.

* fixup! Rewrite the plugin to handle general static assets.

* Add unit test.

* Rationalzie the plugin options.

* fixup! Use the new plugin in build-tests projects.

* fixup! Rationalzie the plugin options.

* PR feedback.

* fixup! Rationalzie the plugin options.

* fixup! PR feedback.

* Refactor binary and text to resource and source.

Author: iclanton

README.md

@@ -76,6 +76,7 @@ These GitHub repositories provide supplementary resources for Rush Stack:
 | [/heft-plugins/heft-sass-load-themed-styles-plugin](./heft-plugins/heft-sass-load-themed-styles-plugin/) | [![npm version](https://badge.fury.io/js/%40rushstack%2Fheft-sass-load-themed-styles-plugin.svg)](https://badge.fury.io/js/%40rushstack%2Fheft-sass-load-themed-styles-plugin) | [changelog](./heft-plugins/heft-sass-load-themed-styles-plugin/CHANGELOG.md) | [@rushstack/heft-sass-load-themed-styles-plugin](https://www.npmjs.com/package/@rushstack/heft-sass-load-themed-styles-plugin) |
 | [/heft-plugins/heft-sass-plugin](./heft-plugins/heft-sass-plugin/) | [![npm version](https://badge.fury.io/js/%40rushstack%2Fheft-sass-plugin.svg)](https://badge.fury.io/js/%40rushstack%2Fheft-sass-plugin) | [changelog](./heft-plugins/heft-sass-plugin/CHANGELOG.md) | [@rushstack/heft-sass-plugin](https://www.npmjs.com/package/@rushstack/heft-sass-plugin) |
 | [/heft-plugins/heft-serverless-stack-plugin](./heft-plugins/heft-serverless-stack-plugin/) | [![npm version](https://badge.fury.io/js/%40rushstack%2Fheft-serverless-stack-plugin.svg)](https://badge.fury.io/js/%40rushstack%2Fheft-serverless-stack-plugin) | [changelog](./heft-plugins/heft-serverless-stack-plugin/CHANGELOG.md) | [@rushstack/heft-serverless-stack-plugin](https://www.npmjs.com/package/@rushstack/heft-serverless-stack-plugin) |
+| [/heft-plugins/heft-static-asset-typings-plugin](./heft-plugins/heft-static-asset-typings-plugin/) | [![npm version](https://badge.fury.io/js/%40rushstack%2Fheft-static-asset-typings-plugin.svg)](https://badge.fury.io/js/%40rushstack%2Fheft-static-asset-typings-plugin) | [changelog](./heft-plugins/heft-static-asset-typings-plugin/CHANGELOG.md) | [@rushstack/heft-static-asset-typings-plugin](https://www.npmjs.com/package/@rushstack/heft-static-asset-typings-plugin) |
 | [/heft-plugins/heft-storybook-plugin](./heft-plugins/heft-storybook-plugin/) | [![npm version](https://badge.fury.io/js/%40rushstack%2Fheft-storybook-plugin.svg)](https://badge.fury.io/js/%40rushstack%2Fheft-storybook-plugin) | [changelog](./heft-plugins/heft-storybook-plugin/CHANGELOG.md) | [@rushstack/heft-storybook-plugin](https://www.npmjs.com/package/@rushstack/heft-storybook-plugin) |
 | [/heft-plugins/heft-typescript-plugin](./heft-plugins/heft-typescript-plugin/) | [![npm version](https://badge.fury.io/js/%40rushstack%2Fheft-typescript-plugin.svg)](https://badge.fury.io/js/%40rushstack%2Fheft-typescript-plugin) | [changelog](./heft-plugins/heft-typescript-plugin/CHANGELOG.md) | [@rushstack/heft-typescript-plugin](https://www.npmjs.com/package/@rushstack/heft-typescript-plugin) |
 | [/heft-plugins/heft-vscode-extension-plugin](./heft-plugins/heft-vscode-extension-plugin/) | [![npm version](https://badge.fury.io/js/%40rushstack%2Fheft-vscode-extension-plugin.svg)](https://badge.fury.io/js/%40rushstack%2Fheft-vscode-extension-plugin) | [changelog](./heft-plugins/heft-vscode-extension-plugin/CHANGELOG.md) | [@rushstack/heft-vscode-extension-plugin](https://www.npmjs.com/package/@rushstack/heft-vscode-extension-plugin) |

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

@@ -4,6 +4,8 @@
 import * as React from 'react';
 import { ToggleSwitch, type IToggleEventArgs } from 'heft-web-rig-library-tutorial';
 
+import exampleImage from './example-image.png';
+
 /**
  * This React component renders the application page.
  */
@@ -24,10 +26,7 @@ export class ExampleApp extends React.Component {
         <ToggleSwitch leftColor={'#800000'} rightColor={'#008000'} onToggle={this._onToggle} />
 
         <p>Here is an example image:</p>
-        <img
-          // eslint-disable-next-line @typescript-eslint/no-require-imports
-          src={require('./example-image.png')}
-        />
+        <img src={exampleImage} />
       </div>
     );
   }

build-tests/heft-node-everything-esm-module-test/config/heft.json

@@ -9,7 +9,18 @@
       "cleanFiles": [{ "includeGlobs": ["dist", "lib-commonjs", "lib", "lib-esm", "lib-esnext", "lib-umd"] }],
 
       "tasksByName": {
+        "text-typings": {
+          "taskPlugin": {
+            "pluginPackage": "@rushstack/heft-static-asset-typings-plugin",
+            "pluginName": "source-assets-plugin",
+            "options": {
+              "configType": "file",
+              "configFileName": "source-assets.json"
+            }
+          }
+        },
         "typescript": {
+          "taskDependencies": ["text-typings"],
           "taskPlugin": {
             "pluginPackage": "@rushstack/heft-typescript-plugin"
           }

build-tests/heft-node-everything-esm-module-test/config/source-assets.json

@@ -0,0 +1,6 @@
+{
+  "fileExtensions": [".html"],
+  "cjsOutputFolders": ["lib-commonjs"],
+  "esmOutputFolders": ["lib-esm"],
+  "generatedTsFolders": ["temp/text-typings"]
+}

build-tests/heft-node-everything-esm-module-test/etc/heft-node-everything-esm-module-test.api.md

@@ -4,6 +4,9 @@
 
 ```ts
 
+// @public
+export const templateContent: string;
+
 // @public (undocumented)
 export class TestClass {
 }

build-tests/heft-node-everything-esm-module-test/package.json

@@ -17,6 +17,7 @@
     "@rushstack/heft-api-extractor-plugin": "workspace:*",
     "@rushstack/heft-jest-plugin": "workspace:*",
     "@rushstack/heft-lint-plugin": "workspace:*",
+    "@rushstack/heft-static-asset-typings-plugin": "workspace:*",
     "@rushstack/heft-typescript-plugin": "workspace:*",
     "@types/heft-jest": "1.0.1",
     "@types/node": "20.17.19",

build-tests/heft-node-everything-esm-module-test/src/exampleTemplate.html

@@ -0,0 +1 @@
+<p>This is an example template imported as a text asset.</p>

build-tests/heft-node-everything-esm-module-test/src/index.ts

@@ -1,6 +1,14 @@
 // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 // See LICENSE in the project root for license information.
 
+import exampleTemplate from './exampleTemplate.html';
+
+/**
+ * The content of exampleTemplate.html, imported as a text asset.
+ * @public
+ */
+export const templateContent: string = exampleTemplate;
+
 /**
  * @public
  */

build-tests/heft-node-everything-esm-module-test/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "lib-commonjs",
     "declarationDir": "lib-dts",
-    "rootDir": "src",
+    "rootDirs": ["src", "temp/text-typings"],
 
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",

build-tests/heft-node-everything-test/config/heft.json

@@ -16,7 +16,23 @@
       "cleanFiles": [{ "includeGlobs": ["dist", "lib-commonjs", "lib", "lib-esm", "lib-esnext", "lib-umd"] }],
 
       "tasksByName": {
+        "text-typings": {
+          "taskPlugin": {
+            "pluginPackage": "@rushstack/heft-static-asset-typings-plugin",
+            "pluginName": "source-assets-plugin",
+            "options": {
+              "configType": "inline",
+              "config": {
+                "fileExtensions": [".html"],
+                "cjsOutputFolders": ["lib-commonjs"],
+                "esmOutputFolders": ["lib-esm"],
+                "generatedTsFolders": ["temp/text-typings"]
+              }
+            }
+          }
+        },
         "typescript": {
+          "taskDependencies": ["text-typings"],
           "taskPlugin": {
             "pluginPackage": "@rushstack/heft-typescript-plugin"
           }