Skip to content

Commit 9cfd0b1

Browse files
machourmachour
authored
refactor(leaflet): Switch to V2 + Vite (#498)
1 parent 214005e commit 9cfd0b1

File tree

12 files changed

+158
-80
lines changed

12 files changed

+158
-80
lines changed

‎leaflet/.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+
};

‎leaflet/.eslintrc.js

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

‎leaflet/.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@ node_modules
22

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

‎leaflet/README.md

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,17 @@ This example shows how to use Leaflet with Remix.
1616

1717
Relevant files:
1818

19-
- [app/components/client-only.tsx](app/components/client-only.tsx)
2019
- [app/components/map.client.tsx](app/components/map.client.tsx)
2120

22-
Leaflet cannot be rendered on the server side, so we're using the `ClientOnly` component to display a skeleton instead.
21+
Leaflet cannot be rendered on the server side, so we're using the `ClientOnly` component from `remix-utils` to display a skeleton instead.
2322
It's important to add the `.client.tsx` suffix to the `Map` component file name, otherwise, you will get this error:
2423

2524
```
2625
Error [ERR_REQUIRE_ESM]: require() of ES Module /remix/examples/leaflet/node_modules/react-leaflet/lib/index.js from /remix/examples/leaflet/build/index.js not supported.
2726
```
2827

29-
The leaflet styles can be imported either from `node_modules` or CDN.
30-
If you choose to import the styles from `node_modules`, you'll need to add the leaflet assets in the `/public` folder.
31-
The assets can be found here: [https://unpkg.com/browse/[email protected]/dist/images/](https://unpkg.com/browse/[email protected]/dist/images/)
32-
3328
## Related Links
3429

3530
- [Leaflet docs](https://leafletjs.com/download.html)
3631
- [React Leaflet docs](https://react-leaflet.js.org/)
32+
- [remix-utils](https://github.com/sergiodxa/remix-utils)

‎leaflet/app/components/client-only.tsx

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

‎leaflet/app/root.tsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,29 @@
1-
import type { MetaFunction } from "@remix-run/node";
21
import {
32
Links,
4-
LiveReload,
53
Meta,
64
Outlet,
75
Scripts,
86
ScrollRestoration,
97
} from "@remix-run/react";
108

11-
export const meta: MetaFunction = () => ({
12-
charset: "utf-8",
13-
title: "New Remix App",
14-
viewport: "width=device-width,initial-scale=1",
15-
});
16-
17-
export default function App() {
9+
export function Layout({ children }: { children: React.ReactNode }) {
1810
return (
1911
<html lang="en">
2012
<head>
13+
<meta charSet="utf-8" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1" />
2115
<Meta />
2216
<Links />
2317
</head>
2418
<body>
25-
<Outlet />
19+
{children}
2620
<ScrollRestoration />
2721
<Scripts />
28-
<LiveReload />
2922
</body>
3023
</html>
3124
);
3225
}
26+
27+
export default function App() {
28+
return <Outlet />;
29+
}

‎leaflet/app/routes/_index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import type { LinksFunction } from "@remix-run/node";
2+
import leafletStyles from "leaflet/dist/leaflet.css?url";
3+
import { ClientOnly } from "remix-utils/client-only";
24

3-
import { ClientOnly } from "~/components/client-only";
45
import { Map } from "~/components/map.client";
56

67
export const links: LinksFunction = () => [
78
{
89
rel: "stylesheet",
9-
href: "https://unpkg.com/[email protected]/dist/leaflet.css",
10+
href: leafletStyles,
1011
},
1112
];
1213

‎leaflet/package.json

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,44 @@
11
{
2+
"name": "leaflet",
23
"private": true,
34
"sideEffects": false,
5+
"type": "module",
46
"scripts": {
5-
"build": "remix build",
6-
"dev": "remix dev",
7-
"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",
811
"typecheck": "tsc"
912
},
1013
"dependencies": {
11-
"@remix-run/node": "^1.19.3",
12-
"@remix-run/react": "^1.19.3",
13-
"@remix-run/serve": "^1.19.3",
14-
"leaflet": "^1.8.0",
15-
"react-leaflet": "^4.0.2",
16-
"isbot": "^3.6.5",
14+
"@remix-run/node": "^2.9.2",
15+
"@remix-run/react": "^2.9.2",
16+
"@remix-run/serve": "^2.9.2",
17+
"leaflet": "^1.9.4",
18+
"isbot": "^4.1.0",
1719
"react": "^18.2.0",
18-
"react-dom": "^18.2.0"
20+
"react-dom": "^18.2.0",
21+
"react-leaflet": "^4.2.1",
22+
"remix-utils": "^7.6.0"
1923
},
2024
"devDependencies": {
21-
"@remix-run/dev": "^1.19.3",
22-
"@remix-run/eslint-config": "^1.19.3",
23-
"@types/leaflet": "^1.7.11",
24-
"@types/react": "^18.0.25",
25-
"@types/react-dom": "^18.0.8",
26-
"eslint": "^8.27.0",
27-
"typescript": "^4.8.4"
25+
"@remix-run/dev": "^2.9.2",
26+
"@types/leaflet": "^1.9.12",
27+
"@types/react": "^18.2.20",
28+
"@types/react-dom": "^18.2.7",
29+
"@typescript-eslint/eslint-plugin": "^6.7.4",
30+
"@typescript-eslint/parser": "^6.7.4",
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+
"typescript": "^5.1.6",
38+
"vite": "^5.1.0",
39+
"vite-tsconfig-paths": "^4.2.1"
2840
},
2941
"engines": {
30-
"node": ">=14.0.0"
42+
"node": ">=20.0.0"
3143
}
3244
}

‎leaflet/remix.config.js

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

‎leaflet/remix.env.d.ts

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

0 commit comments

Comments
 (0)