Add no-shallow-imports rule #2408

joshuason · 2022-03-22T10:26:39Z

Prevent shallow (barrel) imports.

Why?

Obviates the need for tree shaking.

Todo:

Add more test cases
Fix commented-out test case (for full coverage)
Update examples within docs
Add line to README.md

…int-plugin-import into no-shallow-imports

joshuason · 2022-04-19T08:29:30Z

@ljharb Hey Jordan, just wondering if there's any feedback on this pull request. Cheers :)

ljharb

I don't think this should work by looking at the consuming side - i think it should work by looking at the exporting side.

ljharb · 2022-04-19T18:10:20Z

CHANGELOG.md

@@ -21,6 +21,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 - [`no-named-default`, `no-default-export`, `prefer-default-export`, `no-named-export`, `export`, `named`, `namespace`, `no-unused-modules`]: support arbitrary module namespace names ([#2358], thanks [@sosukesuzuki])
 - [`no-dynamic-require`]: support dynamic import with espree ([#2371], thanks [@sosukesuzuki])
 - [`no-relative-packages`]: add fixer ([#2381], thanks [@forivall])
+- Add [`no-shallow-imports`] rule


this line needs to be moved up to the "unreleased" section

Good point! :)

ljharb · 2022-04-19T18:11:09Z

docs/rules/no-shallow-imports.md

+import example2 from '..';                  // imports from /index.js
+import example2 from '../dir2';             // imports from /dir2/index.js
+import example2 from '../dir2/index';       // same as above but explicit
+```


Why are these incorrect? What if dir2/index has a single default export?

ljharb · 2022-04-19T18:11:22Z

docs/rules/no-shallow-imports.md

+```js
+//  index.test.js
+
+import * as index from './index';          // allowed


import * is a substandard pattern that should never be encouraged.

Should import * be disallowed by this rule?

Not necessarily, but the docs shouldn't suggest it.

I agree it shouldn't suggest it, but I think it is important for the docs to show that the pattern is still allowed with this rule - as users may assume that it is disallowed or vice versa. Maybe the docs should show it as correct but discouraged / not recommended?

Suggested change

import * as index from './index'; // allowed

import * as index from './index'; // allowed but discouraged (to disallow this, use the `import/no-namespace` rule)

Sure, that's a reasonable compromise.

joshuason · 2022-04-19T20:20:07Z

i think it should work by looking at the exporting side.

Hmmm, sorry, I don't understand what you mean by this. How would the exporting side preemptively know what's consuming it?

ljharb · 2022-04-19T20:25:09Z

It wouldn't. The problem is caused by a file re-exporting something.

If you don't re-export anything, it's impossible to have a "barrel" approach unless you put everything in the same file.

joshuason · 2022-04-19T22:40:36Z

Why is file re-exporting a bad thing? Should we be discouraging nested barrel exports?

ljharb · 2022-04-19T23:08:40Z

It's a bad thing because it creates an otherwise nonexistent need for tree-shaking - which due to the nature of JS, can only ever do a half-assed job at deleting unused code.

Yes, nobody should ever be using barrel exports, nested or otherwise, and everything should always be deep-imported from the most granular place it can be.

brunocrosier · 2022-05-16T19:40:25Z

src/rules/no-shallow-imports.js

+  }
+};
+
+const isCalledIndex = filename => filename.slice(0, 5) === 'index';


Suggested change

const isCalledIndex = filename => filename.slice(0, 5) === 'index';

const isCalledIndex = filename => filename.split('.')[0] === 'index';

Think this might be slightly better because otherwise:

isCalledIndex('index-lorem-ipsum.tsx')

will be true where as it should be false.

Suggested change

const isCalledIndex = filename => filename.slice(0, 5) === 'index';

const isCalledIndex = filename => path.basename(filename, path.extname(filename)) === 'index';

@ljharb path.basename(filename, path.extname(filename)) === 'index' would evaluate to false if the filename is index.test.js for example

filename.split('.')[0] === 'index' might be safer - what do you think?

Sure, that sounds good

brunocrosier · 2022-05-16T21:36:29Z

src/rules/no-shallow-imports.js

+const isShallowImport = (node, context) => {
+  const filenamePath = context.getFilename();
+  const sourcePath = node.source.value;
+  const segments = sourcePath.split('/');


Suggested change

const segments = sourcePath.split('/');

brunocrosier · 2022-05-16T21:36:54Z

src/rules/no-shallow-imports.js

+  const filenamePath = context.getFilename();
+  const sourcePath = node.source.value;
+  const segments = sourcePath.split('/');
+  const lastSegment = segments[segments.length - 1];


Suggested change

const lastSegment = segments[segments.length - 1];

const lastSegment = path.basename(filenamePath, path.extname(filenamePath));

joshuasonatvista and others added 5 commits March 22, 2022 23:22

add no-shallow-imports

385fb30

Merge branch 'main' into no-shallow-imports

22217de

Merge branch 'main' into no-shallow-imports

84e23da

update docs

75bc227

Merge branch 'no-shallow-imports' of https://github.com/joshuason/esl…

7ce4d2b

…int-plugin-import into no-shallow-imports

joshuason marked this pull request as ready for review April 1, 2022 08:45

Merge branch 'main' into no-shallow-imports

6a75b85

ljharb requested changes Apr 19, 2022

View reviewed changes

brunocrosier reviewed May 16, 2022

View reviewed changes

ljharb marked this pull request as draft August 27, 2022 06:02

jonioni mentioned this pull request May 8, 2023

[New] no-parent-barrel-import: Forbid import from parent barrel file #2779

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add no-shallow-imports rule #2408

Add no-shallow-imports rule #2408

joshuason commented Mar 22, 2022 •

edited

Loading

joshuason commented Apr 19, 2022

ljharb left a comment

ljharb Apr 19, 2022

joshuason Apr 19, 2022

ljharb Apr 19, 2022

ljharb Apr 19, 2022

brunocrosier May 16, 2022

ljharb May 16, 2022

brunocrosier May 17, 2022

ljharb Aug 27, 2022

joshuason commented Apr 19, 2022 •

edited

Loading

ljharb commented Apr 19, 2022

joshuason commented Apr 19, 2022

ljharb commented Apr 19, 2022

brunocrosier May 16, 2022

ljharb May 16, 2022

brunocrosier May 17, 2022

ljharb Aug 27, 2022

brunocrosier May 16, 2022

brunocrosier May 16, 2022

	import * as index from './index'; // allowed
	import * as index from './index'; // allowed but discouraged (to disallow this, use the `import/no-namespace` rule)

	const isCalledIndex = filename => filename.slice(0, 5) === 'index';
	const isCalledIndex = filename => filename.split('.')[0] === 'index';

	const isCalledIndex = filename => filename.slice(0, 5) === 'index';
	const isCalledIndex = filename => path.basename(filename, path.extname(filename)) === 'index';

	const lastSegment = segments[segments.length - 1];
	const lastSegment = path.basename(filenamePath, path.extname(filenamePath));

Add no-shallow-imports rule #2408

Are you sure you want to change the base?

Add no-shallow-imports rule #2408

Conversation

joshuason commented Mar 22, 2022 • edited Loading

joshuason commented Apr 19, 2022

ljharb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshuason commented Apr 19, 2022 • edited Loading

ljharb commented Apr 19, 2022

joshuason commented Apr 19, 2022

ljharb commented Apr 19, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshuason commented Mar 22, 2022 •

edited

Loading

joshuason commented Apr 19, 2022 •

edited

Loading