abstract-state-router - npm Package Compare versions

Comparing version 5.5.0 to 5.6.0

lib/denodeify.js

index.js

		var StateState = require('./lib/state-state')
		var extend = require('extend')
		var Promise = require('promise')
		var StateComparison = require('./lib/state-comparison')
		@@ -9,2 +8,3 @@ var CurrentState = require('./lib/current-state')
		var EventEmitter = require('events').EventEmitter
		var Promise = require('native-promise-only/npo')
		var series = require('promise-map-series')
		@@ -16,2 +16,3 @@ var parse = require('./lib/state-string-parser')
		var debug = require('debug')('abstract-state-router')
		var denodeify = require('./lib/denodeify')

		@@ -285,6 +286,6 @@ module.exports = function StateProvider(makeRenderer, rootElement, stateRouterOptions) {

		destroyDom = Promise.denodeify(renderer.destroy)
		getDomChild = Promise.denodeify(renderer.getChildElement)
		renderDom = Promise.denodeify(renderer.render)
		resetDom = Promise.denodeify(renderer.reset)
		destroyDom = denodeify(renderer.destroy)
		getDomChild = denodeify(renderer.getChildElement)
		renderDom = denodeify(renderer.render)
		resetDom = denodeify(renderer.reset)

		@@ -291,0 +292,0 @@ return stateProviderEmitter

package.json

		{
		"name": "abstract-state-router",
		"version": "5.5.0",
		"version": "5.6.0",
		"description": "The basics of a client-side state router ala the AngularJS ui-router, but without any DOM interactions",
		@@ -33,5 +33,5 @@ "main": "index.js",
		"hash-brown-router": "~1.5.0",
		"native-promise-only": "0.8.1",
		"page-path-builder": "~1.0.2",
		"path-to-regexp-with-reversible-keys": "~1.0.3",
		"promise": "~7.0.1",
		"promise-map-series": "~0.2.1"
		@@ -38,0 +38,0 @@ },

readme.md

		@@ -18,2 +18,3 @@ [ui-router](https://github.com/angular-ui/ui-router/wiki) is fantastic, and I would use it in all of my projects if it wasn't tied to AngularJS.
		- [virtual-dom](https://github.com/ArtskydJ/virtualdom-state-renderer)
		- [Knockout](https://github.com/crissdev/knockout-state-renderer)

		@@ -34,2 +35,4 @@ If you want to use the state router with some other templating/dom manipulation library, [read these docs](https://github.com/TehShrike/abstract-state-router/blob/master/renderer.md)! It's not too bad to get started.

		## options

		Possible properties of the `options` object are:
		@@ -166,3 +169,3 @@

		Returns a path to the state, starting with an octothorpe `#`, suitable for inserting straight into the `href` attribute of a link.
		Returns a path to the state, starting with an [optional](#options) octothorpe `#`, suitable for inserting straight into the `href` attribute of a link.

		@@ -207,14 +210,45 @@ ```js

		# Questions/discussion/future development
		# HTML5/pushState routing

		- [Support for hash-less paths using HTML5/pushState](https://github.com/TehShrike/abstract-state-router/issues/39)
		pushState routing is technically supported. To use it, pass in an options object with a `router` hash-brown-router constructed with a [sausage-router](https://github.com/TehShrike/sausage-router), and then set the `pathPrefix` option to an empty string.

		## "Universal JavaScript"
		```js
		var makeStateRouter = require('abstract-state-router')
		var sausage = require('sausage-router')
		var makeRouter = require('hash-brown-router')

		A future goal is to make it possible to generate HTML for routes on the server-side, at least for the templating libraries like Ractive that do not require a DOM to generate HTML.
		var stateRouter = makeStateRouter(makeRenderer, rootElement, {
		pathPrefix: '',
		router: makeRouter(sausage())
		})
		```

		This requires supporting HTML5 routing (see issue linked above), and some way for the results of the initial `resolve` values to be included with JSONP so that when the client-side abstract-state-router code does eventually start running, it doesn't have to re-fetch all the initial state.
		However to use it in the real world, there are two things you probably want to do:

		I don't think this should be a huge change, but I haven't gotten around to it yet. Feel free to check out the issue above if you want to get started on it yourself.
		## Intercept link clicks

		To get all the benefits of navigating around nested states, you'll need to intercept every click on a link and block the link navigation, calling `go(path)` on the sausage-router instead.

		You would need to add these click handlers whenever a state change happened.

		## server-side rendering

		You would also need to be able to render the correct HTML on the server-side.

		For this to even possible, your chosen rendering library needs to be able to work on the server-side to generate static HTML. I know at least Ractive.js and Riot support this.

		The abstract-state-router would need to be changed to supply the list of nested DOM API objects for your chosen renderer.

		Then to generate the static HTML for the current route, you would create an abstract-state-router, tell it to navigate to that route, collect all the nested DOM API objects, render them as HTML strings, embedding the children inside of the parents.

		You would probably also want to send the client the data that was returned by the `resolve` functions, so that when the JavaScript app code started running the abstract-state-router on the client-side, it wouldn't hit the server to fetch all the data that had already been fetched on the server to generate the original HTML.

		## Who's adding this?

		It could be me, but probably not in the near future, since I will mostly be using this for form-heavy business apps where generating static HTML isn't really any benefit.

		If I use the abstract-state-router on an app where I want to support clients without JS, then I'll start working on the functionality.

		If anyone else has need of this functionality and wants to get started on it, I'd be happy to help. Stop by the [chat room](https://gitter.im/TehShrike/abstract-state-router) to ask any questions.

		# Maintainers
		@@ -221,0 +255,0 @@

test/test.js

		var test = require('tape-catch')
		var assertingRendererFactory = require('./helpers/asserting-renderer-factory')
		var getTestState = require('./helpers/test-state-factory')
		var Promise = require('promise')
		var Promise = require('native-promise-only/npo')

		@@ -6,0 +6,0 @@ test('normal, error-less state activation flow for two states', function(t) {

abstract-state-router - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Dependency changes