├── README.md
├── generator
    ├── index.js
    └── template
    │   └── src
    │       └── components
    │           └── RxExample.vue
├── index.js
├── logo.png
├── package.json
└── prompts.js


/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cli-plugin-rx
 2 | 
 3 | Vue CLI 3 plugin for adding RxJS support to project using vue-rx.
 4 | 
 5 | ## How to Use
 6 | 
 7 | You need Vue CLI 3 installed globally as a pre-requisite. If you don't have it, please run
 8 | 
 9 | ```
10 | npm install -g @vue/cli
11 | ```
12 | 
13 | To add RxJS support to your vue-cli-powered project, run the following command in the project root folder:
14 | 
15 | ```
16 | vue add rx
17 | ```
18 | 
19 | You will be prompted to choose if you want to use a demo component. If you pick `yes` option, the component will be created in `components` folder. It's a simple RxJS-powered click counter.
20 | 


--------------------------------------------------------------------------------
/generator/index.js:
--------------------------------------------------------------------------------
 1 | module.exports = (api, options, rootOptions) => {
 2 |   api.extendPackage({
 3 |     dependencies: {
 4 |       'rxjs': '^6.3.3',
 5 |       'vue-rx': '^6.0.1',
 6 |     },
 7 |   });
 8 | 
 9 |   if (options.addExample) {
10 |     api.render('./template', {
11 |       ...options,
12 |     });
13 |   }
14 | 
15 |   let rxLines = `\nimport VueRx from 'vue-rx';\n\nVue.use(VueRx);`;
16 | 
17 |   api.onCreateComplete(() => {
18 |     // inject to main.js
19 |     const fs = require('fs');
20 |     const ext = api.hasPlugin('typescript') ? 'ts' : 'js';
21 |     const mainPath = api.resolve(`./src/main.${ext}`);
22 | 
23 |     // get content
24 |     let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' });
25 |     const lines = contentMain.split(/\r?\n/g).reverse();
26 | 
27 |     // inject import
28 |     const lastImportIndex = lines.findIndex(line => line.match(/^import/));
29 |     lines[lastImportIndex] += rxLines;
30 | 
31 |     // modify app
32 |     contentMain = lines.reverse().join('\n');
33 |     fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' });
34 |   });
35 | };
36 | 


--------------------------------------------------------------------------------
/generator/template/src/components/RxExample.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section>
 3 |         <h1>Click on 'Count' button to count your clicks</h1>
 4 |         <button v-stream:click="count$">Count clicks</button>
 5 |         <button @click="clearCounter">Clear counter</button>
 6 |         <p>{{result$}}</p>
 7 |     </section>
 8 | </template>
 9 | 
10 | <script>
11 | import {
12 |   filter,
13 |   bufferWhen,
14 |   debounceTime,
15 |   map,
16 |   startWith,
17 | } from 'rxjs/operators';
18 | export default {
19 |   domStreams: ['count$'],
20 |   subscriptions() {
21 |     return {
22 |       result$: this.count$.pipe(
23 |         filter(event => !!event),
24 |         bufferWhen(() => this.count$.pipe(debounceTime(400))),
25 |         map(clicks => clicks.length),
26 |         startWith(0),
27 |       ),
28 |     };
29 |   },
30 |   methods: {
31 |     clearCounter() {
32 |       this.count$.next(null);
33 |     },
34 |   },
35 | };
36 | </script>
37 | 
38 | <style>
39 | button {
40 |   padding: 10px;
41 |   font-size: 14px;
42 |   margin-right: 10px;
43 |   border-radius: 4px;
44 |   outline: none;
45 | }
46 | </style>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (api, opts) => {}


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NataliaTepluhina/vue-cli-plugin-rx/e187e58e666c3466abaaa77960d4e5f7215d6e3a/logo.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli-plugin-rx",
 3 |   "version": "0.1.5",
 4 |   "description": "Vue-cli 3 plugin for adding RxJS support to project using vue-rx",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/NataliaTepluhina/vue-cli-plugin-rx.git"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "vue-cli",
13 |     "rxjs",
14 |     "vue-rx"
15 |   ],
16 |   "author": "Natalia Tepluhina <tarya.se@gmail.com>",
17 |   "license": "MIT",
18 |   "homepage": "https://github.com/NataliaTepluhina/vue-cli-plugin-rx#readme"
19 | }
20 | 


--------------------------------------------------------------------------------
/prompts.js:
--------------------------------------------------------------------------------
1 | module.exports = [
2 |   {
3 |     name: `addExample`,
4 |     type: 'confirm',
5 |     message: 'Add example component to components folder?',
6 |     default: false,
7 |   },
8 | ];
9 | 


--------------------------------------------------------------------------------