Project cleanup (#150)

* Project cleanup

* Removed external libs /cut 200kb off of bundle size

* Restructured styling, fixed mobile responsiveness, removed unused deps, exports, styles and code

* Added lefthook, validation workflows on CI, swapper eslint for biome

* test fix

* test fix

* test fix

* test fix

* test fix

* Updated rdt version, added server timings feature, fixed cache headers logging, updated docs page, removed tech debt

* removed remix forge integration

* Revert "removed remix forge integration"

This reverts commit 32fe7de.

* fix

* Bug fixes for route boundaries, doc updates, various improvements to architecture for css

* Final fixes before reelase

.github/workflows/publish-commit.yaml

@@ -0,0 +1,24 @@
+name: 🚀 pkg-pr-new
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - run: npx pkg-pr-new publish

.github/workflows/publish.yaml

@@ -2,6 +2,7 @@ name: Publish Package to npmjs
 on:
   release:
     types: [published]
+  workflow_dispatch:
 jobs:
   npm-publish:
     runs-on: ubuntu-latest

.github/workflows/validate.yaml

@@ -0,0 +1,69 @@
+name: 🚀 Validation Pipeline
+concurrency:
+  group: ${{ github.repository }}-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+permissions:
+  actions: write
+  contents: read
+  # Required to put a comment into the pull-request
+  pull-requests: write
+jobs:
+  lint:
+    name: ⬣ Biome lint
+    runs-on: ubuntu-latest
+    steps:
+     - name: ⬇️ Checkout repo
+       uses: actions/checkout@v4
+     - name: Setup Biome
+       uses: biomejs/setup-biome@v2
+     - name: Run Biome
+       run: biome ci .
+
+  typecheck:
+    name: 🔎 Type check
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+      - name: 🔎 Type check
+        run: npm run typecheck
+
+  vitest:
+    name: ⚡ Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+      - name: Install dotenv cli
+        run: npm install -g dotenv-cli
+      - name: ⚡ Run vitest
+        run: npm run test:cov
+      - name: "Report Coverage"
+        # Only works if you set `reportOnFailure: true` in your vite config as specified above
+        if: always()
+        uses: davelosert/vitest-coverage-report-action@v2

.gitignore

@@ -134,4 +134,5 @@ dist
 .history
 
 # IDE
-.idea
+.idea
+.tsup

.vscode/settings.json

@@ -0,0 +1,57 @@
+{
+	"biome.enabled": true,
+	"editor.defaultFormatter": "biomejs.biome",
+	"editor.formatOnSave": true,
+	"//editor.formatOnType": true,
+	"javascript.format.enable": false,
+	"javascript.suggest.autoImports": true,
+	"javascript.suggest.paths": true,
+	"typescript.format.enable": false,
+	"typescript.suggest.paths": true,
+	"typescript.suggest.autoImports": true,
+	"editor.renderWhitespace": "all",
+	"editor.rulers": [120, 160],
+	"editor.codeActionsOnSave": {
+		"source.fixAll": "always",
+		"source.organizeImports": "never",
+		"source.organizeImports.biome": "always",
+		"quickfix.biome": "always"
+	},
+	"editor.insertSpaces": false,
+	"editor.detectIndentation": true,
+	"editor.trimAutoWhitespace": true,
+	"//files.autoSave": "afterDelay",
+	"//files.autoSaveDelay": 250,
+	"files.trimTrailingWhitespace": true,
+	"files.trimTrailingWhitespaceInRegexAndStrings": true,
+	"files.trimFinalNewlines": true,
+	"[yaml]": {
+		"editor.defaultFormatter": "redhat.vscode-yaml"
+	},
+	"[toml]": {
+		"editor.defaultFormatter": "tamasfe.even-better-toml"
+	},
+	"explorer.fileNesting.patterns": {
+		"*.ts": "${basename}.*.${extname}",
+		".env": ".env.*",
+		"*.tsx": "${basename}.*.${extname},${basename}.*.ts",
+		"package.json": "*.json, *.yml, *.config.js, *.config.ts, *.yaml"
+	},
+	"eslint.enable": false,
+	"eslint.format.enable": false,
+	"prettier.enable": false,
+	"turbo.useLocalTurbo": true,
+	"evenBetterToml.formatter.alignComments": false,
+	"evenBetterToml.formatter.alignEntries": true,
+	"evenBetterToml.formatter.allowedBlankLines": 1,
+	"evenBetterToml.formatter.columnWidth": 120,
+	"evenBetterToml.formatter.indentEntries": true,
+	"evenBetterToml.formatter.indentTables": true,
+	"evenBetterToml.formatter.trailingNewline": true,
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	}
+}

biome.json

@@ -0,0 +1,59 @@
+{
+	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"defaultBranch": "main",
+		"useIgnoreFile": true
+	},
+	"formatter": {
+		"enabled": true,
+		"formatWithErrors": false,
+		"indentStyle": "tab",
+		"lineEnding": "lf",
+		"lineWidth": 120
+	},
+	"files": {
+		"ignore": ["test-apps/**", "docs/**", "./src/external/**", "./plugins/**", "./src/input.css"]
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"recommended": true,
+				"noExplicitAny": "off"
+			},
+			"style": {
+				"recommended": true
+			},
+			"complexity": {
+				"recommended": true
+			},
+			"security": {
+				"recommended": true
+			},
+			"performance": {
+				"recommended": true
+			},
+			"correctness": {
+				"recommended": true
+			},
+			"a11y": {
+				"recommended": true
+			},
+			"nursery": {
+				"recommended": true
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"semicolons": "asNeeded",
+			"trailingCommas": "es5"
+		}
+	}
+}

docs/posts/4.7.0/_index.mdx

@@ -0,0 +1,44 @@
+---
+title: Quick Start
+hidden: true
+toc: false
+---
+
+import Info from './info.tsx'
+
+This documentation covers everything you need to know to get started with `remix-development-tools`.
+
+## Prerequisites
+
+- Remix version **2.8** or higher.
+- Your project needs to run on **ESM**. If you are using CommonJS, you will need to convert your project to ESM.
+- Remix has to run on **Vite**.
+
+## Why ESM and Vite?
+
+If you don't already know, Remix has become a Vite plugin. This means that Remix is now using Vite for bundling
+and development instead of their own custom solution. Due to this `remix-development-tools` is also built on top of 
+Vite and uses it extensively.
+
+In order to use the full feature-set of **Vite** the project has to run on ESM. This is because Vite exposes a websocket
+that **remix-development-tools** uses to communicate with the server. This websocket is **only** available in ESM projects 
+because it's exposed by `import.meta` which is only available in ESM.
+
+To avoid creating user confusion and giving you a subpar experience, we have decided to only support ESM projects running on Vite.
+
+<Info>
+ If you are using CommonJS non-Vite Remix app, you will need to convert your project to ESM. This is not as hard as it sounds.
+  You can find a guide on how to do this [here](https://remix.run/docs/en/main/future/vite#migrating) and [here](https://alemtuzlak.hashnode.dev/migrating-a-v1-cjs-remix-project-to-remix-vite-esm)
+</Info>
+
+## Why use `remix-development-tools`?
+
+`remix-development-tools` is a set of tools that help you to develop your Remix application. 
+
+They help you, but are not limited to, to do the following things:
+- **Loader data display** - You can see the data that is being loaded by your loaders.
+- **Route display** - You can see the routes that are being used by your application in list/tree format.
+- **Error tracking** - You can see invalid HTML rendered on your page and where it's coming from.
+- **Hydration mismatch tracking** - You can see if there are any hydration mismatches in your application, what was rendered on the client and what was rendered on the server.
+- **Server logs** - You can see the logs of your server in the browser.
+- **Route boundaries** - You can see the route boundaries by hovering over elements.