Import normalization

[timkurvers]

Currently, this repo does not use file extensions when importing modules. It also uses index imports in various locations.

As outlined in differences between ESM and CJS in the Node.js documentation, Node will no longer allow extensionless imports nor use of a directory index for ESM modules.

Webpack – used in this repo – is a bit of a different beast and may support these features for some time to come. For the sake of consistency across repos we could opt to force webpack to also require extensions and disallow use of a directory index:

• resolve.enforceExtension
• resolve.mainFiles

This would require restructuring of nested modules. For example, refactoring gfx:

src/gfx
├── Color.mjs
├── Device
│   └── index.mjs
├── Screen
│   ├── Layer.mjs
│   └── index.mjs
├── Shader
│   ├── Registry.mjs
│   └── index.mjs
├── Texture
│   ├── Registry.mjs
│   └── index.mjs
...

Into:

src/gfx
├── Color.mjs
├── Device.mjs
├── Screen.mjs
├── ScreenLayer.mjs
├── ShaderRegistry.mjs
├── Shader.mjs
├── TextureRegistry.mjs
├── Texture.mjs
...

[fallenoak]

We can still keep the directories around with the new style of imports:

src/gfx/
├── Screen.mjs
├── Screen/
│   ├── Layer.mjs
...

We'd just need to re-export ScreenLayer from Screen.

On a related note: personally, I much prefer naming modules explicitly: Screen/Layer.mjs requires reading the path for context. Screen/ScreenLayer.mjs doesn't.

[timkurvers]

We can still keep the directories around with the new style of imports

Ah, interesting, hadn't considered that variant. Agree on explicitly naming modules.

How would you feel about:

src/gfx/screen/
├── Screen.mjs
├── ScreenLayer.mjs
...

I think getting rid of index where appropriate may be worth it regardless of whichever structure we land on.

[timkurvers]

Addressed through #44 by dropping (most) usage of index, and rather spelling out modules fully qualified.

Original example:

src/gfx
├── Color.mjs
├── Device
│   └── index.mjs
├── Screen
│   ├── Layer.mjs
│   └── index.mjs
├── Shader
│   ├── Registry.mjs
│   └── index.mjs
...

Is now:

src/gfx
├── Color.ts
├── Device.ts
├── Screen.ts
├── ScreenLayer.ts
├── ShaderRegistry.ts
├── Shader.ts
...