mirror of
https://github.com/coder/coder.git
synced 2026-10-24 11:43:39 +08:00
Bryan
ec077c6191
Fix for #348 - migrate our NextJS project to a pure webpack project w/ a single bundle - [x] Switch from `next/link` to `react-router-dom`'s link > This part was easy - just change the import to `import { Link } from "react-router-dom"` and `<Link href={...} />` to `<Link to={...} />` - [x] Switch from `next/router` to `react-router-dom`'s paradigms (`useNavigation`, `useLocation`, and `useParams`) > `router.push` can be converted to `navigate(...)` (provided by the `useNavigate` hook) > `router.replace` can be converted `navigate(..., {replace: true})` > Query parameters (`const { query } = useRouter`) can be converted to `const query = useParams()`) - [x] Implement client-side routing with `react-router-dom` > Parameterized routes in NextJS like `projects/[organization]/[project]` would look like: > ``` > <Route path="projects"> > <Route path=":organization/:project"> > <Route index element={<ProjectPage />} /> > </Route> > </Route> > ``` I've hooked up a `build:analyze` command that spins up a server to show the bundle size: <img width="1303" alt="image" src="https://user-images.githubusercontent.com/88213859/157496889-87c5fdcd-fad1-4f2e-b7b6-437aebf99641.png"> The bundle looks OK, but there are some opportunities for improvement - the heavy-weight dependencies, like React, ReactDOM, Material-UI, and lodash could be brought in via a CDN: https://stackoverflow.com/questions/50645796/how-to-import-reactjs-material-ui-using-a-cdn-through-webpacks-externals
56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
module.exports = {
|
|
projects: [
|
|
{
|
|
globals: {
|
|
"ts-jest": {
|
|
tsconfig: "tsconfig.test.json",
|
|
},
|
|
},
|
|
coverageReporters: ["text", "lcov"],
|
|
displayName: "test",
|
|
preset: "ts-jest",
|
|
|
|
roots: ["<rootDir>"],
|
|
transform: {
|
|
"^.+\\.tsx?$": "ts-jest",
|
|
},
|
|
testEnvironment: "jsdom",
|
|
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
|
|
testPathIgnorePatterns: ["/node_modules/", "/__tests__/fakes", "/e2e/"],
|
|
moduleDirectories: ["node_modules", "<rootDir>"],
|
|
},
|
|
{
|
|
displayName: "lint",
|
|
runner: "jest-runner-eslint",
|
|
testMatch: ["<rootDir>/**/*.js", "<rootDir>/**/*.ts", "<rootDir>/**/*.tsx"],
|
|
testPathIgnorePatterns: ["/out/", "/_jest/", "jest.config.js", "jest-runner.*.js"],
|
|
},
|
|
],
|
|
collectCoverageFrom: [
|
|
"<rootDir>/**/*.js",
|
|
"<rootDir>/**/*.ts",
|
|
"<rootDir>/**/*.tsx",
|
|
"!<rootDir>/**/*.stories.tsx",
|
|
"!<rootDir>/_jest/**/*.*",
|
|
"!<rootDir>/api.ts",
|
|
"!<rootDir>/coverage/**/*.*",
|
|
"!<rootDir>/e2e/**/*.*",
|
|
"!<rootDir>/jest-runner.eslint.config.js",
|
|
"!<rootDir>/jest.config.js",
|
|
"!<rootDir>/webpack.*.ts",
|
|
"!<rootDir>/out/**/*.*",
|
|
"!<rootDir>/storybook-static/**/*.*",
|
|
],
|
|
reporters: [
|
|
"default",
|
|
[
|
|
"jest-junit",
|
|
{
|
|
suiteName: "Front-end Jest Tests",
|
|
outputDirectory: "./test-results",
|
|
outputName: "junit.xml",
|
|
},
|
|
],
|
|
],
|
|
}
|