1/** @jsxImportSource https://esm.sh/react@19 */
2import { useEffect, useState } from "https://esm.sh/react@19";
3
4export const useQuery = (deps, asyncFn) => {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { BlueskyIcon, DiscordIcon, GitHubIcon, RSSIcon, TwitterIcon } from "./icons.tsx";
3
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { DataEditor } from "https://esm.sh/@glideapps/glide-data-grid@6.0.3";
3import { A, R } from "https://esm.sh/@mobily/ts-belt@3.13.1";
4import { AllCommunityModule, ModuleRegistry } from "https://esm.sh/ag-grid-community@33.0.3";
5import { AgGridReact } from "https://esm.sh/ag-grid-react@33.0.3?deps=react@18.2.0";
6import prettyBytes from "https://esm.sh/pretty-bytes@6.1.1";
7import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
8import React, { useEffect, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0";
9import * as XLSX from "https://esm.sh/xlsx@0.18.5";
10
24 const fileInputRef = useRef<HTMLInputElement>(null);
25
26 function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
27 event.preventDefault();
28 event.stopPropagation();
30 }
31
32 function handleDragLeave(event: React.DragEvent<HTMLDivElement>) {
33 event.preventDefault();
34 event.stopPropagation();
36 }
37
38 async function handleDrop(event: React.DragEvent<HTMLDivElement>) {
39 event.preventDefault();
40 event.stopPropagation();
51 }
52
53 async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
54 const uploadedFile = event.target.files?.[0];
55 if (uploadedFile && supportedMimeTypes.includes(uploadedFile.type)) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useRef, useState } from "https://esm.sh/react@18.2.0";
4
5// Mockup templates for different products and scenarios
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function MinePredictor() {
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useEffect, useState } from "https://esm.sh/react@19";
4import { formatAddress, formatJSON, MonoButtonWithStatus, Section } from "./ui.tsx";
5
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2import Fuse from "https://esm.sh/fuse.js@7.1.0";
3import { useEffect, useMemo, useState } from "https://esm.sh/react@19.0.0";
4import { createRoot } from "https://esm.sh/react-dom@19.0.0/client";
5
6// Client-side App component
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",
