Version 0.3.0

docs/components/route.md

@@ -11,6 +11,7 @@ permalink: '/components/route'
  - `path` _String_ the routes path relative to the parent route.
  - `component` _Etch Component_ the etch component to display when this route is active.
  - `name` _String_ the name of the route.
+ - `props` _Object_ the props object to pass to the component. Is merged with the props in etch-router and then passed to [propsForComponent](/hooks/props-for-component)
 
 ## Examples
 

docs/components/wrapper.md

@@ -0,0 +1,29 @@
+---
+layout: 'default'
+title: 'Wrapper'
+permalink: '/components/wrapper'
+---
+Wrapper is a stateless Etch component that is designed to be used for routes that only have sub routes.
+
+```javascript
+const {Router, Route, Wrapper} = require('etch-router')
+
+var router = new Router(
+  {},
+  new Route(
+    {path: '/', component: Wrapper, props: {className: 'wrapper'}},
+    new Route({path: '/', component: Home}),
+    new Route({path: '/about', component: About})
+  )
+)
+
+document.body.append(router.element)
+/*
+<div class="wrapper">{Home}</div>
+*/
+```
+
+Wrapper takes 2 props:
+
+ - `className` _String_ passed to `className` on the container element
+ - `tag` _String_ the html tag name to use e.g. `div` or `p`

docs/js/components/release.js

@@ -1,9 +1,10 @@
 /** @jsx etch.dom */
 const etch = require('etch')
 const {Link} = require('etch-router')
-const jQuery = require('jquery')
 const showdown = require('showdown')
 
+const loadJSON = require('../functions/loadjson')
+
 class Releases{
   constructor(props, children){
     this.props = props
@@ -21,7 +22,7 @@ class Releases{
     etch.initialize(this)
 
     var _ = this
-    jQuery.getJSON('https://api.github.com/repos/arcath/etch-router/releases/' + this.props.params.id, function(data){
+    loadJSON('https://api.github.com/repos/arcath/etch-router/releases/' + this.props.params.id, function(data){
       _.update({
         release: data
       })

docs/js/components/releases.js

@@ -1,7 +1,8 @@
 /** @jsx etch.dom */
 const etch = require('etch')
 const {Link} = require('etch-router')
-const jQuery = require('jquery')
+
+const loadJSON = require('../functions/loadjson')
 
 class Releases{
   constructor(props, children){
@@ -15,7 +16,7 @@ class Releases{
     etch.initialize(this)
 
     var _ = this
-    jQuery.getJSON('https://api.github.com/repos/arcath/etch-router/releases', function(data){
+    loadJSON('https://api.github.com/repos/arcath/etch-router/releases', function(data){
       _.update({
         releases: data
       })

docs/js/components/sidebar.js

@@ -39,6 +39,7 @@ class Sidebar{
         <li><Link to='/components/route' router={this.props.router}>Route</Link></li>
         <li><Link to='/components/link' router={this.props.router}>Link</Link></li>
         <li><Link to='/components/missing-route' router={this.props.router}>MissingRoute</Link></li>
+        <li><Link to='/components/wrapper' router={this.props.router}>Wrapper</Link></li>
       </ul>
       <h4>Hooks</h4>
       <ul>

docs/js/functions/loadjson.js

@@ -0,0 +1,19 @@
+module.exports = function(path, success, error){
+  var xhr = new XMLHttpRequest()
+  xhr.onreadystatechange = function(){
+    if(xhr.readyState === XMLHttpRequest.DONE){
+      if(xhr.status === 200){
+        if(success){
+          success(JSON.parse(xhr.responseText))
+        }
+      }else{
+        if(error){
+          error(xhr);
+        }
+      }
+    }
+  }
+
+  xhr.open("GET", path, true)
+  xhr.send()
+}

docs/js/main.js

@@ -6,19 +6,18 @@ require('../node_modules/nprogress/nprogress.css')
 require('../less/style.less')
 
 const etch = require('etch')
-const {Router, Route, Link, MissingRoute} = require('etch-router')
-const jQuery = require('jquery')
+const {Router, Route, Link, MissingRoute, Wrapper} = require('etch-router')
 const NProgress = require('nprogress')
 
-const Components = require('./components/components')
-const Guides = require('./components/guides')
 const Hooks = require('./components/hooks')
 const Layout = require('./components/layout')
 const Missing = require('./components/missing')
 const Release = require('./components/release')
 const Releases = require('./components/releases')
 const Static = require('./components/static')
 
+const loadJSON = require('./functions/loadjson')
+
 var bindLinksToRouter = function(){
   var links = document.querySelectorAll('.static a')
 
@@ -35,7 +34,7 @@ var bindLinksToRouter = function(){
 
 
 document.addEventListener('DOMContentLoaded', function(){
-  jQuery.getJSON('/content.json', function(data){
+  loadJSON('/content.json', function(data){
     window.pages = data.pages
   })
 
@@ -59,11 +58,12 @@ document.addEventListener('DOMContentLoaded', function(){
       {path: '/', component: Layout, name: 'Layout'},
       new Route({path: '/', component: Static, name: 'Home'}),
       new Route(
-        {path: '/components', component: Components, name: 'Components'},
+        {path: '/components', component: Wrapper, props: {className: 'components'}, name: 'Components'},
         new Route({path: '/router', component: Static, name: 'Router'}),
         new Route({path: '/route', component: Static, name: 'Route'}),
         new Route({path: '/link', component: Static, name: 'Link'}),
-        new Route({path: '/missing-route', component: Static, name: 'MissingRoute'})
+        new Route({path: '/missing-route', component: Static, name: 'MissingRoute'}),
+        new Route({path: '/wrapper', component: Static, name: 'Wrapper'})
       ),
       new Route(
         {path: '/hooks', component: Hooks, name: 'Hooks'},
@@ -79,7 +79,7 @@ document.addEventListener('DOMContentLoaded', function(){
       ),
       new Route({path: '/examples', component: Static, name: 'Examples'}),
       new Route(
-        {path: '/guides', component: Guides, name: 'Guides'},
+        {path: '/guides', component: Wrapper, props: {className: 'guides'}, name: 'Guides'},
         new Route({path: '/quick-start', component: Static, name: 'Quick Start'}),
         new Route({path: '/navigating', component: Static, name: 'Navigating'}),
         new Route({path: '/refs', component: Static, name: 'Refs'}),

docs/package.json

@@ -4,11 +4,10 @@
     "babel-preset-env": "^1.5.1",
     "css-loader": "^0.28.2",
     "etch": "^0.12.4",
-    "etch-router": "^0.2.2",
+    "etch-router": "^0.3.0-beta",
     "file-loader": "^0.11.1",
     "font-awesome": "^4.7.0",
     "highlight.js": "^9.11.0",
-    "jquery": "^3.2.1",
     "less": "^2.7.2",
     "less-loader": "^4.0.3",
     "nprogress": "^0.2.0",

index.js

@@ -2,8 +2,9 @@ const Link = require('./lib/components/link')
 const MissingRoute = require('./lib/components/missing-route')
 const Router = require('./lib/components/router')
 const Route = require('./lib/components/route')
+const Wrapper = require('./lib/components/wrapper')
 
 
 module.exports = {
-  Link, MissingRoute, Router, Route
+  Link, MissingRoute, Router, Route, Wrapper
 }

lib/components/output.js

@@ -23,7 +23,12 @@ class Output{
     var props = {
       router: this.props.router,
       params: {},
-      ref: 'component'
+      ref: 'component',
+      path: this.props.route.completePath
+    }
+
+    if(this.props.route.props.props){
+      props = Object.assign(props, this.props.route.props.props)
     }
 
     if(this.props.route.props.path){

lib/components/router.js

@@ -27,6 +27,7 @@ class Router{
           throw new EtchRouterError(child.tag + ' is not a valid child of Router')
         }else if(child.tag == 'Route'){
           this.routes.add({path: child.props.path, route: child, level: 0})
+          child.completePath = child.props.path
           child.addSubRoutesToRouter(this, 1)
         }else if(child.tag == 'MissingRoute'){
           this.missingRoute = child

lib/components/wrapper.js

@@ -0,0 +1,28 @@
+const etch = require('etch')
+
+class Wrapper{
+  constructor(props, ...children){
+    this.props = props
+    this.children = children
+
+    etch.initialize(this)
+  }
+
+  update(props, children){
+    this.props = props
+    this.children = children
+
+    return etch.update(this)
+  }
+
+  render(){
+    var tag = (this.props.tag || 'div')
+    var props = {}
+
+    if(this.props.className) props.className = this.props.className
+
+    return etch.dom(tag, props, ...this.children)
+  }
+}
+
+module.exports = Wrapper

package.json

@@ -1,6 +1,6 @@
 {
   "name": "etch-router",
-  "version": "0.2.2",
+  "version": "0.3.0-beta",
   "homepage": "http://etch-router.arcath.net",
   "description": "Routing for Etch",
   "main": "index.js",

tests/route.js

@@ -0,0 +1,29 @@
+/** @jsx etch.dom */
+
+const etch = require('etch')
+const {Router, Route} = require('../')
+const stateless = require('etch-stateless')
+
+describe('Route', function(){
+  it('should pass props to the component', function(){
+    var router = new Router(
+      {},
+      new Route({path: '/', component: stateless(etch, function(props, children){
+        return <div>{props.path}</div>
+      })})
+    )
+
+    expect(router.element.outerHTML).to.equal('<div>/</div>')
+  })
+
+  it('should pass route props to the component', function(){
+    var router = new Router(
+      {},
+      new Route({path: '/', props: {test: 'passed'}, component: stateless(etch, function(props, children){
+        return <div>{props.test}</div>
+      })})
+    )
+
+    expect(router.element.outerHTML).to.equal('<div>passed</div>')
+  })
+})

tests/wrapper.js

@@ -0,0 +1,16 @@
+const etch = require('etch')
+const {Wrapper} = require('../')
+
+describe('Wrapper', function(){
+  it('should use defaults', function(){
+    var wrapper = new Wrapper({}, etch.dom.i({}, 'test'))
+
+    expect(wrapper.element.outerHTML).to.equal('<div><i>test</i></div>')
+  })
+
+  it('should change the tag', function(){
+    var wrapper = new Wrapper({tag: 'p'}, etch.dom.i({}, 'test'))
+
+    expect(wrapper.element.outerHTML).to.equal('<p><i>test</i></p>')
+  })
+})