mizchi · April 28, 2025 12:49
diff --git a/peraichi.html b/peraichi.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>esm.sh+react+tailwind demo</title>
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/[email protected]",
        "react-dom/": "https://esm.sh/[email protected]/",
        "msw": "https://esm.sh/[email protected]/"
      }
    }
  </script>
  <script type="module" src="https://esm.sh/tsx"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script type="text/babel" type="module">
    // === MSW setup
    import { setupWorker } from "msw/browser";
    import { http, HttpResponse } from 'msw';
    await setupWorker(
      http.get('/api/hello', async () => {
        await new Promise((resolve) => setTimeout(resolve, 500));
        return HttpResponse.json({
          name: 'mizchi',
        });
      }),
    ).start();
    // === Application
    import { createRoot } from "react-dom/client";
    import React, { use, Suspense } from "react";

    const App = ({ loadingPromise }) => {
      const data = use(loadingPromise);
      return (
        <div className="flex flex-col items-center p-8">
          <h1 className="text-2xl font-bold text-blue-700 mb-4 hover:text-blue-500 transition-colors">Hello, {data.name}!</h1>
          <p className="text-gray-700">This is a React application</p>
        </div>
      );
    };
    const root = createRoot(document.getElementById('root'));
    const loadingPromise = fetch('/api/hello').then((r) => r.json())
    root.render(
      <Suspense fallback='loading...'>
        <App loadingPromise={loadingPromise} />
      </Suspense>);
  </script>
 </head>

 <body>
  <div id="root"></div>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>esm.sh+react+tailwind demo</title>
	<script type="importmap">
	{
	"imports": {
	"react": "https://esm.sh/[email protected]",
	"react-dom/": "https://esm.sh/[email protected]/",
	"msw": "https://esm.sh/[email protected]/"
	}
	}
	</script>
	<script type="module" src="https://esm.sh/tsx"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	<script type="text/babel" type="module">
	// === MSW setup
	import { setupWorker } from "msw/browser";
	import { http, HttpResponse } from 'msw';
	await setupWorker(
	http.get('/api/hello', async () => {
	await new Promise((resolve) => setTimeout(resolve, 500));
	return HttpResponse.json({
	name: 'mizchi',
	});
	}),
	).start();
	// === Application
	import { createRoot } from "react-dom/client";
	import React, { use, Suspense } from "react";

	const App = ({ loadingPromise }) => {
	const data = use(loadingPromise);
	return (
	<div className="flex flex-col items-center p-8">
	<h1 className="text-2xl font-bold text-blue-700 mb-4 hover:text-blue-500 transition-colors">Hello, {data.name}!</h1>
	<p className="text-gray-700">This is a React application</p>
	</div>
	);
	};
	const root = createRoot(document.getElementById('root'));
	const loadingPromise = fetch('/api/hello').then((r) => r.json())
	root.render(
	<Suspense fallback='loading...'>
	<App loadingPromise={loadingPromise} />
	</Suspense>);
	</script>
	</head>

	<body>
	<div id="root"></div>
	</body>

	</html>