Use absolute import paths (/foo) instead of relative (../../foo) ones

[tofumatt]

This started in https://wordpress.slack.com/archives/C02QB2JS7/p1531255855000083

We use relative import paths (../../foo) all over the place, but I think it makes it really difficult to reason about where the code is in the project and it makes it harder to open that file because you can't just copy the path and open it in your editor. The only real benefit is that it makes imports within a module self-contained, but as refactors happen less than wanting to open a related file, I think that's a weak argument for keeping relative imports. I find the cognitive overhead of stepping through a number of ../s to be high as well. Take, for instance, something like: https://github.com/WordPress/gutenberg/pull/8188/files#diff-4651e808991ae4dc4bd68adfb417d888R11

I think we should be using absolute import paths everywhere.

[sarahmonster]

As a not-developer, I would like to +100 this. It's especially confusing when sometimes there are multiple directories with the same name (components, for example.)

[markjaquith]

And a more extreme example: ../../../../../ (imports from a Jest test). I struggle to even count how many upward traversals that is.

[nerrad]

This issue has been open for a while, what next steps are needed to move it forward? Is it still an issue needing resolved?

On the surface, here's some thoughts on what would need to happen:

• bring it up in a #core-js or #core-editor meeting to decide if this is something the project wants to adopt. If the decision is "yes"...
• identify what contributor docs need updated.
• identify if there are any es-lint rules needing updated.
• Would webpack config need updated to set what is the "root" for imports?
• Would Jest config need updated - likely this would be an override for the GB project only or would configs wp-scripts come out of the box with absolute import support?

Some considerations:

• There are a LOT more packages since this issue was created. How feasible will it be to modify all the files to use absolute imports? Is the time investment worth it?
• GB has a complicated build process, how will absolute imports be resolved in the webpack config? Is this impacted by the Lerna mono repo build process at all?

Absolute imports are attractive to me to get rid of the ../ hell and guesswork. However I'm not sure its worth the effort now (especially when it's been nearly a year since this issue opened without much action).

[gziolo]

And a more extreme example: ../../../../../ (imports from a Jest test). I struggle to even count how many upward traversals that is.

This is no longer an issue since Enzyme was upgraded to support React 16.3.

There are still 2 places when files are imported by traversing to the top of repository and down:

gutenberg/packages/components/src/disabled/test/index.js

Line 17 in dc03691

const focus = require.requireActual( '../../../../dom/src' ).focus;

gutenberg/test/unit/__mocks__/@wordpress/block-library.js

Line 5 in cc5bf5c

export * from '../../../../packages/block-library/src';

Otherwise, all imports are within the package. I would personally check whether we can improve something for those 2 occurrences and close this issue.

[aduth]

I would personally check whether we can improve something for those 2 occurrences and close this issue.

I agree. The problem in these cases is that we should be traversing outside a package's own files. Within the context of a package, there should not be much folder depth. Arguably, the relative traversal can serve as a deterrent in order to encourage a flatter folder structure.