-
-
Notifications
You must be signed in to change notification settings - Fork 423
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cfd7131
commit 7a42d0e
Showing
16 changed files
with
2,113 additions
and
233 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/** @type {import('eslint').Linter.Config} */ | ||
module.exports = { | ||
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
node_modules | ||
|
||
/.cache | ||
/build | ||
/public/build | ||
.env |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
# Welcome to Remix! | ||
|
||
- [Remix Docs](https://remix.run/docs) | ||
|
||
## Development | ||
|
||
From your terminal: | ||
|
||
```sh | ||
npm run dev | ||
``` | ||
|
||
This starts your app in development mode, rebuilding assets on file changes. | ||
|
||
## Deployment | ||
|
||
First, build your app for production: | ||
|
||
```sh | ||
npm run build | ||
``` | ||
|
||
Then run the app in production mode: | ||
|
||
```sh | ||
npm start | ||
``` | ||
|
||
Now you'll need to pick a host to deploy it to. | ||
|
||
### DIY | ||
|
||
If you're familiar with deploying node applications, the built-in Remix app server is production-ready. | ||
|
||
Make sure to deploy the output of `remix build` | ||
|
||
- `build/` | ||
- `public/build/` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
/** | ||
* By default, Remix will handle hydrating your app on the client for you. | ||
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ | ||
* For more information, see https://remix.run/file-conventions/entry.client | ||
*/ | ||
|
||
import { RemixBrowser } from "@remix-run/react"; | ||
import { startTransition, StrictMode } from "react"; | ||
import { hydrateRoot } from "react-dom/client"; | ||
|
||
startTransition(() => { | ||
hydrateRoot( | ||
document, | ||
<StrictMode> | ||
<RemixBrowser /> | ||
</StrictMode> | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
/** | ||
* By default, Remix will handle generating the HTTP Response for you. | ||
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ | ||
* For more information, see https://remix.run/file-conventions/entry.server | ||
*/ | ||
|
||
import { PassThrough } from "node:stream"; | ||
|
||
import type { AppLoadContext, EntryContext } from "@remix-run/node"; | ||
import { createReadableStreamFromReadable } from "@remix-run/node"; | ||
import { RemixServer } from "@remix-run/react"; | ||
import isbot from "isbot"; | ||
import { renderToPipeableStream } from "react-dom/server"; | ||
|
||
const ABORT_DELAY = 5_000; | ||
|
||
export default function handleRequest( | ||
request: Request, | ||
responseStatusCode: number, | ||
responseHeaders: Headers, | ||
remixContext: EntryContext, | ||
loadContext: AppLoadContext | ||
) { | ||
return isbot(request.headers.get("user-agent")) | ||
? handleBotRequest( | ||
request, | ||
responseStatusCode, | ||
responseHeaders, | ||
remixContext | ||
) | ||
: handleBrowserRequest( | ||
request, | ||
responseStatusCode, | ||
responseHeaders, | ||
remixContext | ||
); | ||
} | ||
|
||
function handleBotRequest( | ||
request: Request, | ||
responseStatusCode: number, | ||
responseHeaders: Headers, | ||
remixContext: EntryContext | ||
) { | ||
return new Promise((resolve, reject) => { | ||
let shellRendered = false; | ||
const { pipe, abort } = renderToPipeableStream( | ||
<RemixServer | ||
context={remixContext} | ||
url={request.url} | ||
abortDelay={ABORT_DELAY} | ||
/>, | ||
{ | ||
onAllReady() { | ||
shellRendered = true; | ||
const body = new PassThrough(); | ||
const stream = createReadableStreamFromReadable(body); | ||
|
||
responseHeaders.set("Content-Type", "text/html"); | ||
|
||
resolve( | ||
new Response(stream, { | ||
headers: responseHeaders, | ||
status: responseStatusCode, | ||
}) | ||
); | ||
|
||
pipe(body); | ||
}, | ||
onShellError(error: unknown) { | ||
reject(error); | ||
}, | ||
onError(error: unknown) { | ||
responseStatusCode = 500; | ||
// Log streaming rendering errors from inside the shell. Don't log | ||
// errors encountered during initial shell rendering since they'll | ||
// reject and get logged in handleDocumentRequest. | ||
if (shellRendered) { | ||
console.error(error); | ||
} | ||
}, | ||
} | ||
); | ||
|
||
setTimeout(abort, ABORT_DELAY); | ||
}); | ||
} | ||
|
||
function handleBrowserRequest( | ||
request: Request, | ||
responseStatusCode: number, | ||
responseHeaders: Headers, | ||
remixContext: EntryContext | ||
) { | ||
return new Promise((resolve, reject) => { | ||
let shellRendered = false; | ||
const { pipe, abort } = renderToPipeableStream( | ||
<RemixServer | ||
context={remixContext} | ||
url={request.url} | ||
abortDelay={ABORT_DELAY} | ||
/>, | ||
{ | ||
onShellReady() { | ||
shellRendered = true; | ||
const body = new PassThrough(); | ||
const stream = createReadableStreamFromReadable(body); | ||
|
||
responseHeaders.set("Content-Type", "text/html"); | ||
|
||
resolve( | ||
new Response(stream, { | ||
headers: responseHeaders, | ||
status: responseStatusCode, | ||
}) | ||
); | ||
|
||
pipe(body); | ||
}, | ||
onShellError(error: unknown) { | ||
reject(error); | ||
}, | ||
onError(error: unknown) { | ||
responseStatusCode = 500; | ||
// Log streaming rendering errors from inside the shell. Don't log | ||
// errors encountered during initial shell rendering since they'll | ||
// reject and get logged in handleDocumentRequest. | ||
if (shellRendered) { | ||
console.error(error); | ||
} | ||
}, | ||
} | ||
); | ||
|
||
setTimeout(abort, ABORT_DELAY); | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import { cssBundleHref } from "@remix-run/css-bundle"; | ||
import type { LinksFunction } from "@remix-run/node"; | ||
import { | ||
Links, | ||
LiveReload, | ||
Meta, | ||
Outlet, | ||
Scripts, | ||
ScrollRestoration, | ||
} from "@remix-run/react"; | ||
|
||
export const links: LinksFunction = () => [ | ||
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), | ||
]; | ||
|
||
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 /> | ||
</head> | ||
<body> | ||
<Outlet /> | ||
<ScrollRestoration /> | ||
<Scripts /> | ||
<LiveReload /> | ||
</body> | ||
</html> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,116 @@ | ||
import type { MetaFunction } from '@remix-run/node'; | ||
|
||
import { useMemo } from 'react'; | ||
import { | ||
MaterialReactTable, | ||
useMaterialReactTable, | ||
type MRT_ColumnDef, | ||
} from 'material-react-table'; | ||
|
||
//example data type | ||
type Person = { | ||
name: { | ||
firstName: string; | ||
lastName: string; | ||
}; | ||
address: string; | ||
city: string; | ||
state: string; | ||
}; | ||
|
||
//nested data is ok, see accessorKeys in ColumnDef below | ||
const data: Person[] = [ | ||
{ | ||
name: { | ||
firstName: 'John', | ||
lastName: 'Doe', | ||
}, | ||
address: '261 Erdman Ford', | ||
city: 'East Daphne', | ||
state: 'Kentucky', | ||
}, | ||
{ | ||
name: { | ||
firstName: 'Jane', | ||
lastName: 'Doe', | ||
}, | ||
address: '769 Dominic Grove', | ||
city: 'Columbus', | ||
state: 'Ohio', | ||
}, | ||
{ | ||
name: { | ||
firstName: 'Joe', | ||
lastName: 'Doe', | ||
}, | ||
address: '566 Brakus Inlet', | ||
city: 'South Linda', | ||
state: 'West Virginia', | ||
}, | ||
{ | ||
name: { | ||
firstName: 'Kevin', | ||
lastName: 'Vandy', | ||
}, | ||
address: '722 Emie Stream', | ||
city: 'Lincoln', | ||
state: 'Nebraska', | ||
}, | ||
{ | ||
name: { | ||
firstName: 'Joshua', | ||
lastName: 'Rolluffs', | ||
}, | ||
address: '32188 Larkin Turnpike', | ||
city: 'Omaha', | ||
state: 'Nebraska', | ||
}, | ||
]; | ||
|
||
export const meta: MetaFunction = () => { | ||
return [ | ||
{ title: 'New Remix App' }, | ||
{ name: 'description', content: 'Welcome to Remix!' }, | ||
]; | ||
}; | ||
|
||
export default function Index() { | ||
//should be memoized or stable | ||
const columns = useMemo<MRT_ColumnDef<Person>[]>( | ||
() => [ | ||
{ | ||
accessorKey: 'name.firstName', //access nested data with dot notation | ||
header: 'First Name', | ||
size: 150, | ||
}, | ||
{ | ||
accessorKey: 'name.lastName', | ||
header: 'Last Name', | ||
size: 150, | ||
}, | ||
{ | ||
accessorKey: 'address', //normal accessorKey | ||
header: 'Address', | ||
size: 200, | ||
}, | ||
{ | ||
accessorKey: 'city', | ||
header: 'City', | ||
size: 150, | ||
}, | ||
{ | ||
accessorKey: 'state', | ||
header: 'State', | ||
size: 150, | ||
}, | ||
], | ||
[], | ||
); | ||
|
||
const table = useMaterialReactTable({ | ||
columns, | ||
data, | ||
}); | ||
|
||
return <MaterialReactTable table={table} />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
{ | ||
"name": "test-remix", | ||
"private": true, | ||
"sideEffects": false, | ||
"type": "module", | ||
"scripts": { | ||
"build": "remix build", | ||
"dev": "remix dev --manual --port 3010", | ||
"start": "remix-serve ./build/index.js", | ||
"typecheck": "tsc" | ||
}, | ||
"dependencies": { | ||
"@emotion/react": "^11.11.1", | ||
"@emotion/styled": "^11.11.0", | ||
"@mui/icons-material": "^5.14.14", | ||
"@mui/material": "^5.14.14", | ||
"@mui/x-date-pickers": "^6.16.2", | ||
"@remix-run/css-bundle": "^2.1.0", | ||
"@remix-run/node": "^2.1.0", | ||
"@remix-run/react": "^2.1.0", | ||
"@remix-run/serve": "^2.1.0", | ||
"isbot": "^3.6.8", | ||
"material-react-table": "workspace:*", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@remix-run/dev": "^2.1.0", | ||
"@remix-run/eslint-config": "^2.1.0", | ||
"@types/react": "^18.2.20", | ||
"@types/react-dom": "^18.2.7", | ||
"eslint": "^8.38.0", | ||
"typescript": "^5.1.6" | ||
}, | ||
"engines": { | ||
"node": ">=18.0.0" | ||
} | ||
} |
Binary file not shown.
Oops, something went wrong.