Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Migrating Plugins to NativeScript 3.0

Alexander Vakrilov edited this page Apr 26, 2017 · 6 revisions

Migrating Plugins to NativeScript 3.0

This is a step by step guide on how to migrate plugins to NativeScript 3.0

General tips

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 the Plugin Code

Update package.json

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"
 }

 

TypeScript Build

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 The Code

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 Demo Project

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.

Update Angular Demo Project

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:

  1. Delete all webpack.js file in the root of the project. List of all webpack related files:
    1. ./webpack.common.js
    2. ./webpack.android.js
    3. ./webpack.ios.js
    4. ./app/vendor.ts
    5. ./app/vendor-platform.android.ts
    6. ./app/vendor-platform.ios.ts
  2. 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.)
  3. Delete tsconfig.aot.json (if there is such) from the root of the project
  4. 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

Test Demo Projects

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"
    ...
  }
Morty Proxy This is a proxified and sanitized view of the page, visit original site.