Skip to content

Commit 42d4c50

Browse files
AlemTuzlakAlemTuzlak
authored
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
1 parent e08787b commit 42d4c50

File tree

763 files changed

+48873
-38445
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

763 files changed

+48873
-38445
lines changed

‎.eslintrc.cjs

-27
This file was deleted.

‎.github/workflows/publish-commit.yaml

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: 🚀 pkg-pr-new
2+
on: [push, pull_request]
3+
4+
jobs:
5+
build:
6+
runs-on: ubuntu-latest
7+
8+
steps:
9+
- name: Checkout code
10+
uses: actions/checkout@v2
11+
12+
- run: corepack enable
13+
- uses: actions/setup-node@v4
14+
with:
15+
node-version: 20
16+
cache: "npm"
17+
18+
- name: Install dependencies
19+
run: npm install
20+
21+
- name: Build
22+
run: npm run build
23+
24+
- run: npx pkg-pr-new publish

‎.github/workflows/publish.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ name: Publish Package to npmjs
22
on:
33
release:
44
types: [published]
5+
workflow_dispatch:
56
jobs:
67
npm-publish:
78
runs-on: ubuntu-latest

‎.github/workflows/validate.yaml

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
name: 🚀 Validation Pipeline
2+
concurrency:
3+
group: ${{ github.repository }}-${{ github.workflow }}-${{ github.ref }}
4+
cancel-in-progress: true
5+
on:
6+
push:
7+
branches: [main]
8+
pull_request:
9+
branches: [main]
10+
permissions:
11+
actions: write
12+
contents: read
13+
# Required to put a comment into the pull-request
14+
pull-requests: write
15+
jobs:
16+
lint:
17+
name: ⬣ Biome lint
18+
runs-on: ubuntu-latest
19+
steps:
20+
- name: ⬇️ Checkout repo
21+
uses: actions/checkout@v4
22+
- name: Setup Biome
23+
uses: biomejs/setup-biome@v2
24+
- name: Run Biome
25+
run: biome ci .
26+
27+
typecheck:
28+
name: 🔎 Type check
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: 🛑 Cancel Previous Runs
32+
uses: styfle/[email protected]
33+
- name: ⬇️ Checkout repo
34+
uses: actions/checkout@v4
35+
- name: ⎔ Setup node
36+
uses: actions/setup-node@v4
37+
with:
38+
node-version: 20
39+
- name: 📥 Download deps
40+
uses: bahmutov/npm-install@v1
41+
with:
42+
useLockFile: false
43+
- name: 🔎 Type check
44+
run: npm run typecheck
45+
46+
vitest:
47+
name: ⚡ Unit Tests
48+
runs-on: ubuntu-latest
49+
steps:
50+
- name: 🛑 Cancel Previous Runs
51+
uses: styfle/[email protected]
52+
- name: ⬇️ Checkout repo
53+
uses: actions/checkout@v4
54+
- name: ⎔ Setup node
55+
uses: actions/setup-node@v4
56+
with:
57+
node-version: 20
58+
- name: 📥 Download deps
59+
uses: bahmutov/npm-install@v1
60+
with:
61+
useLockFile: false
62+
- name: Install dotenv cli
63+
run: npm install -g dotenv-cli
64+
- name: ⚡ Run vitest
65+
run: npm run test:cov
66+
- name: "Report Coverage"
67+
# Only works if you set `reportOnFailure: true` in your vite config as specified above
68+
if: always()
69+
uses: davelosert/vitest-coverage-report-action@v2

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -134,4 +134,5 @@ dist
134134
.history
135135

136136
# IDE
137-
.idea
137+
.idea
138+
.tsup

‎.husky/pre-commit

-4
This file was deleted.

‎.husky/pre-push

-4
This file was deleted.

‎.prettierignore

-2
This file was deleted.

‎.prettierrc

-11
This file was deleted.

‎.vscode/settings.json

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"biome.enabled": true,
3+
"editor.defaultFormatter": "biomejs.biome",
4+
"editor.formatOnSave": true,
5+
"//editor.formatOnType": true,
6+
"javascript.format.enable": false,
7+
"javascript.suggest.autoImports": true,
8+
"javascript.suggest.paths": true,
9+
"typescript.format.enable": false,
10+
"typescript.suggest.paths": true,
11+
"typescript.suggest.autoImports": true,
12+
"editor.renderWhitespace": "all",
13+
"editor.rulers": [120, 160],
14+
"editor.codeActionsOnSave": {
15+
"source.fixAll": "always",
16+
"source.organizeImports": "never",
17+
"source.organizeImports.biome": "always",
18+
"quickfix.biome": "always"
19+
},
20+
"editor.insertSpaces": false,
21+
"editor.detectIndentation": true,
22+
"editor.trimAutoWhitespace": true,
23+
"//files.autoSave": "afterDelay",
24+
"//files.autoSaveDelay": 250,
25+
"files.trimTrailingWhitespace": true,
26+
"files.trimTrailingWhitespaceInRegexAndStrings": true,
27+
"files.trimFinalNewlines": true,
28+
"[yaml]": {
29+
"editor.defaultFormatter": "redhat.vscode-yaml"
30+
},
31+
"[toml]": {
32+
"editor.defaultFormatter": "tamasfe.even-better-toml"
33+
},
34+
"explorer.fileNesting.patterns": {
35+
"*.ts": "${basename}.*.${extname}",
36+
".env": ".env.*",
37+
"*.tsx": "${basename}.*.${extname},${basename}.*.ts",
38+
"package.json": "*.json, *.yml, *.config.js, *.config.ts, *.yaml"
39+
},
40+
"eslint.enable": false,
41+
"eslint.format.enable": false,
42+
"prettier.enable": false,
43+
"turbo.useLocalTurbo": true,
44+
"evenBetterToml.formatter.alignComments": false,
45+
"evenBetterToml.formatter.alignEntries": true,
46+
"evenBetterToml.formatter.allowedBlankLines": 1,
47+
"evenBetterToml.formatter.columnWidth": 120,
48+
"evenBetterToml.formatter.indentEntries": true,
49+
"evenBetterToml.formatter.indentTables": true,
50+
"evenBetterToml.formatter.trailingNewline": true,
51+
"[typescriptreact]": {
52+
"editor.defaultFormatter": "biomejs.biome"
53+
},
54+
"[typescript]": {
55+
"editor.defaultFormatter": "biomejs.biome"
56+
}
57+
}

‎biome.json

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
3+
"vcs": {
4+
"enabled": true,
5+
"clientKind": "git",
6+
"defaultBranch": "main",
7+
"useIgnoreFile": true
8+
},
9+
"formatter": {
10+
"enabled": true,
11+
"formatWithErrors": false,
12+
"indentStyle": "tab",
13+
"lineEnding": "lf",
14+
"lineWidth": 120
15+
},
16+
"files": {
17+
"ignore": ["test-apps/**", "docs/**", "./src/external/**", "./plugins/**", "./src/input.css"]
18+
},
19+
"organizeImports": {
20+
"enabled": true
21+
},
22+
"linter": {
23+
"enabled": true,
24+
"rules": {
25+
"recommended": true,
26+
"suspicious": {
27+
"recommended": true,
28+
"noExplicitAny": "off"
29+
},
30+
"style": {
31+
"recommended": true
32+
},
33+
"complexity": {
34+
"recommended": true
35+
},
36+
"security": {
37+
"recommended": true
38+
},
39+
"performance": {
40+
"recommended": true
41+
},
42+
"correctness": {
43+
"recommended": true
44+
},
45+
"a11y": {
46+
"recommended": true
47+
},
48+
"nursery": {
49+
"recommended": true
50+
}
51+
}
52+
},
53+
"javascript": {
54+
"formatter": {
55+
"semicolons": "asNeeded",
56+
"trailingCommas": "es5"
57+
}
58+
}
59+
}

‎docs/posts/4.7.0/_index.mdx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: Quick Start
3+
hidden: true
4+
toc: false
5+
---
6+
7+
import Info from './info.tsx'
8+
9+
This documentation covers everything you need to know to get started with `remix-development-tools`.
10+
11+
## Prerequisites
12+
13+
- Remix version **2.8** or higher.
14+
- Your project needs to run on **ESM**. If you are using CommonJS, you will need to convert your project to ESM.
15+
- Remix has to run on **Vite**.
16+
17+
## Why ESM and Vite?
18+
19+
If you don't already know, Remix has become a Vite plugin. This means that Remix is now using Vite for bundling
20+
and development instead of their own custom solution. Due to this `remix-development-tools` is also built on top of
21+
Vite and uses it extensively.
22+
23+
In order to use the full feature-set of **Vite** the project has to run on ESM. This is because Vite exposes a websocket
24+
that **remix-development-tools** uses to communicate with the server. This websocket is **only** available in ESM projects
25+
because it's exposed by `import.meta` which is only available in ESM.
26+
27+
To avoid creating user confusion and giving you a subpar experience, we have decided to only support ESM projects running on Vite.
28+
29+
<Info>
30+
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.
31+
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)
32+
</Info>
33+
34+
## Why use `remix-development-tools`?
35+
36+
`remix-development-tools` is a set of tools that help you to develop your Remix application.
37+
38+
They help you, but are not limited to, to do the following things:
39+
- **Loader data display** - You can see the data that is being loaded by your loaders.
40+
- **Route display** - You can see the routes that are being used by your application in list/tree format.
41+
- **Error tracking** - You can see invalid HTML rendered on your page and where it's coming from.
42+
- **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.
43+
- **Server logs** - You can see the logs of your server in the browser.
44+
- **Route boundaries** - You can see the route boundaries by hovering over elements.

0 commit comments

Comments
 (0)