kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use vite-plugin-ssr

Browse Source
This commit is contained in:
MapleLeaf
2022-01-02 17:10:29 -06:00
committed by Darius
parent 336e680b6e
commit bfe12c9bcd
18 changed files with 203 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/docs-new/build.ts
View File

@@ -1,16 +0,0 @@
import { resolve } from "node:path"
import { build } from "vite"
await build({
build: { outDir: "dist/client" },
})
await build({
build: {
ssr: resolve("src/entry.server.tsx"),
outDir: "dist/server",
rollupOptions: {
output: { format: "es" },
},
},
})

21
packages/docs-new/index.html
View File

@@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en" class="bg-slate-900 text-slate-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
<link href="/src/styles/tailwind.css" rel="stylesheet" />
<link href="/src/styles/prism-theme.css" rel="stylesheet" />
<!--inject-head-->
</head>
<body>
<div id="app" class="contents">
<!--inject-body-->
</div>
</body>
</html>

19
packages/docs-new/package.json
View File

@@ -4,22 +4,23 @@
"private": true,
"scripts": {
"dev": "esmo server.ts",
"build": "esmo build.ts",
"build": "vite build && vite build --ssr",
"start": "NODE_ENV=production esmo server.ts"
},
"dependencies": {
"express": "^4.17.2",
"reacord": "workspace:*",
"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",
"react-head": "^3.4.0",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"@heroicons/react": "^1.0.5",
"@reach/rect": "^0.16.0",
"clsx": "^1.1.1",
"express": "^4.17.2",
"gray-matter": "^4.0.3",
"react-focus-on": "^3.5.4"
"reacord": "workspace:*",
"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",
"react-focus-on": "^3.5.4",
"react-head": "^3.4.0",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"vite-plugin-ssr": "^0.3.42"
},
"devDependencies": {
"@mapbox/rehype-prism": "^0.8.0",

95
packages/docs-new/server.ts
View File

@@ -1,76 +1,39 @@
import compression from "compression"
import express, { Router } from "express"
import { readFile } from "node:fs/promises"
import { join, resolve } from "node:path"
import { createServer as createViteServer } from "vite"
import type * as entryModule from "./src/entry.server"
import express from "express"
import { dirname, join } from "node:path"
import { fileURLToPath } from "node:url"
import { createPageRenderer } from "vite-plugin-ssr"
async function createDevelopmentRouter() {
const vite = await createViteServer({
server: { middlewareMode: "ssr" },
})
return Router()
.use(vite.middlewares)
.use("*", async (req, res) => {
const url = req.originalUrl
try {
const { render } = (await vite.ssrLoadModule(
"/src/entry.server.tsx",
)) as typeof entryModule
const htmlTemplate = await readFile(
join(vite.config.root, "index.html"),
"utf8",
)
const html = await vite.transformIndexHtml(
url,
render(url, htmlTemplate),
)
res.status(200).set({ "Content-Type": "text/html" }).end(html)
} catch (error: any) {
vite.ssrFixStacktrace(error)
console.error(error)
res.status(500).end(error.stack || error.message)
}
})
}
function createProductionRouter() {
return Router()
.use(compression())
.use(express.static(resolve("dist/client"), { index: false }))
.use("*", async (req, res) => {
try {
const { render }: typeof entryModule = await import(
"./dist/server/entry.server"
)
const htmlTemplate = await readFile("dist/client/index.html", "utf8")
res
.status(200)
.set({ "Content-Type": "text/html" })
.end(render(req.originalUrl, htmlTemplate))
} catch (error: any) {
console.error(error)
res.status(500).end(error.stack || error.message)
}
})
}
const isProduction = process.env.NODE_ENV === "production"
const root = dirname(fileURLToPath(import.meta.url))
const app = express()
if (process.env.NODE_ENV === "production") {
app.use(createProductionRouter())
let viteDevServer
if (isProduction) {
app.use(express.static(join(root, "dist/client")))
} else {
app.use(await createDevelopmentRouter())
const vite = await import("vite")
viteDevServer = await vite.createServer({
root,
server: { middlewareMode: "ssr" },
})
app.use(viteDevServer.middlewares)
}
const renderPage = createPageRenderer({ viteDevServer, isProduction, root })
app.get("*", async (req, res, next) => {
const url = req.originalUrl
const pageContextInit = {
url,
}
const pageContext = await renderPage(pageContextInit)
const { httpResponse } = pageContext
if (!httpResponse) return next()
const { body, statusCode, contentType } = httpResponse
res.status(statusCode).type(contentType).send(body)
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`listening on http://localhost:${port}`)
console.info(`Server running at http://localhost:${port}`)
})

16
packages/docs-new/src/entry.client.tsx → packages/docs-new/src/_default.page.client.tsx
View File

@@ -1,14 +1,18 @@
import React from "react"
import { createRoot } from "react-dom"
import { HeadProvider } from "react-head"
import { BrowserRouter } from "react-router-dom"
import type { PageContextBuiltInClient } from "vite-plugin-ssr/client"
import { getPage } from "vite-plugin-ssr/client"
import { App } from "./app"
const context = await getPage<PageContextBuiltInClient>()
createRoot(document.querySelector("#app")!).render(
<BrowserRouter>
<HeadProvider>
<App />
</HeadProvider>
</BrowserRouter>,
<HeadProvider>
<App>
<context.Page />
</App>
</HeadProvider>,
)
declare module "react-dom" {

46
packages/docs-new/src/_default.page.server.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from "react"
import { renderToStaticMarkup, renderToString } from "react-dom/server.js"
import { HeadProvider } from "react-head"
import type { PageContextBuiltIn } from "vite-plugin-ssr"
import { dangerouslySkipEscape, escapeInject } from "vite-plugin-ssr"
import { App } from "./app"
export const passToClient = ["routeParams"]
export function render(context: PageContextBuiltIn) {
const headTags: React.ReactElement[] = []
const pageHtml = renderToString(
<HeadProvider headTags={headTags}>
<App>
<context.Page />
</App>
</HeadProvider>,
)
const documentHtml = escapeInject/* HTML */ `
<!DOCTYPE html>
<html lang="en" class="bg-slate-900 text-slate-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
${dangerouslySkipEscape(renderToStaticMarkup(<>{headTags}</>))}
</head>
<body>
<div id="app" class="contents">${dangerouslySkipEscape(pageHtml)}</div>
</body>
</html>
`
return { documentHtml }
}

35
packages/docs-new/src/app.tsx
View File

@@ -1,41 +1,14 @@
import { description } from "reacord/package.json"
import { lazy, Suspense } from "react"
import { Meta, Title } from "react-head"
import { Route, Routes } from "react-router-dom"
import { GuidePageLayout } from "./components/guide-page-layout"
import { LandingPage } from "./pages/landing-page"
import "tailwindcss/tailwind.css"
import "./styles/prism-theme.css"
export function App() {
export function App({ children }: { children: React.ReactNode }) {
return (
<>
<Title>Reacord</Title>
<Meta name="description" content={description} />
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="docs" element={<GuidePageLayout />}>
{docs.map(({ route, component: Component }) => (
<Route
key={route}
path={route}
element={
<Suspense fallback={<></>}>
<Component />
</Suspense>
}
/>
))}
</Route>
</Routes>
{children}
</>
)
}
const docs = Object.entries(import.meta.glob("./docs/*.md")).map(
([path, loadModule]) => ({
route: path.replace("./docs/", "").replace(/\.md$/, ""),
component: lazy(async () => {
const m = await loadModule()
return { default: m.default || m }
}),
}),
)

10
packages/docs-new/src/components/app-link.tsx
View File

@@ -1,8 +1,7 @@
import { Link } from "react-router-dom"
import { ExternalLink } from "./external-link"
export type AppLinkProps = {
type: "router" | "internal" | "external"
type: "internal" | "external"
label: React.ReactNode
to: string
className?: string
@@ -10,13 +9,6 @@ export type AppLinkProps = {
export function AppLink(props: AppLinkProps) {
switch (props.type) {
case "router":
return (
<Link className={props.className} to={props.to}>
{props.label}
</Link>
)
case "internal":
return (
<a className={props.className} href={props.to}>

3
packages/docs-new/src/components/guide-page-layout.tsx
View File

@@ -1,5 +1,4 @@
import clsx from "clsx"
import { Outlet } from "react-router"
import { guideLinks } from "../data/guide-links"
import { useScrolled } from "../hooks/dom/use-scrolled"
import {
@@ -30,7 +29,7 @@ export function GuidePageLayout() {
</ul>
</nav>
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
<Outlet />
{/* todo */}
</section>
</main>
</>

5
packages/docs-new/src/components/main-navigation.tsx
View File

@@ -1,4 +1,3 @@
import { Link } from "react-router-dom"
import { AppLink } from "../components/app-link"
import { guideLinks } from "../data/guide-links"
import { mainLinks } from "../data/main-links"
@@ -8,9 +7,9 @@ import { PopoverMenu } from "./popover-menu"
export function MainNavigation() {
return (
<nav className="flex justify-between items-center h-16">
<Link to="/">
<a href="/">
<h1 className="text-3xl font-light">reacord</h1>
</Link>
</a>
<div className="hidden md:flex gap-4">
{mainLinks.map((link) => (
<AppLink {...link} key={link.to} className={linkClass} />

2
packages/docs-new/src/data/main-links.tsx
View File

@@ -8,7 +8,7 @@ import { inlineIconClass } from "../styles/components"
export const mainLinks: AppLinkProps[] = [
{
type: "router",
type: "internal",
to: "/docs/getting-started",
label: (
<>

34
packages/docs-new/src/entry.server.tsx
View File

@@ -1,34 +0,0 @@
import { renderToString } from "react-dom/server"
import { HeadProvider } from "react-head"
import { StaticRouter } from "react-router-dom/server"
import { App } from "./app"
export function render(url: string, htmlTemplate: string) {
const headTags: React.ReactElement[] = []
const app = (
<StaticRouter location={url}>
<HeadProvider headTags={headTags}>
<App />
</HeadProvider>
</StaticRouter>
)
const appHtml = renderToString(app)
const scriptSource = import.meta.env.PROD
? "/entry.client.js"
: "/src/entry.client.tsx"
return htmlTemplate
.replace(
"<!--inject-head-->",
renderToString(
<>
{headTags}
<script type="module" src={scriptSource} />
</>,
),
)
.replace("<!--inject-body-->", appHtml)
}

36
packages/docs-new/src/html.ts
View File

@@ -1,36 +0,0 @@
export function html({
head,
body,
scriptSource,
}: {
head: string
body: string
scriptSource: string
}): string {
return /* HTML */ `
<!DOCTYPE html>
<html lang="en" class="bg-slate-900 text-slate-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
<link href="/src/styles/tailwind.css" rel="stylesheet" />
<link href="/src/styles/prism-theme.css" rel="stylesheet" />
${head}
<script type="module" src="${scriptSource}"></script>
</head>
<body>
<div id="app" class="contents">${body}</div>
</body>
</html>
`
}

1
packages/docs-new/src/pages/docs.page.route.tsx Normal file
View File

@@ -0,0 +1 @@
export default "/docs/*"

50
packages/docs-new/src/pages/docs.page.tsx Normal file
View File

@@ -0,0 +1,50 @@
import clsx from "clsx"
import { AppLink } from "../components/app-link"
import { MainNavigation } from "../components/main-navigation"
import { guideLinks } from "../data/guide-links"
import { useScrolled } from "../hooks/dom/use-scrolled"
import {
docsProseClass,
linkClass,
maxWidthContainer,
} from "../styles/components"
export { DocsPage as Page }
function DocsPage() {
return (
<>
<HeaderPanel>
<div className={maxWidthContainer}>
<MainNavigation />
</div>
</HeaderPanel>
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
<nav className="w-48 sticky top-24 hidden md:block">
<h2 className="text-2xl">Guides</h2>
<ul className="mt-3 flex flex-col gap-2 items-start">
{guideLinks.map((link) => (
<li key={link.to}>
<AppLink {...link} className={linkClass} />
</li>
))}
</ul>
</nav>
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
{/* todo */}
</section>
</main>
</>
)
}
function HeaderPanel({ children }: { children: React.ReactNode }) {
const isScrolled = useScrolled()
const className = clsx(
isScrolled ? "bg-slate-700/30" : "bg-slate-800",
"shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
)
return <header className={className}>{children}</header>
}

11
packages/docs-new/src/pages/landing-page.tsx → packages/docs-new/src/pages/index.page.tsx
View File

@@ -1,10 +1,11 @@
import packageJson from "reacord/package.json"
import { Link } from "react-router-dom"
import LandingExample from "../components/landing-example.md"
import { MainNavigation } from "../components/main-navigation"
import { maxWidthContainer } from "../styles/components"
export function LandingPage() {
export { LandingPage as Page }
function LandingPage() {
return (
<div className="flex flex-col min-w-0 min-h-screen text-center">
<header className={maxWidthContainer}>
@@ -17,12 +18,12 @@ export function LandingPage() {
<LandingExample />
</section>
<p className="text-2xl font-light">{packageJson.description}</p>
<Link
to="/docs/getting-started"
<a
href="/docs/getting-started"
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
>
Get Started
</Link>
</a>
</main>
</div>
</div>

2
packages/docs-new/vite.config.ts
View File

@@ -3,10 +3,12 @@ import rehypePrism from "@mapbox/rehype-prism"
import react from "@vitejs/plugin-react"
import remarkFrontmatter from "remark-frontmatter"
import { defineConfig } from "vite"
import ssr from "vite-plugin-ssr/plugin"
import xdm from "xdm/rollup"
export default defineConfig({
plugins: [
ssr(),
react(),
xdm({
remarkPlugins: [remarkFrontmatter],