├── .gitattributes
├── .gitignore
├── .vscode
    ├── extensions.json
    ├── launch.json
    ├── settings.json
    └── tasks.json
├── .vscodeignore
├── CHANGELOG.md
├── README.md
├── app
    ├── .eslintrc
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── vue.png
    │   ├── components
    │   │   ├── app.js
    │   │   └── vue.js
    │   ├── controls
    │   │   ├── TextControl.vue
    │   │   └── text.js
    │   ├── editor.js
    │   ├── index.js
    │   ├── request.js
    │   └── sockets.js
    └── webpack.config.js
├── example.png
├── package-lock.json
├── package.json
├── src
    ├── extension.ts
    ├── interfaces.ts
    ├── test
    │   ├── extension.test.ts
    │   └── index.ts
    └── vue
    │   ├── file.ts
    │   ├── generate.ts
    │   └── reverse.ts
├── tsconfig.json
├── tslint.json
└── vsc-extension-quickstart.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Set default behavior to automatically normalize line endings.
2 | * text=auto
3 | 
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | out
2 | node_modules
3 | .vscode-test/
4 | *.vsix
5 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | 	// See http://go.microsoft.com/fwlink/?LinkId=827846
3 | 	// for the documentation about the extensions.json format
4 | 	"recommendations": [
5 | 		"eg2.tslint"
6 | 	]
7 | }


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | // A launch configuration that compiles the extension and then opens it inside a new window
 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 | {
 6 | 	"version": "0.2.0",
 7 |     "configurations": [
 8 |         {
 9 |             "name": "Extension",
10 |             "type": "extensionHost",
11 |             "request": "launch",
12 |             "runtimeExecutable": "${execPath}",
13 |             "args": [
14 |                 "--extensionDevelopmentPath=${workspaceFolder}"
15 |             ],
16 |             "outFiles": [
17 |                 "${workspaceFolder}/out/**/*.js"
18 |             ],
19 |             "preLaunchTask": "npm: watch"
20 |         },
21 |         {
22 |             "name": "Extension Tests",
23 |             "type": "extensionHost",
24 |             "request": "launch",
25 |             "runtimeExecutable": "${execPath}",
26 |             "args": [
27 |                 "--extensionDevelopmentPath=${workspaceFolder}",
28 |                 "--extensionTestsPath=${workspaceFolder}/out/test"
29 |             ],
30 |             "outFiles": [
31 |                 "${workspaceFolder}/out/test/**/*.js"
32 |             ],
33 |             "preLaunchTask": "npm: watch"
34 |         }
35 |     ]
36 | }
37 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | // Place your settings in this file to overwrite default and user settings.
 2 | {
 3 |     "files.exclude": {
 4 |         "out": false // set this to true to hide the "out" folder with the compiled JS files
 5 |     },
 6 |     "search.exclude": {
 7 |         "out": true // set this to false to include "out" folder in search results
 8 |     },
 9 |     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
10 |     "typescript.tsc.autoDetect": "off"
11 | }


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558
 2 | // for the documentation about the tasks.json format
 3 | {
 4 |     "version": "2.0.0",
 5 |     "tasks": [
 6 |         {
 7 |             "type": "npm",
 8 |             "script": "watch",
 9 |             "problemMatcher": "$tsc-watch",
10 |             "isBackground": true,
11 |             "presentation": {
12 |                 "reveal": "never"
13 |             },
14 |             "group": {
15 |                 "kind": "build",
16 |                 "isDefault": true
17 |             }
18 |         }
19 |     ]
20 | }


--------------------------------------------------------------------------------
/.vscodeignore:
--------------------------------------------------------------------------------
1 | .vscode/**
2 | .vscode-test/**
3 | out/test/**
4 | out/**/*.map
5 | src/**
6 | .gitignore
7 | tsconfig.json
8 | vsc-extension-quickstart.md
9 | tslint.json


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 | All notable changes to the "rete-for-vue" extension will be documented in this file.
3 | 
4 | ## 11.10.2018
5 | 
6 | - Write Vue components to files
7 | 
8 | ## 10.10.2018
9 | - Draft


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Rete for Vue (experimental)
 2 | 
 3 | VS Code extension for generation of Vue.js component using Rete.js.
 4 | 
 5 | Draft: on every scheme changes the generator will create .vue files with imports according to nodes and connections
 6 | 
 7 | ### How to use
 8 | 
 9 | - Open tab: `F1 > Open Rete ...`
10 | 
11 | ![](example.png)
12 | 


--------------------------------------------------------------------------------
/app/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": [
 3 |       "eslint:recommended"
 4 |     ],
 5 |     "parserOptions": {
 6 |       "ecmaVersion": 2018,
 7 |       "sourceType": "module",
 8 |       "ecmaFeatures": {
 9 |         "jsx": true
10 |       }
11 |     },
12 |     "globals": {
13 |         "acquireVsCodeApi": true,
14 |         "document": true,
15 |         "console": true
16 |     },
17 |     "rules": {
18 |         "no-console": 0
19 |     }
20 | }


--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules


--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rete-for-vue-app",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "build": "webpack --config webpack.config.js",
 7 |     "build:dev": "webpack --watch --progress --config webpack.config.js"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "rete": "file:../../rete",
13 |     "rete-context-menu-plugin": "^0.1.4",
14 |     "rete-vue-render-plugin": "file:../../vue-render-plugin"
15 |   },
16 |   "devDependencies": {
17 |     "css-loader": "^1.0.0",
18 |     "html-webpack-plugin": "^3.2.0",
19 |     "node-sass": "^4.9.3",
20 |     "pug": "^2.0.3",
21 |     "pug-plain-loader": "^1.0.0",
22 |     "sass-loader": "^7.1.0",
23 |     "vue-loader": "^15.4.2",
24 |     "vue-template-compiler": "^2.5.17",
25 |     "webpack": "^4.20.2",
26 |     "webpack-cli": "^3.1.2"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/app/public/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <title>Node Editor</title>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 6 |     <style>
 7 |         html,
 8 |         body {
 9 |             margin: 0;
10 |             height: 100%;
11 |             width: 100%;
12 |         }
13 | 
14 |         .container {
15 |             width: 100%;
16 |             height: 100%;
17 |         }
18 |     </style>
19 | 
20 | </head>
21 | 
22 | <body>
23 |     <input id="source"/>
24 |     <button id="reverse-button">Reverse</button>
25 |     <button id="generate-button">Generate</button>
26 |     <div class="container">
27 |         <div class="node-editor" id="nodeEditor"></div>
28 |     </div>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/app/src/assets/vue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/retejs/rete-for-vue/73b765bfefb21ccf811750db03b7bbb0a5a6a54c/app/src/assets/vue.png


--------------------------------------------------------------------------------
/app/src/components/app.js:
--------------------------------------------------------------------------------
 1 | import { Component, Output } from 'rete';
 2 | import Sockets from '../sockets';
 3 | 
 4 | export class AppComponent extends Component {
 5 | 
 6 |     constructor() {
 7 |         super("App");
 8 |     }
 9 | 
10 |     builder(node) {
11 |         var out1 = new Output('component', "Vue component", Sockets.vue);
12 | 
13 |         return node
14 |             .addOutput(out1);
15 |     }
16 | 
17 |     worker(node, inputs, outputs, args) {
18 |         const name = 'App';
19 | 
20 |         outputs.component = { name, path: '/', children: [] }
21 | 
22 |         args.components.push(outputs.component);
23 |     }
24 | }


--------------------------------------------------------------------------------
/app/src/components/vue.js:
--------------------------------------------------------------------------------
 1 | import { Component, Input, Output } from 'rete';
 2 | import { TextControl } from '../controls/text';
 3 | import Sockets from '../sockets';
 4 | 
 5 | export class VueComponent extends Component {
 6 |     constructor() {
 7 |         super("Vue");
 8 |     }
 9 | 
10 |     builder(node) {
11 |         var out1 = new Output('component', "Vue component", Sockets.vue);
12 |         var inp1 = new Input('component', "Vue component", Sockets.vue);
13 | 
14 |         return node
15 |             .addControl(new TextControl(this.editor, 'name'))
16 |             .addInput(inp1)
17 |             .addOutput(out1);
18 |     }
19 | 
20 |     worker(node, inputs, outputs, args) {
21 |         const { name } = node.data;
22 |         outputs.component = { name, path: inputs.component[0].path+name+'/', children: [] }
23 | 
24 |         inputs.component[0].children.push(outputs.component);
25 | 
26 |         args.components.push(outputs.component);
27 |     }
28 | }


--------------------------------------------------------------------------------
/app/src/controls/TextControl.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | input(
 3 |   type="text"
 4 |   :readonly="readonly"
 5 |   :value="value"
 6 |   @input="change($event)"
 7 | )
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |     props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
13 |     data() {
14 |         return {
15 |             value: 0,
16 |         }
17 |     },
18 |     methods: {
19 |         change(e){
20 |             this.value = e.target.value;
21 |             this.update();
22 |         },
23 |         update() {
24 |             if (this.ikey)
25 |                 this.putData(this.ikey, this.value)
26 |             this.emitter.trigger('process');
27 |         }
28 |     },
29 |     mounted() {
30 |         this.value = this.getData(this.ikey);
31 |     }
32 | }
33 | </script>
34 | 
35 | 
36 | <style lang="sass" scoped>
37 | select, input
38 |   width: 100%
39 |   border-radius: 30px
40 |   background-color: white
41 |   padding: 2px 6px
42 |   border: 1px solid #999
43 |   font-size: 110%
44 |   width: 170px
45 | </style>
46 | 


--------------------------------------------------------------------------------
/app/src/controls/text.js:
--------------------------------------------------------------------------------
 1 | import { Control } from 'rete';
 2 | import Component from './TextControl.vue';
 3 | 
 4 | export class TextControl extends Control {
 5 | 
 6 |     constructor(emitter, key, readonly) {
 7 |         super(key);
 8 |         this.component = Component;
 9 |         this.props = { emitter, ikey: key, readonly };
10 |     }
11 | 
12 |     setValue(val) {
13 |         this.vueContext.value = val;
14 |     }
15 | }


--------------------------------------------------------------------------------
/app/src/editor.js:
--------------------------------------------------------------------------------
 1 | import Rete from 'rete';
 2 | import ConnectionPlugin from 'rete-connection-plugin';
 3 | import VueRenderPlugin from 'rete-vue-render-plugin';
 4 | import ContextMenuPlugin from 'rete-context-menu-plugin';
 5 | import AreaPlugin from 'rete-area-plugin';
 6 | import { AppComponent } from './components/app';
 7 | import { VueComponent } from './components/vue';
 8 | 
 9 | export default async function createEditor(container, onProcess) {
10 |     var editor = new Rete.NodeEditor("demo@0.1.0", container);
11 | 
12 |     editor.use(ConnectionPlugin);
13 |     editor.use(VueRenderPlugin);
14 |     editor.use(ContextMenuPlugin);
15 | 
16 |     var engine = new Rete.Engine("demo@0.1.0");
17 | 
18 |     [new AppComponent(), new VueComponent()].map(c => {
19 |         editor.register(c);
20 |         engine.register(c);
21 |     });
22 | 
23 |     editor.on("process connectioncreated connectionremoved nodecreated noderemoved", async () => {
24 |         let args = { components: [] };
25 |         await engine.abort();
26 |         await engine.process(editor.toJSON(), null, args);
27 |         onProcess(args);
28 |     });
29 | 
30 |     editor.view.resize();
31 | 
32 |     await editor.fromJSON({"id":"demo@0.1.0","nodes":{"1":{"id":1,"data":{},"inputs":{},"outputs":{"component":{"connections":[{"node":3,"input":"component","data":{}},{"node":4,"input":"component","data":{}}]}},"position":[-660.5,-31],"name":"App"},"3":{"id":3,"data":{"name":"Header"},"inputs":{"component":{"connections":[{"node":1,"output":"component","data":{}}]}},"outputs":{"component":{"connections":[{"node":5,"input":"component","data":{}},{"node":6,"input":"component","data":{}}]}},"position":[-270.5,-185],"name":"Vue"},"4":{"id":4,"data":{"name":"Footer"},"inputs":{"component":{"connections":[{"node":1,"output":"component","data":{}}]}},"outputs":{"component":{"connections":[]}},"position":[-205.5,48],"name":"Vue"},"5":{"id":5,"data":{"name":"Menu"},"inputs":{"component":{"connections":[{"node":3,"output":"component","data":{}}]}},"outputs":{"component":{"connections":[]}},"position":[58.5,-138],"name":"Vue"},"6":{"id":6,"data":{"name":"Logo"},"inputs":{"component":{"connections":[{"node":3,"output":"component","data":{}}]}},"outputs":{"component":{"connections":[]}},"position":[47.5,-329],"name":"Vue"}}})
33 |     AreaPlugin.zoomAt(editor);
34 | }


--------------------------------------------------------------------------------
/app/src/index.js:
--------------------------------------------------------------------------------
 1 | import createEditor from './editor';
 2 | import Req from './request';
 3 | 
 4 | let input = document.querySelector("#source")
 5 | let components = '';
 6 | 
 7 | document.querySelector("#reverse-button").addEventListener('click', () => {
 8 |     Req.reverse({ components, folder: input.value });
 9 | });
10 | document.querySelector("#generate-button").addEventListener('click', () => {
11 |     Req.generate({ components, folder: input.value });
12 | });
13 | 
14 | createEditor(document.querySelector("#nodeEditor"), args => {
15 |     components = args.components;
16 | });


--------------------------------------------------------------------------------
/app/src/request.js:
--------------------------------------------------------------------------------
 1 | const vscode = acquireVsCodeApi();
 2 | 
 3 | function method(type, payload) {
 4 |     console.log({ type, payload });
 5 |     vscode.postMessage({
 6 |         type,
 7 |         payload
 8 |     })
 9 | }
10 | 
11 | export default {
12 |     generate(payload) { method('GENERATE', payload) },
13 |     reverse(payload) { method('REVERSE', payload) }
14 | }


--------------------------------------------------------------------------------
/app/src/sockets.js:
--------------------------------------------------------------------------------
1 | import { Socket } from 'rete';
2 | 
3 | export default {
4 |     vue: new Socket("Vue")
5 | }


--------------------------------------------------------------------------------
/app/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 3 | 
 4 | module.exports = {
 5 |     mode: 'development',
 6 |     entry: './src/index.js',
 7 |     resolve: {
 8 |         alias: {
 9 |           vue: 'vue/dist/vue.js'
10 |         }
11 |     },
12 |     module: {
13 |         rules: [
14 |             {
15 |                 test: /\.vue$/,
16 |                 loader: 'vue-loader',
17 |                 options: {
18 |                     loaders: {
19 |                         sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
20 |                     }
21 |                 },
22 |             },
23 |             {
24 |                 test: /\.sass$/,
25 |                 use: [
26 |                     'vue-style-loader',
27 |                     'css-loader',
28 |                     {
29 |                         loader: 'sass-loader',
30 |                         options: {
31 |                             indentedSyntax: true
32 |                         }
33 |                     }
34 |                 ]
35 |             },
36 |             {
37 |                 test: /\.pug$/,
38 |                 loader: 'pug-plain-loader'
39 |             }
40 |         ]
41 |     },
42 |     plugins: [
43 |         new HtmlWebpackPlugin({
44 |             template: 'public/index.html'
45 |         }),
46 |         new VueLoaderPlugin()
47 |     ]
48 | };


--------------------------------------------------------------------------------
/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/retejs/rete-for-vue/73b765bfefb21ccf811750db03b7bbb0a5a6a54c/example.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "rete-for-vue",
 3 |     "displayName": "Rete for Vue",
 4 |     "description": "",
 5 |     "version": "0.0.1",
 6 |     "publisher": "Ni55aN",
 7 |     "engines": {
 8 |         "vscode": "^1.28.0"
 9 |     },
10 |     "categories": [
11 |         "Other"
12 |     ],
13 |     "activationEvents": [
14 |         "onCommand:extension.rete4vue"
15 |     ],
16 |     "main": "./out/extension",
17 |     "contributes": {
18 |         "commands": [
19 |             {
20 |                 "command": "extension.rete4vue",
21 |                 "title": "Open Rete for Vue"
22 |             }
23 |         ]
24 |     },
25 |     "scripts": {
26 |         "vscode:prepublish": "npm run compile",
27 |         "compile": "tsc -p ./",
28 |         "watch": "tsc -watch -p ./",
29 |         "postinstall": "node ./node_modules/vscode/bin/install",
30 |         "test": "npm run compile && node ./node_modules/vscode/bin/test"
31 |     },
32 |     "devDependencies": {
33 |         "typescript": "^2.6.1",
34 |         "vscode": "^1.1.21",
35 |         "tslint": "^5.8.0",
36 |         "@types/node": "^8.10.25",
37 |         "@types/mocha": "^2.2.42"
38 |     },
39 |     "dependencies": {
40 |         "eslint": "^5.7.0",
41 |         "promise-fs": "^2.0.1",
42 |         "rete": "^1.0.0-alpha.10",
43 |         "rete-area-plugin": "^0.2.0",
44 |         "rete-connection-plugin": "^0.2.1",
45 |         "rete-vue-render-plugin": "^0.2.3",
46 |         "write": "^1.0.3"
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | import * as path from 'path';
 3 | import * as fs from 'fs';
 4 | import * as vscode from 'vscode';
 5 | import generate from './vue/generate';
 6 | import reverse from './vue/reverse';
 7 | 
 8 | function createViewPanel(context: vscode.ExtensionContext) {
 9 |     const panel = vscode.window.createWebviewPanel('rete4vue', "Rete for Vue", vscode.ViewColumn.One, {
10 |         enableScripts: true,
11 |         retainContextWhenHidden: true,
12 |         localResourceRoots: [
13 |             vscode.Uri.file(path.join(context.extensionPath, 'app', 'dist'))
14 |         ]
15 |     });
16 | 
17 |     return panel;
18 | }
19 | 
20 | 
21 | async function onDidReceiveMessage(msg: Message) {
22 |    let root = vscode.workspace.rootPath;
23 | 
24 |     if(!root) {
25 |         return vscode.window.showErrorMessage('Working folder isn\'t open');
26 |     }
27 | 
28 |     switch (msg.type) {
29 |         case 'GENERATE': 
30 |             try {
31 |                 await generate(root, msg.payload);
32 |                 vscode.window.showInformationMessage(`Files have been written to ${root}/rete4vue folder`);
33 |             } catch (e) {
34 |                 vscode.window.showErrorMessage(e.message);
35 |             }
36 |             break;
37 |         case 'REVERSE':
38 |             try {
39 |                 await reverse(root, msg.payload);
40 |                 vscode.window.showInformationMessage(`Files have been written to ${root}/rete4vue folder`);
41 |             } catch (e) {
42 |                 vscode.window.showErrorMessage(e.message);
43 |             }
44 |         break;
45 |     }
46 | }
47 | 
48 | export function activate(context: vscode.ExtensionContext) {
49 |     context.subscriptions.push(vscode.commands.registerCommand('extension.rete4vue', () => {
50 | 
51 |         const panel = createViewPanel(context);
52 |         const htmlPath: vscode.Uri = vscode.Uri.file(
53 |             path.join(context.extensionPath, 'app', 'dist', 'index.html')
54 |         );
55 |         const scriptPath: vscode.Uri = vscode.Uri.file(
56 |             path.join(context.extensionPath, 'app', 'dist', 'main.js')
57 |         );
58 |         const scriptSrc = scriptPath.with({ scheme: 'vscode-resource' });
59 | 
60 |         panel.webview.html = fs.readFileSync(htmlPath.fsPath, 'utf8')
61 |              .replace('main.js', scriptSrc.toString());
62 | 
63 |         panel.webview.onDidReceiveMessage(onDidReceiveMessage);
64 |     }));
65 | }
66 | 
67 | 
68 | export function deactivate() {
69 | }


--------------------------------------------------------------------------------
/src/interfaces.ts:
--------------------------------------------------------------------------------
 1 | interface VueComponent {
 2 |     name: string;
 3 |     children: Array<VueComponent>;
 4 |     path: string;
 5 | }
 6 | 
 7 | interface Payload {
 8 |     components: Array<VueComponent>;
 9 |     folder: string;
10 | }
11 | 
12 | interface Message {
13 |     type: string;
14 |     payload: Payload;
15 | }


--------------------------------------------------------------------------------
/src/test/extension.test.ts:
--------------------------------------------------------------------------------
 1 | //
 2 | // Note: This example test is leveraging the Mocha test framework.
 3 | // Please refer to their documentation on https://mochajs.org/ for help.
 4 | //
 5 | 
 6 | // The module 'assert' provides assertion methods from node
 7 | import * as assert from 'assert';
 8 | 
 9 | // You can import and use all API from the 'vscode' module
10 | // as well as import your extension to test it
11 | // import * as vscode from 'vscode';
12 | // import * as myExtension from '../extension';
13 | 
14 | // Defines a Mocha test suite to group tests of similar kind together
15 | suite("Extension Tests", function () {
16 | 
17 |     // Defines a Mocha unit test
18 |     test("Something 1", function() {
19 |         assert.equal(-1, [1, 2, 3].indexOf(5));
20 |         assert.equal(-1, [1, 2, 3].indexOf(0));
21 |     });
22 | });


--------------------------------------------------------------------------------
/src/test/index.ts:
--------------------------------------------------------------------------------
 1 | //
 2 | // PLEASE DO NOT MODIFY / DELETE UNLESS YOU KNOW WHAT YOU ARE DOING
 3 | //
 4 | // This file is providing the test runner to use when running extension tests.
 5 | // By default the test runner in use is Mocha based.
 6 | //
 7 | // You can provide your own test runner if you want to override it by exporting
 8 | // a function run(testRoot: string, clb: (error:Error) => void) that the extension
 9 | // host can call to run the tests. The test runner is expected to use console.log
10 | // to report the results back to the caller. When the tests are finished, return
11 | // a possible error to the callback or null if none.
12 | 
13 | import * as testRunner from 'vscode/lib/testrunner';
14 | 
15 | // You can directly control Mocha options by uncommenting the following lines
16 | // See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options for more info
17 | testRunner.configure({
18 |     ui: 'tdd', 		// the TDD UI is being used in extension.test.ts (suite, test, etc.)
19 |     useColors: true // colored output from test results
20 | });
21 | 
22 | module.exports = testRunner;


--------------------------------------------------------------------------------
/src/vue/file.ts:
--------------------------------------------------------------------------------
 1 | const genDefault = () : string => `<script>
 2 | export default {
 3 |   components: {
 4 |   }
 5 | }
 6 | </script>`;
 7 | 
 8 | function genImports(components: VueComponent[]) {
 9 |     return components.map((i: any) => {
10 |         let folders = i.path.split('/');
11 |         let folder = folders[folders.length - 2];
12 |     
13 |         return `import ${i.name} from './${folder}';`;
14 |     }).join('\n');
15 | }
16 | 
17 | function genComponents(components: VueComponent[]) {
18 |     return components.map((i: any) => i.name+',').join('');
19 | }
20 | 
21 | function syncScript(source: string, components: VueComponent[]): string {
22 |     const imp = genImports(components);
23 |     const comps = genComponents(components);
24 | 
25 |     return imp+source.replace('components: {',
26 |     `components: {${comps}`); // need more stable replacing
27 | }
28 | 
29 | function syncComponents(source: string, components: VueComponent[]) {
30 |  
31 |     const regexp = new RegExp('((.|\n)*<script.*?>\n?)((.|\n)*)(<\/script>(.|\n)*)', 'g');
32 |     const match = regexp.exec(source);
33 | 
34 |     if(!match) { throw new Error('No match'); }
35 | 
36 |     return match[1]+syncScript(match[3], components)+match[5];
37 | }
38 | 
39 | export function generate(source: string | null, components: VueComponent[]) {
40 |     return syncComponents(source || genDefault(), components);
41 | }
42 | 


--------------------------------------------------------------------------------
/src/vue/generate.ts:
--------------------------------------------------------------------------------
 1 | import * as fs from 'fs';
 2 | // @ts-ignore
 3 | import * as write from 'write';
 4 | import { generate } from './file';
 5 | 
 6 | async function writeFile(path: string, components: VueComponent[]) {
 7 |     if(fs.existsSync(path)) {
 8 |         const source = fs.readFileSync(path, "utf8");
 9 | 
10 |         fs.writeFileSync(path, generate(source, components))
11 |     } else {
12 |         await write.promise(path, generate(null, components));
13 |     }
14 | }
15 | 
16 | export default async function (root : string, payload: Payload) {
17 |     await Promise.all(payload.components.map(async c => {
18 |         const path = `${root}/${payload.folder}${c.path}Index.vue`;
19 | 
20 |         writeFile(path, c.children);
21 |     }));
22 | }


--------------------------------------------------------------------------------
/src/vue/reverse.ts:
--------------------------------------------------------------------------------
1 | 
2 | export default async function (root : string, payload: Payload) {
3 | 
4 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "module": "commonjs",
 4 |         "target": "es6",
 5 |         "outDir": "out",
 6 |         "lib": [
 7 |             "es6"
 8 |         ],
 9 |         "sourceMap": true,
10 |         "rootDir": "src",
11 |         /* Strict Type-Checking Option */
12 |         "strict": true,   /* enable all strict type-checking options */
13 |         /* Additional Checks */
14 |         "noUnusedLocals": true /* Report errors on unused locals. */
15 |         // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
16 |         // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
17 |         // "noUnusedParameters": true,  /* Report errors on unused parameters. */
18 |     },
19 |     "exclude": [
20 |         "node_modules",
21 |         ".vscode-test"
22 |     ]
23 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"rules": {
 3 | 		"no-string-throw": true,
 4 | 		"no-unused-expression": true,
 5 | 		"no-duplicate-variable": true,
 6 | 		"curly": true,
 7 | 		"class-name": true,
 8 | 		"semicolon": [
 9 | 			true,
10 | 			"always"
11 | 		],
12 | 		"triple-equals": true
13 | 	},
14 | 	"defaultSeverity": "warning"
15 | }


--------------------------------------------------------------------------------
/vsc-extension-quickstart.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your VS Code Extension
 2 | 
 3 | ## What's in the folder
 4 | * This folder contains all of the files necessary for your extension.
 5 | * `package.json` - this is the manifest file in which you declare your extension and command.
 6 | The sample plugin registers a command and defines its title and command name. With this information
 7 | VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
 8 | * `src/extension.ts` - this is the main file where you will provide the implementation of your command.
 9 | The file exports one function, `activate`, which is called the very first time your extension is
10 | activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
11 | We pass the function containing the implementation of the command as the second parameter to
12 | `registerCommand`.
13 | 
14 | ## Get up and running straight away
15 | * Press `F5` to open a new window with your extension loaded.
16 | * Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
17 | * Set breakpoints in your code inside `src/extension.ts` to debug your extension.
18 | * Find output from your extension in the debug console.
19 | 
20 | ## Make changes
21 | * You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
22 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
23 | 
24 | ## Explore the API
25 | * You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`.
26 | 
27 | ## Run tests
28 | * Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Launch Tests`.
29 | * Press `F5` to run the tests in a new window with your extension loaded.
30 | * See the output of the test result in the debug console.
31 | * Make changes to `test/extension.test.ts` or create new test files inside the `test` folder.
32 |     * By convention, the test runner will only consider files matching the name pattern `**.test.ts`.
33 |     * You can create folders inside the `test` folder to structure your tests any way you want.
34 | 


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