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/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/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 000000000..d659ac950 Binary files /dev/null and b/examples/remix/public/favicon.ico differ 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" + } + } +} 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", 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