Search results for "react client side"

sqliteExplorerApp

@pom421

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

0

HTTP (deprecated)

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

niceTodoList

@maxm

* This is a minimalist to-do list app using server-side rendering without any client-side JavaScript. * It uses Val Town's SQLite for data persistence, Deno's standard library for HTML escaping, * and custom SVG icons for a cohesive design.

0

HTTP

* This is a minimalist to-do list app using server-side rendering without any client-side JavaScript.

* It uses Val Town's SQLite for data persistence, Deno's standard library for HTML escaping,

* and custom SVG icons for a cohesive design.

import { escapeHtml } from "https://deno.land/x/escape_html/mod.ts";

// Server-side only code

export default async function server(request: Request): Promise<Response> {

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

sqliteExplorerApp

@jpaulgale

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

0

HTTP (deprecated)

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

animatedReadmeSVG

@maxm

Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" /> </p> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" /> </p>

3

4

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

const genSVG = (request: Request): string => {

</svg>,

export const reactExample = (request: Request) =>

new Response(

multirouteHono

@ttodosi

🌐 Multi-Route Website with Hono

2

0

HTTP (deprecated)

<title>${personalData.name} | Server-side Hono</title>

<style>

${websiteStyles}

<h2>Welcome to My Portfolio</h2>

<p>{personalData.summary}</p>

<p><strong>This website is rendered server-side with Hono.</strong></p>

<p>Check out the <a href='https://www.val.town/v/iamseeley/multirouteHono'>source</a> and start building your own site!

</main>

myReactApp

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

0

Script

import { initializeReactApp as initializeReactApp2 } from "https://esm.town/v/liamdanielduffy/initializeReactApp";

import { myReactComponent as myReactComponent2 } from "https://esm.town/v/liamdanielduffy/myReactComponent";

import { addReactFromCDN } from "https://esm.town/v/liamdanielduffy/addReactFromCDN";

export function myReactApp() {

const loadReact = addReactFromCDN();

const myReactComponent = myReactComponent2();

const initializeReactApp = initializeReactApp2();

return [loadReact, myReactComponent, initializeReactApp].join(" ");

wasmBlobHost

@tmcw

@jsxImportSource https://esm.sh/react

0

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=27";

import { blob } from "https://esm.town/v/std/blob?v=12";

import { Buffer } from "node:buffer";

import { createHash } from "node:crypto";

import { renderToString } from "npm:react-dom/server";

const { author, name } = extractValInfo(import.meta.url);

const WASM_BLOB_PREFIX = `${author}-${name}-wasm-wasm-blob`;

trpcClient

@andreterron2

An interactive, runnable TypeScript val by andreterron2

0

Script

export const trpcClient = await import("npm:@trpc/client");

hydrate_islands

@pomdtr

Demo: @pomdtr/example_ssr Todo: [ ] only hydrate island when they enter the viewport

0

Script

const islands = Array.from(document.querySelectorAll("[data-hydration-src]"));

if (islands.length > 0) {

const { hydrateRoot } = await import("https://esm.sh/react-dom@18.2.0/client");

const { jsx: _jsx } = await import("https://esm.sh/react@18.2.0/jsx-runtime");

for (const island of islands) {

let src = island.getAttribute("data-hydration-src");

sqliteExplorerApp

@stef

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

0

HTTP (deprecated)

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

dot_com

@stevekrouse

stevekrouse.com - my personal website This val hosts my personal website. The view data is stored in Val Town SQLite - @std/sqlite. It used to live on Github Pages, which is why I proxy over requests to certain blog posts over to the Github Pages site still. Todos [ ] Speed up page load by loading sqlite data later like in @healeycodes/steve_web [ ] Store more (legally storable) analytics data, and maybe make a sparkline! [ ] Add some sort of way to contact me [ ] Move over all my blog posts from Github Pages (maybe into @std/blob as a CMS?)

2

3

HTTP

/** @jsxImportSource https://esm.sh/react */

import { email } from "https://esm.town/v/std/email?v=11";

import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";

import { renderToString } from "npm:react-dom/server";

const linkClass = "text-blue-500 hover:underline";

{ children, href }: {

children?: React.ReactNode;

href: string;

myApi

@sbeben

An interactive, runnable TypeScript val by sbeben

0

Script

root;

">Hello World</div><script src=";

path_to_your_react_app.js;

"></script></body></html>`;

weatherGPT

@seflless

If you fork this, you'll need to set OPENAI_API_KEY in your Val Town Secrets .

0

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import { Canvas } from "https://esm.sh/react-three-fiber";

import { useEffect, useState } from "https://esm.sh/react@18.2.0";

import { html } from "https://esm.town/v/stevekrouse/html?v=5";

return html(`<html><head></head><body><script type="module">

import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";

import { WeatherSuggest } from "https://esm.town/v/seflless/weatherGPT";

recordWebsitePreparer

@willthereader

@jsxImportSource https://esm.sh/react

0

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

function preparestoryForAlgolia(storyTitle, storyText) {

dot_com

@vpontis

stevekrouse.com - my personal website This val hosts my personal website. The view data is stored in Val Town SQLite - @std/sqlite. It used to live on Github Pages, which is why I proxy over requests to certain blog posts over to the Github Pages site still. Todos [ ] Speed up page load by loading sqlite data later like in @healeycodes/steve_web [ ] Store more (legally storable) analytics data, and maybe make a sparkline! [ ] Add some sort of way to contact me [ ] Move over all my blog posts from Github Pages (maybe into @std/blob as a CMS?)

0

HTTP

/** @jsxImportSource https://esm.sh/react */

import { email } from "https://esm.town/v/std/email?v=11";

import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";

import { renderToString } from "npm:react-dom/server";

const linkClass = "text-blue-500 hover:underline";

{ children, href }: {

children?: React.ReactNode;

href: string;