Skip to content
73 changes: 68 additions & 5 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -64211,6 +64211,21 @@ o............A....e
response has a MIME type that is not a <span>JavaScript MIME type</span>.</p>
</div>

<div class="example" id="bytes-module-script-example">
<p>The following sample shows how a <span>bytes module script</span> can be imported from inside
a <span>JavaScript module script</span>:</p>

<pre><code class="html" data-x="">&lt;script type="module">
import logoBytes from "https://resources.whatwg.org/logo.png" with { type: "bytes" };

console.log("Binary data length:", logoBytes.byteLength);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
console.log("Binary data length:", logoBytes.byteLength);
console.log("Number of raw bytes:", logoBytes.byteLength);

(Not a big fan of "binary data".)

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Fixed in ef8b0c0

&lt;/script></code></pre>

<p>The <span>bytes module script</span> will return a <code>Uint8Array</code> object containing
the raw bytes of the fetched resource. Unlike <span data-x="JSON module script">JSON module scripts</span>
which require a specific MIME type, bytes modules can be used to import binary data from any resource.</p>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
which require a specific MIME type, bytes modules can be used to import binary data from any resource.</p>
which require a specific MIME type, bytes module scripts can be used to import binary data from any resource.</p>

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Fixed in 9896faa

(for some reason, github wouldn't accept the suggestion)

</div>

<div w-nodev>

<h5 id="script-processing-model">Processing model</h5>
Expand Down Expand Up @@ -112104,7 +112119,7 @@ document.querySelector("button").addEventListener("click", bound);
script">JavaScript module scripts</span>;</p></li>

<li><p>a <span>Synthetic Module Record</span>, for <span data-x="CSS module script">CSS module
scripts</span> and <span data-x="JSON module script">JSON module scripts</span>;</p></li>
scripts</span>, <span data-x="JSON module script">JSON module scripts</span>, and <span data-x="bytes module script">bytes module scripts</span>;</p></li>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Needs wrapping at 100 columns as per guidelines.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Fixed in 8cf14bf


<li><p>a <span>WebAssembly Module Record</span>, for <span data-x="WebAssembly module
script">WebAssembly module scripts</span>; or</p></li>
Expand Down Expand Up @@ -112206,18 +112221,26 @@ document.querySelector("button").addEventListener("click", bound);
-->
</li>

<li>
<p>A <span>module script</span> is a <dfn export>bytes module script</dfn> if its <span
data-x="concept-script-record">record</span> is a <span>Synthetic Module Record</span>, and it
was created via the <span data-x="creating a bytes module script">create a bytes module
script</span> algorithm. bytes module scripts represent binary data as <code>Uint8Array</code>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
script</span> algorithm. bytes module scripts represent binary data as <code>Uint8Array</code>
script</span> algorithm. Bytes module scripts represent binary data as <code>Uint8Array</code>

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Fixed in 9896faa

(for some reason, github wouldn't accept the suggestion)

backed by an immutable <code data-x="idl-ArrayBuffer">ArrayBuffer</code>.</p>
</li>

<li>
<p>A <span>module script</span> is a <dfn export>WebAssembly module script</dfn> if
its <span data-x="concept-script-record">record</span> is a <span>WebAssembly Module
Comment thread
annevk marked this conversation as resolved.
Outdated
Record</span>.</p>
</li>
</ul>

<p class="note">As CSS style sheets and JSON documents do not import dependent modules, and do not
<p class="note">As CSS style sheets, JSON documents, and binary data do not import dependent modules, and do not
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Maybe "As CSS style sheets and plain data ..." (which then encompasses both and also text in the future).

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Fixed in 8cf14bf

throw exceptions on evaluation, the <span data-x="concept-script-script-fetch-options">fetch
options</span> and <span data-x="concept-script-base-url">base URL</span> of <span data-x="CSS
module script">CSS module scripts</span> and <span data-x="JSON module script">JSON module
scripts</span> and are always null.</p>
module script">CSS module scripts</span>, <span data-x="JSON module script">JSON module
scripts</span>, and <span data-x="bytes module script">bytes module scripts</span> are always null.</p>

<p>The <dfn>active script</dfn> is determined by the following algorithm:</p>

Expand Down Expand Up @@ -113112,6 +113135,10 @@ document.querySelector("button").addEventListener("click", bound);
<var>settingsObject</var>, <var>response</var>'s <span
data-x="concept-response-url">URL</span>, and <var>options</var>.</p></li>

<li><p>If <var>moduleType</var> is "<code data-x="">bytes</code>", then set <var>moduleScript</var> to
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I would move this before <li><p>Let <var>referrerPolicy</var> be the result of ..., and put the steps from it to the one that created the various other module scrips in an Else clause.

It's just an editorial suggestion to make it clear that those steps are useless for bytes module scripts, it does not actually affect behavior.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Fixed in 2c529f9

the result of <span>creating a bytes module script</span> given <var>bodyBytes</var> and
<var>settingsObject</var>.</p></li>

<li>
<p>Otherwise:</p>
<ol>
Expand Down Expand Up @@ -113432,6 +113459,36 @@ document.querySelector("button").addEventListener("click", bound);
<li><p>Return <var>script</var>.</p></li>
</ol>

<p>To <dfn data-x="creating a bytes module script">create a bytes module script</dfn>, given a
byte sequence <var>bytes</var> and an <span>environment settings object</span> <var>settings</var>:</p>

<ol>
<li><p>Let <var>script</var> be a new <span>module script</span> that this algorithm will
subsequently initialize.</p></li>

<li><p>Set <var>script</var>'s <span data-x="concept-script-settings-object">settings
object</span> to <var>settings</var>.</p></li>

<li><p>Set <var>script</var>'s <span data-x="concept-script-base-url">base URL</span> and
<span data-x="concept-script-script-fetch-options">fetch options</span> to null.</p></li>

<li><p>Set <var>script</var>'s <span data-x="concept-script-parse-error">parse error</span> and
<span data-x="concept-script-error-to-rethrow">error to rethrow</span> to null.</p></li>

<li><p>Let <var>result</var> be a new <code>Uint8Array</code> object, in <var>settings</var>'s
<span data-x="environment settings object's realm">realm</span>, whose backing bytes are <var>bytes</var>.</p></li>

<li><p>Let <var>record</var> be <span>CreateBytesModule</span>(<var>immutableBytes</var>).</p></li>

<ref>JSIMPORTBYTES</ref>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This appears in the wrong place. It should usually appear just before a </p>.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Fixed in 72f4bc0

<li><p>Set <var>script</var>'s <span data-x="concept-script-record">record</span> to <var>record</var>.</p></li>

<li><p>Return <var>script</var>.</p></li>
</ol>

<p>User agents that support JavaScript must also implement the <cite>Import Bytes</cite> proposal.
Comment thread
annevk marked this conversation as resolved.
The following terms are defined there, and used in this specification: <ref>JSIMPORTBYTES</ref></p>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This seems to be in the wrong place as well?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

"this" meaning the <ref>? Is there a better place to put it?


<p>The <dfn>module type from module request</dfn> steps, given a <span>ModuleRequest
Record</span> <var>moduleRequest</var>, are as follows:</p>
Copy link
Copy Markdown
Contributor

@bakkot bakkot Sep 15, 2025

Choose a reason for hiding this comment

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

You may want to use the creating an ArrayBufferView operation here (see e.g. the bytes() method on Response), although this does not allow you to specify specifically an immutable ArrayBuffer (yet?).

I don't think "backing bytes" is really a concept which exists anywhere.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Yeah, you might have to add a new argument for that or a separate operation.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I'm not sure I fully understand. Mind leaving a code suggestion?

Copy link
Copy Markdown
Collaborator

@nicolo-ribaudo nicolo-ribaudo Sep 17, 2025

Choose a reason for hiding this comment

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

This is the algorithm where creation of Uint8Array&friends is defined: https://github.com/whatwg/webidl/blob/a79e69ef7398ece546e526a1eebec977363c7304/index.bs#L9277-L9291

It needs to take a new parameter (I guess either a boolean or an enum like preserveResizability of https://tc39.es/proposal-immutable-arraybuffer/#sec-arraybuffercopyanddetach), propagate it to https://github.com/whatwg/webidl/blob/a79e69ef7398ece546e526a1eebec977363c7304/index.bs#L9252 and then call AllocateImmutableArrayBuffer (or ArrayBufferCopyAndDetach, depending on what is simpler) appropriately.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

More precisely, as mentioned below, HTML should only be creating the ArrayBuffer, and then calling CreateBytesModule from the proposal.

So it's only the create an ArrayBuffer algorithm which needs updated with the new parameter, not the algorithm for creating new views like Uint8Array.

Copy link
Copy Markdown
Author

@styfle styfle Dec 25, 2025

Choose a reason for hiding this comment

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

So it sounds like I need to create a PR to the whatwg/webidl repo to modify create an ArrayBuffer before proceeding with this whatwg/html PR. Is that correct?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Yeah that seems right.


Comment on lines +113479 to +113480
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This needs to initialize and reference the immutable array buffer spec as well, as a direct reference to https://tc39.es/proposal-immutable-arraybuffer/#sec-arraybuffer-objects.

Also we only need to create the ArrayBuffer here that is immutable, the Uint8Array typed array view is added on the TC39 spec side.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I'm not sure I fully understand. Mind leaving a code suggestion?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think we want to use Web IDL for this, similar to what the Encoding Standard does for instance. But to make the backing buffer immutable we'll have to make a small change to Web IDL to allow for that.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

So it sounds like I need to create a PR to the whatwg/webidl repo to modify create an ArrayBuffer before proceeding with this whatwg/html PR. Is that correct?

Expand Down Expand Up @@ -113467,7 +113524,7 @@ document.querySelector("button").addEventListener("click", bound);

<ol>
<li><p>If <var>moduleType</var> is not "<code data-x="">javascript-or-wasm</code>", "<code
data-x="">css</code>", or "<code data-x="">json</code>", then return false.</p></li>
data-x="">css</code>", "<code data-x="">json</code>", or "<code data-x="">bytes</code>", then return false.</p></li>

<li><p>If <var>moduleType</var> is "<code data-x="">css</code>" and the
<code>CSSStyleSheet</code> interface is not <span data-x="idl-exposed">exposed</span> in
Expand All @@ -113488,6 +113545,9 @@ document.querySelector("button").addEventListener("click", bound);
<li>If <var>moduleType</var> is "<code data-x="">css</code>", then return "<code
data-x="">style</code>".</li>

<li>If <var>moduleType</var> is "<code data-x="">bytes</code>", then return "<code
data-x="">empty</code>".</li>

<li>Return <var>defaultDestination</var>.</li>
</ol>

Expand Down Expand Up @@ -150175,6 +150235,9 @@ INSERT INTERFACES HERE
<dt id="refsJSINTL">[JSINTL]</dt>
<dd><cite><a href="https://tc39.es/ecma402/">ECMAScript Internationalization API Specification</a></cite>. Ecma International.</dd>

<dt id="refsJSIMPORTBYTES">[JSIMPORTBYTES]</dt>
<dd><cite><a href="https://tc39.es/proposal-import-bytes/">Import Bytes</a></cite>. Ecma International.</dd>

<dt id="refsJSON">[JSON]</dt>
<dd><cite><a href="https://www.rfc-editor.org/rfc/rfc8259">The JavaScript Object Notation (JSON) Data Interchange Format</a></cite>, T. Bray. IETF.</dd>

Expand Down
Loading