Implemented /react <Router group={}>

Author: Josema

.vscode/launch.json

@@ -14,7 +14,7 @@
             "type": "node",
             "request": "launch",
             "name": "test",
-            "program": "${workspaceRoot}/test/routes.js"
+            "program": "${workspaceRoot}/test/react.js"
         }
     ]
 }

src/react/index.js

@@ -1,20 +1,22 @@
 const locationProperty = 'location'
-const separatorChar = '-'
+const groupProperty = 'group'
+const separatorChar = '_'
 
 export function Router(props) {
     let children = props.children
     let childrens = Array.isArray(children) ? children : [children]
     let location = props[locationProperty]
+    let group = props[groupProperty]
     for (let index = 0, total = childrens.length; index < total; ++index) {
         children = childrens[index]
-        if (Check(children.props, location))
+        if (Check(children.props, location, group))
             return getChildrenOfChildren(children)
     }
     return null
 }
 
 export function Route(props) {
-    let { children } = props
+    const { children } = props
     // let location = props[locationProperty]
     return Check(props) ? children : null
 }
@@ -35,24 +37,40 @@ function getChildrenOfChildren(children) {
     return Array.isArray(child) ? child[0] : child //[0] // We can remove [0] when preact supports array of childrens. react16 already does
 }
 
-function Check(props, location) {
+function Check(props, location, group) {
+    // console.log(group.getRoute(location.href))
     if (props.hasOwnProperty('if')) if (!props.if) return false
+    if (props.hasOwnProperty('is') && isObject(group)) {
+        const route = isObject(location)
+            ? group.getRoute(location.href)
+            : group.getRoute()
+        if (route !== props.is) return false
+    }
 
-    let prop
-    for (prop in props) {
-        if (
-            location !== undefined &&
-            prop !== 'children' &&
-            prop !== locationProperty &&
-            prop !== 'if'
-        ) {
-            let value = location.hasOwnProperty(prop)
-                ? location[prop]
-                : get(location, prop.split(separatorChar))
+    if (location !== undefined) {
+        for (let prop in props) {
+            let has_property = location.hasOwnProperty(prop)
+            let value = location[prop]
+            if (!has_property) {
+                const path = prop.split(separatorChar)
+                const lastprop = path.pop()
+                const obj = get(location, path)
+                if (isObject(obj) && obj.hasOwnProperty(lastprop)) {
+                    has_property = true
+                    value = obj[lastprop]
+                }
+            }
 
-            if (props[prop] instanceof RegExp) {
-                if (!props[prop].test(value)) return false
-            } else if (props[prop] !== value) return false
+            if (
+                has_property &&
+                // prop !== locationProperty &&
+                prop !== 'children' &&
+                prop !== 'if'
+            ) {
+                if (props[prop] instanceof RegExp) {
+                    if (!props[prop].test(value)) return false
+                } else if (props[prop] !== value) return false
+            }
         }
     }
 
@@ -81,3 +99,7 @@ function get(object, path) {
 
     return object[path[index]]
 }
+
+function isObject(object) {
+    return object && typeof object == 'object'
+}

test/react.js

@@ -2,6 +2,8 @@ const test = require('tape')
 const React = require('react')
 const ReactDOMServer = require('react-dom/server')
 const { Router, Route } = require('../react')
+const { createRoute, createGroup } = require('../routes')
+
 const e = React.createElement
 const element = e('div', null, 'Hello World')
 const html = '<div><div>Hello World</div></div>'
@@ -137,11 +139,222 @@ test('<Router location={}> multiple and if 2 </Router>', function(t) {
     t.end()
 })
 
-test('<Router location={}> multiple and if 2 </Router>', function(t) {
+test('<Router location={}> multiple and if 3 </Router>', function(t) {
     const component = e(Router, { location: { a: true, b: false } }, [
         e(Route, { a: true, b: false, if: false }, 'element'),
         e(Route, { if: false }, element)
     ])
     t.equal(render(component), htmlEmpty)
     t.end()
 })
+
+test('<Router location={}> multiple and if 4 </Router>', function(t) {
+    const component = e(Router, { location: { a: true, b: false } }, [
+        e(Route, { a: true, b: false, if: false }, 'element'),
+        e(Route, { c: false }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router location={}> regexp </Router>', function(t) {
+    const component = e(Router, { location: { a: 'hello' } }, [
+        e(Route, { a: new RegExp('hello') }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router location={}> regexp fail </Router>', function(t) {
+    const component = e(Router, { location: { a: 'hello' } }, [
+        e(Route, { a: new RegExp('lla') }, element)
+    ])
+    t.equal(render(component), htmlEmpty)
+    t.end()
+})
+
+test('<Router location={}> sub </Router>', function(t) {
+    const component = e(Router, { location: { a: { b: true } } }, [
+        e(Route, { a_b: false }, element)
+    ])
+    t.equal(render(component), htmlEmpty)
+    t.end()
+})
+
+test('<Router location={}> sub </Router>', function(t) {
+    const component = e(Router, { location: { a: { b: true } } }, [
+        e(Route, { a_c: true }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router location={}> sub </Router>', function(t) {
+    const component = e(Router, { location: { a: { b: true } } }, [
+        e(Route, { a_: true }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router location={}> sub double </Router>', function(t) {
+    const component = e(Router, { location: { a: { b: true, c: true } } }, [
+        e(Route, { a_b: true, a_c: true }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router location={}> sub double 2 </Router>', function(t) {
+    const component = e(Router, { location: { a: { b: true, c: true } } }, [
+        e(Route, { a_b: true, a_c: false }, element)
+    ])
+    t.equal(render(component), htmlEmpty)
+    t.end()
+})
+
+test('<Router group={}>', function(t) {
+    const group = createGroup()
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group }, [
+        e(Route, { is: route1 }, 'element'),
+        e(Route, { is: route2 }, element)
+    ])
+    t.equal(render(component), htmlEmpty)
+    t.end()
+})
+
+test('<Router group={createGroup(location)}>', function(t) {
+    const location = { href: '/path/profile/enzo' }
+    const group = createGroup(location)
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group }, [
+        e(Route, { is: route1 }, 'element'),
+        e(Route, { is: route2 }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router group={} location={}></Router>', function(t) {
+    const location = { href: '/path/profile/enzo' }
+    const group = createGroup()
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group, location: location }, [
+        e(Route, { is: route1 }, 'element'),
+        e(Route, { is: route2 }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router group={createGroup(location)} location={}></Router>', function(t) {
+    const location = { href: '/path/123' }
+    const location2 = { href: '/path/profile/enzo' }
+    const group = createGroup(location)
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group, location: location2 }, [
+        e(Route, { is: route1 }, 'element'),
+        e(Route, { is: route2 }, element)
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router group={createGroup(location)}>2</Router>', function(t) {
+    const location = { href: '/path/123' }
+    const group = createGroup(location)
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group }, [
+        e(Route, { is: route1 }, element),
+        e(Route, { is: route2 }, 'element')
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router group={createGroup(location)}>fail</Router>', function(t) {
+    const location = { href: '/path/yeah/123' }
+    const group = createGroup(location)
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group }, [
+        e(Route, { is: route1 }, element),
+        e(Route, { is: route2 }, 'element')
+    ])
+    t.equal(render(component), htmlEmpty)
+    t.end()
+})
+
+test('<Router group={}>if</Router>', function(t) {
+    const location = { href: '/path/123' }
+    const group = createGroup(location)
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group }, [
+        e(Route, { is: route1, if: true }, element),
+        e(Route, { is: route2 }, 'element')
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router group={}>if:false</Router>', function(t) {
+    const location = { href: '/path/123' }
+    const group = createGroup(location)
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group }, [
+        e(Route, { is: route1, if: false }, element),
+        e(Route, { is: route2 }, 'element')
+    ])
+    t.equal(render(component), htmlEmpty)
+    t.end()
+})
+
+test('<Router group={} location={}>if path</Router>', function(t) {
+    const href = '/path/123'
+    const location = { href: href }
+    const group = createGroup()
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group, location: location }, [
+        e(Route, { is: route1, if: true, href: href }, element),
+        e(Route, { is: route2 }, 'element')
+    ])
+    t.equal(render(component), html)
+    t.end()
+})
+
+test('<Router group={} location={}>if path:false</Router>', function(t) {
+    const href = '/path/123'
+    const location = { href: href }
+    const group = createGroup()
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group, location: location }, [
+        e(Route, { is: route1, if: true, href: 'href' }, element),
+        e(Route, { is: route2 }, 'element')
+    ])
+    t.equal(render(component), htmlEmpty)
+    t.end()
+})
+
+test('<Router group={} location={}>without is</Router>', function(t) {
+    const href = '/path/123'
+    const location = { href: href }
+    const group = createGroup()
+    const route1 = group.add(createRoute('/path/:page'))
+    const route2 = group.add(createRoute('/path/profile/:name'))
+    const component = e(Router, { group: group, location: location }, [
+        e(Route, { if: true, href: href }, element),
+        e(Route, { is: route2 }, 'element')
+    ])
+    t.equal(render(component), html)
+    t.end()
+})