From 640536586ae4f3a7db43b041a44caf64021c7610 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Thu, 15 Oct 2015 15:17:03 +0300 Subject: [PATCH 01/14] flux-utils definitions added. --- flux/flux-utils.d.ts | 130 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 flux/flux-utils.d.ts diff --git a/flux/flux-utils.d.ts b/flux/flux-utils.d.ts new file mode 100644 index 0000000000..8437f9d4b5 --- /dev/null +++ b/flux/flux-utils.d.ts @@ -0,0 +1,130 @@ +// Type definitions for Flux/utils +// Project: http://facebook.github.io/flux/ +// Definitions by: Giedrius Grabauskas +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module FluxUtils { + + export class Container { + /** + * Create is used to transform a react class into a container + * that updates its state when relevant stores change. + * The provided base class must have static methods getStores() and calculateState(). + */ + static create(base: React.ComponentClass, options?: Object): React.ComponentClass; + } + + /** + * This class extends ReduceStore and defines the state as an immutable map. + */ + export class MapStore extends ReduceStore> { + + /** + * Access the value at the given key. + * Throws an error if the key does not exist in the cache. + */ + at(key: K): V; + + /** + * Check if the cache has a particular key + */ + has(key: K): boolean; + + /** + * Get the value of a particular key. + * Returns undefined if the key does not exist in the cache. + */ + get(key: K): V; + + /** + * Gets an array of keys and puts the values in a map if they exist, + * it allows providing a previous result to update instead of generating a new map. + * Providing a previous result allows the possibility of keeping the same reference if the keys did not change. + */ + getAll(keys: Iterable, prev?: Immutable.Map): Immutable.Map; + } + + export class ReduceStore extends Store { + /** + * Getter that exposes the entire state of this store. + * If your state is not immutable you should override this and not expose state directly. + */ + getState(): T; + + /** + * Constructs the initial state for this store. + * This is called once during construction of the store. + */ + getInitialState(): T; + + /** + * Reduces the current state, and an action to the new state of this store. + * All subclasses must implement this method. + * This method should be pure and have no side-effects. + */ + reduce(state: T, action: Object): T; + + /** + * Checks if two versions of state are the same. + * You do not need to override this if your state is immutable. + */ + areEqual(one: T, two: T): boolean; + + } + + export class Store { + + /** + * Constructs and registers an instance of this store with the given dispatcher. + */ + constructor(dispatcher: Flux.Dispatcher); + + /** + * Adds a listener to the store, when the store changes the given callback will be called. + * A token is returned that can be used to remove the listener. + * Calling the remove() function on the returned token will remove the listener. + */ + addListener(callback: Function): { remove: Function }; + + /** + * Returns the dispatcher this store is registered with. + */ + getDispatcher(): Flux.Dispatcher; + + /** + * Returns the dispatch token that the dispatcher recognizes this store by. + * Can be used to waitFor() this store. + */ + getDispatchToken(): string; + + /** + * Ask if a store has changed during the current dispatch. + * Can only be invoked while dispatching. + * This can be used for constructing derived stores that depend on data from other stores. + */ + hasChanged(): boolean; + + /** + *Emit an event notifying all listeners that this store has changed. + * This can only be invoked when dispatching. + * Changes are de-duplicated and resolved at the end of this store's __onDispatch function. + */ + __emitChange(): void; + + /** + * Subclasses must override this method. + * This is how the store receives actions from the dispatcher. + * All state mutation logic must be done during this method. + */ + __onDispatch(payload: Object): void; + } + + + +} + +declare module 'flux/utils' { + export = FluxUtils; +} From 438f5535c7f5cc7653cceb91d1d3a7f85b82a507 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Mon, 19 Oct 2015 18:55:20 +0300 Subject: [PATCH 02/14] Delete flux-utils.d.ts --- flux/flux-utils.d.ts | 130 ------------------------------------------- 1 file changed, 130 deletions(-) delete mode 100644 flux/flux-utils.d.ts diff --git a/flux/flux-utils.d.ts b/flux/flux-utils.d.ts deleted file mode 100644 index 8437f9d4b5..0000000000 --- a/flux/flux-utils.d.ts +++ /dev/null @@ -1,130 +0,0 @@ -// Type definitions for Flux/utils -// Project: http://facebook.github.io/flux/ -// Definitions by: Giedrius Grabauskas -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare module FluxUtils { - - export class Container { - /** - * Create is used to transform a react class into a container - * that updates its state when relevant stores change. - * The provided base class must have static methods getStores() and calculateState(). - */ - static create(base: React.ComponentClass, options?: Object): React.ComponentClass; - } - - /** - * This class extends ReduceStore and defines the state as an immutable map. - */ - export class MapStore extends ReduceStore> { - - /** - * Access the value at the given key. - * Throws an error if the key does not exist in the cache. - */ - at(key: K): V; - - /** - * Check if the cache has a particular key - */ - has(key: K): boolean; - - /** - * Get the value of a particular key. - * Returns undefined if the key does not exist in the cache. - */ - get(key: K): V; - - /** - * Gets an array of keys and puts the values in a map if they exist, - * it allows providing a previous result to update instead of generating a new map. - * Providing a previous result allows the possibility of keeping the same reference if the keys did not change. - */ - getAll(keys: Iterable, prev?: Immutable.Map): Immutable.Map; - } - - export class ReduceStore extends Store { - /** - * Getter that exposes the entire state of this store. - * If your state is not immutable you should override this and not expose state directly. - */ - getState(): T; - - /** - * Constructs the initial state for this store. - * This is called once during construction of the store. - */ - getInitialState(): T; - - /** - * Reduces the current state, and an action to the new state of this store. - * All subclasses must implement this method. - * This method should be pure and have no side-effects. - */ - reduce(state: T, action: Object): T; - - /** - * Checks if two versions of state are the same. - * You do not need to override this if your state is immutable. - */ - areEqual(one: T, two: T): boolean; - - } - - export class Store { - - /** - * Constructs and registers an instance of this store with the given dispatcher. - */ - constructor(dispatcher: Flux.Dispatcher); - - /** - * Adds a listener to the store, when the store changes the given callback will be called. - * A token is returned that can be used to remove the listener. - * Calling the remove() function on the returned token will remove the listener. - */ - addListener(callback: Function): { remove: Function }; - - /** - * Returns the dispatcher this store is registered with. - */ - getDispatcher(): Flux.Dispatcher; - - /** - * Returns the dispatch token that the dispatcher recognizes this store by. - * Can be used to waitFor() this store. - */ - getDispatchToken(): string; - - /** - * Ask if a store has changed during the current dispatch. - * Can only be invoked while dispatching. - * This can be used for constructing derived stores that depend on data from other stores. - */ - hasChanged(): boolean; - - /** - *Emit an event notifying all listeners that this store has changed. - * This can only be invoked when dispatching. - * Changes are de-duplicated and resolved at the end of this store's __onDispatch function. - */ - __emitChange(): void; - - /** - * Subclasses must override this method. - * This is how the store receives actions from the dispatcher. - * All state mutation logic must be done during this method. - */ - __onDispatch(payload: Object): void; - } - - - -} - -declare module 'flux/utils' { - export = FluxUtils; -} From 3d4207f11f34df6bcc5cdbece92b69fffed8fde6 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Mon, 19 Oct 2015 18:56:13 +0300 Subject: [PATCH 03/14] Update flux.d.ts Content moved from flux-utils.d.ts --- flux/flux.d.ts | 122 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) diff --git a/flux/flux.d.ts b/flux/flux.d.ts index bf5bafac4b..8a00eb1e1f 100644 --- a/flux/flux.d.ts +++ b/flux/flux.d.ts @@ -65,3 +65,125 @@ declare module Flux { declare module "flux" { export = Flux; } + +declare module FluxUtils { + + export class Container { + constructor(); + /** + * Create is used to transform a react class into a container + * that updates its state when relevant stores change. + * The provided base class must have static methods getStores() and calculateState(). + */ + static create(base: React.ComponentClass, options?: Object): React.ComponentClass; + } + + /** + * This class extends ReduceStore and defines the state as an immutable map. + */ + export class MapStore extends ReduceStore> { + + /** + * Access the value at the given key. + * Throws an error if the key does not exist in the cache. + */ + at(key: K): V; + + /** + * Check if the cache has a particular key + */ + has(key: K): boolean; + + /** + * Get the value of a particular key. + * Returns undefined if the key does not exist in the cache. + */ + get(key: K): V; + + /** + * Gets an array of keys and puts the values in a map if they exist, + * it allows providing a previous result to update instead of generating a new map. + * Providing a previous result allows the possibility of keeping the same reference if the keys did not change. + */ + getAll(keys: Immutable.IndexedIterable, prev?: Immutable.Map): Immutable.Map; + } + + export class ReduceStore extends Store { + /** + * Getter that exposes the entire state of this store. + * If your state is not immutable you should override this and not expose state directly. + */ + getState(): T; + + /** + * Constructs the initial state for this store. + * This is called once during construction of the store. + */ + getInitialState(): T; + + /** + * Reduces the current state, and an action to the new state of this store. + * All subclasses must implement this method. + * This method should be pure and have no side-effects. + */ + reduce(state: T, action: Object): T; + + /** + * Checks if two versions of state are the same. + * You do not need to override this if your state is immutable. + */ + areEqual(one: T, two: T): boolean; + + } + + export class Store { + + /** + * Constructs and registers an instance of this store with the given dispatcher. + */ + constructor(dispatcher: Flux.Dispatcher); + + /** + * Adds a listener to the store, when the store changes the given callback will be called. + * A token is returned that can be used to remove the listener. + * Calling the remove() function on the returned token will remove the listener. + */ + addListener(callback: Function): { remove: Function }; + + /** + * Returns the dispatcher this store is registered with. + */ + getDispatcher(): Flux.Dispatcher; + + /** + * Returns the dispatch token that the dispatcher recognizes this store by. + * Can be used to waitFor() this store. + */ + getDispatchToken(): string; + + /** + * Ask if a store has changed during the current dispatch. + * Can only be invoked while dispatching. + * This can be used for constructing derived stores that depend on data from other stores. + */ + hasChanged(): boolean; + + /** + *Emit an event notifying all listeners that this store has changed. + * This can only be invoked when dispatching. + * Changes are de-duplicated and resolved at the end of this store's __onDispatch function. + */ + __emitChange(): void; + + /** + * Subclasses must override this method. + * This is how the store receives actions from the dispatcher. + * All state mutation logic must be done during this method. + */ + __onDispatch(payload: Object): void; + } +} + +declare module 'flux/utils' { + export = FluxUtils; +} From 96173498302aeab1a726f8927bc7314d0b42db85 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Mon, 19 Oct 2015 19:06:19 +0300 Subject: [PATCH 04/14] Added references Added immutable and react references. --- flux/flux.d.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/flux/flux.d.ts b/flux/flux.d.ts index 8a00eb1e1f..5b6079d50b 100644 --- a/flux/flux.d.ts +++ b/flux/flux.d.ts @@ -1,8 +1,11 @@ // Type definitions for Flux // Project: http://facebook.github.io/flux/ -// Definitions by: Steve Baker +// Definitions by: Steve Baker , Giedrius Grabauskas // Definitions: https://github.com/borisyankov/DefinitelyTyped +/// +/// + declare module Flux { /** From ed11abd71a0d06fd37a65ee9d0908e5106b06347 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Tue, 24 Nov 2015 14:19:08 +0200 Subject: [PATCH 05/14] Removed immutable Immutable changed to any and added TODO. --- flux/flux.d.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/flux/flux.d.ts b/flux/flux.d.ts index 5b6079d50b..dc476f3bc6 100644 --- a/flux/flux.d.ts +++ b/flux/flux.d.ts @@ -3,7 +3,6 @@ // Definitions by: Steve Baker , Giedrius Grabauskas // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// /// declare module Flux { @@ -84,8 +83,8 @@ declare module FluxUtils { /** * This class extends ReduceStore and defines the state as an immutable map. */ - export class MapStore extends ReduceStore> { - + // TODO: Change to > + export class MapStore extends ReduceStore { /** * Access the value at the given key. * Throws an error if the key does not exist in the cache. @@ -108,7 +107,9 @@ declare module FluxUtils { * it allows providing a previous result to update instead of generating a new map. * Providing a previous result allows the possibility of keeping the same reference if the keys did not change. */ - getAll(keys: Immutable.IndexedIterable, prev?: Immutable.Map): Immutable.Map; + // TODO: Update with Immutable interface. + // getAll(keys: Immutable.IndexedIterable, prev?: Immutable.Map): Immutable.Map; + getAll(keys: any, prev?: any): any; } export class ReduceStore extends Store { From 56fa333e5a07268f39caa2ea9717742c1af67d8e Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 02:25:09 +0200 Subject: [PATCH 06/14] Imported FluxUtils and React Imported FluxUtils and React modules and added react typescript definitions reference. --- flux/flux-tests.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index f41d15aff1..52507a2248 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -1,6 +1,12 @@ /// +/// import flux = require('flux') +import FluxUtils = require('flux/utils') +import React = require('react') + +var Component = React.Component +var Container = FluxUtils.Container // // Basic dispatcher usage @@ -78,4 +84,6 @@ class CustomDispatcher extends flux.Dispatcher { var customDispatcher = new CustomDispatcher() -export = customDispatcher \ No newline at end of file +export = customDispatcher + + From 66f52639ef5e850bc71356852b2b5ebc8db1215d Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 02:26:37 +0200 Subject: [PATCH 07/14] Added test code --- flux/flux-tests.ts | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index 52507a2248..c804babd85 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -86,4 +86,41 @@ var customDispatcher = new CustomDispatcher() export = customDispatcher +// Sample Reduce Store +class CounterStore extends ReduceStore { + getInitialState(): number { + return 0; + } + reduce(state: number, action: Object): number { + switch (action.type) { + case 'increment': + return state + 1; + + case 'square': + return state * state; + + default: + return state; + } + } +} + +// Sample Flux container with CounterStore +class CounterContainer extends Component { + static getStores() { + return [CounterStore]; + } + + static calculateState(prevState) { + return { + counter: CounterStore.getState(), + }; + } + + render() { + return {this.state.counter}; + } +} + +const container = Container.create(CounterContainer); From f67ea5412d895e5e56db4e2c3e909363b50c6ef4 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 02:33:58 +0200 Subject: [PATCH 08/14] Removed JSX elements. --- flux/flux-tests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index c804babd85..33225178a5 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -119,7 +119,7 @@ class CounterContainer extends Component { } render() { - return {this.state.counter}; + return this.state.counter; } } From 5eb0edcee2c0015fc546a0ba79204abc898fddc5 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 02:40:50 +0200 Subject: [PATCH 09/14] Fixed test errors --- flux/flux-tests.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index 33225178a5..9f583475ef 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -7,6 +7,7 @@ import React = require('react') var Component = React.Component var Container = FluxUtils.Container +var ReduceStore = FluxUtils.ReduceStore // // Basic dispatcher usage @@ -92,7 +93,7 @@ class CounterStore extends ReduceStore { return 0; } - reduce(state: number, action: Object): number { + reduce(state: number, action: any): number { switch (action.type) { case 'increment': return state + 1; @@ -107,12 +108,12 @@ class CounterStore extends ReduceStore { } // Sample Flux container with CounterStore -class CounterContainer extends Component { +class CounterContainer extends Component { static getStores() { return [CounterStore]; } - static calculateState(prevState) { + static calculateState(prevState: any) { return { counter: CounterStore.getState(), }; From b8ce2921dce286372842e2c5efe731513e5bc452 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 02:45:53 +0200 Subject: [PATCH 10/14] ReduceStore import updated and changed extends. --- flux/flux-tests.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index 9f583475ef..0fe6e13d1a 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -7,7 +7,6 @@ import React = require('react') var Component = React.Component var Container = FluxUtils.Container -var ReduceStore = FluxUtils.ReduceStore // // Basic dispatcher usage @@ -87,8 +86,9 @@ var customDispatcher = new CustomDispatcher() export = customDispatcher + // Sample Reduce Store -class CounterStore extends ReduceStore { +class CounterStore extends FluxUtils.ReduceStore { getInitialState(): number { return 0; } From 3f99edd466ce2039ccdf9088e6b0d578c920df62 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 02:49:06 +0200 Subject: [PATCH 11/14] Object changed to any. --- flux/flux.d.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/flux/flux.d.ts b/flux/flux.d.ts index dc476f3bc6..c65892321c 100644 --- a/flux/flux.d.ts +++ b/flux/flux.d.ts @@ -77,7 +77,7 @@ declare module FluxUtils { * that updates its state when relevant stores change. * The provided base class must have static methods getStores() and calculateState(). */ - static create(base: React.ComponentClass, options?: Object): React.ComponentClass; + static create(base: React.ComponentClass, options?: any): React.ComponentClass; } /** @@ -130,7 +130,7 @@ declare module FluxUtils { * All subclasses must implement this method. * This method should be pure and have no side-effects. */ - reduce(state: T, action: Object): T; + reduce(state: T, action: any): T; /** * Checks if two versions of state are the same. @@ -145,7 +145,7 @@ declare module FluxUtils { /** * Constructs and registers an instance of this store with the given dispatcher. */ - constructor(dispatcher: Flux.Dispatcher); + constructor(dispatcher: Flux.Dispatcher); /** * Adds a listener to the store, when the store changes the given callback will be called. @@ -157,7 +157,7 @@ declare module FluxUtils { /** * Returns the dispatcher this store is registered with. */ - getDispatcher(): Flux.Dispatcher; + getDispatcher(): Flux.Dispatcher; /** * Returns the dispatch token that the dispatcher recognizes this store by. @@ -184,7 +184,7 @@ declare module FluxUtils { * This is how the store receives actions from the dispatcher. * All state mutation logic must be done during this method. */ - __onDispatch(payload: Object): void; + __onDispatch(payload: any): void; } } From 01f5b8f246217b8fdf44131b74eb78284f84b35c Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 03:00:46 +0200 Subject: [PATCH 12/14] Store called and moved to cosnt. --- flux/flux-tests.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index 0fe6e13d1a..4c83c8e1c3 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -107,15 +107,18 @@ class CounterStore extends FluxUtils.ReduceStore { } } +var Disaptcher: any; +const Store = new CounterStore(Dispatcher); + // Sample Flux container with CounterStore class CounterContainer extends Component { static getStores() { - return [CounterStore]; + return [Store]; } static calculateState(prevState: any) { return { - counter: CounterStore.getState(), + counter: Store.getState(), }; } From 3201084d33a46cdc09aadee5ea2085f8010fae70 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 03:02:37 +0200 Subject: [PATCH 13/14] Fixed mistype --- flux/flux-tests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index 4c83c8e1c3..d4f4f5510e 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -108,7 +108,7 @@ class CounterStore extends FluxUtils.ReduceStore { } var Disaptcher: any; -const Store = new CounterStore(Dispatcher); +const Store = new CounterStore(Disaptcher); // Sample Flux container with CounterStore class CounterContainer extends Component { From 06911fd64b6f30fff878c1f2f240c4e304644a7e Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Wed, 25 Nov 2015 03:08:28 +0200 Subject: [PATCH 14/14] Changed to use basicDispatcher in Store. --- flux/flux-tests.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/flux/flux-tests.ts b/flux/flux-tests.ts index d4f4f5510e..24369ef2dd 100644 --- a/flux/flux-tests.ts +++ b/flux/flux-tests.ts @@ -107,8 +107,7 @@ class CounterStore extends FluxUtils.ReduceStore { } } -var Disaptcher: any; -const Store = new CounterStore(Disaptcher); +const Store = new CounterStore(basicDispatcher); // Sample Flux container with CounterStore class CounterContainer extends Component {