Skip to content

Commit a061885

Browse files
authored
Feature/Project update (#15)
* + Update project build. * + Update badge. * + Use vue directly from npm package for unit testing.
1 parent c317251 commit a061885

25 files changed

+8030
-791
lines changed

.babelrc

Lines changed: 0 additions & 5 deletions
This file was deleted.

.github/workflows/test.yml

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2+
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3+
name: Test
4+
5+
on: [push, pull_request]
6+
7+
jobs:
8+
test-core-package:
9+
runs-on: ubuntu-latest
10+
11+
strategy:
12+
matrix:
13+
node-version: [12.x]
14+
15+
steps:
16+
- name: Checkout code
17+
uses: actions/checkout@v2
18+
19+
- name: Use Node.js ${{ matrix.node-version }}
20+
uses: actions/setup-node@v1
21+
with:
22+
node-version: ${{ matrix.node-version }}
23+
24+
- name: Test core package
25+
run: npm ci
26+
27+
- name: Run test
28+
run: npm test

.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,8 @@ jspm_packages
4444
*.tgz
4545

4646
#IDEs.
47-
.ieda/
47+
.idea/
4848
.vscode/
49+
50+
# Dist.
51+
dist/

.npmignore

Lines changed: 0 additions & 7 deletions
This file was deleted.

.travis.yml

Lines changed: 0 additions & 14 deletions
This file was deleted.

LICENSE

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

README.md

Lines changed: 126 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,153 @@
11
# Vue-jsonp
22

3-
![Travis](https://travis-ci.org/LancerComet/vue-jsonp.svg?branch=master)
3+
[![VueJsonp](https://github.com/LancerComet/vue-jsonp/workflows/Test/badge.svg)](https://github.com/LancerComet/vue-jsonp/actions)
44

55
A tiny library for handling JSONP request.
66

7-
## Usage.
7+
## Quick Start
88

9-
Static function:
10-
`Vue.jsonp(url, dataObj, timeout)`
9+
As Vue plugin:
1110

12-
In Vue component:
13-
`this.$jsonp(url, dataObj, timeout)`
11+
```ts
12+
import { VueJsonp } from 'vue-jsonp'
1413

15-
## Params.
16-
- url: Target url for request.
17-
- dataObj: Object contains datas for querying.
18-
- timeout: Timeout for jsonp request.
14+
// Vue Plugin.
15+
Vue.use(VueJsonp)
1916

20-
## URL.
21-
```javascript
22-
'/url?{callbackQuery}={callbackName}&...'
17+
// Now you can use this.$jsonp in Vue components.
18+
const vm = new Vue()
19+
vm.$jsonp('/some-jsonp-url', {
20+
myCustomUrlParam: 'veryNice'
21+
})
22+
```
2323

24-
// Default:
25-
'/url?callback=jsonp_RANDOM_STRING&...'
26-
```
24+
Use function directly:
2725

28-
## Assign callback query name.
29-
```javascript
30-
this.$jsonp('/url', {
31-
callbackQuery: 'cb' // Default: callback
26+
```ts
27+
import { jsonp } from 'vue-jsonp'
28+
29+
jsonp('/some-jsonp-url', {
30+
myCustomUrlParam: 'veryNice'
3231
})
32+
```
3333

34-
// Then URL will be: '/url?cb=jsonp_aws84739ssu8e3'
34+
## Send data and set query & function name
35+
36+
### Send data
37+
38+
```ts
39+
// The request url will be "/some-jsonp-url?name=LancerComet&age=100&callback=jsonp_{RANDOM_STR}".
40+
jsonp('/some-jsonp-url', {
41+
name: 'LancerComet',
42+
age: 100
43+
})
3544
```
3645

37-
## Assign callback function name.
38-
```javascript
39-
this.$jsonp('/url', {
40-
callbackName: 'jsonpFunc'
46+
### Custom query & function name
47+
48+
The url uniform is `/url?{callbackQuery}={callbackName}&...`, the default is `/url?callback=jsonp_{RANDOM_STRING}&...`.
49+
50+
And you can change it like this:
51+
52+
```ts
53+
// The request url will be "/some-jsonp-url?name=LancerComet&age=100&cb=jsonp_func".
54+
jsonp('/some-jsonp-url', {
55+
callbackQuery: 'cb',
56+
callbackName: 'jsonp_func',
57+
name: 'LancerComet',
58+
age: 100
4159
})
60+
```
4261

43-
// Then URL will be: '/url?callback=jsonpFunc'
62+
## Module exports
63+
64+
- `VueJsonp: PluginObject<never>`
65+
66+
- `jsonp<T>: (url: string, param?: IJsonpParam, timeout?: number) => Promise<T>`
67+
68+
## API
69+
70+
### IJsonpParam
71+
72+
IJsonpParam is the type of param for jsonp function.
73+
74+
```ts
75+
/**
76+
* JSONP parameter declaration.
77+
*/
78+
interface IJsonpParam {
79+
/**
80+
* Callback query name.
81+
* This param is used to define the query name of the callback function.
82+
*
83+
* @example
84+
* // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
85+
* jsonp('/some-url', {
86+
* callbackQuery: 'myCallback',
87+
* callbackName: 'jsonp_func',
88+
* myCustomUrlParam: 'veryNice'
89+
* })
90+
*
91+
* @default callback
92+
*/
93+
callbackQuery?: string
94+
95+
/**
96+
* Callback function name.
97+
* This param is used to define the jsonp function name.
98+
*
99+
* @example
100+
* // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
101+
* jsonp('/some-url', {
102+
* callbackQuery: 'myCallback',
103+
* callbackName: 'jsonp_func',
104+
* myCustomUrlParam: 'veryNice'
105+
* })
106+
*
107+
* @default jsonp_ + randomStr()
108+
*/
109+
callbackName?: string
110+
111+
/**
112+
* Custom data.
113+
*/
114+
[key: string]: any
115+
}
44116
```
45117

46-
## Example.
47-
```javascript
118+
## Example
119+
120+
```ts
48121
import Vue from 'vue'
49-
import VueJsonp from 'vue-jsonp'
122+
import { VueJsonp } from 'vue-jsonp'
123+
50124
Vue.use(VueJsonp)
51125

52-
// If you want to setup the global timeout, just:
53-
Vue.use(VueJsonp, 5000)
54-
// Now all requests will be expired after 5000ms.
55-
56-
// Use it in Vue Component.
57-
const SomeComponent = Vue.extend({
58-
methods: {
59-
getData () {
60-
this.$jsonp('http://www.some-site.com/data', { name: 'MyName', age: 20 }).then(json => {
61-
// Success.
62-
}).catch(err => {
63-
// Failed.
64-
})
65-
}
126+
const vm = new Vue()
127+
const { code, data, message } = await vm.$jsonp<{
128+
code: number,
129+
message: string,
130+
data: {
131+
id: number,
132+
nickname: string
66133
}
134+
}>('/my-awesome-url', {
135+
name: 'MyName', age: 20
67136
})
68137

69-
// Static Function.
70-
// Request url will be 'http://www.some-site.com/data?name=MyName&age=20&cb=jsonpFunc'
71-
Vue.jsonp('http://www.some-site.com/data', {
72-
name: 'MyName', age: 20, callbackQuery: 'cb', callbackName: 'jsonpFunc'
73-
}).then(json => {
74-
// Success.
75-
}).catch(err => {
76-
// Failed.
77-
})
138+
assert(code === 0)
139+
assert(message === 'ok')
140+
assert(data.id === 1)
141+
assert(data.nickname === 'John Smith')
78142
```
143+
144+
```ts
145+
import { jsonp } from 'vue-jsonp'
146+
147+
const result = await jsonp<string>('/my-awesome-url')
148+
assert(result === 'such a jsonp')
149+
```
150+
79151
## License
80-
MIT.
152+
153+
MIT

0 commit comments

Comments
 (0)