152 "slug": "post-mortem-esm-sh",
153 "link": "/blog/post-mortem-esm-sh",
154 "description": "Some vals experienced lockfile and React errors due to breaking changes in esm.sh",
155 "pubDate": "Thu, 16 Jan 2025 00:00:00 GMT",
156 "author": "Steve Krouse",
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import SocialLinks from "./SocialLinks.tsx";
3import LogoMark from "./LogoMark.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono@3.12.0";
3import { renderToStaticMarkup } from "https://esm.sh/react-dom@18.2.0/server";
4import { Favicon } from "../components/LogoMark.tsx";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { formatDate, dayOfWeek } from "./util.tsx";
3
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono@3.12.0";
3import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
4import { BlogPostComponent } from "../components/BlogPost.tsx";
5import { getBlogPostBySlug } from "../utils/get-new-posts.ts";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import { func } from "https://esm.sh/@types/prop-types@15.7.14";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { router } from "jsr:@denosaurs/rutt";
7
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono@3.12.0";
3import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
4import { BlogPostComponent } from "../components/BlogPost.tsx";
5import { getBlogPostBySlug } from "../utils/get-new-posts.ts";
1/** @jsxImportSource https://esm.sh/react */
2import DOMPurify from "https://esm.sh/dompurify";
3import { marked } from "https://esm.sh/marked";
4import React, { useEffect, useRef, useState } from "https://esm.sh/react";
5import { createRoot } from "https://esm.sh/react-dom/client";
6
7function App() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React from "https://esm.sh/react@18.2.0";
4import { ValCard, ValList } from "./components/Card.tsx";
5
6function App() {
7 const [vals, setVals] = React.useState(null);
8 const [loading, setLoading] = React.useState(true);
9 const [error, setError] = React.useState(null);
10 const [page, setPage] = React.useState(0);
11 const limit = 20;
12
31 };
32
33 React.useEffect(() => {
34 fetchVals(page * limit);
35 }, [page]);
14
15- **Backend**: Hono.js running on Deno (Val Town's runtime)
16- **Frontend**: React with Tailwind CSS (via Twind)
17- **API**: Val Town's public API
18
24โโโ frontend/
25โ โโโ components/
26โ โ โโโ App.tsx # Main React component
27โ โ โโโ ValList.tsx # Component to display list of vals
28โ โ โโโ ValCard.tsx # Component to display a single val
29โ โโโ index.html # Main HTML template
30โ โโโ index.tsx # React entry point
31โโโ README.md
32โโโ shared/
