Conversation
… manual migration
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
brandyscarney
left a comment
brandyscarney
left a comment
There was a problem hiding this comment.
Looking really good! Excited for this.
| * We pin the exact version rather than the `dev` dist-tag because that tag is | ||
| * shared with `main`'s dev builds and moves whenever any dev build publishes. | ||
| * | ||
| * Swap this for `^9.0.0` (or `latest`) at GA. |
There was a problem hiding this comment.
| * Swap this for `^9.0.0` (or `latest`) at GA. | |
| * TODO(FW-7579): Swap this for `^9.0.0` (or `latest`) at GA. |
Can we add the Jira ticket here so we don't forget this. Also which one should it be 9 or latest?
| * v9 is not yet published under the `latest` dist-tag, so a caret range like | ||
| * `^9.0.0` will not resolve. Until v9 ships, this pins a specific `major-9.0` | ||
| * dev build. It is versioned `8.8.x-dev` (not `9.0.0-dev`) because the | ||
| * `major-9.0` branch has not bumped its base version yet, but the code is v9. | ||
| * | ||
| * We pin the exact version rather than the `dev` dist-tag because that tag is | ||
| * shared with `main`'s dev builds and moves whenever any dev build publishes. |
There was a problem hiding this comment.
Do we need this explanation? Is it expected to be removed when v9 is shipped?
| * | ||
| * See https://ionicframework.com/docs/updating/9-0#css-imports | ||
| */ | ||
| const TILDE_IONIC_IMPORT = /(@import\s+['"])~(@ionic\/angular\/)/g; |
There was a problem hiding this comment.
This checks for @import but they could be using @use with *.scss: https://github.com/ionic-team/ionic-conference-app/blob/3732f1670c85c54ab4647a2d80438792e833b1da/src/global.scss#L12-L25
Should we check for that too?
| describe('angular-css-tilde', () => { | ||
| it('removes the ~ prefix from an @ionic/angular css import', () => { | ||
| const ctx = createInMemoryContext({ | ||
| 'src/global.scss': `@import '~@ionic/angular/css/core.css';\n`, |
There was a problem hiding this comment.
Should we also test for leading css files?
| 'src/global.scss': `@import '~@ionic/angular/css/core.css';\n`, | |
| 'src/global.css': `@import '~@ionic/angular/css/core.css';\n`, |
| }); | ||
|
|
||
| it('leaves autocorrect="on" untouched (behavior unchanged in v9)', () => { | ||
| const input = `<ion-input autocorrect="on"></ion-input>\n`; |
There was a problem hiding this comment.
This is not right, is it? Autocorrect should change from this:
autocorrect="on"to :
[autocorrect]="true" (Angular)autocorrect={true} (React):autocorrect="true" (Vue).See https://github.com/ionic-team/ionic-framework/blob/major-9.0/BREAKING.md#input
2 participants
Issue number: internal
What is the current behavior?
There's no tooling to help apps move across a major version of Ionic. Every breaking change in the v9 upgrade guide has to be found and applied by hand, across Angular, React, and Vue, with no way to tell which ones a given app is even affected by.
What is the new behavior?
Adds a new
@ionic/migratepackage: a standalone tool that scans an app, applies the breaking changes it can make safely, and prints a checklist of the ones that need manual rework, each with a file, line, and docs link. It detects the installed framework and major frompackage.jsonand selects only the migrations whose version range applies, so a project already on the target major does nothing.Auto-fixes cover the Angular import and package bumps, CSS
~prefix removal, standalone zoneless bootstrap, React Router v6 route rewrites and dep bumps, Vue Router 5 / Vue 3.5 bumps, andautocorrect="off". Report-only findings cover the rest (NgModule zoneless, legacy picker,ion-img,ion-navrouter removal, RR6 semantic cases, Vue guardnext()). TypeScript and TSX edits go throughts-morph; HTML and Vue templates use a quote-aware scanner so string literals and comments are left alone. Changed files are run through the project's own Prettier so the AST edits land as clean diffs.The runner is single-shot by design (a project migrator isn't inherently idempotent - some cannot be due to the nature of their change, like the Angular import changes) and guards re-runs two ways: the version gate skips work once the
@ionic/*bump has landed, andsave()buffers text writes so the gate-closingpackage.jsonbump only hits disk if every migration and the ts-morph save succeed. It won't write to a dirty working tree or directory without git unless--forceis passed, so git can be used to undo changes in case of emergency.Does this introduce a breaking change?
Other information
Migrations are registered in
src/migrations/index.ts; adding one is a new file undersrc/migrations/v<major>/plus a fixture-backed test. The engine handles selection, ordering, git safety, formatting, and reporting.Several new tests were added for migrations and a CI workflow was added that runs migration tests only when migration-related files were changed. When this is merged fully to main we can also make that check required to prevent breaking migration changes.