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 */
2import React from "https://esm.sh/react@18.2.0";
3import { BlogPost as BlogPostType } from "../utils/types.ts";
4import Byline from "./Byline.tsx";
20
21We support static text files, TypeScript projects that work on the backend
22and the frontend, and frameworks like React. There are lots of batteries built-in:
23sending and receiving emails, an SQLite, blob storage, scheduling code
24to run, and all of the functionality unlocked by importing modules from
14| | Before | Now |
15|---------------------|---------------------------|------------|
16| **Rendering** | Astro | React |
17| **Version control** | GitHub | Val Town |
18| **Text editing** | Local editor | Val Town |
18โโโ frontend/
19โ โโโ index.html # Main HTML template
20โ โโโ index.tsx # React frontend entry point
21โ โโโ style.css # Custom styles
22โโโ shared/
36
37- **Backend**: Hono (TypeScript)
38- **Frontend**: React 18.2.0 with TypeScript
39- **Styling**: TailwindCSS
40- **Storage**: Val Town Blob Storage
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0";
4import type { Quote, WeatherData, GratitudeEntry, AppData } from "../shared/types.ts";
5
62 };
63
64 const submitGratitude = async (e: React.FormEvent) => {
65 e.preventDefault();
66 if (!gratitudeText.trim() || isSubmitting) return;
