| <!doctype html><html lang="en"> |
| <head> |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> |
| <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> |
| <title>WebAssembly Web API</title> |
| <meta content="ED" name="w3c-status"> |
| <meta content="Bikeshed version d765c696b, updated Fri Mar 8 15:58:52 2024 -0800" name="generator"> |
| <link href="https://www.w3.org/TR/wasm-web-api-2/" rel="canonical"> |
| <meta content="e6afe0abf5ebb5a493d61012d03bde8799bc5429" name="revision"> |
| <meta content="dark light" name="color-scheme"> |
| <style>/* Boilerplate: style-autolinks */ |
| .css.css, .property.property, .descriptor.descriptor { |
| color: var(--a-normal-text); |
| font-size: inherit; |
| font-family: inherit; |
| } |
| .css::before, .property::before, .descriptor::before { |
| content: "‘"; |
| } |
| .css::after, .property::after, .descriptor::after { |
| content: "’"; |
| } |
| .property, .descriptor { |
| /* Don't wrap property and descriptor names */ |
| white-space: nowrap; |
| } |
| .type { /* CSS value <type> */ |
| font-style: italic; |
| } |
| pre .property::before, pre .property::after { |
| content: ""; |
| } |
| [data-link-type="property"]::before, |
| [data-link-type="propdesc"]::before, |
| [data-link-type="descriptor"]::before, |
| [data-link-type="value"]::before, |
| [data-link-type="function"]::before, |
| [data-link-type="at-rule"]::before, |
| [data-link-type="selector"]::before, |
| [data-link-type="maybe"]::before { |
| content: "‘"; |
| } |
| [data-link-type="property"]::after, |
| [data-link-type="propdesc"]::after, |
| [data-link-type="descriptor"]::after, |
| [data-link-type="value"]::after, |
| [data-link-type="function"]::after, |
| [data-link-type="at-rule"]::after, |
| [data-link-type="selector"]::after, |
| [data-link-type="maybe"]::after { |
| content: "’"; |
| } |
| |
| [data-link-type].production::before, |
| [data-link-type].production::after, |
| .prod [data-link-type]::before, |
| .prod [data-link-type]::after { |
| content: ""; |
| } |
| |
| [data-link-type=element], |
| [data-link-type=element-attr] { |
| font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; |
| font-size: .9em; |
| } |
| [data-link-type=element]::before { content: "<" } |
| [data-link-type=element]::after { content: ">" } |
| |
| [data-link-type=biblio] { |
| white-space: pre; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --selflink-text: black; |
| --selflink-bg: silver; |
| --selflink-hover-text: white; |
| } |
| } |
| </style> |
| <style>/* Boilerplate: style-colors */ |
| /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ |
| :root { |
| color-scheme: light dark; |
| |
| --text: black; |
| --bg: white; |
| |
| --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); |
| |
| --logo-bg: #1a5e9a; |
| --logo-active-bg: #c00; |
| --logo-text: white; |
| |
| --tocnav-normal-text: #707070; |
| --tocnav-normal-bg: var(--bg); |
| --tocnav-hover-text: var(--tocnav-normal-text); |
| --tocnav-hover-bg: #f8f8f8; |
| --tocnav-active-text: #c00; |
| --tocnav-active-bg: var(--tocnav-normal-bg); |
| |
| --tocsidebar-text: var(--text); |
| --tocsidebar-bg: #f7f8f9; |
| --tocsidebar-shadow: rgba(0,0,0,.1); |
| --tocsidebar-heading-text: hsla(203,20%,40%,.7); |
| |
| --toclink-text: var(--text); |
| --toclink-underline: #3980b5; |
| --toclink-visited-text: var(--toclink-text); |
| --toclink-visited-underline: #054572; |
| |
| --heading-text: #005a9c; |
| |
| --hr-text: var(--text); |
| |
| --algo-border: #def; |
| |
| --del-text: red; |
| --del-bg: transparent; |
| --ins-text: #080; |
| --ins-bg: transparent; |
| |
| --a-normal-text: #034575; |
| --a-normal-underline: #bbb; |
| --a-visited-text: var(--a-normal-text); |
| --a-visited-underline: #707070; |
| --a-hover-bg: rgba(75%, 75%, 75%, .25); |
| --a-active-text: #c00; |
| --a-active-underline: #c00; |
| |
| --blockquote-border: silver; |
| --blockquote-bg: transparent; |
| --blockquote-text: currentcolor; |
| |
| --issue-border: #e05252; |
| --issue-bg: #fbe9e9; |
| --issue-text: var(--text); |
| --issueheading-text: #831616; |
| |
| --example-border: #e0cb52; |
| --example-bg: #fcfaee; |
| --example-text: var(--text); |
| --exampleheading-text: #574b0f; |
| |
| --note-border: #52e052; |
| --note-bg: #e9fbe9; |
| --note-text: var(--text); |
| --noteheading-text: hsl(120, 70%, 30%); |
| --notesummary-underline: silver; |
| |
| --assertion-border: #aaa; |
| --assertion-bg: #eee; |
| --assertion-text: black; |
| |
| --advisement-border: orange; |
| --advisement-bg: #fec; |
| --advisement-text: var(--text); |
| --advisementheading-text: #b35f00; |
| |
| --warning-border: red; |
| --warning-bg: hsla(40,100%,50%,0.95); |
| --warning-text: var(--text); |
| |
| --amendment-border: #330099; |
| --amendment-bg: #F5F0FF; |
| --amendment-text: var(--text); |
| --amendmentheading-text: #220066; |
| |
| --def-border: #8ccbf2; |
| --def-bg: #def; |
| --def-text: var(--text); |
| --defrow-border: #bbd7e9; |
| |
| --datacell-border: silver; |
| |
| --indexinfo-text: #707070; |
| |
| --indextable-hover-text: black; |
| --indextable-hover-bg: #f7f8f9; |
| |
| --outdatedspec-bg: rgba(0, 0, 0, .5); |
| --outdatedspec-text: black; |
| --outdated-bg: maroon; |
| --outdated-text: white; |
| --outdated-shadow: red; |
| |
| --editedrec-bg: darkorange; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --text: #ddd; |
| --bg: black; |
| |
| --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); |
| |
| --logo-bg: #1a5e9a; |
| --logo-active-bg: #c00; |
| --logo-text: white; |
| |
| --tocnav-normal-text: #999; |
| --tocnav-normal-bg: var(--bg); |
| --tocnav-hover-text: var(--tocnav-normal-text); |
| --tocnav-hover-bg: #080808; |
| --tocnav-active-text: #f44; |
| --tocnav-active-bg: var(--tocnav-normal-bg); |
| |
| --tocsidebar-text: var(--text); |
| --tocsidebar-bg: #080808; |
| --tocsidebar-shadow: rgba(255,255,255,.1); |
| --tocsidebar-heading-text: hsla(203,20%,40%,.7); |
| |
| --toclink-text: var(--text); |
| --toclink-underline: #6af; |
| --toclink-visited-text: var(--toclink-text); |
| --toclink-visited-underline: #054572; |
| |
| --heading-text: #8af; |
| |
| --hr-text: var(--text); |
| |
| --algo-border: #456; |
| |
| --del-text: #f44; |
| --del-bg: transparent; |
| --ins-text: #4a4; |
| --ins-bg: transparent; |
| |
| --a-normal-text: #6af; |
| --a-normal-underline: #555; |
| --a-visited-text: var(--a-normal-text); |
| --a-visited-underline: var(--a-normal-underline); |
| --a-hover-bg: rgba(25%, 25%, 25%, .2); |
| --a-active-text: #f44; |
| --a-active-underline: var(--a-active-text); |
| |
| --borderedblock-bg: rgba(255, 255, 255, .05); |
| |
| --blockquote-border: silver; |
| --blockquote-bg: var(--borderedblock-bg); |
| --blockquote-text: currentcolor; |
| |
| --issue-border: #e05252; |
| --issue-bg: var(--borderedblock-bg); |
| --issue-text: var(--text); |
| --issueheading-text: hsl(0deg, 70%, 70%); |
| |
| --example-border: hsl(50deg, 90%, 60%); |
| --example-bg: var(--borderedblock-bg); |
| --example-text: var(--text); |
| --exampleheading-text: hsl(50deg, 70%, 70%); |
| |
| --note-border: hsl(120deg, 100%, 35%); |
| --note-bg: var(--borderedblock-bg); |
| --note-text: var(--text); |
| --noteheading-text: hsl(120, 70%, 70%); |
| --notesummary-underline: silver; |
| |
| --assertion-border: #444; |
| --assertion-bg: var(--borderedblock-bg); |
| --assertion-text: var(--text); |
| |
| --advisement-border: orange; |
| --advisement-bg: #222218; |
| --advisement-text: var(--text); |
| --advisementheading-text: #f84; |
| |
| --warning-border: red; |
| --warning-bg: hsla(40,100%,20%,0.95); |
| --warning-text: var(--text); |
| |
| --amendment-border: #330099; |
| --amendment-bg: #080010; |
| --amendment-text: var(--text); |
| --amendmentheading-text: #cc00ff; |
| |
| --def-border: #8ccbf2; |
| --def-bg: #080818; |
| --def-text: var(--text); |
| --defrow-border: #136; |
| |
| --datacell-border: silver; |
| |
| --indexinfo-text: #aaa; |
| |
| --indextable-hover-text: var(--text); |
| --indextable-hover-bg: #181818; |
| |
| --outdatedspec-bg: rgba(255, 255, 255, .5); |
| --outdatedspec-text: black; |
| --outdated-bg: maroon; |
| --outdated-text: white; |
| --outdated-shadow: red; |
| |
| --editedrec-bg: darkorange; |
| } |
| /* In case a transparent-bg image doesn't expect to be on a dark bg, |
| which is quite common in practice... */ |
| img { background: white; } |
| } |
| </style> |
| <style>/* Boilerplate: style-counters */ |
| body { |
| counter-reset: example figure issue; |
| } |
| .issue { |
| counter-increment: issue; |
| } |
| .issue:not(.no-marker)::before { |
| content: "Issue " counter(issue); |
| } |
| |
| .example { |
| counter-increment: example; |
| } |
| .example:not(.no-marker)::before { |
| content: "Example " counter(example); |
| } |
| .invalid.example:not(.no-marker)::before, |
| .illegal.example:not(.no-marker)::before { |
| content: "Invalid Example" counter(example); |
| } |
| |
| figcaption { |
| counter-increment: figure; |
| } |
| figcaption:not(.no-marker)::before { |
| content: "Figure " counter(figure) " "; |
| } |
| </style> |
| <style>/* Boilerplate: style-dfn-panel */ |
| :root { |
| --dfnpanel-bg: #ddd; |
| --dfnpanel-text: var(--text); |
| --dfnpanel-target-bg: #ffc; |
| --dfnpanel-target-outline: orange; |
| } |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --dfnpanel-bg: #222; |
| --dfnpanel-text: var(--text); |
| --dfnpanel-target-bg: #333; |
| --dfnpanel-target-outline: silver; |
| } |
| } |
| .dfn-panel { |
| position: absolute; |
| z-index: 35; |
| width: 20em; |
| width: 300px; |
| height: auto; |
| max-height: 500px; |
| overflow: auto; |
| padding: 0.5em 0.75em; |
| font: small Helvetica Neue, sans-serif, Droid Sans Fallback; |
| background: var(--dfnpanel-bg); |
| color: var(--dfnpanel-text); |
| border: outset 0.2em; |
| white-space: normal; /* in case it's moved into a pre */ |
| } |
| .dfn-panel:not(.on) { display: none; } |
| .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } |
| .dfn-panel > b { display: block; } |
| .dfn-panel a { color: var(--dfnpanel-text); } |
| .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } |
| .dfn-panel a:focus { |
| outline: 5px auto Highlight; |
| outline: 5px auto -webkit-focus-ring-color; |
| } |
| .dfn-panel > b + b { margin-top: 0.25em; } |
| .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } |
| .dfn-panel li a { |
| max-width: calc(300px - 1.5em - 1em); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .dfn-panel.activated { |
| display: inline-block; |
| position: fixed; |
| left: 8px; |
| bottom: 2em; |
| margin: 0 auto; |
| max-width: calc(100vw - 1.5em - .4em - .5em); |
| max-height: 30vh; |
| transition: left 1s ease-out, bottom 1s ease-out; |
| } |
| |
| .dfn-panel .link-item:hover { |
| text-decoration: underline; |
| } |
| .dfn-panel .link-item .copy-icon { |
| opacity: 0; |
| } |
| .dfn-panel .link-item:hover .copy-icon, |
| .dfn-panel .link-item .copy-icon:focus { |
| opacity: 1; |
| } |
| |
| .dfn-panel .copy-icon { |
| display: inline-block; |
| margin-right: 0.5em; |
| width: 0.85em; |
| height: 1em; |
| border-radius: 3px; |
| background-color: #ccc; |
| cursor: pointer; |
| } |
| |
| .dfn-panel .copy-icon .icon { |
| width: 100%; |
| height: 100%; |
| background-color: #fff; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| position: relative; |
| } |
| |
| .dfn-panel .copy-icon .icon::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| border: 1px solid black; |
| background-color: #ccc; |
| opacity: 0.25; |
| transform: translate(3px, -3px); |
| } |
| |
| .dfn-panel .copy-icon:active .icon::before { |
| opacity: 1; |
| } |
| |
| .dfn-paneled[role="button"] { cursor: help; } |
| |
| .highlighted { |
| animation: target-fade 3s; |
| } |
| |
| @keyframes target-fade { |
| from { |
| background-color: var(--dfnpanel-target-bg); |
| outline: 5px solid var(--dfnpanel-target-outline); |
| } |
| to { |
| color: var(--a-normal-text); |
| background-color: transparent; |
| outline: transparent; |
| } |
| } |
| </style> |
| <style>/* Boilerplate: style-idl-highlighting */ |
| pre.idl.highlight { |
| background: var(--borderedblock-bg, var(--def-bg)); |
| } |
| </style> |
| <style>/* Boilerplate: style-issues */ |
| a[href].issue-return { |
| float: right; |
| float: inline-end; |
| color: var(--issueheading-text); |
| font-weight: bold; |
| text-decoration: none; |
| } |
| </style> |
| <style>/* Boilerplate: style-md-lists */ |
| /* This is a weird hack for me not yet following the commonmark spec |
| regarding paragraph and lists. */ |
| [data-md] > :first-child { |
| margin-top: 0; |
| } |
| [data-md] > :last-child { |
| margin-bottom: 0; |
| } |
| </style> |
| <style>/* Boilerplate: style-ref-hints */ |
| :root { |
| --ref-hint-bg: #ddd; |
| --ref-hint-text: var(--text); |
| } |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --ref-hint-bg: #222; |
| --ref-hint-text: var(--text); |
| } |
| } |
| |
| .ref-hint { |
| display: inline-block; |
| position: absolute; |
| z-index: 35; |
| width: 20em; |
| width: 300px; |
| height: auto; |
| max-height: 500px; |
| overflow: auto; |
| padding: 0.5em 0.5em; |
| font: small Helvetica Neue, sans-serif, Droid Sans Fallback; |
| background: var(--ref-hint-bg); |
| color: var(--ref-hint-text); |
| border: outset 0.2em; |
| white-space: normal; /* in case it's moved into a pre */ |
| } |
| |
| .ref-hint * { margin: 0; padding: 0; text-indent: 0; } |
| |
| .ref-hint ul { padding: 0 0 0 1em; list-style: none; } |
| </style> |
| <style>/* Boilerplate: style-selflinks */ |
| :root { |
| --selflink-text: white; |
| --selflink-bg: gray; |
| --selflink-hover-text: black; |
| } |
| .heading, .issue, .note, .example, li, dt { |
| position: relative; |
| } |
| a.self-link { |
| position: absolute; |
| top: 0; |
| left: calc(-1 * (3.5rem - 26px)); |
| width: calc(3.5rem - 26px); |
| height: 2em; |
| text-align: center; |
| border: none; |
| transition: opacity .2s; |
| opacity: .5; |
| } |
| a.self-link:hover { |
| opacity: 1; |
| } |
| .heading > a.self-link { |
| font-size: 83%; |
| } |
| .example > a.self-link, |
| .note > a.self-link, |
| .issue > a.self-link { |
| /* These blocks are overflow:auto, so positioning outside |
| doesn't work. */ |
| left: auto; |
| right: 0; |
| } |
| li > a.self-link { |
| left: calc(-1 * (3.5rem - 26px) - 2em); |
| } |
| dfn > a.self-link { |
| top: auto; |
| left: auto; |
| opacity: 0; |
| width: 1.5em; |
| height: 1.5em; |
| background: var(--selflink-bg); |
| color: var(--selflink-text); |
| font-style: normal; |
| transition: opacity .2s, background-color .2s, color .2s; |
| } |
| dfn:hover > a.self-link { |
| opacity: 1; |
| } |
| dfn > a.self-link:hover { |
| color: var(--selflink-hover-text); |
| } |
| |
| a.self-link::before { content: "¶"; } |
| .heading > a.self-link::before { content: "§"; } |
| dfn > a.self-link::before { content: "#"; } |
| </style> |
| <style>/* Boilerplate: style-syntax-highlighting */ |
| code.highlight { padding: .1em; border-radius: .3em; } |
| pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } |
| |
| .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } |
| c-[a] { color: #990055 } /* Keyword.Declaration */ |
| c-[b] { color: #990055 } /* Keyword.Type */ |
| c-[c] { color: #708090 } /* Comment */ |
| c-[d] { color: #708090 } /* Comment.Multiline */ |
| c-[e] { color: #0077aa } /* Name.Attribute */ |
| c-[f] { color: #669900 } /* Name.Tag */ |
| c-[g] { color: #222222 } /* Name.Variable */ |
| c-[k] { color: #990055 } /* Keyword */ |
| c-[l] { color: #000000 } /* Literal */ |
| c-[m] { color: #000000 } /* Literal.Number */ |
| c-[n] { color: #0077aa } /* Name */ |
| c-[o] { color: #999999 } /* Operator */ |
| c-[p] { color: #999999 } /* Punctuation */ |
| c-[s] { color: #a67f59 } /* Literal.String */ |
| c-[t] { color: #a67f59 } /* Literal.String.Single */ |
| c-[u] { color: #a67f59 } /* Literal.String.Double */ |
| c-[cp] { color: #708090 } /* Comment.Preproc */ |
| c-[c1] { color: #708090 } /* Comment.Single */ |
| c-[cs] { color: #708090 } /* Comment.Special */ |
| c-[kc] { color: #990055 } /* Keyword.Constant */ |
| c-[kn] { color: #990055 } /* Keyword.Namespace */ |
| c-[kp] { color: #990055 } /* Keyword.Pseudo */ |
| c-[kr] { color: #990055 } /* Keyword.Reserved */ |
| c-[ld] { color: #000000 } /* Literal.Date */ |
| c-[nc] { color: #0077aa } /* Name.Class */ |
| c-[no] { color: #0077aa } /* Name.Constant */ |
| c-[nd] { color: #0077aa } /* Name.Decorator */ |
| c-[ni] { color: #0077aa } /* Name.Entity */ |
| c-[ne] { color: #0077aa } /* Name.Exception */ |
| c-[nf] { color: #0077aa } /* Name.Function */ |
| c-[nl] { color: #0077aa } /* Name.Label */ |
| c-[nn] { color: #0077aa } /* Name.Namespace */ |
| c-[py] { color: #0077aa } /* Name.Property */ |
| c-[ow] { color: #999999 } /* Operator.Word */ |
| c-[mb] { color: #000000 } /* Literal.Number.Bin */ |
| c-[mf] { color: #000000 } /* Literal.Number.Float */ |
| c-[mh] { color: #000000 } /* Literal.Number.Hex */ |
| c-[mi] { color: #000000 } /* Literal.Number.Integer */ |
| c-[mo] { color: #000000 } /* Literal.Number.Oct */ |
| c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ |
| c-[sc] { color: #a67f59 } /* Literal.String.Char */ |
| c-[sd] { color: #a67f59 } /* Literal.String.Doc */ |
| c-[se] { color: #a67f59 } /* Literal.String.Escape */ |
| c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ |
| c-[si] { color: #a67f59 } /* Literal.String.Interpol */ |
| c-[sx] { color: #a67f59 } /* Literal.String.Other */ |
| c-[sr] { color: #a67f59 } /* Literal.String.Regex */ |
| c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ |
| c-[vc] { color: #0077aa } /* Name.Variable.Class */ |
| c-[vg] { color: #0077aa } /* Name.Variable.Global */ |
| c-[vi] { color: #0077aa } /* Name.Variable.Instance */ |
| c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ |
| |
| @media (prefers-color-scheme: dark) { |
| .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } |
| |
| c-[a] { color: #d33682 } /* Keyword.Declaration */ |
| c-[b] { color: #d33682 } /* Keyword.Type */ |
| c-[c] { color: #2aa198 } /* Comment */ |
| c-[d] { color: #2aa198 } /* Comment.Multiline */ |
| c-[e] { color: #268bd2 } /* Name.Attribute */ |
| c-[f] { color: #b58900 } /* Name.Tag */ |
| c-[g] { color: #cb4b16 } /* Name.Variable */ |
| c-[k] { color: #d33682 } /* Keyword */ |
| c-[l] { color: #657b83 } /* Literal */ |
| c-[m] { color: #657b83 } /* Literal.Number */ |
| c-[n] { color: #268bd2 } /* Name */ |
| c-[o] { color: #657b83 } /* Operator */ |
| c-[p] { color: #657b83 } /* Punctuation */ |
| c-[s] { color: #6c71c4 } /* Literal.String */ |
| c-[t] { color: #6c71c4 } /* Literal.String.Single */ |
| c-[u] { color: #6c71c4 } /* Literal.String.Double */ |
| c-[ch] { color: #2aa198 } /* Comment.Hashbang */ |
| c-[cp] { color: #2aa198 } /* Comment.Preproc */ |
| c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ |
| c-[c1] { color: #2aa198 } /* Comment.Single */ |
| c-[cs] { color: #2aa198 } /* Comment.Special */ |
| c-[kc] { color: #d33682 } /* Keyword.Constant */ |
| c-[kn] { color: #d33682 } /* Keyword.Namespace */ |
| c-[kp] { color: #d33682 } /* Keyword.Pseudo */ |
| c-[kr] { color: #d33682 } /* Keyword.Reserved */ |
| c-[ld] { color: #657b83 } /* Literal.Date */ |
| c-[nc] { color: #268bd2 } /* Name.Class */ |
| c-[no] { color: #268bd2 } /* Name.Constant */ |
| c-[nd] { color: #268bd2 } /* Name.Decorator */ |
| c-[ni] { color: #268bd2 } /* Name.Entity */ |
| c-[ne] { color: #268bd2 } /* Name.Exception */ |
| c-[nf] { color: #268bd2 } /* Name.Function */ |
| c-[nl] { color: #268bd2 } /* Name.Label */ |
| c-[nn] { color: #268bd2 } /* Name.Namespace */ |
| c-[py] { color: #268bd2 } /* Name.Property */ |
| c-[ow] { color: #657b83 } /* Operator.Word */ |
| c-[mb] { color: #657b83 } /* Literal.Number.Bin */ |
| c-[mf] { color: #657b83 } /* Literal.Number.Float */ |
| c-[mh] { color: #657b83 } /* Literal.Number.Hex */ |
| c-[mi] { color: #657b83 } /* Literal.Number.Integer */ |
| c-[mo] { color: #657b83 } /* Literal.Number.Oct */ |
| c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ |
| c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ |
| c-[sc] { color: #6c71c4 } /* Literal.String.Char */ |
| c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ |
| c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ |
| c-[se] { color: #6c71c4 } /* Literal.String.Escape */ |
| c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ |
| c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ |
| c-[sx] { color: #6c71c4 } /* Literal.String.Other */ |
| c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ |
| c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ |
| c-[fm] { color: #268bd2 } /* Name.Function.Magic */ |
| c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ |
| c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ |
| c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ |
| c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ |
| c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ |
| } |
| </style> |
| <style>/* Boilerplate: style-var-click-highlighting */ |
| /* |
| Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ |
| D50 2deg illuminant, L in [0,100], a and b in [-128, 128] |
| 0 = lab(85,0,85) |
| 1 = lab(85,80,30) |
| 2 = lab(85,-40,40) |
| 3 = lab(85,-50,0) |
| 4 = lab(85,5,15) |
| 5 = lab(85,-10,-50) |
| 6 = lab(85,35,-15) |
| */ |
| [data-algorithm] var { cursor: pointer; } |
| var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } |
| var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } |
| var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } |
| var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } |
| var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } |
| var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } |
| var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } |
| </style> |
| <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> |
| <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> |
| <body class="h-entry"> |
| <div class="head"> |
| <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p> |
| <h1 class="p-name no-ref" id="title">WebAssembly Web API</h1> |
| <p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-04-12">12 April 2024</time></p> |
| <details open> |
| <summary>More details about this document</summary> |
| <div data-fill-with="spec-metadata"> |
| <dl> |
| <dt>This version: |
| <dd><a class="u-url" href="https://webassembly.github.io/spec/web-api/">https://webassembly.github.io/spec/web-api/</a> |
| <dt>Latest published version: |
| <dd><a href="https://www.w3.org/TR/wasm-web-api-2/">https://www.w3.org/TR/wasm-web-api-2/</a> |
| <dt>Feedback: |
| <dd><a href="https://github.com/WebAssembly/spec/issues">GitHub</a> |
| <dt class="editor">Editor: |
| <dd class="editor p-author h-card vcard" data-editor-id="46309"><span class="p-name fn">Ms2ger</span> (<span class="p-org org">Igalia</span>) |
| <dt>Issue Tracking: |
| <dd><a href="https://github.com/WebAssembly/spec/labels/wasm-web-api-2">GitHub Issues</a> |
| </dl> |
| </div> |
| </details> |
| <div data-fill-with="warning"></div> |
| <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. </p> |
| <hr title="Separator for header"> |
| </div> |
| <div class="p-summary" data-fill-with="abstract"> |
| <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> |
| <p>This document describes the integration of WebAssembly with the broader web platform.</p> |
| This is part of a collection of related documents: |
| the <a href="https://www.w3.org/TR/wasm-core/">Core WebAssembly Specification</a>, |
| the <a href="https://www.w3.org/TR/wasm-js-api/">WebAssembly JS Interface</a>, |
| and the <a href="https://www.w3.org/TR/wasm-web-api/">WebAssembly Web API</a>. |
| </div> |
| <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2> |
| <div data-fill-with="status"> |
| <p> This is a public copy of the editors’ draft. |
| It is provided for discussion only and may change at any moment. |
| Its publication here does not imply endorsement of its contents by W3C. |
| Don’t cite this document other than as work in progress. </p> |
| <p> <a href="https://github.com/WebAssembly/spec/issues">GitHub Issues</a> are preferred for discussion of this specification. |
| All issues and comments are <a href="https://github.com/WebAssembly/spec/issues?utf8=%E2%9C%93&q=is%3Aissue++">archived</a>. </p> |
| <p> This document was produced by the <a href="https://www.w3.org/groups/wg/wasm">WebAssembly Working Group</a>. </p> |
| <p> This document was produced by a group operating under |
| the <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/">W3C Patent Policy</a>. |
| W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/101196/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; |
| that page also includes instructions for disclosing a patent. |
| An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p> |
| <p> This document is governed by the <a href="https://www.w3.org/2023/Process-20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </p> |
| <p></p> |
| </div> |
| <div data-fill-with="at-risk"></div> |
| <nav data-fill-with="table-of-contents" id="toc"> |
| <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> |
| <ol class="toc" role="directory"> |
| <li><a href="#streaming-modules"><span class="secno">1</span> <span class="content">Streaming Module Compilation and Instantiation</span></a> |
| <li><a href="#serialization"><span class="secno">2</span> <span class="content">Serialization</span></a> |
| <li><a href="#conventions"><span class="secno">3</span> <span class="content">Developer-Facing Display Conventions</span></a> |
| <li><a href="#mediaType"><span class="secno">4</span> <span class="content">Media-type Registration</span></a> |
| <li> |
| <a href="#w3c-conformance"><span class="secno"></span> <span class="content">Conformance</span></a> |
| <ol class="toc"> |
| <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content">Document conventions</span></a> |
| <li><a href="#w3c-conformant-algorithms"><span class="secno"></span> <span class="content">Conformant Algorithms</span></a> |
| </ol> |
| <li> |
| <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> |
| <ol class="toc"> |
| <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> |
| <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> |
| </ol> |
| <li> |
| <a href="#references"><span class="secno"></span> <span class="content">References</span></a> |
| <ol class="toc"> |
| <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> |
| </ol> |
| <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a> |
| </ol> |
| </nav> |
| <main> |
| <p>This document builds off of the WebAssembly specification <a data-link-type="biblio" href="#biblio-webassembly" title="WebAssembly Core Specification">[WEBASSEMBLY]</a> and the WebAssembly JavaScript embedding <a data-link-type="biblio" href="#biblio-wasmjs" title="WebAssembly JS Integration Specification">[WASMJS]</a>.</p> |
| <h2 class="heading settled" data-level="1" id="streaming-modules"><span class="secno">1. </span><span class="content">Streaming Module Compilation and Instantiation</span><a class="self-link" href="#streaming-modules"></a></h2> |
| <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)] |
| <c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://webassembly.github.io/spec/js-api/#namespacedef-webassembly" id="ref-for-namespacedef-webassembly"><c- g>WebAssembly</c-></a> { |
| <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://webassembly.github.io/spec/js-api/#module" id="ref-for-module"><c- n>Module</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-webassembly-compilestreaming" id="ref-for-dom-webassembly-compilestreaming"><c- g>compileStreaming</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise①"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://fetch.spec.whatwg.org/#response" id="ref-for-response"><c- n>Response</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="WebAssembly/compileStreaming(source)" data-dfn-type="argument" data-export id="dom-webassembly-compilestreaming-source-source"><code><c- g>source</c-></code></dfn>); |
| <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise②"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://webassembly.github.io/spec/js-api/#dictdef-webassemblyinstantiatedsource" id="ref-for-dictdef-webassemblyinstantiatedsource"><c- n>WebAssemblyInstantiatedSource</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-webassembly-instantiatestreaming" id="ref-for-dom-webassembly-instantiatestreaming"><c- g>instantiateStreaming</c-></a>( |
| <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise③"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://fetch.spec.whatwg.org/#response" id="ref-for-response①"><c- n>Response</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="WebAssembly/instantiateStreaming(source, importObject), WebAssembly/instantiateStreaming(source)" data-dfn-type="argument" data-export id="dom-webassembly-instantiatestreaming-source-importobject-source"><code><c- g>source</c-></code></dfn>, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="WebAssembly/instantiateStreaming(source, importObject), WebAssembly/instantiateStreaming(source)" data-dfn-type="argument" data-export id="dom-webassembly-instantiatestreaming-source-importobject-importobject"><code><c- g>importObject</c-></code></dfn>); |
| }; |
| </pre> |
| <div class="algorithm" data-algorithm="compileStreaming(source)" data-algorithm-for="WebAssembly"> The <dfn class="dfn-paneled idl-code" data-dfn-for="WebAssembly" data-dfn-type="method" data-export id="dom-webassembly-compilestreaming"><code>compileStreaming(<var>source</var>)</code></dfn> method, when invoked, returns the result of <a data-link-type="dfn" href="#compile-a-potential-webassembly-response" id="ref-for-compile-a-potential-webassembly-response">compiling a potential WebAssembly response</a> with <var>source</var>. </div> |
| <div class="algorithm" data-algorithm="instantiateStreaming(source, importObject)" data-algorithm-for="WebAssembly"> |
| The <dfn class="dfn-paneled idl-code" data-dfn-for="WebAssembly" data-dfn-type="method" data-export data-lt="instantiateStreaming(source, importObject)|instantiateStreaming(source)" id="dom-webassembly-instantiatestreaming"><code>instantiateStreaming(<var>source</var>, <var>importObject</var>)</code></dfn> method, when invoked, performs the following steps: |
| <ol> |
| <li data-md> |
| <p>Let <var>promiseOfModule</var> be the result of <a data-link-type="dfn" href="#compile-a-potential-webassembly-response" id="ref-for-compile-a-potential-webassembly-response①">compiling a potential WebAssembly response</a> with <var>source</var>.</p> |
| <li data-md> |
| <p>Return the result of <a data-link-type="dfn" href="https://webassembly.github.io/spec/js-api/#instantiate-a-promise-of-a-module" id="ref-for-instantiate-a-promise-of-a-module">instantiating the promise of a module</a> <var>promiseOfModule</var> with imports <var>importObject</var>.</p> |
| </ol> |
| </div> |
| <div class="algorithm" data-algorithm="compile a potential WebAssembly response"> |
| To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="compile-a-potential-webassembly-response">compile a potential WebAssembly response</dfn> with a promise of a <code class="idl"><a data-link-type="idl" href="https://fetch.spec.whatwg.org/#response" id="ref-for-response②">Response</a></code> <var>source</var>, perform the following steps: |
| <p class="note" role="note"><span class="marker">Note:</span> This algorithm accepts a <code class="idl"><a data-link-type="idl" href="https://fetch.spec.whatwg.org/#response" id="ref-for-response③">Response</a></code> object, or a |
| promise for one, and compiles and instantiates the resulting bytes of the response. This compilation |
| can be performed in the background and in a streaming manner. If the <code class="idl"><a data-link-type="idl" href="https://fetch.spec.whatwg.org/#response" id="ref-for-response④">Response</a></code> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/#cors-same-origin" id="ref-for-cors-same-origin">CORS-same-origin</a>, does not represent an <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#ok-status" id="ref-for-ok-status">ok status</a>, or does not match the <code>`application/wasm`</code> MIME type, the returned promise will be rejected with a <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror">TypeError</a></code>; if |
| compilation or instantiation fails, the returned promise will be rejected with a <code class="idl"><a data-link-type="idl" href="https://webassembly.github.io/spec/js-api/#exceptiondef-compileerror" id="ref-for-exceptiondef-compileerror">CompileError</a></code> or other relevant error type, depending on the cause of failure.</p> |
| <ol> |
| <li data-md> |
| <p>Let <var>returnValue</var> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-new-promise" id="ref-for-a-new-promise">a new promise</a></p> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#upon-fulfillment" id="ref-for-upon-fulfillment">Upon fulfillment</a> of <var>source</var> with value <var>unwrappedSource</var>:</p> |
| <ol> |
| <li data-md> |
| <p>Let <var>response</var> be <var>unwrappedSource</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-response" id="ref-for-concept-response-response">response</a>.</p> |
| <li data-md> |
| <p>Let <var>mimeType</var> be the result of <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-header-list-get" id="ref-for-concept-header-list-get">getting</a> <code>`Content-Type`</code> from <var>response</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-header-list" id="ref-for-concept-response-header-list">header list</a>.</p> |
| <li data-md> |
| <p>If <var>mimeType</var> is null, reject <var>returnValue</var> with a <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror①">TypeError</a></code> and abort these substeps.</p> |
| <li data-md> |
| <p>Remove all <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#http-tab-or-space-byte" id="ref-for-http-tab-or-space-byte">HTTP tab or space byte</a> from the start and end of <var>mimeType</var>.</p> |
| <li data-md> |
| <p>If <var>mimeType</var> is not a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#byte-case-insensitive" id="ref-for-byte-case-insensitive">byte-case-insensitive</a> match for <code>`application/wasm`</code>, reject <var>returnValue</var> with a <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror②">TypeError</a></code> and abort these substeps.</p> |
| <p class="note" role="note"><span class="marker">Note:</span> extra parameters are not allowed, including the empty <code>`application/wasm;`</code>.</p> |
| <li data-md> |
| <p>If <var>response</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/#cors-same-origin" id="ref-for-cors-same-origin①">CORS-same-origin</a>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject">reject</a> <var>returnValue</var> with a <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror③">TypeError</a></code> and abort these substeps.</p> |
| <li data-md> |
| <p>If <var>response</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-status" id="ref-for-concept-response-status">status</a> is not an <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#ok-status" id="ref-for-ok-status①">ok status</a>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject①">reject</a> <var>returnValue</var> with a <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror④">TypeError</a></code> and abort these substeps.</p> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-body-consume-body" id="ref-for-concept-body-consume-body">Consume</a> <var>response</var>’s body as an <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-arraybuffer-objects" id="ref-for-sec-arraybuffer-objects">ArrayBuffer</a></code>, and let <var>bodyPromise</var> be the result.</p> |
| <p class="note" role="note"><span class="marker">Note:</span> Although it is specified here that the response is consumed entirely before compilation proceeds, that is purely for ease of specification; implementations are likely to instead perform processing in a streaming fashion. The difference is unobservable, and thus the simpler model is specified. </p> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#upon-fulfillment" id="ref-for-upon-fulfillment①">Upon fulfillment</a> of <var>bodyPromise</var> with value <var>bodyArrayBuffer</var>:</p> |
| <ol> |
| <li data-md> |
| <p>Let <var>stableBytes</var> be a <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-get-buffer-source-copy" id="ref-for-dfn-get-buffer-source-copy">copy of the bytes held by the buffer</a> <var>bodyArrayBuffer</var>.</p> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webassembly.github.io/spec/js-api/#asynchronously-compile-a-webassembly-module" id="ref-for-asynchronously-compile-a-webassembly-module">Asynchronously compile the WebAssembly module</a> <var>stableBytes</var> using the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#networking-task-source" id="ref-for-networking-task-source">networking task source</a> and <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve">resolve</a> <var>returnValue</var> with the result.</p> |
| </ol> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#upon-rejection" id="ref-for-upon-rejection">Upon rejection</a> of <var>bodyPromise</var> with reason <var>reason</var>:</p> |
| <ol> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject②">Reject</a> <var>returnValue</var> with <var>reason</var>.</p> |
| </ol> |
| </ol> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#upon-rejection" id="ref-for-upon-rejection①">Upon rejection</a> of <var>source</var> with reason <var>reason</var>:</p> |
| <ol> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject③">Reject</a> <var>returnValue</var> with <var>reason</var>.</p> |
| </ol> |
| <li data-md> |
| <p>Return <var>returnValue</var>.</p> |
| </ol> |
| </div> |
| <h2 class="heading settled" data-level="2" id="serialization"><span class="secno">2. </span><span class="content">Serialization</span><a class="self-link" href="#serialization"></a></h2> |
| <p>Web user agents must augment the <code class="idl"><a data-link-type="idl" href="https://webassembly.github.io/spec/js-api/#module" id="ref-for-module①">Module</a></code> interface with the <code>[<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable">Serializable</a>]</code> extended attribute.</p> |
| <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps" id="ref-for-serialization-steps">serialization steps</a>, given <var>value</var>, <var>serialized</var>, and <var>forStorage</var>, are:</p> |
| <ol> |
| <li data-md> |
| <p>If <var>forStorage</var> is true, throw a "<a class="idl-code" data-link-type="exception" href="https://webidl.spec.whatwg.org/#datacloneerror" id="ref-for-datacloneerror">DataCloneError</a>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code>.</p> |
| <li data-md> |
| <p>Set <var>serialized</var>.[[Bytes]] to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization" id="ref-for-sub-serialization">sub-serialization</a> of <var>value</var>.[[Bytes]].</p> |
| <li data-md> |
| <p>Set <var>serialized</var>.[[AgentCluster]] to the <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#current-realm" id="ref-for-current-realm">current Realm</a>'s corresponding <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-agent-clusters" id="ref-for-sec-agent-clusters">agent cluster</a>.</p> |
| </ol> |
| <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps" id="ref-for-deserialization-steps">deserialization steps</a>, given <var>serialized</var>, <var>value</var>, and <var>targetRealm</var> are:</p> |
| <ol> |
| <li data-md> |
| <p>Let <var>bytes</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization" id="ref-for-sub-deserialization">sub-deserialization</a> of <var>serialized</var>.[[Bytes]].</p> |
| <li data-md> |
| <p>Set <var>value</var>.[[Bytes]] to <var>bytes</var>.</p> |
| <li data-md> |
| <p>If <var>targetRealm</var>’s corresponding <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-agent-clusters" id="ref-for-sec-agent-clusters①">agent cluster</a> is not <var>serialized</var>.[[AgentCluster]], then throw a "<a class="idl-code" data-link-type="exception" href="https://webidl.spec.whatwg.org/#datacloneerror" id="ref-for-datacloneerror①">DataCloneError</a>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code>.</p> |
| <li data-md> |
| <p><a data-link-type="dfn" href="https://webassembly.github.io/spec/js-api/#compile-a-webassembly-module" id="ref-for-compile-a-webassembly-module">Compile a WebAssembly module</a> from <var>bytes</var> and set <var>value</var>.[[Module]] to the result.</p> |
| </ol> |
| <p>Engines should attempt to share/reuse internal compiled code when performing |
| a structured serialization, although in corner cases like CPU upgrade or browser |
| update, this might not be possible and full recompilation may be necessary.</p> |
| <p class="note" role="note"><span class="marker">Note:</span> The semantics of a structured serialization is as-if the binary source, from which the <code class="idl"><a data-link-type="idl" href="https://webassembly.github.io/spec/js-api/#module" id="ref-for-module②">Module</a></code> was compiled, is serialized, then deserialized, and recompiled into the target realm. |
| Given the above engine optimizations, structured serialization provides developers |
| explicit control over both compiled-code caching and cross-window/worker code |
| sharing.</p> |
| <h2 class="heading settled" data-level="3" id="conventions"><span class="secno">3. </span><span class="content">Developer-Facing Display Conventions</span><a class="self-link" href="#conventions"></a></h2> |
| <p><em>This section is non-normative.</em></p> |
| <p>Browsers, JavaScript engines, and offline tools have common ways of referring to |
| JavaScript artifacts and language constructs. For example, locations in |
| JavaScript source code are printed in stack traces or error messages, and are |
| represented naturally as decimal-format lines and columns in text files. Names |
| of functions and variables are taken directly from the sources. Therefore (for |
| example) even though the exact format of implementation-dependent stack trace |
| strings does not always match, the locations are easily understandable and the |
| same across browsers.</p> |
| <p>To achieve the same goal of a common representation for WebAssembly constructs, the |
| following conventions are adopted.</p> |
| <p>A WebAssembly location is a reference to a particular instruction in the binary, and may be |
| displayed by a browser or engine in similar contexts as JavaScript source locations. |
| It has the following format:</p> |
| <p><code>${url}:wasm-function[${funcIndex}]:${pcOffset}</code></p> |
| <p>Where</p> |
| <ul> |
| <li data-md> |
| <p><code>${url}</code> is the URL associated with the module, if applicable (see notes).</p> |
| <li data-md> |
| <p><code>${funcIndex}</code> is the <a data-link-type="dfn" href="https://webassembly.github.io/spec/core/syntax/modules.html#syntax-funcidx" id="ref-for-syntax-funcidx">function index</a> relative to the module.</p> |
| <li data-md> |
| <p><code>${pcOffset}</code> is the offset in the module binary of the first byte of the instruction, printed in hexadecimal with lower-case digits, with a leading <code>0x</code> prefix.</p> |
| </ul> |
| <p>Notes:</p> |
| <ul> |
| <li data-md> |
| <p>The URL field may be interpreted differently depending on the |
| context. When the response-based |
| instantiation <a href="#streaming-modules">API</a> is used in a |
| browser, the associated URL should be used; or when the <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-arraybuffer-objects" id="ref-for-sec-arraybuffer-objects①">ArrayBuffer</a></code>-based instantiation <a data-link-type="dfn" href="https://webassembly.github.io/spec/js-api/#dom-webassembly-instantiate" id="ref-for-dom-webassembly-instantiate">API</a> is used, the browser should represent |
| the location of the API call. This kind of instantiation is analogous to |
| executing JavaScript using <code>eval</code>; therefore if the browser has an existing |
| method to represent the location of the <code>eval</code> call it can use a similar |
| one for <code>WebAssembly.instantiate</code>. For example if the browser uses <code>foo.js line 10 > eval</code> or <code>eval at bar (foo.js:10:3)</code> for <code>eval</code>, it could |
| use <code>foo.js line 10 > WebAssembly.instantiate</code> or <code>WebAssembly.instantiate at bar (foo.js:10:3)</code>, respectively. |
| Offline tools may use a filename instead.</p> |
| <li data-md> |
| <p>Using hexadecimal for module offsets matches common conventions in native tools |
| such as <code>objdump</code> (where addresses are printed in hex) and makes them visually |
| distinct from JavaScript line numbers. Other numbers are represented in decimal.</p> |
| </ul> |
| <p>While the "name" property of an <a data-link-type="dfn" href="https://webassembly.github.io/spec/js-api/#exported-function" id="ref-for-exported-function">Exported Function</a> instance |
| is specified by the <a data-link-type="biblio" href="#biblio-wasmjs" title="WebAssembly JS Integration Specification">JS API</a>, synthesized function names are also |
| displayed in other contexts like call stacks in debuggers and string representations |
| of stack traces. |
| If a WebAssembly module contains a <a data-link-type="dfn" href="https://webassembly.github.io/spec/core/appendix/custom.html?highlight=name%20section#binary-namesec" id="ref-for-binary-namesec">name section</a>, |
| these names should be used to synthesize a function name as follows:</p> |
| <ul> |
| <li data-md> |
| <p>If a function name subsection is present, the displayed name should be <code>${module_name}.${function_name}</code> or <code>${function_name}</code>, depending on whether the module name is present.</p> |
| <li data-md> |
| <p>Otherwise, the output can be context-dependent:</p> |
| <ul> |
| <li data-md> |
| <p>If the function name is shown alongside its location in a stack trace, then just the module name (if present) or an empty string can be used (because the function index is already in the location).</p> |
| <li data-md> |
| <p>Otherwise, <code>${module_name}.wasm-function[${funcIndex}]</code> or <code>wasm-function[${funcIndex}]</code> should be used to convey the function index.</p> |
| </ul> |
| </ul> |
| <p>Note that this document does not specify the full format of strings such as |
| stack frame representations; this allows engines to continue using their |
| existing formats for JavaScript (which existing code may already be depending |
| on) while still printing WebAssembly frames in a format consistent with |
| JavaScript.</p> |
| <h2 class="heading settled" data-level="4" id="mediaType"><span class="secno">4. </span><span class="content">Media-type Registration</span><a class="self-link" href="#mediaType"></a></h2> |
| <p>This section will be submitted to the Internet Engineering Steering Group (IESG) for |
| review, approval, and registration with IANA.</p> |
| <p>application/wasm</p> |
| <dl> |
| <dt>Type Name: |
| <dd>application |
| <dt>Subtype Name: |
| <dd>wasm |
| <dt>Required Parameters: |
| <dd>None |
| <dt>Optional Parameters: |
| <dd>None |
| <dt>Encoding Considerations: |
| <dd>binary |
| <dt>Security Considerations: |
| <dd> |
| <p>WebAssembly is a standard, a safe, portable, low-level code format. The |
| security considerations associated with executing WebAssembly code are |
| described in https://www.w3.org/TR/wasm-core/#security-considerations.</p> |
| <p>The WebAssembly format includes no integrity or privacy protection. If |
| such protection is needed it must be provided externally, e.g., through |
| the use of HTTPS.</p> |
| <dt>Interoperability Considerations: |
| <dd>See WebAssembly Core Conformance<br> https://www.w3.org/TR/wasm-core/#conformance |
| <dt>Published specification: |
| <dd>https://www.w3.org/TR/wasm-core-1/ |
| https://www.w3.org/TR/wasm-js-api-1/ |
| https://www.w3.org/TR/wasm-web-api-1/ |
| <dt>Application Usage: |
| <dd>The application/wasm media type is intended for use as the type used to |
| describe WebAssembly files when sent over HTTP to be executed by browsers, |
| which is a common scenario. Additionally, the type is used by several |
| WebAssembly runtimes that take advantage of the safety and portability |
| while targeting efficient execution and compact representation. |
| <dt>Fragment Identifier Considerations: |
| <dd>None |
| <dt>Restrictions on usage: |
| <dd>None |
| <dt>Provisional Registrations: |
| <dd>N/A |
| <dt>Additional information: |
| <dd> |
| <dl> |
| <dt>Deprecated alias names for this type: |
| <dd>None |
| <dt>Magic number(s): |
| <dd>0x00 0x61 0x73 0x6D |
| <dt>File extension(s): |
| <dd>.wasm |
| <dt>Macintosh file type code(s): |
| <dd>None |
| <dt>Object Identifier(s) or OID(s): |
| <dd>None |
| </dl> |
| <dt>Intended usage: |
| <dd>Common |
| <dt>Other Information & Comments: |
| <dd>Common |
| <dt>Contact Person: |
| <dd> |
| <dl> |
| <dt>Contact Name: |
| <dd>Eric Prud’hommeaux |
| <dt>Contact Email Address: |
| <dd>eric@w3.org |
| <dt>Author/Change Controller: |
| <dd>W3C |
| </dl> |
| </dl> |
| </main> |
| <div data-fill-with="conformance"> |
| <h2 class="no-ref no-num heading settled" id="w3c-conformance"><span class="content">Conformance</span><a class="self-link" href="#w3c-conformance"></a></h2> |
| <h3 class="no-ref no-num heading settled" id="w3c-conventions"><span class="content">Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3> |
| <p>Conformance requirements are expressed |
| with a combination of descriptive assertions |
| and RFC 2119 terminology. |
| The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” |
| in the normative parts of this document |
| are to be interpreted as described in RFC 2119. |
| However, for readability, |
| these words do not appear in all uppercase letters in this specification. </p> |
| <p>All of the text of this specification is normative |
| except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> </p> |
| <p>Examples in this specification are introduced with the words “for example” |
| or are set apart from the normative text |
| with <code>class="example"</code>, |
| like this: </p> |
| <div class="example" id="w3c-example"> |
| <a class="self-link" href="#w3c-example"></a> |
| <p>This is an example of an informative example. </p> |
| </div> |
| <p>Informative notes begin with the word “Note” |
| and are set apart from the normative text |
| with <code>class="note"</code>, |
| like this: </p> |
| <p class="note" role="note">Note, this is an informative note.</p> |
| <section> |
| <h3 class="no-ref no-num heading settled" id="w3c-conformant-algorithms"><span class="content">Conformant Algorithms</span><a class="self-link" href="#w3c-conformant-algorithms"></a></h3> |
| <p>Requirements phrased in the imperative as part of algorithms |
| (such as "strip any leading space characters" |
| or "return false and abort these steps") |
| are to be interpreted with the meaning of the key word |
| ("must", "should", "may", etc) |
| used in introducing the algorithm. </p> |
| <p>Conformance requirements phrased as algorithms or specific steps |
| can be implemented in any manner, |
| so long as the end result is equivalent. |
| In particular, the algorithms defined in this specification |
| are intended to be easy to understand |
| and are not intended to be performant. |
| Implementers are encouraged to optimize. </p> |
| </section> |
| </div> |
| <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> |
| <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> |
| <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> |
| <ul class="index"> |
| <li><a href="#compile-a-potential-webassembly-response">compile a potential WebAssembly response</a><span>, in § 1</span> |
| <li><a href="#dom-webassembly-compilestreaming">compileStreaming(source)</a><span>, in § 1</span> |
| <li><a href="#dom-webassembly-instantiatestreaming">instantiateStreaming(source)</a><span>, in § 1</span> |
| <li><a href="#dom-webassembly-instantiatestreaming">instantiateStreaming(source, importObject)</a><span>, in § 1</span> |
| </ul> |
| <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> |
| <ul class="index"> |
| <li> |
| <a data-link-type="biblio">[ECMA-262]</a> defines the following terms: |
| <ul> |
| <li><span class="dfn-paneled" id="f17862f0">ArrayBuffer</span> |
| <li><span class="dfn-paneled" id="58788f9d">TypeError</span> |
| <li><span class="dfn-paneled" id="f6e4cbfd">agent cluster</span> |
| <li><span class="dfn-paneled" id="b107f911">current realm</span> |
| </ul> |
| <li> |
| <a data-link-type="biblio">[FETCH]</a> defines the following terms: |
| <ul> |
| <li><span class="dfn-paneled" id="08a12aad">Response</span> |
| <li><span class="dfn-paneled" id="13c2b84c">consume body</span> |
| <li><span class="dfn-paneled" id="d47d0690">get</span> |
| <li><span class="dfn-paneled" id="f7b00a8b">header list</span> |
| <li><span class="dfn-paneled" id="ba6e4111">http tab or space byte</span> |
| <li><span class="dfn-paneled" id="a27468c5">ok status</span> |
| <li><span class="dfn-paneled" id="e3201629">response</span> |
| <li><span class="dfn-paneled" id="a1d47575">status</span> |
| </ul> |
| <li> |
| <a data-link-type="biblio">[HTML]</a> defines the following terms: |
| <ul> |
| <li><span class="dfn-paneled" id="eb5c4be3">Serializable</span> |
| <li><span class="dfn-paneled" id="c4099679">cors-same-origin</span> |
| <li><span class="dfn-paneled" id="888d7c65">deserialization steps</span> |
| <li><span class="dfn-paneled" id="b6ae4501">networking task source</span> |
| <li><span class="dfn-paneled" id="f32dc6c1">serialization steps</span> |
| <li><span class="dfn-paneled" id="c187d599">sub-deserialization</span> |
| <li><span class="dfn-paneled" id="d76ab844">sub-serialization</span> |
| </ul> |
| <li> |
| <a data-link-type="biblio">[INFRA]</a> defines the following terms: |
| <ul> |
| <li><span class="dfn-paneled" id="970896d2">byte-case-insensitive</span> |
| </ul> |
| <li> |
| <a data-link-type="biblio">[WASMJS]</a> defines the following terms: |
| <ul> |
| <li><span class="dfn-paneled" id="dd57410d">CompileError</span> |
| <li><span class="dfn-paneled" id="29228fdf">Module</span> |
| <li><span class="dfn-paneled" id="9feefb27">WebAssembly</span> |
| <li><span class="dfn-paneled" id="ba9b32c1">WebAssemblyInstantiatedSource</span> |
| <li><span class="dfn-paneled" id="70d2cdbd">asynchronously compile a webassembly module</span> |
| <li><span class="dfn-paneled" id="8beb99bd">compile a webassembly module</span> |
| <li><span class="dfn-paneled" id="72f9eaed">exported function</span> |
| <li><span class="dfn-paneled" id="275fa0e6">instantiate</span> |
| <li><span class="dfn-paneled" id="1f72c462">instantiate a promise of a module</span> |
| </ul> |
| <li> |
| <a data-link-type="biblio">[WEBASSEMBLY]</a> defines the following terms: |
| <ul> |
| <li><span class="dfn-paneled" id="1295a79f">function index</span> |
| <li><span class="dfn-paneled" id="0bb5940b">name section</span> |
| </ul> |
| <li> |
| <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: |
| <ul> |
| <li><span class="dfn-paneled" id="dca2de17">DOMException</span> |
| <li><span class="dfn-paneled" id="d54f5897">DataCloneError</span> |
| <li><span class="dfn-paneled" id="889e932f">Exposed</span> |
| <li><span class="dfn-paneled" id="bdbd19d1">Promise</span> |
| <li><span class="dfn-paneled" id="dacde8b5">a new promise</span> |
| <li><span class="dfn-paneled" id="92d13070">get a copy of the buffer source</span> |
| <li><span class="dfn-paneled" id="efd1ec5d">object</span> |
| <li><span class="dfn-paneled" id="b262501e">reject</span> |
| <li><span class="dfn-paneled" id="3b90bdcd">resolve</span> |
| <li><span class="dfn-paneled" id="24bd7d25">upon fulfillment</span> |
| <li><span class="dfn-paneled" id="f14ed351">upon rejection</span> |
| </ul> |
| </ul> |
| <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> |
| <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> |
| <dl> |
| <dt id="biblio-ecma-262">[ECMA-262] |
| <dd><a href="https://tc39.github.io/ecma262"><cite>ECMAScript® Language Specification</cite></a>. Current Editor's Draft. URL: <a href="https://tc39.github.io/ecma262">https://tc39.github.io/ecma262</a> |
| <dt id="biblio-fetch">[FETCH] |
| <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/"><cite>Fetch Standard</cite></a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a> |
| <dt id="biblio-html">[HTML] |
| <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> |
| <dt id="biblio-infra">[INFRA] |
| <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> |
| <dt id="biblio-rfc2119">[RFC2119] |
| <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> |
| <dt id="biblio-wasmjs">[WASMJS] |
| <dd><a href="https://webassembly.github.io/spec/js-api/"><cite>WebAssembly JS Integration Specification</cite></a>. Draft. URL: <a href="https://webassembly.github.io/spec/js-api/">https://webassembly.github.io/spec/js-api/</a> |
| <dt id="biblio-webassembly">[WEBASSEMBLY] |
| <dd><a href="https://webassembly.github.io/spec/core/"><cite>WebAssembly Core Specification</cite></a>. Draft. URL: <a href="https://webassembly.github.io/spec/core/">https://webassembly.github.io/spec/core/</a> |
| <dt id="biblio-webidl">[WEBIDL] |
| <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> |
| </dl> |
| <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2> |
| <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)] |
| <c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://webassembly.github.io/spec/js-api/#namespacedef-webassembly"><c- g>WebAssembly</c-></a> { |
| <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://webassembly.github.io/spec/js-api/#module"><c- n>Module</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-webassembly-compilestreaming"><c- g>compileStreaming</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://fetch.spec.whatwg.org/#response"><c- n>Response</c-></a>> <a href="#dom-webassembly-compilestreaming-source-source"><code><c- g>source</c-></code></a>); |
| <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://webassembly.github.io/spec/js-api/#dictdef-webassemblyinstantiatedsource"><c- n>WebAssemblyInstantiatedSource</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-webassembly-instantiatestreaming"><c- g>instantiateStreaming</c-></a>( |
| <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="https://fetch.spec.whatwg.org/#response"><c- n>Response</c-></a>> <a href="#dom-webassembly-instantiatestreaming-source-importobject-source"><code><c- g>source</c-></code></a>, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object"><c- b>object</c-></a> <a href="#dom-webassembly-instantiatestreaming-source-importobject-importobject"><code><c- g>importObject</c-></code></a>); |
| }; |
| |
| </pre> |
| <script>/* Boilerplate: script-dom-helper */ |
| "use strict"; |
| function query(sel) { return document.querySelector(sel); } |
| |
| function queryAll(sel) { return [...document.querySelectorAll(sel)]; } |
| |
| function iter(obj) { |
| if(!obj) return []; |
| var it = obj[Symbol.iterator]; |
| if(it) return it; |
| return Object.entries(obj); |
| } |
| |
| function mk(tagname, attrs, ...children) { |
| const el = document.createElement(tagname); |
| for(const [k,v] of iter(attrs)) { |
| if(k.slice(0,3) == "_on") { |
| const eventName = k.slice(3); |
| el.addEventListener(eventName, v); |
| } else if(k[0] == "_") { |
| // property, not attribute |
| el[k.slice(1)] = v; |
| } else { |
| if(v === false || v == null) { |
| continue; |
| } else if(v === true) { |
| el.setAttribute(k, ""); |
| continue; |
| } else { |
| el.setAttribute(k, v); |
| } |
| } |
| } |
| append(el, children); |
| return el; |
| } |
| |
| /* Create shortcuts for every known HTML element */ |
| [ |
| "a", |
| "abbr", |
| "acronym", |
| "address", |
| "applet", |
| "area", |
| "article", |
| "aside", |
| "audio", |
| "b", |
| "base", |
| "basefont", |
| "bdo", |
| "big", |
| "blockquote", |
| "body", |
| "br", |
| "button", |
| "canvas", |
| "caption", |
| "center", |
| "cite", |
| "code", |
| "col", |
| "colgroup", |
| "datalist", |
| "dd", |
| "del", |
| "details", |
| "dfn", |
| "dialog", |
| "div", |
| "dl", |
| "dt", |
| "em", |
| "embed", |
| "fieldset", |
| "figcaption", |
| "figure", |
| "font", |
| "footer", |
| "form", |
| "frame", |
| "frameset", |
| "head", |
| "header", |
| "h1", |
| "h2", |
| "h3", |
| "h4", |
| "h5", |
| "h6", |
| "hr", |
| "html", |
| "i", |
| "iframe", |
| "img", |
| "input", |
| "ins", |
| "kbd", |
| "label", |
| "legend", |
| "li", |
| "link", |
| "main", |
| "map", |
| "mark", |
| "meta", |
| "meter", |
| "nav", |
| "nobr", |
| "noscript", |
| "object", |
| "ol", |
| "optgroup", |
| "option", |
| "output", |
| "p", |
| "param", |
| "pre", |
| "progress", |
| "q", |
| "s", |
| "samp", |
| "script", |
| "section", |
| "select", |
| "small", |
| "source", |
| "span", |
| "strike", |
| "strong", |
| "style", |
| "sub", |
| "summary", |
| "sup", |
| "table", |
| "tbody", |
| "td", |
| "template", |
| "textarea", |
| "tfoot", |
| "th", |
| "thead", |
| "time", |
| "title", |
| "tr", |
| "u", |
| "ul", |
| "var", |
| "video", |
| "wbr", |
| "xmp", |
| ].forEach(tagname=>{ |
| mk[tagname] = (...args) => mk(tagname, ...args); |
| }); |
| |
| function* nodesFromChildList(children) { |
| for(const child of children.flat(Infinity)) { |
| if(child instanceof Node) { |
| yield child; |
| } else { |
| yield new Text(child); |
| } |
| } |
| } |
| function append(el, ...children) { |
| for(const child of nodesFromChildList(children)) { |
| if(el instanceof Node) el.appendChild(child); |
| else el.push(child); |
| } |
| return el; |
| } |
| |
| function insertAfter(el, ...children) { |
| for(const child of nodesFromChildList(children)) { |
| el.parentNode.insertBefore(child, el.nextSibling); |
| } |
| return el; |
| } |
| |
| function clearContents(el) { |
| el.innerHTML = ""; |
| return el; |
| } |
| |
| function parseHTML(markup) { |
| if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { |
| const doc = document.implementation.createHTMLDocument(""); |
| doc.documentElement.innerHTML = markup; |
| return doc; |
| } else { |
| const el = mk.template({}); |
| el.innerHTML = markup; |
| return el.content; |
| } |
| }</script> |
| <script>/* Boilerplate: script-dfn-panel */ |
| "use strict"; |
| { |
| let dfnPanelData = { |
| "08a12aad": {"dfnID":"08a12aad","dfnText":"Response","external":true,"refSections":[{"refs":[{"id":"ref-for-response"},{"id":"ref-for-response\u2460"},{"id":"ref-for-response\u2461"},{"id":"ref-for-response\u2462"},{"id":"ref-for-response\u2463"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#response"}, |
| "0bb5940b": {"dfnID":"0bb5940b","dfnText":"name section","external":true,"refSections":[{"refs":[{"id":"ref-for-binary-namesec"}],"title":"3. Developer-Facing Display Conventions"}],"url":"https://webassembly.github.io/spec/core/appendix/custom.html?highlight=name%20section#binary-namesec"}, |
| "1295a79f": {"dfnID":"1295a79f","dfnText":"function index","external":true,"refSections":[{"refs":[{"id":"ref-for-syntax-funcidx"}],"title":"3. Developer-Facing Display Conventions"}],"url":"https://webassembly.github.io/spec/core/syntax/modules.html#syntax-funcidx"}, |
| "13c2b84c": {"dfnID":"13c2b84c","dfnText":"consume body","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-body-consume-body"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#concept-body-consume-body"}, |
| "1f72c462": {"dfnID":"1f72c462","dfnText":"instantiate a promise of a module","external":true,"refSections":[{"refs":[{"id":"ref-for-instantiate-a-promise-of-a-module"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webassembly.github.io/spec/js-api/#instantiate-a-promise-of-a-module"}, |
| "24bd7d25": {"dfnID":"24bd7d25","dfnText":"upon fulfillment","external":true,"refSections":[{"refs":[{"id":"ref-for-upon-fulfillment"},{"id":"ref-for-upon-fulfillment\u2460"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#upon-fulfillment"}, |
| "275fa0e6": {"dfnID":"275fa0e6","dfnText":"instantiate","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-webassembly-instantiate"}],"title":"3. Developer-Facing Display Conventions"}],"url":"https://webassembly.github.io/spec/js-api/#dom-webassembly-instantiate"}, |
| "29228fdf": {"dfnID":"29228fdf","dfnText":"Module","external":true,"refSections":[{"refs":[{"id":"ref-for-module"}],"title":"1. Streaming Module Compilation and Instantiation"},{"refs":[{"id":"ref-for-module\u2460"},{"id":"ref-for-module\u2461"}],"title":"2. Serialization"}],"url":"https://webassembly.github.io/spec/js-api/#module"}, |
| "3b90bdcd": {"dfnID":"3b90bdcd","dfnText":"resolve","external":true,"refSections":[{"refs":[{"id":"ref-for-resolve"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#resolve"}, |
| "58788f9d": {"dfnID":"58788f9d","dfnText":"TypeError","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-native-error-types-used-in-this-standard-typeerror"},{"id":"ref-for-sec-native-error-types-used-in-this-standard-typeerror\u2460"},{"id":"ref-for-sec-native-error-types-used-in-this-standard-typeerror\u2461"},{"id":"ref-for-sec-native-error-types-used-in-this-standard-typeerror\u2462"},{"id":"ref-for-sec-native-error-types-used-in-this-standard-typeerror\u2463"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror"}, |
| "70d2cdbd": {"dfnID":"70d2cdbd","dfnText":"asynchronously compile a webassembly module","external":true,"refSections":[{"refs":[{"id":"ref-for-asynchronously-compile-a-webassembly-module"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webassembly.github.io/spec/js-api/#asynchronously-compile-a-webassembly-module"}, |
| "72f9eaed": {"dfnID":"72f9eaed","dfnText":"exported function","external":true,"refSections":[{"refs":[{"id":"ref-for-exported-function"}],"title":"3. Developer-Facing Display Conventions"}],"url":"https://webassembly.github.io/spec/js-api/#exported-function"}, |
| "888d7c65": {"dfnID":"888d7c65","dfnText":"deserialization steps","external":true,"refSections":[{"refs":[{"id":"ref-for-deserialization-steps"}],"title":"2. Serialization"}],"url":"https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps"}, |
| "889e932f": {"dfnID":"889e932f","dfnText":"Exposed","external":true,"refSections":[{"refs":[{"id":"ref-for-Exposed"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, |
| "8beb99bd": {"dfnID":"8beb99bd","dfnText":"compile a webassembly module","external":true,"refSections":[{"refs":[{"id":"ref-for-compile-a-webassembly-module"}],"title":"2. Serialization"}],"url":"https://webassembly.github.io/spec/js-api/#compile-a-webassembly-module"}, |
| "92d13070": {"dfnID":"92d13070","dfnText":"get a copy of the buffer source","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-get-buffer-source-copy"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#dfn-get-buffer-source-copy"}, |
| "970896d2": {"dfnID":"970896d2","dfnText":"byte-case-insensitive","external":true,"refSections":[{"refs":[{"id":"ref-for-byte-case-insensitive"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://infra.spec.whatwg.org/#byte-case-insensitive"}, |
| "9feefb27": {"dfnID":"9feefb27","dfnText":"WebAssembly","external":true,"refSections":[{"refs":[{"id":"ref-for-namespacedef-webassembly"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webassembly.github.io/spec/js-api/#namespacedef-webassembly"}, |
| "a1d47575": {"dfnID":"a1d47575","dfnText":"status","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-response-status"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#concept-response-status"}, |
| "a27468c5": {"dfnID":"a27468c5","dfnText":"ok status","external":true,"refSections":[{"refs":[{"id":"ref-for-ok-status"},{"id":"ref-for-ok-status\u2460"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#ok-status"}, |
| "b107f911": {"dfnID":"b107f911","dfnText":"current realm","external":true,"refSections":[{"refs":[{"id":"ref-for-current-realm"}],"title":"2. Serialization"}],"url":"https://tc39.github.io/ecma262/#current-realm"}, |
| "b262501e": {"dfnID":"b262501e","dfnText":"reject","external":true,"refSections":[{"refs":[{"id":"ref-for-reject"},{"id":"ref-for-reject\u2460"},{"id":"ref-for-reject\u2461"},{"id":"ref-for-reject\u2462"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#reject"}, |
| "b6ae4501": {"dfnID":"b6ae4501","dfnText":"networking task source","external":true,"refSections":[{"refs":[{"id":"ref-for-networking-task-source"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#networking-task-source"}, |
| "ba6e4111": {"dfnID":"ba6e4111","dfnText":"http tab or space byte","external":true,"refSections":[{"refs":[{"id":"ref-for-http-tab-or-space-byte"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#http-tab-or-space-byte"}, |
| "ba9b32c1": {"dfnID":"ba9b32c1","dfnText":"WebAssemblyInstantiatedSource","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-webassemblyinstantiatedsource"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webassembly.github.io/spec/js-api/#dictdef-webassemblyinstantiatedsource"}, |
| "bdbd19d1": {"dfnID":"bdbd19d1","dfnText":"Promise","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-promise"},{"id":"ref-for-idl-promise\u2460"},{"id":"ref-for-idl-promise\u2461"},{"id":"ref-for-idl-promise\u2462"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#idl-promise"}, |
| "c187d599": {"dfnID":"c187d599","dfnText":"sub-deserialization","external":true,"refSections":[{"refs":[{"id":"ref-for-sub-deserialization"}],"title":"2. Serialization"}],"url":"https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization"}, |
| "c4099679": {"dfnID":"c4099679","dfnText":"cors-same-origin","external":true,"refSections":[{"refs":[{"id":"ref-for-cors-same-origin"},{"id":"ref-for-cors-same-origin\u2460"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://html.spec.whatwg.org/#cors-same-origin"}, |
| "compile-a-potential-webassembly-response": {"dfnID":"compile-a-potential-webassembly-response","dfnText":"compile a potential WebAssembly response","external":false,"refSections":[{"refs":[{"id":"ref-for-compile-a-potential-webassembly-response"},{"id":"ref-for-compile-a-potential-webassembly-response\u2460"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"#compile-a-potential-webassembly-response"}, |
| "d47d0690": {"dfnID":"d47d0690","dfnText":"get","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-header-list-get"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#concept-header-list-get"}, |
| "d54f5897": {"dfnID":"d54f5897","dfnText":"DataCloneError","external":true,"refSections":[{"refs":[{"id":"ref-for-datacloneerror"},{"id":"ref-for-datacloneerror\u2460"}],"title":"2. Serialization"}],"url":"https://webidl.spec.whatwg.org/#datacloneerror"}, |
| "d76ab844": {"dfnID":"d76ab844","dfnText":"sub-serialization","external":true,"refSections":[{"refs":[{"id":"ref-for-sub-serialization"}],"title":"2. Serialization"}],"url":"https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization"}, |
| "dacde8b5": {"dfnID":"dacde8b5","dfnText":"a new promise","external":true,"refSections":[{"refs":[{"id":"ref-for-a-new-promise"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#a-new-promise"}, |
| "dca2de17": {"dfnID":"dca2de17","dfnText":"DOMException","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-DOMException"},{"id":"ref-for-idl-DOMException\u2460"}],"title":"2. Serialization"}],"url":"https://webidl.spec.whatwg.org/#idl-DOMException"}, |
| "dd57410d": {"dfnID":"dd57410d","dfnText":"CompileError","external":true,"refSections":[{"refs":[{"id":"ref-for-exceptiondef-compileerror"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webassembly.github.io/spec/js-api/#exceptiondef-compileerror"}, |
| "dom-webassembly-compilestreaming": {"dfnID":"dom-webassembly-compilestreaming","dfnText":"compileStreaming(source)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-webassembly-compilestreaming"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"#dom-webassembly-compilestreaming"}, |
| "dom-webassembly-compilestreaming-source-source": {"dfnID":"dom-webassembly-compilestreaming-source-source","dfnText":"source","external":false,"refSections":[],"url":"#dom-webassembly-compilestreaming-source-source"}, |
| "dom-webassembly-instantiatestreaming": {"dfnID":"dom-webassembly-instantiatestreaming","dfnText":"instantiateStreaming(source, importObject)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-webassembly-instantiatestreaming"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"#dom-webassembly-instantiatestreaming"}, |
| "dom-webassembly-instantiatestreaming-source-importobject-importobject": {"dfnID":"dom-webassembly-instantiatestreaming-source-importobject-importobject","dfnText":"importObject","external":false,"refSections":[],"url":"#dom-webassembly-instantiatestreaming-source-importobject-importobject"}, |
| "dom-webassembly-instantiatestreaming-source-importobject-source": {"dfnID":"dom-webassembly-instantiatestreaming-source-importobject-source","dfnText":"source","external":false,"refSections":[],"url":"#dom-webassembly-instantiatestreaming-source-importobject-source"}, |
| "e3201629": {"dfnID":"e3201629","dfnText":"response","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-response-response"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#concept-response-response"}, |
| "eb5c4be3": {"dfnID":"eb5c4be3","dfnText":"Serializable","external":true,"refSections":[{"refs":[{"id":"ref-for-serializable"}],"title":"2. Serialization"}],"url":"https://html.spec.whatwg.org/multipage/structured-data.html#serializable"}, |
| "efd1ec5d": {"dfnID":"efd1ec5d","dfnText":"object","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-object"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#idl-object"}, |
| "f14ed351": {"dfnID":"f14ed351","dfnText":"upon rejection","external":true,"refSections":[{"refs":[{"id":"ref-for-upon-rejection"},{"id":"ref-for-upon-rejection\u2460"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://webidl.spec.whatwg.org/#upon-rejection"}, |
| "f17862f0": {"dfnID":"f17862f0","dfnText":"ArrayBuffer","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-arraybuffer-objects"}],"title":"1. Streaming Module Compilation and Instantiation"},{"refs":[{"id":"ref-for-sec-arraybuffer-objects\u2460"}],"title":"3. Developer-Facing Display Conventions"}],"url":"https://tc39.github.io/ecma262/#sec-arraybuffer-objects"}, |
| "f32dc6c1": {"dfnID":"f32dc6c1","dfnText":"serialization steps","external":true,"refSections":[{"refs":[{"id":"ref-for-serialization-steps"}],"title":"2. Serialization"}],"url":"https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps"}, |
| "f6e4cbfd": {"dfnID":"f6e4cbfd","dfnText":"agent cluster","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-agent-clusters"},{"id":"ref-for-sec-agent-clusters\u2460"}],"title":"2. Serialization"}],"url":"https://tc39.github.io/ecma262/#sec-agent-clusters"}, |
| "f7b00a8b": {"dfnID":"f7b00a8b","dfnText":"header list","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-response-header-list"}],"title":"1. Streaming Module Compilation and Instantiation"}],"url":"https://fetch.spec.whatwg.org/#concept-response-header-list"}, |
| }; |
| |
| document.addEventListener("DOMContentLoaded", ()=>{ |
| genAllDfnPanels(); |
| |
| document.body.addEventListener("click", (e) => { |
| // If not handled already, just hide all dfn panels. |
| hideAllDfnPanels(); |
| }); |
| }); |
| |
| window.addEventListener("resize", () => { |
| // Pin any visible dfn panel |
| queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); |
| }); |
| |
| function genAllDfnPanels() { |
| for(const panelData of Object.values(dfnPanelData)) { |
| const dfnID = panelData.dfnID; |
| const dfn = document.getElementById(dfnID); |
| if(!dfn) { |
| console.log(`Can't find dfn#${dfnID}.`, panelData); |
| continue; |
| } |
| dfn.panelData = panelData; |
| insertDfnPopupAction(dfn); |
| } |
| } |
| |
| function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { |
| const dfnPanel = mk.aside({ |
| class: "dfn-panel on", |
| id: `infopanel-for-${dfnID}`, |
| "data-for": dfnID, |
| "aria-labelled-by":`infopaneltitle-for-${dfnID}`, |
| }, |
| mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, |
| `Info about the '${dfnText}' ${external?"external":""} reference.`), |
| mk.a({href:url, class:"dfn-link"}, url), |
| refSections.length == 0 ? [] : |
| mk.b({}, "Referenced in:"), |
| mk.ul({}, |
| ...refSections.map(section=> |
| mk.li({}, |
| ...section.refs.map((ref, refI)=> |
| [ |
| mk.a({ href: `#${ref.id}` }, |
| (refI == 0) ? section.title : `(${refI + 1})` |
| ), |
| " ", |
| ] |
| ), |
| ), |
| ), |
| ), |
| genLinkingSyntaxes(dfn), |
| ); |
| |
| dfnPanel.addEventListener('click', (event) => { |
| if (event.target.nodeName == 'A') { |
| scrollToTargetAndHighlight(event); |
| pinDfnPanel(dfnPanel); |
| } |
| event.stopPropagation(); |
| refocusOnTarget(event); |
| }); |
| dfnPanel.addEventListener('keydown', (event) => { |
| if(event.keyCode == 27) { // Escape key |
| hideDfnPanel({dfnPanel}); |
| event.stopPropagation(); |
| event.preventDefault(); |
| } |
| }); |
| |
| dfnPanel.dfn = dfn; |
| dfn.dfnPanel = dfnPanel; |
| return dfnPanel; |
| } |
| |
| |
| |
| function hideAllDfnPanels() { |
| // Delete the currently-active dfn panel. |
| queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); |
| } |
| |
| function showDfnPanel(dfn) { |
| hideAllDfnPanels(); // Only display one at a time. |
| |
| dfn.setAttribute("aria-expanded", "true"); |
| |
| const dfnPanel = genDfnPanel(dfn, dfn.panelData); |
| |
| // Give the dfn a unique tabindex, and then |
| // give all the tabbable panel bits successive indexes. |
| let tabIndex = 100; |
| dfn.tabIndex = tabIndex++; |
| const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); |
| for (const el of tabbable) { |
| el.tabIndex = tabIndex++; |
| } |
| |
| append(document.body, dfnPanel); |
| positionDfnPanel(dfnPanel); |
| } |
| |
| function positionDfnPanel(dfnPanel) { |
| const dfn = dfnPanel.dfn; |
| const dfnPos = getBounds(dfn); |
| dfnPanel.style.top = dfnPos.bottom + "px"; |
| dfnPanel.style.left = dfnPos.left + "px"; |
| |
| const panelPos = dfnPanel.getBoundingClientRect(); |
| const panelMargin = 8; |
| const maxRight = document.body.parentNode.clientWidth - panelMargin; |
| if (panelPos.right > maxRight) { |
| const overflowAmount = panelPos.right - maxRight; |
| const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); |
| dfnPanel.style.left = newLeft + "px"; |
| } |
| } |
| |
| function pinDfnPanel(dfnPanel) { |
| // Switch it to "activated" state, which pins it. |
| dfnPanel.classList.add("activated"); |
| dfnPanel.style.position = "fixed"; |
| dfnPanel.style.left = null; |
| dfnPanel.style.top = null; |
| } |
| |
| function hideDfnPanel({dfn, dfnPanel}) { |
| if(!dfnPanel) dfnPanel = dfn.dfnPanel; |
| if(!dfn) dfn = dfnPanel.dfn; |
| dfn.dfnPanel = undefined; |
| dfnPanel.dfn = undefined; |
| dfn.setAttribute("aria-expanded", "false"); |
| dfn.tabIndex = undefined; |
| dfnPanel.remove() |
| } |
| |
| function toggleDfnPanel(dfn) { |
| if(dfn.dfnPanel) { |
| hideDfnPanel(dfn); |
| } else { |
| showDfnPanel(dfn); |
| } |
| } |
| |
| function insertDfnPopupAction(dfn) { |
| dfn.setAttribute('role', 'button'); |
| dfn.setAttribute('aria-expanded', 'false') |
| dfn.tabIndex = 0; |
| dfn.classList.add('has-dfn-panel'); |
| dfn.addEventListener('click', (event) => { |
| toggleDfnPanel(dfn); |
| event.stopPropagation(); |
| }); |
| dfn.addEventListener('keypress', (event) => { |
| const kc = event.keyCode; |
| // 32->Space, 13->Enter |
| if(kc == 32 || kc == 13) { |
| toggleDfnPanel(dfn); |
| event.stopPropagation(); |
| event.preventDefault(); |
| } |
| }); |
| } |
| |
| function refocusOnTarget(event) { |
| const target = event.target; |
| setTimeout(() => { |
| // Refocus on the event.target element. |
| // This is needed after browser scrolls to the destination. |
| target.focus(); |
| }); |
| } |
| |
| // TODO: shared util |
| // Returns the root-level absolute position {left and top} of element. |
| function getBounds(el, relativeTo=document.body) { |
| const relativeRect = relativeTo.getBoundingClientRect(); |
| const elRect = el.getBoundingClientRect(); |
| const top = elRect.top - relativeRect.top; |
| const left = elRect.left - relativeRect.left; |
| return { |
| top, |
| left, |
| bottom: top + elRect.height, |
| right: left + elRect.width, |
| } |
| } |
| |
| function scrollToTargetAndHighlight(event) { |
| let hash = event.target.hash; |
| if (hash) { |
| hash = decodeURIComponent(hash.substring(1)); |
| const dest = document.getElementById(hash); |
| if (dest) { |
| dest.classList.add('highlighted'); |
| setTimeout(() => dest.classList.remove('highlighted'), 1000); |
| } |
| } |
| } |
| |
| // Functions, divided by link type, that wrap an autolink's |
| // contents with the appropriate outer syntax. |
| // Alternately, a string naming another type they format |
| // the same as. |
| function needsFor(type) { |
| switch(type) { |
| case "descriptor": |
| case "value": |
| case "element-attr": |
| case "attr-value": |
| case "element-state": |
| case "method": |
| case "constructor": |
| case "argument": |
| case "attribute": |
| case "const": |
| case "dict-member": |
| case "event": |
| case "enum-value": |
| case "stringifier": |
| case "serializer": |
| case "iterator": |
| case "maplike": |
| case "setlike": |
| case "state": |
| case "mode": |
| case "context": |
| case "facet": return true; |
| |
| default: return false; |
| } |
| } |
| function refusesFor(type) { |
| switch(type) { |
| case "property": |
| case "element": |
| case "interface": |
| case "namespace": |
| case "callback": |
| case "dictionary": |
| case "enum": |
| case "exception": |
| case "typedef": |
| case "http-header": |
| case "permission": return true; |
| |
| default: return false; |
| } |
| } |
| function linkFormatterFromType(type) { |
| switch(type) { |
| case 'scheme': |
| case 'permission': |
| case 'dfn': return (text) => `[=${text}=]`; |
| |
| case 'abstract-op': return (text) => `[\$${text}\$]`; |
| |
| case 'function': |
| case 'at-rule': |
| case 'selector': |
| case 'value': return (text) => `''${text}''`; |
| |
| case 'http-header': return (text) => `[:${text}:]`; |
| |
| case 'interface': |
| case 'constructor': |
| case 'method': |
| case 'argument': |
| case 'attribute': |
| case 'callback': |
| case 'dictionary': |
| case 'dict-member': |
| case 'enum': |
| case 'enum-value': |
| case 'exception': |
| case 'const': |
| case 'typedef': |
| case 'stringifier': |
| case 'serializer': |
| case 'iterator': |
| case 'maplike': |
| case 'setlike': |
| case 'extended-attribute': |
| case 'event': |
| case 'idl': return (text) => `{{${text}}}`; |
| |
| case 'element-state': |
| case 'element-attr': |
| case 'attr-value': |
| case 'element': return (element) => `<{${element}}>`; |
| |
| case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; |
| |
| case 'type': return (text)=> `<<${text}>>`; |
| |
| case 'descriptor': |
| case 'property': return (text) => `'${text}'`; |
| |
| default: return; |
| }; |
| }; |
| |
| function genLinkingSyntaxes(dfn) { |
| if(dfn.tagName != "DFN") return; |
| |
| const type = dfn.getAttribute('data-dfn-type'); |
| if(!type) { |
| console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); |
| return []; |
| } |
| |
| // Return a function that wraps link text based on the type |
| const linkFormatter = linkFormatterFromType(type); |
| if(!linkFormatter) { |
| console.log(`<dfn> has an unknown data-dfn-type:`, dfn); |
| return []; |
| } |
| |
| let ltAlts; |
| if(dfn.hasAttribute('data-lt')) { |
| ltAlts = dfn.getAttribute('data-lt') |
| .split("|") |
| .map(x=>x.trim()); |
| } else { |
| ltAlts = [dfn.textContent.trim()]; |
| } |
| if(type == "type") { |
| // lt of "<foo>", but "foo" is the interior; |
| // <<foo/bar>> is how you write it with a for, |
| // not <foo/<bar>> or whatever. |
| for(var i = 0; i < ltAlts.length; i++) { |
| const lt = ltAlts[i]; |
| const match = /<(.*)>/.exec(lt); |
| if(match) { ltAlts[i] = match[1]; } |
| } |
| } |
| |
| let forAlts; |
| if(dfn.hasAttribute('data-dfn-for')) { |
| forAlts = dfn.getAttribute('data-dfn-for') |
| .split(",") |
| .map(x=>x.trim()); |
| } else { |
| forAlts = ['']; |
| } |
| |
| let linkingSyntaxes = []; |
| if(!needsFor(type)) { |
| for(const lt of ltAlts) { |
| linkingSyntaxes.push(linkFormatter(lt)); |
| } |
| } |
| if(!refusesFor(type)) { |
| for(const f of forAlts) { |
| linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) |
| } |
| } |
| return [ |
| mk.b({}, 'Possible linking syntaxes:'), |
| mk.ul({}, |
| ...linkingSyntaxes.map(link => { |
| const copyLink = async () => |
| await navigator.clipboard.writeText(link); |
| return mk.li({}, |
| mk.div({ class: 'link-item' }, |
| mk.button({ |
| class: 'copy-icon', title: 'Copy', |
| type: 'button', |
| _onclick: copyLink, |
| tabindex: 0, |
| }, mk.span({ class: 'icon' }) ), |
| mk.span({}, link) |
| ) |
| ); |
| }) |
| ) |
| ]; |
| } |
| } |
| </script> |
| <script>/* Boilerplate: script-ref-hints */ |
| "use strict"; |
| { |
| let refsData = { |
| "#compile-a-potential-webassembly-response": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"wasm-web-api","spec":"wasm-web-api-2","status":"local","text":"compile a potential webassembly response","type":"dfn","url":"#compile-a-potential-webassembly-response"}, |
| "#dom-webassembly-compilestreaming": {"export":true,"for_":["WebAssembly"],"level":"2","normative":true,"shortname":"wasm-web-api","spec":"wasm-web-api-2","status":"local","text":"compileStreaming(source)","type":"method","url":"#dom-webassembly-compilestreaming"}, |
| "#dom-webassembly-instantiatestreaming": {"export":true,"for_":["WebAssembly"],"level":"2","normative":true,"shortname":"wasm-web-api","spec":"wasm-web-api-2","status":"local","text":"instantiateStreaming(source, importObject)","type":"method","url":"#dom-webassembly-instantiatestreaming"}, |
| "https://fetch.spec.whatwg.org/#concept-body-consume-body": {"export":true,"for_":[],"level":"","normative":true,"shortname":"fetch","spec":"fetch","status":"anchor-block","text":"consume body","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-body-consume-body"}, |
| "https://fetch.spec.whatwg.org/#concept-header-list-get": {"export":true,"for_":["header list"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"get","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-header-list-get"}, |
| "https://fetch.spec.whatwg.org/#concept-response-header-list": {"export":true,"for_":["response"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"header list","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-response-header-list"}, |
| "https://fetch.spec.whatwg.org/#concept-response-response": {"export":true,"for_":["Response"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"response","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-response-response"}, |
| "https://fetch.spec.whatwg.org/#concept-response-status": {"export":true,"for_":["response"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"status","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-response-status"}, |
| "https://fetch.spec.whatwg.org/#http-tab-or-space-byte": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"http tab or space byte","type":"dfn","url":"https://fetch.spec.whatwg.org/#http-tab-or-space-byte"}, |
| "https://fetch.spec.whatwg.org/#ok-status": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"ok status","type":"dfn","url":"https://fetch.spec.whatwg.org/#ok-status"}, |
| "https://fetch.spec.whatwg.org/#response": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"Response","type":"interface","url":"https://fetch.spec.whatwg.org/#response"}, |
| "https://html.spec.whatwg.org/#cors-same-origin": {"export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"cors-same-origin","type":"dfn","url":"https://html.spec.whatwg.org/#cors-same-origin"}, |
| "https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"deserialization steps","type":"dfn","url":"https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps"}, |
| "https://html.spec.whatwg.org/multipage/structured-data.html#serializable": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"Serializable","type":"extended-attribute","url":"https://html.spec.whatwg.org/multipage/structured-data.html#serializable"}, |
| "https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"serialization steps","type":"dfn","url":"https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps"}, |
| "https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"sub-deserialization","type":"dfn","url":"https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization"}, |
| "https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"sub-serialization","type":"dfn","url":"https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization"}, |
| "https://html.spec.whatwg.org/multipage/webappapis.html#networking-task-source": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"networking task source","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#networking-task-source"}, |
| "https://infra.spec.whatwg.org/#byte-case-insensitive": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"byte-case-insensitive","type":"dfn","url":"https://infra.spec.whatwg.org/#byte-case-insensitive"}, |
| "https://tc39.github.io/ecma262/#current-realm": {"export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"current realm","type":"dfn","url":"https://tc39.github.io/ecma262/#current-realm"}, |
| "https://tc39.github.io/ecma262/#sec-agent-clusters": {"export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"agent cluster","type":"dfn","url":"https://tc39.github.io/ecma262/#sec-agent-clusters"}, |
| "https://tc39.github.io/ecma262/#sec-arraybuffer-objects": {"export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"ArrayBuffer","type":"interface","url":"https://tc39.github.io/ecma262/#sec-arraybuffer-objects"}, |
| "https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror": {"export":true,"for_":["ECMAScript"],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"TypeError","type":"exception","url":"https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror"}, |
| "https://webassembly.github.io/spec/core/appendix/custom.html?highlight=name%20section#binary-namesec": {"export":true,"for_":[],"level":"","normative":true,"shortname":"webassembly","spec":"webassembly","status":"anchor-block","text":"name section","type":"dfn","url":"https://webassembly.github.io/spec/core/appendix/custom.html?highlight=name%20section#binary-namesec"}, |
| "https://webassembly.github.io/spec/core/syntax/modules.html#syntax-funcidx": {"export":true,"for_":[],"level":"","normative":true,"shortname":"webassembly","spec":"webassembly","status":"anchor-block","text":"function index","type":"dfn","url":"https://webassembly.github.io/spec/core/syntax/modules.html#syntax-funcidx"}, |
| "https://webassembly.github.io/spec/js-api/#asynchronously-compile-a-webassembly-module": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"asynchronously compile a webassembly module","type":"dfn","url":"https://webassembly.github.io/spec/js-api/#asynchronously-compile-a-webassembly-module"}, |
| "https://webassembly.github.io/spec/js-api/#compile-a-webassembly-module": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"compile a webassembly module","type":"dfn","url":"https://webassembly.github.io/spec/js-api/#compile-a-webassembly-module"}, |
| "https://webassembly.github.io/spec/js-api/#dictdef-webassemblyinstantiatedsource": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"WebAssemblyInstantiatedSource","type":"interface","url":"https://webassembly.github.io/spec/js-api/#dictdef-webassemblyinstantiatedsource"}, |
| "https://webassembly.github.io/spec/js-api/#dom-webassembly-instantiate": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"instantiate","type":"dfn","url":"https://webassembly.github.io/spec/js-api/#dom-webassembly-instantiate"}, |
| "https://webassembly.github.io/spec/js-api/#exceptiondef-compileerror": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"CompileError","type":"exception","url":"https://webassembly.github.io/spec/js-api/#exceptiondef-compileerror"}, |
| "https://webassembly.github.io/spec/js-api/#exported-function": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"exported function","type":"dfn","url":"https://webassembly.github.io/spec/js-api/#exported-function"}, |
| "https://webassembly.github.io/spec/js-api/#instantiate-a-promise-of-a-module": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"instantiate a promise of a module","type":"dfn","url":"https://webassembly.github.io/spec/js-api/#instantiate-a-promise-of-a-module"}, |
| "https://webassembly.github.io/spec/js-api/#module": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"Module","type":"interface","url":"https://webassembly.github.io/spec/js-api/#module"}, |
| "https://webassembly.github.io/spec/js-api/#namespacedef-webassembly": {"export":true,"for_":[],"level":"","normative":true,"shortname":"wasmjs","spec":"wasmjs","status":"anchor-block","text":"WebAssembly","type":"namespace","url":"https://webassembly.github.io/spec/js-api/#namespacedef-webassembly"}, |
| "https://webidl.spec.whatwg.org/#Exposed": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Exposed","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#Exposed"}, |
| "https://webidl.spec.whatwg.org/#a-new-promise": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"a new promise","type":"dfn","url":"https://webidl.spec.whatwg.org/#a-new-promise"}, |
| "https://webidl.spec.whatwg.org/#datacloneerror": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"DataCloneError","type":"exception","url":"https://webidl.spec.whatwg.org/#datacloneerror"}, |
| "https://webidl.spec.whatwg.org/#dfn-get-buffer-source-copy": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"get a copy of the buffer source","type":"dfn","url":"https://webidl.spec.whatwg.org/#dfn-get-buffer-source-copy"}, |
| "https://webidl.spec.whatwg.org/#idl-DOMException": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"DOMException","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-DOMException"}, |
| "https://webidl.spec.whatwg.org/#idl-object": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"object","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-object"}, |
| "https://webidl.spec.whatwg.org/#idl-promise": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Promise","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-promise"}, |
| "https://webidl.spec.whatwg.org/#reject": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"reject","type":"dfn","url":"https://webidl.spec.whatwg.org/#reject"}, |
| "https://webidl.spec.whatwg.org/#resolve": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"resolve","type":"dfn","url":"https://webidl.spec.whatwg.org/#resolve"}, |
| "https://webidl.spec.whatwg.org/#upon-fulfillment": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"upon fulfillment","type":"dfn","url":"https://webidl.spec.whatwg.org/#upon-fulfillment"}, |
| "https://webidl.spec.whatwg.org/#upon-rejection": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"upon rejection","type":"dfn","url":"https://webidl.spec.whatwg.org/#upon-rejection"}, |
| }; |
| |
| function mkRefHint(link, ref) { |
| const linkText = link.textContent; |
| let dfnTextElements = ''; |
| if (ref.text != linkText) { |
| dfnTextElements = |
| mk.li({}, |
| mk.b({}, "Term: "), |
| mk.span({}, ref.text) |
| ); |
| } |
| const forList = ref.for_; |
| let forListElements; |
| if(forList.length == 0) { |
| forListElements = []; |
| } else if(forList.length == 1) { |
| forListElements = mk.li({}, |
| mk.b({}, "For: "), |
| mk.span({}, forList[0]), |
| ); |
| } else { |
| forListElements = mk.li({}, |
| mk.b({}, "For: "), |
| mk.ul({}, |
| ...forList.map(forItem => |
| mk.li({}, |
| mk.span({}, forItem) |
| ), |
| ), |
| ), |
| ); |
| } |
| const url = ref.url; |
| const safeUrl = encodeURIComponent(url); |
| const hintPanel = mk.aside({ |
| class: "ref-hint", |
| id: `ref-hint-for-${safeUrl}`, |
| "data-for": url, |
| "aria-labelled-by": `ref-hint-for-${safeUrl}`, |
| }, |
| mk.ul({}, |
| dfnTextElements, |
| mk.li({}, |
| mk.b({}, "URL: "), |
| mk.a({ href: url, class: "ref" }, url), |
| ), |
| mk.li({}, |
| mk.b({}, "Type: "), |
| mk.span({}, `${ref.type}`), |
| ), |
| mk.li({}, |
| mk.b({}, "Spec: "), |
| mk.span({}, `${ref.spec ? ref.spec : ''}`), |
| ), |
| forListElements |
| ), |
| ); |
| hintPanel.forLink = link; |
| setupRefHintEventListeners(link, hintPanel); |
| return hintPanel; |
| } |
| |
| function hideAllRefHints() { |
| queryAll(".ref-hint").forEach(el=>hideRefHint(el)); |
| } |
| |
| function hideRefHint(refHint) { |
| const link = refHint.forLink; |
| link.setAttribute("aria-expanded", "false"); |
| if(refHint.teardownEventListeners) { |
| refHint.teardownEventListeners(); |
| } |
| refHint.remove(); |
| } |
| |
| function showRefHint(link) { |
| if(link.classList.contains("dfn-link")) return; |
| const url = link.getAttribute("href"); |
| const ref = refsData[url]; |
| if(!ref) return; |
| |
| hideAllRefHints(); // Only display one at this time. |
| |
| const refHint = mkRefHint(link, ref); |
| append(document.body, refHint); |
| link.setAttribute("aria-expanded", "true"); |
| positionRefHint(refHint); |
| } |
| |
| function setupRefHintEventListeners(link, refHint) { |
| if (refHint.teardownEventListeners) return; |
| // Add event handlers to hide the refHint after the user moves away |
| // from both the link and refHint, if not hovering either within one second. |
| let timeout = null; |
| const startHidingRefHint = (event) => { |
| if (timeout) { |
| clearTimeout(timeout); |
| } |
| timeout = setTimeout(() => { |
| hideRefHint(refHint); |
| }, 1000); |
| } |
| const resetHidingRefHint = (event) => { |
| if (timeout) clearTimeout(timeout); |
| timeout = null; |
| }; |
| link.addEventListener("mouseleave", startHidingRefHint); |
| link.addEventListener("mouseenter", resetHidingRefHint); |
| link.addEventListener("blur", startHidingRefHint); |
| link.addEventListener("focus", resetHidingRefHint); |
| refHint.addEventListener("mouseleave", startHidingRefHint); |
| refHint.addEventListener("mouseenter", resetHidingRefHint); |
| refHint.addEventListener("blur", startHidingRefHint); |
| refHint.addEventListener("focus", resetHidingRefHint); |
| |
| refHint.teardownEventListeners = () => { |
| // remove event listeners |
| resetHidingRefHint(); |
| link.removeEventListener("mouseleave", startHidingRefHint); |
| link.removeEventListener("mouseenter", resetHidingRefHint); |
| link.removeEventListener("blur", startHidingRefHint); |
| link.removeEventListener("focus", resetHidingRefHint); |
| refHint.removeEventListener("mouseleave", startHidingRefHint); |
| refHint.removeEventListener("mouseenter", resetHidingRefHint); |
| refHint.removeEventListener("blur", startHidingRefHint); |
| refHint.removeEventListener("focus", resetHidingRefHint); |
| }; |
| } |
| |
| function positionRefHint(refHint) { |
| const link = refHint.forLink; |
| const linkPos = getBounds(link); |
| refHint.style.top = linkPos.bottom + "px"; |
| refHint.style.left = linkPos.left + "px"; |
| |
| const panelPos = refHint.getBoundingClientRect(); |
| const panelMargin = 8; |
| const maxRight = document.body.parentNode.clientWidth - panelMargin; |
| if (panelPos.right > maxRight) { |
| const overflowAmount = panelPos.right - maxRight; |
| const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); |
| refHint.style.left = newLeft + "px"; |
| } |
| } |
| |
| // TODO: shared util |
| // Returns the root-level absolute position {left and top} of element. |
| function getBounds(el, relativeTo=document.body) { |
| const relativeRect = relativeTo.getBoundingClientRect(); |
| const elRect = el.getBoundingClientRect(); |
| const top = elRect.top - relativeRect.top; |
| const left = elRect.left - relativeRect.left; |
| return { |
| top, |
| left, |
| bottom: top + elRect.height, |
| right: left + elRect.width, |
| } |
| } |
| |
| function showRefHintListener(e) { |
| // If the target isn't in a link (or is a link), |
| // just ignore it. |
| let link = e.target.closest("a"); |
| if(!link) return; |
| |
| // If the target is in a ref-hint panel |
| // (aka a link in the already-open one), |
| // also just ignore it. |
| if(link.closest(".ref-hint")) return; |
| |
| // Otherwise, show the panel for the link. |
| showRefHint(link); |
| } |
| |
| function hideAllHintsListener(e) { |
| // If the click is inside a ref-hint panel, ignore it. |
| if(e.target.closest(".ref-hint")) return; |
| // Otherwise, close all the current panels. |
| hideAllRefHints(); |
| } |
| |
| document.addEventListener("DOMContentLoaded", () => { |
| document.body.addEventListener("mousedown", showRefHintListener); |
| document.body.addEventListener("focus", showRefHintListener); |
| |
| document.body.addEventListener("click", hideAllHintsListener); |
| }); |
| |
| window.addEventListener("resize", () => { |
| // Hide any open ref hint. |
| hideAllRefHints(); |
| }); |
| } |
| </script> |
| <script>/* Boilerplate: script-var-click-highlighting */ |
| "use strict"; |
| { |
| /* |
| Color-choosing design: |
| |
| * Colors are ordered by goodness. |
| * On clicking a var, give it the earliest color |
| with the lowest usage in the algorithm. |
| * On re-clicking, re-use the var's most recent color |
| if that's not currently being used elsewhere. |
| */ |
| |
| const COLOR_COUNT = 7; |
| |
| document.addEventListener("click", e=>{ |
| if(e.target.nodeName == "VAR") { |
| highlightSameAlgoVars(e.target); |
| } |
| }); |
| |
| function highlightSameAlgoVars(v) { |
| // Find the algorithm container. |
| let algoContainer = findAlgoContainer(v); |
| |
| // Not highlighting document-global vars, |
| // too likely to be unrelated. |
| if(algoContainer == null) return; |
| |
| const varName = nameFromVar(v); |
| if(!v.hasAttribute("data-var-color")) { |
| const newColor = chooseHighlightColor(algoContainer, v); |
| for(const el of algoContainer.querySelectorAll("var")) { |
| if(nameFromVar(el) == varName) { |
| el.setAttribute("data-var-color", newColor); |
| el.setAttribute("data-var-last-color", newColor); |
| } |
| } |
| } else { |
| for(const el of algoContainer.querySelectorAll("var")) { |
| if(nameFromVar(el) == varName) { |
| el.removeAttribute("data-var-color"); |
| } |
| } |
| } |
| } |
| function findAlgoContainer(el) { |
| while(el != document.body) { |
| if(el.hasAttribute("data-algorithm")) return el; |
| el = el.parentNode; |
| } |
| return null; |
| } |
| function nameFromVar(el) { |
| return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); |
| } |
| function colorCountsFromContainer(container) { |
| const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); |
| for(let v of container.querySelectorAll("var[data-var-color]")) { |
| let color = +v.getAttribute("data-var-color"); |
| namesFromColor[color].add(nameFromVar(v)); |
| } |
| |
| return namesFromColor.map(x=>x.size); |
| } |
| function leastUsedColor(colors) { |
| // Find the earliest color with the lowest count. |
| let minCount = Infinity; |
| let minColor = null; |
| for(var i = 0; i < colors.length; i++) { |
| if(colors[i] < minCount) { |
| minColor = i; |
| minCount = colors[i]; |
| } |
| } |
| return minColor; |
| } |
| function chooseHighlightColor(container, v) { |
| const colorCounts = colorCountsFromContainer(container); |
| if(v.hasAttribute("data-var-last-color")) { |
| let color = +v.getAttribute("data-var-last-color"); |
| if(colorCounts[color] == 0) return color; |
| } |
| return leastUsedColor(colorCounts); |
| } |
| } |
| </script> |
