From 240bdfbad6f2515029f083e0112188e817fc9532 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Tue, 25 Oct 2022 15:01:18 +0200 Subject: [PATCH 1/5] Configure vite and ts to use non-relative paths. --- coral/tsconfig.json | 4 ++++ coral/vite.config.ts | 9 +++++++++ 2 files changed, 13 insertions(+) diff --git a/coral/tsconfig.json b/coral/tsconfig.json index 3d0a51a86e..b16a9bff58 100644 --- a/coral/tsconfig.json +++ b/coral/tsconfig.json @@ -1,5 +1,9 @@ { "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], diff --git a/coral/vite.config.ts b/coral/vite.config.ts index 86302e5cc6..307027d698 100644 --- a/coral/vite.config.ts +++ b/coral/vite.config.ts @@ -1,7 +1,11 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; +import { resolve } from "path"; +const rootPath = resolve(__dirname); // https://vitejs.dev/config/ + +// console.log("rootPath", rootPath); export default defineConfig({ plugins: [react()], define: { @@ -16,4 +20,9 @@ export default defineConfig({ EXAMPLE: "", }, }, + resolve: { + alias: { + "@": resolve(rootPath, "./src"), + }, + }, }); From 98221f8c606e5a9d814e33d3479487e1b0850f10 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Tue, 25 Oct 2022 15:09:42 +0200 Subject: [PATCH 2/5] Add eslint rule to restrict relative imports. --- coral/.eslintrc.cjs | 7 ++++++- coral/package.json | 1 + coral/pnpm-lock.yaml | 6 ++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/coral/.eslintrc.cjs b/coral/.eslintrc.cjs index 3d9d510c23..9c764e880f 100644 --- a/coral/.eslintrc.cjs +++ b/coral/.eslintrc.cjs @@ -19,7 +19,8 @@ module.exports = { }, "plugins": [ "react", - "@typescript-eslint" + "@typescript-eslint", + "no-relative-import-paths" ], "settings": { "react": { @@ -27,5 +28,9 @@ module.exports = { } }, "rules": { + "no-relative-import-paths/no-relative-import-paths": [ + "warn", + { "allowSameFolder": true, "rootDir": "src" } + ] } } diff --git a/coral/package.json b/coral/package.json index 8055a978e9..ce2c7f9648 100644 --- a/coral/package.json +++ b/coral/package.json @@ -46,6 +46,7 @@ "@vitejs/plugin-react": "^2.1.0", "eslint": "^8.25.0", "eslint-config-prettier": "^8.5.0", + "eslint-plugin-no-relative-import-paths": "^1.4.0", "eslint-plugin-react": "^7.31.10", "husky": "^8.0.1", "identity-obj-proxy": "^3.0.0", diff --git a/coral/pnpm-lock.yaml b/coral/pnpm-lock.yaml index 440f38acea..9e83e8f9ac 100644 --- a/coral/pnpm-lock.yaml +++ b/coral/pnpm-lock.yaml @@ -14,6 +14,7 @@ specifiers: '@vitejs/plugin-react': ^2.1.0 eslint: ^8.25.0 eslint-config-prettier: ^8.5.0 + eslint-plugin-no-relative-import-paths: ^1.4.0 eslint-plugin-react: ^7.31.10 husky: ^8.0.1 identity-obj-proxy: ^3.0.0 @@ -49,6 +50,7 @@ devDependencies: '@vitejs/plugin-react': 2.1.0_vite@3.1.8 eslint: 8.25.0 eslint-config-prettier: 8.5.0_eslint@8.25.0 + eslint-plugin-no-relative-import-paths: 1.4.0 eslint-plugin-react: 7.31.10_eslint@8.25.0 husky: 8.0.1 identity-obj-proxy: 3.0.0 @@ -2135,6 +2137,10 @@ packages: eslint: 8.25.0 dev: true + /eslint-plugin-no-relative-import-paths/1.4.0: + resolution: {integrity: sha512-J/ok26KqJM+20VsxNEcHc9kyW0dcFHBlihOO5FFv/GQqwcW+G1UngbHLpnPAdOQ1dJg5Ljk/40csqfZ3mnneUw==} + dev: true + /eslint-plugin-react/7.31.10_eslint@8.25.0: resolution: {integrity: sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==} engines: {node: '>=4'} From 664d759884d0fc711c3362aa9b761716889c61a2 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Wed, 26 Oct 2022 13:55:17 +0200 Subject: [PATCH 3/5] Change alias to src. --- coral/jest.config.ts | 4 ++-- coral/tsconfig.json | 3 --- coral/vite.config.ts | 5 +---- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/coral/jest.config.ts b/coral/jest.config.ts index 26bbba659d..ee0ed304fa 100644 --- a/coral/jest.config.ts +++ b/coral/jest.config.ts @@ -7,10 +7,10 @@ export default { moduleFileExtensions: ["js", "jsx", "ts", "tsx"], preset: "ts-jest", testEnvironment: "jsdom", - setupFilesAfterEnv: ['/test-setup/setup-files-after-env.ts'], + setupFilesAfterEnv: ["/test-setup/setup-files-after-env.ts"], moduleNameMapper: { ".+\\.(png|jpg|ttf|woff|woff2|svg)$": "jest-transform-stub", "\\.css$": "identity-obj-proxy", - "^@/(.*)$": "/src/$1", + "^src/(.*)$": "/src/$1", }, }; diff --git a/coral/tsconfig.json b/coral/tsconfig.json index b16a9bff58..30aea56764 100644 --- a/coral/tsconfig.json +++ b/coral/tsconfig.json @@ -1,9 +1,6 @@ { "compilerOptions": { "baseUrl": ".", - "paths": { - "@/*": ["src/*"] - }, "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], diff --git a/coral/vite.config.ts b/coral/vite.config.ts index 307027d698..504312d7e8 100644 --- a/coral/vite.config.ts +++ b/coral/vite.config.ts @@ -2,10 +2,7 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import { resolve } from "path"; -const rootPath = resolve(__dirname); // https://vitejs.dev/config/ - -// console.log("rootPath", rootPath); export default defineConfig({ plugins: [react()], define: { @@ -22,7 +19,7 @@ export default defineConfig({ }, resolve: { alias: { - "@": resolve(rootPath, "./src"), + src: resolve(resolve(__dirname), "./src"), }, }, }); From e70b823b0adc7ef5e4edde90a10ba4ff74aad047 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Wed, 26 Oct 2022 14:11:49 +0200 Subject: [PATCH 4/5] Tighten eslint rules for relative imports. --- coral/.eslintrc.cjs | 3 +-- coral/src/main.tsx | 2 +- coral/src/pages/hello/index.test.tsx | 2 +- coral/src/pages/index.test.tsx | 2 +- coral/src/router.tsx | 4 ++-- 5 files changed, 6 insertions(+), 7 deletions(-) diff --git a/coral/.eslintrc.cjs b/coral/.eslintrc.cjs index 9c764e880f..0b5e2e976d 100644 --- a/coral/.eslintrc.cjs +++ b/coral/.eslintrc.cjs @@ -29,8 +29,7 @@ module.exports = { }, "rules": { "no-relative-import-paths/no-relative-import-paths": [ - "warn", - { "allowSameFolder": true, "rootDir": "src" } + "error" ] } } diff --git a/coral/src/main.tsx b/coral/src/main.tsx index e9e17d0e29..0ebc3bb80c 100644 --- a/coral/src/main.tsx +++ b/coral/src/main.tsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { RouterProvider } from "react-router-dom"; -import router from "./router"; +import router from "src/router"; import "@aivenio/design-system/dist/styles.css"; diff --git a/coral/src/pages/hello/index.test.tsx b/coral/src/pages/hello/index.test.tsx index cd395dc5ae..fa186012f1 100644 --- a/coral/src/pages/hello/index.test.tsx +++ b/coral/src/pages/hello/index.test.tsx @@ -1,4 +1,4 @@ -import HelloPage from "./index"; +import HelloPage from "src/pages/hello/index"; import { render, cleanup, screen } from "@testing-library/react"; describe("HelloPage", () => { diff --git a/coral/src/pages/index.test.tsx b/coral/src/pages/index.test.tsx index d5f03d5b18..d02545cc2b 100644 --- a/coral/src/pages/index.test.tsx +++ b/coral/src/pages/index.test.tsx @@ -1,4 +1,4 @@ -import HomePage from "./index"; +import HomePage from "src/pages/index"; import { render, cleanup, screen } from "@testing-library/react"; describe("HomePage", () => { diff --git a/coral/src/router.tsx b/coral/src/router.tsx index 998a501d38..c5a3ecc9c0 100644 --- a/coral/src/router.tsx +++ b/coral/src/router.tsx @@ -1,6 +1,6 @@ import { createBrowserRouter, Navigate, RouteObject } from "react-router-dom"; -import HomePage from "./pages/index"; -import HelloPage from "./pages/hello"; +import HomePage from "src/pages/index"; +import HelloPage from "src/pages/hello"; const routes: Array = [ { From 7d5eb1dd8b4b4514af1b48fbd5525339aa7ad919 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Wed, 26 Oct 2022 15:46:26 +0200 Subject: [PATCH 5/5] Remove unnecessary index from imports. --- coral/src/pages/hello/index.test.tsx | 2 +- coral/src/pages/index.test.tsx | 2 +- coral/src/router.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/coral/src/pages/hello/index.test.tsx b/coral/src/pages/hello/index.test.tsx index fa186012f1..acebab5464 100644 --- a/coral/src/pages/hello/index.test.tsx +++ b/coral/src/pages/hello/index.test.tsx @@ -1,4 +1,4 @@ -import HelloPage from "src/pages/hello/index"; +import HelloPage from "src/pages/hello"; import { render, cleanup, screen } from "@testing-library/react"; describe("HelloPage", () => { diff --git a/coral/src/pages/index.test.tsx b/coral/src/pages/index.test.tsx index d02545cc2b..022549f61f 100644 --- a/coral/src/pages/index.test.tsx +++ b/coral/src/pages/index.test.tsx @@ -1,4 +1,4 @@ -import HomePage from "src/pages/index"; +import HomePage from "src/pages"; import { render, cleanup, screen } from "@testing-library/react"; describe("HomePage", () => { diff --git a/coral/src/router.tsx b/coral/src/router.tsx index c5a3ecc9c0..9adeb744d3 100644 --- a/coral/src/router.tsx +++ b/coral/src/router.tsx @@ -1,5 +1,5 @@ import { createBrowserRouter, Navigate, RouteObject } from "react-router-dom"; -import HomePage from "src/pages/index"; +import HomePage from "src/pages"; import HelloPage from "src/pages/hello"; const routes: Array = [