From 95e70cc576d68e13c90d73a8007e56701e2d56f1 Mon Sep 17 00:00:00 2001 From: unix Date: Sun, 13 Feb 2022 07:18:57 +0800 Subject: [PATCH 1/3] feat: support for render styles to html on the server side --- components/css-baseline/css-baseline.tsx | 5 ++++- scripts/built-in/styled-jsx-server.es.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/css-baseline/css-baseline.tsx b/components/css-baseline/css-baseline.tsx index 77651ebed..01b2ec67c 100644 --- 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 = (opts?: { nonce?: string }) => Array> +export type FlushToHTML = (opts?: { nonce?: string }) => string const CssBaseline: React.FC> = ({ children }) => { const theme = useTheme() @@ -304,11 +305,13 @@ const CssBaseline: React.FC> = ({ children }) = type MemoCssBaselineComponent

= React.NamedExoticComponent

& { flush: FlushToReact + flushToHTML: FlushToHTML } const MemoCssBaseline = React.memo(CssBaseline) as MemoCssBaselineComponent< React.PropsWithChildren > MemoCssBaseline.flush = flush +MemoCssBaseline.flushToHTML = flushToHTML export default MemoCssBaseline diff --git a/scripts/built-in/styled-jsx-server.es.js b/scripts/built-in/styled-jsx-server.es.js index 3d56d3da5..1bf680606 100644 --- 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 From 414b918fb5177e0c8b522f0cce9965afd1de528f Mon Sep 17 00:00:00 2001 From: unix Date: Sun, 13 Feb 2022 07:19:23 +0800 Subject: [PATCH 2/3] chore: release v2.3.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 144eea510..71e049d04 100644 --- 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", From 965c1fb010759f1a2e188207f90d2cc429121bd2 Mon Sep 17 00:00:00 2001 From: unix Date: Sun, 13 Feb 2022 07:26:31 +0800 Subject: [PATCH 3/3] docs(examples): add example for remix --- .gitignore | 2 ++ examples/remix/README.md | 21 +++++++++++++++++++ examples/remix/api/index.js | 5 +++++ examples/remix/app/entry.client.tsx | 4 ++++ examples/remix/app/entry.server.tsx | 21 +++++++++++++++++++ examples/remix/app/root.tsx | 30 +++++++++++++++++++++++++++ examples/remix/app/routes/index.tsx | 11 ++++++++++ examples/remix/package.json | 31 ++++++++++++++++++++++++++++ examples/remix/public/favicon.ico | Bin 0 -> 41662 bytes examples/remix/remix.config.js | 10 +++++++++ examples/remix/remix.env.d.ts | 2 ++ examples/remix/tsconfig.json | 20 ++++++++++++++++++ examples/remix/vercel.json | 7 +++++++ 13 files changed, 164 insertions(+) create mode 100644 examples/remix/README.md create mode 100644 examples/remix/api/index.js create mode 100644 examples/remix/app/entry.client.tsx create mode 100644 examples/remix/app/entry.server.tsx create mode 100644 examples/remix/app/root.tsx create mode 100644 examples/remix/app/routes/index.tsx create mode 100644 examples/remix/package.json create mode 100644 examples/remix/public/favicon.ico create mode 100644 examples/remix/remix.config.js create mode 100644 examples/remix/remix.env.d.ts create mode 100644 examples/remix/tsconfig.json create mode 100644 examples/remix/vercel.json diff --git a/.gitignore b/.gitignore index 30f1e1104..0eb6c5358 100644 --- 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/examples/remix/README.md b/examples/remix/README.md new file mode 100644 index 000000000..01ef92f83 --- /dev/null +++ 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 new file mode 100644 index 000000000..a9b70a47b --- /dev/null +++ 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 new file mode 100644 index 000000000..828428056 --- /dev/null +++ b/examples/remix/app/entry.client.tsx @@ -0,0 +1,4 @@ +import { hydrate } from 'react-dom' +import { RemixBrowser } from 'remix' + +hydrate(, document) diff --git a/examples/remix/app/entry.server.tsx b/examples/remix/app/entry.server.tsx new file mode 100644 index 000000000..fb994f56a --- /dev/null +++ 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() + markup = markup.replace('__STYLES__', CssBaseline.flushToHTML()) + + responseHeaders.set('Content-Type', 'text/html') + + return new Response('' + markup, { + status: responseStatusCode, + headers: responseHeaders, + }) +} diff --git a/examples/remix/app/root.tsx b/examples/remix/app/root.tsx new file mode 100644 index 000000000..53d3d7106 --- /dev/null +++ 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 ( + + + + + + + {typeof document === 'undefined' ? '__STYLES__' : null} + + + + + + + + + {process.env.NODE_ENV === 'development' && } + + + ) +} diff --git a/examples/remix/app/routes/index.tsx b/examples/remix/app/routes/index.tsx new file mode 100644 index 000000000..c7372950e --- /dev/null +++ b/examples/remix/app/routes/index.tsx @@ -0,0 +1,11 @@ +import { Card, Page, Text } from '@geist-ui/core' + +export default function Index() { + return ( + + + Hello, Geist with Remix + + + ) +} diff --git a/examples/remix/package.json b/examples/remix/package.json new file mode 100644 index 000000000..1a7723f30 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..d659ac950de078f77b1ae5de2997c946fb565e06 GIT binary patch literal 41662 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 KtPeWW7yk#9s8hTE literal 0 HcmV?d00001 diff --git a/examples/remix/remix.config.js b/examples/remix/remix.config.js new file mode 100644 index 000000000..4c71469e9 --- /dev/null +++ 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 new file mode 100644 index 000000000..72e2affe3 --- /dev/null +++ b/examples/remix/remix.env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/remix/tsconfig.json b/examples/remix/tsconfig.json new file mode 100644 index 000000000..749e4b959 --- /dev/null +++ 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 new file mode 100644 index 000000000..dcfba92ed --- /dev/null +++ b/examples/remix/vercel.json @@ -0,0 +1,7 @@ +{ + "build": { + "env": { + "ENABLE_FILE_SYSTEM_API": "1" + } + } +}