a.tsx

/* @jsx h */
import { Fragment, h } from "preact";
import { useEffect, useState } from "preact/compat";

interface PluginInfo {
  id: string;
  name: string;
  author: string;
  description: string;
  repo: string;
}

const fetchPlugins = async () =>
  await window.fetch(
    "https://raw.githubusercontent.com/obsidianmd/obsidian-releases/HEAD/community-plugins.json"
  );

const PluginTable = async () => {
  let [plugins, setPlugins] = useState([]);

  useEffect(() => {
    (async () => {
      const resp = await fetchPlugins();
      if (!resp.ok) {
        console.error(resp);
        return;
      }
      setPlugins(await resp.json());
    })();
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>name</th>
          <th>description</th>
          <th>author</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          {plugins.map((item) => (
            <Fragment key={item.id}>
              <td>{item.name}</td>
              <td>{item.description}</td>
              <td>{item.author}</td>
            </Fragment>
          ))}
        </tr>
      </tbody>
    </table>
  );
};

export { PluginTable };