DenoDDeno
Powered by
danilkinkinD
Deno•17mo ago
danilkinkin

Best practice to import internal components

Many examples show that importing with file extensions is simple, but these todo examples are not connected to real-life scenarios. In reality, components are not just a single file (they include styles, tests, and the component itself), and you typically store each component in its own folder. This leads to duplicated imports like
Button/Button.tsx
Button/Button.tsx
, which look messy.

For example, my project structure is as follows:
/
└── src/                
    ├── components/            
    │   └── primitives/   
    │       └── Button/ 
    │           └── Button.tsx
    └── App.tsx    
/
└── src/                
    ├── components/            
    │   └── primitives/   
    │       └── Button/ 
    │           └── Button.tsx
    └── App.tsx    


I also have alias paths for imports in
deno.json
deno.json
:
"imports": {
    "@components": "./src/components/"
}
"imports": {
    "@components": "./src/components/"
}


App.tsx:
// This import is required by Deno, but it feels overly complicated
import { Button } from "@components/primitives/Button/Button.tsx";

...
// This import is required by Deno, but it feels overly complicated
import { Button } from "@components/primitives/Button/Button.tsx";

...


Of course, we can use
barrel export
barrel export
as
mod.ts
mod.ts
in
primitives
primitives
root folder and import like that:
import { Button } from "@components/primitives/mod.ts";
import { Button } from "@components/primitives/mod.ts";
, it's looks better, but harder to maintain and barrel files also not best practice

I've tried researching best practices for managing imports in large projects but haven’t found clear guidance.

Can you help explain the right approach? How you organize imports in your projects?

P.S. I don't understand why Deno doesn’t support index files, as browsers work perfectly with index.html
Deno banner
DenoJoin
Chat about Deno, a modern runtime for JavaScript and TypeScript.
20,934Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?

Similar Threads

What is the best way to mock an internal import?
robbieRrobbie / help
16mo ago
Best Practice for Windows Service Watchdog (GUI Apps)?
LauwismeLLauwisme / help
13mo ago
what’s the current best practice for bundling?
pixeleetPpixeleet / help
3y ago