refactor: update to use react-component standalone bundle (#95)

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": "warn",
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

.gitignore

@@ -1,2 +1,5 @@
+out
+dist
 node_modules
-/out
+.vscode-test/
+*.vsix

.prettierrc

@@ -4,4 +4,4 @@
     "tabWidth": 2,
     "useTabs": false,
     "arrowParens": "avoid"
-}
+}

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "amodio.tsl-problem-matcher"]
+}

.vscode/launch.json

@@ -1,37 +1,35 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"configurations": [
 		{
-			"name": "Launch Extension",
+			"name": "Run Extension",
 			"type": "extensionHost",
 			"request": "launch",
-			"runtimeExecutable": "${execPath}",
-			"args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
-			"stopOnEntry": false,
-			"sourceMaps": true,
-			"outFiles": ["${workspaceRoot}/out/**/*.js"],
-			"preLaunchTask": "npm compile"
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
 		},
 		{
-			"type": "node",
-			"request": "attach",
-			"name": "Attach to Server",
-			"address": "localhost",
-			"protocol": "inspector",
-			"port": 6009,
-			"sourceMaps": true,
-			"outFiles": ["${workspaceRoot}/out/language/server.js"]
-		},
-		{
-			"name": "Launch Tests",
+			"name": "Extension Tests",
 			"type": "extensionHost",
 			"request": "launch",
-			"runtimeExecutable": "${execPath}",
-			"args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/out/test" ],
-			"stopOnEntry": false,
-			"sourceMaps": true,
-			"outFiles": ["${workspaceRoot}/out/test/**/*.js"],
-			"preLaunchTask": "npm compile"
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.js",
+				"${workspaceFolder}/dist/**/*.js"
+			],
+			"preLaunchTask": "tasks: watch-tests"
 		}
 	]
-}
+}

.vscode/settings.json

@@ -1,13 +1,13 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-	"files.exclude": {
-		"out": false // set this to true to hide the "out" folder with the compiled JS files
-	},
-	"search.exclude": {
-		"out": true // set this to false to include "out" folder in search results
-	},
-	"typescript.tsdk": "./node_modules/typescript/lib", // we want to use the TS server from our node_modules folder to control its version
-
-	"typescript.tsc.autoDetect": "off",
-	"npm.autoDetect": "off"
+    "files.exclude": {
+        "out": false, // set this to true to hide the "out" folder with the compiled JS files
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
 }

.vscode/tasks.json

@@ -1,27 +1,43 @@
-// Available variables which can be used inside of strings.
-// ${workspaceRoot}: the root folder of the team
-// ${file}: the current opened file
-// ${fileBasename}: the current opened file's basename
-// ${fileDirname}: the current opened file's dirname
-// ${fileExtname}: the current opened file's extension
-// ${cwd}: the current working directory of the spawned process
-// A task runner that calls a custom npm script that compiles the extension.
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
 {
 	"version": "2.0.0",
 	"tasks": [
 		{
-			"type": "shell",
-			"command": "npm run compile --loglevel silent",
-			"label": "npm compile",
-			"problemMatcher": "$tsc-watch",
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": [
+				"$ts-webpack-watch",
+				"$tslint-webpack-watch"
+			],
 			"isBackground": true,
 			"presentation": {
-				"reveal": "silent"
+				"reveal": "never",
+				"group": "watchers"
 			},
 			"group": {
 				"kind": "build",
 				"isDefault": true
 			}
+		},
+		{
+			"type": "npm",
+			"script": "watch-tests",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": "build"
+		},
+		{
+			"label": "tasks: watch-tests",
+			"dependsOn": [
+				"npm: watch",
+				"npm: watch-tests"
+			],
+			"problemMatcher": []
 		}
 	]
 }

.vscodeignore

@@ -1,9 +1,11 @@
-**/*.ts
+.github
 .gitignore
-.vscode/**
-typings/**
-test/**
-tsconfig.json
+.yarnrc
+webpack.config.js
 vsc-extension-quickstart.md
-docs
-examples
+tsconfig.json
+.vscode/**
+.vscode-test/**
+out/**
+src/**
+node_modules

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to the "asyncapi-preview" extension will be documented in this file.
+
+## [0.2.0]
+
+- Upgraded to the latest `@asyncapi/react-component@next`
+- Removes dependencies on Express, socket.io, js-yaml
+- Uses a simple `vscode.Webview` (no server required)
+- Fully webpacked for a better startup preformance and bundle size.
+
+## [0.1.X]
+
+- Initial releases

README.md

@@ -1,91 +1,25 @@
 [![Marketplace Version](https://vsmarketplacebadge.apphb.com/version/ivangsa.asyncapi-preview.svg 'Current Release')](https://marketplace.visualstudio.com/items?itemName=ivangsa.asyncapi-preview) [![Marketplace Downloads](https://vsmarketplacebadge.apphb.com/downloads-short/ivangsa.asyncapi-preview.svg 'Current Release')](https://marketplace.visualstudio.com/items?itemName=ivangsa.asyncapi-preview.svg)
 
-# AsyncAPI Playground Viewer - v0.0.1
+# AsyncAPI Preview
 
-**AsyncAPI Playground Viewer lets you preview AsyncAPI 2.0.0 files as you type in Visual Studio Code. Additionally provide intellisense/linting for the files as well.**
+Preview AsyncAPI documents inside VSCode.
 
-It works on asyncapi files in yaml format. Preview happens in real time as you type.
+AsyncAPI Preview was simplified and reworked from scratch to use the latest [@asyncapi/asyncapi-react](https://github.com/asyncapi/asyncapi-react/tree/next), removing old dependencies on Express, socket.io and js-yaml with better startup preformace and bundle size.
 
-## Requirements
-AsyncAPI Playground Viewer uses https://github.com/asyncapi/generator which requires this software to be installed:
+You can open AsyncAPI Preview from editor title/context menu.
 
-- v12.16+ < Node.js
-- v6.13.7+ < npm
+![AsyncAPI Preview](docs/asyncapi-editor-title-context.png)
 
-## Preview
+## Automatic hot-reloading
 
-To start
-
-- Open the asyncapi file and press F1.
-- Run the Command `Preview AsyncAPI`.
-
-OR
-
-- Press `Shift + Alt + A`
-
-OR
-
-- Click in the Editor's title bar and click `Preview AsyncAPI`
-
-OR
-
-- Right click file in explorer panel and click `Preview AsyncAPI`
-
-THEN
-
-- Preview it in vscode Itself like this
-
-![AsyncAPI Editor Title Context Menu](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-editor-title-context.png)
-
-![AsyncAPI Preview Command](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-preview-command.png)
-
-## Configurations
-
-![AsyncAPI Settings](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-settings.png)
-
-### Opening In External browser
-
-If you want to preview the changes in external browser change the settings `Preview In Browser` to `true` in `User/Workspace Settings`
-
-THEN
-
-- Run the Command `Preview AsyncAPI`.
-
-OR
-
-- Press `Shift + Alt + A`
-
-**Preview will be automatically opened in default browser.**
-
-### Change Default Port
-
-Default port of the preview url can be changed by changing the `Default Port` value in `User/Workspace Settings`
-
-### Show Only File Name
-
-In the preview title the file name along with the full path is displayed by default. It can be changed to show only the file name by changing the `Show Only File Name` to `true` in `User/Workspace Settings`
-
-### Change Default Host
-
-Default host(localhost) of the preview url can be changed by changing the `asyncapiViewer.defaultHost` value in `User/Workspace Settings`
-
-### Stop AsyncAPI Preview Server
-
-To stop the preview server simply click the status bar item.
-
-![Stop AsyncAPI Server](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-stop-preview-server.png)
-
-## Releases
+Automatic hot-reloading on editor save, but currently it doesn't reload when saving referenced external files.
 
 ### Credits
 
-AsyncAPI Viewer utilizes the following open source projects
+AsyncAPI Viewer utilizes the following open source projects:
 
-- [AsyncAPI Generator](https://github.com/asyncapi/generator)
-- [Express](https://github.com/expressjs/express)
-- [socket.io](https://github.com/socketio/socket.io/)
-- [yaml.js](https://github.com/jeremyfa/yaml.js)
+- [@asyncapi/asyncapi-react](https://github.com/asyncapi/asyncapi-react/tree/next)
 
 ### Contributors
 
-This extension is inspired in [Swagger Viewer](https://github.com/arjun-g/vs-swagger-viewer)
+Ivan Garcia Sainz-Aja [ivangsa](https://github.com/ivangsa)