Skip to content

docs: Update Readme #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 23, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!--
We, the rest of the NativeScript community, thank you for your
contribution!
To help the rest of the community review your change, please follow the instructions in the template.
-->

<!-- PULL REQUEST TEMPLATE -->
<!-- (Update "[ ]" to "[x]" to check a box) -->

## PR Checklist

- [ ] The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
- [ ] There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
- [ ] All existing tests are passing
- [ ] Tests for the changes are included

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

## What is the new behavior?
<!-- Describe the changes. -->

Fixes/Implements/Closes #[Issue Number].

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->

<!--
BREAKING CHANGES:
[Describe the impact of the changes here.]
Migration steps:
[Provide a migration path for existing applications.]
-->

79 changes: 79 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
# Contributing to NativeScript Plugin Seed

:+1: First of all, thank you for taking the time to contribute! :+1:

Here are some guides on how to do that:

<!-- TOC depthFrom:2 -->

- [Code of Conduct](#code-of-conduct)
- [Reporting Bugs](#reporting-bugs)
- [Requesting Features](#requesting-features)
- [Submitting a PR](#submitting-a-pr)
- [Where to Start](#where-to-start)

<!-- /TOC -->

## Code of Conduct
Help us keep a healthy and open community. We expect all participants in this project to adhere to the [NativeScript Code Of Conduct](https://github.com/NativeScript/codeofconduct).


## Reporting Bugs

1. Always update to the most recent master release; the bug may already be resolved.
2. Search for similar issues in the issues list for this repo; it may already be an identified problem.
3. If this is a bug or problem that is clear, simple, and is unlikely to require any discussion -- it is OK to open an issue on GitHub with a reproduction of the bug including workflows and screenshots. If possible, submit a Pull Request with a failing test, entire application or module. If you'd rather take matters into your own hands, fix the bug yourself (jump down to the [Submitting a PR](#submitting-a-pr) section).

## Requesting Features

1. Use Github Issues to submit feature requests.
2. First, search for a similar request and extend it if applicable. This way it would be easier for the community to track the features.
3. When requesting a new feature, please provide as much detail as possible about why you need the feature in your apps. We prefer that you explain a need rather than explain a technical solution for it. That might trigger a nice conversation on finding the best and broadest technical solution to a specific need.

## Submitting a PR

Before you begin:
* Make sure there is an issue for the bug or feature you will be working on.

Following these steps is the best way to get your code included in the project:

1. Fork and clone the nativescript-plugin-seed repo:
```bash
git clone https://github.com/<your-git-username>/nativescript-plugin-seed.git
# Navigate to the newly cloned directory
cd nativescript-plugin-seed
# Add an "upstream" remote pointing to the original repo.
git remote add upstream https://github.com/NativeScript/nativescript-plugin-seed.git
```
2. Create a branch for your PR
```bash
git checkout -b <my-fix-branch> master
```

3. The fun part! Make your code changes. Make sure you:
- Follow the [code conventions guide](https://github.com/NativeScript/NativeScript/blob/master/CodingConvention.md).
- Follow the [commit message guidelines](https://github.com/NativeScript/NativeScript/blob/pr-template/CONTRIBUTING.md#commit-messages)
- Setup your development workflow. The seed itself is a plugin so you can follow the [development setup][https://github.com/NativeScript/nativescript-plugin-seed#development-setup] described in the README.
- Write unit tests for your fix or feature. If this is not possible, explain how your change can be tested.
> NOTE: For changes in the postclone step, make sure you create tests in `seed-tests/postclone.tests.js`!

4. Before you submit your PR:
- Rebase your changes to the latest master: `git pull --rebase upstream master`.
- Ensure all unit test are green. How?
- Go to `seed-tests`
- Run `npm install`
- Run `npm run test.ios` or `npm run test.android`
- Ensure your changes pass tslint validation. (run `npm run tslint` in the root of the repo).

6. Push your fork. If you have rebased you might have to use force-push your branch:
```
git push origin <my-fix-branch> --force
```

7. [Submit your pull request](https://github.com/NativeScript/nativescript-plugin-seed/compare) and compare to `NativeScript/nativescript-plugin-seed`. Please, fill in the Pull Request template - it will help us better understand the PR and increase the chances of it getting merged quickly.

It's our turn from there on! We will review the PR and discuss changes you might have to make before merging it! Thanks!

## Where to Start

If you want to contribute, but you are not sure where to start - look for issues labeled [`help wanted`](https://github.com/NativeScript/nativescript-plugin-seed/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
85 changes: 55 additions & 30 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,28 @@

> This repo is heavily based on [@NathanWalker](https://github.com/NathanWalker)'s [Plugin Seed](https://github.com/NathanWalker/nativescript-plugin-seed). Thanks, Nathan!

<!-- vscode-markdown-toc -->
* [TL;DR](#TLDR)
* [Long Description](#LongDescription)
* [What is NativeScript plugin seed?](#WhatisNativeScriptpluginseed)
* [Plugin folder structure](#Pluginfolderstructure)
* [Getting started](#Gettingstarted)
* [Development setup](#Developmentsetup)
* [Linking to CocoaPod or Android Arsenal plugins](#LinkingtoCocoaPodorAndroidArsenalplugins)
* [Unittesting](#Unittesting)
* [Publish to NPM](#PublishtoNPM)
* [TravisCI](#TravisCI)
* [Referring tns-core-modules in the Plugin](#ReferringtnscoremodulesinthePlugin)

<!-- vscode-markdown-toc-config
numbering=false
autoSave=true
/vscode-markdown-toc-config -->
<!-- /vscode-markdown-toc -->

## <a name='TLDR'></a>TL;DR
<!-- TOC depthFrom:2 -->

- [TL;DR](#tldr)
- [Long Description](#long-description)
- [What is NativeScript plugin seed?](#what-is-nativescript-plugin-seed)
- [Plugin folder structure](#plugin-folder-structure)
- [Getting started](#getting-started)
- [Development setup](#development-setup)
- [Linking to CocoaPod or Android Arsenal plugins](#linking-to-cocoapod-or-android-arsenal-plugins)
- [Generating typings for iOS](#generating-typings-for-ios)
- [Generating typings for Android](#generating-typings-for-android)
- [Clean plugin and demo files](#clean-plugin-and-demo-files)
- [Unittesting](#unittesting)
- [Publish to NPM](#publish-to-npm)
- [TravisCI](#travisci)
- [Referring tns-core-modules in the Plugin](#referring-tns-core-modules-in-the-plugin)
- [Contribute](#contribute)
- [Get Help](#get-help)

<!-- /TOC -->

## 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.
Expand All @@ -30,9 +32,9 @@ The NativeScript plugin seed is built to be used as a starting point by NativeSc
4. `npm run demo.ios` or `npm run demo.android` to run the demo.
5. In another command prompt/terminal `npm run plugin.tscwatch` to watch typescript changes in the plugin and to automatically apply them in the demo.

## <a name='LongDescription'></a>Long Description
## Long Description

### <a name='WhatisNativeScriptpluginseed'></a>What is NativeScript plugin seed?
### What is NativeScript plugin seed?

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. It expands on several things [presented here](http://developer.telerik.com/featured/creating-nativescript-plugins-in-typescript/).
What does the seed give you out of the box?
Expand All @@ -47,7 +49,7 @@ What does the seed give you out of the box?

![Plugin seed demo](https://github.com/NativeScript/nativescript-plugin-seed/blob/master/screenshots/demo.png?raw=true)

### <a name='Pluginfolderstructure'></a>Plugin folder structure
### Plugin folder structure

|Folder/File name| Description
|---|---|
Expand All @@ -60,7 +62,7 @@ What does the seed give you out of the box?
|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](#Gettingstarted) 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](#Publishtonpm) section|

### <a name='Gettingstarted'></a>Getting started
### 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`
Expand All @@ -73,7 +75,7 @@ What does the seed give you out of the box?

Now you can continue with the development of your plugin by using the [Development setup](#Developmentsetup) described below.

#### <a name='Developmentsetup'></a>Development setup
#### Development setup
For easier development and debugging purposes continue with the following steps:

1. Open a command prompt/terminal, navigate to `src` folder and run `npm run demo.ios` or `npm run demo.android` to run the demo.
Expand All @@ -83,7 +85,7 @@ Now go and make a change to your plugin. It will be automatically applied to the

NOTE: If you need to use a native library in your plugin or do some changes in Info.plist/AndroidManifest.xml, these cannot be applied to the demo project only by npm link. In such scenario, you need to use `tns plugin add ../src` from the `demo` so that the native libraries and changes in the above-mentioned files are applied in the demo. Then you can link again the code of your plugin in the demo by using `npm run plugin.link` from the `src`.

### <a name='LinkingtoCocoaPodorAndroidArsenalplugins'></a>Linking to CocoaPod or Android Arsenal plugins
### 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:

Expand All @@ -102,6 +104,23 @@ Take a look at these existing plugins for how that can be done very simply:
* [nativescript-cardview](https://github.com/bradmartin/nativescript-cardview/tree/master/platforms)
* [nativescript-floatingactionbutton](https://github.com/bradmartin/nativescript-floatingactionbutton/tree/master/src/platforms)

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](https://docs.nativescript.org/runtimes/ios/how-to/Use-Native-Libraries#troubleshooting)
- 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](https://developer.apple.com/library/content/documentation/Swift/Conceptual/BuildingCocoaApps/InteractingWithObjective-CAPIs.html#//apple_ref/doc/uid/TP40014216-CH4-ID53).

#### Generating typings for Android

- Clone [Android DTS Generator repo](https://github.com/NativeScript/android-dts-generator)
- Follow the steps in the [README](https://github.com/NativeScript/android-dts-generator/blob/master/README.md)
- 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 `node_modules` and `demo/platforms` folders to reinstall them fresh.
Expand All @@ -116,7 +135,7 @@ 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.

### <a name='Unittesting'></a>Unittesting
### Unittesting
The plugin seed automatically adds Jasmine-based unittest support to your plugin.
Open `demo/app/tests/tests.js` and adjust its contents so the tests become meaningful in the context of your plugin and its features.

Expand All @@ -129,7 +148,7 @@ npm run test.ios
npm run test.android
```

### <a name='PublishtoNPM'></a>Publish to NPM
### Publish to NPM

When you have everything ready to publish:

Expand All @@ -140,13 +159,13 @@ If you just want to create a package, go to `publish` folder and execute `pack.s

**NOTE**: To run bash script on Windows you can install [GIT SCM](https://git-for-windows.github.io/) and use Git Bash.

### <a name='TravisCI'></a>TravisCI
### TravisCI

The plugin structure comes with a fully functional .travis.yml file that deploys the testing app on Android emulator and iOS simulator and as a subsequent step runs the tests from [UnitTesting section](#Unittesting). All you have to do, after cloning the repo and implementing your plugin and tests, is to sign up at [https://travis-ci.org/](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.

### <a name='ReferringtnscoremodulesinthePlugin'></a>Referring tns-core-modules in the Plugin
### Referring tns-core-modules in the Plugin
We recommend to use full imports of `tns-core-modules` due to [an issue in Angular CLI](https://github.com/angular/angular-cli/issues/5618#issuecomment-306479219). Read more detailed explanation in [this discussion](https://github.com/NativeScript/nativescript-plugin-seed/pull/32#discussion_r131147787).

Ultimately after the issue in Angular CLI is fixed this would not be a restriction, but till then the recommended approach is to import from `tns-core-modules` using full path. Here is an example:
Expand Down Expand Up @@ -177,3 +196,9 @@ import * as app from 'application';
````
import * as app from 'tns-core-modules/application';
````

## Contribute
We love PRs! Check out the [contributing guidelines](CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for issues labeled [`help wanted`](https://github.com/NativeScript/tns-core-modules-widgets/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).

## Get Help
Please, use [github issues](https://github.com/NativeScript/tns-core-modules-widgets/issues) strictly for [reporting bugs](CONTRIBUTING.md#reporting-bugs) or [requesting features](CONTRIBUTING.md#requesting-new-features). For general questions and support, check out the [NativeScript community forum](https://discourse.nativescript.org/) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).
7 changes: 4 additions & 3 deletions seed-tests/package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
{
"devDependencies": {
"async": "^2.4.1",
"cross-env": "^5.1.3",
"glob": "^7.1.2",
"jasmine": "^2.6.0",
"ncp": "^2.0.0",
"rimraf": "^2.6.1"
},
"scripts": {
"test.android": "ANDROID=true jasmine --config=jasmine.config.json",
"test.ios": "IOS=true jasmine --config=jasmine.config.json"
"test.android": "cross-env ANDROID=true jasmine --config=jasmine.config.json",
"test.ios": "cross-env IOS=true jasmine --config=jasmine.config.json"
},
"dependencies": {}
}
}
19 changes: 0 additions & 19 deletions seed-tests/postclone.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -133,25 +133,6 @@ describe('postclone', function () {
});
});

it('should create an npm link to the src folder', function (done) {
testUtils.getNpmLinks(function (links) {
var expectedLink = links.filter(function (item) {
return item.startsWith("nativescript-" + constants.TEST_PLUGIN_NAME + "@1.0.0") && item.endsWith(constants.SEED_COPY_LOCATION + "/src");
});

expect(expectedLink.length).toEqual(1);
done();
});
});

it('should link the plugin in the demo folder', function (done) {
var demoPluginPackageJson = constants.SEED_COPY_LOCATION + "/demo/node_modules/nativescript-" + constants.TEST_PLUGIN_NAME + "/package.json";
var srcPluginPackageJson = constants.SEED_COPY_LOCATION + "/src/package.json";

expect(fs.realpathSync(demoPluginPackageJson)).toEqual(fs.realpathSync(srcPluginPackageJson));
done();
});

it('should prepare a working demo with passing tests', function (done) {
var testsCommand = "cd " + constants.SEED_COPY_LOCATION + "/src && npm run test";
testsCommand += testUtils.isAndroid() ? ".android" : ".ios";
Expand Down
11 changes: 6 additions & 5 deletions seed-tests/tests.utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ exports.copySeedDir = function copySeedDir(seedLocation, copyLocation, callback)
rimraf.sync(copyLocation);

ncp(seedLocation, copyLocation, {
filter: function (fileName) {
if (fileName.indexOf("seed-tests/" + constants.SEED_COPY_LOCATION) > -1 ||
fileName.indexOf("demo/node_modules") > -1 ||
fileName.indexOf("src/node_modules") > -1 ||
fileName.indexOf("demo/platforms") > -1) {
filter: function (fileName) {
if ((fileName.indexOf("seed-tests") > -1 && fileName.indexOf(constants.SEED_COPY_LOCATION) > -1) ||
(fileName.indexOf("demo") > -1 && fileName.indexOf("node_modules") > -1)||
(fileName.indexOf("seed-tests") > -1 && fileName.indexOf("node_modules") > -1) ||
(fileName.indexOf("src") > -1 && fileName.indexOf("node_modules") > -1) ||
(fileName.indexOf("demo") > -1 && fileName.indexOf("platforms") > -1)) {
return false;
}

Expand Down
2 changes: 1 addition & 1 deletion src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
},
"scripts": {
"tsc": "tsc -skipLibCheck",
"build": "npm i && tsc",
"build": "npm i && tsc",
"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",
Expand Down