├── media ├── mv-logo.png ├── gifs │ ├── Tree.gif │ └── Upload.gif ├── reset.css ├── mv.svg └── vscode.css ├── .gitignore ├── src ├── webviews │ ├── img │ │ └── logo.png │ ├── pages │ │ └── App.js │ ├── globals.d.ts │ ├── tsconfig.views.json │ ├── components │ │ ├── Tree.vue │ │ ├── MVTree.vue │ │ └── App.vue │ └── webpack.views.config.js ├── types │ ├── Imports.ts │ └── Tree.ts ├── getNonce.ts ├── test │ ├── suite │ │ ├── extension.test.ts │ │ └── index.ts │ └── runTest.ts ├── extension.ts ├── helpers │ └── parserHelpers.js ├── SidebarProvider.ts └── MVParser.ts ├── .vscode ├── extensions.json ├── settings.json ├── tasks.json └── launch.json ├── .vscodeignore ├── CHANGELOG.md ├── .eslintrc.json ├── tsconfig.json ├── webpack.config.js ├── json ├── root.json └── demo.json ├── vsc-extension-quickstart.md ├── package.json └── README.md /media/mv-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MountainVue/HEAD/media/mv-logo.png -------------------------------------------------------------------------------- /media/gifs/Tree.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MountainVue/HEAD/media/gifs/Tree.gif -------------------------------------------------------------------------------- /media/gifs/Upload.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MountainVue/HEAD/media/gifs/Upload.gif -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | dist 3 | node_modules 4 | .vscode-test/ 5 | *.vsix 6 | .DS_Store 7 | package-lock.json -------------------------------------------------------------------------------- /src/webviews/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MountainVue/HEAD/src/webviews/img/logo.png -------------------------------------------------------------------------------- /src/webviews/pages/App.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from '../components/App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /src/types/Imports.ts: -------------------------------------------------------------------------------- 1 | interface Imports { 2 | [key: string]: { 3 | importPath: string; 4 | importName: string; 5 | }; 6 | }; 7 | 8 | export default Imports; -------------------------------------------------------------------------------- /src/webviews/globals.d.ts: -------------------------------------------------------------------------------- 1 | import * as _vscode from 'vscode'; 2 | 3 | declare global { 4 | const tsvscode: { 5 | postMessage: ({ type: string, value: any }) => void; 6 | }; 7 | } 8 | 9 | export default tsvscode; -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": ["dbaeumer.vscode-eslint", "amodio.tsl-problem-matcher"] 5 | } 6 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | out/** 4 | node_modules/** 5 | src/** 6 | .gitignore 7 | .yarnrc 8 | webpack.config.js 9 | vsc-extension-quickstart.md 10 | **/tsconfig.json 11 | **/.eslintrc.json 12 | **/*.map 13 | **/*.ts 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the "mountainvue" extension will be documented in this file. 4 | 5 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 6 | 7 | ## [Unreleased] 8 | 9 | - Initial release -------------------------------------------------------------------------------- /src/webviews/tsconfig.views.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "../../dist", 4 | "lib": [ 5 | "dom" 6 | ], 7 | "module": "es6", 8 | "target": "es5", 9 | "jsx": "react", 10 | "allowJs": true, 11 | "moduleResolution": "node", 12 | "sourceMap": true, 13 | } 14 | } -------------------------------------------------------------------------------- /src/getNonce.ts: -------------------------------------------------------------------------------- 1 | // generates unique ID 2 | const getNonce = () => { 3 | let text = ""; 4 | const possible = 5 | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; 6 | for (let i = 0; i < 32; i++) { 7 | text += possible.charAt(Math.floor(Math.random() * possible.length)); 8 | } 9 | return text; 10 | }; 11 | 12 | export default getNonce; -------------------------------------------------------------------------------- /media/reset.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 13px; 4 | } 5 | 6 | *, 7 | *:before, 8 | *:after { 9 | box-sizing: inherit; 10 | } 11 | 12 | body, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | ol, 21 | ul { 22 | margin: 0; 23 | padding: 0; 24 | font-weight: normal; 25 | } 26 | 27 | img { 28 | max-width: 100%; 29 | height: auto; 30 | } -------------------------------------------------------------------------------- /src/types/Tree.ts: -------------------------------------------------------------------------------- 1 | interface Tree { 2 | id: string; 3 | name: string; 4 | fileName: string; 5 | path: string; 6 | importPath: string; 7 | expanded: boolean; 8 | depth: number; 9 | count: number; 10 | thirdParty: boolean; 11 | vueRouter: boolean; 12 | vuexStore: boolean; 13 | children: Tree[]; 14 | parent: string[]; 15 | props: { [key: string]: boolean; }; 16 | error: string; 17 | }; 18 | 19 | export default Tree; 20 | -------------------------------------------------------------------------------- /src/test/suite/extension.test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from 'assert'; 2 | 3 | // You can import and use all API from the 'vscode' module 4 | // as well as import your extension to test it 5 | import * as vscode from 'vscode'; 6 | // import * as myExtension from '../../extension'; 7 | 8 | suite('Extension Test Suite', () => { 9 | vscode.window.showInformationMessage('Start all tests.'); 10 | 11 | test('Sample test', () => { 12 | assert.strictEqual(-1, [1, 2, 3].indexOf(5)); 13 | assert.strictEqual(-1, [1, 2, 3].indexOf(0)); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/webviews/components/Tree.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "ecmaVersion": 6, 6 | "sourceType": "module" 7 | }, 8 | "plugins": [ 9 | "@typescript-eslint" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/naming-convention": "warn", 13 | "@typescript-eslint/semi": "warn", 14 | "curly": "warn", 15 | "eqeqeq": "warn", 16 | "no-throw-literal": "warn", 17 | "semi": "off" 18 | }, 19 | "ignorePatterns": [ 20 | "out", 21 | "dist", 22 | "**/*.d.ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | // The module 'vscode' contains the VS Code extensibility API 2 | // Import the module and reference it with the alias vscode in your code below 3 | import * as vscode from 'vscode'; 4 | import { SidebarProvider } from './SidebarProvider'; 5 | 6 | export const activate = (context: vscode.ExtensionContext) => { 7 | const sidebarProvider = new SidebarProvider(context.extensionUri); 8 | 9 | context.subscriptions.push( 10 | vscode.window.registerWebviewViewProvider('mv-sidebar', sidebarProvider) 11 | ); 12 | }; 13 | 14 | // this method is called when your extension is deactivated 15 | export function deactivate() {} 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "ES2020", 5 | "lib": [ 6 | "ES2020" 7 | ], 8 | "sourceMap": true, 9 | "rootDir": ".", 10 | "strict": true /* enable all strict type-checking options */ 11 | /* Additional Checks */ 12 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 13 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 14 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 15 | }, 16 | "exclude": [ 17 | "node_modules", 18 | ".vscode-test" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.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 | "dist": false // set this to true to hide the "dist" folder with the compiled JS files 6 | }, 7 | "search.exclude": { 8 | "out": true, // set this to false to include "out" folder in search results 9 | "dist": true // set this to false to include "dist" folder in search results 10 | }, 11 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts 12 | "typescript.tsc.autoDetect": "off" 13 | } -------------------------------------------------------------------------------- /src/test/runTest.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | 3 | import { runTests } from '@vscode/test-electron'; 4 | 5 | async function main() { 6 | try { 7 | // The folder containing the Extension Manifest package.json 8 | // Passed to `--extensionDevelopmentPath` 9 | const extensionDevelopmentPath = path.resolve(__dirname, '../../'); 10 | 11 | // The path to test runner 12 | // Passed to --extensionTestsPath 13 | const extensionTestsPath = path.resolve(__dirname, './suite/index'); 14 | 15 | // Download VS Code, unzip it and run the integration test 16 | await runTests({ extensionDevelopmentPath, extensionTestsPath }); 17 | } catch (err) { 18 | console.error('Failed to run tests'); 19 | process.exit(1); 20 | } 21 | } 22 | 23 | main(); 24 | -------------------------------------------------------------------------------- /media/mv.svg: -------------------------------------------------------------------------------- 1 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/test/suite/index.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | import * as Mocha from 'mocha'; 3 | import * as glob from 'glob'; 4 | 5 | export function run(): Promise { 6 | // Create the mocha test 7 | const mocha = new Mocha({ 8 | ui: 'tdd', 9 | color: true 10 | }); 11 | 12 | const testsRoot = path.resolve(__dirname, '..'); 13 | 14 | return new Promise((c, e) => { 15 | glob('**/**.test.js', { cwd: testsRoot }, (err, files) => { 16 | if (err) { 17 | return e(err); 18 | } 19 | 20 | // Add files to the test suite 21 | files.forEach(f => mocha.addFile(path.resolve(testsRoot, f))); 22 | 23 | try { 24 | // Run the mocha test 25 | mocha.run(failures => { 26 | if (failures > 0) { 27 | e(new Error(`${failures} tests failed.`)); 28 | } else { 29 | c(); 30 | } 31 | }); 32 | } catch (err) { 33 | console.error(err); 34 | e(err); 35 | } 36 | }); 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /.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": [ 10 | "$ts-webpack-watch", 11 | "$tslint-webpack-watch" 12 | ], 13 | "isBackground": true, 14 | "presentation": { 15 | "reveal": "never", 16 | "group": "watchers" 17 | }, 18 | "group": { 19 | "kind": "build", 20 | "isDefault": true 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "watch-tests", 26 | "problemMatcher": "$tsc-watch", 27 | "isBackground": true, 28 | "presentation": { 29 | "reveal": "never", 30 | "group": "watchers" 31 | }, 32 | "group": "build" 33 | }, 34 | { 35 | "label": "tasks: watch-tests", 36 | "dependsOn": [ 37 | "npm: watch", 38 | "npm: watch-tests" 39 | ], 40 | "problemMatcher": [] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /.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": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "args": [ 13 | "--extensionDevelopmentPath=${workspaceFolder}" 14 | ], 15 | "outFiles": [ 16 | "${workspaceFolder}/dist/**/*.js" 17 | ], 18 | "preLaunchTask": "${defaultBuildTask}" 19 | }, 20 | { 21 | "name": "Extension Tests", 22 | "type": "extensionHost", 23 | "request": "launch", 24 | "args": [ 25 | "--extensionDevelopmentPath=${workspaceFolder}", 26 | "--extensionTestsPath=${workspaceFolder}/out/test/suite/index" 27 | ], 28 | "outFiles": [ 29 | "${workspaceFolder}/out/**/*.js", 30 | "${workspaceFolder}/dist/**/*.js" 31 | ], 32 | "preLaunchTask": "tasks: watch-tests" 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /src/helpers/parserHelpers.js: -------------------------------------------------------------------------------- 1 | export const safe = (func, def) => { 2 | return (value) => (value === undefined ? def : func(value)); 3 | }; 4 | 5 | export const findCompOrProp = (props, name) => { 6 | return props.find((prop) => prop.key.name === name); 7 | }; 8 | 9 | export const compValues = (comps) => { 10 | return comps.value.properties.map((prop) => prop.key.name); 11 | }; 12 | 13 | export const propValues = (props) => { 14 | return props.value.properties.map((prop) => prop.key.name); 15 | }; 16 | 17 | // TS migration for extension environment parsing logic 18 | // export function safe(func: Function, def: []): Function { 19 | // return (value: any): any[] => (value === undefined ? def : func(value)); 20 | // }; 21 | 22 | // export function findCompOrProp(props: any[], name: string): any | undefined { 23 | // return props.find((prop: any): any | undefined => prop.key.name === name); 24 | // }; 25 | 26 | // export function compValues(comps: any): any[] { 27 | // return comps.value.properties.map((prop: any): any[] => prop.key.name); 28 | // }; 29 | 30 | // export function propValues(props: any): any[] { 31 | // return props.value.properties.map((prop: any): any[] => prop.key.name); 32 | // }; 33 | -------------------------------------------------------------------------------- /src/webviews/webpack.views.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { VueLoaderPlugin } = require('vue-loader'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | module.exports = { 6 | entry: path.resolve(__dirname, './pages/App.js'), 7 | mode: 'production', 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.ts?$/, 12 | use: { 13 | loader: 'ts-loader', 14 | options: { 15 | configFile: 'tsconfig.views.json', 16 | appendTsSuffixTo: [/\.vue$/], 17 | }, 18 | }, 19 | exclude: /node_modules/, 20 | }, 21 | { 22 | test: /\.vue$/, 23 | loader: 'vue-loader', 24 | }, 25 | { 26 | test: /\.vue\.(s?[ac]ss)$/, 27 | use: ['vue-style-loader', 'css-loader', 'sass-loader'], 28 | }, 29 | { 30 | test: /(? https://webpack.js.org/configuration/node/ 13 | mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production') 14 | 15 | entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/ 16 | output: { 17 | // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/ 18 | path: path.resolve(__dirname, 'dist'), 19 | filename: 'extension.js', 20 | libraryTarget: 'commonjs2' 21 | }, 22 | externals: { 23 | vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/ 24 | // modules added here also need to be added in the .vscodeignore file 25 | }, 26 | resolve: { 27 | // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader 28 | extensions: ['.ts', '.js'] 29 | }, 30 | module: { 31 | rules: [ 32 | { 33 | test: /\.ts$/, 34 | exclude: /node_modules/, 35 | use: [ 36 | { 37 | loader: 'ts-loader' 38 | } 39 | ] 40 | } 41 | ] 42 | }, 43 | devtool: 'nosources-source-map', 44 | infrastructureLogging: { 45 | level: "log", // enables logging required for problem matchers 46 | }, 47 | }; 48 | module.exports = [ extensionConfig ]; -------------------------------------------------------------------------------- /json/root.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App.vue", 3 | "children": [ 4 | { 5 | "name": "Home.vue", 6 | "children": [ 7 | { 8 | "name": "Navbar.vue" 9 | }, 10 | { 11 | "name": "Splash.vue" 12 | }, 13 | { 14 | "name": "ComingSoon.vue" 15 | } 16 | ] 17 | }, 18 | { 19 | "name": "About.vue", 20 | "children": [ 21 | { 22 | "name": "Installation.vue", 23 | "children": [ 24 | { 25 | "name": "Directions.vue" 26 | } 27 | ] 28 | }, 29 | { 30 | "name": "Usage.vue" 31 | }, 32 | { 33 | "name": "Contributions.vue" 34 | }, 35 | { 36 | "name": "Acknowledgements.vue" 37 | } 38 | ] 39 | }, 40 | { 41 | "name": "Team.vue", 42 | "children": [ 43 | { 44 | "name": "Ryan.vue" 45 | }, 46 | { 47 | "name": "Matt.vue" 48 | }, 49 | { 50 | "name": "Sohee.vue" 51 | }, 52 | { 53 | "name": "Sean.vue" 54 | }, 55 | { 56 | "name": "Andy.vue" 57 | }, 58 | { 59 | "name": "Uni.vue" 60 | } 61 | ] 62 | } 63 | ] 64 | } -------------------------------------------------------------------------------- /src/webviews/components/MVTree.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 68 | 69 | -------------------------------------------------------------------------------- /media/vscode.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --container-padding: 20px; 3 | --input-padding-vertical: 6px; 4 | --input-padding-horizontal: 4px; 5 | --input-margin-vertical: 4px; 6 | --input-margin-horizontal: 0; 7 | } 8 | 9 | body { 10 | padding: 0 var(--container-padding); 11 | color: var(--vscode-foreground); 12 | font-size: var(--vscode-font-size); 13 | font-weight: var(--vscode-font-weight); 14 | font-family: var(--vscode-font-family); 15 | background-color: var(--vscode-editor-background); 16 | } 17 | 18 | ol, 19 | ul { 20 | padding-left: var(--container-padding); 21 | } 22 | 23 | body > *, 24 | form > * { 25 | margin-block-start: var(--input-margin-vertical); 26 | margin-block-end: var(--input-margin-vertical); 27 | } 28 | 29 | *:focus { 30 | outline-color: var(--vscode-focusBorder) !important; 31 | } 32 | 33 | a { 34 | color: var(--vscode-textLink-foreground); 35 | } 36 | 37 | a:hover, 38 | a:active { 39 | color: var(--vscode-textLink-activeForeground); 40 | } 41 | 42 | code { 43 | font-size: var(--vscode-editor-font-size); 44 | font-family: var(--vscode-editor-font-family); 45 | } 46 | 47 | button { 48 | border: none; 49 | padding: var(--input-padding-vertical) var(--input-padding-horizontal); 50 | width: 100%; 51 | text-align: center; 52 | outline: 1px solid transparent; 53 | outline-offset: 2px !important; 54 | color: var(--vscode-button-foreground); 55 | background: var(--vscode-button-background); 56 | } 57 | 58 | button:hover { 59 | cursor: pointer; 60 | background: var(--vscode-button-hoverBackground); 61 | } 62 | 63 | button:focus { 64 | outline-color: var(--vscode-focusBorder); 65 | } 66 | 67 | button.secondary { 68 | color: var(--vscode-button-secondaryForeground); 69 | background: var(--vscode-button-secondaryBackground); 70 | } 71 | 72 | button.secondary:hover { 73 | background: var(--vscode-button-secondaryHoverBackground); 74 | } 75 | 76 | input:not([type='checkbox']), 77 | textarea { 78 | display: block; 79 | width: 100%; 80 | border: none; 81 | font-family: var(--vscode-font-family); 82 | padding: var(--input-padding-vertical) var(--input-padding-horizontal); 83 | color: var(--vscode-input-foreground); 84 | outline-color: var(--vscode-input-border); 85 | background-color: var(--vscode-input-background); 86 | } 87 | 88 | input::placeholder, 89 | textarea::placeholder { 90 | color: var(--vscode-input-placeholderForeground); 91 | } -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | 5 | * This folder contains all of the files necessary for your extension. 6 | * `package.json` - this is the manifest file in which you declare your extension and command. 7 | * The sample plugin registers a command and defines its title and command name. With this information 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 activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. 10 | * We pass the function containing the implementation of the command as the second parameter to `registerCommand`. 11 | 12 | ## Setup 13 | 14 | - install the recommended extensions (amodio.tsl-problem-matcher and dbaeumer.vscode-eslint) 15 | 16 | 17 | ## Get up and running straight away 18 | 19 | * Press `F5` to open a new window with your extension loaded. 20 | * Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. 21 | * Set breakpoints in your code inside `src/extension.ts` to debug your extension. 22 | * Find output from your extension in the debug console. 23 | 24 | ## Make changes 25 | 26 | * You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. 27 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 28 | 29 | 30 | ## Explore the API 31 | 32 | * You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`. 33 | 34 | ## Run tests 35 | 36 | * Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`. 37 | * Press `F5` to run the tests in a new window with your extension loaded. 38 | * See the output of the test result in the debug console. 39 | * Make changes to `src/test/suite/extension.test.ts` or create new test files inside the `test/suite` folder. 40 | * The provided test runner will only consider files matching the name pattern `**.test.ts`. 41 | * You can create folders inside the `test` folder to structure your tests any way you want. 42 | 43 | ## Go further 44 | 45 | * Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension). 46 | * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace. 47 | * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). 48 | -------------------------------------------------------------------------------- /src/webviews/components/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 82 | 83 | 125 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mountainvue", 3 | "displayName": "MountainVue", 4 | "publisher": "MountainVue", 5 | "description": "TBA", 6 | "version": "0.0.1", 7 | "engines": { 8 | "vscode": "^1.62.0" 9 | }, 10 | "categories": [ 11 | "Visualization" 12 | ], 13 | "keywords": [ 14 | "vue", 15 | "vs code extension", 16 | "component hierarchy", 17 | "devtools" 18 | ], 19 | "activationEvents": [ 20 | "onStartupFinished" 21 | ], 22 | "main": "./dist/extension.js", 23 | "contributes": { 24 | "viewsContainers": { 25 | "activitybar": [ 26 | { 27 | "id": "mv-sidebar-view", 28 | "title": "MountainVue", 29 | "icon": "media/mv.svg" 30 | } 31 | ] 32 | }, 33 | "views": { 34 | "mv-sidebar-view": [ 35 | { 36 | "type": "webview", 37 | "id": "mv-sidebar", 38 | "name": "MountainVue", 39 | "icon": "media/mv.svg", 40 | "contextualTitle": "MountainVue" 41 | } 42 | ] 43 | }, 44 | "commands": [] 45 | }, 46 | "scripts": { 47 | "vscode:prepublish": "npm run package", 48 | "build": "concurrently \"cross-env NODE_ENV=development \" \"webpack\" \"npm-run-all -p build:*\"", 49 | "build:extension": "webpack --mode production", 50 | "build:sidebar": "webpack --config ./src/webviews/webpack.views.config.js", 51 | "watch": "webpack --watch", 52 | "package": "webpack --mode production --devtool hidden-source-map", 53 | "compile-tests": "tsc -p . --outDir out", 54 | "watch-tests": "tsc -p . -w --outDir out", 55 | "pretest": "npm run compile-tests && npm run compile && npm run lint", 56 | "lint": "eslint src --ext ts", 57 | "test": "node ./out/test/runTest.js" 58 | }, 59 | "devDependencies": { 60 | "@babel/parser": "^7.16.2", 61 | "@babel/types": "^7.16.0", 62 | "@types/esprima": "^4.0.3", 63 | "@types/glob": "^7.1.4", 64 | "@types/mocha": "^9.0.0", 65 | "@types/node": "14.x", 66 | "@types/vscode": "^1.62.0", 67 | "@types/vue": "^2.0.0", 68 | "@typescript-eslint/eslint-plugin": "^5.1.0", 69 | "@typescript-eslint/parser": "^5.1.0", 70 | "@vscode/test-electron": "^1.6.2", 71 | "@vue/cli-plugin-babel": "^4.5.15", 72 | "@vue/cli-service": "^4.5.15", 73 | "@vue/compiler-sfc": "^3.2.22", 74 | "concurrently": "^6.3.0", 75 | "cross-env": "^7.0.3", 76 | "css-loader": "^6.5.1", 77 | "eslint": "^8.1.0", 78 | "esprima": "^4.0.1", 79 | "file-loader": "^6.2.0", 80 | "generate-source-map": "^0.0.5", 81 | "glob": "^7.1.7", 82 | "mini-css-extract-plugin": "^2.4.4", 83 | "mocha": "^9.1.3", 84 | "node-sass": "^6.0.1", 85 | "npm-run-all": "^4.1.5", 86 | "postcss-import": "^14.0.2", 87 | "sass": "^1.43.4", 88 | "sass-loader": "^12.3.0", 89 | "style-loader": "^3.3.1", 90 | "ts-loader": "^9.2.6", 91 | "typescript": "^4.4.4", 92 | "vscode-test": "^1.6.1", 93 | "vue": "^3.2.22", 94 | "vue-loader": "^16.8.3", 95 | "vue-loader-plugin": "^1.3.0", 96 | "vue-style-loader": "^4.1.3", 97 | "vue-template-compiler": "^2.6.14", 98 | "webpack": "^5.52.1", 99 | "webpack-cli": "^4.8.0" 100 | }, 101 | "dependencies": { 102 | "core-js": "^3.19.1", 103 | "fs": "^0.0.1-security", 104 | "path": "^0.12.7", 105 | "register-service-worker": "^1.7.2" 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/SidebarProvider.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from 'vscode'; 2 | import getNonce from './getNonce'; 3 | // import MVParser from './MVParser'; 4 | import Tree from './types/Tree'; 5 | export class SidebarProvider implements vscode.WebviewViewProvider { 6 | _view?: vscode.WebviewView; 7 | // parser: MVParser | undefined; 8 | // private readonly context: vscode.ExtensionContext; 9 | 10 | constructor(private readonly _extensionUri: vscode.Uri) { 11 | // this.context = context; 12 | // this._extensionUri = context.extensionUri; 13 | 14 | // const state: Tree | undefined = context.workspaceState.get('mountainvue'); 15 | 16 | // Parsing logic in progress 17 | // if (state) { 18 | // this.parser = new MVParser(state.filePath); 19 | // } 20 | } 21 | 22 | public resolveWebviewView(webviewView: vscode.WebviewView) { 23 | this._view = webviewView; 24 | 25 | webviewView.webview.options = { 26 | // Allow scripts in the webview 27 | enableScripts: true, 28 | 29 | localResourceRoots: [ 30 | this._extensionUri 31 | ], 32 | }; 33 | 34 | webviewView.webview.html = this._getHtmlForWebview(webviewView.webview); 35 | 36 | // Extension reducer in progress 37 | // webviewView.webview.onDidReceiveMessage(async (data) => { 38 | // switch (data.type) { 39 | // case 'onFile': { 40 | // if (!data.type) { 41 | // return; 42 | // } 43 | 44 | // this.parser = new MVParser(data.value); 45 | // this.parser.parse(); 46 | // // this.updateView(); 47 | // break; 48 | // } 49 | // } 50 | // }); 51 | } 52 | 53 | public revive(panel: vscode.WebviewView) { 54 | this._view = panel; 55 | } 56 | 57 | private _getHtmlForWebview(webview: vscode.Webview) { 58 | const styleResetUri = webview.asWebviewUri( 59 | vscode.Uri.joinPath( 60 | this._extensionUri, 'media', 'reset.css') 61 | ); 62 | 63 | const styleVSCodeUri = webview.asWebviewUri( 64 | vscode.Uri.joinPath( 65 | this._extensionUri, 'media', 'vscode.css') 66 | ); 67 | 68 | // const styleMainUri = webview.asWebviewUri( 69 | // vscode.Uri.joinPath( 70 | // this._extensionUri, 'dist', 'style.css') 71 | // ); 72 | 73 | const scriptUri = webview.asWebviewUri( 74 | vscode.Uri.joinPath( 75 | this._extensionUri, 'dist', 'app.js') 76 | ); 77 | 78 | const nonce = getNonce(); 79 | 80 | return ` 81 | 82 | 83 | 84 | 85 | 91 | 92 | 93 | 94 | 95 | MV 96 | 99 | 100 | 101 |
102 |