feat: ivy UseStoreon hook

Author: valburyakov

README.md

@@ -57,11 +57,9 @@ export const defaultStore = createStore<State, Events>([counterModule, !environm
 
 // your NgModule
 
-import { StoreonModule, STOREON } from '@storeon/angular';
+import { STOREON } from '@storeon/angular';
 
 @NgModule({
-  imports: [StoreonModule], // StoreonModule
-  ...
   providers: [{
     provide: STOREON,
     useValue: defaultStore  // your store
@@ -98,3 +96,36 @@ export class AppComponent implements OnInit {
 }
 
 ```
+
+```typescript
+
+// example using Ivy hooks
+
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { UseStoreon } from '@storeon/angular';
+import { Events, State } from '../app.module';
+import { Dispatch } from 'storeon';
+
+@Component({
+  selector: 'app-hook-counter',
+  templateUrl: './hook-counter.component.html',
+  styleUrls: ['./hook-counter.component.scss']
+})
+@UseStoreon<State, Events>({keys: [ 'count' ], dispatcher: 'dispatch'})
+export class HookCounterComponent implements OnInit {
+
+  count: Observable<number>;
+  dispatch: Dispatch<Events>;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  increment() {
+    this.dispatch('inc');
+  }
+}
+
+```

projects/ng-storeon/src/lib/useStoreon.decorator.ts

@@ -0,0 +1,32 @@
+import { ɵɵdirectiveInject as directiveInject } from '@angular/core';
+import { StoreonService } from './storeon.service';
+
+
+/***
+ *
+ * Experimental feature, works only with Ivy renderer
+ * Patches the component with keys from storeon store
+ *
+ */
+export function UseStoreon<State, Events>(config: {
+  keys: Array<keyof State>,
+  dispatcher?: string
+}) {
+  return (cmpType) => {
+    const originalFactory = cmpType.ngComponentDef.factory;
+    cmpType.ngComponentDef.factory = () => {
+      const cmp = originalFactory(cmpType.ngComponentDef.type);
+
+      const storeon = directiveInject<StoreonService<State, Events>>(StoreonService );
+
+      config.keys.forEach(key => cmp[key] = storeon.useStoreon(key));
+
+       if (config.dispatcher) {
+         cmp[config.dispatcher] = storeon.dispatch.bind(storeon);
+       }
+
+      return cmp;
+    };
+
+  };
+}

projects/ng-storeon/src/public_api.ts

@@ -5,3 +5,4 @@
 export * from './lib/storeon.service';
 export * from './lib/storeon.module';
 export * from './lib/storeon.token';
+export * from './lib/useStoreon.decorator';

src/app/app-routing.module.ts

@@ -3,10 +3,12 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { CounterComponent } from './counter/counter.component';
 import { Counter1Component } from './counter1/counter1.component';
+import { HookCounterComponent } from './hook-counter/hook-counter.component';
 
 const routes: Routes = [
   { path: 'counter', component: CounterComponent },
-  { path: 'counter1', component: Counter1Component }
+  { path: 'counter1', component: Counter1Component },
+  { path: 'ivy-hook', component: HookCounterComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
-import { StoreonModule, STOREON } from '@storeon/angular';
+import { STOREON } from '@storeon/angular';
 
 import createStore, { Module, StoreonEvents } from 'storeon';
 import devtools from 'storeon/devtools';
@@ -12,6 +12,7 @@ import { AppComponent } from './app.component';
 import { MenuComponent } from './menu/menu.component';
 import { CounterComponent } from './counter/counter.component';
 import { Counter1Component } from './counter1/counter1.component';
+import { HookCounterComponent } from './hook-counter/hook-counter.component';
 
 // State structure
 export interface State {
@@ -43,11 +44,11 @@ export const defaultStore = createStore<State, Events>([counterModule, !environm
     MenuComponent,
     CounterComponent,
     Counter1Component,
+    HookCounterComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    StoreonModule
   ],
   providers: [{
     provide: STOREON,

src/app/hook-counter/hook-counter.component.html

@@ -0,0 +1,4 @@
+<div>
+  <button (click)="increment()">Increment counter</button>
+  <span>Total count: {{ count | async }}</span>
+</div>

src/app/hook-counter/hook-counter.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HookCounterComponent } from './hook-counter.component';
+
+describe('HookCounterComponent', () => {
+  let component: HookCounterComponent;
+  let fixture: ComponentFixture<HookCounterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HookCounterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HookCounterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/hook-counter/hook-counter.component.spec.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { UseStoreon } from '@storeon/angular';
+import { Events, State } from '../app.module';
+import { Dispatch } from 'storeon';
+
+@Component({
+  selector: 'app-hook-counter',
+  templateUrl: './hook-counter.component.html',
+  styleUrls: ['./hook-counter.component.scss']
+})
+@UseStoreon<State, Events>({keys: [ 'count' ], dispatcher: 'dispatch'})
+export class HookCounterComponent implements OnInit {
+
+  count: Observable<number>;
+  dispatch: Dispatch<Events>;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  increment() {
+    this.dispatch('inc');
+  }
+}

src/app/hook-counter/hook-counter.component.ts

@@ -1,4 +1,5 @@
 <ul>
   <li><a [routerLink]="['/counter']" routerLinkActive="router-link-active">Counter</a></li>
+  <li><a [routerLink]="['/ivy-hook']" routerLinkActive="router-link-active">Counter with Ivy Hook</a></li>
   <li><a [routerLink]="['/counter1']" routerLinkActive="router-link-active">Counter 1</a></li>
 </ul>