Skip to content

Commit 7c087e4

Browse files
swalker326machour
swalker326
and
machour
authored
refactor(remix-auth-form): Switch to V2 + Vite (#364)
Co-authored-by: Mehdi Achour <machour@gmail.com>
1 parent e837948 commit 7c087e4

12 files changed

+180
-73
lines changed

‎remix-auth-form/.eslintrc.cjs

+84
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+
};

‎remix-auth-form/.eslintrc.js

-4
This file was deleted.

‎remix-auth-form/.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@ node_modules
22

33
/.cache
44
/build
5-
/public/build
65
.env

‎remix-auth-form/app/root.tsx

+6-17
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
1-
import { cssBundleHref } from "@remix-run/css-bundle";
2-
import type { LinksFunction, MetaFunction } from "@remix-run/node";
31
import {
42
Links,
5-
LiveReload,
63
Meta,
74
Outlet,
85
Scripts,
96
ScrollRestoration,
107
} from "@remix-run/react";
118

12-
export const links: LinksFunction = () => [
13-
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
14-
];
15-
16-
export const meta: MetaFunction = () => {
17-
return [
18-
{ title: "New Remix App" },
19-
{ name: "description", content: "Welcome to Remix!" },
20-
];
21-
};
22-
23-
export default function App() {
9+
export function Layout({ children }: { children: React.ReactNode }) {
2410
return (
2511
<html lang="en">
2612
<head>
@@ -30,11 +16,14 @@ export default function App() {
3016
<Links />
3117
</head>
3218
<body>
33-
<Outlet />
19+
{children}
3420
<ScrollRestoration />
3521
<Scripts />
36-
<LiveReload />
3722
</body>
3823
</html>
3924
);
4025
}
26+
27+
export default function App() {
28+
return <Outlet />;
29+
}

‎remix-auth-form/app/routes/_index.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Link } from "@remix-run/react";
2+
3+
export default function Index() {
4+
return (
5+
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
6+
<h1>Welcome to Remix</h1>
7+
<Link to="/login">Login</Link>
8+
</div>
9+
);
10+
}

‎remix-auth-form/app/routes/login.tsx

+25-22
Original file line numberDiff line numberDiff line change
@@ -25,29 +25,32 @@ export default function Screen() {
2525
const { error } = useLoaderData<typeof loader>();
2626

2727
return (
28-
<Form method="post">
29-
{error ? <div>{error.message}</div> : null}
30-
<div>
31-
<label htmlFor="email">Email</label>
32-
<input
33-
type="email"
34-
name="email"
35-
id="email"
36-
defaultValue="user@domain.tld"
37-
/>
38-
</div>
28+
<>
29+
<pre>/login</pre>
30+
<Form method="post">
31+
{error ? <div>{error.message}</div> : null}
32+
<div>
33+
<label htmlFor="email">Email</label>
34+
<input
35+
type="email"
36+
name="email"
37+
id="email"
38+
defaultValue="user@domain.tld"
39+
/>
40+
</div>
3941

40-
<div>
41-
<label htmlFor="password">Password</label>
42-
<input
43-
type="password"
44-
name="password"
45-
id="password"
46-
defaultValue="test"
47-
/>
48-
</div>
42+
<div>
43+
<label htmlFor="password">Password</label>
44+
<input
45+
type="password"
46+
name="password"
47+
id="password"
48+
defaultValue="test"
49+
/>
50+
</div>
4951

50-
<button>Log In</button>
51-
</Form>
52+
<button>Log In</button>
53+
</Form>
54+
</>
5255
);
5356
}

‎remix-auth-form/app/routes/private.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default function Screen() {
2020
const { email } = useLoaderData<typeof loader>();
2121
return (
2222
<>
23+
<pre>/private</pre>
2324
<h1>Hello {email}</h1>
2425

2526
<Form method="post">

‎remix-auth-form/package.json

+23-14
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,42 @@
11
{
2+
"name": "template",
23
"private": true,
34
"sideEffects": false,
45
"type": "module",
56
"scripts": {
6-
"build": "remix build",
7-
"dev": "remix dev --manual",
8-
"start": "remix-serve ./build/index.js",
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",
911
"typecheck": "tsc"
1012
},
1113
"dependencies": {
12-
"@remix-run/css-bundle": "^2.0.1",
13-
"@remix-run/node": "^2.0.1",
14-
"@remix-run/react": "^2.0.1",
15-
"@remix-run/serve": "^2.0.1",
16-
"isbot": "^3.6.8",
14+
"@remix-run/node": "^2.9.2",
15+
"@remix-run/react": "^2.9.2",
16+
"@remix-run/serve": "^2.9.2",
17+
"isbot": "^4.1.0",
1718
"react": "^18.2.0",
1819
"react-dom": "^18.2.0",
19-
"remix-auth": "^3.6.0",
20-
"remix-auth-form": "^1.4.0"
20+
"remix-auth": "^3.7.0",
21+
"remix-auth-form": "^1.5.0"
2122
},
2223
"devDependencies": {
23-
"@remix-run/dev": "^2.0.1",
24-
"@remix-run/eslint-config": "^2.0.1",
24+
"@remix-run/dev": "^2.9.2",
2525
"@types/react": "^18.2.20",
2626
"@types/react-dom": "^18.2.7",
27+
"@typescript-eslint/eslint-plugin": "^6.7.4",
28+
"@typescript-eslint/parser": "^6.7.4",
2729
"eslint": "^8.38.0",
28-
"typescript": "^5.1.6"
30+
"eslint-import-resolver-typescript": "^3.6.1",
31+
"eslint-plugin-import": "^2.28.1",
32+
"eslint-plugin-jsx-a11y": "^6.7.1",
33+
"eslint-plugin-react": "^7.33.2",
34+
"eslint-plugin-react-hooks": "^4.6.0",
35+
"typescript": "^5.1.6",
36+
"vite": "^5.1.0",
37+
"vite-tsconfig-paths": "^4.2.1"
2938
},
3039
"engines": {
31-
"node": ">=14.0.0"
40+
"node": ">=20.0.0"
3241
}
3342
}

‎remix-auth-form/remix.config.js

-8
This file was deleted.

‎remix-auth-form/remix.env.d.ts

-2
This file was deleted.

‎remix-auth-form/tsconfig.json

+15-5
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
11
{
2-
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
2+
"include": [
3+
"**/*.ts",
4+
"**/*.tsx",
5+
"**/.server/**/*.ts",
6+
"**/.server/**/*.tsx",
7+
"**/.client/**/*.ts",
8+
"**/.client/**/*.tsx"
9+
],
310
"compilerOptions": {
4-
"lib": ["DOM", "DOM.Iterable", "ES2019"],
11+
"lib": ["DOM", "DOM.Iterable", "ES2022"],
12+
"types": ["@remix-run/node", "vite/client"],
513
"isolatedModules": true,
614
"esModuleInterop": true,
715
"jsx": "react-jsx",
8-
"moduleResolution": "node",
16+
"module": "ESNext",
17+
"moduleResolution": "Bundler",
918
"resolveJsonModule": true,
10-
"target": "ES2019",
19+
"target": "ES2022",
1120
"strict": true,
1221
"allowJs": true,
22+
"skipLibCheck": true,
1323
"forceConsistentCasingInFileNames": true,
1424
"baseUrl": ".",
1525
"paths": {
1626
"~/*": ["./app/*"]
1727
},
1828

19-
// Remix takes care of building everything in `remix build`.
29+
// Vite takes care of building everything, not tsc.
2030
"noEmit": true
2131
}
2232
}

‎remix-auth-form/vite.config.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { vitePlugin as remix } from "@remix-run/dev";
2+
import { defineConfig } from "vite";
3+
import tsconfigPaths from "vite-tsconfig-paths";
4+
5+
export default defineConfig({
6+
plugins: [
7+
remix({
8+
future: {
9+
v3_fetcherPersist: true,
10+
v3_relativeSplatPath: true,
11+
v3_throwAbortReason: true,
12+
},
13+
}),
14+
tsconfigPaths(),
15+
],
16+
});

0 commit comments

Comments
 (0)