Skip to content

Commit

Permalink
Remove @remix-run/eslint-config dependency (#7597)
Browse files Browse the repository at this point in the history
  • Loading branch information
brophdawg11 authored Dec 13, 2023
1 parent 166d13d commit e8dd645
Show file tree
Hide file tree
Showing 32 changed files with 826 additions and 26 deletions.
9 changes: 5 additions & 4 deletions docs/guides/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,28 @@ Remix seamlessly supports both JavaScript and TypeScript. If you name a file wit

The Remix compiler will not do any type checking (it simply removes the types). If you want to do type checking, you'll want to use TypeScript's `tsc` CLI yourself. A common solution is to add a `typecheck` script to your package.json:

```json filename=package.json lines=[9]
```json filename=package.json lines=[10]
{
"name": "remix-app",
"private": true,
"sideEffects": false,
"scripts": {
"build": "remix build",
"dev": "remix dev",
"start": "remix-serve build/index.js",
"dev": "remix dev --manual",
"lint": "eslint --ignore-path .gitignore .",
"start": "remix-serve ./build/index.js",
"typecheck": "tsc"
},
"dependencies": {
"@remix-run/node": "latest",
"@remix-run/react": "latest",
"@remix-run/serve": "latest",
"isbot": "^3.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@remix-run/dev": "latest",
"@remix-run/eslint-config": "latest",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"eslint": "^8.23.1",
Expand Down
39 changes: 39 additions & 0 deletions scripts/lint-templates.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
#!/bin/bash

# Helper script for us to use to validate template lint setups outside of the
# monorepo. This script will, for each template in your local Remix repo clone:
#
# * Install an app via create-remix for the template (into a temp/ directory)
# * Install deps
# * npm run lint
#
# Usage:
# lint-templates.sh [path-to-remix-repo]
#
# So from a sibling folder to the remix repo:
# ../remix/scripts/lint-templates.sh ../remix

REPO_DIR="${1}"

if [ "${REPO_DIR}" == "" ]; then
REPO_DIR="../remix"
fi

if [ ! -e "${REPO_DIR}" ]; then
echo "Invalid repo directory: ${REPO_DIR}";
exit 1;
fi

TEMPLATES=$(find ${REPO_DIR}/templates -type d -mindepth 1 -maxdepth 1 | grep -v deno | grep -v tutorial | sort)

for D in ${TEMPLATES}; do
echo "Linting template: ${D}";
echo "-------------------------------------------------------";
rm -rf temp;
npx create-remix@latest --template "${D}" temp -y;
cd temp;
npm run lint;
echo "";
echo "";
cd ..;
done
78 changes: 77 additions & 1 deletion templates/arc/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,80 @@
/**
* 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 = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
root: true,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
commonjs: true,
es6: true,
},

// 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" },
],
},
},

// 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.js", "plugin-remix.js"],
env: {
node: true,
},
},
],
};
3 changes: 3 additions & 0 deletions templates/arc/app/entry.server.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export default function handleRequest(
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
// This is ignored so we can keep it in the template for visibility. Feel
// free to delete this parameter in your app if you're not using it!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
loadContext: AppLoadContext
) {
return isbot(request.headers.get("user-agent"))
Expand Down
8 changes: 7 additions & 1 deletion templates/arc/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"scripts": {
"build": "remix build",
"dev": "remix dev --manual -c \"arc sandbox -e testing\"",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "cross-env NODE_ENV=production arc sandbox",
"typecheck": "tsc"
},
Expand All @@ -22,11 +23,16 @@
"devDependencies": {
"@architect/architect": "^10.12.1",
"@remix-run/dev": "*",
"@remix-run/eslint-config": "*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/source-map-support": "^0.5.6",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"eslint": "^8.38.0",
"eslint-config-prettier": "^9.0.0",
"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",
"typescript": "^5.1.6"
},
"engines": {
Expand Down
78 changes: 77 additions & 1 deletion templates/cloudflare-pages/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,80 @@
/**
* 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 = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
root: true,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
commonjs: true,
es6: true,
},

// 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" },
],
},
},

// 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.js"],
env: {
node: true,
},
},
],
};
3 changes: 3 additions & 0 deletions templates/cloudflare-pages/app/entry.server.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default async function handleRequest(
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
// This is ignored so we can keep it in the template for visibility. Feel
// free to delete this parameter in your app if you're not using it!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
loadContext: AppLoadContext
) {
const body = await renderToReadableStream(
Expand Down
8 changes: 7 additions & 1 deletion templates/cloudflare-pages/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"scripts": {
"build": "remix build",
"dev": "remix dev --manual -c \"npm run start\"",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "wrangler pages dev --compatibility-date=2023-06-21 ./public",
"typecheck": "tsc"
},
Expand All @@ -20,10 +21,15 @@
"devDependencies": {
"@cloudflare/workers-types": "^4.20230518.0",
"@remix-run/dev": "*",
"@remix-run/eslint-config": "*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"eslint": "^8.38.0",
"eslint-config-prettier": "^9.0.0",
"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",
"typescript": "^5.1.0",
"wrangler": "3.8.0"
},
Expand Down
78 changes: 77 additions & 1 deletion templates/cloudflare-workers/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,80 @@
/**
* 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 = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
root: true,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
commonjs: true,
es6: true,
},

// 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" },
],
},
},

// 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.js"],
env: {
node: true,
},
},
],
};
3 changes: 3 additions & 0 deletions templates/cloudflare-workers/app/entry.server.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default async function handleRequest(
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
// This is ignored so we can keep it in the template for visibility. Feel
// free to delete this parameter in your app if you're not using it!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
loadContext: AppLoadContext
) {
const body = await renderToReadableStream(
Expand Down
Loading

0 comments on commit e8dd645

Please sign in to comment.