diff --git a/quirrel/.eslintrc.cjs b/quirrel/.eslintrc.cjs
new file mode 100644
index 00000000..4f6f59ee
--- /dev/null
+++ b/quirrel/.eslintrc.cjs
@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+ root: true,
+ parserOptions: {
+ ecmaVersion: "latest",
+ sourceType: "module",
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ env: {
+ browser: true,
+ commonjs: true,
+ es6: true,
+ },
+ ignorePatterns: ["!**/.server", "!**/.client"],
+
+ // Base config
+ extends: ["eslint:recommended"],
+
+ overrides: [
+ // React
+ {
+ files: ["**/*.{js,jsx,ts,tsx}"],
+ plugins: ["react", "jsx-a11y"],
+ extends: [
+ "plugin:react/recommended",
+ "plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended",
+ "plugin:jsx-a11y/recommended",
+ ],
+ settings: {
+ react: {
+ version: "detect",
+ },
+ formComponents: ["Form"],
+ linkComponents: [
+ { name: "Link", linkAttribute: "to" },
+ { name: "NavLink", linkAttribute: "to" },
+ ],
+ "import/resolver": {
+ typescript: {},
+ },
+ },
+ },
+
+ // Typescript
+ {
+ files: ["**/*.{ts,tsx}"],
+ plugins: ["@typescript-eslint", "import"],
+ parser: "@typescript-eslint/parser",
+ settings: {
+ "import/internal-regex": "^~/",
+ "import/resolver": {
+ node: {
+ extensions: [".ts", ".tsx"],
+ },
+ typescript: {
+ alwaysTryTypes: true,
+ },
+ },
+ },
+ extends: [
+ "plugin:@typescript-eslint/recommended",
+ "plugin:import/recommended",
+ "plugin:import/typescript",
+ ],
+ },
+
+ // Node
+ {
+ files: [".eslintrc.cjs"],
+ env: {
+ node: true,
+ },
+ },
+ ],
+};
diff --git a/quirrel/.eslintrc.js b/quirrel/.eslintrc.js
deleted file mode 100644
index 2061cd22..00000000
--- a/quirrel/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
- extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
-};
diff --git a/quirrel/.gitignore b/quirrel/.gitignore
index 3f7bf98d..80ec311f 100644
--- a/quirrel/.gitignore
+++ b/quirrel/.gitignore
@@ -2,5 +2,4 @@ node_modules
/.cache
/build
-/public/build
.env
diff --git a/quirrel/README.md b/quirrel/README.md
index a9e867db..ba92ce74 100644
--- a/quirrel/README.md
+++ b/quirrel/README.md
@@ -18,8 +18,6 @@ Relevant files:
- [app/routes/queues/greetings.ts](app/routes/queues/greetings.ts)
- [app/routes/\_index.tsx](app/routes/_index.tsx)
-Describe the example and how it demonstrates solving the problem. Reference any relevant files/dependencies if needed.
-
## Related Links
[Quirrel docs](https://docs.quirrel.dev/api/remix)
diff --git a/quirrel/app/root.tsx b/quirrel/app/root.tsx
index 927a0f74..e82f26fd 100644
--- a/quirrel/app/root.tsx
+++ b/quirrel/app/root.tsx
@@ -1,32 +1,29 @@
-import type { MetaFunction } from "@remix-run/node";
import {
Links,
- LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
-export const meta: MetaFunction = () => ({
- charset: "utf-8",
- title: "New Remix App",
- viewport: "width=device-width,initial-scale=1",
-});
-
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
return (
+
+
-
+ {children}
-
);
}
+
+export default function App() {
+ return ;
+}
diff --git a/quirrel/app/routes/_index.tsx b/quirrel/app/routes/_index.tsx
index 9f4766f9..abb013ee 100644
--- a/quirrel/app/routes/_index.tsx
+++ b/quirrel/app/routes/_index.tsx
@@ -1,12 +1,14 @@
-import { json } from "@remix-run/node";
-
import greetingsQueue from "~/queues/greetings.server";
export const loader = async () => {
await greetingsQueue.enqueue("Groot");
- return json({});
+ return null;
};
export default function Index() {
- return Check the code. Nothing relevant in the UI.
;
+ return (
+
+
Welcome to Remix
+
+ );
}
diff --git a/quirrel/package.json b/quirrel/package.json
index dd34ed17..a485a85c 100644
--- a/quirrel/package.json
+++ b/quirrel/package.json
@@ -1,33 +1,44 @@
{
+ "name": "quirrel",
"private": true,
"sideEffects": false,
+ "type": "module",
"scripts": {
- "build": "remix build",
+ "build": "remix vite:build",
"dev": "run-p \"dev:*\"",
+ "dev:remix": "remix vite:dev",
"dev:quirrel": "quirrel",
- "dev:remix": "remix dev",
- "start": "remix-serve build",
+ "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": "^1.19.3",
- "@remix-run/react": "^1.19.3",
- "@remix-run/serve": "^1.19.3",
- "quirrel": "^1.8.1",
- "isbot": "^3.6.5",
+ "@remix-run/node": "^2.9.2",
+ "@remix-run/react": "^2.9.2",
+ "@remix-run/serve": "^2.9.2",
+ "isbot": "^4.1.0",
+ "quirrel": "^1.14.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
- "@remix-run/dev": "^1.19.3",
- "@remix-run/eslint-config": "^1.19.3",
- "@types/react": "^18.0.25",
- "@types/react-dom": "^18.0.8",
- "eslint": "^8.27.0",
+ "@remix-run/dev": "^2.9.2",
+ "@types/react": "^18.2.20",
+ "@types/react-dom": "^18.2.7",
+ "@typescript-eslint/eslint-plugin": "^6.7.4",
+ "@typescript-eslint/parser": "^6.7.4",
+ "eslint": "^8.38.0",
+ "eslint-import-resolver-typescript": "^3.6.1",
+ "eslint-plugin-import": "^2.28.1",
+ "eslint-plugin-jsx-a11y": "^6.7.1",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
"npm-run-all": "^4.1.5",
- "typescript": "^4.8.4"
+ "typescript": "^5.1.6",
+ "vite": "^5.1.0",
+ "vite-tsconfig-paths": "^4.2.1"
},
"engines": {
- "node": ">=14.0.0"
+ "node": ">=20.0.0"
}
}
diff --git a/quirrel/remix.config.js b/quirrel/remix.config.js
deleted file mode 100644
index ca00ba94..00000000
--- a/quirrel/remix.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
- future: {
- v2_routeConvention: true,
- },
- ignoredRouteFiles: ["**/.*"],
- // appDirectory: "app",
- // assetsBuildDirectory: "public/build",
- // publicPath: "/build/",
- // serverBuildPath: "build/index.js",
-};
diff --git a/quirrel/remix.env.d.ts b/quirrel/remix.env.d.ts
deleted file mode 100644
index dcf8c45e..00000000
--- a/quirrel/remix.env.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-///
-///
diff --git a/quirrel/tsconfig.json b/quirrel/tsconfig.json
index 20f8a386..9d87dd37 100644
--- a/quirrel/tsconfig.json
+++ b/quirrel/tsconfig.json
@@ -1,22 +1,32 @@
{
- "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+ "include": [
+ "**/*.ts",
+ "**/*.tsx",
+ "**/.server/**/*.ts",
+ "**/.server/**/*.tsx",
+ "**/.client/**/*.ts",
+ "**/.client/**/*.tsx"
+ ],
"compilerOptions": {
- "lib": ["DOM", "DOM.Iterable", "ES2019"],
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "types": ["@remix-run/node", "vite/client"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
- "target": "ES2019",
+ "target": "ES2022",
"strict": true,
"allowJs": true,
+ "skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
- // Remix takes care of building everything in `remix build`.
+ // Vite takes care of building everything, not tsc.
"noEmit": true
}
}
diff --git a/quirrel/vite.config.ts b/quirrel/vite.config.ts
new file mode 100644
index 00000000..54066fb7
--- /dev/null
+++ b/quirrel/vite.config.ts
@@ -0,0 +1,16 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+ plugins: [
+ remix({
+ future: {
+ v3_fetcherPersist: true,
+ v3_relativeSplatPath: true,
+ v3_throwAbortReason: true,
+ },
+ }),
+ tsconfigPaths(),
+ ],
+});