feat: fsd layer 모듈 상호작용 규칙 작성

Author: jaem1n207

.eslintrc

@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react"],
+  "plugins": ["@typescript-eslint", "react", "fsd-internal"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -35,5 +35,11 @@
     "react/jsx-uses-react": "off",
     "react/no-unknown-property": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "fsd-internal/layer-imports": [
+      "error",
+      {
+        "alias": "~",
+      },
+    ],
   },
 }

eslint/fsd/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+  rules: {
+    'layer-imports': require('./layer-imports'),
+  },
+};

eslint/fsd/layer-imports.js

@@ -0,0 +1,75 @@
+'use strict';
+
+/**
+ * Get the current file layer.
+ *
+ * @example
+ * ```js
+ * getCurrentFileLayer('src/shared/ui/button.tsx');
+ * // => 'shared'
+ *
+ * getCurrentFileLayer('src/entities/theme/model/use-dark.ts');
+ * // => 'entities'
+ * ```
+ */
+function getCurrentFileLayer(currentFilePath) {
+  const normalizedPath = currentFilePath.replace(/\\/g, '/');
+  const projectPath = normalizedPath?.split('src')[1];
+  const segments = projectPath?.split('/');
+
+  return segments?.[1];
+}
+
+exports.create = function create(context) {
+  const { alias = '' } = context.options[0] ?? {};
+
+  const layers = {
+    background: ['background', 'widgets', 'features', 'entities', 'shared'],
+    contentScripts: ['contentScripts', 'widgets', 'features', 'entities', 'shared'],
+    options: ['options', 'widgets', 'features', 'entities', 'shared'],
+    widgets: ['features', 'entities', 'shared'],
+    features: ['entities', 'shared'],
+    entities: ['entities', 'shared'],
+    shared: ['shared'],
+  };
+
+  const availableLayers = Object.keys(layers);
+
+  const getImportLayer = (value) => {
+    const importPath = alias ? value.replace(new RegExp(`^${alias}/`), '') : value;
+    const segments = importPath.split('/');
+
+    return segments.find((segment) => availableLayers.includes(segment));
+  };
+
+  /**
+   * @example
+   * // src/shared/ui/button.tsx
+   * import a from '../lib/env';
+   * import a1 from '~/shared/lib/env';
+   * import b from './label';
+   * import b1 from '~/shared/ui/label';
+   * import z from '../../entities/...'; // trigger error!
+   * import z1 from '~/entities/...'; // trigger error!
+   */
+  return {
+    ImportDeclaration(node) {
+      const { value } = node.source;
+      const currentFileLayer = getCurrentFileLayer(context.getFilename());
+      const importLayer = getImportLayer(value);
+
+      if (!importLayer) {
+        return;
+      }
+
+      const isAllowed = layers[currentFileLayer].includes(importLayer);
+
+      if (!isAllowed) {
+        context.report({
+          node,
+          message: `Importing from "${importLayer}" is not allowed in the current layer "${currentFileLayer}".`,
+        });
+      }
+    },
+  };
+};

package.json

@@ -86,6 +86,7 @@
     "esbuild": "^0.20.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-fsd-internal": "link:./eslint/fsd",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-vitest": "^0.4.1",