1# Client Side React Helper
2
3## Example Usage
4
5```tsx
6/** @jsxImportSource https://esm.sh/react */
7import { useState } from "https://esm.sh/react@18.2.0";
8import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
9
10export function App() {
24
25export default () =>
26 react_http({
27 component: App,
28 sourceURL: import.meta.url,
38#### Only use https imports
39
40The val with your React component will be imported in the browser. Thus, only use `https` imports in this val and any that it imports. Replace any `npm:` with `https://esm.sh/` and everything should work great.
41
42Migrated from folder: Archive/react_http
1# Server-side Render React Mini Framework
2
3This is very experimental, more of a prototype of an architecture, than a true framework
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
5import { html } from "https://esm.town/v/stevekrouse/html";
6
7// button that's disabled until client react hydrates
8export const Button = (props) => {
9 const [clientHydrated, setClientHydrated] = useState(false);
51 const props = await loader(req);
52 const script = `
53 import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
54 import { jsx as _jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
55 import { Component } from "https://esm.town/v/${author}/${name}";
56
1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2
3import { Studio } from "https://esm.sh/@libsqlstudio/gui?deps=react@18.3.1";
4import { createRoot } from "https://esm.sh/react-dom@18.3.1/client";
5import { useMemo } from "https://esm.sh/react@18.3.1";
6import ValtownDriver from "https://esm.town/v/pomdtr/libsqlstudio_driver";
7
1/** @jsxImportSource https://esm.sh/preact */
2import cheerio from "npm:cheerio";
3import { render } from "npm:preact-render-to-string";
4
5export let isBoeing = async (airline, number) => {
1/** @jsxImportSource https://esm.sh/preact */
2import cheerio from "npm:cheerio";
3import { render } from "npm:preact-render-to-string";
4
5export let isBoeing = async (airline, number) => {
1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3// import Quill from "npm:quill";
4
3This val can be used in other vals to send notifications to a segment using [OneSignal's REST API](https://documentation.onesignal.com/reference/create-notification)
4
5This is really handy if you want to send push notifications to your phone without building a native app! I built a barebones React PWA that asks for a password then loads the OneSignal Web SDK that I deployed to [Netlify](https://www.netlify.com/) for free. OneSignal has [easy to follow docs](https://documentation.onesignal.com/docs/web-sdk-setup) so you can build this functionality into a React, Angular, Vue app or even Wordpress! Then [install the PWA](https://www.bitcot.com/how-to-install-a-pwa-to-your-device/) on your platform of choice and you're off to the races!
6
7## Setup
1/** @jsxImportSource npm:react **/
2import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
3import { load } from "npm:cheerio";
4import { renderToString } from "npm:react-dom@18/server";
5
6export default async (req: Request) => {
5 type PersistentState,
6 persistentStateLazy,
7 persistentStateReactive,
8} from "https://esm.town/v/postpostscript/persistentState";
9import { blob } from "https://esm.town/v/std/blob";
17};
18
19export async function reactiveStateBlob<T extends Record<string, unknown>>(
20 getDefault: PersistentStateGetDefault<T>,
21 opts?: {
28 const _key = opts?.key ?? (() => {
29 const { handle, name } = rootValRef();
30 return `reactiveStateBlob:${handle}/${name}`;
31 })();
32
38 : undefined;
39
40 const cache = persistentStateBlobReactive({
41 ...opts,
42 key: _key,
65}
66
67export function persistentStateBlobReactive<T extends Record<string, unknown>>(
68 opts: PersistentStateBlobOptions<T>,
69): PersistentState<T> {
70 return persistentStateReactive(persistentStateBlob(opts));
71}
72
