feat: refactor to typescript based codes, more output formats

.eslintrc.js

@@ -0,0 +1,6 @@
+const { overrides } = require('@1stg/eslint-config/overrides')
+
+module.exports = {
+  extends: '@1stg',
+  overrides,
+}

.gitignore

@@ -1,2 +1,7 @@
+*.log
+*.tsbuildinfo
+.cache
+.parcel-cache
 dist
+lib
 node_modules

.huskyrc.js

@@ -0,0 +1 @@
+module.exports = require('@1stg/husky-config')

.lintstagedrc.js

@@ -0,0 +1 @@
+module.exports = require('@1stg/lint-staged')

.postcssrc.js

@@ -0,0 +1,11 @@
+const config = {
+  plugins: {
+    autoprefixer: {},
+  },
+}
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.cssnano = {}
+}
+
+module.exports = config

.remarkrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "preset-lint-consistent",
+    "preset-lint-recommended",
+    "preset-lint-markdown-style-guide",
+    "preset-prettier"
+  ]
+}

.travis.yml

@@ -1,26 +1,40 @@
 language: node_js
 
-node_js: stable
+node_js: --lts
 
-cache: node_modules
+cache: yarn
 
-before_install: yarn global add greenkeeper-lockfile
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
+  - git config --global user.name 'JounQin'
+  - git config --global user.email '[email protected]'
 
-before_script: greenkeeper-lockfile-update
+install: yarn --frozen-lockfile
 
 script:
   - yarn lint
-  - yarn dist
+  - yarn build
 
-after_script:
-  - greenkeeper-lockfile-upload
-  - yarn codecov
+before_deploy:
+  - npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
+  - git remote set-url origin https://user:[email protected]/$TRAVIS_REPO_SLUG.git
+  - git fetch origin $TRAVIS_BRANCH:$TRAVIS_BRANCH
+  - git checkout $TRAVIS_BRANCH
+  - yarn lerna-changelog
 
 deploy:
-  provider: npm
-  email: [email protected]
-  skip_cleanup: true
-  api_key:
-    secure: zkdG+n97baa29WGbX2QaHWYa/0ilj1DPNZpEuXPq6vqNvuAl6lgcT7SsMVKdcqXO4degDPppE3DnjBQMoY5XDEnSefOLhHaTROz0btdlXqj8yDzeURHn0sZpljftNL3wjcNJzci2VR62lSO0mDVO84KFRzbA+XOxbjsGC2GBcUxqQJhzbnDfrvjjUyMaUvILt9kEVu+98G3AUCbkemLviq9g/k8BndxyimRzqusqDk65SLWWPKSnlkEYOeTbN8pHUhXWnrPabIjznete+ccBoYQfcTio3LCLXPCsUkFatGhsIqqdNhmA4vVS+DyKfqvK8juhJwo1MTyO20uGVRWNrvCTXn+m8SxxCxnnRWOmoJBRCGJLmQ3t3pSX5pyTq3DcUEmWFpCdqjW3xkAgGF3qYMJ2at00ylXzz9ZayRHg+Bmfrl3pBguJzqxaOwTzxJZGe9b6ptd5UgNtcnRxXCieG7nqbkNux+u/QQuZOfiHQbNJmsUAqIVvN+bVZi5O7DaqGeb26TdMcl0vhSBM2Li99D660NInVysTbVD4yGCB1DMLBmTSP7U1VE/91nV6OV8FQ5e4MabnJrcDIB3AjgS325jZ99aiBsaGdQFMrhP5Ym4ZiDI21dlgeXJVvTKFq3fq08t0uTydqtsCuYNKeJ6Bi/TeUr0ESDN5JoK0pliI4Rk=
-  on:
-    tags: true
+  - provider: script
+    skip_cleanup: true
+    script: yarn lerna publish --create-release github --yes
+    on:
+      branch: master
+  - provider: script
+    skip_cleanup: true
+    script: yarn lerna publish --canary --conventional-prerelease --force-publish --preid beta --pre-dist-tag beta --yes
+    on:
+      branch: develop
+
+after_script:
+  - yarn add -D @codechecks/client @codechecks/build-size-watcher @codechecks/type-coverage-watcher -W
+  - yarn codechecks

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 JounQin
+Copyright (c) 2017-present JounQin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,42 +1,70 @@
-# vue-qrious
+<p align="center">
+  <a href="https://rxjs.dev">
+    <img src="https://rxjs.dev/assets/images/logos/Rx_Logo_S.png" height="50">
+  </a>
+  <a href="#readme">
+    <img src="https://rx-ts.github.io/assets/heart.svg" height="50">
+  </a>
+  <a href="https://vuejs.org">
+    <img src="https://vuejs.org/images/logo.png"  height="50">
+  </a>
+</p>
 
-[![peerDependencies status](https://david-dm.org/JounQin/vue-qrious/peer-status.svg)](https://david-dm.org/JounQin/vue-qrious?type=peer)
-[![dependency Status](https://david-dm.org/JounQin/vue-qrious/status.svg)](https://david-dm.org/JounQin/vue-qrious)
-[![devDependency Status](https://david-dm.org/JounQin/vue-qrious/dev-status.svg)](https://david-dm.org/JounQin/vue-qrious?type=dev)
+[![Travis](https://img.shields.io/travis/com/rx-ts/vue.svg)](https://travis-ci.com/rx-ts/vue)
+[![Codacy Grade](https://img.shields.io/codacy/grade/d5e7b6c031264056a0d1c126f3cc4857)](https://www.codacy.com/app/JounQin/vue)
+[![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Frx-ts%2Fvue%2Fmaster%2Fpackage.json)](https://github.com/plantain-00/type-coverage)
+[![GitHub release](https://img.shields.io/github/release/rx-ts/vue)](https://github.com/rx-ts/vue/releases)
+[![David Dev](https://img.shields.io/david/dev/rx-ts/vue.svg)](https://david-dm.org/rx-ts/vue?type=dev)
 
-a [vue](https://www.npmjs.com/package/vue) component of generating qrcode with [qrious](https://github.com/neocotic/qrious)
+[![Conventional Commits](https://img.shields.io/badge/conventional%20commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org)
+[![codechecks.io](https://raw.githubusercontent.com/codechecks/docs/master/images/badges/badge-default.svg?sanitize=true)](https://codechecks.io)
 
-## Notice
+> Make [Vue][] greater with [RxTS][].
 
-Since qrious has been split into multiple modules from 4.0.0 (https://github.com/neocotic/qrious/issues/53), so if your are using es module with webpack or rollup, remember to add an alias/replacement-plugin from module `qrious` to `node-qrious` on node/server environment.
+## TOC <!-- omit in toc -->
 
-Or you can manually choosing files in `vue-qrious/dist` folder as following.
+- [Homepage](#homepage)
+- [Packages](#packages)
+- [Install](#install)
+- [Changelog](#changelog)
+- [License](#license)
 
-- vue-qrious.browser.js
-- vue-qrious.browser.min.js
-- vue-qrious.js
-- vue-qrious.min.js
+## Homepage
 
-## Demo
+<a href="https://rx-vue.now.sh" target="_blank">rx-vue</a>
 
-https://JounQin.github.io/vue-qrious/
+## Packages
 
-## Usage
+This repository is a monorepo managed by [Lerna][] what means we actually publish several packages to npm from same codebase, including:
 
-``` vue
-<qrious value="https://blog.1stg.me/"/>
+| Package                              | Description                                           | Version                                                                                         | Peer Dependencies                                                                                                                                            | Dependencies                                                                                                                             |
+| ------------------------------------ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| [`vue-qrious`](/packages/vue-qrious) | 🤳 A Vue component for QR code generation with qrious | [![npm](https://img.shields.io/npm/v/vue-qrious.svg)](https://www.npmjs.com/package/vue-qrious) | [![David Peer](https://img.shields.io/david/peer/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious&type=peer) | [![David](https://img.shields.io/david/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious) |
+
+## Install
+
+```sh
+# yarn
+yarn add vue-qrious
+
+# npm
+npm i vue-qrious
 ```
 
-## Available Props
-
-prop      | type                 | default value
-----------|----------------------|--------------
-`background` | `string` (CSS color) | `"#ffffff"`
-`backgroundAlpha` | `number` (0.1-1.0) | `1.0`
-`foreground` | `string` (CSS color) | `"#000000"`
-`foregroundAlpha` | `number` (0.1-1.0) | `1.0`
-`level` | `string` ("L", "M", "Q", "H") | `"L"`
-`mime` | `string` ("image/png", "image/jpeg") | `"image/png"`
-`padding` | `number` | `null`
-`size`    | `number`             | `100`
-`value`   | `string`             |
+## Changelog
+
+Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
+
+## License
+
+[MIT][] © [JounQin][]@[1stG.me][]
+
+[1stg.me]: https://www.1stg.me
+[rxts]: https://rxjs.dev
+[vue]: https://vuejs.org
+[jounqin]: https://GitHub.com/JounQin
+[lerna]: https://github.com/lerna/lerna
+[mit]: http://opensource.org/licenses/MIT

codechecks.yml

@@ -0,0 +1,11 @@
+checks:
+  - name: build-size-watcher
+    options:
+      files:
+        - path: 'packages/*/lib/esm.min.js'
+  - name: type-coverage-watcher
+    options:
+      ignoreCatch: true
+      ignoreFiles:
+        - '*.d.ts'
+      strict: true

demo/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <title>VueQrious</title>
+    <link rel="stylesheet" href="./style.scss" />
+  </head>
+  <body>
+    <div id="app">
+      <h1>VueQrious Demo</h1>
+      <ul class="lists">
+        <li>
+          <label>background(color)</label>
+          <input type="color" v-model="background" />
+        </li>
+        <li>
+          <label>backgroundAlpha(0.1-1.0)</label>
+          <input type="number" v-model.number="backgroundAlpha" />
+        </li>
+        <li>
+          <label>foreground(color)</label>
+          <input type="color" v-model="foreground" />
+        </li>
+        <li>
+          <label>foregroundAlpha(0.1-1.0)</label>
+          <input type="number" v-model.number="foregroundAlpha" />
+        </li>
+        <li>
+          <label>level</label>
+          <select v-model="level">
+            <option value="L">L</option>
+            <option value="M">M</option>
+            <option value="Q">Q</option>
+            <option value="H">H</option>
+          </select>
+        </li>
+        <li>
+          <label>mime</label>
+          <select v-model="mime">
+            <option value="image/png">image/png</option>
+            <option value="image/jpeg">image/jpeg</option>
+          </select>
+        </li>
+        <li>
+          <label>padding(px)</label>
+          <input type="number" v-model.number="padding" />
+        </li>
+        <li>
+          <label>size(px)</label>
+          <input type="number" v-model.number="size" />
+        </li>
+        <li>
+          <label>value</label>
+          <textarea rows="6" cols="80" v-model="value"></textarea>
+        </li>
+      </ul>
+      <qrious v-bind="$data" />
+    </div>
+    <script src="./index.ts"></script>
+  </body>
+</html>

docs/demo.js → demo/index.ts

@@ -1,8 +1,11 @@
-/* global Vue, VueQrious */
+import Qrious from 'vue-qrious'
+import Vue from 'vue/dist/vue.esm'
+
 // eslint-disable-next-line no-new
 new Vue({
+  // tslint:disable-line: no-unused-expression
   el: '#app',
-  data: function() {
+  data() {
     return {
       background: '#ffffff',
       backgroundAlpha: 1,
@@ -12,10 +15,10 @@ new Vue({
       mime: 'image/png',
       padding: 0,
       size: 100,
-      value: 'http://1stg.me'
+      value: 'http://www.1stg.me',
     }
   },
   components: {
-    Qrious: VueQrious
-  }
+    Qrious,
+  },
 })

demo/shim.d.ts

@@ -0,0 +1,4 @@
+declare module 'vue/dist/*' {
+  import Vue from 'vue'
+  export default Vue
+}

docs/style.css → demo/style.scss

@@ -13,17 +13,17 @@ header {
   list-style: none;
   width: 300px;
   margin: 0 auto 30px;
-}
 
-.lists li {
-  margin-bottom: 8px;
-}
+  li {
+    margin-bottom: 8px;
+  }
 
-.lists label {
-  display: block;
-  margin-bottom: 5px;
-}
+  label {
+    display: block;
+    margin-bottom: 5px;
+  }
 
-.lists textarea {
-  width: 100%;
+  textarea {
+    width: 100%;
+  }
 }