FlowFuse / FlowFuse/flowfuse

Standardise Import Aliases for Components, Stores, and Composables

Open
#6,812 0 comments 0 reactions 1 assignee Claimed by @n-lark View on GitHub
task
Dominant language
JavaScript
Stars
400
Forks
89
Avg merge
1d 21h
Merged PRs (30d)
146

Description

# Import Alias (`@/`) Adoption

## Goal

Frontend code imports via the `@/` alias (`frontend/src`) instead of deep relative paths (`../../`).

## Already in place

- `@` alias configured in `config/webpack.config.js` and `config/vitest.config.ts`.
- Node-resolution lint rules (`import/no-unresolved`, `n/no-missing-import`, `n/no-missing-require`) disabled for `frontend/**` in `.eslintrc`.
- `frontend/jsconfig.json` maps `@/*` for IDE click-through.

## Current state

~53 of ~666 frontend files use `@/`; ~341 still use deep relative imports. New files (incl. recent Pinia stores and all composables) are still being written with relative paths.

## Work needed

1. **New code uses `@/`.** All new stores, composables, and components import via `@/` from creation. Several recent stores (`ux-navigation.js`, `ux-tours.js`, `product-expert.js`) and all composables currently do not.
2. **Document the convention.** Add a short note (CONTRIBUTING or here) that new frontend code must use `@/`, not relative paths.
3. **Migrate incrementally.** Convert files to `@/` as they're touched for other work — no mass-rename commits.
4. **Enforce (optional).** Add a `no-restricted-syntax` lint `warn` flagging new deep relative imports once adoption is broad enough.

## Done when

- New frontend files use `@/`.
- Convention is documented.
- CI lint passes with no alias errors.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.