-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Migrating Plugins to NativeScript 3.0
This is a step by step guide on how to migrate plugins to NativeScript 3.0
Refer to the Modules30Changes guide which describes breaking changes in the NativeScript 3.0 release.
You can use the following already migrated plugins for reference:
Update devDependencies
to tns-core-modules
, tns-platform-declarations
(if needed) and nativescript-telerik-ui
(if needed).
"devDependencies": {
...
"tns-core-modules": "^3.0.0 || ^3.0.0-rc.1",
"tns-platform-declarations": "^3.0.0 || ^3.0.0-rc.1",
"typescript": "^2.2.2",
"nativescript-telerik-ui":"^1.7.0" // only if needed
},
Update peerDependencies
. It is recommended to add a peer-dependency to tns-core-modules
version 3. This will ensure the current applications that use your plugin will not accidentally update the plugin before migrating the whole project to NativeScript 3.0.
"peerDependencies": {
...
"tns-core-modules": "^3.0.0 || ^3.0.0-rc.1",
"nativescript-telerik-ui":"^1.7.0" // only if needed
}
Make sure there is "nativescript"
section in the package.json
. This is recommended for all NativeScript plugins:
"nativescript": {
"platforms": {
"android": "3.0.0",
"ios": "3.0.0"
}
}
Make sure there is an "author"
section:
"author": {
"name": "NativeScript Team"
}
Update tsconfig.json according to Modules30Changes guide. Here is a "replace all" tsconfg.json
:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": false,
"declaration": false,
"noLib": false,
"noEmitHelpers": true,
"experimentalDecorators": true,
"lib": [
"es6",
"dom"
],
"baseUrl": ".",
"paths": {
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
]
}
},
"exclude": [
"node_modules",
"platforms"
]
}
Check the references.d.ts
file (if such exists) and remove entries pointing to ../node_modules/tns-core-modules/tns-core-modules.XXXX
- they are not needed any more.
You can delete the file if there are no other entries.
There might be references to the tns-platform-declaration
module which are OK. For example:
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
Run typescript compiler. If there are more configuration-related issues - please share them with us (ex. in slack) so that we can update the guide.1. 1.
Fix breaking code using the breaking changes document. If there are changes you made that weren't described in the document - please add them for future generations.
Update package.json
, tsconfig.json
and references.d.ts
as described before.
Make sure the project builds and runs successfully. Again you might have to change some of the code if it is affected byt the breaking changes.
If there is an angular demo project there are some additional steps.
Update angular-related dependencies. You can use the camera module ng project as a reference.
Update webpack plugin. The easiest way:
- Delete all webpack.js file in the root of the project. List of all webpack related files:
- ./webpack.common.js
- ./webpack.android.js
- ./webpack.ios.js
- ./app/vendor.ts
- ./app/vendor-platform.android.ts
- ./app/vendor-platform.ios.ts
- Delete all webpack related scripts in the "scripts" section of the project's package.json ("start-android-bundle", "prestart-android-bundle", "build-android-bundle", etc.)
- Delete tsconfig.aot.json (if there is such) from the root of the project
- Remove and re-install the "nativescript-dev-webpack" package, it will add webpack config files and update package.json with some scripts:
rm -rf node_modules/nativescript-dev-webpack/
npm i --save-dev nativescript-dev-webpack
Run them with "tns run android/ios" For testing webpack - use "npm run start-android-bundle"/"npm run start-ios-bundle" scripts. Update angular dependencies:
"dependencies": {
"@angular/common": "~4.0.1",
"@angular/compiler": "~4.0.1",
"@angular/core": "~4.0.1",
"@angular/forms": "~4.0.1",
"@angular/http": "~4.0.1",
"@angular/platform-browser": "~4.0.1",
"@angular/platform-browser-dynamic": "~4.0.1",
"@angular/router": "~4.0.1",
"nativescript-angular": "rc",
"rxjs": "~5.3.0",
"zone.js": "~0.8.4"
...
}