DEV Community

loading...

Nxtend Nx 11 Support and Plugin Updates

Devin Shoemaker
Software Developer @ionicframework / Nx Plugin Author / Previous ModChat Podcast Co-host / Nx Plugins: nxtend.dev
Originally published at nxtend.dev ・3 min read

The Nxtend plugins have been updated to support Nx 11, and with that are coming some changes. Nxtend plugin versions will now be more closely aligned with Nx, and the Ionic and Capacitor plugins will be more closely aligned with their respective projects. A lot of work have gone into the updates of each of these plugins. Features have been added, bugs have been fixed, and there were even some breaking changes. However, I think that Nxtend is the most sustainable and maintanable than ever.

Read more for details on updates and upgrades...

Ionic React

This plugin has some more dramatic changes compared to the rest. I have determined that some changes needed to be made to ensure the longevity of this project, and that resulted in the removal of some functionality. This is a breaking change in terms of interfacing with the plugin schematics, but it should not break existing applications. In this case, a number of options have been removed from the application schematic.

This includes:

--classComponent
--style
--pascalCaseComponent
--skipFromat
--linter
--js
Enter fullscreen mode Exit fullscreen mode

In exchange, this plugin now supports generating several of the official starter templates, such as tabs and sidemenu. These changes more closely align this plugin with the Ionic CLI and will make the project vastly more maintainable. In the future I want to support more schematics such as libraries, pages, and more, and I want to be able add these enhancements in a scalable manner.

I hope the users of this plugin will understand this decision. Removing functionality is never a good user experience, but I believe that this change will pay dividends in the future.

Features

  • add additional Ionic starter templates to application schematic
  • support custom Nx layouts
  • update Ionic to 5.5.2

Bug Fixes

  • fix generating an application in a sub-directory with Capacitor enabled

BREAKING CHANGES

  • remove classComponent option from application schematic (now defaults to functional components)
  • remove style option from the application schematic (now defaults to CSS)
  • remove pascalCaseComponent option from the application schematic (now defaults to true)
  • remove skipFormat option from the application schematic (now defaults to false)
  • remove linter option from the application schematic (now defaults to ESLint)
  • remove js option from the application schematic (now defaults to true)

Ionic Angular

Features

  • Nx 11 support (Nx 11 now required)
  • update Ionic to 5.5.2
  • add additional Ionic starter templates to application schematic
  • support none as a unit test and e2e config for the application schematic

Bug Fixes

  • fix generating an application in a sub-directory with Capacitor enabled

Capacitor

Features

  • Nx 11 support (Nx 11 now required)
  • update Capacitor to 2.4.5
  • added cap builder for a more generic interface with the Capacitor CLI

Upgrading

If you are utilizing the @nxtend/capacitor plugin then you should upgrade this first:

nx migrate @nxtend/capacitor

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install
Enter fullscreen mode Exit fullscreen mode

Next, you can upgrade the @nxtend/ionic-react plugin:

nx migrate @nxtend/ionic-react

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install
Enter fullscreen mode Exit fullscreen mode

Or the @nxtend/ionic-angular plugin:

nx migrate @nxtend/ionic-react

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install
Enter fullscreen mode Exit fullscreen mode

For information on upgrading the plugin, visit the nxtend upgrades documentation.

Discussion (0)