Commit 22e7e355 authored by Clorichel's avatar Clorichel
Browse files

starting from vue-gitlab-api@019f3f28

parents
Pipeline #5264648 passed with stage
in 2 minutes and 28 seconds
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
build/*.js
config/*.js
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
.DS_Store
node_modules/
dist/
npm-debug.log
test/unit/coverage
out/
image: node:6
before_script:
# needed anytime
- npm install --silent
stages:
- test
# this is the last stage to execute
- deploy
testing:
stage: test
script:
- npm run unit
npm-publish:
stage: deploy
# may fail if version already exists on npm registry
allow_failure: true
script:
- npm run build
# NPM_TOKEN is set in the GitLab project Secret Variables
- echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
# publishing will fail if package.json version is unchanged
- npm publish
# removing the token immediately, just in case...
- rm ~/.npmrc
environment:
name: npm package
url: https://www.npmjs.com/package/vue-gitlab-api
only:
- master
pages:
stage: deploy
script:
- ./node_modules/.bin/jsdoc src/GitLabAPI.js
- mv out public
artifacts:
paths:
- public
environment:
name: JSDoc API Documentation
url: https://clorichel.gitlab.io/vue-gitlab-api/
only:
- master
\ No newline at end of file
.npmignore
.DS_Store
node_modules/
npm-debug.log
test/unit/coverage
# Changelog
All notable changes to this project are documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). For each version listed below, changes are grouped to describe their impact on the project, as follows:
- `Added` for new features
- `Changed` for changes in existing functionality
- `Deprecated` for once-stable features removed in upcoming releases
- `Removed` for deprecated features removed in this release
- `Fixed` for any bug fixes
- `Security` to invite users to upgrade in case of vulnerabilities
## [Unreleased]
### Added
- Now able to use a callback function with full response for GET requests, or to assign data as usual
- Support for POST requests on GitLab API with custom parameters
- Ability fo use a callback function with full response for POST requests, or to assign data returned to Vue.js component data
- Made it clear using Private Token or Personal Access Token is the same
- work in progress on [clorichel/vue-gitlab-api issues](https://gitlab.com/clorichel/vue-gitlab-api/issues?scope=all&state=opened&utf8=%E2%9C%93&label_name%5B%5D=Feature)...
## 0.1.7 - 2016-10-29
### Added
- Now able to use a callback function with full response for GET requests, or to assign data as usual
- Support for POST requests on GitLab API with custom parameters
- Ability fo use a callback function with full response for POST requests, or to assign data returned to Vue.js component data
- Made it clear using Private Token or Personal Access Token is the same
## 0.1.6 - 2016-10-26
### Added
- Vuex store module provides downloading state (Boolean) and total number or running requests
- Using Vuex? You can now register your application Vuex store to improve it with GitLabAPI Vuex store module
## 0.1.5 - 2016-10-26
### Added
- Improved Readme and example with changed behavior
- Filling in the reactive data property now uses stock Vue.set
- Error messages on API request is now much readable
### Changed
- Reactive data to fill in do no more have to be an empty array, but an empty object
## 0.1.4 - 2016-10-25
### Added
- One can now send in a callback function to customize behavior on requests errors
## 0.1.3 - 2016-10-25
### Fixed
- Library dist file is now built to make it usable
## 0.1.2 - 2016-10-25
### Added
- Readme now gives credit for the chosen logo
### Fixed
- Ensured that dist folder is deployed with npm package
## 0.1.1 - 2016-10-25
### Added
- Just bumped version to npm publish again
## 0.1.0 - 2016-10-25
### Added
- This CHANGELOG file to hopefully serve as an evolving example of a standardized open source project CHANGELOG
- README describes main topics to get started
- Now published as the vue-gitlab-api NPM package to simplify installing and using
- Support for GET requests on GitLab API with custom parameters, assigning data returned to Vue.js component data
- Library supports setting GitLab instance URL and user Private Token after booting
- GitLabAPI.js has been created as a Vue.js plugin
- A DevTest vue has been created for developers convenience
- Initial vue-cli scaffolding on webpack template with unit tests
[Unreleased]: https://gitlab.com/clorichel/vue-gitlab-api/compare/v0.1.7...master
\ No newline at end of file
The MIT License (MIT)
Copyright (c) 2016 Pierre-Alexandre Clorichel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# vue-gitlab-api
A deadly simple Vue.js plugin to consume GitLab API.
Head to [the extensive JSDoc API documentation for vue-gitlab-api](https://clorichel.gitlab.io/vue-gitlab-api/Vue_GitLabAPI.html), or keep on reading for an easy process to integrate it in your application.
## Using it
### Install and import
```bash
npm install vue-gitlab-api
```
In your main application JS file (typically `main.js` if you are using [vue-cli](https://github.com/vuejs/vue-cli) webpack template), simply use the plugin:
```javascript
// vue-resource is needed too
import VueResource from 'vue-resource'
Vue.use(VueResource)
// import vue-gitlab-api
import GitLabAPI from 'vue-gitlab-api'
Vue.use(GitLabAPI, { url: 'https://gitlab.com', token: 'user Private Token or Personal Access Token' })
```
You can configure _application wide_ options while `Vue.use`'ing this plugin:
| Name | Description |
|---------|---------------------------------------------------------------------------------------|
| `url` | your GitLab instance URL (defaults to https://gitlab.com) |
| `token` | your GitLab user _Private Token_ or _Personal Access Token_ use to connect to the API |
### Consume GitLab API
From anywhere now, you can simply consume GitLab API:
```javascript
Vue.GitLabAPI.get('/projects', {}, [this.myGitLabData, 'projects'])
```
You can also use it in your `.vue` components with `this.GitLabAPI`:
```javascript
this.GitLabAPI.get('/projects', {}, [this.myGitLabData, 'projects'])
```
That was it! Now that you are bootstrapped in, have a look at all the methods available to you in the extensive JSDoc API documentation available on [these auto-generated GitLab Pages](https://clorichel.gitlab.io/vue-gitlab-api/Vue_GitLabAPI.html).
**Important:** if you want your filled-in property `this.myGitLabData.projects` to be reactive "the Vue.js way", you MUST define this variable as a data in your components or vues, with a default value of an empty object (read `myGitLabData: {}`). See how to do it on a vue component on this example:
```javascript
<template>
<div>
<p>Projects grabbed: {{ projectsCount }}</p>
</div>
</template>
<script>
export default {
data () {
return {
myGitLabData: {}
}
},
mounted: function () {
this.GitLabAPI.get('projects', {}, [this.myGitLabData, 'projects'])
},
computed: {
projectsCount: function () {
if (this.myGitLabData.projects) {
return this.myGitLabData.projects.length
}
return 'none yet...'
}
}
}
</script>
```
This is due to the fact Vue does not allow to add new reactive properties dynamically. Read more about it on the awesome [Vue.js guide](http://vuejs.org/guide/reactivity.html#Change-Detection-Caveats).
During your application workflow, you could want to change GitLab instance URL, and/or user authentication token. These methods will let you do it easily:
```javascript
// set application wide GitLabAPI url value
this.GitLabAPI.setUrl('https://your.gitlab-instance.com')
// set application wide GitLabAPI token value
this.GitLabAPI.setToken('other user Private Token or Personal Access Token')
```
## Vuex store module
Using Vuex? You can attach _vue-gitlab-api_ Vuex module to your application store. Within one of your `.vue` components, simply register it before you using it from your application:
```javascript
// registers GitLabAPI Vuex module to your application Vuex store
this.GitLabAPI.registerStore(this.$store)
// you are now able to read this state
this.$store.state.GitLabAPI.downloading
```
Here are Vuex `states` provided by _vue-gitlab-api_ to your application:
| Vuex state | Type | Description |
|---------------|---------|----------------------------------------------------|
| `downloading` | Boolean | Defines if vue-gitlab-api is currently downloading |
| `running` | Number | Count vue-gitlab-api requests running now |
Have a look at [Vuex](https://github.com/vuejs/vuex) for more details, or read on this complete example:
```javascript
import Vue from 'vue'
// your application is using Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// remember vue-resource is needed for vue-gitlab-api
import VueResource from 'vue-resource'
Vue.use(VueResource)
// using vue-gitlab-api
import GitLabAPI from 'vue-gitlab-api'
Vue.use(GitLabAPI, { url: 'https://gitlab.com', token: 'user Private Token' })
// declare your Vuex store
const store = new Vuex.Store({})
// this is your application
const app = new Vue({
el: '#app',
mounted: {
// register GitLabAPI Vuex store!
this.GitLabAPI.registerStore(store)
},
computed: {
// with this computed property, do something insanely simple such as:
// <p v-if="downloading">Downloading from GitLab...</p>
downloading: function () {
if (typeof store.state.GitLabAPI !== 'undefined') {
return store.state.GitLabAPI.downloading
} else {
return false
}
}
}
})
```
## Contributing
Initial scaffolding was done with [vue-cli](https://github.com/vuejs/vue-cli) webpack template. For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
Simply said, one can start working on its own customized version of _vue-gitlab-api_ in no time:
``` bash
# install dependencies
npm install
# run unit tests
npm run unit
# build JSDoc API documentation (defaults to the ./out folder)
./node_modules/.bin/jsdoc src/GitLabAPI.js
# serve with hot reload at localhost:8080
npm run dev
```
## What's next?
Without any obligation nor due date, one could expect to be done this non-exhaustive [list of improvements grouped on issues labeled `Feature`](https://gitlab.com/clorichel/vue-gitlab-api/issues?scope=all&state=opened&utf8=%E2%9C%93&label_name%5B%5D=Feature).
You can read on the [Changelog](CHANGELOG.md) too, for historical and upcoming new features, changes, deprecations, removed features, bug and security fixes.
## Support
Your are free to [open an issue](https://gitlab.com/clorichel/vue-gitlab-api/issues/new) right in this GitLab repository whether you should be facing a problem or a bug. Please advise this is not a commercial product, so one could experience random response time. Positive, friendly and productive conversations are expected on the issues. Screenshots and steps to reproduce are highly appreciated. Chances are you may get your issue solved if you follow these simple guidelines.
## Credits
- Logo derived from a [SlideGenius](https://thenounproject.com/slidegenius/) creation [CC licensed](https://creativecommons.org/licenses/by/3.0/us/)
## License
The _vue-gitlab-api_ plugin is distributed under the [MIT License (MIT)](LICENSE). Please have a look at the dependencies licenses if you plan on using, building, or distributing this plugin.
\ No newline at end of file
// https://github.com/shelljs/shelljs
require('shelljs/global')
env.NODE_ENV = 'production'
var path = require('path')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')
console.log(
' Tip:\n' +
' Built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
)
var spinner = ora('building for production...')
spinner.start()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/*', assetsPath)
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
})
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
var config = require('../config')
if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var opn = require('opn')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = process.env.NODE_ENV === 'testing'
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable
var app = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
module.exports = app.listen(port, function (err) {
if (err) {
console.log(err)
return
}
var uri = 'http://localhost:' + port
console.log('Listening at ' + uri + '\n')
opn(uri)
})
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
// generate loader string to be used with extract text plugin
function generateLoaders (loaders) {
var sourceLoader = loaders.map(function (loader) {
var extraParamChar
if (/\?/.test(loader)) {
loader = loader.replace(/\?/, '-loader?')
extraParamChar = '&'
} else {
loader = loader + '-loader'
extraParamChar = '?'
}
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
} else {
return ['vue-style-loader', sourceLoader].join('!')
}
}
// http://vuejs.github.io/vue-loader/configurations/extract-css.html
return {
css: generateLoaders(['css']),
postcss: generateLoaders(['css']),
less: generateLoaders(['css', 'less']),
sass: generateLoaders(['css', 'sass?indentedSyntax']),
scss: generateLoaders(['css', 'sass']),
stylus: generateLoaders(['css', 'stylus']),
styl: generateLoaders(['css', 'stylus'])
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
loader: loader
})
}
return output
}
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
],