nativescript / nativescript-plugin-seed

Get started building NativeScript plugins quickly.

Develop a NativeScript plugin

This repo is heavily based on @NathanWalker's Plugin Seed. Thanks, Nathan!

• TL;DR
• Long Description
  • What is NativeScript plugin seed?
  • Plugin folder structure
  • Getting started
    • Development setup
  • Linking to CocoaPod or Android Arsenal plugins
    • Generating typings for iOS
    • Generating typings for Android
  • Clean plugin and demo files
  • Unittesting
  • Publish to NPM
  • TravisCI
  • Referring tns-core-modules in the Plugin
• Contribute
• Get Help

TL;DR

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. To bootstrap your plugin development execute the following:

1. git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin where nativescript-yourplugin is the name of your plugin.
2. cd nativescript-yourplugin/src
3. npm run postclone
4. npm run demo.ios or npm run demo.android to run the demo.

Long Description

What is NativeScript plugin seed?

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. What does the seed give you out of the box?

• the plugin structure with option for easy development and debugging (see Development setup section below)
• a simple working plugin
• a demo project working with the plugin. It is useful during development and for running tests via Travis CI
• a guideline how to structure your plugin README file that will be published to NPM
• a shell script to create your plugin package
• a proper .gitignore to keep GitHub tidy
• a proper .npmignore to ensure everyone is happy when you publish your plugin to NPM.

Plugin folder structure

Folder/File name	Description
demo	The plugin demo source code (optional during postclone setup)
demo-angular	The plugin demo source code (optional during postclone setup)
src	The plugin source code
src/platform/android	Plugin Android specific configuration
src/platform/ios	Plugin ios specific configuration
src/README	Your plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
src/scripts	The postclone script run when you execute npm run postclone. Feel free to delete it after you have executed the postclone step from the Getting started section
publish	Contains a shell script to create and publish your package. Read more on creating a package and publishing in the Publish to NPM section

Getting started

1. Open a command prompt/terminal and execute git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-yourplugin to clone the plugin seed repository into the nativescript-yourplugin folder where nativescript-yourplugin is the name of your plugin..
2. Open a command prompt/terminal and navigate to nativescript-yourplugin/src folder using cd nativescript-yourplugin/src
3. Execute npm run postclone to:
   • configure your github username - it will be changed in the package.json for you
   • configure your plugin name - all files and classes in the seed will be renamed for you
   • stub your plugin README.md file
   • add TypeScript NativeScript application which is setup to use your plugin from its local src folder
   • add Angular NativeScript application which is setup to use your plugin from its local src folder
   • create a new repository for your plugin

Now you can continue with the development of your plugin by using the Development setup described below.

NOTE: The plugin seed is updated to use the latest version of NativeScript. If you are not ready to upgrade, you can checkout a tagged version that is compatible with your NativeScript version.

Development setup

For easier development and debugging purposes continue with the following:

Open a command prompt/terminal, navigate to src folder and run npm run demo.ios, npm run demo.android, npm run demo-angular.ios, npm run demo-angular.android to run the demo applications created during postclone.

Now go and make a change to your plugin. It will be automatically applied to the demo project.

NOTE: Any changes that you need to make in a native library used in your plugin or in any other files inside src/platforms directory such as Info.plist or AndroidManifest.xml can't be directly reflected in the demo applications. You need to use npm run demo.reset or npm run demo-angular.reset and run the application again.

Linking to CocoaPod or Android Arsenal plugins

You will want to create these folders and files in the src folder in order to use native APIs:

platforms --
  ios --
    Podfile
  android --
    include.gradle

Doing so will open up those native apis to your plugin :)

Take a look at these existing plugins for how that can be done very simply:

• nativescript-cardview
• nativescript-floatingactionbutton

It's highly recommended to generate typings for the native libraries used in your plugin. By generating typings you'll be able to see what APIs exactly are exposed to Javascript and use them easily in your plugin code

Generating typings for iOS

• Run the command for typings generation as explained in the documentation
• Open demo/typings/x86_64 and copy the d.ts files that you plan to use in your plugin to src/platforms/ios/typings
• Open src/references.d.ts and add a reference to each of the files added to src/platforms/ios/typings

NOTE: Swift APIs that are not exported to Objective-C are not supported. This means that you can only call APIs from JavaScript that are visible to the Objective-C runtime. This include all Objective-C APIs and only the subset of all Swift APIs that are exposed to Objective-C. So, to use a Swift API (class/function/method etc.) from NativeScript, first make sure that it can be used from Objective-C code. For more information which Swfit APIs can be exposed to Objective-C, see here.

Generating typings for Android

• Clone Android DTS Generator repo
• Follow the steps in the README
• Copy the generated d.ts files in src/platforms/android/typings. Feel free to rename the generated files for readablity.
• Open src/references.d.ts and add a reference to each of the files added to src/platforms/android/typings

Clean plugin and demo files

Sometimes you may need to wipe away the src/node_modules, demo/node_modules and demo/platforms folders to reinstall them fresh.

• Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.

Sometimes you just need to wipe out the demo's platforms directory only:

• Run npm run demo.reset or npm run demo-angular.reset to delete the application's platforms directory only.

Sometimes you may need to ensure plugin files are updated in the demo:

• Run npm run plugin.prepare will do a fresh build of the plugin then remove itself from the demo and add it back for assurance.

Unit testing

In order to add unit testing to the demo applications and in relation to test your plugin inside of them you should follow our latest guide here.

Publish to NPM

When you have everything ready to publish:

• Bump the version number in src/package.json
• Go to publish and execute publish.sh (run chmod +x *.sh if the file isn't executable)

If you just want to create a package, go to publish folder and execute pack.sh. The package will be created in publish/package folder.

NOTE: To run bash script on Windows you can install GIT SCM and use Git Bash.

TravisCI

The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator to make sure that those apps start correctly while your plugin is linked to them. All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at https://travis-ci.org/. Then enable your plugin's repo on "https://travis-ci.org/profile/<your github user>" and that's it. Next time a PR is opened or change is committed to a branch TravisCI will trigger a build testing the code.

To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

Contribute

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

Get Help

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

nativescript-plugin-seed's Issues

Reference Error: xxx is not defined

Make sure to check the demo app(s) for sample usage

Yes

Make sure to check the existing issues in this repository

Yes

If the demo apps cannot help and there is no issue for your problem, tell us about it

JS: Reference Error: xxx (java package name) not defined.

Which platform(s) does your issue occur on?

• Android 5.1
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.2.3
• Cross-platform modules: 4.2.0
• Runtime(s): 4.0.0
• Plugin(s):
  "nativescript-theme-core": "^1.0.4",
  "nativescript-unit-test-runner": "^0.3.4",
  "nativescript-bluetoothspp": "file:../src",
  "tns-core-modules": "^4.2.0"

Please, tell us how to recreate the issue in as much detail as possible.

Follow "Building Plugins" to get demo work -->Generate .aar via android studio. -->Generate typing files by following android-dts-generator. -->Add typing files and change reference.s.ts --> build--> JS: Reference Error: xxx(java package name) not defined. --> remove android folder in platform and rebuild (or try commands to clean plugin and demo files) --> same error

Is there any code involved?

Here is the repository : https://github.com/AshleyCao/nativescrip-bluetooth-spp

'npm run clean' causes subsequent runs to fail

Not sure what cause is. First time I had began a new plugin in awhile from this seed and was sad it failed.

executing 'tns plugin build'
npm WARN demo No description
npm WARN demo No repository field.
npm WARN demo No license field.

npm ERR! path /Users/nathan/Documents/github/nstudio/nativescript-jumio/demo/node_modules/.staging/@nstudio/nativescript-jumio-04edbcf5/node_modules/ansi-regex
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/nathan/Documents/github/nstudio/nativescript-jumio/demo/node_modules/.staging/@nstudio/nativescript-jumio-04edbcf5/node_modules/ansi-regex' -> '/Users/nathan/Documents/github/nstudio/nativescript-jumio/demo/node_modules/.staging/ansi-regex-548e4059'
npm ERR! enoent This is related to npm not being able to find a file.

I'll try to investigate later and submit PR if I can figure out what's going on.

npm run plugin.tscwatch doesn't create platforms folder

The npm run plugin.tscwatch command doesn't create platforms folder
and the result of npm run build returns
No plugin found at the current directory, or the plugin does not need to have its platforms/android components built into an .aar

Am I missing something?

Thanks

Feature request: Don't assume everyone uses github

Many would prefer to use libre solutions for source control such as self hosted git or gitlab. Currently npm postclone requests a github username. It would probably be fine to just make the git username question optional.
As a workaround it's possible to just enter any name and change it in package.json later.

Creating a simple UI plugin

Create a documentation articles to cover the following topics:

• Creating a UI plugin using tns-core-modules
• Creating a UI plugin by exposing native UI

Publishing plugin leads to JavaScript heap out of memory

Make sure to check the demo app(s) for sample usage

Not relevant.

Make sure to check the existing issues in this repository

Done.

If the demo apps cannot help and there is no issue for your problem, tell us about it

When I try to publish my plugin, the pack.sh script fails at the step when the newly created src dir is built.

Which platform(s) does your issue occur on?

• Both
• iOS/Android versions 3.0.0
• emulator or device. What type of device? Not relevant.

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.4.1
• Cross-platform modules: 3.4.0
• Runtime(s): 3.4.1
• Plugin(s):
  "tns-core-modules": "^3.3.0",
  "tns-platform-declarations": "^3.3.0",
  "typescript": "~2.3.0",
  "prompt": "^1.0.0",
  "rimraf": "^2.5.0",
  "tslint": "^5.0.0"

Please, tell us how to recreate the issue in as much detail as possible.

I configured my project for publishing to the npm repo of my company. Afterwards, I run the publish.sh script and got the following error:

Building /src...

<--- Last few GCs --->

   39933 ms: Mark-sweep 1359.2 (1437.2) -> 1359.0 (1437.2) MB, 1301.8 / 0.0 ms [allocation failure] [GC in old space requested].
   41278 ms: Mark-sweep 1359.0 (1437.2) -> 1359.0 (1437.2) MB, 1345.2 / 0.0 ms [allocation failure] [GC in old space requested].
   42580 ms: Mark-sweep 1359.0 (1437.2) -> 1361.9 (1413.2) MB, 1300.8 / 0.0 ms [last resort gc].
   43873 ms: Mark-sweep 1361.9 (1413.2) -> 1364.7 (1413.2) MB, 1292.5 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x14317b2cfb39 <JS Object>
    1: getTypeOfFuncClassEnumModule [/Users/david/Desktop/ecsec/taxi/plugins/nativescript-keystore/publish/src/node_modules/typescript/lib/tsc.js:~24186] [pc=0x3f4d0488399] (this=0x10ad20755ea1 <JS Global Object>,symbol=0x191d40910a59 <a Symbol with map 0x1081ea107641>)
    2: getTypeOfSymbol [/Users/david/Desktop/ecsec/taxi/plugins/nativescript-keystore/publish/src/node_modules/typescript/lib/...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
 3: v8::Utils::ReportApiFailure(char const*, char const*) [/usr/local/bin/node]
 4: v8::Utils::ApiCheck(bool, char const*, char const*) [/usr/local/bin/node]
 5: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
 6: v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
 7: v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
 8: 0x3f4d03079a7
 9: 0x3f4d0488399
10: 0x3f4d04a8cb8
11: 0x3f4d086240e
./pack.sh: line 13: 32492 Abort trap: 6           node_modules/.bin/tsc
Creating package...

Is there any code involved?

At the moment I am not able to provide the code of the project. Hopefully somebody can provide me an advice what the issue could be, anyway.

Update

It seems that this error is rather a problem of the typescript compiler: MS Typescript Issue 1, MS Typescript Issue 2. Should I open an Issue at there repo? I think the main problem in this case would be the reproduction step of the error, because I do not know where exactly the compiler fails...

Missing AndroidManifest.xml and plugin_name.aar on `npm pack`

Which platform(s) does your issue occur on?

• Android

Please, provide the following version numbers that your issue occurs with:

• CLI: 5.2.0
• Cross-platform modules: 5.2.0
• Runtime(s): 5.2.0

Please, tell us how to recreate the issue in as much detail as possible.

1. Clone the seed.
2. cd nativescript-yourplugin/src
3. npm run postclone
4. npm pack
5. The whole platforms/android is missing in the generated tgz.

Additional Context

The manifest is not included because it is npm ignored from .npmignore, while the aar is not built because we do not force tns plugin build on npm pack anymore (because of this change).

Add webpack

• Enable webpack in the demo
• Add the corresponding Travis check

Cannot find module 'application'

In my plugin file: plugin-name.android.ts I have imported application module as following:

import * as application from "application";

But I get the mentioned error.

Note: The plugin works fine. (I guess as it's used in demo folder, it find the module in demo folder)

Debugging your plugin

• tns debug command
• Debug with VS Code
• How to install my plugin and test the real installation (without npm link). Note: if your plugin uses native API or makes changes to Info.plist / AndroidManifest.xml, you need first to do tns plugin add and then npm link to start developing. (This way you can test npmignore)

Postclone doesn't complete

Post clone stuck at this package.
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.

Supporting webpack in your plugin

[Proposal] Plugin development workflow with NativeScript 4.0

[Proposal] Plugin development workflow with NativeScript 4.0

As most of you know, previously we considered having breaking changes for plugins with NativeScript 4.0. The good news now is that this won’t happen!* What it means?

1. The CLI will have logic to build the plugin .aar file. The .aar will be built and saved in plugin’s platforms/android folder with filename - the plugin name (the one specified in package.json with some restrictions applied regarding the .aar files name convention).

2. The CLI will expose a command for building the .aar file in case you want to do this manually. This command will be used by the plugin authors to build the .aar file explicitly before publish. We highly recommend building your plugin .aar file and publish it with the package. Check FAQ for more information on the pros and cons of this approach.

NOTE: By using the plugin development workflow recommended in the plugin seed, there will be scripts and commands in place so that you shouldn’t care about the building of the .aar file. Also, by using tns run android --syncAllFiles, which is integrated in the seed workflow, any change you do to AndroidManifest.xml will result in rebuilding of the .aar file transparently for you.

3. The files that can be added to platforms/android are restricted to:
   AndroidManifest.xml
   Include.gradle
   *.aar
   *.jar
   *.md
   res folder
   jniLibs
   assets

Plugin's *.aar file will be built only when AndroidManifext.xml, res folder, jniLibs or assets are present in platforms/android. If the plugin's platforms/android folder contains only *.aar, *.jar - they will be consumed directly from the CLI. On the other hand include.gradle and *.md doesn't have anything to do with plugin's *aar so in this case also we won't create any *.aar file.

NOTE: In case any other native resources need to be used, the plugin author will need to create a native project and build the .aar file for the plugin explicitly. The CLI won’t handle any other files than the ones mentioned above. Practically this is something we also have today.

NOTE * For existing plugins containing resources in platforms/android folder that are not mentioned in the above list, there will be a breaking change. We are aware that this is about 1% of the existing plugins, so we will assist the plugin authors with the migration if needed.

4. We recommend specifying package name in AndroidManifest.xml by following the conventions for the package name. At some point this will become a requirement.

// Wrong

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

// Right

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.nativescript.nativescriptimagepicker">

5. The plugin’s .aar file should be part of the plugin package in npm. All other files in platforms/android except for include.gradle, *.aar and *.jar can be npm ignored.

6. For plugin authors who need to use a native Android project, we will create a detailed documentation article with the recommended approach for this. In short we will recommend to:

• Have a folder (i.e. src-native) in the root of the repo containing the native project
• Copy the .aar file produced by this project to platforms/android so that the CLI can use it.

7. The development workflow provided in the NativeScript Plugin Seed will ensure that:
   • The package published always include the .aar file.
   • Using npm run demo.android from src folder watches for changes in platforms\android and rebuilds the .aar file for you.

FAQ

Why should I bother building .aar file for my plugin when the CLI can handle this out of the box?
Below you can find the Pros and Cons of both approaches:
Leave the CLI to handle building of plugin’s .aar file. With this approach the cons are for the application developers.
Pros

• No need to deal with .aar files
• No need to change my plugin development workflow

Cons (mainly for the app developers)

• If for some reason there is an error in the building of the .aar this will become visible in the customer’s app
• Building an .aar file for a plugin takes about 4 sec on SSD when an app is built for the first time (and each the platforms folder is deleted) so it affects the development workflow of the app developers. This means that having 10 plugins will add >=40sec to the app initial build time.

Build my plugin .aar file explicitly and publish it in npm. With this approach the pros are for the application developers.
Pros

• Any errors that might occur during this build will be visible to the plugin author prior to publishing the plugin
• No added time to application build time for applications using the plugin
  Cons
• Plugin development workflow is insignificantly changed.

Since building plugins aims for making the job of application developers easier, thus we recommend to plugin authors to build and publish their plugins’ .aar files.

I have an existing plugin, will I have to migrate it?
All existing plugins will continue working as is, except for the aforementioned 1% of plugins, which we will handle with plugin authors directly. In spite of this, we highly recommend to:

• Check if you’re using files different than the ones specified in point 3. If this is the case, probably you need to consider using a native project since the CLI won’t be able to handle the extra files there

NOTE: According to our research, 99% of the existing plugins use only the files listed in point 3 and using a native project won’t be required.

• Add package name to AndroidManifest.xml as explained in point 4
• Build the .aar file of your plugin using the provided CLI command as explained in point 2. This will be possible in 2 ways:
  • Run the demo of your plugin to make the CLI build the .aar file in plugin’s platforms/android folder
  • Call the CLI command for building the .aar file
  • Publish a version of the plugin. Make sure that include.gradle, *aar, *.jar are NOT npm ignored and exist in the plugin package. All other contents of platforms/android can be ignored.

I have an existing plugin. I want to build the .aar file for it and publish a package containing the .aar file as recommended. How can I do it?

It’s as easy as pie! See the previous question for the necessary steps.

I only have AndroidManifest.xml, what do I do?
All existing plugins having only AndroidManifest.xml will continue working out of the box. In spite of this, we highly recommend:

• Add package name to AndroidManifest.xml as explained in point 4
• Build the .aar file of your plugin using the provided CLI command as explained in point 2.
• Publish a version of the plugin containing the .aar file. Make sure that include.gradle, *aar, *.jar are NOT npm ignored and exist in the plugin package. All other contents of platforms/android can be ignored.

What files from platforms/android need to be part of the published package?
include.gradle, *aar, *.jar need to exist in the published package. All other files in platforms/android should be npm ignored.

Will I need to have Android Studio installed?
No, the CLI will take care to build the .aar file of your plugin.

What about the iOS project?
No changes there.

Tests on android fail with "ReferenceError: exports is not defined"

Which platform(s) does your issue occur on?

Android 8.1 Nexus 5X

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.2.2
• Cross-platform modules: 4.2.0
• Runtime(s): 4.2.0

Please, tell us how to recreate the issue in as much detail as possible.

1. Follow instructions to create new plugin.
2. Remove --emulator from test.android script.
3. npm run test.android
4. Observe error since tests did not run.

20 09 2018 11:56:37.034:INFO [Firefox 62.0.0 (Windows 10.0.0)]: Connected on socket awa46F35eRUwBKQUAAAC with id manual-2141
Firefox 62.0.0 (Windows 10.0.0) ERROR
  ReferenceError: exports is not defined
  at app/app.js:2

Supporting Angular in your UI plugin

Describe how to support Angular in your UI plugin

Renaming the id of the 'demo' application causes 'tns run android' to no start the application

Adding stripe to include.gradle breaks build

I am working on a plugin that uses Stripe. It works well for iOS but I'm having trouble getting it to work for Android. To reproduce I started with the nativescript-plugin-seed following the Build Plugin instructions to create nativescript-version-number. This works and I can successfully run and debug it in the Android Studio emulator.

I then add compile 'com.stripe:stripe-android:8.0.0' to src/platforms/android/include.gradle in the dependencies section. Now npm run demo.android fails to build, with the following error:

 ~/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.0.aar/bf7a4c30edcd7fbace87de38a1ae35a7/res/values-v26/values-v26.xml:9:5-12:13: AAPT: error: resource android:attr/colorError not found.

(Plus several other resources and style attributes that it can't find.)
I tried npm run clean and deleting .gradle/caches but still get the same error.

• Building on Mac OSX for Android. Installed Android Studio and using that emulator.
• CLI: 4.1.2
• Cross-platform modules: tns-core-modules is 4.1.1
• Runtime(s): tns-android: 4.1.3
• Plugin(s): unmodified from this seed

Please, tell us how to recreate the issue in as much detail as possible.

1. Follow the instructions at https://docs.nativescript.org/plugins/building-plugins and create a local copy of nativescript-version-number.
2. Make just one change: to include.gradle add the following to the dependencies block:

    compile 'com.stripe:stripe-android:8.0.0'

3. npm run plugin.tscwatch (success); npm run demo.android (fails)

Add tns build/run npm scripts to seed

It would be nice if we add npm scripts like https://github.com/NativeScript/nativescript-facebook/blob/master/demo/package.json#L51 so plugin developers can and users testing the app can easily build/run it using one command.
It can also be used in the travis file for the build jobs.

Remove CONTRIBUTING and CODE_OF_CONDUCT on postclone

Currently when a plugin is created from the seed the files for CONTRIBUTING and CODE_OF_CONDUCT which are relevant to the seed are not deleted.

Expected behavior: Those files should be deleted since they are specific to the seed and are not applicable to the new plugins created.

Trouble working with ethernet printer

I'm having trouble getting this demo app to work for an ethernet-connected star micronics printer. In the demo app when I click search printers, it correctly finds my printer port: TCP:192.168.1.47 and when I hit connect/reconnect it console logs Connected: true. However, when I click the print option nothing happens. I added a .then() and a .catch() to the print command and the .then() is being triggered and is just returning undefined so I'm not sure what's going wrong. I see in the ReadMe that it references bluetooth - does this plugin only work for bluetooth connections? I just figured it would work for ethernet since it's finding the printer and returning connected: true.

On another note, I know this printer works because I've been able to print from it using the star micronics TSP100III Utility app.

Which platform(s) does your issue occur on?

iOS

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.1.3
• Cross-platform modules: 2.5.3
• Runtime(s): 3.0.1
• Plugin(s):
  "dependencies": {
  "nativescript-star-printer": "file:../src",
  "nativescript-theme-core": "^1.0.2",
  "nativescript-unit-test-runner": "^0.3.4",
  "tns-core-modules": "^2.5.1"
  },
  "devDependencies": {
  "babel-traverse": "6.12.0",
  "babel-types": "6.11.1",
  "babylon": "6.8.4",
  "filewalker": "0.1.2",
  "jasmine-core": "^2.5.2",
  "karma": "^1.3.0",
  "karma-jasmine": "^1.0.2",
  "karma-nativescript-launcher": "^0.4.0",
  "lazy": "1.0.11",
  "nativescript-dev-typescript": "^0.3.7",
  "typescript": "^2.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

Running the sample demo on an iPad while attempting to print to a star micronics ethernet printer.

Is there any code involved?

I'm running the sample demo

Add a blank e2e test and nativescript-dev-appium dependency and travis stage for them

unable to run demo.android

I'm trying to run a basic nativescript-plugin-seed on windows 10. Everything works up to the npm run demo.android. Whole process succeeds (builds, installs), but when it tries to run it on an emulator (android avd), the output is error. See attached.

Is there anything that I should be doing differently? I followed 4 basic steps outlined in your readme. I have not done anything else.

Ensure plugins quality

Update some dependencies for NativeScript 5.2

Some dependencies described in package.json can be bumped.

Packaging doesn't seem to be working

I have a plugin developed from the seed and I'm now at the point where I want to pull it into another app. Following the publish instructions, I was able to generate a nativescript-plugin-name-1.0.0.tgz file. When following the instructions to install it (tns plugin add nativescript-pluigin-name-1.0.0.tgz) after a minute or two of seemingly working it stops and tells me:

nativescript-plugin-name-1.0.0.tgz is not a valid NativeScript plugin. Verify that the plugin package.j
son file contains a nativescript key and try again.

I unzipped the folder and checked it out and the package.json seems to have the same fields as in the seed plugin. Here it is:

{
"name": "nativescript-plugin-name",
"version": "1.0.0",
"description": "Your awesome NativeScript plugin.",
"main": "plugin-name",
"typings": "index.d.ts",
"nativescript": {
"platforms": {
"android": "3.0.0",
"ios": "3.0.0"
}
},
"scripts": {
"tsc": "tsc -skipLibCheck",
"postclone": "npm i && node scripts/postclone.js && cd ../demo && npm i && cd ../src && npm run plugin.link",
"test.android": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build android && tns test android --justlaunch",
"test.ios": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build ios && tns test ios --justlaunch",
"tslint": "cd .. && tslint "/*.ts" --config tslint.json --exclude "/node_modules/**"",
"plugin.link": "npm link && cd ../demo && npm link nativescript-ui-plugin && cd ../src",
"plugin.tscwatch": "npm run tsc -- -w",
"demo.ios": "npm i && npm run tsc && cd ../demo && tns run ios --syncAllFiles",
"demo.android": "npm i && npm run tsc && cd ../demo && tns run android --syncAllFiles"
},
"keywords": [
"NativeScript",
"JavaScript",
"Android",
"iOS"
],
"author": {
"name": "Your Name",
"email": "[email protected]"
},
"bugs": {
"url": "https://github.com/YourName/nativescript-yourplugin/issues"
},
"license": "Apache-2.0",
"homepage": "https://github.com/YourName/nativescript-yourplugin",
"readmeFilename": "README.md",
"peerDependencies": {
"tns-core-modules": "^3.0.0"
},
"devDependencies": {
"tns-core-modules": "^3.0.0",
"tns-platform-declarations": "^3.0.0",
"typescript": "2.3.4",
"prompt": "^1.0.0",
"rimraf": "^2.5.0",
"tslint": "^5.0.0"
},
"dependencies": {
"nativescript-camera": "^4.0.0",
"nativescript-fonticon": "^1.1.1",
"nativescript-iqkeyboardmanager": "^1.2.0",
"nativescript-loading-indicator": "^2.4.0",
"nativescript-permissions": "^1.2.3",
"nativescript-telerik-ui-pro": "^3.1.0-2017.9.11.1"
},
"bootstrapper": "nativescript-plugin-seed"
}

Consider moving commands on root level

Consider having commands on root level instead of duplicating some of them in plugin source and demos. (affects travis builds, verified plugins guide, verify tool)

Support hooks

Currently plugin development with hooks is not well support in the seed and can be improved.

Add demo for Angular and VueJS

cannot run demo.android

Hello,

I am trying to follow this guide: https://docs.nativescript.org/plugins/building-plugins

When I get to the point to run the demo, I get the following error:

Successfully synced application org.nativescript.demo on device cbfbe126.
System.err: android.content.res.Resources$NotFoundException: Resource ID #0xfffffff6
System.err:     at android.content.res.ResourcesImpl.getValue(ResourcesImpl.java:202)
System.err:     at android.content.res.Resources.loadXmlResourceParser(Resources.java:2968)
System.err:     at android.content.res.Resources.getAnimation(Resources.java:2008)
System.err:     at android.view.animation.AnimationUtils.loadAnimation(AnimationUtils.java:75)
System.err:     at android.support.v4.app.FragmentManagerImpl.loadAnimation(FragmentManager.java:1102)
System.err:     at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1600)
System.err:     at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1641)
System.err:     at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:794)
System.err:     at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:2415)
System.err:     at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2200)
System.err:     at android.support.v4.app.FragmentManagerImpl.optimizeAndExecuteOps(FragmentManager.java:2153)
System.err:     at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2063)
System.err:     at android.support.v4.app.FragmentManagerImpl$1.run(FragmentManager.java:725)
System.err:     at android.os.Handler.handleCallback(Handler.java:751)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:95)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6688)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1468)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1358)

After looking at the package.json, I noticed that it points to v 5.0.0:

"nativescript": {
        "platforms": {
            "android": "5.0.0",
            "ios": "5.0.0"
        }
    },

My system is not ready to be upgraded to version 5.0.0. Is there a way to use the seed project with version 4.2.*? If so, what step do I need to take to do that?

Add custom native library to your plugin

Create an article describing how to add custom native lib to your plugin. refer it from the article for UI plugins

Suggestion - npm scripts instead of pack.sh

Just wondering why you have a bash script, pack.sh, that contains things that can easily be done with npm scripts? Would make it easier on those who develop on Windows.

  "scripts": {
    "build.install": "npm i && cd ../src && npm i",
    "build": "npm run build.install && npm run build.clean && npm run build.prep && npm run build.compile && npm run build.package && npm run build.post",
    "build.prep": "ncp ../src ./src && mkdir package",
    "build.compile": "cd ./src && tsc",
    "build.package": "cd ./package && npm pack ../src",
    "build.post": "rimraf ./src",
    "build.clean": "rimraf ./src && rimraf ./package"
  }

Adding unit and UI tests to your plugin

Publish script not working with NPM 5

Reported by sitefinitysteve in the community slack:
The publish script from the seed fails with "Cannot read property 'algorithm' of undefined" using NPM 5+.

Extend travis file

• Add stages for tslint, webpack, build (refer to facebook plugin for example)

Update with npm 5 specifics

As of npm 5 npm install already links when installing local folders so explicit linking is not required.

[] Update seed commands
[] Update related documentation (https://docs.nativescript.org/plugins/debugging-plugins and check other articles)

Migrate Vanila TS demos to use the new 'defaultPage' and 'application.run'

Currently the Vanila TS demo app located (here)[https://github.com/NativeScript/nativescript-plugin-seed/tree/master/demo/app] uses an outdate approach of starting the application using application.start. The latest recommended way is useing application.run

Example of what the app structure need to be can be found here: https://github.com/NativeScript/template-blank-ts/tree/master/app

Unable to apply changes on device

I am testing your plugin-seed on mac and getting the error mentioned below upon using the command npm run demo.ios

Model Name: MacBook Air
Model Identifier: MacBookAir6,1

Searching for devices...
Copying template files...
Installing tns-ios
Unable to apply changes on device: c21a4e34d4015a3aee65e427643a663fc8e66680. Error is: Command npm install [email protected] --silent --save-exact --save failed with exit code 243.
Executing after-watch hook from /Users/DeepakArora/Desktop/sss/nativescript-yourplugin/demo/hooks/after-watch/nativescript-dev-typescript.js

Feedback

Hi,

After being interviewed by the Nativescript team, I was asked to give feedback of the seed and especially the layout which did not fill my need.

So first here is an example of plugin I am developing and the structure that goes with it
https://github.com/Akylas/nativescript-collectionview

So the main features are:

• separated src folder from plugin folder:
  • src: actual sources folder and nothing else, no config files ! (tsconfig, node_modules ...). That way you can use symlink within any app to directly develop
  • plugin: folder where tsc outputs its files. That's what I use when I do file:// in a demo package.json. This is also where I do npm publish.
  • demo folder using the plugin as ``file://``` in package.json. That way you test the plugin like your user would use it.
  • dev demo folder where src folder is symlinked directly within the app. This makes very fast app development with live reload on plugin update

Separating src and plugin is very important and practical. Thanks to that we don't have ts and js files corresponding to the same class. This prevents a lot of errors in demo projects.

That workflow works really really well but have some issues too:

• using symlinks in the dev demo projects make so that you don't get plugin "platforms" folder. So you need to copy any dependency or resources within the dev demo folder. Can be a pain when you often change/update them
• using symlink there's an issue with native classes extension where java classes would not be regenerated on file change. For example adding a new override methods with symlinks, you need to re run the build process for the corresponding generated java class to be updated. (this one could be / should be fixed on the Nativescript side).

I hope that can help you with the seed. Any feedback, improvements are welcome.

Creating plugin (plugin-seed) with custom AndroidManifest settings is failing

From @NickIliev on May 10, 2018 12:12

Problem:
Creating a plugin with the plugin seed structure and using Android AAR library that needs some Android permissions. When the permissions are added in the plugin's AndroidManifest file the build is failing with

Unable to apply changes for device: emulator-5554. Error is: Failed to build plugin nativescript-sinch-new :
Error: Command failed: gradlew.bat -p D:\repositories\nativescript-sinch\demo\platforms\tempPlugin\nativescript_sinch_new assembleRelease -PcompileSdk=android-27 -PbuildToolsVersion=27.0.3 -PsupportVersion=26.0.0-alpha1
error: invalid file path 'D:\repositories\nativescript-sinch\demo\platforms\tempPlugin\nativescript_sinch_new\build\intermediates\manifests\aapt\release\AndroidManifest.xml'.


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':verifyReleaseResources'.
> java.util.concurrent.ExecutionException: java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error:
check logs for details

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s

The issue seems to be happening only when the command npm run demo.android is executed and change is made in the AndroidManifest.xml file of the plugin (e.g. adding user permissions). If the same permissions are directly added to the application AndroidManifest.xml the issue is not observed

Copied from original issue: NativeScript/android#1048

Postclone step failing to init fresh git repo

When I run postclone step and want to init a fresh github repo at the end, the step fails.

OS: Windows

Supporting default NativeScript theme in your UI plugin

http://docs.nativescript.org/ui/theme

Add analytics to plugins.nativescript.org

(check your mail for details)

npm run plugin.tscwatch - Does not apply changes in plugin to the demo

I would assume the way this is documented that running npm run plugin.tscwatch would apply any changes I make in the plugin files and update the running demo in the Simulator however with 2 terminal windows open, one with npm run plugin.tscwatch and the other running npm run demo.ios, when making changes to plugin files, the running demo does not respond or update.

Feedback from NativeScript Air ep. 5

Below is the summarized feedback the NativeScript Plugins team received during NativeScript Air ep.5. Feel free to contribute! We 💚 PRs!

🔴 Add more detailed instructions how to generate typings for 3rd party native libraries in the README of the seed
🌟 Provide demo-ng by default (or better - provide schematics about it, it's a good candidate. we aim for simple seed that serves plugin generic needs)
⬛️ Add debug configuration in the seed
🚩 Amend the mocha tests in typescript instead of javascript
⚫️ If possible, add some badges by default in the README i.e. travis, npm, downloads . See Firebase plugin for example
🔵 If possible, simplify the issue template

Thank you @EddyVerbruggen, @shiv19, @davecoffin for your feedback!

Feature request: support non-ui plugin types

While the structure that the plugin seed creates is very handy for plugins that are destined to add some functionality with native libraries, there is no clear path to enhance existing functionality.
For example, let's say I wanted to add a new method to the EXISTING View class, I need a plugin that creates the new method, appends the new method to the existing structure, and adds the necessary typescript definitions.
If I wanted to add a fadeIn method to the existing View class, I need to add this typescript definition:

import { View } from 'tns-core-modules/ui/core/view';

declare module 'tns-core-modules/ui/core/view' {
  interface View {
    fadeIn(duration?: string | number): Promise<void>;
}
}
...

Then I need to add the extra method to the existing View prototype.

import * as viewModule from 'tns-core-modules/ui/core/view';

viewModule.View.prototype.fadeIn = function(duration) {
...
}

So in this case I also don't need the extra platforms/android and platforms/ios folders or the files within.

This is one example of a plugin and would be great if it's supported.

Update seed travis to run webpack and build in paralel

Currently there are 3 stages - Lint, Webpack and Build. In order to improve the travis build time we can merge last two stages so they no longer depend to each other.

Building freshly cloned seed gets 'AAPT: error: resource drawable/icon not found'

Cloned the seed project, and the build fails:

Gradle build...
         + applying user-defined configuration from /home/ren/tmp/nativescript-plugin-test/demo/app/App_Resources/Android/app.gradle
Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
Configuration 'debugCompile' in project ':app' is deprecated. Use 'debugImplementation' instead.
         + adding nativescript runtime package dependency: nativescript-optimized
         + adding aar plugin dependency: /home/ren/tmp/nativescript-plugin-test/demo/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
/home/ren/tmp/nativescript-plugin-test/demo/platforms/android/app/build/intermediates/manifests/full/debug/AndroidManifest.xml:23: AAPT: error: resource drawable/icon (aka org.nativescript.demo:drawable/icon) not found.
    
/home/ren/tmp/nativescript-plugin-test/demo/platforms/android/app/build/intermediates/manifests/full/debug/AndroidManifest.xml:23: error: resource drawable/icon (aka org.nativescript.demo:drawable/icon) not found.
error: failed processing manifest.

Failed to execute aapt
com.android.ide.common.process.ProcessException: Failed to execute aapt
        at com.android.builder.core.AndroidBuilder.processResources(AndroidBuilder.java:796)
        at com.android.build.gradle.tasks.ProcessAndroidResources.invokeAaptForSplit(ProcessAndroidResources.java:551)
        at com.android.build.gradle.tasks.ProcessAndroidResources.doFullTaskAction(ProcessAndroidResources.java:285)

So it looks like the build is looking the non-existent icons. Copying some drawable png files into the expected directory gets the build to pass. But I suspect I missed something basic. I did follow the instructions to the letter though.

TNS version: 3.4.1
Android SDK build tool version: 26.1.1
npm: 5.6.1

Appreciate any suggestions.

Broken link in readme

The section about how to generate typings for iOS includes a link to https://docs.nativescript.org/core-concepts/ios-runtime/how-to/Use-Native-Libraries#troubleshooting which is down.

Pack incompatible with tns version 4.2.1

Make sure to check the demo app(s) for sample usage

Followed the tutorial here line for line https://docs.nativescript.org/plugins/building-plugins

Make sure to check the existing issues in this repository

No issues present

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Unable to pack plugin. It ends with this error

`
nativescript-version-number/publish/src/node_modules/semver/semver.js:310
throw new TypeError('Invalid Version: ' + version);
^

TypeError: Invalid Version: 4.2.1
`

Which platform(s) does your issue occur on?

• iOS/Android/Both
• iOS/Android versions
• emulator or device. What type of device?
  It happens during packing

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
  4.2.1

• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)

4.2.0

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
  tns-android: 4.0.0
  tns-ios: 4.0.0

• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)
  { "name": "nativescript-version-number", "version": "1.0.0", "description": "Your awesome NativeScript plugin.", "main": "version-number", "typings": "index.d.ts", "nativescript": { "platforms": { "android": "4.0.0", "ios": "4.0.0" } }, "scripts": { "tsc": "tsc", "build": "npm run tsc && npm run build.native", "build.native": "node scripts/build-native.js", "postclone": "npm i && node scripts/postclone.js && cd ../demo && npm i && npx rimraf -- package-lock.json && cd ../src", "test.android": "npm run tsc && npm run tslint && cd ../demo && tns build android && tns test android --justlaunch", "test.ios": "npm run tsc && npm run tslint && cd ../demo && tns build ios && tns test ios --justlaunch", "tslint": "cd .. && tslint \"**/*.ts\" --config tslint.json --exclude \"**/node_modules/**\"", "plugin.tscwatch": "npm run tsc -- -w", "demo.ios": "npm run tsc && cd ../demo && tns run ios --syncAllFiles --emulator", "demo.android": "npm run tsc && cd ../demo && tns run android --syncAllFiles --emulator", "demo.reset": "cd ../demo && npx rimraf -- hooks node_modules platforms package-lock.json", "plugin.prepare": "npm run build && cd ../demo && tns plugin remove nativescript-version-number && tns plugin add ../src", "clean": "npm run demo.reset && npx rimraf -- node_modules package-lock.json && npm i", "ci.tslint": "npm i && tslint '**/*.ts' --config '../tslint.json' --exclude '**/node_modules/**'", "prepack": "npm run build.native" }, "keywords": [ "NativeScript", "JavaScript", "Android", "iOS" ], "author": { "name": "Your Name", "email": "[email protected]" }, "bugs": { "url": "https://github.com/Rjgoolsby/nativescript-version-number/issues" }, "license": "Apache-2.0", "homepage": "https://github.com/Rjgoolsby/nativescript-version-number", "readmeFilename": "README.md", "devDependencies": { "tns-core-modules": "^4.2.0", "tns-platform-declarations": "^4.2.0", "typescript": "~2.8.2", "prompt": "^1.0.0", "rimraf": "^2.6.2", "tslint": "^5.11.0", "semver": "^5.5.0" }, "dependencies": {}, "bootstrapper": "nativescript-plugin-seed" }

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Simple follow the tutorial

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

Here's proof
in /nativescript-version-number/src/node_modules/semver/semver.js line 302 hardcode the version as4.2.0 (this isn't a fix but just proves the incompatibility) and it runs just fine. If you don't set it then it comes in as 4.2.1 and it throws an invalid version.

See code below

`
function SemVer(version, loose) {
if (version instanceof SemVer) {
if (version.loose === loose)
return version;
else
version = version.version;
} else if (typeof version !== 'string') {
throw new TypeError('Invalid Version: ' + version);
}

if (version.length > MAX_LENGTH)
throw new TypeError('version is longer than ' + MAX_LENGTH + ' characters')

if (!(this instanceof SemVer))
return new SemVer(version, loose);

debug('SemVer', version, loose);
this.loose = loose;
version = "4.2.0";
var m = version.trim().match(loose ? re[LOOSE] : re[FULL]);

if (!m)
throw new TypeError('Invalid Version: ' + version);

this.raw = version;

// these are actually numbers
this.major = +m[1];
this.minor = +m[2];
this.patch = +m[3];

if (this.major > MAX_SAFE_INTEGER || this.major < 0)
throw new TypeError('Invalid major version')

if (this.minor > MAX_SAFE_INTEGER || this.minor < 0)
throw new TypeError('Invalid minor version')

if (this.patch > MAX_SAFE_INTEGER || this.patch < 0)
throw new TypeError('Invalid patch version')

// numberify any prerelease numeric ids
if (!m[4])
this.prerelease = [];
else
this.prerelease = m[4].split('.').map(function(id) {
if (/^[0-9]+$/.test(id)) {
var num = +id;
if (num >= 0 && num < MAX_SAFE_INTEGER)
return num;
}
return id;
});

this.build = m[5] ? m[5].split('.') : [];
this.format();
}
`

[Proposal] Plugin development workflow after NativeScript 4.0

This issue is meant to describe the recommended plugin development workflow after NativeScript 4.0 is released.

Stay tuned for more details on the topic.