Skip to content

Commit c03767b

Browse files
Zn4rKZn4rK
authored
Fix remix support (#54)
* adding remix app * Removing unnecessary context for compiledFunction * adding remix, and re-adding vite * bumping vite dev * updating lock file * more vite experiments to make sure everything still works * vite plugin modifications * comments and general cleanup * cleanup transpile build script * don't output css for the server build * changeset
1 parent e103d3d commit c03767b

34 files changed

+12447
-8397
lines changed

‎.changeset/tall-lions-appear.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@navita/vite-plugin': major
3+
'@navita/core': major
4+
---
5+
6+
fix proper remix support in the vite plugin

‎examples/with-remix/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
.env

‎examples/with-remix/app/components/box.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { style } from "@navita/css";
2+
3+
const box = style({
4+
background: 'hotpink',
5+
color: 'white',
6+
fontSize: 20,
7+
padding: 20,
8+
});
9+
10+
interface Props {
11+
children: React.ReactNode;
12+
}
13+
14+
export const Box = ({ children }: Props) => (
15+
<div className={box}>
16+
{children}
17+
</div>
18+
);

‎examples/with-remix/app/components/button.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { style } from "@navita/css";
2+
3+
const button = style({
4+
background: 'red',
5+
color: 'white',
6+
padding: '10px',
7+
});
8+
9+
interface Props {
10+
children: React.ReactNode;
11+
}
12+
13+
export const Button = ({ children }: Props) => (
14+
<button className={button}>
15+
{children}
16+
</button>
17+
);

‎examples/with-remix/app/consts.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const background = 'orange';

‎examples/with-remix/app/root.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import type { LinksFunction } from "@remix-run/node";
2+
import {
3+
Links,
4+
Meta,
5+
Outlet,
6+
Scripts,
7+
ScrollRestoration,
8+
} from "@remix-run/react";
9+
import React from "react";
10+
11+
export const links: LinksFunction = () => [
12+
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
13+
{
14+
rel: "preconnect",
15+
href: "https://fonts.gstatic.com",
16+
crossOrigin: "anonymous",
17+
},
18+
{
19+
rel: "stylesheet",
20+
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
21+
},
22+
];
23+
24+
export function Layout({ children }: { children: React.ReactNode }) {
25+
return (
26+
<html lang="en">
27+
<head>
28+
<meta charSet="utf-8" />
29+
<meta name="viewport" content="width=device-width, initial-scale=1" />
30+
<Meta />
31+
<Links />
32+
</head>
33+
<body>
34+
{children}
35+
<ScrollRestoration />
36+
<Scripts />
37+
</body>
38+
</html>
39+
);
40+
}
41+
42+
export default function App() {
43+
return <Outlet />;
44+
}

‎examples/with-remix/app/routes/_index.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { MetaFunction } from "@remix-run/node";
2+
import { style } from "@navita/css";
3+
import { background } from "~/consts";
4+
import { Button } from "~/components/button";
5+
import { Box } from "~/components/box";
6+
7+
export const meta: MetaFunction = () => {
8+
return [
9+
{ title: "New Remix App" },
10+
{ name: "description", content: "Welcome to Remix!" },
11+
];
12+
};
13+
14+
const x = style({
15+
color: 'white',
16+
backgroundColor: background,
17+
});
18+
19+
export default function Index() {
20+
return (
21+
<div className={x}>
22+
Testing
23+
<Button>Testing</Button>
24+
25+
<Box>Hello</Box>
26+
</div>
27+
);
28+
}

‎examples/with-remix/package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "navita-with-remix",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"build": "remix vite:build",
8+
"dev": "remix vite:dev --force",
9+
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
10+
"start": "remix-serve ./build/server/index.js",
11+
"typecheck": "tsc"
12+
},
13+
"dependencies": {
14+
"@remix-run/node": "^2.12.1",
15+
"@remix-run/react": "^2.12.1",
16+
"@remix-run/serve": "^2.12.1",
17+
"@navita/css": "workspace:*",
18+
"isbot": "^4.1.0",
19+
"react": "^18.2.0",
20+
"react-dom": "^18.2.0"
21+
},
22+
"devDependencies": {
23+
"@remix-run/dev": "^2.12.1",
24+
"@types/react": "^18.2.20",
25+
"@types/react-dom": "^18.2.7",
26+
"@typescript-eslint/eslint-plugin": "^6.7.4",
27+
"@typescript-eslint/parser": "^6.7.4",
28+
"@navita/vite-plugin": "workspace:*",
29+
"typescript": "^5.1.6",
30+
"vite": "^5.1.0",
31+
"vite-tsconfig-paths": "^4.2.1"
32+
},
33+
"engines": {
34+
"node": ">=20.0.0"
35+
}
36+
}

‎examples/with-remix/public/favicon.ico

16.6 KB
Binary file not shown.

‎examples/with-remix/public/logo-dark.png

78.4 KB
Loading

‎examples/with-remix/public/logo-light.png

5.77 KB
Loading

‎examples/with-remix/tsconfig.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"include": [
3+
"**/*.ts",
4+
"**/*.tsx",
5+
"**/.server/**/*.ts",
6+
"**/.server/**/*.tsx",
7+
"**/.client/**/*.ts",
8+
"**/.client/**/*.tsx"
9+
],
10+
"compilerOptions": {
11+
"lib": ["DOM", "DOM.Iterable", "ES2022"],
12+
"isolatedModules": true,
13+
"esModuleInterop": true,
14+
"jsx": "react-jsx",
15+
"module": "ESNext",
16+
"moduleResolution": "Bundler",
17+
"resolveJsonModule": true,
18+
"target": "ES2022",
19+
"strict": true,
20+
"allowJs": true,
21+
"skipLibCheck": true,
22+
"forceConsistentCasingInFileNames": true,
23+
"baseUrl": ".",
24+
"paths": {
25+
"~/*": ["./app/*"],
26+
/* This Paths is here because we don't have the same versions of something in our monorepo. We'll fix and sort that out at some point */
27+
"react": ["./node_modules/@types/react"]
28+
},
29+
30+
// Vite takes care of building everything, not tsc.
31+
"noEmit": true
32+
}
33+
}

‎examples/with-remix/vite.config.ts

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

‎examples/with-vite/.eslintrc.cjs

-14
This file was deleted.

‎examples/with-vite/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>navita With Vite</title>
7+
<title>Navita With Vite</title>
78
</head>
89
<body>
910
<div id="root"></div>

‎examples/with-vite/package.json

+13-18
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,26 @@
11
{
2+
"name": "with-vite",
23
"private": true,
3-
"name": "navita-with-vite-example",
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"dev": "vite --force",
8-
"build": "vite build --minify false",
9-
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
7+
"dev": "vite",
8+
"build": "vite build",
9+
"lint": "eslint .",
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@navita/css": "workspace:*",
14-
"react": "^18.2.0",
15-
"react-dom": "^18.2.0"
13+
"react": "^18.3.1",
14+
"react-dom": "^18.3.1",
15+
"@navita/css": "workspace:*"
1616
},
1717
"devDependencies": {
1818
"@navita/vite-plugin": "workspace:*",
19-
"vite-tsconfig-paths": "^4.2.0",
20-
"@types/react": "^18.0.28",
21-
"@types/react-dom": "^18.0.11",
22-
"@typescript-eslint/eslint-plugin": "^5.57.1",
23-
"@typescript-eslint/parser": "^5.57.1",
24-
"@vitejs/plugin-react-swc": "^3.0.0",
25-
"eslint": "^8.38.0",
26-
"eslint-plugin-react-hooks": "^4.6.0",
27-
"eslint-plugin-react-refresh": "^0.3.4",
28-
"typescript": "^5.0.2",
29-
"vite": "^4.4.11"
19+
"@types/react": "^18.3.3",
20+
"@types/react-dom": "^18.3.0",
21+
"@vitejs/plugin-react": "^4.3.1",
22+
"globals": "^15.9.0",
23+
"typescript": "^5.5.3",
24+
"vite": "^5.4.1"
3025
}
3126
}

‎examples/with-vite/public/vite.svg

+1
Loading

‎examples/with-vite/src/App.css

-42
This file was deleted.

‎examples/with-vite/src/App.tsx

+15-29
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,25 @@
1-
import { globalStyle } from "@navita/css";
2-
import { useCallback, useState } from "react";
3-
import { Button } from "@/components/button";
4-
import { ComicSansContainer } from "@/components/comicSansContainer.tsx";
5-
import { DynamicStyleExample } from "@/components/dynamicStyleExample.tsx";
6-
import { MergeExample } from "@/components/mergeExample.tsx";
7-
import './App.css';
1+
import { style } from '@navita/css';
2+
import { useState } from 'react';
3+
import { Button } from "./components/button.tsx";
84

9-
globalStyle(':root', {
10-
background: 'floralwhite',
11-
'@media (prefers-color-scheme: dark)': {
12-
background: 'royalblue',
13-
color: 'white',
14-
}
5+
const x = style({
6+
background: 'red',
7+
color: 'blue',
158
});
169

17-
function App() {
18-
const [counter, setCounter] = useState(0);
10+
const button = style({
11+
background: 'green',
12+
});
1913

20-
const handleButtonClick = useCallback(() => {
21-
setCounter((prevState) => prevState + 1);
22-
}, []);
14+
function App() {
15+
const [count, setCount] = useState(0);
2316

2417
return (
25-
<div>
26-
<MergeExample />
27-
28-
<DynamicStyleExample />
29-
30-
<Button onClick={handleButtonClick}>
31-
Clicked {counter} times
32-
</Button>
18+
<div className={x}>
19+
Hello
20+
<button className={button} onClick={() => setCount(count + 1)}>Count: {count}</button>
3321

34-
<ComicSansContainer>
35-
This is written with comic sans
36-
</ComicSansContainer>
22+
<Button>Hello</Button>
3723
</div>
3824
);
3925
}

0 commit comments

Comments
 (0)