Skip to content

Add type: "text" import attribute #43505

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.

Sign up for GitHub

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

Open
eemeli wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add type: "text" import attribute #43505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d222dd
Add type: "text" import attribute
eemeli Mar 20, 2026
6ec7e08
Apply suggestion from @Josh-Cena
eemeli Mar 23, 2026
3aa1b91
Apply suggestion from @Josh-Cena
eemeli Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion files/en-us/web/api/request/destination/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ browser-compat: api.Request.destination

The **`destination`** read-only property of the **{{domxref("Request")}}** interface returns a string describing the type of content being requested.

The string must be one of the `audio`, `audioworklet`, `document`, `embed`, `fencedframe`, `font`, `frame`, `iframe`, `image`, `json`, `manifest`, `object`, `paintworklet`, `report`, `script`, `sharedworker`, `speculationrules`, `style`, `track`, `video`, `worker` or `xslt` strings, or the empty string, which is the default value.
The string must be one of the `audio`, `audioworklet`, `document`, `embed`, `fencedframe`, `font`, `frame`, `iframe`, `image`, `json`, `manifest`, `object`, `paintworklet`, `report`, `script`, `sharedworker`, `speculationrules`, `style`, `text`, `track`, `video`, `worker` or `xslt` strings, or the empty string, which is the default value.

The `destination` is used by the {{Glossary("user agent")}} to, for example, help determine which set of rules to follow for CORS purposes, or how to navigate any complicated code paths that affect how specific types of request get handled.

Expand Down Expand Up @@ -68,6 +68,8 @@ Possible values are:
- : The target is a [speculation rules](/en-US/docs/Web/API/Speculation_Rules_API) JSON document.
- `"style"`
- : The target is a style
- `"text"`
- : The target is a text file.
- `"track"`
- : The target is an HTML {{HTMLElement("track")}}.
- `"video"`
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/rel/modulepreload/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ If `crossorigin` is set to [`anonymous`](/en-US/docs/Web/HTML/Reference/Attribut
If `crossorigin` is set to [`use-credentials`](/en-US/docs/Web/HTML/Reference/Attributes/crossorigin#use-credentials) then the credentials mode is [`include`](/en-US/docs/Web/API/Request/credentials#include), and user credentials for both single- and cross-origin requests.

The [`as`](/en-US/docs/Web/HTML/Reference/Elements/link#as) attribute is optional for links with `rel="modulepreload"`, and defaults to `"script"`.
It can be set to `"script"`, `"style"`, `"json"`, or any script-like destination, such as `"audioworklet"`, `"paintworklet"`, `"serviceworker"`, `"sharedworker"`, or `"worker"`.
It can be set to `"script"`, `"style"`, `"json"`, `"text"`, or any script-like destination, such as `"audioworklet"`, `"paintworklet"`, `"serviceworker"`, `"sharedworker"`, or `"worker"`.
An [`Event`](/en-US/docs/Web/API/Event/Event) named "error" is fired on the element if any other destination is used.

A browser _may_ additionally also choose to automatically fetch any dependencies of the module resource.
Expand Down
20 changes: 16 additions & 4 deletions files/en-us/web/javascript/reference/statements/import/with/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,17 @@ For example, the code above can be written to specify that the expected type is
import data from "https://example.com/data.json" with { type: "json" };
```

The `type` attribute allows you to specify that modules are served as JSON or CSS (and implicitly as JavaScript).
The `type` attribute allows you to specify that modules are served as JSON, CSS, or plain text (and implicitly as JavaScript).

Other attributes may also be supported, and [can affect the behavior of different parts of the loading process](#intended_semantics_for_import_attributes).
A syntax error is thrown if an unknown attribute is used.

### Standard attributes

The available attributes depend on the language and runtime environment.
The ECMAScript standard [defines the `type` attribute with the value of `"json"`](https://tc39.es/ecma262/multipage/ecmascript-language-scripts-and-modules.html#sec-HostLoadImportedModule).
The ECMAScript standard [defines the `type` attribute with the values `"json"` and `"text"`](https://tc39.es/ecma262/multipage/ecmascript-language-scripts-and-modules.html#sec-HostLoadImportedModule).

The HTML specification also [defines the `type` attribute with values `"json"` and `"css"`](https://html.spec.whatwg.org/multipage/webappapis.html#module-type-allowed) — these are the attributes that are supported in browser environments.
The HTML specification also [defines the `type` attribute with values `"json"`, `"text"` and `"css"`](https://html.spec.whatwg.org/multipage/webappapis.html#module-type-allowed) — these are the attributes that are supported in browser environments.

#### JSON Modules (`{ type: "json" }`)

Expand Down Expand Up @@ -127,6 +127,17 @@ document.adoptedStyleSheets.push(exampleStyles);

Note that importing CSS modules into workers is usually not supported, because the CSSOM specification only exposes `CSSStyleSheet` in the window context.

#### Text Modules (`{ type: "text" }`)

The `text` type allows importing a module's source as a string value.
You can load text from a file into the `text` string using the following code:

```js
import text from "https://example.com/file.txt" with { type: "text" };
```

The file will be requested with an `{{HTTPHeader("Accept")}}: text/plain` header, but the value of the response's `{{HTTPHeader("Content-Type")}}` header is ignored, and all files are parsed as UTF-8. It can contain any textual data, even JavaScript code (which is treated as plain text).

### Intended semantics for import attributes

An attribute can change the runtime's behavior at every stage of the module loading process:
Expand All @@ -139,7 +150,7 @@ An attribute can change the runtime's behavior at every stage of the module load
};
```

- Fetching: for example, CSS modules are fetched with the [`destination`](/en-US/docs/Web/API/Request/destination) set to `"style"`, and JSON modules are fetched with `destination: "json"`. This means given the same destination URL, the server may still return different content.
- Fetching: for example, CSS modules are fetched with the [`destination`](/en-US/docs/Web/API/Request/destination) set to `"style"`, JSON modules are fetched with `destination: "json"`, and text modules are fetched with `destination: "text"`. This means given the same destination URL, the server may still return different content.
- Parsing and evaluation: the runtime may use the attribute to determine how to parse and evaluate the module.

## Examples
Expand Down Expand Up @@ -205,3 +216,4 @@ Note that, like static imports, dynamic imports are cached for the lifetime of t
- [`import()`](/en-US/docs/Web/JavaScript/Reference/Operators/import)
- [Import attributes proposal](https://github.com/tc39/proposal-import-attributes)
- [JSON modules proposal](https://github.com/tc39/proposal-json-modules)
- [Import Text proposal](https://github.com/tc39/proposal-import-text)
Loading