chore(imports): Reorganize boilerplate imports and adhere to `import/order` linter rule #2958

markrickert · 2025-05-27T22:53:09Z

Description

I noticed the ignite imports growing inconsistent over time sometimes using the typescript @/* import path and other times using relative paths. This PR is an attempt to solve that problem by implementing and enforcing the import/order eslint rule.

This is a fairly large reorganization of the imports section of the boilerplate using the import/order eslint rule to separate and organize the import sections of the boilerplate codebase.

I moved the prettier, jest, and eslint configuration for the main ignite-cli out into their own files from inside the main package.json file. No changes to the actual configs
Added import/order eslint rule to group and sort import statements automatically for easier groking of the codebase.
We had a typescript "assets" alias that wasn't being used anywhere. Changed all relative paths to *../assets/* to use the typescript alias assets/*
Searched the boilerplate codebase for all relative paths going up one or more directories and converted them to use the @/* typescript alias. for instance, import { $styles } from "../theme" became import { $styles } from "@/theme". This was NOT a find/replace-all, but a careful and methodical replacement throughout the boilerplate, leaving some spots with the relative import where it made sense (mostly in the app.tsx and in the demo screen files referencing each other).
Updated documentation to be consistent with the imports for both assets and relative paths.

Checklist

README.md and other relevant documentation has been updated with my changes
I have manually tested this, including by generating a new app locally (see docs).

…ng of imports Also updates all assets to use their typescript alias instead of a relative path to the asset.

…e.json

Copilot

Pull Request Overview

This PR standardizes and reorganizes import statements across the boilerplate codebase by enforcing the import/order eslint rule and making import paths more consistent. Key changes include:

Converting relative paths to use absolute aliases (e.g., "@/theme" for theme and "assets/…" for images/icons).
Reordering and grouping import statements to comply with the new eslint configuration.
Extracting configuration items for prettier, jest, and eslint into dedicated files and updating related documentation.

Reviewed Changes

Copilot reviewed 76 out of 76 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
boilerplate/app/components/Toggle/Toggle.tsx	Updated import paths for theme and text components to absolute aliases.
boilerplate/app/components/Toggle/Switch.tsx	Reordered imports and applied absolute alias for theme-related imports.
boilerplate/app/components/Toggle/Radio.tsx	Updated import paths to use "@/theme" and reordered grouped imports.
boilerplate/app/components/Toggle/Checkbox.tsx	Converted relative theme import to "@/theme" and reorganized useAppTheme import.
boilerplate/app/components/TextField.tsx	Updated import paths for theme and text to use absolute aliases.
boilerplate/app/components/Text.tsx	Adjusted import order by moving React-specific imports to the top.
boilerplate/app/components/Text.test.tsx	Refactored import statement ordering for consistency.
boilerplate/app/components/Screen.tsx	Changed theme and safe area insets imports to use absolute paths.
boilerplate/app/components/ListView.tsx	Reordered imports ensuring isRTL is imported from "@/i18n".
boilerplate/app/components/ListItem.tsx	Updated import paths for theme, Icon, and Text components.
boilerplate/app/components/Icon.tsx	Standardized asset require paths to use the new assets alias.
boilerplate/app/components/Header.tsx	Reorganized and updated import paths for theme, safe area, Icon and Text.
boilerplate/app/components/EmptyState.tsx	Updated asset path for images and reordered component imports.
boilerplate/app/components/Card.tsx	Applied absolute alias for theme and reordered text imports.
boilerplate/app/components/Button.tsx	Converted theme import to "@/theme" and reorganized text imports.
boilerplate/app/app.tsx	Reordered key imports (initI18n, KeyboardProvider, useFonts) for consistency.
boilerplate/README.md	Updated asset paths in documentation to reflect the new aliasing.
boilerplate/.eslintrc.js	Adjusted error message and added import/order settings for consistency.
.prettierrc	New file added with updated formatting rules.
.eslintrc.js	New root ESLint configuration file with TypeScript settings.

frankcalise

Thanks for going through this carefully! Looks good to me

frankcalise · 2025-05-28T09:46:25Z

boilerplate/app/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./AutoImage"
 export * from "./Button"
 export * from "./Card"
+export * from "./EmptyState"


separate thought from this PR but maybe we drop barrel files? I think most of us have moved away from that pattern on projects - what are your thoughts there?

We moved away from barrel files on my current project and it reduced a lot of dependency cycles. Could be useful to check Ignite and see how many cycles are in there by default right now.

were ignored ;D https://github.com/infinitered/ignite/pull/2956/files#diff-1271a3bdea0a935e34e0c9cfda248039016cc9bd1e3090ccf0320c63f4a36994L9

So in essence we'd turn the imports from this:

import { Button, ButtonAccessoryProps, Card, EmptyState, Icon, ListView, Screen, Switch, Text, } from "@/components"

to this?

import { Button, ButtonAccessoryProps } from "@/components/Button" import { Card } from "@/components/Card" import { EmptyState } from "@/components/EmptyState" import { Icon } from "@/components/Icon" import { ListView } from "@/components/ListView" import { Screen } from "@/components/Screen" import { Switch } from "@/components/Toggle/Switch" import { Text } from "@/components/Text"

Currently reading up on this and will post more thoughts after i run some tests and analysis

+1 to using direct import from import aliases instead of barrel files reducing dependency cycles

I think the idea of managing a public exports boundary is better enforced using package.json#exports between package modules rather than trying to enforce module boundaries within the same workspace.

Alternatively, we are using dependency-cruiser on a client project to report dependency cycles outside of metro as a part of linting and it works well. The benefit of this approach is that we can keep using barrel files if desired and it will warn when it creates a dependency cycle.

Yeah wherever the components are imported they'd end up on separate lines and the index.ts in app/components gets deleted. But it also exists in other directories:

There's also one in the models, navigators and screens dir. Some export *s in theme.

And then we'd have to update the ignite/templates to not import from the barrel index as well.

Does that sound right, @coolsoftwaretyler ?

@joshuayoes I used madge to find the circular deps. I think adding a circular-deps test to the CI to make sure there are none is a good idea - #2959

markrickert · 2025-05-28T18:04:21Z

I've tested this extensively and will merge with [skip ci] so that this change is released when we merge #2938

…all changes Folowup from #2958 after it was merged.

infinitered-circleci · 2025-07-02T14:17:43Z

🎉 This PR is included in version 11.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

markrickert added 4 commits May 27, 2025 10:45

chore(imports): use @ imports more consitently throughought the headers

a59c462

chore(linter): add import/order eslint rule for better sorting/groupi…

c44ee2f

…ng of imports Also updates all assets to use their typescript alias instead of a relative path to the asset.

chore(devtools): move prettier, eslint, and jest config our of packag…

19771f8

…e.json

chore(docs): clean up docs for references to absolute aths in imports

6ece728

markrickert requested review from frankcalise, coolsoftwaretyler and Copilot May 27, 2025 22:53

Copilot AI reviewed May 27, 2025

View reviewed changes

frankcalise approved these changes May 28, 2025

View reviewed changes

chore(ts): update assets/ typescript alias to @assets/

a99bb4e

markrickert merged commit 9ded7ed into master May 28, 2025
3 checks passed

markrickert deleted the mrickert/imports-order-shortcuts branch May 28, 2025 18:04

markrickert added a commit that referenced this pull request May 28, 2025

chore(imports): Using the boilerplate eslint config requires a few sm…

b68c24b

…all changes Folowup from #2958 after it was merged.

markrickert mentioned this pull request Jun 3, 2025

Ignite v11 (Expo SDK 53) #2938

Merged

8 tasks

infinitered-circleci added the released label Jul 2, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(imports): Reorganize boilerplate imports and adhere to `import/order` linter rule #2958

chore(imports): Reorganize boilerplate imports and adhere to `import/order` linter rule #2958

Uh oh!

markrickert commented May 27, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

frankcalise left a comment

Uh oh!

frankcalise May 28, 2025

Uh oh!

coolsoftwaretyler May 28, 2025

Uh oh!

frankcalise May 28, 2025

Uh oh!

markrickert May 28, 2025

Uh oh!

joshuayoes May 28, 2025 •

edited

Loading

Uh oh!

joshuayoes May 28, 2025

Uh oh!

joshuayoes May 28, 2025

Uh oh!

frankcalise May 28, 2025

Uh oh!

markrickert May 28, 2025

Uh oh!

markrickert commented May 28, 2025

Uh oh!

Uh oh!

infinitered-circleci commented Jul 2, 2025

Uh oh!

Uh oh!

chore(imports): Reorganize boilerplate imports and adhere to import/order linter rule #2958

chore(imports): Reorganize boilerplate imports and adhere to import/order linter rule #2958

Uh oh!

Conversation

markrickert commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

frankcalise left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joshuayoes May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

markrickert commented May 28, 2025

Uh oh!

Uh oh!

infinitered-circleci commented Jul 2, 2025

Uh oh!

Uh oh!

chore(imports): Reorganize boilerplate imports and adhere to `import/order` linter rule #2958

chore(imports): Reorganize boilerplate imports and adhere to `import/order` linter rule #2958

markrickert commented May 27, 2025 •

edited

Loading

joshuayoes May 28, 2025 •

edited

Loading