feat: Compatibility table (#2742)

Author: vasfvitor

package.json

@@ -12,13 +12,14 @@
     "dev": "astro dev",
     "format": "prettier -w --cache --plugin prettier-plugin-astro .",
     "format:check": "prettier -c --cache --plugin prettier-plugin-astro .",
+    "build:compatibility-table": "pnpm --filter compatibility-table run build",
     "build:references": "pnpm --filter js-api-generator run build",
     "build:releases": "pnpm --filter releases-generator run build",
     "build:config": "pnpm --filter config-generator run build",
     "build:cli": "pnpm --filter cli-generator run build",
     "build:astro": "astro build",
     "build:i18n": "pnpm --filter docs-i18n-tracker run build",
-    "build": "pnpm dev:setup && pnpm build:references && pnpm build:config && pnpm build:cli && pnpm build:releases && pnpm build:astro && pnpm build:i18n",
+    "build": "pnpm dev:setup && pnpm build:references && pnpm build:config && pnpm build:cli && pnpm build:releases && pnpm build:compatibility-table && pnpm build:astro && pnpm build:i18n",
     "preview": "astro preview"
   },
   "dependencies": {

packages/compatibility-table/build.ts

@@ -0,0 +1,45 @@
+import { readdir, readFile } from 'fs/promises';
+import { writeFileSync } from 'node:fs';
+import TOML from '@iarna/toml';
+import path from 'path';
+
+// todo: resolve dir
+const baseDir = '../plugins-workspace';
+const pluginDir = '../plugins-workspace/plugins';
+
+async function main() {
+  const plugins = await readdir(pluginDir);
+
+  const workspaceCargo = TOML.parse(await readFile(path.join(baseDir, 'Cargo.toml'), 'utf-8'));
+  const baseRustVersion = workspaceCargo.workspace.package['rust-version'];
+
+  const tables: Record<string, any> = {};
+  for (const plugin of plugins) {
+    // using Record<string, any> but it's not reaaaally safe, might as well use any
+    const pluginPath = path.join(pluginDir, plugin, 'Cargo.toml');
+    try {
+      const data = TOML.parse(await readFile(pluginPath, 'utf-8'));
+      const pkg = data.package as Record<string, any>;
+
+      const hasSpecificRustVersion = pkg['rust-version'] && !pkg['rust-version'].workspace;
+      const platformsSupport: Record<string, any> = pkg.metadata.platforms.support;
+
+      //  todo: fix platforms case iOS, Windows...
+      const support = Object.entries(platformsSupport).map(([platform, supportInfo]) => ({
+        platform,
+        ...supportInfo,
+      }));
+
+      tables[plugin] = {
+        rustVersion: hasSpecificRustVersion ? pkg['rust-version'] : baseRustVersion,
+        support,
+      };
+    } catch (error) {
+      continue;
+    }
+  }
+
+  writeFileSync('../../src/components/plugins/_tableContent.json', JSON.stringify(tables, null, 2));
+}
+
+main();

packages/compatibility-table/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "compatibility-table",
+  "version": "1.0.0",
+  "private": "true",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsm ./build.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@iarna/toml": "^2.2.5",
+    "@types/node": "^20.11.20",
+    "tsm": "^2.3.0",
+    "typescript": "^5.3.3"
+  }
+}

packages/compatibility-table/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

pnpm-lock.yaml

@@ -5,3 +5,4 @@ packages:
   - 'packages/cli-generator'
   - 'packages/tauri-typedoc-theme'
   - 'packages/releases-generator'
+  - 'packages/compatibility-table'

pnpm-workspace.yaml

@@ -4,9 +4,12 @@ import {
   stripLeadingAndTrailingSlashes,
   ensureTrailingSlash,
 } from 'node_modules/@astrojs/starlight/utils/path';
-import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+import { CardGrid } from '@astrojs/starlight/components';
 import { routes, type Route } from 'node_modules/@astrojs/starlight/utils/routing';
 
+// custom component copied from starlight/components/LinkCard
+import CustomLinkCard from '@components/plugins/CustomLinkCard.astro';
+
 interface Props {
   /**
    * Slug relative to /src - e.g "/zh-cn/features"
@@ -28,6 +31,11 @@ interface Props {
    * Use this to ignore sidebar order
    */
   sortAlphabetically?: boolean;
+
+  /*
+   * specifically to support compatibility footer in CustomLink card
+   */
+  callback?: Function;
 }
 
 function hasSidebarOrder(page: Route): number | undefined {
@@ -43,7 +51,12 @@ function compareOrder(a: Route, b: Route): boolean {
 }
 
 let { slug } = Astro.props;
-const { filterOutByTitle = [], filterOutByFileName = [], sortAlphabetically = false } = Astro.props;
+const {
+  filterOutByTitle = [],
+  filterOutByFileName = [],
+  sortAlphabetically = false,
+  callback,
+} = Astro.props;
 
 const defaultLocale = config.defaultLocale.lang || 'en';
 const localesList = config.isMultilingual ? Object.keys(config.locales) : [defaultLocale];
@@ -137,22 +150,26 @@ if (!sortAlphabetically) {
 
 <CardGrid>
   {
-    mainList.map((item) => (
-      <LinkCard
-        title={item.entry.data.title}
-        href={`/${item.slug}`}
-        description={item.entry.data.description}
-      />
-    ))
+    mainList.map((item) => {
+      return (
+        <CustomLinkCard
+          title={item.entry.data.title}
+          href={`/${item.slug}/`}
+          description={item.entry.data.description}
+          footer={callback instanceof Function && callback(item.slug)}
+        />
+      );
+    })
   }
   {
     locale !== defaultLocale &&
       fallbackList.map((item) => (
-        <LinkCard
+        <CustomLinkCard
           class="fallback-badge"
           title={item.entry.data.title}
-          href={`/${item.slug}`}
+          href={`/${item.slug}/`}
           description={item.entry.data.description}
+          footer={callback instanceof Function && callback(item.slug)}
         />
       ))
   }

public/assets/platforms.svg

@@ -1,5 +1,36 @@
 ---
 import Directory from './Directory.astro';
+
+import { type PluginData, getPlatformSupportIcon } from 'src/components/plugins/_helpers';
+import data from 'src/components/plugins/_tableContent.json';
+
+const fallBackNames: Record<string, string> = {
+  clipboard: 'clipboard-manager',
+  'deep-linking': 'deep-link',
+  dialog: 'dialog',
+  'file-system': 'fs',
+  'http-client': 'http',
+  localhost: 'localhost',
+  logging: 'log',
+  nfc: 'nfc',
+  'os-info': 'os',
+};
+
+function fetchData(pluginSlug: string) {
+  // assuming slug is "locale?/plugin/{pluginName}"
+  const plugin = pluginSlug.split('plugin/')[1];
+  let pluginData: PluginData = data[plugin];
+  if (!pluginData) {
+    pluginData = data[fallBackNames[plugin]];
+    if (!pluginData) {
+      console.log(
+        `[Plugin Support] '${plugin}' data is missing or it's name doesn't match any existing plugin`
+      );
+      return '';
+    }
+  }
+  return pluginData.support.map((plat) => getPlatformSupportIcon(plat.level, plat.platform));
+}
 ---
 
-<Directory slug="features" />
+<Directory slug="plugin" callback={fetchData} />

src/components/list/Directory.astro

@@ -0,0 +1 @@
+_tableContent.json