flarum / flarum/issue-archive

Use Webpack path resolving for namespaced imports within core

Open
#55 0 comments 1 reaction 1 assignee View on GitHub

@davwheat is already working on this.

Since Jul 30, 2021.

needs-discussion type/cleanup
Dominant language
No language data
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

## Feature Request

### Is your feature request related to a problem? Please describe.
Right now, core uses loads of relative imports, consisting of paths such as `../../common/components/Button`. These are long and result in less readable import paths. This isn't an issue, per sé, but it's more about improving the developer experience so we don't need to try and count how many directories up we need to go when writing imports.

Once we end up with large chains of imports, relative paths get more complicated, as we begin combining imports within the file's namespace (e.g. admin imports in an admin file) as well as common imports:

```ts
import DashboardWidget from './DashboardWidget';
import listItems from '../../common/helpers/listItems';
import ItemList from '../../common/utils/ItemList';
import Dropdown from '../../common/components/Dropdown';
import Button from '../../common/components/Button';
import LoadingModal from './LoadingModal';
```

### Describe the solution you'd like
Webpack (and Typescript) offer path resolution. We currently use this in our tsconfig for extensions to tell them that imports to `flarum/*` are typed by `dist-typings` in their vendor directory.

We can also use this within core itself to help us with resolving imports to each of our current namespaces. The macro-standard that most projects seem to take is prefixing resolved paths with a special character, such as `@`, to indicate that they're not real modules (...even though `@` can be present in real module names).

### Examples

| Old | Suggested |
|---|---|
|`../../common/components/Button`|`@common/components/Button`|
|`../../../forum/app`|`@forum/app`|

If the idea of `@common`, `@forum` and `@admin` don't tickle our fancy, we can also choose to use the same paths that extensions use within core for simplicity:

| Old | Suggested 2 |
|---|---|
|`../../common/components/Button`|`flarum/common/components/Button`|
|`../../../forum/app`|`flarum/forum/app`|

Taking our example from earlier:

```ts
import DashboardWidget from '@admin/components/DashboardWidget';
import listItems from '@common/helpers/listItems';
import ItemList from '@common/utils/ItemList';
import Dropdown from '@common/components/Dropdown';
import Button from '@common/components/Button';
import LoadingModal from '@admin/components/LoadingModal';
```

or...

```ts
import DashboardWidget from 'flarum/admin/components/DashboardWidget';
import listItems from 'flarum/common/helpers/listItems';
import ItemList from 'flarum/common/utils/ItemList';
import Dropdown from 'flarum/common/components/Dropdown';
import Button from 'flarum/common/components/Button';
import LoadingModal from 'flarum/admin/components/LoadingModal';
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.