1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import cronstrue from "https://esm.sh/cronstrue";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4import { chat } from "https://esm.town/v/stevekrouse/openai?v=19";
5import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
6
7export default function(req: Request) {
8 const url = new URL(req.url);
9 if (req.method === "GET" && url.pathname === "/") {
10 return react_http({
11 component: App,
12 sourceURL: import.meta.url,
26 const [loading, setLoading] = useState(false);
27 const [cron, setCron] = useState("0 16 * * 1-5");
28 const onSubmit: React.FormEventHandler<HTMLFormElement> = async function(e) {
29 e.preventDefault();
30 setLoading(true);
6 <script type="module">
7 import { ${component.name} } from "${sourceURL}";
8 import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
9 import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
10 createRoot(document.body).render(jsx(${component.name}, {}));
11 </script>
12## TODO
13
14- [ ] simplify by removing HTMX (try doing the form as a GET request, manual JS script, or client side react)
15- [ ] make the timezone picker better (fewer options, searchable)
16- [ ] add a copy button?
17
18Migrated from folder: Archive/cron_client_react_fork
1/** @jsxImportSource npm:react **/
2import { renderToString } from "npm:react-dom@18/server";
3
4export default (req: Request) => {
1/** @jsxImportSource https://esm.sh/preact **/
2
3import { blob } from "https://esm.town/v/std/blob?v=12";
4import { compile } from "npm:@mdx-js/mdx";
5import { Hono } from "npm:hono";
6import { render } from "npm:preact-render-to-string";
7import remarkFrontmatter from "npm:remark-frontmatter";
8import remarkMdxFrontmatter from "npm:remark-mdx-frontmatter";
51 const vfile = await compile(await resp.text(), {
52 jsx: true,
53 jsxImportSource: "https://esm.sh/preact",
54 remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
55 });
63
64 const vfile = await compile(await resp.text(), {
65 jsxImportSource: "https://esm.sh/preact",
66 remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
67 });
1/** @jsxImportSource https://esm.sh/preact */
2import { activeGTrainAlerts } from "https://esm.town/v/pbt/gtrainalerts?v=36";
3import { render } from "npm:preact-render-to-string";
4import Uwuifier from "npm:uwuifier";
5
6 <script type="module">
7 import { ${component.name} } from "${url}"
8 import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
9 import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
10 createRoot(document.body).render(jsx(App, {}));
11 </script>
1/** @jsxImportSource https://esm.sh/react */
2import { useState } from "https://esm.sh/react@18.2.0";
3import react_http from "https://esm.town/v/stevekrouse/react_http";
4
5const BASE_URL = "https://stevekrouse-cors_example_backend.web.val.run";
30}
31
32export default react_http(App, import.meta.url);
10You can override them if you wish to disallow CORS. Check out [@neverstew/setCorsHeaders](https://www.val.town/v/neverstew/setCorsHeaders) for the easiest way to do this in your code.
11
12This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.
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
