From 8fde3ed52f047aff8c565d7c665594b98b813c2c Mon Sep 17 00:00:00 2001 From: G r e y Date: Fri, 18 Mar 2022 10:26:13 -0400 Subject: [PATCH] chore: improve eslint, sb, tsc configs (#483) Summary: This commit is a bit of a shotgun fix for various project settings. Realistically, they could've been separate commits, but this is convenience for just getting things into a green state to unblock further work. Details: - Use our version of TS in vscode plugins - organize vscode/settings.json - fix tsconfig.test and tsconfig.prod (removes errors in test files) - only use prod tsconfig in webpack - point .eslintrc to both test and prod configs - cleanup storybook - running eslint in my workspace was OOMing. I configured maxWorkers like we had in v1 to fix this. - remove .storybook from code coverage - remove .js files from code coverage --> after moving away from Next.js, we don't allowJS in our tsconfig anymore. We only use JS for configurations, it's not allowed in src code! --- .vscode/settings.json | 59 ++++++++++--------- codecov.yml | 1 + site/.eslintrc.yaml | 2 +- site/.storybook/main.js | 26 +++++++- site/jest.config.js | 14 ++++- .../components/CodeBlock/index.stories.tsx | 2 +- .../CodeExample/CodeExample.stories.tsx | 2 +- .../Workspace/Workspace.stories.tsx | 2 +- site/tsconfig.json | 2 +- site/tsconfig.prod.json | 4 ++ site/tsconfig.test.json | 3 +- site/webpack.common.ts | 9 ++- 12 files changed, 86 insertions(+), 40 deletions(-) create mode 100644 site/tsconfig.prod.json diff --git a/.vscode/settings.json b/.vscode/settings.json index 1f737aeec2..6a0c756a79 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,31 +1,4 @@ { - "files.exclude": { - "**/node_modules": true - }, - "go.lintTool": "golangci-lint", - "go.lintFlags": ["--fast"], - "go.lintOnSave": "package", - "go.coverOnSave": true, - // The codersdk is used by coderd another other packages extensively. - // To reduce redundancy in tests, it's covered by other packages. - "go.testFlags": ["-coverpkg=./.,github.com/coder/coder/codersdk"], - "go.coverageDecorator": { - "type": "gutter", - "coveredHighlightColor": "rgba(64,128,128,0.5)", - "uncoveredHighlightColor": "rgba(128,64,64,0.25)", - "coveredBorderColor": "rgba(64,128,128,0.5)", - "uncoveredBorderColor": "rgba(128,64,64,0.25)", - "coveredGutterStyle": "blockgreen", - "uncoveredGutterStyle": "blockred" - }, - "emeraldwalk.runonsave": { - "commands": [ - { - "match": "database/query.sql", - "cmd": "make gen" - } - ] - }, "cSpell.words": [ "coderd", "coderdtest", @@ -76,5 +49,35 @@ "xerrors", "yamux" ], - "eslint.workingDirectories": ["./site"] + "emeraldwalk.runonsave": { + "commands": [ + { + "match": "database/query.sql", + "cmd": "make gen" + } + ] + }, + "eslint.workingDirectories": ["./site"], + "files.exclude": { + "**/node_modules": true + }, + "go.lintTool": "golangci-lint", + "go.lintFlags": ["--fast"], + "go.lintOnSave": "package", + "go.coverOnSave": true, + // The codersdk is used by coderd another other packages extensively. + // To reduce redundancy in tests, it's covered by other packages. + "go.testFlags": ["-coverpkg=./.,github.com/coder/coder/codersdk"], + "go.coverageDecorator": { + "type": "gutter", + "coveredHighlightColor": "rgba(64,128,128,0.5)", + "uncoveredHighlightColor": "rgba(128,64,64,0.25)", + "coveredBorderColor": "rgba(64,128,128,0.5)", + "uncoveredBorderColor": "rgba(128,64,64,0.25)", + "coveredGutterStyle": "blockgreen", + "uncoveredGutterStyle": "blockred" + }, + // We often use a version of TypeScript that's ahead of the version shipped + // with VS Code. + "typescript.tsdk": "./site/node_modules/typescript/lib" } diff --git a/codecov.yml b/codecov.yml index 0a45a9a582..39b0aa0c22 100644 --- a/codecov.yml +++ b/codecov.yml @@ -35,4 +35,5 @@ ignore: - provisionerd/proto - provisionersdk/proto - scripts/datadog-cireport + - site/.storybook - rules.go diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 436bd1a2e4..7ee997c1e9 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -17,7 +17,7 @@ extends: parser: "@typescript-eslint/parser" parserOptions: ecmaVersion: 2018 - project: "./tsconfig.test.json" + project: "./tsconfig.json" sourceType: module ecmaFeatures: jsx: true diff --git a/site/.storybook/main.js b/site/.storybook/main.js index cf3dc730d9..de93a2695e 100644 --- a/site/.storybook/main.js +++ b/site/.storybook/main.js @@ -1,16 +1,36 @@ +/** + * @fileoverview This file is configures Storybook + * + * @see + */ const path = require("path") module.exports = { - stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], + // Automatically loads all stories in source ending in 'stories.tsx' + // + // SEE: https://storybook.js.org/docs/react/configure/overview#configure-story-loading + stories: ["../src/**/*.stories.tsx"], + + // addons are official and community plugins to extend Storybook. + // + // SEE: https://storybook.js.org/addons addons: ["@storybook/addon-links", "@storybook/addon-essentials"], + + // Storybook uses babel under the hood, while we currently use ts-loader. + // Sometimes, you may encounter an error in a Storybook that contains syntax + // that requires a babel plugin. + // + // SEE: https://storybook.js.org/docs/react/configure/babel babel: async (options) => ({ ...options, plugins: ["@babel/plugin-proposal-class-properties"], - // any extra options you want to set }), + + // Storybook internally uses its own Webpack configuration instead of ours. + // + // SEE: https://storybook.js.org/docs/react/configure/webpack webpackFinal: async (config) => { config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"] - return config }, } diff --git a/site/jest.config.js b/site/jest.config.js index d72d368ab8..3effb20d6a 100644 --- a/site/jest.config.js +++ b/site/jest.config.js @@ -1,9 +1,18 @@ +// REMARK: Jest is supposed to never exceed 50% maxWorkers by default. However, +// there seems to be an issue with this in our Ubuntu-based workspaces. +// If we don't limit it, then 100% CPU and high MEM usage is hit +// unexpectedly, leading to OOM kills. +// +// SEE thread: https://github.com/coder/coder/pull/483#discussion_r829636583 +const maxWorkers = process.env.CI ? 16 : 2 + module.exports = { + maxWorkers, projects: [ { globals: { "ts-jest": { - tsconfig: "tsconfig.test.json", + tsconfig: "./tsconfig.test.json", }, }, coverageReporters: ["text", "lcov"], @@ -28,9 +37,10 @@ module.exports = { }, ], collectCoverageFrom: [ - "/**/*.js", + // included files "/**/*.ts", "/**/*.tsx", + // excluded files "!/**/*.stories.tsx", "!/_jest/**/*.*", "!/api.ts", diff --git a/site/src/components/CodeBlock/index.stories.tsx b/site/src/components/CodeBlock/index.stories.tsx index 86e14ffca2..6e921faca3 100644 --- a/site/src/components/CodeBlock/index.stories.tsx +++ b/site/src/components/CodeBlock/index.stories.tsx @@ -9,7 +9,7 @@ Started container user Using user 'coder' with shell '/bin/bash'`.split("\n") export default { - title: "CodeBlock", + title: "CodeBlock/CodeBlock", component: CodeBlock, argTypes: { lines: { control: "text", defaultValue: sampleLines }, diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx index 4eafb626a8..f7972f678a 100644 --- a/site/src/components/CodeExample/CodeExample.stories.tsx +++ b/site/src/components/CodeExample/CodeExample.stories.tsx @@ -5,7 +5,7 @@ import { CodeExample, CodeExampleProps } from "./CodeExample" const sampleCode = `echo "Hello, world"` export default { - title: "CodeExample", + title: "CodeBlock/CodeExample", component: CodeExample, argTypes: { code: { control: "string", defaultValue: sampleCode }, diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx index db3ab80384..94d60aa6d6 100644 --- a/site/src/components/Workspace/Workspace.stories.tsx +++ b/site/src/components/Workspace/Workspace.stories.tsx @@ -4,7 +4,7 @@ import { Workspace, WorkspaceProps } from "./Workspace" import { MockOrganization, MockProject, MockWorkspace } from "../../test_helpers" export default { - title: "Workspace", + title: "Workspaces/Workspace", component: Workspace, argTypes: {}, } diff --git a/site/tsconfig.json b/site/tsconfig.json index 1989ec0b9e..977b02dc54 100644 --- a/site/tsconfig.json +++ b/site/tsconfig.json @@ -16,5 +16,5 @@ "target": "es5" }, "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "_jest", "**/*.test.tsx"] + "exclude": ["node_modules", "_jest"] } diff --git a/site/tsconfig.prod.json b/site/tsconfig.prod.json new file mode 100644 index 0000000000..26d0cc07ee --- /dev/null +++ b/site/tsconfig.prod.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "exclude": ["node_modules", "_jest", "**/*.stories.tsx", "**/*.test.tsx"] +} diff --git a/site/tsconfig.test.json b/site/tsconfig.test.json index 2cd6b5bbd2..416150b4d4 100644 --- a/site/tsconfig.test.json +++ b/site/tsconfig.test.json @@ -1,4 +1,5 @@ { "extends": "./tsconfig.json", - "exclude": ["node_modules", "_jest"] + "exclude": ["node_modules", "_jest"], + "include": ["**/*.stories.tsx", "**/*.test.tsx"] } diff --git a/site/webpack.common.ts b/site/webpack.common.ts index edf9baed3e..004afe96ae 100644 --- a/site/webpack.common.ts +++ b/site/webpack.common.ts @@ -30,7 +30,14 @@ export const commonWebpackConfig: Configuration = { rules: [ { test: /\.tsx?$/, - use: ["ts-loader"], + use: [ + { + loader: "ts-loader", + options: { + configFile: "tsconfig.prod.json", + }, + }, + ], exclude: [/node_modules/], }, ],