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>
   );
 }