nenjotsu · October 11, 2021 11:44
diff --git a/deno-strapi-sample.tsx b/deno-strapi-sample.tsx
 // @ts-nocheck
 // @ts-ignore
 /// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.fetchevent.d.ts" />
 /// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.window.d.ts" />

 // @ts-ignore
 import * as React from "https://esm.sh/[email protected]";
 // @ts-ignore
 import * as ReactDOMServer from "https://esm.sh/[email protected]/server";
 // @ts-ignore
 import { createElement as h } from "https://esm.sh/[email protected]";

 // Because VSCode occasionally complains that Deno is not defined.
 const STRAPI_API_URL =
  // @ts-ignore
  Deno.env.get("STRAPI_API_URL") || "http://54.254.168.182:1337";

 // http://54.254.168.182:1337/bank-account-types

 interface BankAccountType {
  // name: string;
  // description: string;
  // github: string;
  // stars: number;

  id: number;
  account_type: string;
  published_at: string;
  created_at: string;
  updated_at: string;
 }

 interface Props {
  packages: BankAccountType[];
 }

 function App({ packages }: Props) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs="
          crossOrigin="anonymous"
        />
        <title>Hello from JSX</title>
      </head>
      <body>
        <div className="container">
          <h1>Hello, World!</h1>
          <table className="table">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Description</th>
                <th scope="col">Stars</th>
                <th scope="col">URL</th>
              </tr>
            </thead>
            <tbody>
              {packages.map((pkg: BankAccountType) => (
                <tr>
                  <th scope="row">{pkg.account_type}</th>
                  {/* <td>{pkg.description}</td>
                  <td>{pkg.stars}</td>
                  <td>
                    <a href={pkg.github}>{pkg.github}</a>
                  </td> */}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </body>
    </html>
  );
 }

 async function getData(path: string) {
  const url = `${STRAPI_API_URL}${path}`;
  const response = await fetch(url, {
    headers: {
      "Content-Type": "application/json"
    }
  });
  return response.json();
 }

 // @ts-ignore
 addEventListener("fetch", async (event: FetchEvent) => {
  // Fetch data.
  const packages = await getData("/bank-account-types");

  // Render React components to a string.
  const str = ReactDOMServer.renderToString(<App packages={packages} />);

  // Prepend the DOCTYPE for better compatibility.
  const body = `<!DOCTYPE html>${str}`;

  const response = new Response(body, {
    headers: { "content-type": "text/html; charset=utf-8" }
  });

  event.respondWith(response);
 });
	// @ts-nocheck
	// @ts-ignore
	/// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.fetchevent.d.ts" />
	/// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.window.d.ts" />

	// @ts-ignore
	import * as React from "https://esm.sh/[email protected]";
	// @ts-ignore
	import * as ReactDOMServer from "https://esm.sh/[email protected]/server";
	// @ts-ignore
	import { createElement as h } from "https://esm.sh/[email protected]";

	// Because VSCode occasionally complains that Deno is not defined.
	const STRAPI_API_URL =
	// @ts-ignore
	Deno.env.get("STRAPI_API_URL") \|\| "http://54.254.168.182:1337";

	// http://54.254.168.182:1337/bank-account-types

	interface BankAccountType {
	// name: string;
	// description: string;
	// github: string;
	// stars: number;

	id: number;
	account_type: string;
	published_at: string;
	created_at: string;
	updated_at: string;
	}

	interface Props {
	packages: BankAccountType[];
	}

	function App({ packages }: Props) {
	return (
	<html lang="en">
	<head>
	<meta charSet="utf-8" />
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
	integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs="
	crossOrigin="anonymous"
	/>
	<title>Hello from JSX</title>
	</head>
	<body>
	<div className="container">
	<h1>Hello, World!</h1>
	<table className="table">
	<thead>
	<tr>
	<th scope="col">Name</th>
	<th scope="col">Description</th>
	<th scope="col">Stars</th>
	<th scope="col">URL</th>
	</tr>
	</thead>
	<tbody>
	{packages.map((pkg: BankAccountType) => (
	<tr>
	<th scope="row">{pkg.account_type}</th>
	{/* <td>{pkg.description}</td>
	<td>{pkg.stars}</td>
	<td>
	<a href={pkg.github}>{pkg.github}</a>
	</td> */}
	</tr>
	))}
	</tbody>
	</table>
	</div>
	</body>
	</html>
	);
	}

	async function getData(path: string) {
	const url = `${STRAPI_API_URL}${path}`;
	const response = await fetch(url, {
	headers: {
	"Content-Type": "application/json"
	}
	});
	return response.json();
	}

	// @ts-ignore
	addEventListener("fetch", async (event: FetchEvent) => {
	// Fetch data.
	const packages = await getData("/bank-account-types");

	// Render React components to a string.
	const str = ReactDOMServer.renderToString(<App packages={packages} />);

	// Prepend the DOCTYPE for better compatibility.
	const body = `<!DOCTYPE html>${str}`;

	const response = new Response(body, {
	headers: { "content-type": "text/html; charset=utf-8" }
	});

	event.respondWith(response);
	});