Skip to content

Commit ac591f2

Browse files
author
Damon Muma
committed
init
0 parents  commit ac591f2

11 files changed

+4937
-0
lines changed

‎.eslintrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"env": {
3+
"jest": true
4+
}
5+
}

‎.gitignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
coverage
3+
npm-debug.log
4+
yarn-error.log
5+
.nyc_output
6+
coverage.lcov
7+
dist
8+
package-lock.json
9+
.DS_Store

‎.vscode/launch.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "node",
9+
"request": "launch",
10+
"name": "Launch Program",
11+
"skipFiles": ["<node_internals>/**"],
12+
"program": "${workspaceFolder}/dist/vue-router-state-sync.cjs.js"
13+
}
14+
]
15+
}

‎LICENSE

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
The MIT License (MIT)
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
> Bind and sync vue-router query parameters to component scope
2+
3+
## Installation
4+
5+
```sh
6+
npm install vue-router-state-sync
7+
```
8+
9+
## Usage
10+
11+
The API is modelled after Vuex helpers like `mapState` and `mapGetters`
12+
13+
```js
14+
// MyComponent.vue
15+
import { syncQueryParams, mapQueryParams } from "vue-router-state-sync";
16+
17+
export default {
18+
// other options
19+
computed: {
20+
...syncQueryParams(["page", "sort"]),
21+
...mapQueryParams(["author"])
22+
}
23+
};
24+
```
25+
26+
The queries specifed will become available as computed properties in the template. When using `syncQueryparams`, the params can be set inside the template as well because the returned computed function has a setter function.
27+
28+
```sh
29+
http://mysite.com/posts?page=7&author=John&sort=ASC
30+
```
31+
32+
```html
33+
<p>On page {{page}} of {{author}}'s articles.</p>
34+
<paginator :page.sync="page"></paginator>
35+
<select-input v-model="sort" :options="['ASC','DESC']"></select-input>
36+
```
37+
38+
## Roadmap
39+
40+
- Route params? (more difficult because we can't arbitrarily assume routes)
41+
- Provide more options:
42+
43+
```js
44+
...syncQueryParams(
45+
'sort',
46+
{query: 'page', computed: 'listPage', default: 1, type: Number,history: 'replace'}
47+
)
48+
```
49+
50+
## License
51+
52+
[MIT](http://opensource.org/licenses/MIT)

‎babel.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
env: {
3+
test: {
4+
presets: [
5+
['@babel/preset-env', { targets: { node: 'current' } }]
6+
]
7+
}
8+
}
9+
}

‎jest.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
collectCoverage: true,
3+
collectCoverageFrom: [
4+
'<rootDir>/src/*.js',
5+
],
6+
moduleFileExtensions: ['js', 'jsx', 'json'],
7+
transform: {
8+
'^.+\\.jsx?$': 'babel-jest',
9+
},
10+
moduleNameMapper: {
11+
'^@/(.*)$': '<rootDir>/src/$1',
12+
},
13+
testURL: 'http://localhost/',
14+
}

‎package.json

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "vue-router-state-sync",
3+
"version": "0.0.1",
4+
"description": "Coerce props to custom values",
5+
"main": "dist/vue-router-state-sync.cjs.js",
6+
"module": "dist/vue-router-state-sync.es.js",
7+
"unpkg": "dist/vue-router-state-sync.js",
8+
"browser": "dist/vue-router-state-sync.es.js",
9+
"author": {
10+
"name": "Damon Muma",
11+
"email": "[email protected]"
12+
},
13+
"scripts": {
14+
"lint": "eslint --color --ext=js,html src test",
15+
"unit": "jest",
16+
"dev": "yarn unit -- --watchAll",
17+
"test": "yarn lint && yarn unit",
18+
"prepublishOnly": "rollit"
19+
},
20+
"files": [
21+
"src",
22+
"dist",
23+
"LICENSE",
24+
"README.md"
25+
],
26+
"keywords": [
27+
"vue",
28+
"router",
29+
"state",
30+
"sync",
31+
"map",
32+
"helper"
33+
],
34+
"license": "MIT",
35+
"devDependencies": {
36+
"@babel/core": "^7.4.5",
37+
"@babel/preset-env": "^7.4.5",
38+
"@vue/test-utils": "^1.0.0-beta.26",
39+
"babel-jest": "^24.8.0",
40+
"codecov": "^3.5.0",
41+
"eslint": "^6.0.1",
42+
"jest": "^24.8.0",
43+
"vue": "^2.6.10",
44+
"vue-router": "^3.1.3",
45+
"vue-template-compiler": "^2.6.10"
46+
},
47+
"repository": {
48+
"type": "git",
49+
"url": "git+https://github.com/thedamon/vue-router-state-sync.git"
50+
},
51+
"bugs": {
52+
"url": "https://github.com/thedamon/vue-router-state-sync/issues"
53+
},
54+
"homepage": "https://github.com/thedamon/vue-router-state-sync#readme",
55+
"peerDependencies": {
56+
"vue": "^2.6.10",
57+
"vue-router": "^3.1.3"
58+
}
59+
}

‎src/index.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Vue from "vue";
2+
import VueRouter from "vue-router";
3+
4+
const generateComputed = (
5+
params,
6+
{ history = false, formatQueryParam = p => p, jsonEncodeValues = false } = {},
7+
sync = false
8+
) => {
9+
const paramNames = params;
10+
const computed = {};
11+
paramNames.forEach(param => {
12+
// if (!this.$router) installRouter();
13+
const qParam = formatQueryParam(param);
14+
const verb = history ? "push" : "push";
15+
16+
const get = function() {
17+
return this.$route && this.$route.query && this.$route.query[qParam];
18+
};
19+
const set = function(val) {
20+
this.$router[verb]({ query: { ...this.$route.query, [qParam]: val } });
21+
};
22+
computed[param] = sync ? { get, set } : get;
23+
});
24+
return computed;
25+
};
26+
27+
export const syncQueryParams = (params, config) => {
28+
return generateComputed(params, config, true);
29+
};
30+
31+
export const mapQueryParams = (params, config) => {
32+
return generateComputed(params, config, false);
33+
};
34+
35+
const installRouter = () => {
36+
Vue.use(VueRouter);
37+
this.$router = new VueRouter();
38+
};

‎test/index.spec.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Vue from "vue";
2+
// import { mount } from "@vue/test-utils";
3+
import { syncQueryParams, mapQueryParams } from "../src";
4+
5+
const vm = new Vue({
6+
name: "huh",
7+
computed: {
8+
...syncQueryParams(["page", "sort"]),
9+
...mapQueryParams(["author"])
10+
}
11+
});
12+
describe("Computed shape looks capiche", () => {
13+
test("we have computed props with correct names", () => {
14+
expect(Object.keys(vm.$options.computed)).toEqual([
15+
"page",
16+
"sort",
17+
"author"
18+
]);
19+
});
20+
// test("we have 2 synced bois", () => {});
21+
// test("we have 1 mapped boi", () => {});
22+
});
23+
24+
// TODO: figure out involving router and the query params in the unit tests bc that's what we're after.

0 commit comments

Comments
 (0)