diff --git a/README.md b/README.md index 66cf407..9158d7e 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ yarn add svelte-router import Home from './Home.html' import Welcome from './Welcome.html' import Animal from './Animal.html' + import NotFound from './NotFound.html' const { createRouter, RouterLink } = SvelteRouter @@ -53,6 +54,9 @@ yarn add svelte-router } }) } + },{ + pathRegex: '[a-zA-Z]+', + defaultRoute: NotFound }) export default { diff --git a/example/app.html b/example/app.html index a6ffe44..d7ed084 100644 --- a/example/app.html +++ b/example/app.html @@ -36,9 +36,11 @@ data: { salutation: 'Hello' } - }, - }, - default: NotFound + } + } + },{ + pathRegex: '[a-zA-Z]+', + defaultRoute: NotFound }) createRouter.listen(() => { console.log('router changed') diff --git a/package.json b/package.json index 7bdf54a..ba02f74 100644 --- a/package.json +++ b/package.json @@ -43,11 +43,11 @@ "koa-router": "^7.4.0", "nodemon": "^1.14.11", "rimraf": "^2.6.2", - "rollup": "^0.55.1", + "rollup": "^0.56.3", "rollup-plugin-babel": "^3.0.3", "rollup-plugin-commonjs": "^8.3.0", "rollup-plugin-eslint": "^4.0.0", - "rollup-plugin-node-resolve": "^3.0.2", + "rollup-plugin-node-resolve": "^3.0.3", "rollup-plugin-replace": "^2.0.0", "rollup-plugin-svelte": "^4.0.0", "rollup-plugin-uglify": "^3.0.0", diff --git a/src/utils/create-router.js b/src/utils/create-router.js index 84b54c8..2898df8 100644 --- a/src/utils/create-router.js +++ b/src/utils/create-router.js @@ -1,22 +1,19 @@ import history from './history' -const DYNAMIC_PATH_REGEX = '[a-zA-Z]+' -const DEFAULT_ROUTE = 'default' - -const getPathRegex = (sections) => { +const getPathRegex = (sections, pathRegex) => { return sections.map((value) => { - if (value.match(new RegExp(`:${DYNAMIC_PATH_REGEX}`)) !== null) { - return `([a-zA-Z0-9]+)` + if (value.match(new RegExp(`:${pathRegex}`)) !== null) { + return `(${pathRegex})` } return value }).join('\\/') } -const getPathVariables = (sections, matches) => { +const getPathVariables = (sections, matches, pathRegex) => { const keys = sections.filter((value) => { - return value.match(new RegExp(`:${DYNAMIC_PATH_REGEX}`)) !== null + return value.match(new RegExp(`:${pathRegex}`)) !== null }).map((value) => { - return value.match(new RegExp(`:(${DYNAMIC_PATH_REGEX})`))[1] + return value.match(new RegExp(`:(${pathRegex})`))[1] }) const pathVariables = {} keys.forEach((value, index) => { @@ -26,9 +23,9 @@ const getPathVariables = (sections, matches) => { return pathVariables } -const getContent = (options, path, target, pathVariables) => { - let { Component, props } = options[path] - if (!Component) Component = options[path] +const getContent = (paths, path, target, pathVariables) => { + let { Component, props } = paths[path] + if (!Component) Component = paths[path] let extraData = { data: { path: pathVariables @@ -46,30 +43,33 @@ const getContent = (options, path, target, pathVariables) => { }) } -const createRouter = options => { +const createRouter = (paths, options = {}) => { let _target // target DOM let _unlisten // history listener let _content // route instance + const pathRegex = options['pathRegex'] ? options['pathRegex'] : '[a-zA-Z0-9]+' + const defaultRoute = options['defaultRoute'] ? options['defaultRoute'] : 'default' + const handleRouteChange = location => { let found = false if (_content) _content.destroy() - for (let path in options) { - if (Object.prototype.hasOwnProperty.call(options, path)) { + for (let path in paths) { + if (Object.prototype.hasOwnProperty.call(paths, path)) { const sections = path.split('/') - const regexPath = getPathRegex(sections) + const regexPath = getPathRegex(sections, pathRegex) const matches = location.pathname.match(new RegExp(`^${regexPath}$`)) if (matches !== null) { - const pathVariables = getPathVariables(sections, matches) - _content = getContent(options, path, _target, pathVariables) + const pathVariables = getPathVariables(sections, matches, pathRegex) + _content = getContent(paths, path, _target, pathVariables) found = true break } } } - if (!found && options[DEFAULT_ROUTE]) { - _content = getContent(options, DEFAULT_ROUTE, _target, {}) + if (!found && paths[defaultRoute]) { + _content = getContent(paths, defaultRoute, _target, {}) } }