Skip to content

Comments

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

Merged
iclanton merged 17 commits intomicrosoft:mainfrom
iclanton:heft-image-typings-generator-plugin
Feb 24, 2026
Merged

Introduce a Heft plugin for generating types for static assets.#5666
iclanton merged 17 commits intomicrosoft:mainfrom
iclanton:heft-image-typings-generator-plugin

Conversation

@iclanton
Copy link
Member

Summary

Introduces @rushstack/heft-static-asset-typings-plugin, a Heft plugin that generates TypeScript .d.ts typings for static asset files. The plugin provides two task plugins:

  • binary-assets-plugin — Generates .d.ts typings for binary files (images, fonts, etc.), enabling type-safe import statements without require() or allowArbitraryExtensions.
  • text-assets-plugin — Generates .d.ts typings and JavaScript module output for text-based files (.html, .txt, etc.), making text content directly importable as ES modules.

Both plugins support incremental and watch-mode builds.

Details

The plugin uses @rushstack/typings-generator to produce .d.ts declarations of the form declare const content: string; export default content; for each matched asset file. Matching is configured by file extension.

Binary assets plugin supports two configuration modes:

  • Inline mode — file extensions and output folder specified directly in heft.json options
  • File mode — references a riggable JSON config file in config/

Text assets plugin additionally emits CommonJS and/or ESM .js modules alongside the typings, with SHA1-based content hashing for incremental rebuilds.

The plugin is integrated into:

  • heft-web-rig (both app and library profiles) for image file typings
  • heft-webpack5-everything-test, heft-webpack4-everything-test, heft-rspack-everything-test — binary-assets-plugin with .png files
  • heft-node-everything-test — text-assets-plugin with .html files

The heft-typescript-composite-test project is excluded because TypeScript's rootDirs (needed for generated typings resolution) is incompatible with composite project references.

The heft-webpack4-everything-test tsconfig was updated to enable esModuleInterop so that import image from './image.png' compiles correctly with the Jest string-mock transform.

How it was tested

  • Built the plugin with rush build --to @rushstack/heft-static-asset-typings-plugin
  • Built all consuming test projects: rush build --to heft-webpack5-everything-test --to heft-webpack4-everything-test --to heft-rspack-everything-test --to heft-node-everything-test
  • Ran Jest tests for heft-webpack4-everything-test, heft-webpack5-everything-test, and heft-node-everything-test — all pass
  • Verified generated outputs: .d.ts typings in temp/image-typings/, CJS modules in lib-commonjs/, ESM modules in lib-esm/

Copy link
Contributor

@dmichon-msft dmichon-msft left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works, but some improvements to be had.

@iclanton iclanton enabled auto-merge (squash) February 24, 2026 01:22
@iclanton iclanton disabled auto-merge February 24, 2026 01:23
@iclanton iclanton enabled auto-merge (squash) February 24, 2026 01:24
@iclanton iclanton merged commit c9cb0d2 into microsoft:main Feb 24, 2026
6 checks passed
@github-project-automation github-project-automation bot moved this from Needs triage to Closed in Bug Triage Feb 24, 2026
@iclanton iclanton deleted the heft-image-typings-generator-plugin branch February 24, 2026 01:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Closed

Development

Successfully merging this pull request may close these issues.

2 participants