mirror of
https://github.com/modrinth/code.git
synced 2026-08-30 11:36:05 +00:00
refactor: clean up checklist structure + node renderer
This commit is contained in:
@@ -8,9 +8,9 @@ Prefer giving non-trivial components their own folder:
|
||||
components/
|
||||
└── analytics-chart/
|
||||
├── index.vue
|
||||
├── analytics-chart-header.vue
|
||||
├── analytics-chart-plot.vue
|
||||
├── analytics-chart-data.ts
|
||||
├── header.vue
|
||||
├── plot.vue
|
||||
├── data.ts
|
||||
└── use-analytics-chart.ts
|
||||
```
|
||||
|
||||
@@ -37,9 +37,9 @@ Keep files that only exist to support one component inside that component's fold
|
||||
```
|
||||
analytics-chart/
|
||||
├── index.vue
|
||||
├── analytics-chart-header.vue
|
||||
├── analytics-chart-plot.vue
|
||||
├── analytics-chart-tooltip.vue
|
||||
├── header.vue
|
||||
├── plot.vue
|
||||
├── tooltip.vue
|
||||
├── chart-ranges.ts
|
||||
└── use-chart-hover-state.ts
|
||||
```
|
||||
@@ -60,21 +60,10 @@ Local subcomponents should still have clear names that explain their relationshi
|
||||
```
|
||||
analytics-chart/
|
||||
├── index.vue
|
||||
├── analytics-chart-header.vue
|
||||
└── analytics-chart-plot.vue
|
||||
├── header.vue
|
||||
└── plot.vue
|
||||
```
|
||||
|
||||
Avoid vague names that make a local component look like a standalone public component:
|
||||
|
||||
```
|
||||
analytics-chart/
|
||||
├── index.vue
|
||||
├── events.vue
|
||||
└── header.vue
|
||||
```
|
||||
|
||||
If a file is local to `analytics-chart`, prefixing it with `analytics-chart-` makes that relationship clear when it appears in search results, editor tabs, and imports.
|
||||
|
||||
## Nesting
|
||||
|
||||
One level of nesting is usually enough.
|
||||
@@ -84,22 +73,22 @@ Prefer this:
|
||||
```
|
||||
analytics-chart/
|
||||
├── index.vue
|
||||
├── analytics-chart-header.vue
|
||||
├── analytics-chart-plot.vue
|
||||
├── header.vue
|
||||
├── plot.vue
|
||||
├── use-chart-hover-state.ts
|
||||
└── use-chart-selection.ts
|
||||
```
|
||||
|
||||
Avoid this unless a local area has become large enough to justify its own module boundary:
|
||||
Avoid this unless a local area has become large enough to justify its own module boundary, or for example it makes sense: e.g: for subpages
|
||||
|
||||
```
|
||||
analytics-chart/
|
||||
page-thing/
|
||||
├── index.vue
|
||||
├── header/
|
||||
├── subpage-1/
|
||||
│ └── index.vue
|
||||
└── plot/
|
||||
└── subpage-2/
|
||||
├── index.vue
|
||||
└── use-plot-state.ts
|
||||
└── use-something.ts
|
||||
```
|
||||
|
||||
Subfolders are fine when they reduce real complexity, but do not create a folder for every small subcomponent by default. Deep nesting makes the file tree harder to scan and often adds duplicated names without improving ownership.
|
||||
|
||||
Reference in New Issue
Block a user