Added CI support via Travis

isocroft · May 11, 2017 · 5658c26 · 5658c26
1 parent 95cbe98
commit 5658c26
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 29 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,6 @@
+node_modules
+example
+src
+tests
+README.md
+CONTRIBUTING.md
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+    - "0.11"
+script: node_modules/karma/bin/karma start radixx.conf.js --single-run
+before_install:
+    - export DISPLAY=:99.0
+    - sh -e /etc/init.d/xvfb start
+before_script:
+    - npm install
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,6 +1,10 @@
+# Preamble
+
+I'm very excited to see that you have decided (or planning to decide) to join in on this effort and contribute code and/or design proposition or bug fixes to the **Radixx** project. Welcome on board!   
+
 # Code Requests
 
-- define **Radixx.attachMiddleware(function: fn)**
+- define **Radixx.attachMiddleware(function: fn)** as part of _Radixx_ APIs as seen below:
 
 ```js
 
@@ -14,18 +18,19 @@
 	});
 ```
 
-- modify **Radixx.createAction(object: obj)**
+- modify **Radixx.createAction(object: obj)** to the form as seen below:
 
 ```js
 
 	// below is the form of the implementation
+
 	Radixx.createAction({
 		// used to identify an action
 		'doThing':{
 				type:'DO_THING',
 				// define what the payload for this action should be and look like
 				payloadDefinition:[
-					Radixx.Payload.typing.array.isRequired(),
+					Radixx.Payload.type.array.isRequired(),
 					Radixx.Payload.form.object.asPart()
 				]
 		}	
@@ -34,10 +39,12 @@
 
 - Optimize <q>onDispatch</q> event not to fire only when any store data ACTUALLY changes
 
-- See if there's a way to stop the propagation of _'storage'_ events whenever **Radixx** is making use of sessionStorage
+- See if there's a way to stop the propagation of _`storage`_ events whenever **Radixx** is making use of sessionStorage
+
+- Detect places where memory leaks happen or are likely to happen in the codebase and clean them up.
 
-- Detect memory leaks and clean them up.
+- Build and Integrate support for GraphQL (if possible build in a small and efficient GraphQL client as part of Radixx)
 
-- Build and Integrate support for GraphQL
+- Add store config options to the Radixx instance
 
-- Add store config options
+- Add _bower_ and _yarn_ package manager support
diff --git a/README.md b/README.md
@@ -1,9 +1,22 @@
 # Radixx
 
-This is a simple library that implements the **Facebook Flux Architecture** with a twist to how the entire application state is managed and changed/updated. It resembles **Redux** in a lot of ways. 
+This is a simple Javascript library that implements the **Facebook Flux Architecture** with a twist to how the entire application state is managed and changed/updated. It resembles **Redux** in a lot of ways. 
 
 ## How to Use (Vanilla JS)
 
+- First, download/install it from **NPM**
+
+[NPM][npm-url]
+
+[Download][downloads-url]
+
+```bash
+
+	$ npm install radixx
+```
+
+- Next, use it in your JavaScript application like so 
+
 ```html
 <!DOCTYPE html>
 <html>
@@ -87,6 +100,8 @@ This is a simple library that implements the **Facebook Flux Architecture** with
 
 				return area.put(todos);
 		});
+
+		console.log("stores registered: ", registeredStores.toString(), registeredStores.length);
 	}(this, this.Radixx));	
 	</script>
 </head>
@@ -113,25 +128,36 @@ This is a simple library that implements the **Facebook Flux Architecture** with
 
 			var mount_point = d.getElementById("todos");
 			var button = d.getElementById("undo-btn");
-			var li = null;
-			var list = w.store.getState();
-
-			list.forEach(function(item, i){
-				li = d.createElement("li");
-				li.setAttribute("data-key", i);
-				li.setAttribute("data-todo-overdue", item.is_overdue);
-				li.setAttribute("data-todo-done", String(item.todo.completed));
-				li.appendChild(d.createTextNode(item.todo.text));
-				mount_point.appendChild(li);
-			});
+			
+			function render(m){
+					var list = w.store.getState();
+					var li = null;
+
+					if(list.length == 0){
+						m.innerHTML = "";
+						return;
+					}
+
+					list.forEach(function(item, i){
+						li = d.createElement("li");
+						li.setAttribute("data-key", i);
+						li.setAttribute("data-todo-overdue", item.is_overdue);
+						li.setAttribute("data-todo-done", String(item.todo.completed));
+						li.appendChild(d.createTextNode(item.todo.text));
+						m.appendChild(li);
+					});
+			}		
 
 			button.disabled = !w.store.canUndo();
 			button.onclick = function(e){
 				// undo application state changes
 				w.store.undo();
 				this.disabled = !w.store.canUndo();
+				render(mount_point);
 			};
 
+			render(mount_point);
+
 		}(this, this.document));
 	</script>
 </body>
@@ -143,17 +169,17 @@ This is a simple library that implements the **Facebook Flux Architecture** with
 
 These are methods defined on the global **Radixx** object
 
-- **Radixx.createAction(** _Object_ actionCreationMap **)**
+- **Radixx.createAction(** _Object_ actionTagMap **)**
 
-> Used to create an action creators (in Flux Architecture parlance)
+> Used to create an action creators (in Flux Architecture parlance). An object literal having the action method names (as key) and the action tag (as value) is passed into this api method.
 
-- **Radixx.createStore(** _String_ storeTitle, _Function_ storeCallback [, _Array|Object_ defaultStoreRepresentation] **)**
+- **Radixx.createStore(** _String_ storeTitle, _Function_ storeCallback [, _Array|Object_ initialStoreState] **)**
 
 > Used to create a store to which action will be sent using action creators
 
 - **Radixx.onDispatch(** _Function_ dispatchListener **)**
 
-> Registers a function that is called whenever an action is disptached to the Hub (also called Dispatcher in Flux Architecture parlance)
+> Registers a function that is called whenever an action is disptached to the Hub (also called the `Dispatcher` in Flux Architecture parlance)
 
 - **Radixx.eachStore(** _Function_ storeIterator **)**
 
@@ -206,9 +232,9 @@ These are methods defined on the store object from **Radixx.createStore( ... )**
 ## Features
 
 - Finite Undo/Redo (cos we have got to have trade-offs - Performance suffers if you have infinite undo/redo as application state grows bigger)
-- Use of Mixins for ReactJS (even though most people think mixins are dead and composition should be the only thins used)
+- Use of Mixins for ReactJS and VueJS (even though most people think _mixins_ are dead and composition should be the only thing in used, i think mixins still have a place)
 - Can replace the store callback (similar to **replaceReducer()** in _Redux_)
-- An extended Loose Coupling between Radixx Dispatcher and Controllers/Controller Views.
+- An extended Loose Coupling between Radixx Dispatcher and Controllers/Components.
 - Configure the order in which the <q>dispacth</q> triggers the store callbacks.
 - A transparent way in separating mutation and asynchronousity in application state.
 - No need to **<q>emit</q>** change events from within a store registration callback.
@@ -227,7 +253,7 @@ These are methods defined on the store object from **Radixx.createStore( ... )**
 - Application UI State {a.k.a Volatile Data} -- **can't store** this in Radixx (Text Input - being entered, Animation Tween Properties/Values, Scroll Position Values, Text Box Caret Position, Mouse Position Values, Unserializable State - like functions)
 - Application Data State {a.k.a Non-Volatile Data} -- **can store** this in Radixx (Lists for Render fetched from API endpoints, any piece of Data displayed on the View)
 
-> NOTE: When using Radixx with ReactJS, it is best to ascribe/delegate Application UI State to {this.state} and {this.setState(...)} and Application Domain Data State to {this.props} and {properties={...}} respectively. One reason why Radixx recommends this approach is to avoid confusion as to when {this.setState} calls actually update both the view and {this.state} since {this.setState} is asynchronous in the way it operates.
+> NOTE: When using Radixx with ReactJS, it is best to ascribe/delegate Application UI State to {this.state} and {this.setState(...)} and Application Domain Data State to {this.props} and {properties={...}} respectively. One reason why Radixx recommends this approach is to avoid confusion as to when {this.setState} calls actually update both the DOM and {this.state} since {this.setState} is _asynchronous_ in the way it operates.
 
 
 ## About Redux (with respect to Radixx)
@@ -250,10 +276,10 @@ That being said, here is a round-up of what makes **Redux** a GREAT tool (for so
 
 # Troubles with Redux single store
 
-- A sizable amount of boilerplate code (especially with **connect()** and/or **mapStateToProps()**) is required to get Redux up and running.
+- A sizable amount of boilerplate code (especially with **connect()** and/or **mapStateToProps()** from _react-redux_ project) is required to get Redux up and running.
 - Dynamically structured state is impossible. (mature, complex apps need this the most).
 - Increased probability of state key(s) collisions between reducers (very likely in a big complex web app but highly unlikely in samll ones).
-- Global variables are bad always (This applies to the composition of the Redux application state itself).
+- Global variables are always a bad thing (This applies to the composition of the Redux application state itself) as you could `clobber` them unknowingly.
 - Performance suffers as your state tree gets larger (Immutability is a good thing...sometimes).
 - Each time the **connect()** decorator is called, it pulls in the entire application state (when using _react-redux_).
 
@@ -894,10 +920,17 @@ angular.module("appy.todos", [
 - Firefox 3.5+ (Gecko)
 - Safari 4.0+ (AppleWebkit)
 
+## Gotchas/Caveats
+
+- Trying to `swap` the store callback using **swapCallback()** before setting a store listener using **setChnageListener()** will always throw a type error.
+
 ## License
 
 MIT
 
 ## Contributing
 
-Please feel free to open an issue or send in a pull request. I'll be very glad you did. You can also reach me on Twitter [@isocroft](https://twitter.com/isocroft). See the **CONTRIBUTING.md** file for more details.
+Please feel free to open an issue, fix a bug or send in a pull request. I'll be very glad you did. You can also reach me on Twitter [@isocroft](https://twitter.com/isocroft). See the **CONTRIBUTING.md** file for more details.
+
+[npm-url]: https://npmjs.com/package/Radixx
+[downloads-url]: https://npmjs.com/package/Radixx
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+ "name":"radixx",
+ "version":"0.0.4",
+ "description":"A simple and efficient JavaScript library for managing application state based on Facebooks' Flux Architecture with a twist",
+ "scripts":{
+    "lint":"grunt js-lint"
+ },
+ "author": {
+    "name": "Ifeora Okechukwu",
+    "email": "[email protected]"
+  },
+  "contributors": [
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/isocroft/Radixx"
+  },
+  "dependencies": {
+
+  },
+  "homepage": "https://github.com/isocroft/Radixx",
+  "devDependencies": {
+    "jasmine-core": "^2.2.0",
+    "karma": "^0.12.31",
+    "karma-firefox-launcher": "^0.1.4",
+    "karma-jasmine": "^0.3.5"
+  },
+  "engines": {
+    "node": ">= 0.10.25"
+  },
+  "main":"dist/radixx.min.js",
+  "readmeFilename": "README.md",
+  "bugs": {
+    "url": "https://github.com/isocroft/Radixx/issues"
+  }
+}
diff --git a/radixx.conf.js b/radixx.conf.js
@@ -0,0 +1,67 @@
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'src/*.js' , 'tests/specs/*.js'
+    ],
+
+    plugins: [
+         'karma-jasmine',
+         'karma-firefox-launcher'
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Firefox'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+  });
+};