@wistia/eslint-config 0.29.0 → 0.30.0

package/configs/eslint/ssr-compatibility.cjs

@@ -0,0 +1,9 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  env: {
+    node: true,
+  },
+
+  extends: ['../../rules/eslint/ssr-compatibility.cjs'].map(require.resolve),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wistia/eslint-config",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "packageManager": "yarn@4.0.2",
   "description": "Wistia's ESLint configurations",
   "main": "react.js",
@@ -18,6 +18,7 @@
     "./node": "./configs/eslint/node.cjs",
     "./prettier": "./configs/eslint/prettier.cjs",
     "./react": "./configs/eslint/react.cjs",
+    "./ssr-compatibility": "./configs/eslint/ssr-compatibility.cjs",
     "./storybook": "./configs/eslint/storybook.cjs",
     "./strict": "./configs/eslint/strict.cjs",
     "./styled-components": "./configs/eslint/styled-components.cjs",
@@ -61,13 +62,16 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-no-snapshot-testing": "^1.0.61",
+    "eslint-plugin-no-typeof-window-undefined": "^0.0.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-observers": "^1.0.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks-ssr": "^0.1.5",
     "eslint-plugin-sonarjs": "^0.23.0",
+    "eslint-plugin-ssr-friendly": "^1.3.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-styled-components-a11y": "^2.1.31",
     "eslint-plugin-testing-library": "^6.2.0",

package/rules/eslint/ssr-compatibility.cjs

@@ -0,0 +1,43 @@
+// only add rules related to maintaining SSR compatibility
+// see:
+// - https://github.com/kopiro/eslint-plugin-ssr-friendly
+// - https://github.com/correttojs/eslint-plugin-react-hooks-ssr
+// - https://github.com/nirtamir2/eslint-plugin-no-typeof-window-undefined
+
+module.exports = {
+  plugins: [
+    'eslint-plugin-ssr-friendly',
+    'eslint-plugin-react-hooks-ssr',
+    'eslint-plugin-no-typeof-window-undefined',
+  ],
+
+  rules: {
+    // Disallow use of DOM globals in module and global scope, as this will break any import/require in a NodeJS environment.
+    // https://github.com/kopiro/eslint-plugin-ssr-friendly#no-dom-globals-in-module-scope
+    'ssr-friendly/no-dom-globals-in-module-scope': 'error',
+
+    // Disallow use of DOM globals in class constructors, as this will break SSR if you're instantiating this class as singleton or you're rendering this component.
+    // https://github.com/kopiro/eslint-plugin-ssr-friendly#no-dom-globals-in-constructor
+    'ssr-friendly/no-dom-globals-in-constructor': 'error',
+
+    // Disallow use of DOM globals in render() method of a React class-component, as this will break SSR if you're rendering this component.
+    // https://github.com/kopiro/eslint-plugin-ssr-friendly#no-dom-globals-in-react-cc-render
+    'ssr-friendly/no-dom-globals-in-react-cc-render': 'error',
+
+    // Disallow use of DOM globals in the render-cycle of a React FC, as this will break SSR if you're rendering this component.
+    // https://github.com/kopiro/eslint-plugin-ssr-friendly#no-dom-globals-in-react-fc
+    'ssr-friendly/no-dom-globals-in-react-fc': 'error',
+
+    // forbid DOM globals within react server side rendering
+    // a global within `useEffect` or custom hook is allowed
+    // a global within a function prefixed by `async` (eg. `asyncMyFunc`) is allowed
+    // a global within a `useState`, `useReducer` and `useMemo` callback is forbidden
+    // a global within a React `Component` is forbidden
+    'react-hooks-ssr/react-hooks-global-ssr': 'error',
+
+    // avoid checking for window since it is supported by Deno
+    // prefer `typeof document === "undefined"` instead
+    // https://github.com/nirtamir2/eslint-plugin-no-typeof-window-undefined#no-typeof-window-undefined
+    'no-typeof-window-undefined/no-typeof-window-undefined': 'error',
+  },
+};