Skip to content

add import bytes #11657

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

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

add import bytes #11657

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f8b1b09
add import bytes
styfle Sep 15, 2025
183a2ce
make "bytes module script" lowercase
styfle Sep 16, 2025
b894372
add references to Uint8Array & ArrayBuffer
styfle Sep 17, 2025
9647411
remove comment about super-rigorous
styfle Sep 17, 2025
e5b9757
"stylesheets" => "style sheets"
styfle Sep 17, 2025
9828655
add ref to JSIMPORTBYTES
styfle Sep 17, 2025
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
73 changes: 68 additions & 5 deletions source
View file
Open in desktop
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);
&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
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>

</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>

<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
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>

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
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
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
Contributor

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.

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
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>.

<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.
Copy link
Member

Choose a reason for hiding this comment

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

Indentation here is wrong.

The following terms are defined there, and used in this specification: <ref>JSIMPORTBYTES</ref></p>
Comment on lines +113489 to +113490
Copy link
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?


<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
Contributor

@bakkot bakkot Sep 15, 2025 •
edited
Loading

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
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
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
Contributor

@nicolo-ribaudo nicolo-ribaudo Sep 17, 2025 •
edited
Loading

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
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.


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