https://github.com/vakrilov/ngrx-devtools-nativescript
https://github.com/vakrilov/ngrx-devtools-nativescript
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vakrilov/ngrx-devtools-nativescript
- Owner: vakrilov
- Created: 2016-05-11T14:11:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-01-13T07:56:21.000Z (about 5 years ago)
- Last Synced: 2025-04-03T10:38:21.780Z (10 months ago)
- Language: TypeScript
- Size: 2.81 MB
- Stars: 30
- Watchers: 6
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-nativescript - ngrx Dev Tools - Implementation of a devtools monitor similar to those available in @ngrx/devtools for NativeScript. (Awesome {N} [](https://github.com/sindresorhus/awesome) / Table of Contents)
README
## Looking for maintainers
This repo is looking for maintainers. If you are interested please ping me on
# ngrx-devtools-nativescript
Implementation of a devtools monitor similar to those available in [@ngrx/store-devtools](https://github.com/ngrx/store-devtools) for [NativeScript](https://www.nativescript.org/).
## Install
```sh
npm i ngrx-devtools-nativescript
```
## How to use
First of all you should instrument your @ngrx/store using `StoreModule.provideStore(...)`. Check out [@ngrx/devtools readme](https://github.com/ngrx/devtools/blob/master/README.md) for how to do that.
Import the `NativeScriptDevToolsMonitors` in your app(or other) module and add store-dev-tools instrumentation by importing `StoreDevtoolsModule.instrumentStore()`:
```typescript
import { NgModule } from "@angular/core";
import { StoreModule } from '@ngrx/store';
import { NativeScriptDevToolsMonitors } from "ngrx-devtools-nativescript";
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
imports: [
NativeScriptModule,
NativeScriptDevToolsMonitors,
StoreModule.provideStore({ ... }),
StoreDevtoolsModule.instrumentStore()
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule { };
```
Use `` component inside you application - preferably in the root of the visual tree.
```typescript
import { NSDockMonitor } from "ngrx-devtools-nativescript";
@Component({
selector: "my-app",
directives: [NSDockMonitor],
template: `
//...
`
})
export class AppComponent {
//...
}
```
You can specify what part of the screen should be covered by the dev-tools slideout with the `screenCover` property.
## Example
Example projects:
* [counter](https://github.com/vakrilov/ngrx-devtools-nativescript/tree/master/examples/counter)
* [tic-tac-toe](https://github.com/vakrilov/ngrx-devtools-nativescript/tree/master/examples/tic-tac-toe)
## Pure Redux example with Vanilla JS {N} App
* [reduxDemo](https://github.com/shiv19/nativescript-redux-poc)
## Contributing
* Source files for this tool (as an Angular library) are located: `./projects/ngrx-devtools-nativescript/src/lib`
* Build output will be in: `./dist/ngrx-devtools-nativescript`
* Build commands:
```sh
npm i
ng build ngrx-devtools-nativescript --prod
cd dist/ngrx-devtools-nativescript
npm publish # or 'npm pack' for a local build
```