Init

.github/CONTRIBUTING.md

@@ -0,0 +1,7 @@
+## CLA
+
+This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.
+
+When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
+
+This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

.gitignore

@@ -1,61 +1,24 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
+.DS_Store
+node_modules
+/dist
 
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+/tests/e2e/videos/
+/tests/e2e/screenshots/
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# local env files
+.env.local
+.env.*.local
 
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# next.js build output
-.next
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true
+}

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js: 8
+
+cache: yarn
+
+install:
+  - yarn
+
+script:
+  - yarn test

LICENSE

@@ -1,21 +1,21 @@
-    MIT License
+MIT License
 
-    Copyright (c) Microsoft Corporation. All rights reserved.
+Copyright (c) Microsoft Corporation. All rights reserved.
 
-    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:
+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 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
+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

README.md

@@ -1,14 +1,29 @@
+# Language Server Protocol Inspector
 
-# Contributing
+Try it at https://microsoft.github.io/language-server-protocol/inspector/.
 
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
-Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
-the rights to use your contribution. For details, visit https://cla.microsoft.com.
+## Motivation
 
-When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
-a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
-provided by the bot. You will only need to do this once across all repos using our CLA.
+When you are using [vscode-languageserver-node](https://github.com/Microsoft/vscode-languageserver-node) to develop a language server, it's possible to specify a setting `"[langId]".trace.server: "verbose"` to make the Language Client log the LSP communication. This log is useful for developing and testing the Language Server, but the log can be lengthy — 5 seconds of usage might generate 5000 lines LSP log. This makes it hard to gain insight from the logs.
 
-This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
-For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
-contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+This inspector visualizes the logs to make it easy to understand the communication between the Language Client / Server. It also lets you filter down the logs by search query or language features, so you can quickly identify the logs you are interested in.
+
+![lsp-inspector](https://user-images.githubusercontent.com/4033249/41323525-ba73697a-6e63-11e8-92a3-c655b34126f6.gif)
+
+## Usage
+
+- A log file (log from html Language Server) is loaded by default.
+- Click each LSP item to expand its parameters.
+- Type a query into the search bar to filter the logs.
+- Select a language feature area to filter the logs.
+- Collect your own logs and inspect them! For example:
+  - Set `css.trace.server: "verbose"` in VS Code.
+  - Open a CSS file.
+  - Copy everything inside `CSS Language Server` channel into a log file `css.log`.
+  - Load it from the web app.
+- You can try it on real-world logs file at `/tests/unit/logParser/fixture`.
+
+## Running & Developing
+
+- `yarn`
+- `yarn serve`

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

jest.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'json',
+    'vue'
+  ],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '^.+\\.tsx?$': 'ts-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: [
+    'jest-serializer-vue'
+  ],
+  testMatch: [
+    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
+  ]
+}

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
+    "format": "prettier --config .prettierrc --write {src,tests}/**/*.{vue,js,ts,json}"
+  },
+  "gitHooks": {
+    "pre-commit": "yarn format"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
+    "@fortawesome/vue-fontawesome": "^0.0.23",
+    "vue": "^2.5.16",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^5.0.3",
+    "@types/jest": "^22.0.1",
+    "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.15",
+    "@vue/cli-plugin-typescript": "^3.0.0-beta.15",
+    "@vue/cli-plugin-unit-jest": "^3.0.0-beta.15",
+    "@vue/cli-service": "^3.0.0-beta.15",
+    "@vue/test-utils": "^1.0.0-beta.16",
+    "fs-extra": "^6.0.1",
+    "node-sass": "^4.9.0",
+    "prettier": "^1.13.6",
+    "sass-loader": "^7.0.1",
+    "ts-jest": "^22.4.6",
+    "vue-template-compiler": "^2.5.16",
+    "yorkie": "^1.0.3"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>LSP Inspector</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but LSP Inspector doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
+

src/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="app">
+    <h1>LSP Inspector</h1>
+    <div id="nav">
+      <router-link to="/language-server-protocol/inspector/">Usage</router-link> | 
+      <router-link to="/language-server-protocol/inspector/app">App</router-link>
+    </div>
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+#nav {
+  padding: 30px;
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+h1 {
+  margin-top: 120px;
+  margin-bottom: 40px;
+}
+</style>

src/components/FilePicker.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="file-picker">
+    <input type="file" @change="handleFiles">
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  methods: {
+    handleFiles(e) {
+      const reader = new FileReader()
+      const store = this.$store
+      reader.onload = () => {
+        store.commit('updateLog', reader.result)
+      }
+
+      reader.readAsText(e.target.files[0])
+    }
+  }
+})
+</script>
+
+<style>
+.file-picker {
+  margin-bottom: 24px;
+}
+</style>

src/components/FilterBar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="filter-bar">
+    <span :class="{ active: filter === 'a' }" @click="updateFilter('a')">All</span> |
+    <span :class="{ active: filter === 'w' }" @click="updateFilter('w')">Workspace</span> |
+    <span :class="{ active: filter === 't' }" @click="updateFilter('t')">Text</span> |
+    <span :class="{ active: filter === 'd' }" @click="updateFilter('d')">Diagnostics</span> |
+    <span :class="{ active: filter === 'l' }" @click="updateFilter('l')">Language</span>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  computed: {
+    filter() {
+      return this.$store.state.filter
+    }
+  },
+  methods: {
+    updateFilter(filter) {
+      this.$store.commit('updateFilter', filter)
+    }
+  }
+})
+</script>
+
+<style>
+.filter-bar {
+  margin-bottom: 24px;
+  font-family: 'Input Mono', Menlo, Monaco, 'Courier New', monospace;
+}
+.filter-bar span {
+  transition: color 0.1s ease-in;
+}
+.filter-bar .active {
+  color: #3eaf7c;
+}
+.filter-bar span:hover {
+  color: #3eaf7c88;
+}
+</style>