Skip to content

Commit 7e7507b

Browse files
machourmachour
authored
refactor(_official-realtime-app): Switch to V2 + Vite (#499)
1 parent 9cfd0b1 commit 7e7507b

File tree

13 files changed

+177
-67
lines changed

13 files changed

+177
-67
lines changed

‎_official-realtime-app/.eslintrc.cjs‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* This is intended to be a basic starting point for linting in your app.
3+
* It relies on recommended configs out of the box for simplicity, but you can
4+
* and should modify this configuration to best suit your team's needs.
5+
*/
6+
7+
/** @type {import('eslint').Linter.Config} */
8+
module.exports = {
9+
root: true,
10+
parserOptions: {
11+
ecmaVersion: "latest",
12+
sourceType: "module",
13+
ecmaFeatures: {
14+
jsx: true,
15+
},
16+
},
17+
env: {
18+
browser: true,
19+
commonjs: true,
20+
es6: true,
21+
},
22+
ignorePatterns: ["!**/.server", "!**/.client"],
23+
24+
// Base config
25+
extends: ["eslint:recommended"],
26+
27+
overrides: [
28+
// React
29+
{
30+
files: ["**/*.{js,jsx,ts,tsx}"],
31+
plugins: ["react", "jsx-a11y"],
32+
extends: [
33+
"plugin:react/recommended",
34+
"plugin:react/jsx-runtime",
35+
"plugin:react-hooks/recommended",
36+
"plugin:jsx-a11y/recommended",
37+
],
38+
settings: {
39+
react: {
40+
version: "detect",
41+
},
42+
formComponents: ["Form"],
43+
linkComponents: [
44+
{ name: "Link", linkAttribute: "to" },
45+
{ name: "NavLink", linkAttribute: "to" },
46+
],
47+
"import/resolver": {
48+
typescript: {},
49+
},
50+
},
51+
},
52+
53+
// Typescript
54+
{
55+
files: ["**/*.{ts,tsx}"],
56+
plugins: ["@typescript-eslint", "import"],
57+
parser: "@typescript-eslint/parser",
58+
settings: {
59+
"import/internal-regex": "^~/",
60+
"import/resolver": {
61+
node: {
62+
extensions: [".ts", ".tsx"],
63+
},
64+
typescript: {
65+
alwaysTryTypes: true,
66+
},
67+
},
68+
},
69+
extends: [
70+
"plugin:@typescript-eslint/recommended",
71+
"plugin:import/recommended",
72+
"plugin:import/typescript",
73+
],
74+
},
75+
76+
// Node
77+
{
78+
files: [".eslintrc.cjs"],
79+
env: {
80+
node: true,
81+
},
82+
},
83+
],
84+
};

‎_official-realtime-app/.eslintrc.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎_official-realtime-app/.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,4 @@ node_modules
22

33
/.cache
44
/build
5-
/public/build
65
.env
7-
8-
app/styles.processed.css

‎_official-realtime-app/app/root.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,45 @@ import {
88
useRevalidator,
99
} from "@remix-run/react";
1010
import { useEffect } from "react";
11-
import { useEventSource } from "remix-utils";
11+
import { useEventSource } from "remix-utils/sse/react";
1212

1313
import icons from "~/icons.svg";
14-
import styles from "~/styles.processed.css";
14+
import styles from "~/styles.css?url";
1515

16-
export const meta: MetaFunction = () => ({
17-
charset: "utf-8",
18-
title: "Remix Fake Linear Demo",
19-
viewport: "width=device-width,initial-scale=1",
20-
});
16+
export const meta: MetaFunction = () => [
17+
{
18+
title: "Remix Fake Linear Demo",
19+
},
20+
];
2121

2222
export const links: LinksFunction = () => [
2323
{ rel: "stylesheet", href: styles },
2424
{ rel: "preload", href: icons, as: "image", fetchpriority: "high" },
2525
];
2626

27-
export default function App() {
28-
useRealtimeIssuesRevalidation();
27+
export function Layout({ children }: { children: React.ReactNode }) {
2928
return (
3029
<html lang="en">
3130
<head>
31+
<meta charSet="utf-8" />
32+
<meta name="viewport" content="width=device-width, initial-scale=1" />
3233
<Meta />
3334
<Links />
3435
</head>
3536
<body>
36-
<Outlet />
37+
{children}
3738
<ScrollRestoration />
3839
<Scripts />
3940
</body>
4041
</html>
4142
);
4243
}
4344

45+
export default function App() {
46+
useRealtimeIssuesRevalidation();
47+
return <Outlet />;
48+
}
49+
4450
function useRealtimeIssuesRevalidation() {
4551
const data = useEventSource("/issues-events");
4652
const { revalidate } = useRevalidator();

‎_official-realtime-app/app/routes/issues-events.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import type { LoaderArgs } from "@remix-run/node";
2-
import { eventStream } from "remix-utils";
1+
import type { LoaderFunctionArgs } from "@remix-run/node";
2+
import { eventStream } from "remix-utils/sse/server";
33

44
import { emitter, EVENTS } from "~/events";
55

6-
export const loader = async ({ request }: LoaderArgs) => {
6+
export const loader = async ({ request }: LoaderFunctionArgs) => {
77
return eventStream(request.signal, (send) => {
88
const handler = (message: string) => {
99
send({ data: message });

‎_official-realtime-app/app/routes/issues.$id.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import type { LoaderArgs, MetaFunction } from "@remix-run/node";
1+
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
22
import { json } from "@remix-run/node";
33
import { useFetcher, useLoaderData } from "@remix-run/react";
44
import invariant from "tiny-invariant";
55

66
import { getIssue } from "~/data";
77

8-
export const loader = async ({ params }: LoaderArgs) => {
8+
export const loader = async ({ params }: LoaderFunctionArgs) => {
99
invariant(params.id, "Missing issue id");
1010
const issue = await getIssue(params.id);
1111
if (!issue) {
@@ -14,9 +14,11 @@ export const loader = async ({ params }: LoaderArgs) => {
1414
return json(issue);
1515
};
1616

17-
export const meta: MetaFunction<typeof loader> = ({ data: issue }) => ({
18-
title: issue?.title || "Not Found",
19-
});
17+
export const meta: MetaFunction<typeof loader> = ({ data: issue }) => [
18+
{
19+
title: issue?.title || "Not Found",
20+
},
21+
];
2022

2123
export default function Issue() {
2224
const issue = useLoaderData<typeof loader>();

‎_official-realtime-app/app/routes/issues.$id.update.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import type { ActionArgs } from "@remix-run/node";
1+
import type { ActionFunctionArgs } from "@remix-run/node";
22
import { json } from "@remix-run/node";
33
import invariant from "tiny-invariant";
44

55
import { updateIssue } from "~/data";
66
import { emitter, EVENTS } from "~/events";
77

8-
export const action = async ({ params, request }: ActionArgs) => {
8+
export const action = async ({ params, request }: ActionFunctionArgs) => {
99
const updates = Object.fromEntries(await request.formData());
1010
invariant(params.id, "Missing issue id");
1111
const result = await updateIssue(params.id, updates);

‎_official-realtime-app/package.json‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,46 @@
11
{
2+
"name": "template",
23
"private": true,
34
"sideEffects": false,
5+
"type": "module",
46
"scripts": {
5-
"build": "run-s \"build:*\"",
6-
"build:css": "npm run generate:css -- --minify",
7-
"build:remix": "remix build",
8-
"dev": "run-p \"dev:*\"",
9-
"dev:css": "npm run generate:css -- --watch",
10-
"dev:remix": "remix dev",
11-
"generate:css": "npx tailwindcss -i app/styles.css -o ./app/styles.processed.css",
12-
"start": "remix-serve build",
7+
"build": "remix vite:build",
8+
"dev": "remix vite:dev",
9+
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
10+
"start": "remix-serve ./build/server/index.js",
1311
"typecheck": "tsc"
1412
},
1513
"dependencies": {
16-
"@remix-run/node": "^1.19.3",
17-
"@remix-run/react": "^1.19.3",
18-
"@remix-run/serve": "^1.19.3",
14+
"@remix-run/node": "^2.9.2",
15+
"@remix-run/react": "^2.9.2",
16+
"@remix-run/serve": "^2.9.2",
1917
"classnames": "^2.3.2",
20-
"compression": "^1.7.4",
21-
"isbot": "^3.6.5",
18+
"isbot": "^4.1.0",
2219
"react": "^18.2.0",
2320
"react-dom": "^18.2.0",
24-
"remix-utils": "^6.0.0",
21+
"remix-utils": "^7.6.0",
2522
"tiny-invariant": "^1.3.1"
2623
},
2724
"devDependencies": {
28-
"@remix-run/dev": "^1.19.3",
29-
"@remix-run/eslint-config": "^1.19.3",
30-
"@types/react": "^18.0.25",
31-
"@types/react-dom": "^18.0.8",
32-
"eslint": "^8.27.0",
33-
"npm-run-all": "^4.1.5",
25+
"@remix-run/dev": "^2.9.2",
26+
"@types/react": "^18.2.20",
27+
"@types/react-dom": "^18.2.7",
28+
"@typescript-eslint/eslint-plugin": "^6.7.4",
29+
"@typescript-eslint/parser": "^6.7.4",
30+
"autoprefixer": "^10.4.18",
31+
"eslint": "^8.38.0",
32+
"eslint-import-resolver-typescript": "^3.6.1",
33+
"eslint-plugin-import": "^2.28.1",
34+
"eslint-plugin-jsx-a11y": "^6.7.1",
35+
"eslint-plugin-react": "^7.33.2",
36+
"eslint-plugin-react-hooks": "^4.6.0",
37+
"postcss": "^8.4.35",
3438
"tailwindcss": "^3.3.0",
35-
"typescript": "^4.8.4"
39+
"typescript": "^5.1.6",
40+
"vite": "^5.1.0",
41+
"vite-tsconfig-paths": "^4.2.1"
3642
},
3743
"engines": {
38-
"node": ">=14.0.0"
44+
"node": ">=20.0.0"
3945
}
4046
}

‎_official-realtime-app/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎_official-realtime-app/remix.config.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)