Skip to content

feat(website): show supported/total count per runtime at table bottom #230

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

Open
2u841r wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(website): show supported/total count per runtime at table bottom #230

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 21 additions & 1 deletion apps/website/src/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,16 @@
<div class="flex flex-col gap-8 max-w-full">
<APIRow v-for="[name, data] in Object.entries(computedData.data)" :key="name" :name="name" :data="data" />
</div>
<div class="flex gap-1 overflow-x-scroll scrollbar-none linked-scroll border-t border-slate-200 dark:border-slate-800 pt-2" @scroll.passive="changeScroll">
<div v-for="runtime in runtimes" :key="runtime"
class="min-w-[124px] flex items-center justify-center py-1" :class="{
'opacity-10': !selectedRuntimes.includes(runtime),
}">
<span class="text-sm font-mono text-slate-500 dark:text-slate-400">
{{ computedData.runtimeSupport[runtime] }}/{{ computedData.totalRows }}
</span>
</div>
</div>
</div>
<footer class="flex items-center gap-8 pb-16 justify-center bg-white dark:bg-black">
<p class="text-md text-slate-600 dark:text-slate-300">
Expand Down Expand Up @@ -67,8 +77,10 @@ const winterCGAPIs = ['AbortController', 'AbortSignal', 'Blob', 'ByteLengthQueui
const computedData = computed(() => {
const data: Record<string, Identifier | CompatStatement> = {}
const winterCGCoverage: Record<string, number> = Object.fromEntries(runtimes.map(runtime => [runtime, 0]))
const runtimeSupport: Record<string, number> = Object.fromEntries(runtimes.map(runtime => [runtime, 0]))
let winterCGCount = 0;
let totalCount = 0;
let totalRows = 0;
for (const [api, apiData] of Object.entries({ ...runtimeCompatData.api, WebAssembly: runtimeCompatData.webassembly.api })) {
const isWinterCGApi = winterCGAPIs.includes(api)

Expand All @@ -83,11 +95,19 @@ const computedData = computed(() => {
}
})
}

for (const [, subData] of Object.entries(apiData)) {
totalRows++
const support = (subData as any).support ?? (subData as any).__compat?.support ?? {}
for (const [runtime, value] of Object.entries(support) as [string, any][]) {
if (value.version_added) runtimeSupport[runtime]++
}
}
Comment on lines +99 to +105

@coderabbitai coderabbitai Bot Apr 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check if APIRow renders recursively (indicates multi-level displayed rows)
rg -nP --type=vue -C2 '<APIRow\b' apps/website/src/components/APIRow.vue

# Check runtime-compat-data for nested identifiers and array support statements
python - <<'PY'
import json, pathlib

root = pathlib.Path("packages/runtime-compat-data")
json_files = list(root.rglob("*.json"))

deep_count = 0
array_count = 0

def has_array_support(compat):
    if not isinstance(compat, dict): return False
    support = compat.get("support")
    return isinstance(support, dict) and any(isinstance(v, list) for v in support.values())

def walk_identifier(node, depth=0):
    global deep_count, array_count
    if not isinstance(node, dict):
        return depth
    if "__compat" in node and has_array_support(node["__compat"]):
        array_count += 1
    max_depth = depth
    for k, v in node.items():
        if k == "__compat":
            continue
        child_depth = walk_identifier(v, depth + 1)
        max_depth = max(max_depth, child_depth)
    return max_depth

for f in json_files:
    try:
        obj = json.loads(f.read_text())
    except Exception:
        continue
    if isinstance(obj, dict) and isinstance(obj.get("api"), dict):
        for _, api_node in obj["api"].items():
            d = walk_identifier(api_node, 0)
            if d > 1:
                deep_count += 1

print(f"APIs with nesting depth > 1: {deep_count}")
print(f"Compat nodes with array support statements: {array_count}")
PY

Repository: unjs/runtime-compat

Length of output: 91

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check APIRow.vue for recursive rendering (without type filter)
echo "=== Checking APIRow.vue structure ==="
rg -C3 '<APIRow\b' apps/website/src/components/

echo ""
echo "=== Checking apiData structure passed to computed property ==="
# Find where apiData is used and how it's imported
rg -n 'runtimeCompatData\|apiData' apps/website/src/app.vue | head -20

echo ""
echo "=== Checking type definitions for support statements ==="
cat packages/runtime-compat-data/types.d.ts 2>/dev/null || echo "Type file not found"

Repository: unjs/runtime-compat

Length of output: 101

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check runtime-compat-data JSON structure - run independently
python3 << 'PYTHON_SCRIPT'
import json
import pathlib
from typing import Any

root = pathlib.Path("packages/runtime-compat-data")
json_files = sorted(list(root.rglob("*.json")))[:5]  # Sample first few files

print(f"Found {len(json_files)} JSON files, examining first few...\n")

deep_count = 0
array_support_count = 0
sample_deep = None
sample_array = None

def has_array_support(compat: Any) -> bool:
    if not isinstance(compat, dict):
        return False
    support = compat.get("support")
    return isinstance(support, dict) and any(isinstance(v, list) for v in support.values())

def walk_identifier(node: Any, depth: int = 0, path: str = "") -> int:
    global deep_count, array_support_count, sample_deep, sample_array
    
    if not isinstance(node, dict):
        return depth
    
    if "__compat" in node:
        if has_array_support(node["__compat"]):
            array_support_count += 1
            if sample_array is None:
                sample_array = (path, node["__compat"]["support"])
    
    max_depth = depth
    for k, v in node.items():
        if k == "__compat":
            continue
        child_depth = walk_identifier(v, depth + 1, f"{path}.{k}")
        if child_depth > max_depth:
            max_depth = child_depth
    
    return max_depth

for f in json_files:
    try:
        obj = json.loads(f.read_text())
    except Exception as e:
        print(f"Error reading {f.name}: {e}")
        continue
    
    if isinstance(obj, dict) and isinstance(obj.get("api"), dict):
        for api_name, api_node in obj["api"].items():
            d = walk_identifier(api_node, 0, api_name)
            if d > 1:
                deep_count += 1
                if sample_deep is None:
                    sample_deep = (f.name, api_name, d)

print(f"Results from sample files:")
print(f"  APIs with nesting depth > 1: {deep_count}")
print(f"  Compat nodes with array support: {array_support_count}")

if sample_deep:
    print(f"\nExample of deep nesting: {sample_deep[0]} -> {sample_deep[1]} (depth {sample_deep[2]})")
if sample_array:
    print(f"\nExample of array support: {sample_array[0]}")
    print(f"  Support structure: {json.dumps(sample_array[1], indent=2)[:300]}...")
PYTHON_SCRIPT

Repository: unjs/runtime-compat

Length of output: 270

🏁 Script executed:

#!/bin/bash
# Find APIRow component - try broader search
echo "=== Searching for APIRow component ==="
find apps/website/src -name "*APIRow*" -o -name "*apirow*"

echo ""
echo "=== Searching in Vue files for APIRow ==="
rg -l 'APIRow' apps/website/src/ 2>/dev/null || echo "Not found in search"

echo ""
echo "=== Checking type definitions ==="
cat packages/runtime-compat-data/types.d.ts 2>/dev/null || echo "Type file not found"

Repository: unjs/runtime-compat

Length of output: 5937

🏁 Script executed:

#!/bin/bash
# Comprehensive check for array support statements across all JSON files
python3 << 'PYTHON_SCRIPT'
import json
import pathlib

root = pathlib.Path("packages/runtime-compat-data")
json_files = list(root.rglob("*.json"))

print(f"Total JSON files: {len(json_files)}\n")

deep_count = 0
array_support_count = 0
examples = []

def has_array_support(compat):
    if not isinstance(compat, dict):
        return False
    support = compat.get("support")
    if not isinstance(support, dict):
        return False
    for v in support.values():
        if isinstance(v, list):
            return True
    return False

def walk_identifier(node, depth=0, path=""):
    global deep_count, array_support_count, examples
    
    if not isinstance(node, dict):
        return depth
    
    if "__compat" in node:
        if has_array_support(node["__compat"]):
            array_support_count += 1
            if len(examples) < 3:
                examples.append((path, node["__compat"]["support"]))
    
    max_depth = depth
    for k, v in node.items():
        if k == "__compat":
            continue
        child_depth = walk_identifier(v, depth + 1, f"{path}.{k}")
        max_depth = max(max_depth, child_depth)
    
    return max_depth

for f in json_files:
    try:
        obj = json.loads(f.read_text())
    except Exception:
        continue
    
    if isinstance(obj, dict) and isinstance(obj.get("api"), dict):
        for api_name, api_node in obj["api"].items():
            d = walk_identifier(api_node, 0, api_name)
            if d > 1:
                deep_count += 1

print(f"APIs with nesting depth > 1: {deep_count}")
print(f"Compat nodes with array support: {array_support_count}")

if examples:
    print(f"\nExamples of array support:")
    for path, support in examples:
        print(f"  {path}:")
        for runtime, val in list(support.items())[:2]:
            print(f"    {runtime}: {type(val).__name__} = {str(val)[:80]}")
PYTHON_SCRIPT

Repository: unjs/runtime-compat

Length of output: 151

🏁 Script executed:

#!/bin/bash
# Read app.vue around lines 99-105 to understand context
echo "=== app.vue lines 90-115 (context around the concern) ==="
sed -n '90,115p' apps/website/src/app.vue | cat -n

Repository: unjs/runtime-compat

Length of output: 1001

🏁 Script executed:

#!/bin/bash
# Verify the runtimeCompatData actually includes those deep APIs
echo "=== Checking what data is loaded into runtimeCompatData ==="
sed -n '1,30p' apps/website/src/app.vue | cat -n

echo ""
echo "=== Searching for where runtimeCompatData is imported ==="
rg -n 'runtimeCompatData\|import.*data' apps/website/src/app.vue | head -10

Repository: unjs/runtime-compat

Length of output: 2172

🏁 Script executed:

#!/bin/bash
# Search more broadly for runtimeCompatData definition
echo "=== Full search in app.vue for runtimeCompatData ==="
rg -n 'runtimeCompatData' apps/website/src/app.vue

echo ""
echo "=== Look for imports and script section ==="
sed -n '45,85p' apps/website/src/app.vue | cat -n

Repository: unjs/runtime-compat

Length of output: 3586

Support ratio aggregation is incomplete and undercounts due to shallow iteration.

The loop at lines 99-105 iterates only the immediate children of apiData using Object.entries(apiData). However, the runtime-compat-data contains 15 APIs with nested identifiers at depth > 1 (e.g., AbortController has nested properties). This means deeply nested identifiers are skipped, causing totalRows to be undercounted.

Additionally, the type definition allows SupportStatement to be either a SimpleSupportStatement or an array SimpleSupportStatement[], but the code checks value.version_added directly, which would not work for array values.

💡 Suggested fix (recursive walk + normalized support check) 
 const computedData = computed(() => {
   const data: Record<string, Identifier | CompatStatement> = {}
   const winterCGCoverage: Record<string, number> = Object.fromEntries(runtimes.map(runtime => [runtime, 0]))
   const runtimeSupport: Record<string, number> = Object.fromEntries(runtimes.map(runtime => [runtime, 0]))
   let winterCGCount = 0;
   let totalCount = 0;
   let totalRows = 0;
+
+  const hasVersionAdded = (value: any): boolean => {
+    if (Array.isArray(value)) {
+      return value.some(v => Boolean(v?.version_added))
+    }
+    return Boolean(value?.version_added)
+  }
+
+  const accumulateSupport = (node: Identifier | CompatStatement) => {
+    const compat = (node as CompatStatement).support
+      ? (node as CompatStatement)
+      : (node as Identifier).__compat
+
+    if (compat?.support) {
+      totalRows++
+      for (const [runtime, value] of Object.entries(compat.support) as [string, any][]) {
+        if (runtime in runtimeSupport && hasVersionAdded(value)) {
+          runtimeSupport[runtime]++
+        }
+      }
+    }
+
+    for (const [key, child] of Object.entries(node as Identifier)) {
+      if (key === '__compat') continue
+      accumulateSupport(child as Identifier | CompatStatement)
+    }
+  }

   for (const [api, apiData] of Object.entries({ ...runtimeCompatData.api, WebAssembly: runtimeCompatData.webassembly.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]++
           }
         })
       }

-      for (const [, subData] of Object.entries(apiData)) {
-        totalRows++
-        const support = (subData as any).support ?? (subData as any).__compat?.support ?? {}
-        for (const [runtime, value] of Object.entries(support) as [string, any][]) {
-          if (value.version_added) runtimeSupport[runtime]++
-        }
-      }
+      accumulateSupport(apiData)
     }

     totalCount++
   }

   return { data, winterCGCount, totalCount, winterCGCoverage, runtimeSupport, totalRows }
 })
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/website/src/app.vue` around lines 99 - 105, The current loop over
apiData (the for-of over Object.entries(apiData>) only visits top-level keys and
undercounts totalRows and runtimeSupport; replace it with a recursive walk
function that traverses nested API nodes (visiting every identifier/property)
and, for each found node, increments totalRows and examines its support block;
normalize a SupportStatement (the value in runtimeSupport iteration) to an array
when it may be a SimpleSupportStatement or SimpleSupportStatement[] and treat
the statement as supported if any array element has a truthy version_added;
update uses of apiData, totalRows, runtimeSupport and the inner loop (the code
block referencing support and value.version_added) to call the walker so all
nested identifiers are counted and array-form support entries are handled
correctly.

}

totalCount++
}

return { data, winterCGCount, totalCount, winterCGCoverage }
return { data, winterCGCount, totalCount, winterCGCoverage, runtimeSupport, totalRows }
})
</script>