Merge pull request #31 from Rich-Harris/edge

RFC: Stop self-registering

.gitignore

@@ -1,4 +1,5 @@
-.DS_Store
+.gobble-build
+!.gitignore
 node_modules/
 tmp/
 coverage.html

.jshintrc

@@ -0,0 +1,8 @@
+{
+	"esnext": true,
+	"undef": true,
+	"unused": true,
+	"globals": {
+		"window": true
+	}
+}

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v0.3.0 - April 6, 2015
+
+* Adaptor no longer self-registers in a module environment, and no longer has a dependency on Ractive or Backbone (@rich-harris, #31)
+
+* Internal: Rewrote as ES6 module (@rich-harris, #31)
+
 ## v0.2.0 - October 4, 2014
 
 This release brings better compatibility with Ractive 0.6.x and Backbone 1.1.x.

README.md

@@ -1,34 +1,32 @@
-
-Ractive.js Backbone adaptor
-===========================
+# ractive-adaptors-backbone
 
 Use Backbone models and collections in your [Ractive] components.<br>
 **[View demo ›][Example]**
 
 [![Status](http://img.shields.io/travis/ractivejs/ractive-adaptors-backbone/master.svg?style=flat)](https://travis-ci.org/ractivejs/ractive-adaptors-backbone "See test builds")
 
-*Find more Ractive.js plugins at 
+*Find more Ractive.js plugins at
 [docs.ractivejs.org/latest/plugins](http://docs.ractivejs.org/latest/plugins)*
 
 ## Installation
 
 Include `ractive-adaptors-backbone.min.js` on your page below Ractive, e.g:
 
 ```html
-<script src='lib/ractive.js'></script>
+<script src='lib/ractive.min.js'></script>
 <script src='lib/ractive-adaptors-backbone.min.js'></script>
 ```
 
-To get `ractive-adaptors-backbone.min.js` you can:
+To get ractive-adaptors-backbone you can:
 
 #### Use CDN
 
     //cdn.jsdelivr.net/ractive.adaptors-backbone/latest/ractive-adaptors-backbone.min.js
-    
+
 #### Use bower
 
     $ bower i ractive-adaptors-backbone
-    
+
 #### Use npm
 
     $ npm install --save ractive-adaptors-backbone
@@ -37,5 +35,54 @@ To get `ractive-adaptors-backbone.min.js` you can:
 
 - [Download the latest release](https://github.com/ractivejs/ractive-adaptors-backbone/releases).
 
+## Usage
+
+If you're using `<script>` tags to manage your dependencies, everything is already set up, and you can use the adaptor like so:
+
+```js
+var user = new Backbone.Model({
+  name: 'world'
+});
+
+var ractive = new Ractive({
+  el: 'main',
+  template: '<h1>Hello {{user.name}}!</h1>',
+  data: {
+    user: user
+  }
+});
+
+// If you interact with the model, the view will change
+user.set( 'name', 'everybody' );
+```
+
+If `Backbone` isn't a global variable (e.g. you're using Browserify or RequireJS), you need to *register* it:
+
+```js
+// Example with CommonJS modules - it also works with AMD
+var Backbone = require( 'backbone' );
+var Ractive = require( 'ractive' );
+var backboneAdaptor = require( 'ractive-adaptors-backbone' );
+
+backboneAdaptor.Backbone = Backbone;
+
+var ractive = new Ractive({
+  el: 'main',
+  template: '<h1>Hello {{user.name}}!</h1>',
+  data: {
+    user: user
+  },
+
+  // this line tells Ractive to look out
+  // for Backbone models
+  adapt: [ backboneAdaptor ]
+});
+```
+
+
+## License
+
+MIT
+
 [Example]: http://examples.ractivejs.org/backbone
 [Ractive]: http://www.ractivejs.org

bower.json

@@ -1,10 +1,10 @@
 {
 	"name": "ractive-backbone",
 	"description": "Backbone adaptor for Ractive.js",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"author": "Rich Harris",
 	"license": "MIT",
-	"main": "ractive-adaptors-backbone.js",
+	"main": "dist/ractive-adaptors-backbone.js",
 	"ignore": [
 		"**/.*",
 		"src",

component.json

@@ -2,7 +2,7 @@
   "name": "ractive-adaptors-backbone",
   "repository": "ractivejs/ractive-adaptors-backbone",
   "description": "Backbone adaptor for Ractive.js",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "keywords": [
     "backbone",
     "ractive",
@@ -13,8 +13,8 @@
   "dependencies": {
     "ractivejs/ractive": "*"
   },
-  "main": "ractive-adaptors-backbone.js",
+  "main": "dist/ractive-adaptors-backbone.js",
   "scripts": [
-    "ractive-adaptors-backbone.js"
+    "dist/ractive-adaptors-backbone.js"
   ]
 }

dist/ractive-adaptors-backbone.js

@@ -0,0 +1,118 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	global.Ractive.adaptors.Backbone = factory()
+}(this, function () { 'use strict';
+
+	var lockProperty = "_ractiveAdaptorsBackboneLock";
+
+	function acquireLock(key) {
+		key[lockProperty] = (key[lockProperty] || 0) + 1;
+		return function release() {
+			key[lockProperty] -= 1;
+			if (!key[lockProperty]) {
+				delete key[lockProperty];
+			}
+		};
+	}
+
+	function isLocked(key) {
+		return !!key[lockProperty];
+	}
+
+	var adaptor = {
+		// self-init, if being used as a <script> tag
+		Backbone: typeof window !== "undefined" && window.Backbone || null,
+
+		filter: function filter(object) {
+			if (!adaptor.Backbone) {
+				throw new Error("Could not find Backbone. You must call adaptor.init(Backbone) - see http://TKTKTK.com for more information");
+			}
+			return object instanceof adaptor.Backbone.Model || object instanceof adaptor.Backbone.Collection;
+		},
+		wrap: function wrap(ractive, object, keypath, prefix) {
+			if (object instanceof adaptor.Backbone.Model) {
+				return new BackboneModelWrapper(ractive, object, keypath, prefix);
+			}
+
+			return new BackboneCollectionWrapper(ractive, object, keypath, prefix);
+		}
+	};
+
+	function BackboneModelWrapper(ractive, model, keypath, prefix) {
+		this.value = model;
+
+		model.on("change", this.modelChangeHandler = function () {
+			var release = acquireLock(model);
+			ractive.set(prefix(model.changed));
+			release();
+		});
+	}
+
+	BackboneModelWrapper.prototype = {
+		teardown: function teardown() {
+			this.value.off("change", this.modelChangeHandler);
+		},
+		get: function get() {
+			return this.value.toJSON();
+		},
+		set: function set(keypath, value) {
+			// Only set if the model didn't originate the change itself, and
+			// only if it's an immediate child property
+			if (!isLocked(this.value) && keypath.indexOf(".") === -1) {
+				this.value.set(keypath, value);
+			}
+		},
+		reset: function reset(object) {
+			// If the new object is a Backbone model, assume this one is
+			// being retired. Ditto if it's not a model at all
+			if (object instanceof adaptor.Backbone.Model || !(object instanceof Object)) {
+				return false;
+			}
+
+			// Otherwise if this is a POJO, reset the model
+			//Backbone 1.1.2 no longer has reset and just uses set
+			this.value.set(object);
+		}
+	};
+
+	function BackboneCollectionWrapper(ractive, collection, keypath) {
+		this.value = collection;
+
+		collection.on("add remove reset sort", this.changeHandler = function () {
+			// TODO smart merge. It should be possible, if awkward, to trigger smart
+			// updates instead of a blunderbuss .set() approach
+			var release = acquireLock(collection);
+			ractive.set(keypath, collection.models);
+			release();
+		});
+	}
+
+	BackboneCollectionWrapper.prototype = {
+		teardown: function teardown() {
+			this.value.off("add remove reset sort", this.changeHandler);
+		},
+		get: function get() {
+			return this.value.models;
+		},
+		reset: function reset(models) {
+			if (isLocked(this.value)) {
+				return;
+			}
+
+			// If the new object is a Backbone collection, assume this one is
+			// being retired. Ditto if it's not a collection at all
+			if (models instanceof adaptor.Backbone.Collection || Object.prototype.toString.call(models) !== "[object Array]") {
+				return false;
+			}
+
+			// Otherwise if this is a plain array, reset the collection
+			this.value.reset(models);
+		}
+	};
+
+	var ractive_adaptors_backbone = adaptor;
+
+	return ractive_adaptors_backbone;
+
+}));

gobblefile.js

@@ -0,0 +1,15 @@
+var gobble = require( 'gobble' );
+
+gobble.cwd( __dirname );
+
+module.exports = gobble( 'src' )
+.transform( 'babel', {
+	blacklist: [ 'es6.modules', 'useStrict' ],
+	sourceMap: false
+})
+.transform( 'esperanto-bundle', {
+	entry: 'ractive-adaptors-backbone',
+	type: 'umd',
+	name: 'Ractive.adaptors.Backbone',
+	sourceMap: false
+});

package.json

@@ -1,40 +1,42 @@
 {
-	"name": "ractive-adaptors-backbone",
-	"description": "Backbone adaptor for Ractive.js",
-	"version": "0.2.0",
-	"homepage": "http://ractivejs.org",
-	"main": "./ractive-adaptors-backbone.js",
-	"author": {
-		"name": "Rich Harris"
-	},
-	"licenses": [
-		{
-			"type": "MIT"
-		}
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/ractivejs/ractive-adaptors-backbone.git"
-	},
-	"peerDependencies": {
-		"backbone": ">= 1.0.0",
-		"ractive": ">= 0.3.9"
-	},
-	"scripts": {
-		"test": "jshint ractive-adaptors-backbone.js && mocha",
-		"coverage": "(cp ractive-adaptors-backbone.js ractive-adaptors-backbone.js~; jscoverage ractive-adaptors-backbone.js; mv ractive-adaptors-backbone-cov.js ractive-adaptors-backbone.js; mocha -R html-cov > coverage.html); mv ractive-adaptors-backbone.js~ ractive-adaptors-backbone.js",
-		"prepublish": "uglifyjs -m < ractive-adaptors-backbone.js > ractive-adaptors-backbone.min.js"
-	},
-	"devDependencies": {
-		"backbone": ">= 1.0.0",
-		"chai": "^1.9.2",
-		"jshint": "^2.5.6",
-		"mocha": "^1.21.4",
-		"mocha-clean": "^0.2.1",
-		"mocha-repeat": "^0.1.0",
-		"proxyquire": "^1.0.1",
-		"ractive": ">= 0.3.9",
-		"uglify-js": "^2.4.15",
-		"underscore": "^1.7.0"
-	}
+  "name": "ractive-adaptors-backbone",
+  "description": "Backbone adaptor for Ractive.js",
+  "version": "0.3.0",
+  "homepage": "http://ractivejs.org",
+  "main": "dist/ractive-adaptors-backbone.js",
+  "jsnext:main": "src/ractive-adaptors-backbone.js",
+  "author": {
+    "name": "Rich Harris"
+  },
+  "licenses": [
+    {
+      "type": "MIT"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ractivejs/ractive-adaptors-backbone.git"
+  },
+  "scripts": {
+    "build": "rm -rf dist; gobble build dist",
+    "test": "jshint src/ractive-adaptors-backbone.js && mocha",
+    "coverage": "(cp rdist/active-adaptors-backbone.js dist/ractive-adaptors-backbone.js~; jscoverage rdist/active-adaptors-backbone.js; mv dist/ractive-adaptors-backbone-cov.js dist/ractive-adaptors-backbone.js; mocha -R html-cov > coverage.html); mv dist/ractive-adaptors-backbone.js~ dist/ractive-adaptors-backbone.js",
+    "prepublish": "npm run build; uglifyjs -m < dist/ractive-adaptors-backbone.js > dist/ractive-adaptors-backbone.min.js"
+  },
+  "devDependencies": {
+    "backbone": ">= 1.0.0",
+    "chai": "^1.9.2",
+    "gobble": "^0.7.8",
+    "gobble-babel": "^4.0.1",
+    "gobble-cli": "^0.3.5",
+    "gobble-esperanto-bundle": "^0.1.7",
+    "jshint": "^2.5.6",
+    "mocha": "^1.21.4",
+    "mocha-clean": "^0.2.1",
+    "mocha-repeat": "^0.1.0",
+    "proxyquire": "^1.0.1",
+    "ractive": ">= 0.3.9",
+    "uglify-js": "^2.4.15",
+    "underscore": "^1.7.0"
+  }
 }