Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useRef, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5// List of web-safe and popular fonts, now including monospace
62  const canvasRef = useRef<HTMLCanvasElement>(null);
63
64  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
65    const file = e.target.files?.[0];
66    if (file) {
133  };
134
135  const startDrag = (id: string, e: React.MouseEvent<HTMLCanvasElement>) => {
136    setDraggedNode(id);
137    const canvas = canvasRef.current;
158  };
159
160  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
161    if (!draggedNode) return;
162    

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

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 { createRoot } from "https://esm.sh/react-dom@18.2.0/client?dev";
3import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1";
4import React, { ErrorInfo, StrictMode, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
5import remarkGfm from "https://esm.sh/remark-gfm@4.0.0";
6
19
20// New ErrorBoundary component
21class ErrorBoundary extends React.Component<
22  { children: React.ReactNode },
23  { hasError: boolean; error?: Error }
24>
25{
26  constructor(props: { children: React.ReactNode }) {
27    super(props);
28    this.state = { hasError: false };
226  };
227
228  const handleSubmit = async (e: React.FormEvent) => {
229    e.preventDefault();
230    setResponse("");
330          }}
331        >
332          <ReactMarkdown
333            remarkPlugins={[remarkGfm]}
334            components={{
358          >
359            {response}
360          </ReactMarkdown>
361        </div>
362      )}
536        <h2>{selectedSermon.theme}</h2>
537        <small>{new Date(selectedSermon.createdAt).toLocaleString()}</small>
538        <ReactMarkdown
539          remarkPlugins={[remarkGfm]}
540          components={{
564        >
565          {selectedSermon.content}
566        </ReactMarkdown>
567      </div>
568    );

1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function linearRegression(x: number[], y: number[]) {

6
7Versions 0-17 of this val were done with Hono and server-rendering. 
8Versions 18+ were generated with Townie and use client-side React.
9
10To use this val, fork it to your account. 

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono";
3import { debounce } from "https://esm.sh/lodash-es";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import { useDropzone } from "https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0";
6import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
7import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe";
8import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton";
9
10interface TooltipProps {
11  children: ReactNode;
12  content: string;
13}

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { AnimatePresence, motion } from "https://esm.sh/framer-motion?deps=react@18.2.0,react-dom@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useCallback, useEffect, useState } from "https://esm.sh/react@18.2.0";
5
6console.log(AnimatePresence);
317}
318
319class ErrorBoundary extends React.Component {
320  constructor(props) {
321    super(props);