# Imports

Path aliases are useful for avoiding long relative import paths and improving the readability of our import statements.

We use the following aliases throughout the entire application:

• @core
  • Contents: code components used in core functionality of the app, e.g. routing, internationalization (i18n), notifications
  • Location: packages/shared/lib/core/
• @common
  • Contents: code components used commonly throughout the application, e.g. functionality for sending transactions, stores for a profile
  • Location: packages/shared/lib/common/
• @components
  • Contents: re-usable Svelte UI components used inside of the route components, e.g. buttons, text, popups
  • Location: packages/shared/components/

Bad

import { isStrongholdLocked } from '../../../lib/stronghold/stores'

Good

import { isStrongholdLocked } from '@common/stronghold'

With clean and easy to read import statements you can quickly see the dependencies of the current code. Make sure you apply following good practices for import statements:

• There are no unused imports
• Each import group must be separated by a blank line
• An import group's import statements must be sorted alphabetically according to their path alias
• An import statement's individual imports must be sorted alphabetically according to their variable name
• All import groups must adhere to this order:
  • Svelte library modules (e.g. import { get } from 'svelte/store')
  • Third-party imports (e.g. import { Converter } from '@iota/client')
  • Svelte UI components (e.g. import { Button, Text } from '@components')
  • TypeScript core modules (e.g. import { setRoute } from @core/router)
  • TypeScript common modules (e.g. import { isStrongholdLocked } from '@common/stronghold/stores')

ℹ️ To help enforce this import strategy, we should look at something like eslint-plugin-import.

Bad

import { onMount } from 'svelte'
import { get } from 'svelte/store'
import { Button, Spinner, Text } from '@components'
import { Locale } from '@core/i18n'
import { Node, NodeInfo } from '@common/client'
import { closePopup } from '@core/popup'
import { asyncGetNodeInfo, wallet } from '@common/wallet'
import { showAppNotification } from '@core/notifications'
import { setClipboard } from '@common/utils'
import { cleanNodeAuth } from '@common/network'
import { Converter } from '@iota/client'

Good

import { onMount } from 'svelte'
import { get } from 'svelte/store'

import { Converter } from '@iota/client'

import { Button, Spinner, Text } from '@components'

import { Locale } from '@core/i18n'
import { showAppNotification } from '@core/notifications'
import { closePopup } from '@core/popup'

import { Node, NodeInfo } from '@common/client'
import { cleanNodeAuth } from '@common/network'
import { setClipboard } from '@common/utils'
import { asyncGetNodeInfo, wallet } from '@common/wallet'