feat: support for render styles to html on the server side (geist-org…

…#738) * feat: support for render styles to html on the server side * chore: release v2.3.2 * docs(examples): add example for remix
mochi-sann · Feb 12, 2022 · ccb839c · ccb839c
1 parent b83edbb
commit ccb839c
Show file tree

Hide file tree

Showing 16 changed files with 171 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,6 +32,8 @@ examples/**/yarn.lock
 examples/**/out
 examples/**/.next
 examples/**/node_modules
+examples/**/_build
+examples/**/.cache
 
 # Local Netlify folder
 .netlify
diff --git a/components/css-baseline/css-baseline.tsx b/components/css-baseline/css-baseline.tsx
@@ -1,8 +1,9 @@
 import React, { ReactElement } from 'react'
 import useTheme from '../use-theme'
-import flush from 'styled-jsx/server'
+import flush, { flushToHTML } from 'styled-jsx/server'
 
 export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
+export type FlushToHTML = (opts?: { nonce?: string }) => string
 
 const CssBaseline: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme = useTheme()
@@ -304,11 +305,13 @@ const CssBaseline: React.FC<React.PropsWithChildren<unknown>> = ({ children }) =
 
 type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
   flush: FlushToReact
+  flushToHTML: FlushToHTML
 }
 
 const MemoCssBaseline = React.memo(CssBaseline) as MemoCssBaselineComponent<
   React.PropsWithChildren<unknown>
 >
 MemoCssBaseline.flush = flush
+MemoCssBaseline.flushToHTML = flushToHTML
 
 export default MemoCssBaseline
diff --git a/examples/remix/README.md b/examples/remix/README.md
@@ -0,0 +1,21 @@
+# Remix demo for Geist UI
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/routes/index.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Remix, take a look at the following resources:
+
+- [Remix v1](https://remix.run/docs/en/v1) - learn about Next.js features and API.
diff --git a/examples/remix/api/index.js b/examples/remix/api/index.js
@@ -0,0 +1,5 @@
+const { createRequestHandler } = require('@remix-run/vercel')
+
+module.exports = createRequestHandler({
+  build: require('./_build'),
+})
diff --git a/examples/remix/app/entry.client.tsx b/examples/remix/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from 'react-dom'
+import { RemixBrowser } from 'remix'
+
+hydrate(<RemixBrowser />, document)
diff --git a/examples/remix/app/entry.server.tsx b/examples/remix/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import { renderToString } from 'react-dom/server'
+import { RemixServer } from 'remix'
+import type { EntryContext } from 'remix'
+import { CssBaseline } from '@geist-ui/core'
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  let markup = renderToString(<RemixServer context={remixContext} url={request.url} />)
+  markup = markup.replace('__STYLES__', CssBaseline.flushToHTML())
+
+  responseHeaders.set('Content-Type', 'text/html')
+
+  return new Response('<!DOCTYPE html>' + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  })
+}
diff --git a/examples/remix/app/root.tsx b/examples/remix/app/root.tsx
@@ -0,0 +1,30 @@
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from 'remix'
+import type { MetaFunction } from 'remix'
+import { CssBaseline, GeistProvider } from '@geist-ui/core'
+
+export const meta: MetaFunction = () => {
+  return { title: 'Geist with Remix' }
+}
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        {typeof document === 'undefined' ? '__STYLES__' : null}
+      </head>
+      <body>
+        <GeistProvider>
+          <CssBaseline />
+          <Outlet />
+        </GeistProvider>
+        <ScrollRestoration />
+        <Scripts />
+        {process.env.NODE_ENV === 'development' && <LiveReload />}
+      </body>
+    </html>
+  )
+}
diff --git a/examples/remix/app/routes/index.tsx b/examples/remix/app/routes/index.tsx
@@ -0,0 +1,11 @@
+import { Card, Page, Text } from '@geist-ui/core'
+
+export default function Index() {
+  return (
+    <Page>
+      <Card>
+        <Text>Hello, Geist with Remix</Text>
+      </Card>
+    </Page>
+  )
+}
diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "geist-remix",
+  "license": "MIT",
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "postinstall": "remix setup node"
+  },
+  "prettier": "@geist-ui/prettier-config",
+  "dependencies": {
+    "@geist-ui/core": "latest",
+    "@remix-run/react": "^1.1.3",
+    "@remix-run/serve": "^1.1.3",
+    "@remix-run/vercel": "^1.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "remix": "^1.1.3"
+  },
+  "devDependencies": {
+    "@geist-ui/prettier-config": "^1.0.1",
+    "@remix-run/dev": "^1.1.3",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "prettier": "^2.5.1",
+    "typescript": "^4.1.2"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "sideEffects": false
+}
diff --git a/examples/remix/public/favicon.ico b/examples/remix/public/favicon.ico
diff --git a/examples/remix/remix.config.js b/examples/remix/remix.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('@remix-run/dev/config').AppConfig}
+ */
+module.exports = {
+  appDirectory: 'app',
+  assetsBuildDirectory: 'public/build',
+  publicPath: '/build/',
+  serverBuildDirectory: 'api/_build',
+  ignoredRouteFiles: ['.*'],
+}
diff --git a/examples/remix/remix.env.d.ts b/examples/remix/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />
diff --git a/examples/remix/tsconfig.json b/examples/remix/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
diff --git a/examples/remix/vercel.json b/examples/remix/vercel.json
@@ -0,0 +1,7 @@
+{
+  "build": {
+    "env": {
+      "ENABLE_FILE_SYSTEM_API": "1"
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@geist-ui/core",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "types": "esm/index.d.ts",

diff --git a/scripts/built-in/styled-jsx-server.es.js b/scripts/built-in/styled-jsx-server.es.js
@@ -1,4 +1,5 @@
 import { server } from './styled-jsx.es'
+const { flushToHTML } = server
 
-export { server }
+export { server, flushToHTML }
 export default server
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/dev" />
		/// <reference types="@remix-run/node/globals" />