Val Town Code SearchReturn to Val Town

1import deno from "@deno/vite-plugin";
2import build from "@hono/vite-build/deno";
3import react from "@vitejs/plugin-react";
4import { defineConfig } from "vite";
5
11      }),
12      deno(),
13      react(),
14    ],
15  };

3  "specifiers": {
4    "npm:@deno/vite-plugin@^1.0.4": "1.0.4_vite@6.2.3",
5    "npm:@types/react-dom@^19.0.4": "19.0.4_@types+react@19.0.10",
6    "npm:@types/react@^19.0.10": "19.0.10",
7    "npm:@vitejs/plugin-react@^4.3.4": "4.3.4_vite@6.2.3_@babel+core@7.26.10",
8    "npm:react-dom@19": "19.0.0_react@19.0.0",
9    "npm:react@19": "19.0.0",
10    "npm:vite@*": "6.2.3",
11    "npm:vite@^6.1.1": "6.2.3"
111      ]
112    },
113    "@babel/plugin-transform-react-jsx-self@7.25.9_@babel+core@7.26.10": {
114      "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
115      "dependencies": [
118      ]
119    },
120    "@babel/plugin-transform-react-jsx-source@7.25.9_@babel+core@7.26.10": {
121      "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
122      "dependencies": [
349      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
350    },
351    "@types/react-dom@19.0.4_@types+react@19.0.10": {
352      "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
353      "dependencies": [
354        "@types/react"
355      ]
356    },
357    "@types/react@19.0.10": {
358      "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
359      "dependencies": [
361      ]
362    },
363    "@vitejs/plugin-react@4.3.4_vite@6.2.3_@babel+core@7.26.10": {
364      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
365      "dependencies": [
366        "@babel/core",
367        "@babel/plugin-transform-react-jsx-self",
368        "@babel/plugin-transform-react-jsx-source",
369        "@types/babel__core",
370        "react-refresh",
371        "vite"
372      ]
476      ]
477    },
478    "react-dom@19.0.0_react@19.0.0": {
479      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
480      "dependencies": [
481        "react",
482        "scheduler"
483      ]
484    },
485    "react-refresh@0.14.2": {
486      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="
487    },
488    "react@19.0.0": {
489      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="
490    },
549    "dependencies": [
550      "npm:@deno/vite-plugin@^1.0.4",
551      "npm:@types/react-dom@^19.0.4",
552      "npm:@types/react@^19.0.10",
553      "npm:@vitejs/plugin-react@^4.3.4",
554      "npm:react-dom@19",
555      "npm:react@19",
556      "npm:vite@^6.1.1"
557    ]

8  "compilerOptions": {
9    "lib": ["ES2020", "DOM", "DOM.Iterable"],
10    "jsx": "react-jsx",
11    "jsxImportSource": "react",
12    "jsxImportSourceTypes": "@types/react"
13  },
14  "imports": {
17    "@hono/vite-build/deno": "npm:@hono/vite-build/deno",
18    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
19    "@types/react": "npm:@types/react@^19.0.10",
20    "@types/react-dom": "npm:@types/react-dom@^19.0.4",
21    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.4",
22    "react": "npm:react@^19.0.0",
23    "react-dom": "npm:react-dom@^19.0.0",
24    "vite": "npm:vite@^6.1.1"
25  }

1import deno from "@deno/vite-plugin";
2import build from "@hono/vite-build/deno";
3import react from "@vitejs/plugin-react";
4import { defineConfig } from "vite";
5
11      }),
12      deno(),
13      react(),
14    ],
15  };

1# Vite + Deno + React + TypeScript + Val Town
2
3

8  "compilerOptions": {
9    "lib": ["ES2020", "DOM", "DOM.Iterable"],
10    "jsx": "react-jsx",
11    "jsxImportSource": "react",
12    "jsxImportSourceTypes": "@types/react"
13  },
14  "imports": {
17    "@hono/vite-build/deno": "npm:@hono/vite-build/deno",
18    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
19    "@types/react": "npm:@types/react@^19.0.10",
20    "@types/react-dom": "npm:@types/react-dom@^19.0.4",
21    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.4",
22    "react": "npm:react@^19.0.0",
23    "react-dom": "npm:react-dom@^19.0.0",
24    "vite": "npm:vite@^6.1.1"
25  }

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
5const NO_PHRASES = [

8  UserButton,
9  useUser,
10} from "@clerk/clerk-react";
11import { clerkMiddleware, getAuth } from "@hono/clerk-auth";
12import { id, init, lookup, tx } from "@instantdb/react";
13import {
14  IconChevronDown,
24  IconUser,
25  IconX,
26} from "@tabler/icons-react";
27import useEmblaCarousel, { EmblaCarouselType } from "embla-carousel-react";
28import { Hono } from "hono";
29import React, { StrictMode, useCallback, useEffect, useMemo, useRef, useState } from "react";
30import { createRoot } from "react-dom/client";
31import { renderToString } from "react-dom/server";
32import { BrowserRouter, Link, Route, Routes, useLocation, useParams } from "react-router-dom";
33import { toast, Toaster } from "sonner";
34import { Drawer } from "vaul";
35
36function SideDrawer({ trigger, title, content, initialOpen = false }: {
37  trigger: React.JSX.Element;
38  title: string;
39  content: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.JSX.Element;
40  initialOpen?: boolean;
41}) {
42  const [open, setOpen] = React.useState(initialOpen);
43
44  return (
67
68function BottomDrawer({ trigger, title, content, initialOpen = false }: {
69  trigger: React.JSX.Element;
70  title: string;
71  content: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.JSX.Element;
72  initialOpen?: boolean;
73}) {
74  const [open, setOpen] = React.useState(initialOpen);
75
76  return (
119  const getQuantity = () => product?.cartItems?.[0]?.quantity || 0;
120
121  const handleDecreaseQuantity = async (e: React.MouseEvent) => {
122    e.stopPropagation();
123
143  };
144
145  const handleIncreaseQuantity = async (e: React.MouseEvent) => {
146    e.stopPropagation();
147
277    product: any;
278    activeProductId: string | null;
279    setActiveProductId: React.Dispatch<React.SetStateAction<string>>;
280  },
281) {
303  }, [isActive, setActiveProductId]);
304
305  const handleButtonClick = async (e: React.MouseEvent) => {
306    e.stopPropagation();
307
318  };
319
320  const handleQuantitySelectorClick = (e: React.MouseEvent) => {
321    e.stopPropagation();
322  };
323
324  const handleDecreaseQuantity = async (e: React.MouseEvent) => {
325    e.stopPropagation();
326
347  };
348
349  const handleIncreaseQuantity = async (e: React.MouseEvent) => {
350    e.stopPropagation();
351
431}
432
433function ProductCarousel({ children }: { children: React.ReactNode }) {
434  const [emblaRef, emblaApi] = useEmblaCarousel({
435    axis: "x",
1162
1163app.get("*", async (c) => {
1164  const { id, init, lookup, tx } = await import("https://esm.sh/@instantdb/admin@0.19.2?bundle-deps&deps=react@18.2.0");
1165  const db = init({
1166    appId: "880cb820-b987-4019-9b0a-7805721e74d2",

1import deno from "@deno/vite-plugin";
2import tailwindcss from "@tailwindcss/vite";
3import react from "@vitejs/plugin-react";
4import { defineConfig } from "vite";
5
6// https://vite.dev/config/
7export default defineConfig({
8  plugins: [deno(), react(), tailwindcss()],
9});

6    <link href="/src/main.css" rel="stylesheet" />
7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8    <title>Vite + React + TS</title>
9  </head>
10  <body>