-
Notifications
You must be signed in to change notification settings - Fork 12.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ambient Module Declarations for Import Assertions #46135
Comments
Thanks for opening this @sodatea! I think the important point with import assertions is that for the standard assertions ( So for native module types it only makes sense to declare ambient modules by assertion, never by name. |
Just wanted to mention that this would also be a boon for stuff like imagetools which provide complex types currently via query params, but could potentially use assertions instead (and have much better syntax and types as a result!) |
Thoughts on this, following discussion in #56359 Import attributes are a great way to tell a bundler how to interpret/preprocess a file being imported. Eg "load this as plain text", "load this as an ImageBitmap", "bundle this file and give me a URL to it". The same file may be imported using different types: import anImage from './icon.png' with { type: 'rollup-ImageBitmap' };
import aURL from './icon.png' with { type: 'rollup-bundled-url' };
import aBase64URL from './icon.png' with { type: 'rollup-base64-url' }; This is much better than the current pattern bundlers/TypeScript uses, where anything ending Some types, such as In a case like: import aDictionary from './styles.css' with { type: 'rollup-css-module' };
import source from './styles.css' with { type: 'rollup-text' }; The build tool may wish to create a definition file specific for I don't mind how the use-cases are solved, but here are some loosely-held thoughts/ideas. I know there are two types of
Taking from #56359, I assume this syntax is for ambient definition files: declare module "*" with { type: "css" } {
declare const _default: CSSStyleSheet;
export default _default;
} Open question, would it be valid to use types in the above? For example: declare module "*" with { type: "css" | "scss" } {
declare const _default: CSSStyleSheet;
export default _default;
} And I assume this syntax is for use in sidecar definition files: declare with { type: "css" } {
export const header: string;
export const footer: string;
export const button: string;
} It feels like exports outside one of these blocks should only apply to imports without attributes. I know this is hand-wavy and incomplete, but the process of picking a definition for an import with attributes could be something like:
|
For non-ambient declarations I think we'll also need a way to specify that there's no support for an import with no type attribute, as is true for CSS and JSON. |
|
I'd just like to point out that "sidecar" vs. "ambient" |
Suggestion
π Search Terms
import assertions, ambient module
β Viability Checklist
My suggestion meets these guidelines:
β Suggestion
Following the suggestion at #40694 (comment)
Allow projects to declare ambient modules based on the import assertions. Such as:
π Motivating Example
Currently frontend build tools use file extensions and URL query strings to support all kinds of custom modules that are eventually compiled into JavaScript.
For example, in Vite (webpack supports these features in a similar way), we support JS modules importing
.module.css
files as CSS modules, and adding?url
postfixes to the imported path means we are to import the asset's real URL after bundling.That is:
But:
One thing that blocks us from doing so is the ability to declare ambient modules based on import assertions in TypeScript.
We can easily have type definitions for files based on their file extensions and query strings. In vite we have: https://github.com/vitejs/vite/blob/b690810f555549e9eed4b03600b27fe7649d6b07/packages/vite/client.d.ts
But currently, I don't see a way to migrate these type definitions when we move to import assertions.
π» Use Cases
declare module '*' assert {type: 'json'}
anddeclare module '*' assert {type: 'css'}
in the DOM lib.The text was updated successfully, but these errors were encountered: