From efaf1b31b0d5b3569670c4d611c84a8f4d97e12c Mon Sep 17 00:00:00 2001 From: Eemeli Aro Date: Fri, 20 Mar 2026 11:40:47 +0200 Subject: [PATCH 1/3] Add type: "text" import attribute --- .../web/api/request/destination/index.md | 4 +++- .../attributes/rel/modulepreload/index.md | 2 +- .../reference/statements/import/with/index.md | 22 +++++++++++++++---- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/request/destination/index.md b/files/en-us/web/api/request/destination/index.md index 2c8df25e76da334..13d822f6009c37f 100644 --- a/files/en-us/web/api/request/destination/index.md +++ b/files/en-us/web/api/request/destination/index.md @@ -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. @@ -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"` diff --git a/files/en-us/web/html/reference/attributes/rel/modulepreload/index.md b/files/en-us/web/html/reference/attributes/rel/modulepreload/index.md index 7a1ee16a38afe78..674b277ad1a663f 100644 --- a/files/en-us/web/html/reference/attributes/rel/modulepreload/index.md +++ b/files/en-us/web/html/reference/attributes/rel/modulepreload/index.md @@ -22,7 +22,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. diff --git a/files/en-us/web/javascript/reference/statements/import/with/index.md b/files/en-us/web/javascript/reference/statements/import/with/index.md index fffc1bb224b07c7..21544cce3f827cb 100644 --- a/files/en-us/web/javascript/reference/statements/import/with/index.md +++ b/files/en-us/web/javascript/reference/statements/import/with/index.md @@ -74,7 +74,7 @@ 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. @@ -82,9 +82,9 @@ 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" }`) @@ -127,6 +127,19 @@ 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 file as a UTF-8 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. + ### Intended semantics for import attributes An attribute can change the runtime's behavior at every stage of the module loading process: @@ -139,7 +152,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 @@ -205,3 +218,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) From cd1ed7be718a9c866722097eb187f82bb6a6e156 Mon Sep 17 00:00:00 2001 From: Eemeli Aro Date: Mon, 23 Mar 2026 12:58:47 +0200 Subject: [PATCH 2/3] Apply suggestion from @Josh-Cena Co-authored-by: Joshua Chen --- .../web/javascript/reference/statements/import/with/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/files/en-us/web/javascript/reference/statements/import/with/index.md b/files/en-us/web/javascript/reference/statements/import/with/index.md index 21544cce3f827cb..d480b03324f9b81 100644 --- a/files/en-us/web/javascript/reference/statements/import/with/index.md +++ b/files/en-us/web/javascript/reference/statements/import/with/index.md @@ -136,9 +136,7 @@ You can load text from a file into the `text` string using the following code: 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. +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 From 0d228776a201e03ed58238eaac59c7bf516206c0 Mon Sep 17 00:00:00 2001 From: Eemeli Aro Date: Mon, 23 Mar 2026 12:59:28 +0200 Subject: [PATCH 3/3] Apply suggestion from @Josh-Cena Co-authored-by: Joshua Chen --- .../web/javascript/reference/statements/import/with/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/statements/import/with/index.md b/files/en-us/web/javascript/reference/statements/import/with/index.md index d480b03324f9b81..cc45644b560aa6e 100644 --- a/files/en-us/web/javascript/reference/statements/import/with/index.md +++ b/files/en-us/web/javascript/reference/statements/import/with/index.md @@ -129,7 +129,7 @@ Note that importing CSS modules into workers is usually not supported, because t #### Text Modules (`{ type: "text" }`) -The `text` type allows importing a file as a UTF-8 string value. +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