Skip to content

Feature table redesign #498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
andylizi wants to merge 17 commits into
base: main
Choose a base branch
from
+1,288 −741
Draft

Feature table redesign #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b795a93
Small fixes in `features.json`
andylizi Dec 12, 2025
fa30f02
Feature table redesign
andylizi Dec 17, 2025
fbfa6b4
Add category header
andylizi Dec 17, 2025
10dd2fb
Use button group for filters
andylizi Dec 17, 2025
b171510
Support inverting logo colors in dark theme
andylizi Dec 18, 2025
a841f1f
Support multiple categories for one platform
andylizi Dec 18, 2025
47d73df
Fix icon width in Safari
andylizi Dec 18, 2025
0a3aee5
Improve multiline header alignment
andylizi Dec 18, 2025
ba6d1e3
Trim Binaryen logo
andylizi Dec 18, 2025
d9ad256
Optimize Owi logo size
andylizi Dec 18, 2025
0ee9ffd
Move `wasm2c` to Standalone Runtimes
andylizi Dec 19, 2025
60c362f
Merge `upstream/main` into `new-feature-table`
andylizi Dec 19, 2025
56c70d6
Sync category filter with query params
andylizi Dec 22, 2025
04bf201
Avoid critical `:has()` usage for compatibility
andylizi Dec 22, 2025
2b94dc0
Table loading state
andylizi Dec 22, 2025
108910f
Accessibility
andylizi Dec 22, 2025
cc4a413
No wrapping for column headers
andylizi Dec 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 198 additions & 0 deletions _includes/feature-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<link rel="preload" href="/features.json" as="fetch">
<link rel="modulepreload" href="https://unpkg.com/wasm-feature-detect@1/dist/esm/index.js?v=1">
<script type="module" src="/features.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.15/dist/cdn.js" defer></script><!-- TODO: use minimized version -->

The table below aims to track implemented features in popular engines and tools.
You can click on a cell for more information.

<noscript><p>Please enable JavaScript for the table to load.</p></noscript>

<p id="feature-table-loading">
Loading table, please wait&hellip;
<span class="text-secondary">(<a href="https://github.com/WebAssembly/website/issues" target="_blank">report issues</a>)</span>
</p>

<div
id="feature-table"
x-data="data"
x-init="$watch('selectedCategories', (value, oldValue) => onSelectedCategoryChange(value, oldValue))"
x-show="categories.length"
x-cloak
>
<div id="table-actions">
<fieldset>
<legend>Currently showing categories:</legend>
<div id="platform-filters">
<template x-for="category in categoryNames" x-bind:key="category">
<label class="platform-filter" x-id="['platform-filter']">
<input type="checkbox" x-bind:id="$id('platform-filter')" x-bind:value="category" x-model="selectedCategories" />
<div class="checkbox-button text-secondary" x-bind:for="$id('platform-filter')" x-text="category"></div>
</label>
</template>
</div>
</fieldset>
<div>
<a href="https://github.com/WebAssembly/website/issues" target="_blank">Report issues</a>
&bull;
<a href="https://github.com/WebAssembly/website/blob/main/features.json" target="_blank">Contribute data</a>
</div>
</div>

<div id="feature-scroll">
<table aria-label="Feature Status in WebAssembly Platforms" x-bind:style="{ '--num-columns': numColumns }">
<thead>
<tr>
<th class="top-corner"></th>
<template x-for="(numColumns, category) in cellGroupsForRow" x-bind:key="category">
<th
scope="colgroup"
x-bind:id="`col-category-header-${str2id(category)}`"
class="category"
x-bind:colspan="numColumns"
x-bind:style="{ '--num-columns-in-category': numColumns }"
>
<div x-text="category"></div>
</th>
</template>
</tr>
<tr class="platform-header-row">
<th class="top-corner"></th>
<template x-for="platform in cellsForRow(null)" x-bind:key="platform.name">
<th
scope="col"
x-bind:id="`col-header-${str2id(platform.name)}`"
x-bind:headers="`col-category-header-${str2id(platform.category)}`"
>
<template x-if="platform.url">
<a x-bind:href="platform.url" target="_blank">
<template x-if="platform.logo">
<!-- Empty alt trick: https://www.w3.org/WAI/WCAG22/Techniques/html/H2 -->
<img x-bind:src="platform.logo" alt="" x-bind:class="platform.logoClassName">
</template>
<span class="platform-name" x-text="platform.name"></span>
</a>
</template>
<template x-if="!platform.url">
<span>
<span class="platform-name" x-text="platform.name"></span>
</span>
</template>
</th>
</template>
</tr>
</thead>
<template x-for="(featureGroup, i) in featureGroups" x-bind:key="i">
<tbody x-id="['feat-group']">
<tr>
<th scope="colgroup" x-bind:id="$id('feat-group')" x-bind:colspan="numColumns" x-text="featureGroup.name"></th>
</tr>
<template x-for="feature in featureGroup.features" x-bind:key="feature.id">
<tr x-bind:data-feature-id="feature.id" x-id="['feat-row-header']">
<th scope="row" x-bind:id="$id('feat-row-header')" x-bind:headers="$id('feat-group')">
<a x-bind:href="feature.url" x-text="feature.description" target="_blank"></a>
</th>
<template x-for="{ name, status } in cellsForRow(feature.id)" x-bind:key="name">
<td x-id="['cell-details']" x-bind:headers="`${$id('feat-row-header')} col-header-${str2id(name)}`">
<button
type="button"
class="cell"
x-bind:class="classForStatus(status)"
x-on:click="toggleFeatureDetails(status)"
x-bind:aria-expanded="String(status?.expanded ?? false)"
x-bind:aria-controls="$id('cell-details')"
>
<div class="icon" x-replace.clone="iconForStatus(status)"></div>
<div x-show="labelForStatus(status)" x-text="labelForStatus(status)"></div>
<template x-if="status?.note">
<div x-show="status?.note" class="icon icon-note" x-replace.clone="iconMoreDetails"></div>
</template>
</button>
<div class="details" x-bind:id="$id('cell-details')" x-bind:hidden="!status?.expanded" tabindex="0">
<template x-if="status?.expanded">
<ul class="details-inner">
<li class="details-status" x-bind:class="classForStatus(status)">
<div class="icon" x-replace.clone="iconForNote(status)" aria-hidden="true"></div>
<div x-replace="detailsLabelForStatus(status, name)"></div>
</li>
<li class="details-note" x-show="status?.note">
<div class="icon" x-replace.clone="iconNote" aria-hidden="true"></div>
<div class="details-note-line text-secondary" x-replace="renderNote(status?.note)"></div>
</li>
</ul>
</template>
</div>
</td>
</template>
</tr>
</template>
</tbody>
</template>
</table>
</div>
</div>

<!-- Apache License 2.0, https://github.com/Remix-Design/remixicon -->
<!-- TODO: clean up unused icons -->
<template id="icon-check">
<span class="visually-hidden">Full Support</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<title>Full Support</title>
<path d="M10 15.2 19.2 6l1.4 1.4L10 18l-6.4-6.4L5 10.2Z"/>
</svg>
</template>
<template id="icon-checkbox-circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m5.457 7.457-1.414-1.414L11 13.086l-2.793-2.793-1.414 1.414L11 15.914z"/></svg>
</template>
<template id="icon-close">
<span class="visually-hidden">No Support</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<title>No Support</title>
<path d="m12 10.6 5-5 1.4 1.5-5 4.9 5 5-1.4 1.4-5-5-5 5L5.7 17l5-5-5-5 1.5-1.4z"/>
</svg>
</template>
<template id="icon-close-circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16m0-9.41 2.83-2.83 1.41 1.41L13.41 12l2.83 2.83-1.41 1.41L12 13.41l-2.83 2.83-1.41-1.41L10.59 12 7.76 9.17l1.41-1.41z"/></svg>
</template>
<template id="icon-checkbox-blank-circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16"/></svg>
</template>
<template id="icon-flask">
<span class="visually-hidden">Experimental Support</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<title>Experimental Support</title>
<path d="M15.9994 2v2h-1v3.243c0 1.1575.2512 2.3013.7363 3.3524l4.2813 9.276c.3471.7522.0188 1.6434-.7334 1.9905A1.5 1.5 0 0 1 18.655 22H5.3438c-.8285 0-1.5-.6716-1.5-1.5a1.5 1.5 0 0 1 .138-.6286l4.2813-9.276a8 8 0 0 0 .7363-3.3525V4h-1V2zm-2.6121 8.0012h-2.7758a10 10 0 0 1-.3744 1.0712l-.1581.3611L6.1244 20h11.749l-3.9536-8.5665a10 10 0 0 1-.5325-1.4323m-2.3879-2.7583a10 10 0 0 1-.0288.758h2.0576a10 10 0 0 1-.021-.3639l-.0078-.394V4h-2z"/>
</svg>
</template>
<template id="icon-forbid-2">
<span class="visually-hidden">Not Applicable</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<title>Not Applicable</title>
<path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16m4.9-11.48L8.51 16.9a6 6 0 0 1-1.41-1.41l8.37-8.37a6 6 0 0 1 1.41 1.41"/>
</svg>
</template>
<template id="icon-asterisk">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 3v7.267l6.294-3.633 1 1.732-6.293 3.633 6.293 3.635-1 1.732L13 13.732V21h-2v-7.268l-6.294 3.634-1-1.732L9.999 12 3.706 8.366l1-1.732L11 10.267V3z"/></svg>
</template>
<template id="icon-question-mark">
<span class="visually-hidden">Unknown</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true">
<title>Unknown</title>
<path d="M24 38a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0-34a12 12 0 0 1 12 12c0 4.3-1.5 6.6-5.3 9.8-3.9 3.3-4.7 4.8-4.7 8.2h-4c0-5 1.6-7.4 6-11.2 3.1-2.6 4-4 4-6.8a8 8 0 1 0-16 0v2h-4v-2A12 12 0 0 1 24 4z"/>
</svg>
</template>
<template id="icon-more">
<span class="visually-hidden">footnote</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<title>More</title>
<path d="M5 10a2 2 0 0 0-2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2 2 2 0 0 0-2-2m14 0a2 2 0 0 0-2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2 2 2 0 0 0-2-2m-7 0a2 2 0 0 0-2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2 2 2 0 0 0-2-2"/>
</svg>
</template>

<template id="icon-loading">
<span class="visually-hidden">Loading</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<title>Loading</title>
<circle fill="#ccc" cx="2" cy="12" r="2"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".1"/></circle><circle fill="#ccc" cx="10" cy="12" r="2"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".2"/></circle><circle fill="#ccc" cx="18" cy="12" r="2"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".3"/></circle>
</svg>
</template>
5 changes: 4 additions & 1 deletion _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,11 @@
<noscript id="dark-mode-toggle-stylesheets">
<link rel="stylesheet" type="text/css" href="/css/light.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" type="text/css" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
<meta name="color-scheme" content="dark light" />
<meta name="color-scheme" content="light dark" />
</noscript>
{% if page.url == "/features/" %}
<link rel="stylesheet" type="text/css" href="/css/feature-table.css" />
{% endif %}
<script src="/js/dark-mode-toggle-stylesheets-loader.min.js"></script>
<script type="module" src="/js/dark-mode-toggle.min.mjs"></script>
<script type="module" src="/js/wasm-compat.js"></script>
Expand Down
Loading