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
eagerpatch · Oct 1, 2024 · c03767b · c03767b
1 parent e103d3d
commit c03767b
Show file tree

Hide file tree

Showing 34 changed files with 12,447 additions and 8,397 deletions.
diff --git a/.changeset/tall-lions-appear.md b/.changeset/tall-lions-appear.md
@@ -0,0 +1,6 @@
+---
+'@navita/vite-plugin': major
+'@navita/core': major
+---
+
+fix proper remix support in the vite plugin
diff --git a/examples/with-remix/.gitignore b/examples/with-remix/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env
diff --git a/examples/with-remix/app/components/box.tsx b/examples/with-remix/app/components/box.tsx
@@ -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>
+);
diff --git a/examples/with-remix/app/components/button.tsx b/examples/with-remix/app/components/button.tsx
@@ -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>
+);
diff --git a/examples/with-remix/app/consts.ts b/examples/with-remix/app/consts.ts
@@ -0,0 +1 @@
+export const background = 'orange';
diff --git a/examples/with-remix/app/root.tsx b/examples/with-remix/app/root.tsx
@@ -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 />;
+}
diff --git a/examples/with-remix/app/routes/_index.tsx b/examples/with-remix/app/routes/_index.tsx
@@ -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>
+ );
+}
diff --git a/examples/with-remix/package.json b/examples/with-remix/package.json
@@ -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"
+ }
+}
diff --git a/examples/with-remix/public/favicon.ico b/examples/with-remix/public/favicon.ico
diff --git a/examples/with-remix/public/logo-dark.png b/examples/with-remix/public/logo-dark.png
diff --git a/examples/with-remix/public/logo-light.png b/examples/with-remix/public/logo-light.png
diff --git a/examples/with-remix/tsconfig.json b/examples/with-remix/tsconfig.json
@@ -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
+ }
+}
diff --git a/examples/with-remix/vite.config.ts b/examples/with-remix/vite.config.ts
@@ -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(),
+ ],
+});
diff --git a/examples/with-vite/.eslintrc.cjs b/examples/with-vite/.eslintrc.cjs
diff --git a/examples/with-vite/index.html b/examples/with-vite/index.html
@@ -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>

diff --git a/examples/with-vite/package.json b/examples/with-vite/package.json
@@ -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"
  }
 }
diff --git a/examples/with-vite/public/vite.svg b/examples/with-vite/public/vite.svg
diff --git a/examples/with-vite/src/App.css b/examples/with-vite/src/App.css
diff --git a/examples/with-vite/src/App.tsx b/examples/with-vite/src/App.tsx
@@ -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>
  );
 }