diff --git a/types/fluxible-addons-react/fluxible-addons-react-tests.ts b/types/fluxible-addons-react/fluxible-addons-react-tests.ts new file mode 100644 index 0000000000..83323cd320 --- /dev/null +++ b/types/fluxible-addons-react/fluxible-addons-react-tests.ts @@ -0,0 +1,52 @@ +import { DispatcherInterface } from 'dispatchr'; +import { connectToStores, provideContext } from 'fluxible-addons-react'; +import { Fluxible, ComponentContext } from 'fluxible'; +import BaseStore = require('fluxible/addons/BaseStore'); +import * as React from 'react'; + +interface HomeProps { + stringValue: string; +} + +class Home extends React.Component { + constructor(props: HomeProps) { + super(props); + } +} + +class ExtendedStore extends BaseStore { + constructor(public dispatcher: DispatcherInterface) { + super(dispatcher); + + this.data = ""; + } + + static storeName = 'ExtendedStore'; + + static handlers = { + ACTION_NAME: 'actionHandler' + }; + + private data: string; + + actionHandler() { + this.emitChange(); + } + + setData(data: string): void { + this.data = data; + } + + getData(): string { + return this.data; + } +} + +// connecting Home react component to ExtendedStore +const ConnectedComponent = connectToStores(Home, [ExtendedStore], (context: ComponentContext, props: HomeProps) => { + return { + stringValue: context.getStore(ExtendedStore).getData(), + }; +}); + +const ConnectedComponentWithContext = provideContext(ConnectedComponent); diff --git a/types/fluxible-addons-react/index.d.ts b/types/fluxible-addons-react/index.d.ts new file mode 100644 index 0000000000..e3936992c7 --- /dev/null +++ b/types/fluxible-addons-react/index.d.ts @@ -0,0 +1,34 @@ +// Type definitions for fluxible-addons-react 0.2 +// Project: https://github.com/yahoo/fluxible#readme +// Definitions by: xbim +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 +/// +import * as React from 'react'; +import BaseStore = require('fluxible/addons/BaseStore'); +import { ComponentContext } from "fluxible"; + +/** + * Registers change listeners and retrieves state from stores using the `getStateFromStores` + * method + * @param Component component to pass state as props to. + * @param stores List of stores to listen for changes + * @param getStateFromStores function that receives all stores and should return + * the full state object. Receives `stores` hash and component `props` as arguments + * @param customContextTypes additional `contextTypes` that could be accessed from your `getStateFromStores` + * function + * @returns React.Component + */ +export function connectToStores( + Component: typeof React.Component, + stores: Array | string[], + getStateFromStores: (context: ComponentContext, props: any) => any, + customContextTypes?: any): typeof React.Component; + +/** + * Provides context prop to all children as React context + * @param component to wrap + * @param customContextTypes Custom contextTypes to add + * @returns React.Component + */ +export function provideContext(Component: typeof React.Component, customContextTypes?: any): typeof React.Component; diff --git a/types/fluxible-addons-react/tsconfig.json b/types/fluxible-addons-react/tsconfig.json new file mode 100644 index 0000000000..f3fad2aa56 --- /dev/null +++ b/types/fluxible-addons-react/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "esModuleInterop": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "fluxible-addons-react-tests.ts" + ] +} diff --git a/types/fluxible-addons-react/tslint.json b/types/fluxible-addons-react/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/fluxible-addons-react/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/fluxible-router/index.d.ts b/types/fluxible-router/index.d.ts index 097c2b3c2d..87d9532ed4 100644 --- a/types/fluxible-router/index.d.ts +++ b/types/fluxible-router/index.d.ts @@ -11,6 +11,10 @@ import BaseStore = require('fluxible/addons/BaseStore'); export class NavLink extends React.Component { } export class RouteStore extends BaseStore { + dehydrate(context?: FluxibleContext): any; + + rehydrate(state: any): void; + static withStaticRoutes(routes: object): typeof RouteStore; } diff --git a/types/fluxible/index.d.ts b/types/fluxible/index.d.ts index d317662e1b..b9f7d8d0b0 100644 --- a/types/fluxible/index.d.ts +++ b/types/fluxible/index.d.ts @@ -73,7 +73,7 @@ export class Fluxible { /** * Registers a store to the dispatcher so it can listen for actions */ - registerStore(store: StoreClass| typeof BaseStore): void; + registerStore(store: StoreClass | typeof BaseStore): void; /** * Creates a serializable state of the application and a given context for sending to the client @@ -109,6 +109,24 @@ export class FluxibleContext { */ plug(plugin: any): void; + /** + * Returns the context for action controllers + * @return Action context information + */ + getActionContext(): ActionContext; + + /** + * Returns the context for action controllers + * @return Component context information + */ + getComponentContext(): ComponentContext; + + /** + * Returns the context for stores + * @return Store context information + */ + getStoreContext(): StoreContext; + /** * Returns a serializable context state */ @@ -122,5 +140,81 @@ export class FluxibleContext { /** * Getter for store from dispatcher */ - getStore(store: { new(dispatcher?: DispatcherInterface): T; }): T; + getStore(store: { new(dispatcher: DispatcherInterface): T; }): T; +} + +export class ActionContext { + /** + * Dispatches a payload to all registered callbacks. + * @param action Action name + * @param payload + */ + dispatch(action: string, payload?: any): void; + + /** + * Proxy function to execute action + * @param action function that will be executed + * @param payload + * @param callback + */ + executeAction(action: (context: ActionContext, params: object, callback?: () => void) => void, payload?: any, callback?: any): void; + + /** + * Getter for store from dispatcher + */ + getStore(store: { new(dispatcher: DispatcherInterface): T; }): T; + + /** + * Data service. available only if fetch plugin is added + */ + service?: { + /** + * GET request to the server + * @param resource name of resourse + * @param params query string parameters as key-value object + * @param callback + */ + read: (resource: string, params: any, callback: (error: Error, data: any) => void) => void; + /** + * POST request to the server + * @param resource name of resourse + * @param params query string parameters as key-value object + * @param body json request body + * @param callback + */ + create: (resource: string, params: any, body: any, callback: (error: Error, data: any) => void) => void; + /** + * + * @param resource name of resourse + * @param params query string parameters as key-value object + * @param body json request body + * @param callback + */ + update: (resource: string, params: any, body: any, callback: (error: Error, data: any) => void) => void; + /** + * + * @param resource name of resourse + * @param params query string parameters as key-value object + * @param callback + */ + delete: (resource: string, params: any, callback: (error: Error, data: any) => void) => void; + }; +} + +export class ComponentContext { + /** + * Proxy function to execute action + * @param action function that will be executed + * @param payload + * @param callback + */ + executeAction(action: (context: ActionContext, params: object, callback?: () => void) => void, payload?: any): void; + + /** + * Getter for store from dispatcher + */ + getStore(store: { new(dispatcher: DispatcherInterface): T; }): T; +} + +export class StoreContext { }