import-js / import-js/eslint-plugin-import

Feature Suggestion: Folder encapsulation determined by `index/exports.js`

Open
#2,565 21 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
5.9k
Forks
1.5k
PR merge metrics
No merged PRs in 30d

Description

The problem

A popular pattern is to include an index.js in the folder, that re-exports entities from the folder. The developer declares which entities he would like to expose out of that folder. But in practice this intention isn't enforced, and index.js doesn't create encapsulation. Objects that are exported from another file in the folder could be imported in the entire project. Objects that are reexported from index.js can now be imported from both the index file, and the original file.

On the other hand plugin's no-restricted-imports rule can promote folder encapsulation, But requires special configuration. index.js for exports is such a common pattern, that configuring a boundary for each file is simply not practical.

Proposal

  • User can opt in to a index.js|exports.js folder encapsulation feature.
  • Existence of files by that name will create an encapsulated folder.
Examples of proper and improper use of this rule

Imagine a project with the following file structure:

src
   domains 
       posts 
            index.js 
            postsUtils 
            components 
                 PostBanner 
                 PostsList 
   pages
       Some Page 

And the following index.js

// src/domains/posts/index.js 
export PostBanner from "./components/PostBanner 
export PostsList from "./components/PostsList

Example of proper use of this rule

// src/pages/SomePage
import PostBanner from "../domains/Posts" 
// src/domains/components/postsList
import PostBanner from "./PostBanner" 

Example of improper use of this rule

// src/pages/SomePage
import PostBanner from "../domains/Posts/components/PostBanner" 
// src/pages/SomePage
import PostBanner from "../domains/Posts/postsUtils" 

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing no-restricted-imports rule and how this plugin resolves imports. Define the opt-in behavior for folders containing index.js or exports.js, then use the proper and improper import examples in the issue to establish the expected validation coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.