├── .gitignore
├── README.md
├── state.json
├── .vscode
└── settings.json
├── src
├── store
│ └── index.ts
├── infrastructure
│ └── index.ts
├── app.ts
├── components
│ └── colorCanvas.ts
├── actions
│ └── index.ts
├── index.html
├── viewmodels
│ └── mainViewModel.ts
└── reducers
│ └── index.ts
├── tsconfig.json
├── typings
├── tsd.d.ts
├── object-assign
│ └── object-assign.d.ts
├── redux
│ └── redux.d.ts
├── mocha
│ └── mocha.d.ts
├── chai
│ └── chai.d.ts
└── knockout
│ └── knockout.d.ts
├── tsd.json
├── package.json
├── webpack.config.js
├── tests
├── actions
│ └── index.spec.ts
└── reducers
│ └── index.spec.ts
└── dist
├── index.html
└── app.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Redux with knockoutjs
2 |
3 | Small proof of concept application
--------------------------------------------------------------------------------
/state.json:
--------------------------------------------------------------------------------
1 | {
2 | "width":200,
3 | "height":200,
4 | "color":"yellow",
5 | "errors":[]
6 | }
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "typescript.tsdk": "./node_modules/typescript/lib"
4 | }
--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { createStore } from "redux";
3 | import colorReducers from '../reducers/index';
4 |
5 | const store = createStore(colorReducers)
6 |
7 | export default store;
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES6"
4 | },
5 | "files":[
6 | "typings/tsd.d.ts"
7 | ],
8 | "exclude":[
9 | "node_modules",
10 | "typings",
11 | "src/declarations/app.d.ts"
12 | ]
13 | }
--------------------------------------------------------------------------------
/typings/tsd.d.ts:
--------------------------------------------------------------------------------
1 |
2 | ///
3 | ///
4 | ///
5 | ///
6 | ///
7 |
--------------------------------------------------------------------------------
/src/infrastructure/index.ts:
--------------------------------------------------------------------------------
1 | export interface IApplicationState {
2 | width?: number;
3 | height?: number;
4 | color?: string;
5 | errors?:Array;
6 | }
7 |
8 | export enum ActionTypes {
9 | CHANGE_COLOR,
10 | CHANGE_WIDTH,
11 | CHANGE_HEIGHT
12 | }
13 |
14 | export interface IAction {
15 | type: ActionTypes,
16 | payload?: any
17 | }
--------------------------------------------------------------------------------
/typings/object-assign/object-assign.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for object-assign 4.0.1
2 | // Project: https://github.com/sindresorhus/object-assign
3 | // Definitions by: Christopher Brown
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | declare module "object-assign" {
7 | export default function objectAssign(target: any, ...sources: any[]): any;
8 | }
9 |
--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import {mainViewModel} from "./viewmodels/mainViewModel";
3 | import ko from "knockout";
4 | import {component, componentName} from "./components/colorCanvas";
5 |
6 | (function(){
7 | window.onload = () => {
8 | ko.components.register(componentName, component);
9 |
10 | var node:HTMLElement = document.getElementById("app");
11 | ko.applyBindings(mainViewModel, node);
12 | };
13 | })();
--------------------------------------------------------------------------------
/src/components/colorCanvas.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import ko from "knockout";
3 |
4 | export const componentName = "color-canvas";
5 | export const component = {
6 | viewModel:function(params){
7 | this.style = ko.pureComputed(() => {
8 | return {
9 | "display":"block",
10 | "backgroundColor":params.color(),
11 | "width":params.width(),
12 | "height":params.height()
13 | };
14 | });
15 | },
16 | template:`
17 |
18 | `
19 | };
--------------------------------------------------------------------------------
/src/actions/index.ts:
--------------------------------------------------------------------------------
1 | import {IAction, ActionTypes} from "../infrastructure/index";
2 |
3 | function changeWidth(width:number):IAction{
4 | return {
5 | type:ActionTypes.CHANGE_WIDTH,
6 | payload:width
7 | }
8 | }
9 |
10 | function changeHeight(height:number):IAction{
11 | return {
12 | type:ActionTypes.CHANGE_HEIGHT,
13 | payload:height
14 | };
15 | }
16 |
17 | function changeColor(color:string):IAction {
18 | return {
19 | type:ActionTypes.CHANGE_COLOR,
20 | payload:color
21 | }
22 | }
23 |
24 | export default {
25 | changeWidth,
26 | changeHeight,
27 | changeColor
28 | }
--------------------------------------------------------------------------------
/tsd.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "v4",
3 | "repo": "borisyankov/DefinitelyTyped",
4 | "ref": "master",
5 | "path": "typings",
6 | "bundle": "typings/tsd.d.ts",
7 | "installed": {
8 | "chai/chai.d.ts": {
9 | "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
10 | },
11 | "mocha/mocha.d.ts": {
12 | "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
13 | },
14 | "es6-collections/es6-collections.d.ts": {
15 | "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
16 | },
17 | "object-assign/object-assign.d.ts": {
18 | "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
19 | },
20 | "knockout/knockout.d.ts": {
21 | "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
22 | },
23 | "redux/redux.d.ts": {
24 | "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redux-knockoutjs",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "webpack.config.js",
6 | "directories": {
7 | "test": "tests"
8 | },
9 | "scripts": {
10 | "pretests":"webpack",
11 | "test": "mocha \"./tests/tests.js\"",
12 | "watch":"webpack --watch",
13 | "test:watch":"mocha \"./tests/tests.js\" --watch",
14 | "server":"webpack-dev-server --inline --watch --content-base dist",
15 | "compile":"webpack"
16 | },
17 | "author": "",
18 | "license": "ISC",
19 | "devDependencies": {
20 | "babel-core": "^6.2.1",
21 | "babel-loader": "^6.2.0",
22 | "babel-preset-es2015": "^6.1.18",
23 | "chai": "^3.4.1",
24 | "glob": "^6.0.1",
25 | "html-webpack-plugin": "^1.7.0",
26 | "mocha": "^2.3.4",
27 | "ts-loader": "^0.7.2",
28 | "typescript": "^1.8.0-dev.20151129",
29 | "webpack": "^1.12.9",
30 | "webpack-dev-server": "^1.14.0"
31 | },
32 | "dependencies": {
33 | "knockout": "^3.4.0",
34 | "object-assign": "^4.0.1",
35 | "redux": "^3.0.4"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require("webpack");
2 | var HtmlWebpackPlugin = require("html-webpack-plugin");
3 | var glob = require("glob");
4 |
5 | module.exports = [{
6 | entry:{
7 | "app":"./src/app.ts",
8 | vendor: ["knockout","object-assign","redux"]
9 | },
10 | output: {
11 | path: __dirname + "/dist",
12 | filename: "[name].js"
13 | },
14 | module: {
15 | loaders: [
16 | // note that babel-loader is configured to run after ts-loader
17 | {
18 | test: /\.ts(x?)$/,
19 | loader: "babel-loader?presets[]=es2015!ts-loader",
20 | exclude:"node_modules"
21 | }
22 | ]
23 | },
24 | resolve: {
25 | extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
26 | },
27 | plugins: [
28 | new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
29 | new HtmlWebpackPlugin({
30 | title:"Knockout and Redux",
31 | template:"./src/index.html"
32 | })
33 | ]
34 | },
35 | {
36 | entry:glob.sync("./tests/**/*.ts"),
37 | output: {
38 | path: __dirname + "/tests",
39 | filename: "tests.js"
40 | },
41 | module: {
42 | loaders: [
43 | // note that babel-loader is configured to run after ts-loader
44 | {
45 | test: /\.ts(x?)$/,
46 | loader: "babel-loader?presets[]=es2015!ts-loader",
47 | exclude:"node_modules"
48 | }
49 | ]
50 | },
51 | resolve: {
52 | extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
53 | }
54 | }]
--------------------------------------------------------------------------------
/tests/actions/index.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import {default as actions} from "../../src/actions/index";
3 | import {IAction, ActionTypes} from "../../src/infrastructure/index";
4 | import {assert} from "chai";
5 |
6 | describe("action", () => {
7 | describe("changeWidth", () => {
8 | let action:IAction;
9 | beforeEach(() => {
10 | action = actions.changeWidth(200);
11 | });
12 |
13 | it("should return action with type CHANGE_WIDTH", () => {
14 | assert.equal(action.type, ActionTypes.CHANGE_WIDTH);
15 | });
16 |
17 | it("should return action with payload 200", () => {
18 | assert.equal(action.payload, 200);
19 | });
20 | })
21 |
22 | describe("changeHeight", () => {
23 | let action:IAction;
24 | beforeEach(() => {
25 | action = actions.changeHeight(150);
26 | });
27 |
28 | it("should return action with type CHANGE_HEIGHT", () =>{
29 | assert.equal(action.type, ActionTypes.CHANGE_HEIGHT);
30 | });
31 |
32 | it("should return action with payload 150", () => {
33 | assert.equal(action.payload, 150);
34 | });
35 | });
36 |
37 | describe("changeColor", () => {
38 | let action:IAction;
39 | beforeEach(() => {
40 | action = actions.changeColor("red");
41 | });
42 |
43 | it("should return action with type CHANGE_COLOR", () => {
44 | assert.equal(action.type, ActionTypes.CHANGE_COLOR);
45 | })
46 |
47 | it("should return action with payload red", () => {
48 | assert.equal(action.payload, "red");
49 | });
50 | })
51 | })
--------------------------------------------------------------------------------
/typings/redux/redux.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for Redux v1.0.0
2 | // Project: https://github.com/rackt/redux
3 | // Definitions by: William Buchwalter , Vincent Prouillet
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | declare module Redux {
7 |
8 | interface ActionCreator extends Function {
9 | (...args: any[]): any;
10 | }
11 |
12 | interface Reducer extends Function {
13 | (state: any, action: any): any;
14 | }
15 |
16 | interface Dispatch extends Function {
17 | (action: any): any;
18 | }
19 |
20 | interface StoreMethods {
21 | dispatch: Dispatch;
22 | getState(): any;
23 | }
24 |
25 |
26 | interface MiddlewareArg {
27 | dispatch: Dispatch;
28 | getState: Function;
29 | }
30 |
31 | interface Middleware extends Function {
32 | (obj: MiddlewareArg): Function;
33 | }
34 |
35 | class Store {
36 | getReducer(): Reducer;
37 | replaceReducer(nextReducer: Reducer): void;
38 | dispatch(action: any): any;
39 | getState(): any;
40 | subscribe(listener: Function): Function;
41 | }
42 |
43 | function createStore(reducer: Reducer, initialState?: any): Store;
44 | function bindActionCreators(actionCreators: T, dispatch: Dispatch): T;
45 | function combineReducers(reducers: any): Reducer;
46 | function applyMiddleware(...middlewares: Middleware[]): Function;
47 | function compose(...functions: Function[]): T;
48 | }
49 |
50 | declare module "redux" {
51 | export = Redux;
52 | }
53 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Knockout and Redux
7 |
9 |
15 |
16 |
17 |
18 |
19 |
Knockout and Redux
20 |
48 |
19 |
Knockout and Redux
20 |
48 |