{"id":3587,"date":"2021-01-21T18:00:39","date_gmt":"2021-01-21T18:00:39","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3587"},"modified":"2021-01-21T18:00:39","modified_gmt":"2021-01-21T18:00:39","slug":"understanding-changes-to-capacitor-3-core-plugins","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/understanding-changes-to-capacitor-3-core-plugins","title":{"rendered":"Understanding Changes to Capacitor 3 core plugins"},"content":{"rendered":"

When we announced Capacitor 3.0 beta<\/a> last week, one of the biggest changes we mentioned was around the core Capacitor APIs. All officially supported plugins are now installed and versioned separately from Capacitor core<\/strong>. While this may seem like a pretty drastic change, the migration is fairly straight forward. With these changes, developers actually have more control over what APIs are included in an app. Meaning not only is there a better developer experience, but a faster startup time for your app. Let’s take a look at how we can update an app to the latest beta and use the new APIs in our App.<\/p>\n

<\/p>\n

Updating our App<\/h2>\n

Let’s start off by updating our app to use the latest beta release or Capacitor Core and the CLI.<\/p>\n

npm install @capacitor\/core@next\nnpm install @capacitor\/cli@next\n<\/code><\/pre>\n
Next, we’ll install the beta releases of Capacitor iOS and Android<\/p>\n
npm install @capacitor\/ios@next\nnpm install @capacitor\/android@next\n<\/code><\/pre>\n
If you’ve customized your native projects at all, you’ll want to manually update them to account for changes to Capacitor. A detailed guide can be found here in our docs for iOS<\/a> and Android<\/a>. Since I don’t have any changes in my project, I’m just going to rm<\/code> the iOS and Android platforms (’cause YOLO).<\/p>\n
rm -rf ios android\nnpx cap add ios\nnpx cap add android\n<\/code><\/pre>\n
Now with this bit out of the way, we can actually get to our main topic…Plugins.<\/p>\n
Adding the new plugins<\/h2>\n
In this sample app<\/a>, we make use of the File System API<\/a> to save notes to our device. Let’s install the new npm package for File System and start to update our code.<\/p>\n
npm install @capacitor\/filesystem\n<\/code><\/pre>\n
In .\/src\/pages\/Editor.tsx<\/code>, we have an import statement, pulling a few things from @capacitor\/core<\/code>.<\/p>\n
import {\n  Plugins,\n  FilesystemDirectory,\n  FilesystemEncoding,\n} from '@capacitor\/core';\n<\/code><\/pre>\n
For this, we can update our import path to point to the new package, @capacitor\/filesystem<\/code>. Once this is updated, the types for FilesystemDirectory<\/code> and FilesystemEncoding<\/code> can stay, but we need to remove the Plugins<\/code> object and replace that with the new FileSystem<\/code> object. Now instead of destructuring FileSystem<\/code> from the Plugins<\/code> object, we can get direct access to from the package itself. Now our import should look like so:<\/p>\n
import {\n  Filesystem,\n  FilesystemDirectory,\n  FilesystemEncoding,\n} from '@capacitor\/filesystem';\n<\/code><\/pre>\n
Now in our implementations, we can remove and const {...} = Plugins<\/code> and just call the API directly.<\/p>\n
  const saveFile = async () => {\n    const file = params.name ? params.name : `note-${Date.now()}.txt`;\n    await Filesystem.writeFile({\n      path: `notes\/${file}`,\n      data: state,\n      directory: FilesystemDirectory.Documents,\n      encoding: FilesystemEncoding.UTF8,\n    });\n    history.goBack();\n  };\n\n<\/code><\/pre>\n
Parting thoughts<\/h2>\n
If you’re using any of the core Capacitor APIs in your app, the process to update for beta is basically the same as above. We’re currently working with the folks in the Capacitor Community Github Org to help update third-party plugins to the new API, so be on the lookout for pre-releases there. We’ll be going over more Capacitor beta content in the coming weeks, so keep out for the next post. Cheers!<\/p>\n