simplyview 2.0.3 → 2.1.0

package/dist/simply.everything.js

@@ -1601,6 +1601,7 @@ properties for a given parent, keep seperate index for this?
             load();
         } else {
             global.document.addEventListener('simply-content-loaded', function() {
+                console.log('switching...')
                 load();
             });
         }
@@ -1619,10 +1620,18 @@ properties for a given parent, keep seperate index for this?
 })(this);
 (function(global) {
     'use strict';
+
+    function etag() {
+        let d = '';
+        while (d.length < 32) d += Math.random().toString(16).substr(2);
+        const vr = ((parseInt(d.substr(16, 1), 16) & 0x3) | 0x8).toString(16);
+        return `${d.substr(0, 8)}-${d.substr(8, 4)}-4${d.substr(13, 3)}-${vr}${d.substr(17, 3)}-${d.substr(20, 12)}`;
+    }
     
     function ViewModel(name, data, options) {
         this.name = name;
         this.data = data || [];
+        this.data.etag = etag();
         this.view = {
             options: {},
             data: [] //Array.from(this.data).slice()
@@ -1645,15 +1654,22 @@ properties for a given parent, keep seperate index for this?
             // this.data is a reference to the data passed, so that any changes in it will get applied
             // to the original
             this.data = params.data;
+            this.data.etag = etag()
         }
         // the view is a shallow copy of the array, so that changes in sort order and filtering
         // won't get applied to the original, but databindings on its children will still work
         this.view.data = Array.from(this.data).slice();
-        var plugins = this.plugins.start.concat(this.plugins.select, this.plugins.order, this.plugins.render, this.plugins.finish);
-        var self = this;
-        plugins.forEach(function(plugin) {
-            plugin.call(self, params);
+        this.view.data.etag = this.data.etag;
+        let data = this.view.data;
+        let plugins = this.plugins.start.concat(this.plugins.select, this.plugins.order, this.plugins.render, this.plugins.finish);
+        plugins.forEach(plugin => {
+            data = plugin.call(this, params, data);
+            if (!data) {
+                data = this.view.data;
+            }
+            this.view.data = data
         });
+        this.view.data = data;
 
         if (global.editor) {
             global.editor.addDataSource(this.name,{
@@ -1778,7 +1794,8 @@ properties for a given parent, keep seperate index for this?
         createFilter: createFilter,
         createSort: createSort,
         createPaging: createPaging,
-        updateDataSource: updateDataSource
+        updateDataSource: updateDataSource,
+        etag
     };
 
     if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {

package/js/simply.viewmodel.js

@@ -1,9 +1,17 @@
 (function(global) {
     'use strict';
+
+    function etag() {
+        let d = '';
+        while (d.length < 32) d += Math.random().toString(16).substr(2);
+        const vr = ((parseInt(d.substr(16, 1), 16) & 0x3) | 0x8).toString(16);
+        return `${d.substr(0, 8)}-${d.substr(8, 4)}-4${d.substr(13, 3)}-${vr}${d.substr(17, 3)}-${d.substr(20, 12)}`;
+    }
     
     function ViewModel(name, data, options) {
         this.name = name;
         this.data = data || [];
+        this.data.etag = etag();
         this.view = {
             options: {},
             data: [] //Array.from(this.data).slice()
@@ -26,14 +34,20 @@
             // this.data is a reference to the data passed, so that any changes in it will get applied
             // to the original
             this.data = params.data;
+            this.data.etag = etag()
         }
         // the view is a shallow copy of the array, so that changes in sort order and filtering
         // won't get applied to the original, but databindings on its children will still work
         this.view.data = Array.from(this.data).slice();
-        var plugins = this.plugins.start.concat(this.plugins.select, this.plugins.order, this.plugins.render, this.plugins.finish);
-        var self = this;
-        plugins.forEach(function(plugin) {
-            plugin.call(self, params);
+        this.view.data.etag = this.data.etag;
+        let data = this.view.data;
+        let plugins = this.plugins.start.concat(this.plugins.select, this.plugins.order, this.plugins.render, this.plugins.finish);
+        plugins.forEach(plugin => {
+            data = plugin.call(this, params, data);
+            if (!data) {
+                data = this.view.data;
+            }
+            this.view.data = data
         });
 
         if (global.editor) {
@@ -159,7 +173,8 @@
         createFilter: createFilter,
         createSort: createSort,
         createPaging: createPaging,
-        updateDataSource: updateDataSource
+        updateDataSource: updateDataSource,
+        etag
     };
 
     if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplyview",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "dist/simply.everything.js",
   "directories": {
@@ -27,5 +27,10 @@
   "homepage": "https://github.com/simplyedit/simplyview#readme",
   "devDependencies": {
     "jest": "^24.9.0"
-  }
+  },
+  "files": [
+    "README.md",
+    "dist/",
+    "js/"
+  ]
 }

package/docs/examples.md

@@ -1,82 +0,0 @@
-# Examples
-
-## Counter
-
-The counter app is an example to introduce the basic concepts. Here is the HTML:
-
-```html
-<div id="counterApp">
-    <input type="text" data-simply-field="counter">
-    <button data-simply-command="add1">+</button>
-    <button data-simply-command="sub1">-</button>
-    <div>Counter is now: <span data-simply-field="counter"></span></div>
-</div>
-```
-
-It uses two components of SimplyView and SimplyEdit, through 
-`data-simply-command` and `data-simply-field`.
-
-`data-simply-command` is handled by [simply.command](simply.command.md). Both 
-commands are defined on buttons, so they will trigger when the button is 
-pressed. The javascript code tied to these commands is defined with the 
-[simply.app](simply.app.md) component:
-
-```javascript
-var counterApp = simply.app({
-    container: document.getElementById('counterApp'),
-    commands: {
-        add1: function() {
-            counterApp.view.counter++;
-        },
-        sub1: function() {
-            counterApp.view.counter--;
-        }
-    },
-    view: {
-        counter: 1
-    }
-});
-```
-
-simply.app is a wrapper that combines a number of components with a single 
-configuration parameter. The commands section here is passed on to simply.command. 
-
-When you press the button with `data-simply-command="add1"`, the command 
-handler for this app is triggered and searches its commands for 'add1'. 
-It then calls this javascript function and it will increase
-`counterApp.view.counter`.
-
-This is where the second component, which uses `data-simply-field`, comes in. 
-The `counterApp.view` object is automatically tied to SimplyEdit, by simply.app. 
-So whenever you update a variable inside `counterApp.view`, SimplyEdit will 
-also update any HTML element which references the same variable. 
-
-In this case `counterApp.view.counter` is tied to the input element with
-`data-simply-field="counter"`.
-
-SimplyEdit also does the reverse, whenever you change the input value, 
-SimplyEdit will also change the `counterApp.view.counter` value. This is called 
-two-way databinding.
-
-Two-way databinding is not instantanous, so whenever you change a value in 
-javascript or in the DOM, it will take a short while for SimplyEdit to update 
-the other side as well. There are a number of events that will tell you when 
-the values are in sync again.
-
-## Todo
-
-The TodoMVC application is a standard web application implemented in many different 
-javascript frameworks. We've build one using SimplyEdit and SimplyView, which you 
-can find at [todomvc.simplyedit.io](https://todomvc.simplyedit.io/).
-
-The code is on github at
-[github.com/simplyedit/todomvc](https://github.com/simplyedit/todomvc). The 
-Readme explains how it is build.
-
-## Hackernews PWA
-
-Just like the TodoMVC application, the Hackernews PWA is also a standard web 
-application implemented in many frameworks. You can find the SimplyEdit/SimplyView 
-version at [hnpwa.simplyedit.io](https://hnpwa.simplyedit.io/). The code is at 
-[github.com/simplyedit/hnpwa](https://github.com/simplyedit/hnpwa) and the 
-Readme explains how it was built. 

package/docs/readme.md

@@ -1,33 +0,0 @@
-# Introduction
-
-SimplyView is a set of seperate components that allow you to rapidly build web 
-application user interfaces. They are designed to work with modern reactive 
-libraries, like that included in [SimplyEdit](https://simplyedit.io/).
-
-SimplyView seperates structure - HTML - from behaviour - javascript. There is 
-never a need to write HTML inside your javascript code. There is also never a 
-need to write javascript - or any other kind of code - inside your HTML. 
-This strict seperation allows for a much easier workflow between designers and developers.
-
-This seperation also makes it possible, even easy, to re-use and upgrade 
-existing web applications. There is no need to rewrite everthing from scratch. 
-SimplyView works well with jQuery. In rare cases you can use the simply.activate 
-component to make sure your legacy javascript can react to changes in the HTML 
-structure.
-
-SimplyView is not a framework, but a selection of components. There is a
-simply.app component which ties them all together, but you don't need it to
-use any of them.
-
-- [simply.app](simply.app.md)
-- [simply.route](simply.route.md)
-- [simply.command](simply.command.md)
-- [simply.action](simply.action.md)
-- [simply.collect](simply.collect.md)
-- [simply.activate](simply.activate.md)
-- [simply.include](simply.include.md)
-- [simply.api](simply.api.md)
-- [simply.viewmodel](simply.viewmodel.md)
-- [simply.path](simply.path.md)
-
-Here are [some examples](examples.md) that use parts of SimplyView.

package/docs/simply.action.md

@@ -1,42 +0,0 @@
-# simply.action
-
-Actions are a standardized way to define a kind of API for your user 
-interface. They are meant to be used together with routes and commands. 
-
-In this case the routes and commands are tightly bound to your URL 
-structure and your HTML structure respectively. 
-
-Actions should be decoupled from those. An action should just be a method 
-that updates the application state. The parameters for an action should 
-be the logical parameters for that update.
-
-```javascript
-var myApp = simply.app({
-  commands: {
-    addTodo: function(form, values) {
-      form.elements.todo.value = '';
-      this.app.actions.addTodo(values.todo);
-    }
-  },
-
-  actions: {
-    addTodo: function(todo) {
-      this.app.view.todos.push(todo);
-    }
-  }
-});
-```
-
-By structuring your application in this way, it is easy to add different 
-user interface modes which accomplish the same action. So you can create a 
-route as well as a command, that both trigger the same action. Or later you 
-can add keyboard shortcuts or gestures, without having to copy the logic of 
-your action.
-
-You can add actions later by just defining them in the actions object:
-
-```javascript
-myApp.actions.anotherAction = function(...arguments) {
-   ...
-};
-```

package/docs/simply.activate.md

@@ -1,27 +0,0 @@
-# simply.activate
-
-simply.activate is a component to automatically initialize HTML elements with 
-javascript as they appear in the DOM.
-
-```javascript
-simply.activate.addListener('autosize',function() {
-  $.autosize(this);
-});
-```
-
-```html
-<textarea data-simply-activate="autosize"></textarea>
-```
-
-The `addListener` method takes two arguments, a name and a callback method.
-The name is what you use in the html `data-simply-activate` attribute. The
-callback method is then called whenever the DOM element with that attribute
-is added to the dom. It is also called on load.
-
-The callback method has no arguments, instead it is called on the DOM element
-itself. `this` references the DOM element.
-
-Now you can use any 'legacy' component, in this case a jQuery textarea 
-resizer, that needs to initialize HTML elements. Simply.activate will
-trigger the initialization routine whenever the element is inserted into the
-dom, no matter how or when this happens.

package/docs/simply.api.md

@@ -1,188 +0,0 @@
-# simply.api
-
-Simply.api is a library that makes it easier to connect to online API's,
-like REST or JSON-RPC api's. It contains a simplified fetch() method as well
-as a proxy that allows you to call remote API's as if they were a local
-library. E.g.:
-
-```javascript
-const githubApi = simply.api.proxy({
-	baseURL: 'https://api.github.com',
-	headers: {
-		'Accept': 'application/vnd.github.v3+json',
-		'User-Agent': 'SimplyApi'
-	}
-});
-
-githubApi.users.poef()
-.then(user => {
-	console.log(user);
-});
-```
-
-The proxy() method returns an object that will create new proxy objects on
-the fly for any property you access on it, like the 'users' property above.
-When you call such a property as a function, the proxy object will convert
-the property path to a URL and fetch it.
-
-In this case the githubApi.users.poef() call is converted to a GET request
-with the url: 'https://api.github.com/users/poef'.
-
-You can also pass arguments to the method, by passing an object with key
-value pairs:
-
-```javascript
-githubApi.users.octocat.hovercard({
-	subject_type: 'repository',
-	subject_id: 1300192
-});
-```
-
-Which is converted in a fetch() request like this:
-
-```javascript
-GET https://api.github.com/users/octocat/hovercard?subject_type=repository&subject_id=1300192
-```
-
-If you want to use a different HTTP Verb, like 'POST', add that as the last entry like
-this:
-
-```javascript
-githubApi.user.keys.post({
-	key: "mykey"
-})
-.then(result => {
-	console.log(result);
-});
-```
-
-The default verb methods that simply.api understands are GET and POST. If
-you need more, declare them in the options object under the 'verbs' key.
-
-You can add any option recognized by the default fetch() api in the proxy
-options object, see [the init property
-here](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters).
-In addition the proxy recognizes these options:
-
-- responseFormat
-- paramsFormat
-- verbs
-- user and password
-- handlers
-
-## responseFormat
-
-This declares the expected result format of the remote API. The valid
-options are:
-
-- text
-- formData
-- blob
-- arrayBuffer
-- unbuffered
-- json
-
-The default is 'json'. Unlike the standard fetch() api, simply.api.fetch
-(used by the proxy object) automatically parses and returns the result, as a
-Promise. If an error is returned - the response.ok flag is false - then it
-will throw an error object with the status, message and full response
-object.
-
-
-## paramsFormat
-
-Available formats are:
-- search
-- formData
-- json
-
-When the fetch method is GET, the format is forced to 'search'. 
-
-### search
-This option sets the parameter format for the remote API. When set to search, 
-the parameters are send as a url encoded parameters in the URL of the
-request.
-
-### formData
-Sets the parameter format to the default formdata encoding, add the
-parameters to the body of the request.
-
-### json
-Encodes the parameters as a json string and adds it to the body of the
-request.
-
-## verbs
-
-By default simply.api.proxy understands the GET and POST verbs. You can add
-more by setting this option, e.g:
-
-```javascript
-const githubApi = simply.api.proxy({
-	baseURL: 'https://api.github.com',
-	headers: {
-		'Accept': 'application/vnd.github.v3+json',
-		'User-Agent': 'SimplyApi'
-	},
-	verbs: [ 'get', 'post', 'put', 'delete' ]
-});
-```
-
-Now you can call the put() and delete() methods on the proxy as well:
-
-```javascript
-githubApi.user.following.octocat.delete();
-```
-
-Note: the verb names are automatically uppercased when sent. 
-
-## user and password
-
-If you set a user and password property in the options to simply.api.proxy,
-these will be converted to a basic authentication header and added to each
-request.
-
-## handlers
-
-Some API's require extra handling for requests or parsing of responses. You
-can override or extend the default handlers here. The available handlers are:
-
-- fetch
-- result
-- error
-
-A minimal definition for these handlers that maintains the default behaviour
-is:
-
-```javascript
-const githubApi = simply.api.proxy({
-	baseURL: 'https://api.github.com',
-        headers: {
-                'Accept': 'application/vnd.github.v3+json',
-                'User-Agent': 'SimplyApi'
-        },
-        verbs: [ 'get', 'post', 'put', 'delete' ],
-	handlers: {
-		fetch: function(verb, params, options) {
-			// prepare stuff here
-			return simply.api.fetch(verb, params, options)
-			.then(response => {
-				// do some more stuff here
-				return response;
-			});
-		},
-		result: function(result, options) {
-			// ditto
-			return simply.api.getResult(result, options)
-			.then(result => {
-				// more doing
-				return result;
-			});
-		},
-		error: function(error, options) {
-			// ...
-			simply.api.logError(error, options); // no return value here				
-		}
-	}
-});
-```
-

package/docs/simply.app.md

@@ -1,27 +0,0 @@
-# simply.app
-
-simply.app provides a simple starting point to build web applications:
-
-```javascript
-var myApp = simply.app({
-  routes: {
-    '/:section/': function(params) { ... }
-  },
-
-  commands: { ... },
-
-  actions: { ... },
-
-  container: document.getElementById('myApp'),
-
-  view: {
-    myVariable: 'foo'
-
-  }
-
-});
-```
-
-It combines [simply.route](simply.route.md),
-[simply.command](simply.command.md), [simply.action](simply.action.md) and
-[simply.view](simply.view.md) into a single application wrapper.

package/docs/simply.collect.md

@@ -1,64 +0,0 @@
-# simply.collect
-
-simply.collect allows you to create auto updating forms, just by adding a few 
-attributes to the form and its elements:
-
-```javascript
-function getAddress(elements) {
-  if (elements.zipcode.value && elements.housenr.value) {
-    zipcodeAPI
-    .getAddress(elements.zipcode.value,elements.country.value)
-    .then(function(address) {
-      elements.street.value = address.street;
-      elements.city.value = address.city;
-    }
-  }
-}
-
-simply.collect.addListener('address', getAddress);
-```
-
-```html
-<form>
-  <div data-simply-collect="address">
-    <label>
-      Zipcode: <input name="zipcode" data-simply-element="zipcode">
-    </label>
-    <label>
-      House NR: <input name="housenumber" data-simply-element="housenr">
-    </label>
-    <label>
-      Street: <input name="street" data-simply-element="street">
-    </label>
-    <label>
-      City: <input name="city" data-simply-element="city">
-    </label>
-  </div>
-</form>
-```
-
-The listener will get called whenever any of the elements changes. You can add 
-as many forms and as many container elements with data-simply-collect as you want.
-
-## simply.collect.addListener
-
-Add a collect listener. See the code above in the overview.
-
-## simply.collect.removeListener
-
-Removes a previously added listener. You must call removeListener with the 
-exact same name and function as used in addListener:
-
-```javascript
-simply.collect.removeListener('address', getAddress);
-```
-
-## simply.collect.update
-
-simply.collect only listens for the change event. So if you update an input 
-elements value through javascript, the collect listeners won't trigger, unless 
-you also trigger the change event. simply.collect.update does this for you:
-
-```javascript
-simply.collect.update(form.elements.zipcode, newZipcode);
-```