@mizchi | Workers Tech Talk
- SSR 前提 で最適化を行うUIライブラリ
- クライアントの処理が最小限
#!/usr/bin/env -S deno run --allow-net --allow-read --allow-env --unstable --ext=ts | |
// USAGE: $ deno run cfai-text.ts "Hello Cloudflare AI!" | |
type RequestType = { | |
messages: { | |
role: string; | |
content: string; | |
}[]; | |
}; |
/** | |
* This is patched esm.sh/run | |
* - Add text/typescript-jsx | |
* - Add auto reload with ?poll={millisecond} | |
* | |
* Usage: | |
* <script type="module" src="https://gistcdn.githack.com/mizchi/897e4a83e33fdcec35fd7d17f84f79d3/raw/df31217503cad48cc9dece94269fe9779b60eba7/patched-esmsh-run.js"></script> | |
*/ | |
/*! esm.sh/run |
// subhosting | |
const API = "https://api.deno.com/v1"; | |
type CreateDeploymentResponse = { | |
id: string; | |
projectId: string; | |
description: string; | |
status: string; | |
domains: string[]; | |
databases: Record<string, any>; |
Original(japanese) https://zenn.dev/mizchi/articles/standalone-html-frontend
Mostly translated by deepl
Note: Do not use in production, tailwind is running in CDN mode and esm.sh builds scripts dynamically, so performance is not good.
import React from "react"; | |
import ReactDOM from "react-dom"; | |
import { ChakraProvider, DarkMode, Button, LightMode } from "@chakra-ui/react"; | |
import type { ApplicationProps } from "../../shell/src/types"; | |
import { CacheProvider } from "@emotion/react"; | |
import createCache from "@emotion/cache"; | |
function Root(props: ApplicationProps) { | |
return ( | |
<> |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<script src="https://cdn.tailwindcss.com"></script> | |
<style type="text/tailwindcss"> | |
@tailwind base; |