aurelia-store - npm Package Compare versions

Comparing version 0.18.0 to 0.19.0

dist/amd/aurelia-store.d.ts

@@ -12,1 +12,2 @@ import { FrameworkConfiguration } from "aurelia-framework";
 export * from "./logging";
+export * from "./decorator";

dist/amd/aurelia-store.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./store", "./history", "./store", "./test-helpers", "./history", "./middleware", "./logging"], function (require, exports, store_1, history_1, store_2, test_helpers_1, history_2, middleware_1, logging_1) {
+define(["require", "exports", "./store", "./history", "./store", "./test-helpers", "./history", "./middleware", "./logging", "./decorator"], function (require, exports, store_1, history_1, store_2, test_helpers_1, history_2, middleware_1, logging_1, decorator_1) {
     "use strict";
@@ -25,3 +25,4 @@ function __export(m) {
     __export(logging_1);
+    __export(decorator_1);
 });
 //# sourceMappingURL=aurelia-store.js.map

dist/commonjs/aurelia-store.d.ts

@@ -12,1 +12,2 @@ import { FrameworkConfiguration } from "aurelia-framework";
 export * from "./logging";
+export * from "./decorator";

dist/commonjs/aurelia-store.js

@@ -26,2 +26,3 @@ "use strict";
 __export(require("./logging"));
+__export(require("./decorator"));
 //# sourceMappingURL=aurelia-store.js.map

dist/es2015/aurelia-store.d.ts

@@ -12,1 +12,2 @@ import { FrameworkConfiguration } from "aurelia-framework";
 export * from "./logging";
+export * from "./decorator";

dist/es2015/aurelia-store.js

@@ -20,2 +20,3 @@ import { Store } from "./store";
 export * from "./logging";
+export * from "./decorator";
 //# sourceMappingURL=aurelia-store.js.map

dist/native-modules/aurelia-store.d.ts

@@ -12,1 +12,2 @@ import { FrameworkConfiguration } from "aurelia-framework";
 export * from "./logging";
+export * from "./decorator";

dist/native-modules/aurelia-store.js

@@ -20,2 +20,3 @@ import { Store } from "./store";
 export * from "./logging";
+export * from "./decorator";
 //# sourceMappingURL=aurelia-store.js.map

dist/system/aurelia-store.d.ts

@@ -12,1 +12,2 @@ import { FrameworkConfiguration } from "aurelia-framework";
 export * from "./logging";
+export * from "./decorator";

dist/system/aurelia-store.js

@@ -1,2 +0,2 @@
-System.register(["./store", "./history", "./test-helpers", "./middleware", "./logging"], function (exports_1, context_1) {
+System.register(["./store", "./history", "./test-helpers", "./middleware", "./logging", "./decorator"], function (exports_1, context_1) {
     "use strict";
@@ -46,2 +46,5 @@ var __moduleName = context_1 && context_1.id;
                 exportStar_1(logging_1_1);
+            },
+            function (decorator_1_1) {
+                exportStar_1(decorator_1_1);
             }
@@ -48,0 +51,0 @@ ],

package.json

 {
   "name": "aurelia-store",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Aurelia single state store based on RxJS",
@@ -26,3 +26,4 @@ "keywords": [
     "build": "concurrently \"npm run build:amd\" \"npm run build:commonjs\" \"npm run build:es2015\" \"npm run build:native-modules\" \"npm run build:system\"",
-    "prepare-release": "cross-env npm run build && semantic-release pre && npm publish && semantic-release post"
+    "prepare-release": "cross-env npm run build && semantic-release pre && npm publish && semantic-release post",
+    "precommit": "npm run lint"
   },
@@ -110,2 +111,3 @@ "jest": {
     "gulp-sass": "^3.1.0",
+    "husky": "^0.14.3",
     "jest": "^22.0.4",
@@ -112,0 +114,0 @@ "jest-css-modules": "^1.1.0",

README.md

@@ -9,4 +9,2 @@ # aurelia-store
 
-THIS IS WORK IN PROGRESS, DO NOT USE YET FOR PRODUCTION
-
 ## Install
@@ -89,2 +87,4 @@ Install the npm dependency via
 
+Typically you'd want to subscribe to the exposed observable `state` and work with the streamed state.
+
 An example VM and View can be seen below:
@@ -111,2 +111,3 @@
   public state: State;
+  private subscription: Subscription;
 
@@ -121,3 +122,3 @@ constructor(private store: Store<State>) {
     // Since the state is an observable you can use all kinds of RxJS witchcraft to skip,filter,map streamed states.
-    this.store.state.subscribe(
+    this.subscription = this.store.state.subscribe(
       (state: State) => this.state = state
@@ -127,2 +128,6 @@ );
 
+  detached() {
+    this.subscription.unsubscribe();
+  }
+
   addAnotherFramework() {
@@ -135,2 +140,4 @@ // you create a new state by dispatching your action using the stores method
 
+> Don't forget to unsubscribe from any previous subscriptions you've made. A good place for that could be the `detached` hook as shown in above example.
+
 ```html
@@ -158,2 +165,52 @@ <template>
 
+## Using the connectTo decorator
+Instead of handling subscriptions and disposal of those by yourself you may prefer to use the `connectTo` decorator.
+What it does is to connect your stores state automatically to a class property called `state`. It does so by overriding the
+`bind` method and the `unbind` method for proper setup and teardown of a subscription. The actual description is stored in another property
+called `_stateSubscription`.
+
+Above ViewModel example thus could look the following:
+
+```typescript
+import { autoinject } from 'aurelia-dependency-injection';
+import { State } from './state';
+import { Store, connectTo } from "aurelia-store";
+
+...
+
+@autoinject()
+@connectTo()
+export class App {
+
+  public state: State;
+
+  constructor(private store: Store<State>) {
+    this.store.registerAction("DemoAction", demoAction);
+  }
+
+  addAnotherFramework() {
+    // you create a new state by dispatching your action using the stores method
+    this.store.dispatch(demoAction);
+  }
+}
+```
+Note that there is no more need to use attached nor bind. We still declare the state property, in order to properly type-cast and use it in the TypeScript workflow. If you're using pure JavaScript, you may omit that definition.
+
+In case you want to provide a custom selector instead of subscribing to the whole state, you may pass a function, which will get the store passed and return an observable to be used instead of `store.state`. The decorator accepts a generic interface which matches your State, for a better TypeScript workflow.
+
+```typescript
+@connectTo<State>((store) => store.state.pluck("bar"))
+
+// resulting state will be only the value of bar
+```
+
+If you also want to override the default target property `state`, you can pass in a settings object instead of the function, where the prop selector matches above function and target specifies the new target property.
+
+```typescript
+@connectTo<State>({
+  selector: (store) => store.state.pluck("bar"), // same as above
+  target: "foo" // link to foo instead of state property
+})
+```
+
 ## Execution order
@@ -160,0 +217,0 @@ If multiple actions are dispatched, they will get queued and executed one after another in order to make sure that each dispatch starts with an up to date state.

src/aurelia-store.ts

@@ -33,1 +33,2 @@ import { FrameworkConfiguration } from "aurelia-framework";
 export * from "./logging";
+export * from "./decorator";

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

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

Improved metrics

Total package byte prevSize

341127

increased by13.75%

Number of package files

135

increased by15.38%

Lines of code

5135

increased by11.78%

Number of lines in readme file

469

increased by13.83%

Worsened metrics

Dev dependency count

21

increased by5%

No dependency changes