Add support for AngularJS.

Author: beauby

README.md

@@ -144,15 +144,18 @@ Currently, the store does not handle `links` and `meta` attributes.
 
 ### AngularJS
 
-In order to use jsonapi-datastore inside an AngularJS project, simply require the plugin in your `index.html` and then make a factory:
+jsonapi-datastore is bundled with an AngularJs wrapper. Just include `ng-jsonapi-datastore.js` in your `index.html` and require the module `beauby.jsonApiDataStore` in your application.
+You can then use the `JsonApiDataStore` factory, which is essentially an instance of `JsonApiDataStore`, as follows:
+
 ```javascript
 angular
   .module('myApp')
-  .factory('JsonApiDataStore', function() {
-    return new JsonApiDataStore();
+  .controller('myController', function(JsonApiDataStore) {
+    var article = JsonApiDataStore.find('article', 1337);
   });
 ```
 
+
 ## Contributing
 
 All pull-requests welcome!

dist/ng-jsonapi-datastore.js

@@ -0,0 +1,138 @@
+angular
+  .module('beauby.jsonApiDataStore', [])
+  .factory('JsonApiDataStore', function() {
+    function JsonApiDataStoreModel(type, id) {
+      this.id = id;
+      this._type = type;
+      this._attributes = [];
+      this._relationships = [];
+    }
+
+    JsonApiDataStoreModel.prototype.serialize = function(opts) {
+      var self = this,
+        res,
+        key;
+
+      opts || (opts = {});
+      opts.attributes || (opts.attributes = this._attributes);
+      opts.relationships || (opts.relationships = this._relationships);
+
+      res = {
+        data: {
+          type: this._type,
+          id: this.id
+        }
+      };
+
+      if (opts.attributes.length !== 0) res.data.attributes = {};
+      if (opts.relationships.length !== 0) res.data.relationships = {};
+
+      opts.attributes.forEach(function(key) {
+        res.data.attributes[key] = self[key];
+      });
+
+      opts.relationships.forEach(function(key) {
+        function relationshipIdentifier(model) {
+          return {
+            type: model._type,
+            id: model.id
+          };
+        }
+        if (self[key].constructor === Array) {
+          res.data.relationships[key] = {
+            data: self[key].map(relationshipIdentifier)
+          };
+        } else {
+          res.data.relationships[key] = {
+            data: relationshipIdentifier(self[key])
+          };
+        }
+      });
+
+      return res;
+    };
+
+    function JsonApiDataStore() {
+      this.graph = {};
+    }
+
+    JsonApiDataStore.prototype.reset = function() {
+      this.graph = {};
+    };
+
+    JsonApiDataStore.prototype.find = function(type, id) {
+      if (!this.graph[type] || !this.graph[type][id]) return null;
+      return this.graph[type][id];
+    };
+
+    JsonApiDataStore.prototype.destroy = function(model) {
+      delete this.graph[model._type][model.id];
+    };
+
+    JsonApiDataStore.prototype.initModel = function(type, id) {
+      this.graph[type] || (this.graph[type] = {});
+      this.graph[type][id] || (this.graph[type][id] = new JsonApiDataStoreModel(type, id));
+
+      return this.graph[type][id];
+    };
+
+    JsonApiDataStore.prototype.syncRecord = function(rec) {
+      var self = this,
+        model = this.initModel(rec.type, rec.id),
+        key;
+
+      function findOrInit(resource) {
+        if (!self.find(resource.type, resource.id)) {
+          var placeHolderModel = self.initModel(resource.type, resource.id);
+          placeHolderModel._placeHolder = true;
+        }
+        return self.graph[resource.type][resource.id];
+      }
+
+      delete model._placeHolder;
+
+      for (key in rec.attributes) {
+        model._attributes.push(key);
+        model[key] = rec.attributes[key];
+      }
+
+      if (rec.relationships) {
+        for (key in rec.relationships) {
+          var rel = rec.relationships[key];
+          if (rel.data !== undefined) {
+            model._relationships.push(key);
+            if (rel.data === null) {
+              model[key] = null;
+            } else if (rel.data.constructor === Array) {
+              model[key] = rel.data.map(findOrInit);
+            } else {
+              model[key] = findOrInit(rel.data);
+            }
+          }
+          if (rel.links) {
+            console.log("Warning: Links not implemented yet.");
+          }
+        }
+      }
+
+      return model;
+    };
+
+    JsonApiDataStore.prototype.sync = function(data) {
+      var self = this;
+
+      function sync(data) {
+        if (!data) return null;
+        if (data.constructor === Array) {
+          return data.map(self.syncRecord.bind(self));
+        } else {
+          return self.syncRecord(data);
+        }
+      };
+      sync(data.included);
+      return sync(data.data);
+    };
+
+
+    return new JsonApiDataStore();
+  });

dist/ng-jsonapi-datastore.min.js

@@ -2,12 +2,14 @@ var gulp = require('gulp'),
     concat = require('gulp-concat'),
     rename = require('gulp-rename'),
     uglify = require('gulp-uglify'),
-    mocha = require('gulp-mocha');
+    mocha = require('gulp-mocha'),
+    wrap = require('gulp-wrap'),
+    beautify = require('gulp-jsbeautify');
 
-var SRC = 'src/*.js',
+var SRC = 'src/jsonapi-datastore/*.js',
     DEST = 'dist/';
 
-gulp.task('build', function(done) {
+gulp.task('build', function() {
   return gulp.src(SRC)
     .pipe(concat('jsonapi-datastore.js'))
     .pipe(gulp.dest(DEST))
@@ -16,9 +18,20 @@ gulp.task('build', function(done) {
     .pipe(gulp.dest(DEST));
 });
 
+gulp.task('build-angular', ['build'], function() {
+  return gulp.src('dist/jsonapi-datastore.js')
+    .pipe(concat('ng-jsonapi-datastore.js'))
+    .pipe(wrap({ src: 'src/angular-wrapper.js' }))
+    .pipe(beautify({ indent_size: 2 }))
+    .pipe(gulp.dest(DEST))
+    .pipe(uglify())
+    .pipe(rename({ extname: '.min.js' }))
+    .pipe(gulp.dest(DEST));
+});
+
 gulp.task('test', ['build'], function() {
   gulp.src('test/*.js')
     .pipe(mocha());
 });
 
-gulp.task('default', ['build']);
+gulp.task('default', ['build', 'build-angular']);

gulpfile.js

@@ -3,7 +3,9 @@
   "version": "0.1.2-alpha",
   "description": "JavaScript client-side JSON API data handling made easy.",
   "main": "dist/jsonapi-datastore.js",
-  "files": [ "dist/" ],
+  "files": [
+    "dist/"
+  ],
   "directories": {
     "test": "test"
   },
@@ -31,9 +33,11 @@
     "chai": "^3.2.0",
     "gulp": "^3.9.0",
     "gulp-concat": "^2.6.0",
+    "gulp-jsbeautify": "^0.1.1",
     "gulp-mocha": "^2.1.3",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^1.2.0",
+    "gulp-wrap": "^0.11.0",
     "mocha": "^2.2.5"
   }
 }

package.json

@@ -0,0 +1,7 @@
+angular
+  .module('beauby.jsonApiDataStore', [])
+  .factory('JsonApiDataStore', function() {
+    <%= contents %>
+
+    return new JsonApiDataStore();
+  });