caniuse database wip

Author: mariotaku

package-lock.json

@@ -18,19 +18,22 @@
     "gsap": "^3.12.5",
     "htm": "^3.1.1",
     "marquee-content": "^4.2.0",
-    "preact": "^10.24.3"
+    "preact": "^10.24.3",
+    "preact-fetching": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@types/lodash-es": "^4.17.12",
+    "@types/semver": "^7.5.8",
     "@webosbrew/caniroot": "^1.2.5",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-htm": "^3.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
+    "escape-string-regexp": "^5.0.0",
     "favicons": "^7.2.0",
     "handlebars": "^4.7.8",
     "hast-util-to-html": "^9.0.1",
@@ -59,6 +62,7 @@
     "responsive-loader": "^3.1.2",
     "sass": "^1.80.5",
     "sass-loader": "^16.0.3",
+    "semver": "^7.6.3",
     "sharp": "^0.33.4",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
@@ -68,7 +72,8 @@
     "vfile": "^6.0.1",
     "webpack": "^5.96.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "webpack-dev-server": "^5.1.0",
+    "yaml": "^2.6.0"
   },
   "engines": {
     "node": ">=20"

package.json

@@ -0,0 +1,2 @@
+/** @type {Record<string, string[]>} */
+export default {/*DATA_INDEX*/};

src/views/develop/caniuse/caniuse-data.js

@@ -0,0 +1,61 @@
+import {Component, html, render} from "htm/preact";
+import {DataEntry} from "./types";
+import {useQuery} from "preact-fetching";
+import {CanIUseCard} from "./card";
+import {uniq} from "lodash-es";
+
+interface AppState {
+    index: Record<string, string[]>;
+}
+
+class App extends Component<unknown, AppState> {
+    constructor() {
+        super();
+        fetch('caniuse/data/index.json').then(resp => resp.json()).then(data => this.setState({
+            index: data
+        }));
+    }
+
+    render(props: unknown, state: AppState) {
+        const query = new URLSearchParams(location.search);
+        const name = query.get('q')
+        return html`
+          <h1>Can I use <input type="search" class=""/>?</h1>
+          <hr/>
+          ${state.index && html`
+            <${CanIUseSearch} index=${state.index} name=${name}/>`}`;
+    }
+
+}
+
+function CanIUseSearch(props: { index: Record<string, string[]>, name: string }) {
+    const {name, index} = props;
+
+    async function fetchData(q: string): Promise<DataEntry[]> {
+        return Promise.all(uniq(Object.entries(index).flatMap(([k, names]) => k.includes(q) ? names : []))
+            .map(name => fetch(`caniuse/data/${name}.json`).then(resp => {
+                if (!resp.ok) {
+                    throw new Error(`Failed to fetch data for ${name}`);
+                }
+                return resp.json();
+            })));
+    }
+
+    const {isLoading, isError, error, data} = useQuery(`caniuse/data/${name}`, async () => fetchData(name));
+    if (isError) {
+        return html`
+          <div>Error: ${error.message}</div>`;
+    }
+    if (isLoading) {
+        return html`
+          <div>Loading...</div>`;
+    }
+    return html`
+      <div class="row g-3">${data?.map(entry => html`
+        <${CanIUseCard} data=${entry}/>`)}
+      </div>`;
+}
+
+render(html`
+      <${App}/>`,
+    document.getElementById('app-container')!);