From 2d2aff3f48acf95722f2215a97b5b18d80989d8a Mon Sep 17 00:00:00 2001 From: James Liang Date: Sun, 24 Jun 2018 23:35:56 +0800 Subject: [PATCH] Added the type definition for Reflux 6.4.1, move the preview v0.4 files to v0 folder. --- types/reflux/index.d.ts | 51 +++++++- types/reflux/reflux-tests.tsx | 179 ++++++++++++++++++++++++++ types/reflux/tsconfig.json | 5 +- types/reflux/v0/index.d.ts | 59 +++++++++ types/reflux/{ => v0}/reflux-tests.ts | 0 types/reflux/v0/tsconfig.json | 29 +++++ types/reflux/v0/tslint.json | 6 + 7 files changed, 321 insertions(+), 8 deletions(-) create mode 100644 types/reflux/reflux-tests.tsx create mode 100644 types/reflux/v0/index.d.ts rename types/reflux/{ => v0}/reflux-tests.ts (100%) create mode 100644 types/reflux/v0/tsconfig.json create mode 100644 types/reflux/v0/tslint.json diff --git a/types/reflux/index.d.ts b/types/reflux/index.d.ts index 975e1b6e73..a00dffb7db 100644 --- a/types/reflux/index.d.ts +++ b/types/reflux/index.d.ts @@ -1,7 +1,11 @@ -// Type definitions for RefluxJS 0.4 +// Type definitions for RefluxJS 6.4 // Project: https://github.com/reflux/refluxjs // Definitions by: Maurice de Beijer +// James Liang // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from 'react'; export as namespace Reflux; @@ -17,6 +21,7 @@ export interface ListenFn { completed: Function; failed: Function; } + export interface Listenable { listen: ListenFn; } @@ -26,7 +31,8 @@ export interface Subscription { listenable: Listenable; } -export interface Store { +export class Store { + id: string; hasListener(listenable: Listenable): boolean; listenToMany(listenables: Listenable[]): void; validateListening(listenable: Listenable): string; @@ -36,10 +42,39 @@ export interface Store { fetchInitialState(listenable: Listenable, defaultCallback: Function): void; trigger(state: any): void; listen(callback: Function, bindContext: any): Function; + listenables: any; + state: Readonly; + setState(state: object): void; } -export interface ActionsDefinition { - [index: string]: any; +export class Component extends React.Component { + store: TOfStore; + stores: TOfStore[]; + storeKeys: string[]; + mapStoreToState(storeType: TOfStore, mappingFunc: (newState: any) => any): void; +} + +export class PureComponent extends React.PureComponent { + store: TOfStore; + stores: TOfStore[]; + storeKeys: string[]; + mapStoreToState(storeType: TOfStore, mappingFunc: (newState: any) => any): void; +} + +export interface ActionParameters { + children?: string[]; + asyncResult?: boolean; + sync?: boolean; + preEmit?: (...args: any[]) => undefined | any[]; + shouldEmit?: (...args: any[]) => boolean; +} + +export interface ActionDefinition extends ActionParameters { + actionName?: string; +} + +export interface ActionObjectDefinition { + [propertyName: string]: ActionParameters; } export interface Actions { @@ -48,12 +83,16 @@ export interface Actions { export function createStore(definition: StoreDefinition): Store; -export function createAction(definition?: ActionsDefinition): any; +export function createAction(definition?: ActionDefinition | string | object): any; -export function createActions(definitions: ActionsDefinition | string[]): any; +export function createActions(definitions: string[] | ActionObjectDefinition | ActionDefinition[]): any; export function connect(store: Store, key?: string): void; export function listenTo(store: Store, handler: string): void; export function setState(state: any): void; export function ListenerMixin(): any; + +export function initStore(typeOfStore: typeof Store): Store; + +export const ActionMethods: any; diff --git a/types/reflux/reflux-tests.tsx b/types/reflux/reflux-tests.tsx new file mode 100644 index 0000000000..588c1f1021 --- /dev/null +++ b/types/reflux/reflux-tests.tsx @@ -0,0 +1,179 @@ +import * as React from 'react'; +import * as Reflux from "reflux"; + +// Action Tests +const syncActions = Reflux.createActions([ + "statusUpdate", + "statusEdited", + "statusAdded" +]); + +const asyncActions = Reflux.createActions({ + fireBall: { asyncResult: true } +}); + +const completed = (isCompleted: boolean) => { + // do something +}; + +asyncActions.fireBall.listen(() => { + // Trigger async action + setTimeout(() => completed(true), 1000); +}); + +// Creates a DataStore +const statusStore = Reflux.createStore({ + // Initial setup + init() { + // Register statusUpdate action + this.listenTo(asyncActions.fireBall, this.onFireBall); + }, + // Callback + onFireBall(flag: boolean) { + const status = flag ? 'ONLINE' : 'OFFLINE'; + + // Pass on to listeners + this.trigger(status); + } +}); + +const asyncActionsFromObject = Reflux.createActions({ + loadData: { sync: false, asyncResult: true } +}); + +Reflux.createAction({ + children: ["progressed", "completed", "failed"] +}); + +let action = Reflux.createAction(); +action = Reflux.createAction({ children: ['delayComplete'] }); +action = Reflux.createAction({ actionName: 'load' }); +action = Reflux.createAction({ preEmit: (id: number) => { console.log(id); }, shouldEmit: (id: number) => { console.log(id); return id > 0; } }); + +let actions = Reflux.createActions([{ actionName: 'fireBall' }, { actionName: 'magicMissile', sync: false }]); +actions = Reflux.createActions({ fireBall: { sync: false } }); +actions = Reflux.createActions({ + load: { children: ['completed', 'failed'] } +}); +actions = Reflux.createActions(['load']); +actions = Reflux.createActions(["fireBall", "magicMissile"]); + +const someAsyncOperation = async () => Promise.resolve(); + +actions.magicMissile.listen(async () => someAsyncOperation()); + +// Store Tests + +const Store = Reflux.createStore({ + init() { + this.listenToMany(actions); + }, + onFireBall() { + // whoooosh! + }, + onMagicMissile() { + // bzzzzapp! + } +}); + +const ReactComponent = { + mixins: [Reflux.ListenerMixin] +}; + +// Reflux ActionMethods Tests +Reflux.ActionMethods.exampleMethod = () => console.log("test"); + +// ES6 Component and Store and Tests +const actionsForES6Test = Reflux.createActions(['loadData']); + +class ES6Store1 extends Reflux.Store { + constructor() { + super(); + this.listenables = actionsForES6Test; + this.state = { + error: false, + store1Data: null + }; + } + + onLoadData(recordId: number) { + this.setState({ error: false, store1Data: "Test Data from Store1: " + recordId.toString() }); + } +} + +const es6Store1Singleton = Reflux.initStore(ES6Store1); + +class ES6Store2 extends Reflux.Store { + constructor() { + super(); + this.listenables = actionsForES6Test; + this.state = { + error: false, + store2Data: null + }; + } + + onLoadData(recordId: number) { + this.setState({ error: false, store2Data: "Test Data from Store2: " + recordId.toString() }); + } +} + +class ES6ComponentWithSingleStore extends Reflux.Component { + constructor(props: any) { + super(props); + this.state = { + id: 1 + }; + this.store = ES6Store1; + } + + componentDidMount() { + actionsForES6Test.loadData(100); + } + + render() { + return
{this.state.data}
; + } + + redirect() { + this.props.history.push("/home"); + } +} + +class ES6ComponentWithMultipleStores extends Reflux.Component { + constructor(props: any) { + super(props); + this.state = { + id: 1 + }; + this.stores = [ES6Store1, ES6Store2]; + this.storeKeys = ['store1Data']; + } + + componentDidMount() { + actionsForES6Test.loadData(this.state.id); + } + + render() { + return
{this.state.data}
; + } +} + +class MyComponentWithMapStoreToState extends Reflux.Component { + constructor(props: any) { + super(props); + + this.mapStoreToState(ES6Store1, (fromStore) => { + const obj: any = {}; + if (fromStore.color) + obj.color = fromStore.color; + if (fromStore.data && fromStore.data.classToUse) + obj.class = fromStore.data.classToUse; + return obj; + }); + } + + render() { + return

The color is: {this.state.color}

; + } +} diff --git a/types/reflux/tsconfig.json b/types/reflux/tsconfig.json index 3ef22150e4..d51658ce93 100644 --- a/types/reflux/tsconfig.json +++ b/types/reflux/tsconfig.json @@ -6,10 +6,11 @@ "dom" ], "noImplicitAny": true, - "noImplicitThis": false, + "noImplicitThis": true, "strictNullChecks": false, "strictFunctionTypes": true, "baseUrl": "../", + "jsx": "react", "typeRoots": [ "../" ], @@ -19,6 +20,6 @@ }, "files": [ "index.d.ts", - "reflux-tests.ts" + "reflux-tests.tsx" ] } \ No newline at end of file diff --git a/types/reflux/v0/index.d.ts b/types/reflux/v0/index.d.ts new file mode 100644 index 0000000000..975e1b6e73 --- /dev/null +++ b/types/reflux/v0/index.d.ts @@ -0,0 +1,59 @@ +// Type definitions for RefluxJS 0.4 +// Project: https://github.com/reflux/refluxjs +// Definitions by: Maurice de Beijer +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +export as namespace Reflux; + +export interface StoreDefinition { + listenables?: any[]; + init?: Function; + getInitialState?: Function; + [propertyName: string]: any; +} + +export interface ListenFn { + (...params: any[]): any; + completed: Function; + failed: Function; +} +export interface Listenable { + listen: ListenFn; +} + +export interface Subscription { + stop: Function; + listenable: Listenable; +} + +export interface Store { + hasListener(listenable: Listenable): boolean; + listenToMany(listenables: Listenable[]): void; + validateListening(listenable: Listenable): string; + listenTo(listenable: Listenable, callback: Function, defaultCallback?: Function): Subscription; + stopListeningTo(listenable: Listenable): boolean; + stopListeningToAll(): void; + fetchInitialState(listenable: Listenable, defaultCallback: Function): void; + trigger(state: any): void; + listen(callback: Function, bindContext: any): Function; +} + +export interface ActionsDefinition { + [index: string]: any; +} + +export interface Actions { + [index: string]: Listenable; +} + +export function createStore(definition: StoreDefinition): Store; + +export function createAction(definition?: ActionsDefinition): any; + +export function createActions(definitions: ActionsDefinition | string[]): any; + +export function connect(store: Store, key?: string): void; +export function listenTo(store: Store, handler: string): void; +export function setState(state: any): void; + +export function ListenerMixin(): any; diff --git a/types/reflux/reflux-tests.ts b/types/reflux/v0/reflux-tests.ts similarity index 100% rename from types/reflux/reflux-tests.ts rename to types/reflux/v0/reflux-tests.ts diff --git a/types/reflux/v0/tsconfig.json b/types/reflux/v0/tsconfig.json new file mode 100644 index 0000000000..2994c6e2ce --- /dev/null +++ b/types/reflux/v0/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": false, + "strictNullChecks": false, + "strictFunctionTypes": true, + "baseUrl": "../../", + "typeRoots": [ + "../../" + ], + "paths": { + "reflux": [ + "reflux/v0" + ] + }, + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "reflux-tests.ts" + ] +} \ No newline at end of file diff --git a/types/reflux/v0/tslint.json b/types/reflux/v0/tslint.json new file mode 100644 index 0000000000..a62d0d4e68 --- /dev/null +++ b/types/reflux/v0/tslint.json @@ -0,0 +1,6 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "ban-types": false + } +}