└── examples ├── basic ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── .vscode │ └── settings.json ├── .env ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json ├── server.test.ts ├── src │ └── app.tsx └── server.tsx ├── with-csr ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── client.tsx ├── deno.json ├── importMap.json ├── build.ts ├── server.test.ts ├── src │ └── app.tsx └── server.tsx ├── with-esm ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── client.js ├── deno.json ├── build.js ├── importMap.json ├── src │ └── app.js └── server.js ├── with-fly-io ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── Dockerfile ├── client.tsx ├── deno.json ├── importMap.json ├── src │ └── app.tsx ├── build.ts ├── server.tsx └── fly.toml ├── with-netlify-(WIP) ├── .gitignore ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── README.md ├── client.tsx ├── deno.json ├── importMap.json ├── build.ts ├── server.tsx └── src │ └── app.tsx ├── with-preact ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── client.tsx ├── deno.json ├── importMap.json ├── build.ts ├── server.tsx └── src │ ├── app.tsx │ └── Counter.tsx ├── with-trpc ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── src │ ├── trpc │ │ ├── trpc.ts │ │ ├── client.tsx │ │ └── server.tsx │ ├── server │ │ └── router.ts │ ├── query-client.tsx │ └── app.tsx ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json └── server.tsx ├── with-twind ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── src │ ├── post.tsx │ ├── twind.config.js │ ├── twind.ts │ └── app.tsx ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json └── server.tsx ├── with-unocss ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ └── uno.css ├── .vscode │ └── settings.json ├── client.tsx ├── deno.json ├── importMap.json ├── build.ts ├── server.test.ts ├── server.tsx ├── dev.ts └── src │ └── app.tsx ├── with-wouter ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── src │ ├── pages │ │ ├── About.tsx │ │ └── Home.tsx │ ├── app.tsx │ └── context │ │ └── SearchParams.tsx ├── deno.json ├── client.tsx ├── build.ts ├── importMap.json ├── server.test.ts └── server.tsx ├── with-emotion ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── client.tsx ├── deno.json ├── build.ts ├── src │ └── app.tsx ├── importMap.json ├── server.tsx └── server │ └── emotion.ts ├── with-islands ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── deno.json ├── importMap.json ├── build.ts ├── server.tsx └── src │ ├── Counter.tsx │ └── app.tsx ├── with-service-worker ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── style.css │ └── service-worker.js ├── client.tsx ├── deno.json ├── importMap.json ├── server.tsx ├── src │ └── app.tsx └── build.ts ├── with-stitches ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json ├── src │ ├── theme.tsx │ ├── stitches.config.ts │ └── app.tsx └── server.tsx ├── ultra-website ├── content │ ├── docs │ │ ├── use-env.mdx │ │ ├── use-async.mdx │ │ ├── use-island.mdx │ │ ├── use-server-context.mdx │ │ ├── use-server-inserted-html.mdx │ │ ├── use-preload.mdx │ │ ├── hooks.mdx │ │ ├── routing.mdx │ │ ├── middleware.mdx │ │ ├── fly.mdx │ │ ├── prerequisites.mdx │ │ ├── data-fetching.mdx │ │ ├── code-splitting.mdx │ │ ├── styling.mdx │ │ ├── deno-deploy.mdx │ │ ├── building.mdx │ │ ├── use-asset.mdx │ │ ├── knowledge-base.mdx │ │ └── create-project.mdx │ ├── anti-bundle.mdx │ ├── philosophy.mdx │ └── docs.mdx ├── public │ ├── robots.txt │ ├── beast.webp │ ├── orcs.webp │ ├── share.jpg │ ├── share.webp │ ├── favicon.ico │ ├── grid_1.webp │ ├── grid_2.webp │ ├── archangel.webp │ ├── paradise.webp │ ├── styles │ │ ├── fancy.woff2 │ │ ├── SG-Linear.woff2 │ │ └── docs.css │ ├── ultra.svg │ └── service-worker.js ├── README.md ├── src │ ├── components │ │ ├── Docs.tsx │ │ ├── HotTip.tsx │ │ ├── Philosophy.tsx │ │ ├── ModuleSource.tsx │ │ ├── Github.tsx │ │ └── Home.tsx │ ├── api │ │ └── github.ts │ └── layout │ │ └── Docs.tsx ├── client.tsx ├── dev.ts ├── deno.json ├── build.ts ├── server.tsx ├── importMap.json └── mdx.ts ├── with-api-routes ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── client.tsx ├── deno.json ├── importMap.json ├── build.ts ├── src │ └── app.tsx └── server.tsx ├── with-earthstar ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json ├── server.tsx └── src │ └── app.tsx ├── with-react-query ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── .vscode │ └── settings.json ├── src │ ├── query-client.ts │ ├── slow-todo.tsx │ ├── todo.tsx │ ├── app.tsx │ └── hooks │ │ └── useDehydrateReactQuery.tsx ├── deno.json ├── build.ts ├── client.tsx ├── importMap.json └── server.tsx ├── with-use-gesture ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json ├── server.tsx └── src │ └── app.tsx ├── with-mdx ├── public │ ├── robots.txt │ ├── favicon.ico │ └── grid_1.webp ├── .gitignore ├── content │ └── docs.mdx ├── client.tsx ├── README.md ├── dev.ts ├── deno.json ├── importMap.json ├── build.ts ├── server.tsx ├── src │ └── app.tsx └── mdx.ts ├── with-react-router ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── .vscode │ └── settings.json ├── src │ ├── pages │ │ ├── About.tsx │ │ └── Home.tsx │ ├── layouts │ │ └── DefaultLayout.tsx │ └── app.tsx ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json └── server.tsx ├── lite ├── .vscode │ └── settings.json ├── README.md ├── importMap.json ├── server.tsx └── app.tsx ├── react-experimental ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── README.md ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json ├── server.tsx └── src │ └── app.tsx ├── with-react-helmet-async ├── README.md ├── public │ ├── robots.txt │ └── favicon.ico ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json ├── src │ └── app.tsx └── server.tsx ├── with-react-three-fiber ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── .vscode │ └── settings.json ├── client.tsx ├── deno.json ├── build.ts ├── importMap.json ├── server.tsx └── src │ └── app.tsx ├── bogus-marketing-or-blog ├── public │ ├── robots.txt │ ├── favicon.ico │ └── style.css ├── importMap.json ├── README.md ├── build.ts ├── deno.json ├── server.tsx └── src │ └── app.tsx └── README.md /examples/basic/README.md: -------------------------------------------------------------------------------- 1 | # basic 2 | -------------------------------------------------------------------------------- /examples/with-csr/README.md: -------------------------------------------------------------------------------- 1 | # with-csr 2 | -------------------------------------------------------------------------------- /examples/with-esm/README.md: -------------------------------------------------------------------------------- 1 | # with-esm 2 | -------------------------------------------------------------------------------- /examples/with-fly-io/README.md: -------------------------------------------------------------------------------- 1 | # with-fly-io 2 | -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/.gitignore: -------------------------------------------------------------------------------- 1 | .netlify -------------------------------------------------------------------------------- /examples/with-preact/README.md: -------------------------------------------------------------------------------- 1 | # with-preact 2 | -------------------------------------------------------------------------------- /examples/with-trpc/README.md: -------------------------------------------------------------------------------- 1 | # with-trpc 2 | -------------------------------------------------------------------------------- /examples/with-twind/README.md: -------------------------------------------------------------------------------- 1 | # with-twind 2 | -------------------------------------------------------------------------------- /examples/with-unocss/README.md: -------------------------------------------------------------------------------- 1 | # with-unocss 2 | -------------------------------------------------------------------------------- /examples/with-wouter/README.md: -------------------------------------------------------------------------------- 1 | # with-wouter 2 | -------------------------------------------------------------------------------- /examples/with-emotion/README.md: -------------------------------------------------------------------------------- 1 | # with-emotion 2 | -------------------------------------------------------------------------------- /examples/with-islands/README.md: -------------------------------------------------------------------------------- 1 | # with-islands 2 | -------------------------------------------------------------------------------- /examples/with-service-worker/README.md: -------------------------------------------------------------------------------- 1 | # basic 2 | -------------------------------------------------------------------------------- /examples/with-stitches/README.md: -------------------------------------------------------------------------------- 1 | # with-stitches 2 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/use-env.mdx: -------------------------------------------------------------------------------- 1 | # useEnv -------------------------------------------------------------------------------- /examples/with-api-routes/README.md: -------------------------------------------------------------------------------- 1 | # with-api-routes 2 | -------------------------------------------------------------------------------- /examples/with-earthstar/README.md: -------------------------------------------------------------------------------- 1 | # with-earthstar 2 | -------------------------------------------------------------------------------- /examples/with-react-query/README.md: -------------------------------------------------------------------------------- 1 | # with-react-query 2 | -------------------------------------------------------------------------------- /examples/with-use-gesture/README.md: -------------------------------------------------------------------------------- 1 | # with-use-gesture 2 | -------------------------------------------------------------------------------- /examples/basic/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/use-async.mdx: -------------------------------------------------------------------------------- 1 | # useAsync -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/use-island.mdx: -------------------------------------------------------------------------------- 1 | # useIsland -------------------------------------------------------------------------------- /examples/with-csr/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-esm/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-mdx/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-react-router/README.md: -------------------------------------------------------------------------------- 1 | # with-react-router 2 | -------------------------------------------------------------------------------- /examples/ultra-website/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-emotion/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-fly-io/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-islands/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-mdx/.gitignore: -------------------------------------------------------------------------------- 1 | # ignore generated js 2 | src/content/ -------------------------------------------------------------------------------- /examples/with-preact/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-stitches/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-trpc/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-twind/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-unocss/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-wouter/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/lite/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": true 3 | } 4 | -------------------------------------------------------------------------------- /examples/react-experimental/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-api-routes/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-earthstar/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-react-helmet-async/README.md: -------------------------------------------------------------------------------- 1 | # with-react-helmet-async 2 | -------------------------------------------------------------------------------- /examples/with-react-query/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-react-router/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-react-three-fiber/README.md: -------------------------------------------------------------------------------- 1 | # with-react-three-fiber 2 | -------------------------------------------------------------------------------- /examples/with-use-gesture/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/basic/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": true 3 | } 4 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/use-server-context.mdx: -------------------------------------------------------------------------------- 1 | # useServerContext -------------------------------------------------------------------------------- /examples/with-react-helmet-async/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-react-three-fiber/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/with-service-worker/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/ultra-website/README.md: -------------------------------------------------------------------------------- 1 | # [https://ultrajs.dev](https://ultrajs.dev) 2 | -------------------------------------------------------------------------------- /examples/with-unocss/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": true 3 | } 4 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/use-server-inserted-html.mdx: -------------------------------------------------------------------------------- 1 | # useServerInsertedHTML -------------------------------------------------------------------------------- /examples/with-react-query/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": true 3 | } 4 | -------------------------------------------------------------------------------- /examples/with-react-three-fiber/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": true 3 | } 4 | -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/README.md: -------------------------------------------------------------------------------- 1 | # with-netlify 2 | 3 | > Warning: This is not ready to use. 4 | -------------------------------------------------------------------------------- /examples/with-mdx/content/docs.mdx: -------------------------------------------------------------------------------- 1 | # hello with mdx 2 | 3 | mm 4 | 5 | ![image description](/grid_1.webp) -------------------------------------------------------------------------------- /examples/with-react-router/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": true, 3 | "deno.unstable": true 4 | } 5 | -------------------------------------------------------------------------------- /examples/react-experimental/README.md: -------------------------------------------------------------------------------- 1 | # react-experimental 2 | 3 | Testing Ultra using the experimental build of React. 4 | -------------------------------------------------------------------------------- /examples/basic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/basic/public/favicon.ico -------------------------------------------------------------------------------- /examples/basic/.env: -------------------------------------------------------------------------------- 1 | # Example of defining environment variables 2 | # They must be prefixed with `ULTRA_PUBLIC_` 3 | ULTRA_PUBLIC_FOO=bar -------------------------------------------------------------------------------- /examples/with-csr/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-csr/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-esm/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-esm/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-fly-io/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM denoland/deno:1.24.3 2 | 3 | WORKDIR /app 4 | COPY .ultra /app 5 | 6 | CMD ["deno", "task", "start"] -------------------------------------------------------------------------------- /examples/with-mdx/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-mdx/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-mdx/public/grid_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-mdx/public/grid_1.webp -------------------------------------------------------------------------------- /examples/with-trpc/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-trpc/public/favicon.ico -------------------------------------------------------------------------------- /examples/basic/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/ultra-website/public/beast.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/beast.webp -------------------------------------------------------------------------------- /examples/ultra-website/public/orcs.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/orcs.webp -------------------------------------------------------------------------------- /examples/ultra-website/public/share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/share.jpg -------------------------------------------------------------------------------- /examples/ultra-website/public/share.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/share.webp -------------------------------------------------------------------------------- /examples/with-emotion/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-emotion/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-fly-io/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-fly-io/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-islands/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-islands/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-preact/client.tsx: -------------------------------------------------------------------------------- 1 | import { hydrate } from "preact"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(, document); 5 | -------------------------------------------------------------------------------- /examples/with-preact/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-preact/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-twind/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-twind/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-unocss/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-unocss/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-wouter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-wouter/public/favicon.ico -------------------------------------------------------------------------------- /examples/ultra-website/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/favicon.ico -------------------------------------------------------------------------------- /examples/ultra-website/public/grid_1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/grid_1.webp -------------------------------------------------------------------------------- /examples/ultra-website/public/grid_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/grid_2.webp -------------------------------------------------------------------------------- /examples/with-earthstar/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-earthstar/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-mdx/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-stitches/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-stitches/public/favicon.ico -------------------------------------------------------------------------------- /examples/ultra-website/public/archangel.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/archangel.webp -------------------------------------------------------------------------------- /examples/ultra-website/public/paradise.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/paradise.webp -------------------------------------------------------------------------------- /examples/with-api-routes/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-api-routes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-api-routes/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-earthstar/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-emotion/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-fly-io/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-react-query/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-react-query/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-react-router/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-react-router/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-stitches/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-trpc/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | } -------------------------------------------------------------------------------- /examples/with-unocss/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-use-gesture/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-use-gesture/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-experimental/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/react-experimental/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-netlify-(WIP)/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-service-worker/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-service-worker/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-use-gesture/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/ultra-website/public/styles/fancy.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/styles/fancy.woff2 -------------------------------------------------------------------------------- /examples/with-react-three-fiber/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | -------------------------------------------------------------------------------- /examples/with-react-three-fiber/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-react-three-fiber/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-wouter/src/pages/About.tsx: -------------------------------------------------------------------------------- 1 | export default function AboutPage() { 2 | return ( 3 |
4 | About page 5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /examples/with-wouter/src/pages/Home.tsx: -------------------------------------------------------------------------------- 1 | export default function HomePage() { 2 | return ( 3 |
4 | Home page 5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/bogus-marketing-or-blog/public/favicon.ico -------------------------------------------------------------------------------- /examples/ultra-website/public/styles/SG-Linear.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/ultra-website/public/styles/SG-Linear.woff2 -------------------------------------------------------------------------------- /examples/with-react-helmet-async/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/examples/with-react-helmet-async/public/favicon.ico -------------------------------------------------------------------------------- /examples/with-react-router/src/pages/About.tsx: -------------------------------------------------------------------------------- 1 | export default function AboutPage() { 2 | return ( 3 |
4 | About page 5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /examples/with-react-router/src/pages/Home.tsx: -------------------------------------------------------------------------------- 1 | export default function HomePage() { 2 | return ( 3 |
4 | Home page 5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /examples/ultra-website/src/components/Docs.tsx: -------------------------------------------------------------------------------- 1 | import Content from "../content/docs.js"; 2 | 3 | export default function Markdown() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /examples/react-experimental/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate( 5 | document, 6 | , 7 | ); 8 | -------------------------------------------------------------------------------- /examples/with-csr/client.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from "react-dom/client"; 2 | import App from "./src/app.tsx"; 3 | 4 | createRoot(document.getElementById("root")).render(); 5 | -------------------------------------------------------------------------------- /examples/with-esm/client.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import hydrate from "ultra/hydrate.js"; 3 | import App from "./src/app.js"; 4 | 5 | hydrate(document, React.createElement(App)); 6 | -------------------------------------------------------------------------------- /examples/with-trpc/src/trpc/trpc.ts: -------------------------------------------------------------------------------- 1 | import { createTRPCReact } from "@trpc/react-query"; 2 | import { AppRouter } from "../server/router.ts"; 3 | 4 | export const trpc = createTRPCReact(); 5 | -------------------------------------------------------------------------------- /examples/lite/README.md: -------------------------------------------------------------------------------- 1 | # lite 2 | 3 | This is a minimal config for Ultra. 4 | 5 | To start the dev server, run 6 | 7 | ``` 8 | deno run -A --no-check --watch --import-map=importMap.json ./server.tsx 9 | ``` 10 | -------------------------------------------------------------------------------- /examples/ultra-website/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import { Router } from "wouter"; 3 | import App from "./src/app.tsx"; 4 | 5 | hydrate( 6 | document, 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /examples/with-react-query/src/query-client.ts: -------------------------------------------------------------------------------- 1 | import { QueryClient } from "@tanstack/react-query"; 2 | 3 | export const queryClient = new QueryClient({ 4 | defaultOptions: { 5 | queries: { 6 | suspense: true, 7 | }, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /examples/with-service-worker/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | 4 | hydrate(document, ); 5 | 6 | if ("serviceWorker" in navigator) { 7 | navigator.serviceWorker.register("./service-worker.js"); 8 | } 9 | -------------------------------------------------------------------------------- /examples/with-react-router/client.tsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter } from "react-router-dom"; 2 | import hydrate from "ultra/hydrate.js"; 3 | import App from "./src/app.tsx"; 4 | 5 | hydrate( 6 | document, 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /examples/with-react-helmet-async/client.tsx: -------------------------------------------------------------------------------- 1 | import { HelmetProvider } from "react-helmet-async"; 2 | import hydrate from "ultra/hydrate.js"; 3 | import App from "./src/app.tsx"; 4 | 5 | hydrate( 6 | document, 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /examples/with-trpc/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import App from "./src/app.tsx"; 3 | import { TRPCClientProvider } from "./src/trpc/client.tsx"; 4 | 5 | hydrate( 6 | document, 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /examples/with-twind/src/post.tsx: -------------------------------------------------------------------------------- 1 | import { tw } from "./twind.ts"; 2 | 3 | export default function Post({ color }: { color?: string }) { 4 | return ( 5 |
6 | Hello with-twind! 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /examples/ultra-website/public/ultra.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-mdx/README.md: -------------------------------------------------------------------------------- 1 | # with-mdx 2 | 3 | This example uses API routes with Dynamic MDX and React Query. 4 | 5 | > Note: The `--watch` command is modified to point to the directory containing 6 | > our `.mdx` files. This ensures your `.mdx` files will reload on change during 7 | > development. 8 | -------------------------------------------------------------------------------- /examples/with-esm/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.js", 4 | "build": "deno run -A ./build.js", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "importMap": "./importMap.json" 9 | } 10 | -------------------------------------------------------------------------------- /examples/with-twind/src/twind.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "@twind/core"; 2 | import presetAutoprefix from "@twind/preset-autoprefix"; 3 | import presetTailwind from "@twind/preset-tailwind"; 4 | 5 | export default defineConfig({ 6 | theme: {}, 7 | presets: [presetAutoprefix(), presetTailwind()], 8 | }); 9 | -------------------------------------------------------------------------------- /examples/ultra-website/src/components/HotTip.tsx: -------------------------------------------------------------------------------- 1 | import { PropsWithChildren } from "react"; 2 | 3 | export function HotTip({ children }: PropsWithChildren) { 4 | return ( 5 |
6 | Hot tip! 7 | {children} 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /examples/ultra-website/src/api/github.ts: -------------------------------------------------------------------------------- 1 | export async function getStarCount() { 2 | const response = await fetch( 3 | `https://api.github.com/repos/exhibitionist-digital/ultra`, 4 | ); 5 | 6 | const data = await response.json(); 7 | 8 | return { 9 | stargazers_count: data?.stargazers_count, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/use-preload.mdx: -------------------------------------------------------------------------------- 1 | # usePreload 2 | 3 | This hook will insert a `` tag into the head of the server render document. During client side transitions, this won't do anything. 4 | 5 | ```tsx 6 | import usePreload from "ultra/hooks/use-preload.js"; 7 | 8 | usePreload(href) 9 | ``` 10 | 11 | -------------------------------------------------------------------------------- /examples/ultra-website/src/components/Philosophy.tsx: -------------------------------------------------------------------------------- 1 | import { MDXProvider } from "@mdx-js/react"; 2 | 3 | import Content from "../content/philosophy.js"; 4 | 5 | export default function Markdown() { 6 | return ( 7 | 8 |
9 | 10 |
11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-twind/client.tsx: -------------------------------------------------------------------------------- 1 | import { setup } from "@twind/core"; 2 | import hydrate from "ultra/hydrate.js"; 3 | import App from "./src/app.tsx"; 4 | import { sheet } from "./src/twind.ts"; 5 | import config from "./src/twind.config.js"; 6 | 7 | //@ts-ignore twind types issue 8 | setup(config, sheet); 9 | 10 | hydrate(document, ); 11 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/": "https://esm.sh/v122/react-dom@18.2.0/", 7 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/with-mdx/dev.ts: -------------------------------------------------------------------------------- 1 | import { compile } from "./mdx.ts"; 2 | 3 | await compile("./content"); 4 | 5 | /** 6 | * Now start the server 7 | */ 8 | const command = new Deno.Command(Deno.execPath(), { 9 | args: [ 10 | "run", 11 | "-A", 12 | "./server.tsx", 13 | ], 14 | }); 15 | 16 | const server = command.spawn(); 17 | 18 | await server.status; 19 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/README.md: -------------------------------------------------------------------------------- 1 | # Bogus marketing site or blog 2 | 3 | Example with full server side routing and Zero-JS* 4 | 5 | This example has two routes: 6 | 7 | - `/` => Homepage 8 | - `*` => 404 9 | 10 | This also uses Deno's new Flash server, the fastest in the land. Requires Deno 11 | v1.25.0 12 | 13 | \* No hydration is to be found here, just server rendered HTML 14 | -------------------------------------------------------------------------------- /examples/with-esm/build.js: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.js"), 5 | serverEntrypoint: import.meta.resolve("./server.js"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | await builder.build(); 16 | -------------------------------------------------------------------------------- /examples/ultra-website/dev.ts: -------------------------------------------------------------------------------- 1 | import { compile } from "./mdx.ts"; 2 | 3 | await compile("./content"); 4 | 5 | /** 6 | * Now start the server 7 | */ 8 | const command = new Deno.Command(Deno.execPath(), { 9 | args: [ 10 | "run", 11 | "-A", 12 | "--location=http://localhost:8000", 13 | "./server.tsx", 14 | ], 15 | }); 16 | const server = command.spawn(); 17 | 18 | await server.status; 19 | -------------------------------------------------------------------------------- /examples/ultra-website/src/components/ModuleSource.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | 3 | export function ModuleSource( 4 | { filename, children }: { filename: string; children: ReactNode }, 5 | ) { 6 | return ( 7 |
8 |
{filename}.tsx
9 |
{children}
10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /examples/with-earthstar/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-emotion/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-fly-io/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-islands/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-preact/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "preact" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-stitches/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-twind/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-wouter/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | serverEntrypoint: import.meta.resolve("./server.tsx"), 5 | }); 6 | 7 | builder.ignore([ 8 | "./README.md", 9 | "./importMap.json", 10 | "./*.dev.json", 11 | "./*.test.ts", 12 | ]); 13 | 14 | // deno-lint-ignore no-unused-vars 15 | const result = await builder.build(); 16 | -------------------------------------------------------------------------------- /examples/with-api-routes/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-react-query/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-react-router/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-service-worker/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-use-gesture/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-react-helmet-async/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-wouter/client.tsx: -------------------------------------------------------------------------------- 1 | import hydrate from "ultra/hydrate.js"; 2 | import { Router } from "wouter"; 3 | import App from "./src/app.tsx"; 4 | import { SearchParamsProvider } from "./src/context/SearchParams.tsx"; 5 | 6 | hydrate( 7 | document, 8 | 9 | 10 | 11 | 12 | , 13 | ); 14 | -------------------------------------------------------------------------------- /examples/basic/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "test": "deno test --allow-all", 5 | "build": "deno run -A ./build.ts", 6 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 7 | }, 8 | "lock": false, 9 | "compilerOptions": { 10 | "jsx": "react-jsxdev", 11 | "jsxImportSource": "react" 12 | }, 13 | "importMap": "./importMap.json" 14 | } 15 | -------------------------------------------------------------------------------- /examples/lite/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-csr/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "test": "deno test --allow-all", 5 | "build": "deno run -A ./build.ts", 6 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 7 | }, 8 | "lock": false, 9 | "compilerOptions": { 10 | "jsx": "react-jsxdev", 11 | "jsxImportSource": "react" 12 | }, 13 | "importMap": "./importMap.json" 14 | } 15 | -------------------------------------------------------------------------------- /examples/with-csr/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-esm/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-trpc/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "test": "deno test --allow-all", 5 | "build": "deno run -A ./build.ts", 6 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 7 | }, 8 | "lock": false, 9 | "compilerOptions": { 10 | "jsx": "react-jsxdev", 11 | "jsxImportSource": "react" 12 | }, 13 | "importMap": "./importMap.json" 14 | } 15 | -------------------------------------------------------------------------------- /examples/with-fly-io/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-islands/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-mdx/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch=content,src/app.tsx,server.tsx ./dev.ts", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --location http://localhost:8000 ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/basic/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/react-experimental/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "test": "deno test --allow-all", 5 | "build": "deno run -A ./build.ts", 6 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 7 | }, 8 | "lock": false, 9 | "compilerOptions": { 10 | "jsx": "react-jsxdev", 11 | "jsxImportSource": "react" 12 | }, 13 | "importMap": "./importMap.json" 14 | } 15 | -------------------------------------------------------------------------------- /examples/with-api-routes/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-csr/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-react-router/src/layouts/DefaultLayout.tsx: -------------------------------------------------------------------------------- 1 | import { Link, Outlet } from "react-router-dom"; 2 | 3 | export function DefaultLayout() { 4 | return ( 5 |
6 | 11 |
12 | 13 |
14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /examples/with-react-three-fiber/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch ./server.tsx", 4 | "test": "deno test --allow-all", 5 | "build": "deno run -A ./build.ts", 6 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 7 | }, 8 | "lock": false, 9 | "compilerOptions": { 10 | "jsx": "react-jsxdev", 11 | "jsxImportSource": "react" 12 | }, 13 | "importMap": "./importMap.json" 14 | } 15 | -------------------------------------------------------------------------------- /examples/with-service-worker/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-trpc/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-emotion/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-stitches/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-twind/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-wouter/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/react-experimental/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-api-routes/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-fly-io/src/app.tsx: -------------------------------------------------------------------------------- 1 | export default function App() { 2 | return ( 3 | 4 | 5 | 6 | with-fly-io 7 | 8 | 9 | 10 | 11 |
Hello with-fly-io!
12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /examples/with-react-query/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-react-router/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-use-gesture/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-react-helmet-async/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-react-three-fiber/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./importMap.json", 11 | "./*.dev.json", 12 | "./*.test.ts", 13 | ]); 14 | 15 | // deno-lint-ignore no-unused-vars 16 | const result = await builder.build(); 17 | -------------------------------------------------------------------------------- /examples/with-preact/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/preact@10.11.1&external=preact/compat", 4 | "preact": "https://esm.sh/v122/preact@10.11.1", 5 | "preact/": "https://esm.sh/v122/preact@10.11.1/", 6 | "react-dom": "https://esm.sh/v122/preact@10.11.1&external=preact/compat", 7 | "react-dom/": "https://esm.sh/v122/preact@10.11.1&external=preact/compat/", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-fly-io/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./fly.toml", 11 | "./Dockerfile", 12 | "./importMap.json", 13 | "./*.dev.json", 14 | ]); 15 | 16 | // deno-lint-ignore no-unused-vars 17 | const result = await builder.build(); 18 | -------------------------------------------------------------------------------- /examples/ultra-website/src/components/Github.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { getStarCount } from "../api/github.ts"; 3 | 4 | const href = "https://github.com/exhibitionist-digital/ultra"; 5 | const starCount = getStarCount(); 6 | 7 | export default function GitHub() { 8 | //@ts-ignore whatever 9 | const stars = React.use(starCount); 10 | return ( 11 | 12 | ★ {stars?.stargazers_count} 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /examples/with-preact/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | jsxImportSource: "preact", 7 | }); 8 | 9 | builder.ignore([ 10 | "./README.md", 11 | "./importMap.json", 12 | "./*.dev.json", 13 | "./*.test.ts", 14 | ]); 15 | 16 | // deno-lint-ignore no-unused-vars 17 | const result = await builder.build(); 18 | -------------------------------------------------------------------------------- /examples/with-react-three-fiber/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100vh; 4 | margin: 0; 5 | padding: 0; 6 | background: #111; 7 | color: white; 8 | text-align: center; 9 | line-height: 100vh; 10 | font-family: monospace; 11 | } 12 | 13 | canvas { 14 | height: 100vh; 15 | opacity: 0; 16 | animation-fill-mode: forwards; 17 | animation-name: fadeIn; 18 | animation-duration: 1s; 19 | } 20 | 21 | @keyframes fadeIn { 22 | to { 23 | opacity: 1; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/with-earthstar/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | browserEntrypoint: import.meta.resolve("./client.tsx"), 5 | serverEntrypoint: import.meta.resolve("./server.tsx"), 6 | }); 7 | 8 | builder.ignore([ 9 | "./README.md", 10 | "./fly.toml", 11 | "./DockerFile", 12 | "./importMap.json", 13 | "./*.dev.json", 14 | "./*.test.ts", 15 | ]); 16 | 17 | // deno-lint-ignore no-unused-vars 18 | const result = await builder.build(); 19 | -------------------------------------------------------------------------------- /examples/with-unocss/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check ./dev.ts", 4 | "test": "deno test --allow-all", 5 | "build": "deno run -A ./build.ts", 6 | "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js" 7 | }, 8 | "lock": false, 9 | "compilerOptions": { 10 | "jsx": "react-jsxdev", 11 | "jsxImportSource": "react", 12 | "lib": ["dom", "deno.ns", "dom.iterable", "dom.asynciterable"] 13 | }, 14 | "importMap": "./importMap.json" 15 | } 16 | -------------------------------------------------------------------------------- /examples/with-unocss/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "unocss/cli": "https://esm.sh/v122/@unocss/cli" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/basic/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/with-react-query/client.tsx: -------------------------------------------------------------------------------- 1 | import { Hydrate, QueryClientProvider } from "@tanstack/react-query"; 2 | import hydrate from "ultra/hydrate.js"; 3 | import App from "./src/app.tsx"; 4 | import { queryClient } from "./src/query-client.ts"; 5 | 6 | declare const __REACT_QUERY_DEHYDRATED_STATE: unknown; 7 | 8 | hydrate( 9 | document, 10 | 11 | 12 | 13 | 14 | , 15 | ); 16 | -------------------------------------------------------------------------------- /examples/ultra-website/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --no-check --watch=content,src/components,src/app.tsx,src/hooks,src/layout,server.tsx --location=http://localhost:8000 ./dev.ts", 4 | "build": "deno run -A ./build.ts", 5 | "start": "ULTRA_MODE=production deno run -A --no-remote --location=http://localhost:8000 ./server.js" 6 | }, 7 | "lock": false, 8 | "compilerOptions": { 9 | "jsx": "react-jsxdev", 10 | "jsxImportSource": "react" 11 | }, 12 | "importMap": "./importMap.json" 13 | } 14 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/hooks.mdx: -------------------------------------------------------------------------------- 1 | # Hooks 2 | 3 | Ultra provides various hooks to help with the most common functionality when building your project. 4 | 5 | #### [useAsset](/docs/hooks/use-asset) 6 | 7 | #### [useAsync](/docs/hooks/use-async) 8 | 9 | #### [useEnv](/docs/hooks/use-env) 10 | 11 | #### [useIlsand](/docs/hooks/use-island) 12 | 13 | #### [usePreload](/docs/hooks/use-preload) 14 | 15 | #### [useServerContext](/docs/hooks/use-server-context) 16 | 17 | #### [useServerInsertedHTML](/docs/hooks/use-server-inserted-html) -------------------------------------------------------------------------------- /examples/with-esm/src/app.js: -------------------------------------------------------------------------------- 1 | import { createElement as h } from "react"; 2 | 3 | export default function App() { 4 | return ( 5 | h( 6 | "html", 7 | null, 8 | h( 9 | "head", 10 | null, 11 | h( 12 | "title", 13 | null, 14 | "Basic", 15 | ), 16 | ), 17 | h( 18 | "body", 19 | null, 20 | h( 21 | "div", 22 | null, 23 | "Hello with-esm!", 24 | ), 25 | ), 26 | ) 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /examples/with-stitches/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "@stitches/react": "https://esm.sh/v122/@stitches/react@1.2.8?external=react" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/with-react-three-fiber/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "@react-three/fiber": "https://esm.sh/v122/@react-three/fiber?external=react", 9 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | import { netlify } from "ultra/lib/build/plugins/netlify.ts"; 3 | 4 | const builder = createBuilder({ 5 | browserEntrypoint: import.meta.resolve("./client.tsx"), 6 | serverEntrypoint: import.meta.resolve("./server.tsx"), 7 | plugin: netlify, 8 | }); 9 | 10 | builder.ignore([ 11 | "./README.md", 12 | "./importMap.json", 13 | "./*.dev.json", 14 | "./*.test.ts", 15 | ]); 16 | 17 | // deno-lint-ignore no-unused-vars 18 | const result = await builder.build(); 19 | -------------------------------------------------------------------------------- /examples/with-react-helmet-async/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "react-helmet-async": "https://esm.sh/v122/react-helmet-async@1.3.0?external=react" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/with-react-query/src/slow-todo.tsx: -------------------------------------------------------------------------------- 1 | import { useQuery } from "@tanstack/react-query"; 2 | 3 | type TodoProps = { 4 | id: number; 5 | }; 6 | 7 | export default function SlowTodo({ id }: TodoProps) { 8 | const query = useQuery( 9 | ["todo", { id }], 10 | async () => { 11 | await new Promise((resolve) => setTimeout(resolve, 3000)); 12 | return fetch( 13 | `https://jsonplaceholder.typicode.com/todos/${id}`, 14 | ).then((response) => response.json()); 15 | }, 16 | ); 17 | 18 | return 
{JSON.stringify(query.data, null, 2)}
; 19 | } 20 | -------------------------------------------------------------------------------- /examples/with-unocss/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | import { build } from "unocss/cli"; 3 | 4 | const builder = createBuilder({ 5 | browserEntrypoint: import.meta.resolve("./client.tsx"), 6 | serverEntrypoint: import.meta.resolve("./server.tsx"), 7 | }); 8 | 9 | builder.ignore([ 10 | "./README.md", 11 | "./importMap.json", 12 | "./*.dev.json", 13 | "./*.test.ts", 14 | ]); 15 | 16 | await build({ 17 | patterns: ["src/**/*"], 18 | outFile: "public/uno.css", 19 | }); 20 | 21 | // deno-lint-ignore no-unused-vars 22 | const result = await builder.build(); 23 | -------------------------------------------------------------------------------- /examples/with-islands/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | 3 | const builder = createBuilder({ 4 | serverEntrypoint: import.meta.resolve("./server.tsx"), 5 | }); 6 | 7 | builder.ignore([ 8 | "./README.md", 9 | "./importMap.json", 10 | "./*.dev.json", 11 | "./*.test.ts", 12 | ]); 13 | 14 | /** 15 | * Add our own browser entrypoint, since we 16 | * aren't using the default 17 | */ 18 | builder.entrypoint("browser", { 19 | path: "./src/app.tsx", 20 | target: "browser", 21 | }); 22 | 23 | // deno-lint-ignore no-unused-vars 24 | const result = await builder.build(); 25 | -------------------------------------------------------------------------------- /examples/with-mdx/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "@mdx-js/run": "https://esm.sh/v122/@mdx-js/mdx@2.1.3/lib/run.js", 10 | "@mdx-js/react": "https://esm.sh/v122/@mdx-js/react@2.1.3?external=react" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/react-experimental/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@0.0.0-experimental-8951c5fc9-20220915?dev", 4 | "react/": "https://esm.sh/v122/react@0.0.0-experimental-8951c5fc9-20220915/", 5 | "react-dom": "https://esm.sh/v122/react-dom@0.0.0-experimental-8951c5fc9-20220915", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@0.0.0-experimental-8951c5fc9-20220915/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@0.0.0-experimental-8951c5fc9-20220915/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/with-emotion/src/app.tsx: -------------------------------------------------------------------------------- 1 | import styled from "@emotion/styled"; 2 | 3 | const Text = styled.div` 4 | font-size: 3em; 5 | `; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | with-emotion 13 | 14 | 15 | 16 | 17 | 18 | Hello with-emotion! 19 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /examples/with-islands/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | }); 9 | 10 | server.get("*", async (context) => { 11 | /** 12 | * Render the request 13 | */ 14 | const result = await server.render(); 15 | 16 | return context.body(result, 200, { 17 | "content-type": "text/html", 18 | }); 19 | }); 20 | 21 | Deno.serve(server.fetch); 22 | -------------------------------------------------------------------------------- /examples/with-wouter/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "wouter": "https://esm.sh/v122/wouter@2.10.0?external=react", 10 | "wouter/static-location": "https://esm.sh/v122/wouter@2.10.0/static-location?external=wouter" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/ultra-website/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | import { compile } from "./mdx.ts"; 3 | 4 | await compile("./content"); 5 | 6 | const builder = createBuilder({ 7 | browserEntrypoint: import.meta.resolve("./client.tsx"), 8 | serverEntrypoint: import.meta.resolve("./server.tsx"), 9 | }); 10 | 11 | builder.ignore([ 12 | "./public/*.png", 13 | "./content/*.mdx", 14 | "./README.md", 15 | "./fly.toml", 16 | "./Dockerfile", 17 | "./dev.ts", 18 | "./importMap.json", 19 | "./*.dev.json", 20 | ]); 21 | 22 | // deno-lint-ignore no-unused-vars 23 | const result = await builder.build(); 24 | -------------------------------------------------------------------------------- /examples/with-earthstar/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "earthstar": "https://cdn.earthstar-project.org/js/earthstar.bundle.v9.3.3.js", 4 | "react-earthstar": "https://esm.sh/v122/react-earthstar?external=react,earthstar", 5 | "react": "https://esm.sh/v122/react@18.2.0?dev", 6 | "react/": "https://esm.sh/v122/react@18.2.0/", 7 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 8 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 9 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 10 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/with-use-gesture/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "@react-spring/web": "https://esm.sh/v122/@react-spring/web?external=react", 9 | "@use-gesture/react": "https://esm.sh/v122/@use-gesture/react?external=react&bundle", 10 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/routing.mdx: -------------------------------------------------------------------------------- 1 | # Routing 2 | 3 | Our favorite thing about **Ultra** is that it doesn't come with any FS BS. Choose your path, choose your router (or write your own). 4 | 5 | #### [wouter](#wouter) 6 | 7 | [https://github.com/molefrog/wouter](https://github.com/molefrog/wouter) 8 | 9 | [ultra-with-wouter](https://github.com/exhibitionist-digital/ultra/tree/main/examples/with-wouter) 10 | 11 | 12 | #### [react-router](#react-router) 13 | 14 | [https://reactrouter.com](https://reactrouter.com) 15 | 16 | [ultra-with-react-router](https://github.com/exhibitionist-digital/ultra/tree/main/examples/with-react-router) -------------------------------------------------------------------------------- /examples/with-emotion/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "@emotion/react": "https://esm.sh/v122/@emotion/react@11.10.0?external=react", 10 | "@emotion/styled": "https://esm.sh/v122/@emotion/styled@11.10.0?external=react,@emotion/react" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/with-mdx/build.ts: -------------------------------------------------------------------------------- 1 | import { createBuilder } from "ultra/build.ts"; 2 | import { compile } from "./mdx.ts"; 3 | 4 | const builder = createBuilder({ 5 | browserEntrypoint: import.meta.resolve("./client.tsx"), 6 | serverEntrypoint: import.meta.resolve("./server.tsx"), 7 | }); 8 | 9 | builder.ignore([ 10 | "./content/**/*", 11 | "./README.md", 12 | "./importMap.json", 13 | "./*.dev.json", 14 | "./*.test.ts", 15 | ]); 16 | 17 | /** 18 | * Compile our mdx 19 | */ 20 | await compile("./content"); 21 | builder.log.success("Compiled MDX"); 22 | 23 | // deno-lint-ignore no-unused-vars 24 | const result = await builder.build(); 25 | -------------------------------------------------------------------------------- /examples/lite/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: import.meta.resolve("./importMap.json"), 6 | browserEntrypoint: import.meta.resolve("./app.tsx"), 7 | }); 8 | 9 | server.get("*", async (context) => { 10 | /** 11 | * Render the request 12 | */ 13 | const result = await server.render(); 14 | 15 | return context.body(result, 200, { 16 | "content-type": "text/html; charset=utf-8", 17 | }); 18 | }); 19 | 20 | if (import.meta.main) { 21 | Deno.serve(server.fetch); 22 | } 23 | 24 | export default server; 25 | -------------------------------------------------------------------------------- /examples/with-react-router/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "react-router-dom": "https://esm.sh/v122/react-router-dom@6.3.0?external=react", 10 | "react-router-dom/server": "https://esm.sh/v122/react-router-dom@6.3.0/server?external=react" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/with-stitches/src/theme.tsx: -------------------------------------------------------------------------------- 1 | import { PropsWithChildren } from "react"; 2 | import useServerInsertedHTML from "ultra/hooks/use-server-inserted-html.js"; 3 | import { getCssText } from "./stitches.config.ts"; 4 | 5 | export function ThemeProvider({ children }: PropsWithChildren) { 6 | /** 7 | * useServerInsertedHTML will inject the returned output into the rendered stream. 8 | */ 9 | useServerInsertedHTML(() => { 10 | return ( 11 | 16 | ); 17 | }); 18 | 19 | return <>{children}; 20 | } 21 | -------------------------------------------------------------------------------- /examples/basic/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/with-csr/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/with-islands/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/with-preact/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/react-experimental/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/middleware.mdx: -------------------------------------------------------------------------------- 1 | # Middleware 2 | 3 | Since **Ultra** uses Hono under-the-covers, it includes middleware support. Here is an example snippet added to `server.tsx` that will add a 'Server' header to every response: 4 | ```js 5 | server.use('*', async (c, next) => { 6 | c.res.headers.set("Server", "Ultra Hono"); 7 | await next(); 8 | }); 9 | ``` 10 | If you look in the Dev Tools Network tab and click on localhost, you'll see this line in the Headers tab added to the Response Headers section: 11 | 12 | ```bash 13 | server: Ultra Hono 14 | ``` 15 | 16 | See the [Hono middleware docs](https://honojs.dev/docs/api/middleware/) for more details. -------------------------------------------------------------------------------- /examples/with-service-worker/public/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: monospace; 6 | background: #ddd; 7 | text-align: center; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | margin: 1rem auto 3rem; 13 | font-size: clamp(2em, 10vw, 8em); 14 | font-weight: 400; 15 | } 16 | 17 | h1 span::before { 18 | content: '@'; 19 | animation: blink 3s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 24 | 0%, 25 | 50%, 26 | 70%, 27 | 95% { 28 | content: '@'; 29 | } 30 | 31 | 65%, 32 | 90% { 33 | content: '—'; 34 | } 35 | } 36 | 37 | p { 38 | max-width: 600px; 39 | margin: 0 auto 1em; 40 | } -------------------------------------------------------------------------------- /examples/with-mdx/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html", 19 | }); 20 | }); 21 | 22 | Deno.serve(server.fetch); 23 | -------------------------------------------------------------------------------- /examples/with-stitches/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html", 19 | }); 20 | }); 21 | 22 | Deno.serve(server.fetch); 23 | -------------------------------------------------------------------------------- /examples/with-twind/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "@twind/core": "https://esm.sh/v122/@twind/core@1.0.1", 10 | "@twind/preset-autoprefix": "https://esm.sh/v122/@twind/preset-autoprefix@1.0.1", 11 | "@twind/preset-tailwind": "https://esm.sh/v122/*@twind/preset-tailwind@1.0.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-service-worker/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html", 19 | }); 20 | }); 21 | 22 | Deno.serve(server.fetch); 23 | -------------------------------------------------------------------------------- /examples/with-use-gesture/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html", 19 | }); 20 | }); 21 | 22 | Deno.serve(server.fetch); 23 | -------------------------------------------------------------------------------- /examples/with-api-routes/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | 3 | export default function App() { 4 | useEffect(() => { 5 | // connect to websocket 6 | const socket = new WebSocket("ws://localhost:8000/ws"); 7 | console.log({ socket }); 8 | }, []); 9 | return ( 10 | 11 | 12 | 13 | With with-api-routes 14 | 15 | 16 | 17 | 18 |
Hello with-api-routes!
19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /examples/with-preact/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | compilerOptions: { 9 | jsxImportSource: "preact", 10 | }, 11 | }); 12 | 13 | server.get("*", async (context) => { 14 | /** 15 | * Render the request 16 | */ 17 | const result = await server.render(); 18 | 19 | return context.body(result, 200, { 20 | "content-type": "text/html", 21 | }); 22 | }); 23 | 24 | Deno.serve(server.fetch); 25 | -------------------------------------------------------------------------------- /examples/with-react-query/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0", 6 | "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev", 7 | "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev", 8 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 9 | "@tanstack/react-query": "https://esm.sh/v122/@tanstack/react-query@4.1.3?external=react", 10 | "@tanstack/react-query-devtools": "https://esm.sh/v122/@tanstack/react-query-devtools@4.3.5?external=react,@tanstack/react-query&dev" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/with-fly-io/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html", 19 | }); 20 | }); 21 | 22 | Deno.serve({ port: 8080 }, server.fetch); 23 | -------------------------------------------------------------------------------- /examples/with-earthstar/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html", 19 | }); 20 | }); 21 | 22 | Deno.serve({ port: 8080 }, server.fetch); 23 | -------------------------------------------------------------------------------- /examples/with-trpc/src/server/router.ts: -------------------------------------------------------------------------------- 1 | import { initTRPC } from "@trpc/server"; 2 | import { z } from "zod"; 3 | 4 | const posts = [ 5 | { name: "First Post" }, 6 | { name: "Second Post" }, 7 | { name: "Third Post" }, 8 | ]; 9 | 10 | const t = initTRPC.create(); 11 | 12 | const postRouter = t.router({ 13 | get: t.procedure.query(() => posts), 14 | create: t.procedure 15 | .input(z.object({ name: z.string() })) 16 | .mutation(({ input }) => { 17 | posts.push(input); 18 | return input; 19 | }), 20 | }); 21 | 22 | export const appRouter = t.router({ 23 | hello: t.procedure.query(() => "world"), 24 | post: postRouter, 25 | }); 26 | 27 | export type AppRouter = typeof appRouter; 28 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/fly.mdx: -------------------------------------------------------------------------------- 1 | # 🪰 Fly.io / Docker 2 | 3 | Use this `Dockerfile`. It is multi-stage and will both build and run the production ready app. 4 | 5 | ```dockerfile 6 | FROM denoland/deno as builder 7 | WORKDIR /app 8 | COPY . /app 9 | RUN deno task build 10 | 11 | FROM denoland/deno 12 | EXPOSE 8000 13 | COPY --from=builder /app/.ultra /app 14 | WORKDIR /app 15 | CMD ["deno", "task", "start"] 16 | ``` 17 | 18 | You can modify this as needed, another possible Dockerfile assumes you commit your build artifacts, or deploy locally from built files. 19 | 20 | ```dockerfile 21 | FROM denoland/deno 22 | EXPOSE 8000 23 | WORKDIR /app 24 | COPY .ultra /app 25 | CMD ["deno", "task", "start"] 26 | ``` 27 | -------------------------------------------------------------------------------- /examples/with-esm/server.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createServer } from "ultra/server.ts"; 3 | import App from "./src/app.js"; 4 | 5 | const server = await createServer({ 6 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 7 | ? import.meta.resolve("./importMap.dev.json") 8 | : import.meta.resolve("./importMap.json"), 9 | browserEntrypoint: import.meta.resolve("./client.js"), 10 | }); 11 | 12 | server.get("*", async (context) => { 13 | /** 14 | * Render the request 15 | */ 16 | const result = await server.render(React.createElement(App)); 17 | 18 | return context.body(result, 200, { 19 | "content-type": "text/html", 20 | }); 21 | }); 22 | 23 | Deno.serve(server.fetch); 24 | -------------------------------------------------------------------------------- /examples/basic/server.test.ts: -------------------------------------------------------------------------------- 1 | import { assertEquals } from "https://deno.land/std@0.176.0/testing/asserts.ts"; 2 | import server from "./server.tsx"; 3 | 4 | /** 5 | * This is here as an example of how to test your 6 | * server/rendering. 7 | */ 8 | Deno.test("it works", async (t) => { 9 | await t.step("it can render the homepage", async () => { 10 | const response = await server.request("http://localhost/"); 11 | const content = await response.text(); 12 | 13 | assertEquals(response.status, 200); 14 | assertEquals( 15 | response.headers.get("content-type"), 16 | "text/html; charset=utf-8", 17 | ); 18 | 19 | assertEquals(content.includes("Ultra"), true); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /examples/with-unocss/server.test.ts: -------------------------------------------------------------------------------- 1 | import { assertEquals } from "https://deno.land/std@0.176.0/testing/asserts.ts"; 2 | import server from "./server.tsx"; 3 | 4 | /** 5 | * This is here as an example of how to test your 6 | * server/rendering. 7 | */ 8 | Deno.test("it works", async (t) => { 9 | await t.step("it can render the homepage", async () => { 10 | const response = await server.request("http://localhost/"); 11 | const content = await response.text(); 12 | 13 | assertEquals(response.status, 200); 14 | assertEquals( 15 | response.headers.get("content-type"), 16 | "text/html; charset=utf-8", 17 | ); 18 | 19 | assertEquals(content.includes("Ultra"), true); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /examples/with-react-query/src/todo.tsx: -------------------------------------------------------------------------------- 1 | import { useQuery } from "@tanstack/react-query"; 2 | import useAsync from "ultra/hooks/use-async.js"; 3 | 4 | type TodoProps = { 5 | id: number; 6 | }; 7 | 8 | type Todo = { 9 | id: number; 10 | userId: number; 11 | title: string; 12 | completed: boolean; 13 | }; 14 | 15 | function fetchTodo(id: number): Promise { 16 | return fetch( 17 | `https://jsonplaceholder.typicode.com/todos/${id}`, 18 | ).then((response) => response.json()); 19 | } 20 | 21 | export default function Todo({ id }: TodoProps) { 22 | const query = useQuery( 23 | ["todo", { id }], 24 | useAsync(() => fetchTodo(id)), 25 | ); 26 | 27 | return 
{JSON.stringify(query.data, null, 2)}
; 28 | } 29 | -------------------------------------------------------------------------------- /examples/with-stitches/src/stitches.config.ts: -------------------------------------------------------------------------------- 1 | import { createStitches } from "@stitches/react"; 2 | import type * as Stitches from "@stitches/react"; 3 | 4 | export const { 5 | styled, 6 | css, 7 | globalCss, 8 | keyframes, 9 | getCssText, 10 | theme, 11 | createTheme, 12 | config, 13 | } = createStitches({ 14 | theme: { 15 | colors: { 16 | gray400: "gainsboro", 17 | gray500: "lightgray", 18 | }, 19 | space: { 20 | 0: "0em", 21 | 1: "0.25em", 22 | }, 23 | }, 24 | media: { 25 | bp1: "(min-width: 480px)", 26 | }, 27 | utils: { 28 | marginX: (value: Stitches.PropertyValue<"margin">) => ({ 29 | marginLeft: value, 30 | marginRight: value, 31 | }), 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /examples/with-csr/server.test.ts: -------------------------------------------------------------------------------- 1 | import { assertEquals } from "https://deno.land/std@0.176.0/testing/asserts.ts"; 2 | import server from "./server.tsx"; 3 | 4 | /** 5 | * This is here as an example of how to test your 6 | * server/rendering. 7 | */ 8 | Deno.test("it works", async (t) => { 9 | await t.step("it can render the homepage", async () => { 10 | const response = await server.request("http://localhost/"); 11 | const content = await response.text(); 12 | 13 | assertEquals(response.status, 200); 14 | assertEquals( 15 | (response.headers.get("content-type") || "").toLowerCase(), 16 | "text/html; charset=utf-8", 17 | ); 18 | 19 | assertEquals(content.includes("Ultra CSR"), true); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /examples/with-unocss/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html; charset=utf-8", 19 | }); 20 | }); 21 | 22 | if (import.meta.main) { 23 | Deno.serve(server.fetch); 24 | } 25 | 26 | export default server; 27 | -------------------------------------------------------------------------------- /examples/lite/app.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import hydrate from "ultra/hydrate.js"; 3 | 4 | export default function App() { 5 | const [count, setCount] = useState(0); 6 | return ( 7 | 8 | 9 | 10 | lite 11 | 12 | 13 | 14 |
15 |

16 | Ultra Lite 17 |

18 | 21 |
22 | 23 | 24 | ); 25 | } 26 | 27 | typeof document !== "undefined" && hydrate(document, ); 28 | -------------------------------------------------------------------------------- /examples/react-experimental/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html; charset=utf-8", 19 | }); 20 | }); 21 | 22 | if (import.meta.main) { 23 | Deno.serve(server.fetch); 24 | } 25 | 26 | export default server; 27 | -------------------------------------------------------------------------------- /examples/with-react-three-fiber/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html; charset=utf-8", 19 | }); 20 | }); 21 | 22 | if (import.meta.main) { 23 | Deno.serve(server.fetch); 24 | } 25 | 26 | export default server; 27 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | }); 9 | 10 | /** 11 | * Default route 12 | */ 13 | server.get("*", async (context) => { 14 | /** 15 | * Render the request 16 | */ 17 | const result = await server.render(, { 18 | generateStaticHTML: true, 19 | disableHydration: true, 20 | }); 21 | 22 | return context.body(result, 200, { 23 | "content-type": "text/html", 24 | }); 25 | }); 26 | 27 | Deno.serve({ port: 8000 }, server.fetch); 28 | -------------------------------------------------------------------------------- /examples/ultra-website/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import { Router } from "wouter"; 3 | import staticLocationHook from "wouter/static-location"; 4 | import App from "./src/app.tsx"; 5 | 6 | const server = await createServer({ 7 | importMapPath: import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render( 16 | 17 | 18 | , 19 | ); 20 | 21 | return context.body(result, 200, { 22 | "content-type": "text/html", 23 | }); 24 | }); 25 | 26 | Deno.serve(server.fetch); 27 | -------------------------------------------------------------------------------- /examples/with-emotion/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import { emotionTransformStream } from "./server/emotion.ts"; 3 | import App from "./src/app.tsx"; 4 | 5 | const server = await createServer({ 6 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 7 | ? import.meta.resolve("./importMap.dev.json") 8 | : import.meta.resolve("./importMap.json"), 9 | browserEntrypoint: import.meta.resolve("./client.tsx"), 10 | }); 11 | 12 | server.get("*", async (context) => { 13 | /** 14 | * Render the request 15 | */ 16 | const result = await server.render(); 17 | const transformed = emotionTransformStream(result); 18 | 19 | return context.body(transformed, 200, { 20 | "content-type": "text/html", 21 | }); 22 | }); 23 | 24 | Deno.serve(server.fetch); 25 | -------------------------------------------------------------------------------- /examples/with-csr/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export default function App() { 4 | const [count, setCount] = useState(0); 5 | return ( 6 |
7 |

8 | __ 9 |

10 |

11 | Welcome to{" "} 12 | Ultra. This is a barebones starter for your web app. 13 |

14 | 15 |

16 | Take{" "} 17 | 18 | this 19 | 20 | , you may need it where you are going. It will show you how to customise 21 | your routing, data fetching, and styling with popular libraries. 22 |

23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /examples/bogus-marketing-or-blog/src/app.tsx: -------------------------------------------------------------------------------- 1 | export default function App({ request }: { request: Request }) { 2 | console.log({ request: new URL(request.url) }); 3 | const path = new URL(request.url).pathname; 4 | return ( 5 | 6 | 7 | 8 | Ultra 9 | 10 | 11 | 12 | 13 | 14 |
15 |

16 | __ 17 |

18 |

19 | {path == "/" ? "Home" : "404"} 20 |

21 |
22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/prerequisites.mdx: -------------------------------------------------------------------------------- 1 | # Prerequisites 2 | 3 | These prerequisites are what we recommend to have knowledge and a basic understanding of before you begin your Ultra journey. 4 | 5 | #### [Deno](#deno) 6 | 7 | Ultra is built to run on the [Deno](https://deno.land) runtime (no NodeJS to be found here). So it's a good idea to familiarize yourself 8 | with the Deno runtime and what makes it tick. 9 | 10 | [Deno Introduction](https://deno.land/manual/introduction) 11 | 12 | #### [ESM](#esm) 13 | 14 | [Learn more about ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 15 | 16 | #### [React](#react) 17 | 18 | [https://reactjs.org](https://reactjs.org/) 19 | 20 | #### [(Optional) TypeScript](#optional-typescript) 21 | 22 | [https://typescriptlang.org](https://www.typescriptlang.org/) -------------------------------------------------------------------------------- /examples/with-stitches/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from "./stitches.config.ts"; 2 | import { ThemeProvider } from "./theme.tsx"; 3 | 4 | const Text = styled("div", { 5 | fontSize: "3em", 6 | background: "blue", 7 | color: "white", 8 | padding: "$1", 9 | }); 10 | 11 | export default function App() { 12 | return ( 13 | 14 | 15 | 16 | 17 | with-stitches 18 | 19 | 20 | 21 | 22 | 23 | Hello with-stitches! 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /examples/with-twind/src/twind.ts: -------------------------------------------------------------------------------- 1 | // @see https://twind.style/library-mode 2 | import { 3 | cssom, 4 | injectGlobal as injectGlobal$, 5 | keyframes as keyframes$, 6 | stringify as stringify$, 7 | twind, 8 | tx as tx$, 9 | virtual, 10 | } from "@twind/core"; 11 | import config from "./twind.config.js"; 12 | 13 | const styleElementId = "__twind"; 14 | 15 | export const sheet = typeof Deno === "undefined" 16 | ? cssom(`style#${styleElementId}`) 17 | : virtual(); 18 | 19 | export const stringify = (target: unknown) => 20 | ``; 21 | 22 | //@ts-ignore twind type issue 23 | export const tw = twind( 24 | config, 25 | sheet, 26 | ); 27 | 28 | export const tx = tx$.bind(tw); 29 | export const injectGlobal = injectGlobal$.bind(tw); 30 | export const keyframes = keyframes$.bind(tw); 31 | -------------------------------------------------------------------------------- /examples/with-netlify-(WIP)/server.tsx: -------------------------------------------------------------------------------- 1 | import { createServer } from "ultra/server.ts"; 2 | import App from "./src/app.tsx"; 3 | 4 | const server = await createServer({ 5 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 6 | ? import.meta.resolve("./importMap.dev.json") 7 | : import.meta.resolve("./importMap.json"), 8 | browserEntrypoint: import.meta.resolve("./client.tsx"), 9 | }); 10 | 11 | server.get("*", async (context) => { 12 | /** 13 | * Render the request 14 | */ 15 | const result = await server.render(); 16 | 17 | return context.body(result, 200, { 18 | "content-type": "text/html", 19 | }); 20 | }); 21 | 22 | if (import.meta.main) { 23 | const { serve } = await import( 24 | "https://deno.land/std@0.176.0/http/server.ts" 25 | ); 26 | serve(server.fetch); 27 | } 28 | 29 | export default server.fetch; 30 | -------------------------------------------------------------------------------- /examples/with-preact/src/app.tsx: -------------------------------------------------------------------------------- 1 | import useAsset from "ultra/hooks/use-asset.js"; 2 | import island from "ultra/hooks/use-island.js"; 3 | import Counter from "./Counter.tsx"; 4 | 5 | const CounterIsland = island(Counter); 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | basic 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /examples/with-react-helmet-async/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { Helmet } from "react-helmet-async"; 2 | 3 | export default function App() { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | with-react-helmet-async 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
Hello with-react-helmet-async!
20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /examples/with-react-query/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { lazy, Suspense } from "react"; 2 | import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; 3 | import Todo from "./todo.tsx"; 4 | 5 | const SlowTodo = lazy(() => import("./slow-todo.tsx")); 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | with-react-query 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Loading}> 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /examples/with-fly-io/fly.toml: -------------------------------------------------------------------------------- 1 | # fly.toml file generated for spring-morning-4944 on 2022-08-21T08:17:42Z 2 | 3 | app = "spring-morning-4944" 4 | kill_signal = "SIGINT" 5 | kill_timeout = 5 6 | processes = [] 7 | 8 | [env] 9 | 10 | [experimental] 11 | allowed_public_ports = [] 12 | auto_rollback = true 13 | 14 | [[services]] 15 | http_checks = [] 16 | internal_port = 8080 17 | processes = ["app"] 18 | protocol = "tcp" 19 | script_checks = [] 20 | [services.concurrency] 21 | hard_limit = 25 22 | soft_limit = 20 23 | type = "connections" 24 | 25 | [[services.ports]] 26 | force_https = true 27 | handlers = ["http"] 28 | port = 80 29 | 30 | [[services.ports]] 31 | handlers = ["tls", "http"] 32 | port = 443 33 | 34 | [[services.tcp_checks]] 35 | grace_period = "1s" 36 | interval = "15s" 37 | restart_limit = 0 38 | timeout = "2s" 39 | -------------------------------------------------------------------------------- /examples/with-react-query/src/hooks/useDehydrateReactQuery.tsx: -------------------------------------------------------------------------------- 1 | import { dehydrate, QueryClient } from "@tanstack/react-query"; 2 | import useServerInsertedHTML from "ultra/hooks/use-server-inserted-html.js"; 3 | 4 | export function useDehydrateReactQuery(queryClient: QueryClient) { 5 | useServerInsertedHTML(() => { 6 | /** 7 | * Dehydrate the state from queryClient 8 | */ 9 | const dehydratedState = dehydrate(queryClient); 10 | 11 | return ( 12 | 20 | ); 21 | }); 22 | } 23 | 24 | // Note: There are known limitations to `dehydrate`, more info here. 25 | // https://github.com/TanStack/query/blob/main/docs/reference/hydration.md#limitations 26 | -------------------------------------------------------------------------------- /examples/with-trpc/src/trpc/client.tsx: -------------------------------------------------------------------------------- 1 | import { type ReactNode } from "react"; 2 | import { httpBatchLink } from "@trpc/client/links/httpBatchLink"; 3 | import { Hydrate, QueryClientProvider } from "@tanstack/react-query"; 4 | import { queryClient } from "../query-client.tsx"; 5 | import { trpc } from "./trpc.ts"; 6 | 7 | declare const __REACT_QUERY_DEHYDRATED_STATE: unknown; 8 | 9 | const trpcClient = trpc.createClient({ 10 | links: [ 11 | httpBatchLink({ 12 | url: "/api/trpc", 13 | }), 14 | ], 15 | }); 16 | 17 | export function TRPCClientProvider({ children }: { children?: ReactNode }) { 18 | return ( 19 | 20 | 21 | {children} 22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /examples/with-unocss/dev.ts: -------------------------------------------------------------------------------- 1 | import { build } from "unocss/cli"; 2 | 3 | let process: Deno.Process; 4 | let reloading = false; 5 | 6 | async function dev() { 7 | await build({ 8 | patterns: ["src/**/*"], 9 | outFile: "public/uno.css", 10 | }); 11 | const command = new Deno.Command(Deno.execPath(), { 12 | args: [ 13 | "run", 14 | "-A", 15 | "--location=http://localhost:8000", 16 | "./server.tsx", 17 | ], 18 | }); 19 | const server = command.spawn(); 20 | 21 | return server; 22 | } 23 | 24 | async function reload() { 25 | if (reloading) return; 26 | reloading = true; 27 | process.kill(); 28 | process = await dev(); 29 | reloading = false; 30 | } 31 | 32 | process = await dev(); 33 | const watcher = Deno.watchFs(["./src"]); 34 | for await (const { kind } of watcher) { 35 | if (kind === "modify" || kind === "create") { 36 | await reload(); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/data-fetching.mdx: -------------------------------------------------------------------------------- 1 | # Data Fetching 2 | 3 | > **Note**: This section is a work-in-progress 4 | 5 | **Ultra** supports multiple use-cases for fetching data on the server side. 6 | 7 | #### [render as you fetch (Suspense)](#render-as-you-fetch-suspense) 8 | 9 | ✏️ 10 | 11 | #### [render as you fetch (Blocking)](#render-as-you-fetch-blocking) 12 | 13 | ✏️ 14 | 15 | #### [Route based pre-fetching](#route-based-pre-fetching) 16 | 17 | ✏️ 18 | 19 | --- 20 | 21 | #### [use](#use) 22 | 23 | **Ultra** supports React's `use` API to handle async data loading. 24 | 25 | [RFC: First class support for promises and async/await](https://github.com/reactjs/rfcs/pull/229) 26 | 27 | #### [react-query](#react-query) 28 | 29 | [https://tanstack.com/query](https://tanstack.com/query) 30 | 31 | [ultra-with-react-query](https://github.com/exhibitionist-digital/ultra/tree/main/examples/with-react-query) 32 | -------------------------------------------------------------------------------- /examples/with-react-router/server.tsx: -------------------------------------------------------------------------------- 1 | import { StaticRouter } from "react-router-dom/server"; 2 | import { createServer } from "ultra/server.ts"; 3 | import App from "./src/app.tsx"; 4 | 5 | const server = await createServer({ 6 | importMapPath: Deno.env.get("ULTRA_MODE") === "development" 7 | ? import.meta.resolve("./importMap.dev.json") 8 | : import.meta.resolve("./importMap.json"), 9 | browserEntrypoint: import.meta.resolve("./client.tsx"), 10 | }); 11 | 12 | server.get("*", async (context) => { 13 | /** 14 | * Render the request with context 15 | */ 16 | const result = await server.renderWithContext( 17 | 18 | 19 | , 20 | context, 21 | ); 22 | 23 | return context.body(result, undefined, { 24 | "content-type": "text/html; charset=utf-8", 25 | }); 26 | }); 27 | 28 | Deno.serve(server.fetch); 29 | -------------------------------------------------------------------------------- /examples/with-twind/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { lazy, Suspense } from "react"; 2 | import Post from "./post.tsx"; 3 | import { tw } from "./twind.ts"; 4 | 5 | const LazyPost = lazy(() => import("./post.tsx")); 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | with-twind 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /examples/with-mdx/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { MDXProvider } from "@mdx-js/react"; 2 | import useAsset from "ultra/hooks/use-asset.js"; 3 | 4 | import Docs from "./content/docs.js"; 5 | 6 | const Image = ( 7 | { src, ...props }: React.ImgHTMLAttributes, 8 | ) => { 9 | return ; 10 | }; 11 | 12 | export default function App() { 13 | return ( 14 | 19 | 20 | 21 | 22 | With with-mdx 23 | 24 | 25 | 26 | 27 |

Hello World

28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /examples/ultra-website/content/docs/code-splitting.mdx: -------------------------------------------------------------------------------- 1 | # Code Splitting 2 | 3 | Writing and shipping native ESM allows you to take advantage of some pretty neat optimisation features. Dynamic imports and the `lazy` API can be used to import components on the fly, in a way that is compatible with `Suspense`. 4 | 5 | [React Lazy Docs](https://reactjs.org/docs/code-splitting.html#reactlazy) 6 | 7 | ```js 8 | import { lazy, Suspense } from 'react'; 9 | 10 | const OtherComponent = lazy(() => import('./OtherComponent.jsx')); 11 | 12 | function MyComponent() { 13 | return ( 14 |
15 | Loading...
}> 16 | 17 | 18 | 19 | ); 20 | } 21 | ``` 22 | 23 | When both server and client rendering this component, the `OtherComponent.jsx` will only be imported when requested. Native code-splitting? YES! 24 | 25 | Using `lazy` imports with Routing is one of the best things ever -------------------------------------------------------------------------------- /examples/ultra-website/src/components/Home.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from "wouter"; 2 | import Content from "../content/anti-bundle.js"; 3 | import { MDXProvider } from "@mdx-js/react"; 4 | import useAsset from "ultra/hooks/use-asset.js"; 5 | import { Ultra } from "../app.tsx"; 6 | 7 | const Image = ({ src, alt }: { src: string; alt: string }) => { 8 | return {alt}; 9 | }; 10 | 11 | export default function HomePage() { 12 | return ( 13 | 18 |
19 |

Ultra

20 |

21 | Ultra is an all ESM React/Deno framework that is built for Suspense 22 | Server Side Rendering.
Write ESM, ship ESM, simplify your life. 23 |

24 |
25 |
26 |
27 | 28 |
29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /examples/with-preact/src/Counter.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from "react"; 2 | 3 | interface CounterProps { 4 | start: number; 5 | } 6 | 7 | export default function Counter(props: CounterProps) { 8 | const [count, setCount] = useState(props.start); 9 | const [hydrated, setHydrated] = useState(false); 10 | const ref = useRef(null); 11 | 12 | useEffect(() => { 13 | if (ref.current) { 14 | console.log("hydrated"); 15 | setHydrated(true); 16 | } 17 | }, []); 18 | 19 | return ( 20 |
21 |

Hydrated

22 |

{count}

23 | 26 | 29 |
30 | ); 31 | } 32 | 33 | /** 34 | * This is key to make a component island compatible 35 | */ 36 | Counter.url = import.meta.url; 37 | -------------------------------------------------------------------------------- /examples/with-islands/src/Counter.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from "react"; 2 | 3 | interface CounterProps { 4 | start: number; 5 | } 6 | 7 | export default function Counter(props: CounterProps) { 8 | const [count, setCount] = useState(props.start); 9 | const [hydrated, setHydrated] = useState(false); 10 | const ref = useRef(null); 11 | 12 | useEffect(() => { 13 | if (ref.current) { 14 | console.log("hydrated", performance.now()); 15 | setHydrated(true); 16 | } 17 | }, []); 18 | 19 | return ( 20 |
21 |

Hydrated

22 |

{count}

23 | 26 | 29 |
30 | ); 31 | } 32 | 33 | /** 34 | * This is key to make a component island compatible 35 | */ 36 | Counter.url = import.meta.url; 37 | -------------------------------------------------------------------------------- /examples/ultra-website/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "@mdx-js/run": "https://esm.sh/v122/@mdx-js/mdx@2.1.3/lib/run.js", 4 | "@mdx-js/react": "https://esm.sh/v122/@mdx-js/react@2.1.3?external=react", 5 | "react": "https://esm.sh/v122/react@0.0.0-experimental-8951c5fc9-20220915", 6 | "react/": "https://esm.sh/v122/react@0.0.0-experimental-8951c5fc9-20220915/", 7 | "react-dom": "https://esm.sh/v122/react-dom@0.0.0-experimental-8951c5fc9-20220915", 8 | "react-dom/server": "https://esm.sh/v122/react-dom@0.0.0-experimental-8951c5fc9-20220915/server", 9 | "react-dom/client": "https://esm.sh/v122/react-dom@0.0.0-experimental-8951c5fc9-20220915/client", 10 | "ultra/": "https://deno.land/x/ultra@v2.3.8/", 11 | "@tanstack/react-query": "https://esm.sh/v122/@tanstack/react-query@4.1.3?external=react", 12 | "wouter": "https://esm.sh/v122/wouter@2.9.0?external=react", 13 | "wouter/static-location": "https://esm.sh/v122/wouter@2.9.0/static-location?external=react" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/with-trpc/importMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "react": "https://esm.sh/v122/react@18.2.0?dev", 4 | "react/": "https://esm.sh/v122/react@18.2.0&dev/", 5 | "react-dom": "https://esm.sh/v122/react-dom@18.2.0?dev", 6 | "react-dom/": "https://esm.sh/v122/react-dom@18.2.0&dev/", 7 | "@tanstack/react-query": "https://esm.sh/v122/@tanstack/react-query@4.13.0?external=react", 8 | "@tanstack/react-query-devtools": "https://esm.sh/v122/@tanstack/react-query-devtools@4.13.0?external=react,@tanstack/react-query&dev", 9 | "@trpc/server": "https://esm.sh/v122/@trpc/server@10.0.0", 10 | "@trpc/server/": "https://esm.sh/v122/@trpc/server@10.0.0/", 11 | "@trpc/client": "https://esm.sh/v122/*@trpc/client@10.0.0", 12 | "@trpc/client/": "https://esm.sh/v122/*@trpc/client@10.0.0/", 13 | "@trpc/react-query": "https://esm.sh/v122/*@trpc/react-query@10.0.0", 14 | "zod": "https://deno.land/x/zod@v3.19.1/mod.ts", 15 | "ultra/": "https://deno.land/x/ultra@v2.3.8/" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/with-wouter/server.test.ts: -------------------------------------------------------------------------------- 1 | import { assertEquals } from "https://deno.land/std@0.176.0/testing/asserts.ts"; 2 | import server from "./server.tsx"; 3 | 4 | async function testRenderedContainsText(location: string, text: string) { 5 | const response = await server.request(location); 6 | const content = await response.text(); 7 | 8 | assertEquals(response.status, 200); 9 | assertEquals( 10 | response.headers.get("content-type"), 11 | "text/html; charset=utf-8", 12 | ); 13 | 14 | assertEquals(content.includes(text), true); 15 | } 16 | 17 | /** 18 | * This is here as an example of how to test your 19 | * server/rendering. 20 | */ 21 | Deno.test("it works", async (t) => { 22 | await t.step("it can render the homepage", async () => { 23 | await testRenderedContainsText("http://localhost/", "Home page"); 24 | }); 25 | 26 | await t.step("it can render the about page", async () => { 27 | await testRenderedContainsText("http://localhost/about", "About page"); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /examples/with-trpc/src/query-client.tsx: -------------------------------------------------------------------------------- 1 | import { dehydrate, QueryClient } from "@tanstack/react-query"; 2 | import useServerInsertedHTML from "ultra/hooks/use-server-inserted-html.js"; 3 | 4 | export const queryClient = new QueryClient({ 5 | defaultOptions: { 6 | queries: { 7 | suspense: true, 8 | }, 9 | }, 10 | }); 11 | 12 | export function useDehydrateReactQuery(queryClient: QueryClient) { 13 | useServerInsertedHTML(() => { 14 | /** 15 | * Dehydrate the state from queryClient 16 | */ 17 | const dehydratedState = dehydrate(queryClient); 18 | 19 | return ( 20 | 24 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | `); 34 | }); 35 | 36 | if (import.meta.main) { 37 | Deno.serve(server.fetch); 38 | } 39 | 40 | export default server; 41 | -------------------------------------------------------------------------------- /examples/with-wouter/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { Link, Route, Switch } from "wouter"; 2 | import HomePage from "./pages/Home.tsx"; 3 | import AboutPage from "./pages/About.tsx"; 4 | import { useSearchParams } from "./context/SearchParams.tsx"; 5 | 6 | export default function App() { 7 | const searchParams = useSearchParams(); 8 | return ( 9 | 10 | 11 | 12 | with-wouter 13 | 14 | 15 | 16 | 17 | 22 |
23 |
Search params: {searchParams.toString()}
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 404 33 | 34 | 35 |
36 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /examples/with-unocss/src/app.tsx: -------------------------------------------------------------------------------- 1 | import useAsset from "ultra/hooks/use-asset.js"; 2 | 3 | export default function App() { 4 | return ( 5 | 6 | 7 | 8 | basic 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

17 | Welcome to{" "} 18 | Ultra. This is a barebones starter for your web 19 | app. 20 |

21 |

22 | Take{" "} 23 | 27 | this 28 | , you may need it where you are going. It will show you how to 29 | customise your routing, data fetching, and styling with popular 30 | libraries. 31 |

32 |
33 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /examples/with-emotion/server/emotion.ts: -------------------------------------------------------------------------------- 1 | import { 2 | createHeadInsertionTransformStream, 3 | createTransformStream, 4 | } from "ultra/stream.ts"; 5 | 6 | const regex = new RegExp( 7 | `