danilkinkin Posts

danilkinkin

•Created by danilkinkin on 11/5/2024 in #help

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, 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:

"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 as mod.ts in primitives root folder and import like that: 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

1 replies