Val Town Code SearchReturn to Val Town

9import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
10
11export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> {
12  return html(`<h1>Hello!!</h1>`);
13})

8
9// this script runs client-side
10export const reloadOnVals = async function(vals: ValRef[]) {
11  const valVersions = await Promise.all(vals.map(getCurrentValVersionNumber));
12  // console.log("initialValVersions: ", valVersions);
22
23// experimental - don't use this
24export function reloadOnSaveHonoMiddleware(vals: ValRef[] = [rootValRef()]): MiddlewareHandler {
25  return async function(c, next) {
26    await next();
27    // don't reload on custom domains, only reload on val.run URLs
40 * @param vals to watch
41 */
42export function reloadOnSaveFetchMiddleware(
43  handler: (req: Request) => Response | Promise<Response>,
44  vals = [rootValRef()],

18];
19
20function App() {
21  const [votes, setVotes] = useState({});
22  const [selectedLocation, setSelectedLocation] = useState(null);
98}
99
100function client() {
101  createRoot(document.getElementById("root")).render(<App />);
102}
106}
107
108async function server(request: Request): Promise<Response> {
109  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
110  const SCHEMA_VERSION = 1;

9import { OpenAI } from "https://esm.town/v/std/openai";
10
11export default async function server(request: Request): Promise<Response> {
12  const url = new URL(request.url);
13  const code = url.searchParams.get("code") || "console.log(\"Hello, World!\");";
75          hljs.highlightAll();
76
77          function shuffleGradient() {
78            const t1 = Math.random();
79            const t2 = (t1 + 0.3) % 1; // Ensure colors are distinct
91            const duration = 10000;  // 10 seconds
92
93            function animate(timestamp) {
94              if (!start) start = timestamp;
95              const progress = (timestamp - start) / duration;

12}
13
14function App() {
15  const [summary, setSummary] = useState<string>("");
16  const [loading, setLoading] = useState<boolean>(true);
135}
136
137function client() {
138  createRoot(document.getElementById("root")).render(<App />);
139}
143}
144
145async function server(request: Request): Promise<Response> {
146  const url = new URL(request.url);
147

7import { default as Parse } from "npm:rss-to-json";
8
9export default async function notify() {
10  try {
11    // Fetch and parse the RSS feed

16import { renderToString } from "npm:react-dom/server";
17
18function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
19  content = content.replaceAll("\r\n", "\n");
20  const regex =
79);
80
81function applySearchReplaceBlocks(
82  code: string,
83  blocks: Array<{ searchStart: string; searchEnd: string; replace: string }>,
194// );
195
196export default function(
197  { tempValsParentFolderId, username }: { tempValsParentFolderId: string; username: string },
198) {
214  the simplest way to achieve the goal, though you can add some inline comments to explain your 
215  reasoning (not for every line, but for major groups of lines). Don't use any environment variables 
216  unless strictly necessary, for example use APIs that don't require a key, prefer internal function 
217  imports (using esm.town), and prefer putting API keys as inline variables. Use built-in Deno 
218  functions where possible. Unless specified, don't add error handling, 
219  make sure that errors bubble up to the caller.
220  Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
229  \`\`\`
230  There should be no comments like "more content here", it should be complete and directly runnable.
231  The val should create a "export default async function main" which is the main function that gets
232  executed on every HTTP request.
233  The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
236
237  // Your response should start with \`\`\`ts and end with \`\`\`.
238  // The val should create a "export default async function main() {" which
239  // is the main function that gets executed, without any arguments. Don't return a Response object,
240  // just return a plain Javascript object, array, or string.
241
244  code as possible, only changing things that are strictly necessary to change.`.replace("\n", "");
245
246  const changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) {
247    if (!currentCode) {
248      currentCode = `/** @jsxImportSource https://esm.sh/react */
253const Example = () => (<html></html>);
254
255export default async function main(req: Request): Promise<Response> {
256  const html = renderToString(<Example />);
257  return new Response(html, {
276the simplest way to achieve the goal, though you can add some inline comments to explain your 
277reasoning (not for every line, but for major groups of lines). Don't use any environment variables 
278unless strictly necessary, for example use APIs that don't require a key, prefer internal function 
279imports (using esm.town), and prefer putting API keys as inline variables. Use built-in Deno 
280functions where possible. Unless specified, don't add error handling, 
281make sure that errors bubble up to the caller.
282Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
290\`\`\`
291There should be no comments like "more content here", it should be complete and directly runnable.
292The val should create a "export default async function main" which is the main function that gets
293executed on every HTTP request.
294The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
298Once you understand the request you MUST describe each change with a *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block* per the examples below.
299ONLY EVER RETURN CODE IN A *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE BLOCK*!
300Never replace more than a single function at a time!
301Include whitespace in the SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block.
302If you leave SEARCH_END_SINGLE_LINE empty, only SEARCH_START_SINGLE_LINE (the first match) will be replaced.
371  ### Utilities
372  
373  Our Blob SDK also includes some utility functions to make working with blobs easier.
374  
375  ##### Copy
414const Example = () => (<html></html>);
415
416export default async function main(req: Request): Promise<Response> {
417  const html = renderToString(<Example />);
418  return new Response(html, {
499);
500
501export default async function main(req: Request): Promise<Response> {
502  const html = renderToString(<HelloWorld />);
503  return new Response(html, {
604);
605
606async function getPosts(): Promise<Post[]> {
607  const posts = await blob.getJSON(\`${name}_posts\`) as Post[] | undefined;
608  if (posts) {
619}
620
621export default async function main(req: Request): Promise<Response> {
622  const posts = await getPosts();
623  const html = renderToString(<HackerNewsClone posts={posts} />);
634        role: "assistant",
635        content:
636          `Certainly! Let's improve the Hacker News clone by adding a form to submit new posts and implementing upvoting functionality. Here are the changes:
637
638\`\`\`ts
688\`\`\`ts
689[SEARCH_START_SINGLE_LINE]
690async function getPosts(): Promise<Post[]> {
691[/SEARCH_START_SINGLE_LINE]
692[SEARCH_END_SINGLE_LINE]
694[/SEARCH_END_SINGLE_LINE]
695[REPLACE]
696async function getPosts(): Promise<Post[]> {
697  const posts = await blob.getJSON(\`${name}_posts\`) as Post[] | undefined;
698  return posts || [];
699}
700
701async function savePosts(posts: Post[]): Promise<void> {
702  await blob.setJSON(\`${name}_posts\`, posts);
703}
704
705async function addPost(title: string, url: string): Promise<void> {
706  const posts = await getPosts();
707  const newPost: Post = {
716}
717
718async function upvotePost(id: number): Promise<void> {
719  const posts = await getPosts();
720  const post = posts.find(p => p.id === id);
729\`\`\`ts
730[SEARCH_START_SINGLE_LINE]
731export default async function main(req: Request): Promise<Response> {
732[/SEARCH_START_SINGLE_LINE]
733[SEARCH_END_SINGLE_LINE]
735[/SEARCH_END_SINGLE_LINE]
736[REPLACE]
737export default async function main(req: Request): Promise<Response> {
738  const url = new URL(req.url);
739  
776  User instructions: ${userprompt}
777ONLY EVER RETURN CODE IN A *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE BLOCK*!
778Never replace more than a single function at a time!
779If you leave SEARCH_END_SINGLE_LINE empty, only SEARCH_START_SINGLE_LINE (the first match) will be replaced.
780Include whitespace in the SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block.
821    const writer = writable.getWriter();
822    const textEncoder = new TextEncoder();
823    function write(text) {
824      writer.write(textEncoder.encode(text));
825    }
902        </div>
903        <script>
904          function updateValName(valName) {
905            const valUrl = valName ? \`https://val.town/v/${username}/\${valName}\` : "";
906            const previewUrl = valName ? \`https://${username}-\${valName}.web.val.run\` : "";
910            document.getElementById('open-link').href = previewUrl;
911          }
912          function saveVal() {
913            if (window.codeMirrorEditor) {
914              document.getElementById("save-icon").classList.remove("hidden");
930            return false;
931          })
932          function openTab(tab) {
933            const tabButtonCode = document.getElementById("tab-button-code");
934            const tabButtonPreview = document.getElementById("tab-button-preview");
950            }
951          }
952          function toggleTab() {
953            openTab(document.getElementById("tab-panel-code").style.visibility === "visible" ? "preview" : "code");
954          }
1023          (() => {
1024            const scrollingElement = document.getElementById("conversation-container");
1025            const callback = function (mutationsList, observer) {
1026              scrollingElement.scrollTo({ left: 0, top: scrollingElement.scrollHeight, behavior: "instant" });
1027            };
1173              window.setCodeMirrorContent({ doc: '', old: ''});
1174              let fullStr = "";
1175              window.addToken = function(str) {
1176                fullStr += str;
1177                const code = fullStr.replaceAll("\`\`\`ts\\n", "").replaceAll("\`\`\`", "").replace(/^ts\\n/, '');
1211          },
1212        );
1213        (async function() {
1214          try {
1215            await sleep(300);

8};
9
10export async function sendSMS(phoneNumber: string, message: string, carrier: string): Promise<void> {
11  const carrierDomain = carriers[carrier.toLowerCase()];
12  if (!carrierDomain) {
22      text: message,
23    });
24    console.log("Email function returned:", result);
25    console.log("SMS sent successfully");
26  } catch (error) {

7const TABLE_NAME = `${KEY}_razza_users_${SCHEMA_VERSION}`;
8
9async function initDB() {
10  await sqlite.execute(`
11    CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
21}
22
23function generateQRCode(text: string): string {
24  const qr = qrcode(0, 'L');
25  qr.addData(text);
117  let existingCodes = [];
118
119  function updateExistingCodes() {
120    const category = document.getElementById('filterCategory').value;
121    fetch('/existing-qr-codes?category=' + encodeURIComponent(category))
127  }
128
129  function renderExistingCodes() {
130    const container = document.getElementById('qrCodesContainer');
131    container.innerHTML = '';
147  }
148
149  function updateCountdowns() {
150    const countdowns = document.querySelectorAll('.countdown');
151    const now = new Date();
162  }
163
164  function formatPhoneNumber(phoneNumberString) {
165    const cleaned = phoneNumberString.replace(/\\D/g, '');
166    const match = cleaned.match(/^(\\d{0,3})(\\d{0,3})(\\d{0,4})$/);
178  }
179
180  document.getElementById('phone').addEventListener('input', function(e) {
181    const input = e.target;
182    const formatted = formatPhoneNumber(input.value);
184  });
185
186  function validatePhoneNumber(phone) {
187    const phoneRegex = /^\\(\\d{3}\\)\\s\\d{3}-\\d{4}$/;
188    return phoneRegex.test(phone);
225`;
226
227export default async function server(req: Request): Promise<Response> {
228  try {
229    await initDB();

2import { sqlite } from "https://esm.town/v/std/sqlite";
3
4export default async function(req: Request): Promise<Response> {
5  const TABLE_NAME = "lab_login_users_with_times";
6  const body = await req.json();