Merge branch 'main' into add-llrt

README.md

@@ -14,9 +14,9 @@ The generated data is available in the `packages/runtime-compat-data` directory.
 
 The list of APIs is generated by the [browser-compat-data](https://githib.com/mdn/browser-compat-data) project. The features that we include can be found in the `api` and `javascript/builtins` directories. The tests are provided by the [mdn-bcd-collector](Hhttps://github.com/openwebdocs/mdn-bcd-collector/) project. These are a mixture of automatically-generated tests for globals and properties, and manually-written tests for individual options. You can find the current tests in the `data` directory. This file is automatically generated from the `mdn-bcd-collector` repo.
 
-These tests are designed to be run in a browser environment, so we use a slightly modified version of the test harness to allow them to run in the runtimes we support. The code for testing each of the runtimes is found in the `src/runtimes` directory. It is slightly different for each runtime, depending on how each is designed to be used. Some (such as Bun, Deno and Node) can run the test file directly from the CLI, while others expect to be run via a server. For these we use the project's own development server, and then use `start-server-and-test` to run the server and make a request for a funciton that runs the test file. Each of these generates a JSON response that shows the passing tests.
+These tests are designed to be run in a browser environment, so we use a slightly modified version of the test harness to allow them to run in the runtimes we support. The code for testing each of the runtimes is found in the `src/runtimes` directory. It is slightly different for each runtime, depending on how each is designed to be used. Some (such as Bun, Deno and Node) can run the test file directly from the CLI, while others expect to be run via a server. For these we use the project's own development server, and then use `start-server-and-test` to run the server and make a request for a function that runs the test file. The output of each of these is a `data.json` file in the runtime directory, which contains the results of the tests. If you want to check why a specific test failed, you should start by inspecting the contents of this file as it contains the code and error message for each test.
 
-Another script then processes these, combines them with the metadata from the `browser-compat-data` project, and then writes the data as a JSON file to the `packages/runtime-compat-data` directory. This is then published to npm.
+Another script then processes these files, combines them with the metadata from the `browser-compat-data` project, and then writes the data as a JSON file to the `packages/runtime-compat-data` directory. This is then published to npm.
 
 The tests can be run locally, but the actual data generation process is run nightly on GitHib Actions, which opens a PR if there are any changes.
 
@@ -31,7 +31,7 @@ The tests can be run locally, but the actual data generation process is run nigh
 - Install dependencies using `pnpm install`
 - Generate the data using `pnpm run generate`
 
-If you want to run the tests for an individual runtime, run `pnpm start` in the `src/runtimes/<runtime>` directory. If you set `DEBUG=1` then it will log messages for test failures.
+If you want to run the tests for an individual runtime, run `pnpm start` in the `src/runtimes/<runtime>` directory.
 
 ## Limitations
 

apps/website/src/app.vue

@@ -1,39 +1,35 @@
 <template>
  <div class="flex flex-col gap-8 container mx-auto my-24 items-center">
- <div class="flex flex-col gap-4">
+ <div class="flex flex-col gap-4" :style="`width: ${runtimes.length * 124 + ((runtimes.length - 1) * 4)}px`">
  <h2 class="text-6xl text-slate-950">
  Runtime compatibility
  </h2>
  <p class="text-md text-slate-600 max-w-4xl">
  Display APIs compatibility across different JavaScript runtimes. The data is retrieved from <ExternalLink
- href="https://github.com/unjs/runtime-compat-data"
- >
- >
+ href="https://github.com/unjs/runtime-compat-data">
  runtime-compat-data
  </ExternalLink>, based on MDN's format.
  Runtimes are displayed with their <ExternalLink href="https://runtime-keys.proposal.wintercg.org">
  WinterCG Runtime Key
  </ExternalLink>.
  </p>
+ <label class="flex items-center gap-2">
+ <input type="checkbox" class="rounded" v-model="winterCGOnly" />
+ <span class="text-md text-slate-600">Filter by WinterCG APIs ({{ computedData.winterCGCount }}/{{
+ computedData.totalCount
+ }})</span>
+ </label>
  </div>
  <div class="sticky top-0 z-10 pointer-events-none">
  <div class="flex gap-1 overflow-x-scroll scrollbar-none bg-white pt-2 pointer-events-auto">
- <RuntimeCard
- v-for="runtime in runtimes"
- :key="runtime"
- :runtime="runtime"
+ <RuntimeCard v-for="runtime in runtimes" :key="runtime" :runtime="runtime"
  :selected="selectedRuntimes.includes(runtime)"
- />
+  :coverage="winterCGOnly ? Math.round(computedData.winterCGCoverage[runtime] / computedData.winterCGCount * 100) : undefined" />
  </div>
  <div class="h-16 w-full bg-gradient-to-b from-white to-transparent" />
  </div>
  <div class="flex flex-col gap-8">
- <APIRow
- v-for="[name, data] in Object.entries(runtimeCompatData.api)"
- :key="name"
- :name="name"
- :data="data"
- />
+ <APIRow v-for="[name, data] in Object.entries(computedData.data)" :key="name" :name="name" :data="data" />
  </div>
  </div>
  <footer class="flex items-center gap-8 pb-16 justify-center">
@@ -42,18 +38,48 @@
  UnJS
  </ExternalLink>
  </p>
- <a
- href="https://github.com/unjs/runtime-compat"
- class="flex gap-2 text-md text-slate-600 hover:text-slate-900 items-center"
- >
+ <a href="https://github.com/unjs/runtime-compat"
+ class="flex gap-2 text-md text-slate-600 hover:text-slate-900 items-center">
  <IconGitHub /> GitHub
  </a>
  </footer>
 </template>
 
 <script setup lang="ts">
-import runtimeCompatData, { RuntimeName } from 'runtime-compat-data';
+import runtimeCompatData, { type CompatStatement, type Identifier, type RuntimeName } from 'runtime-compat-data';
 
 const runtimes = Object.keys(runtimeCompatData.api.AbortController.__compat?.support ?? {}) as RuntimeName[]
 const selectedRuntimes = useState<string[]>('selectedRuntimes', () => runtimes)
+const winterCGOnly = useState<boolean>('winterCGOnly', () => false)
+
+// https://common-min-api.proposal.wintercg.org/#index
+const winterCGAPIs = ['AbortController', 'AbortSignal', 'Blob', 'ByteLengthQueuingStrategy', 'CompressionStream', 'CountQueuingStrategy', 'Crypto', 'CryptoKey', 'DecompressionStream', 'DOMException', 'Event', 'EventTarget', 'File', 'FormData', 'Headers', 'ReadableByteStreamController', 'ReadableStream', 'ReadableStreamBYOBReader', 'ReadableStreamBYOBRequest', 'ReadableStreamDefaultController', 'ReadableStreamDefaultReader', 'Request', 'Response', 'SubtleCrypto', 'TextDecoder', 'TextDecoderStream', 'TextEncoder', 'TextEncoderStream', 'TransformStream', 'TransformStreamDefaultController', 'URL', 'URLSearchParams', 'WritableStream', 'WritableStreamDefaultController', 'atob', 'btoa', 'console', 'crypto', 'fetch', 'navigator', 'performance', 'queueMicrotask', 'setTimeout', 'clearTimeout', 'setInternval', 'clearInterval', 'structuredClone']
+
+const computedData = computed(() => {
+ const data: Record<string, Identifier | CompatStatement> = {}
+ const winterCGCoverage: Record<string, number> = Object.fromEntries(runtimes.map(runtime => [runtime, 0]))
+ let winterCGCount = 0;
+ let totalCount = 0;
+
+ for (const [api, apiData] of Object.entries(runtimeCompatData.api)) {
+ const isWinterCGApi = winterCGAPIs.includes(api)
+
+ if (!winterCGOnly.value || isWinterCGApi) {
+ data[api] = apiData
+ winterCGCount++
+
+ if (isWinterCGApi) {
+ Object.entries(apiData.support ?? apiData.__compat?.support ?? {}).forEach(([runtime, value]) => {
+ if (value.version_added) {
+ winterCGCoverage[runtime]++
+ }
+ })
+ }
+ }
+
+ totalCount++
+ }
+
+ return { data, winterCGCount, totalCount, winterCGCoverage }
+})
 </script>

apps/website/src/components/APIRow.vue

@@ -1,6 +1,6 @@
 <template>
  <div class="flex flex-col gap-2 relative">
- <div :id="name" class="relative -top-44" />
+ <div :id="name" class="relative -top-48" />
  <a :href="`#${name}`">
  <h2
  class="text-xl font-mono text-slate-950 before:content-['#'] before:hidden before:absolute before:-left-4 hover:underline hover:before:block">
@@ -17,10 +17,11 @@
  <span v-if="apiData.status?.deprecated ?? apiData.__compat?.status?.deprecated" class="text-red-600">
  <IconTrash />
  </span>
- <span v-html="api === '__compat' ? `<code>${name}</code>` : apiData.__compat?.description ?? `<code>${api}</code>`" />
+ <span
+ v-html="api === '__compat' ? `<code>${name}</code>` : apiData.__compat?.description ?? `<code>${api}</code>`" />
  </a>
  <div v-for="[runtime, value] in Object.entries(apiData.support ?? apiData.__compat.support) " :key="runtime"
- class="min-w-[124px] flex items-center justify-center" :class="{
+ class="w-[124px] flex items-center justify-center" :class="{
  'opacity-10': !selectedRuntimes.includes(runtime),
  }">
  <span class="w-full h-6 flex items-center justify-center rounded" :class="{
@@ -38,8 +39,8 @@
 </template>
 
 <script setup lang="ts">
-import type { CompatData } from 'runtime-compat-data';
+import type { CompatStatement, Identifier } from 'runtime-compat-data';
 
-const { name, data } = defineProps<{ name: string, data: CompatData['api'] }>()
+const { name, data } = defineProps<{ name: string, data: Identifier | CompatStatement }>()
 const selectedRuntimes = useState<string[]>('selectedRuntimes')
 </script>

apps/website/src/components/RuntimeCard.vue

@@ -8,6 +8,9 @@
  <p class="text-md text-slate-900 whitespace-nowrap mt-4">
  {{ runtimeInformation.name }}
  </p>
+ <p v-if="coverage" class="text-xs text-slate-500">
+ {{ coverage }}% coverage
+ </p>
  <p class="text-sm text-slate-500 transition flex gap-2" @click.stop>
  <a v-if="runtimeInformation.github" :href="runtimeInformation.github" target="_blank"
  class="flex items-center gap-1 hover:text-slate-800">
@@ -22,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-const { runtime } = defineProps<{ runtime: string, selected: boolean }>()
+const { runtime } = defineProps<{ runtime: string, selected: boolean, coverage?: number }>()
 
 const selectedRuntimes = useState<string[]>('selectedRuntimes')