Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix remix support #54

Merged
merged 11 commits into from
Oct 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/tall-lions-appear.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@navita/vite-plugin': major
'@navita/core': major
---

fix proper remix support in the vite plugin
5 changes: 5 additions & 0 deletions examples/with-remix/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules

/.cache
/build
.env
18 changes: 18 additions & 0 deletions examples/with-remix/app/components/box.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { style } from "@navita/css";

const box = style({
background: 'hotpink',
color: 'white',
fontSize: 20,
padding: 20,
});

interface Props {
children: React.ReactNode;
}

export const Box = ({ children }: Props) => (
<div className={box}>
{children}
</div>
);
17 changes: 17 additions & 0 deletions examples/with-remix/app/components/button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { style } from "@navita/css";

const button = style({
background: 'red',
color: 'white',
padding: '10px',
});

interface Props {
children: React.ReactNode;
}

export const Button = ({ children }: Props) => (
<button className={button}>
{children}
</button>
);
1 change: 1 addition & 0 deletions examples/with-remix/app/consts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const background = 'orange';
44 changes: 44 additions & 0 deletions examples/with-remix/app/root.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import type { LinksFunction } from "@remix-run/node";
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import React from "react";

export const links: LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
];

export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}

export default function App() {
return <Outlet />;
}
28 changes: 28 additions & 0 deletions examples/with-remix/app/routes/_index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import type { MetaFunction } from "@remix-run/node";
import { style } from "@navita/css";
import { background } from "~/consts";
import { Button } from "~/components/button";
import { Box } from "~/components/box";

export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};

const x = style({
color: 'white',
backgroundColor: background,
});

export default function Index() {
return (
<div className={x}>
Testing
<Button>Testing</Button>

<Box>Hello</Box>
</div>
);
}
36 changes: 36 additions & 0 deletions examples/with-remix/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"name": "navita-with-remix",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"build": "remix vite:build",
"dev": "remix vite:dev --force",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "remix-serve ./build/server/index.js",
"typecheck": "tsc"
},
"dependencies": {
"@remix-run/node": "^2.12.1",
"@remix-run/react": "^2.12.1",
"@remix-run/serve": "^2.12.1",
"@navita/css": "workspace:*",
"isbot": "^4.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@remix-run/dev": "^2.12.1",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
"@navita/vite-plugin": "workspace:*",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
"node": ">=20.0.0"
}
}
Binary file added examples/with-remix/public/favicon.ico
Binary file not shown.
Binary file added examples/with-remix/public/logo-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/with-remix/public/logo-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions examples/with-remix/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"include": [
"**/*.ts",
"**/*.tsx",
"**/.server/**/*.ts",
"**/.server/**/*.tsx",
"**/.client/**/*.ts",
"**/.client/**/*.tsx"
],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"],
/* 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 */
"react": ["./node_modules/@types/react"]
},

// Vite takes care of building everything, not tsc.
"noEmit": true
}
}
18 changes: 18 additions & 0 deletions examples/with-remix/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { navita } from "@navita/vite-plugin";
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
plugins: [
navita(),
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
tsconfigPaths(),
],
});
14 changes: 0 additions & 14 deletions examples/with-vite/.eslintrc.cjs

This file was deleted.

5 changes: 3 additions & 2 deletions examples/with-vite/index.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>navita With Vite</title>
<title>Navita With Vite</title>
</head>
<body>
<div id="root"></div>
Expand Down
31 changes: 13 additions & 18 deletions examples/with-vite/package.json
Original file line number Diff line number Diff line change
@@ -1,31 +1,26 @@
{
"name": "with-vite",
"private": true,
"name": "navita-with-vite-example",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --force",
"build": "vite build --minify false",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@navita/css": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@navita/css": "workspace:*"
},
"devDependencies": {
"@navita/vite-plugin": "workspace:*",
"vite-tsconfig-paths": "^4.2.0",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react-swc": "^3.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2",
"vite": "^4.4.11"
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"globals": "^15.9.0",
"typescript": "^5.5.3",
"vite": "^5.4.1"
}
}
1 change: 1 addition & 0 deletions examples/with-vite/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 0 additions & 42 deletions examples/with-vite/src/App.css

This file was deleted.

44 changes: 15 additions & 29 deletions examples/with-vite/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,25 @@
import { globalStyle } from "@navita/css";
import { useCallback, useState } from "react";
import { Button } from "@/components/button";
import { ComicSansContainer } from "@/components/comicSansContainer.tsx";
import { DynamicStyleExample } from "@/components/dynamicStyleExample.tsx";
import { MergeExample } from "@/components/mergeExample.tsx";
import './App.css';
import { style } from '@navita/css';
import { useState } from 'react';
import { Button } from "./components/button.tsx";

globalStyle(':root', {
background: 'floralwhite',
'@media (prefers-color-scheme: dark)': {
background: 'royalblue',
color: 'white',
}
const x = style({
background: 'red',
color: 'blue',
});

function App() {
const [counter, setCounter] = useState(0);
const button = style({
background: 'green',
});

const handleButtonClick = useCallback(() => {
setCounter((prevState) => prevState + 1);
}, []);
function App() {
const [count, setCount] = useState(0);

return (
<div>
<MergeExample />

<DynamicStyleExample />

<Button onClick={handleButtonClick}>
Clicked {counter} times
</Button>
<div className={x}>
Hello
<button className={button} onClick={() => setCount(count + 1)}>Count: {count}</button>

<ComicSansContainer>
This is written with comic sans
</ComicSansContainer>
<Button>Hello</Button>
</div>
);
}
Expand Down
Loading
Loading