From ad8805e30d8bca4bbcd26369a43944535eed1b72 Mon Sep 17 00:00:00 2001 From: Adam Laycock Date: Tue, 23 May 2017 11:28:29 +0100 Subject: [PATCH 1/6] route props to components, closes #9 --- lib/components/output.js | 7 ++++++- lib/components/router.js | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/components/output.js b/lib/components/output.js index e14d8c9..4ad8389 100644 --- a/lib/components/output.js +++ b/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){ diff --git a/lib/components/router.js b/lib/components/router.js index e018ba4..729e54c 100644 --- a/lib/components/router.js +++ b/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 From 4959f21d35eefddf770138520f05caf25285710b Mon Sep 17 00:00:00 2001 From: Adam Laycock Date: Tue, 23 May 2017 11:30:29 +0100 Subject: [PATCH 2/6] add missing test --- tests/route.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 tests/route.js diff --git a/tests/route.js b/tests/route.js new file mode 100644 index 0000000..45fc6c5 --- /dev/null +++ b/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
{props.path}
+ })}) + ) + + expect(router.element.outerHTML).to.equal('
/
') + }) + + 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
{props.test}
+ })}) + ) + + expect(router.element.outerHTML).to.equal('
passed
') + }) +}) From 6a15e6bef1757c208d13b86e2685b543278b1562 Mon Sep 17 00:00:00 2001 From: Adam Laycock Date: Tue, 23 May 2017 12:39:39 +0100 Subject: [PATCH 3/6] wrapper component, closes #8 --- index.js | 3 ++- lib/components/wrapper.js | 28 ++++++++++++++++++++++++++++ tests/wrapper.js | 16 ++++++++++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 lib/components/wrapper.js create mode 100644 tests/wrapper.js diff --git a/index.js b/index.js index 88c9e8b..1c77abb 100644 --- a/index.js +++ b/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 } diff --git a/lib/components/wrapper.js b/lib/components/wrapper.js new file mode 100644 index 0000000..5b55612 --- /dev/null +++ b/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 diff --git a/tests/wrapper.js b/tests/wrapper.js new file mode 100644 index 0000000..1949e7d --- /dev/null +++ b/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('
test
') + }) + + it('should change the tag', function(){ + var wrapper = new Wrapper({tag: 'p'}, etch.dom.i({}, 'test')) + + expect(wrapper.element.outerHTML).to.equal('

test

') + }) +}) From ae05a44e0ca72eb9595fa2e05a78369b43a53ddc Mon Sep 17 00:00:00 2001 From: Adam Laycock Date: Tue, 23 May 2017 13:03:05 +0100 Subject: [PATCH 4/6] release 0.3.0-beta --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6a39b30..f337a90 100644 --- a/package.json +++ b/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", From c5a25aca34ce19c8069b99ee2f222a337fd29a77 Mon Sep 17 00:00:00 2001 From: Adam Laycock Date: Tue, 23 May 2017 13:38:04 +0100 Subject: [PATCH 5/6] document new features" --- docs/assets/main.pack.js | 1251 ++++++++++++++---------------- docs/components/route.md | 1 + docs/components/wrapper.md | 29 + docs/js/components/components.js | 24 - docs/js/components/guides.js | 24 - docs/js/components/sidebar.js | 1 + docs/js/main.js | 11 +- docs/package.json | 2 +- 8 files changed, 639 insertions(+), 704 deletions(-) create mode 100644 docs/components/wrapper.md delete mode 100644 docs/js/components/components.js delete mode 100644 docs/js/components/guides.js diff --git a/docs/assets/main.pack.js b/docs/assets/main.pack.js index fc9deec..c4125dc 100644 --- a/docs/assets/main.pack.js +++ b/docs/assets/main.pack.js @@ -63,16 +63,16 @@ /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 64); +/******/ return __webpack_require__(__webpack_require__.s = 62); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { -const dom = __webpack_require__(81) +const dom = __webpack_require__(80) const render = __webpack_require__(5) -const {initialize, update, updateSync, destroy, destroySync} = __webpack_require__(79) +const {initialize, update, updateSync, destroy, destroySync} = __webpack_require__(78) const {setScheduler, getScheduler} = __webpack_require__(9) module.exports = { @@ -86,14 +86,15 @@ module.exports = { /* 1 */ /***/ (function(module, exports, __webpack_require__) { -const Link = __webpack_require__(74) -const MissingRoute = __webpack_require__(75) -const Router = __webpack_require__(78) -const Route = __webpack_require__(77) +const Link = __webpack_require__(72) +const MissingRoute = __webpack_require__(73) +const Router = __webpack_require__(76) +const Route = __webpack_require__(75) +const Wrapper = __webpack_require__(77) module.exports = { - Link, MissingRoute, Router, Route + Link, MissingRoute, Router, Route, Wrapper } @@ -226,7 +227,7 @@ var singleton = null; var singletonCounter = 0; var stylesInsertedAtTop = []; -var fixUrls = __webpack_require__(380); +var fixUrls = __webpack_require__(379); module.exports = function(list, options) { if (typeof DEBUG !== "undefined" && DEBUG) { @@ -10893,7 +10894,7 @@ var etch = __webpack_require__(0); var _require = __webpack_require__(1), Link = _require.Link; -var Sidebar = __webpack_require__(63); +var Sidebar = __webpack_require__(61); var Layout = function () { function Layout(props, children) { @@ -11070,7 +11071,7 @@ module.exports = { // associated functions repeatedly. Again, they should be scheduled in such a // way so as to avoid synchronous reflows. -const DefaultScheduler = __webpack_require__(80) +const DefaultScheduler = __webpack_require__(79) let scheduler = null @@ -11092,7 +11093,7 @@ module.exports.getScheduler = function getScheduler () { const EVENT_LISTENER_PROPS = __webpack_require__(8) const SVG_TAGS = __webpack_require__(6) -const SVG_ATTRIBUTE_TRANSLATIONS = __webpack_require__(83) +const SVG_ATTRIBUTE_TRANSLATIONS = __webpack_require__(82) const EMPTY = '' module.exports = function (domNode, oldVirtualNode, newVirtualNode, options) { @@ -11479,7 +11480,7 @@ module.exports = "/assets/fonts/raleway-latin-900italic.eot"; /* 47 */ /***/ (function(module, exports, __webpack_require__) { -var isarray = __webpack_require__(374) +var isarray = __webpack_require__(373) /** * Expose `pathToRegexp`. @@ -14693,102 +14694,6 @@ if (typeof module !== 'undefined' && module.exports) { "use strict"; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -/** @jsx etch.dom */ -var etch = __webpack_require__(0); - -var Components = function () { - function Components(props, children) { - _classCallCheck(this, Components); - - this.props = props; - this.children = children; - - etch.initialize(this); - } - - _createClass(Components, [{ - key: 'update', - value: function update(props, children) { - this.props = props; - this.children = children; - - return etch.update(this); - } - }, { - key: 'render', - value: function render() { - return etch.dom( - 'div', - { clasName: 'components' }, - this.children - ); - } - }]); - - return Components; -}(); - -module.exports = Components; - -/***/ }), -/* 50 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -/** @jsx etch.dom */ -var etch = __webpack_require__(0); - -var Guides = function () { - function Guides(props, children) { - _classCallCheck(this, Guides); - - this.props = props; - this.children = children; - - etch.initialize(this); - } - - _createClass(Guides, [{ - key: 'update', - value: function update(props, children) { - this.props = props; - this.children = children; - - return etch.update(this); - } - }, { - key: 'render', - value: function render() { - return etch.dom( - 'div', - { className: 'guides' }, - this.children - ); - } - }]); - - return Guides; -}(); - -module.exports = Guides; - -/***/ }), -/* 51 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -14845,7 +14750,7 @@ var Hooks = function () { module.exports = Hooks; /***/ }), -/* 52 */ +/* 50 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -14933,7 +14838,7 @@ var Missing = function () { module.exports = Missing; /***/ }), -/* 53 */ +/* 51 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -15009,7 +14914,7 @@ var Releases = function () { module.exports = Releases; /***/ }), -/* 54 */ +/* 52 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -15143,7 +15048,7 @@ var Releases = function () { module.exports = Releases; /***/ }), -/* 55 */ +/* 53 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -15155,7 +15060,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons /** @jsx etch.dom */ var etch = __webpack_require__(0); -var hljs = __webpack_require__(199); +var hljs = __webpack_require__(198); var showdown = __webpack_require__(48); showdown.extension('codehighlight', function () { @@ -15236,7 +15141,7 @@ var Static = function () { module.exports = Static; /***/ }), -/* 56 */ +/* 54 */ /***/ (function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress @@ -15722,13 +15627,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/* NProgress, /***/ }), -/* 57 */ +/* 55 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a