@politie/ngx-sherlock - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.5

index.d.ts

 export * from './ngx-sherlock.module';
 export * from './pipes';
+export * from './change-detection';
 export * from './types';

ngx-sherlock.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"exports":[{"from":"./types"}],"metadata":{"NgxSherlockModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"value","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"transform":[{"__symbolic":"method"}],"subscribe":[{"__symbolic":"method"}],"selectStrategy":[{"__symbolic":"method"}],"updateLatestValue":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}},"origins":{"NgxSherlockModule":"./ngx-sherlock.module","ɵa":"./pipes/value.pipe"},"importAs":"@politie/ngx-sherlock"}
+{"__symbolic":"module","version":3,"exports":[{"from":"./types"}],"metadata":{"NgxSherlockModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"value","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"transform":[{"__symbolic":"method"}],"subscribe":[{"__symbolic":"method"}],"selectStrategy":[{"__symbolic":"method"}],"updateLatestValue":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}},"origins":{"NgxSherlockModule":"./ngx-sherlock.module","ɵa":"./pipes/value.pipe"},"importAs":"@politie/ngx-sherlock"}

package.json

 {
   "name": "@politie/ngx-sherlock",
-  "version": "1.0.0-beta.1",
-  "description": "ngx-sherlock is an Angular tooling library to be used with the @politie/sherlock distributed reactive state management library.",
+  "version": "1.0.0-beta.5",
+  "description": "NgxSherlock is a library with angular bindings for the Sherlock reacive state library.",
   "private": false,
@@ -10,3 +10,3 @@ "main": "./bundles/ngx-sherlock.umd.js",
     "test": "node ./tasks/test",
-    "build": "npm run test && node ./tasks/build && shx mv dist/@politie dist/politie",
+    "build": "npm run test && node ./tasks/build",
     "g": "node ./node_modules/angular-librarian",
@@ -44,26 +44,26 @@ "lint": "tslint ./src/**/*.ts",
   "bugs": {
-    "url": "https://github.com/politie/sherlock/issues"
+    "url": "https://github.com/politie/ngx-sherlock/issues"
   },
-  "homepage": "https://github.com/politie/sherlock#readme",
+  "homepage": "https://github.com/politie/ngx-sherlock#readme",
   "devDependencies": {
-    "@angular/compiler-cli": "^5.0.2",
+    "@angular/compiler-cli": "^4.0.0",
     "@politie/sherlock-proxy": "^1.0.0-beta.0",
-    "@types/jasmine": "2.8.2",
-    "@types/node": "^8.0.53",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
     "angular-librarian": "1.0.0-beta.14",
-    "angular2-template-loader": "0.6.2",
+    "angular2-template-loader": "0.6.0",
     "awesome-typescript-loader": "^3.0.0",
-    "codelyzer": "~4.0.1",
+    "codelyzer": "~3.0.0",
     "coveralls": "^3.0.0",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.26.1",
     "css-to-string-loader": "^0.1.3",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.5",
-    "fs-extra": "^4.0.2",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.8.5",
+    "fs-extra": "^2.1.2",
     "html-webpack-plugin": "^2.19.0",
     "immutable": "^3.8.2",
-    "istanbul-instrumenter-loader": "^3.0.0",
-    "jasmine-core": "2.8.0",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.7.1",
+    "istanbul-instrumenter-loader": "^1.2.0",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
     "karma-chrome-launcher": "^2.0.0",
@@ -76,23 +76,26 @@ "karma-coverage-istanbul-reporter": "^1.3.0",
     "np": "^2.12.0",
+    "phantomjs-prebuilt": "^2.1.7",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.3",
-    "rollup": "0.52.0",
+    "rollup": "0.43.0",
     "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.1.0",
     "rollup-plugin-node-resolve": "3.0.0",
     "rollup-plugin-sourcemaps": "0.4.2",
     "rollup-plugin-uglify": "2.0.1",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^4.0.1",
     "script-loader": "^0.7.0",
-    "semver": "5.4.1",
+    "semver": "5.3.0",
     "shx": "^0.2.2",
-    "source-map-loader": "^0.2.3",
-    "style-loader": "^0.19.0",
+    "source-map-loader": "^0.1.5",
+    "style-loader": "^0.13.1",
     "tslint": "^5.0.0",
     "tslint-loader": "^3.0.0",
-    "typescript": "~2.6.1",
-    "typings": "^2.1.1",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.8.1",
+    "typescript": "^2.6.2",
+    "typings": "^0.8.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^2.2.0",
     "webpack-dev-server": "^2.2.0",
-    "webpack-merge": "^4.1.1",
+    "webpack-merge": "^0.14.0",
     "webpack-node-externals": "^1.5.4"
@@ -104,14 +107,13 @@ },
   "peerDependencies": {
-    "@angular/common": "^5.0.2",
-    "@angular/compiler": "^5.0.2",
-    "@angular/core": "^5.0.2",
-    "@angular/forms": "^5.0.2",
-    "@angular/platform-browser": "^5.0.2",
-    "@angular/platform-browser-dynamic": "^5.0.2",
-    "@politie/informant": "^1.0.0-beta.0",
-    "@politie/sherlock": "^1.0.0-beta.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@politie/informant": "^1.0.0-beta.3",
+    "@politie/sherlock": "^1.0.0-beta.2",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.12"
   }
 }

pipes/value.pipe.d.ts

@@ -5,2 +5,43 @@ import { ChangeDetectorRef, OnDestroy, PipeTransform, WrappedValue } from '@angular/core';
 /**
+ * Base reaction strategy.
+ */
+export interface ReactionStrategy {
+    /** set up a reaction */
+    createReaction<T>(async: Derivable<T> | DerivableProxy<T>, updateLatestValue: (value: T) => void): void;
+    /** dispose internal reaction */
+    dispose(): void;
+}
+/**
+ * Reaction strategy for Derivable values.
+ */
+export declare class DerivableStrategy implements ReactionStrategy {
+    /**
+     * Disposes the internal reaction reference.
+     */
+    dispose: () => void;
+    /**
+     * Sets up the reaction.
+     *
+     * @param async provided derivable
+     * @param updateLatestValue function to run whenever a new value is emitted
+     */
+    createReaction<T>(async: Derivable<T>, updateLatestValue: (value: T) => void): void;
+}
+/**
+ * Reaction strategy for DerivableProxy values.
+ */
+export declare class DerivableProxyStrategy implements ReactionStrategy {
+    /**
+     * Disposes the internal reaction reference.
+     */
+    dispose: () => void;
+    /**
+     * Sets up the reaction.
+     *
+     * @param async provided derivableProxy
+     * @param updateLatestValue function to run whenever a new value is emitted
+     */
+    createReaction<T>(async: DerivableProxy<T>, updateLatestValue: (value: T) => void): void;
+}
+/**
  * The {@link ValuePipe} can be used to unwrap `Derivable` or `DerivableProxy` values in templates. Like Angular's
@@ -7,0 +48,0 @@ * [AsyncPipe]{@link https://angular.io/api/common/AsyncPipe}, the

README.md

@@ -31,5 +31,73 @@ # Ngx Sherlock
 
+### `autoDetectChanges`
+
+**Signature**:
+```typescript
+autoDetectChanges(detectorRef: ChangeDetectorRef): void;
+```
+
+The function `autoDetectChanges` will automatically run a change detection cycle when `Derivables` or `DerivableProxies` within a component's template change internal state. The function should be called in an `OnInit` lifecycle hook of a component or directive.
+
+The `autoDetectChanges` function guarantees model and view fidelity, meaning one can easily use Angular's forms and template functionality.
+
+#### Example
+
+`trusty-sidekick.component.ts`:
+```typescript
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
+import { autoDetectChanges } from '@politie/ngx-sherlock';
+import { atom } from '@politie/sherlock';
+import { ProxyDescriptor } from '@politie/sherlock-proxy';
+
+@Component({
+    selector: 'trusty-sidekick',
+    template: `
+        <input type="text" [(ngModel)]="sidekick$.firstname.$value" placeholder="First name">
+        <input type="text" [(ngModel)]="sidekick$.surname.$value" placeholder="Surname">
+        <sidekick-greeter [name]="sidekick$"></sidekick-greeter>
+    `,
+})
+export class TrustySidekickComponent {
+    readonly sidekick$ = new ProxyDescriptor().$create(atom({firstname: 'John', surname: 'Watson'}));
+}
+
+@Component({
+    selector: 'sidekick-greeter',
+    template: `
+        <h2 *ngIf="!beObnoxious">Well hello there, {{name.firstname.$value}} {{name.surname.$value}}!</h2>
+        <h2 *ngIf="beObnoxious">So good of you to finally join us, {{name.surname.$value}}...</h2>
+        
+        <button (click)="toggle()">Change mood</button>     
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidekickGreeterComponent implements OnInit {
+    @Input() name: DerivableProxy<{ firstname: string, surname: string }>;
+    obnoxious$ = atom(false);
+
+    get beObnoxious() {
+        return this.obnoxious$.get();
+    }
+
+    constructor(private readonly cdr: ChangeDetectorRef) { }
+
+    ngOnInit() {
+        // Here we call #autoDetectChanges which will automatically react on changes in the state of
+        // SidekickGreeterComponent#name.
+        autoDetectChanges(this.cdr);
+    }
+
+    toggle() {
+        this.obnoxious$.swap(mood => !mood);
+    }
+}
+```
+
+---
+
 ### `ValuePipe`
 
-The `ValuePipe` unwraps a `Derivable` or `DerivableProxy` value and triggers the `ChangeDetectorRef` whenever an internal value changes and a change detection cycle is needed.
+The `ValuePipe` unwraps a `Derivable` or `DerivableProxy` value and triggers the `ChangeDetectorRef` whenever an internal value changes
+and a change detection cycle is needed. This allows a component to have an `OnPush` `ChangeDetectionStrategy`, greatly increasing
+performance.
 
@@ -46,3 +114,3 @@ #### Example
 ```typescript
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { Atom, atom } from '@politie/sherlock';
@@ -53,2 +121,3 @@
     templateUrl: 'my.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -59,5 +128,5 @@ export class MyComponent implements OnInit {
     ngOnInit() {
-        setInterval(() => counter$.swap(i => i++), 1000);
+        setInterval(() => this.counter$.swap(i => i++), 1000);
     }
 }
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2807716

increased by4651.99%

Dependency count

10

decreased by-9.09%

Number of package files

21

increased by23.53%

Lines of code

22753

increased by2573.68%

Number of lines in readme file

128

increased by116.95%

Worsened metrics

Dev dependency count

52

increased by6.12%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

9

increased byInfinity%

No dependency changes