The Ionic team is looking forward to the New Year and welcoming in 2023! To get the party started, we’re giving our Ionic account login and signup experience a totally new look.

Starting today, the login and signup pages will be customized based on which products you’re accessing—whether it’s building apps with Ionic, creating micro frontends with Portals, or automating app delivery with Appflow.  Also, the location of both the login and signup pages will be moving from ionicframework.com to ionic.io.

To make sure you can still access all of your favorite Ionic products, here’s everything you need to know:

• We gave the login page a crisp new look for 2023
• The login page for accessing your Ionic account can now be found at ionic.io/login
• Users navigating to the old sign-in location (ionicframework.com/login) will automatically be redirected to ionic.io/login
• You’ll see a different look and feel depending on where you’re signing in from

• You may wish to update any bookmarks you may have for the login page
• If you have whitelisted the ionicframework.com domain, be sure to also add ionic.io so you can continue accessing Ionic’s cloud services
• When logging into the new login page for the first time, you will need to re-enter your user credentials (username and password)
• If you are using a password manager, you should update your saved login information so that it’s associated with the new login URL

We hope you all enjoy the new page. If you have any feedback, comments, or suggestions, please reach out to us on Discord or via email at This email address is being protected from spambots. You need JavaScript enabled to view it. – We love to hear from you!

The post A Fresh New Way To Access Your Ionic Account appeared first on Ionic Blog.

Hey folks, hope you are all doing well around this time of the year. We’ve been hard at work over the past few months working on the next major version of Stencil, the web component compiler. Today, I’m thrilled to share that Stencil 3.0 Beta is available for testing in your component libraries. Let’s dive in a little bit and understand what has gone into this release.

To update to the latest version, you can simply install the latest version from npm:

npm install @stencil/core@v3-next

Then follow the migration guide to update your project. Let’s take a look at a few changes in this release to get a better understanding of why they were made.

Ch-ch-ch-Changes

One of the main goals of this major version is to create a new base for what we want Stencil to be in future releases. This means making a few breaking changes to keep up with the ecosystem. For example, we’ve dropped support for Node 12 and require at least Node 14.

In addition to this, we’ve also deprecated support for Safari 10 and IE 11. Any flags used to add support for older Safari and IE have been prepended with __deprecated__ and will be eventually removed in future major versions. These flags include:

• __deprecated__dynamicImportShim
• __deprecated__cssVarsShim
• __deprecated__shadowDomShim
• __deprecated__safari10

Following an RFC, the dist-custom-elements-bundle output target has been removed in 3.0. Users should migrate to the `dist-custom-elements` output target.

By default, dist-custom-elements does not automatically define all a project’s components with the CustomElementsRegistry. This allows for better treeshaking and smaller bundle sizes.

For teams that need to migrate quickly to dist-custom-elements, the following configuration should be close to a drop-in replacement for dist-custom-elements-bundle:

// stencil.config.ts

import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
-    {
-      type: 'dist-custom-elements-bundle',
-      // additional configuration
-    },
+    {
+      type: 'dist-custom-elements',
+      customElementsExportBehavior: 'bundle'
+    },
    // ...
  ],
  // ...
};

There are a lot more changes in Stencil 3.0 that folks should be aware of, and we’ve created a full migration guide for folks to reference while they update their component setups. The migration guide can be found here.

Team Updates

Part of the planning process for this major release has also been rebuilding the Stencil team and understanding the intricacies of the Stencil compiler. With this newer version of the team, we’ve spent a lot of time understanding how the compiler works, and sharing the knowledge of the internals amongst the team. This way, the team can move forward making changes with confidence and the knowledge of how Stencil works is not limited to a single person. This has let us have a deeper understanding of the entire compiler and be prepared for new people to join the team.

What’s Next

With this beta, we’re signaling to the community that we’re ready for you all to begin testing this release and to file bug reports. We do understand that given the time frame and holiday season, not everyone will be able to test against their production setup, so we expect beta to last a bit longer than usual. If you happen to run into any issues, or have any questions regarding the update, please let us know and open an issue on GitHub!

The post Announcing Stencil v3.0 Beta appeared first on Ionic Blog.

Our last Ionic Show of the year was all about looking back at what we’ve accomplished together, as well as looking forward to what’s to come. From updates to what’s next as Ionic joins forces with OutSystems to our latest venture to colonize the moon (just kidding), this Ionic Show covered it all!

Here’s what you may have missed:

A stroll down memory lane

Max, Ben, and Mike looked back on all the team has accomplished in 2022. 

A booming community

There’s no better way to kick off an Ionic show than by talking about our awesome community (5:02). We’ve been working hard to meet the community where they’re at- we even created a new community Discord, which has grown to thousands of active users. It’s proven to be an invaluable way to connect with you all, source new ideas, and help fix issues.

Framework 6

We’ve done over 60 releases of Framework v6 this year, and the team talked all things Framework around the 10:00 mark. Each release is chock full of new features, fixes, and updates (many of which come from the community), which is helping propel Framework forward. Check out the latest on Framework on our shiny new blog!

Cap updates and plugins galore

Around 13:55 the team chatted about all things Capacitor- from Capacitor 4’s release earlier this year to support new app store policies and ultimately set us up for the next major version of Capacitor. We’re also working on making it easier than ever to integrate your favorite plugins (hello, Google Maps)! There’s even a seamless way to migrate your plugins from Capacitor v3 to v4 thanks to community member Masahiko Sakakibara. We’re continually working to integrate more and more community requests into our products, and we’re excited about what’s to come.

VS Code Extension

Around 22 minutes in, Max talked about the VS Code extension, which saw some exciting upgrades this year. Ionic team member Damian has been hard at work talking with tons of enterprise customers. He’s taken all the issues that people typically run into when building JavaScript, Ionic, and Capacitor projects, and turned it into tooling that makes your life way easier. For instance – one of the updates helps you manage dependencies – major win.

With 86,000 installs and tons of 5 star reviews, lots of folks agree! 

Appflow keeps getting better

Our team has also been working tirelessly to improve Appflow, our mobile CI/CD solution (and we talked about it around the 27:09 mark). From build stack updates to keeping up with app store changes, we’re committed to keeping our customers up to date and building seamlessly. We’ve made numerous UI improvements for usability, and we released Appflow for React Native! Appflow is even SOC 2 Type 1 compliant now, showing our continued commitment to keeping our customers’ data totally secure so that they can build with confidence. We’ll also be expanding Appflow’s capabilities – including support for traditional iOS and Android slated for early 2023.

Portals everywhere

Around 29:51, the team talked about Portals, Ionic’s mobile micro frontends solution. This year, we introduced Portals for Capacitor as well as support for React Native. We’ve heard some requests for Flutter support as well, so we’re asking the community to help us gauge that demand. If you’re interested in being a tester/giving us feedback, please get in touch! If you’re interested in learning more about micro frontends and what they can mean for your business, join us for the first ever Micro Frontends Summit, coming in January 2023!

Trapeze

We released a major open source project – Trapeze, earlier this year, which the team talks about around the 33 minute mark. Born out of real customer need, teams came to us saying that they were putting apps into CI/CD workflows but needed to make regular changes to their project configuration. Trapeze enables teams without serious native knowledge to do just that. Trapeze abstracts away the arduous configuration tasks that many face when building native iOS and Android apps into a single YAML file. Users of all the most popular mobile frameworks are set up for success with a toolbox packed with the ability to write configuration scripts with the Trapeze API, inject environment variables for easy templating and streamlined customization, and automate the processes with their CI/CD workflow. 

What’s next?

The team then looked toward the future starting around 37 minutes in. 

A new version of Stencil is in the works! We’ve gone through a major Stencil rebuild internally, and a lot of that will become evident in Stencil 3. There’s an early alpha out now, but Stencil 3 should be available in early 2023. 

Overall, you can expect to see more out of the Ionic team in 2023 and beyond. With the OutSystems acquisition, we’re able to add more manpower behind our projects than ever before. 

You can also expect to see more updates to Appflow – mainly support for pure native builds in Appflow. Swift apps? Kotlin apps? Expect to be able to build those in the cloud with Appflow soon!

All things OutSystems

OutSystems CTO Patrick Jean joined at 45:26 to talk more about Ionic and OutSystems’ shared vision for the future.  Overall, we don’t expect much to change, other than an increase in our open source investments and initiatives. We’ll continue to accelerate our vision to make it easier for web developers to build the best possible mobile apps.

The show concluded with our experts answering questions live from attendees at 46:03. 

Thank you to our amazing community for not just another great Ionic Show, but another great year. We wouldn’t be where we are without you, and we’re eternally grateful for your contributions and support. 

Catch you all at the next Ionic Show! In the meantime, see the full recording of the Q4 show here. 

The post Q4 Ionic Show Recap appeared first on Ionic Blog.

We’re excited to announce the release of Ionic 6.4, which contains improvements to modal, toast, and toggle.

Here’s what’s new in this release:

Modal canDismiss Improvements

In Ionic 6.1, we added the canDismiss property to ion-modal. This property lets developers control precisely when users can leave a modal. In Ionic 6.4, we enhanced this feature by passing the “role” and “data” information when providing a callback to canDismiss. This can be used to make more informed decisions about when a modal should dismiss.

canDismiss(role: string, data: any) {
  // Disallow dismissing the modal via a swipe gesture
  return role !== ‘gesture’;
}

Toast Duration Configuration

Toasts can now have the default duration property customized globally using the new toastDuration configuration.

IonicModule.forRoot({
  // All toasts will now dismiss after 5000ms.
  toastDuration: 5000
});

Thank you to @DwieDima for building this feature!

Toggle On/Off Label Configuration

In Ionic 6.2, we introduced the enableOnOffLabels property to ion-toggle to provide a better visual indication of state. In Ionic 6.4, we added the ability to customize this property on a global level using the new toggleOnOffLabels configuration.

IonicModule.forRoot({
  // All toggles will have on/off labels
  toggleOnOffLabels: true
});

Thank you to @EinfachHans for building this feature!

Thank You

As we approach the end of 2022, we want to thank the entire Ionic community for making this an amazing year for the project. We have lots of exciting improvements in store for 2023!

As always, we would love any feedback on our GitHub repo.

The post Announcing Ionic v6.4 appeared first on Ionic Blog.