Skip to content

Commit 698d1d5

Browse files
ivangsaivangsa
authored
refactor: update to use react-component standalone bundle (#95)
1 parent 5ec4ea5 commit 698d1d5

38 files changed

+3124
-7462
lines changed

‎.eslintrc.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
}

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1+
out
2+
dist
13
node_modules
2-
/out
4+
.vscode-test/
5+
*.vsix

‎.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
"tabWidth": 2,
55
"useTabs": false,
66
"arrowParens": "avoid"
7-
}
7+
}

‎.vscode/extensions.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
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+
}

‎.vscode/launch.json‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,35 @@
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
15
{
2-
"version": "0.1.0",
6+
"version": "0.2.0",
37
"configurations": [
48
{
5-
"name": "Launch Extension",
9+
"name": "Run Extension",
610
"type": "extensionHost",
711
"request": "launch",
8-
"runtimeExecutable": "${execPath}",
9-
"args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
10-
"stopOnEntry": false,
11-
"sourceMaps": true,
12-
"outFiles": ["${workspaceRoot}/out/**/*.js"],
13-
"preLaunchTask": "npm compile"
12+
"args": [
13+
"--extensionDevelopmentPath=${workspaceFolder}"
14+
],
15+
"outFiles": [
16+
"${workspaceFolder}/dist/**/*.js"
17+
],
18+
"preLaunchTask": "${defaultBuildTask}"
1419
},
1520
{
16-
"type": "node",
17-
"request": "attach",
18-
"name": "Attach to Server",
19-
"address": "localhost",
20-
"protocol": "inspector",
21-
"port": 6009,
22-
"sourceMaps": true,
23-
"outFiles": ["${workspaceRoot}/out/language/server.js"]
24-
},
25-
{
26-
"name": "Launch Tests",
21+
"name": "Extension Tests",
2722
"type": "extensionHost",
2823
"request": "launch",
29-
"runtimeExecutable": "${execPath}",
30-
"args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/out/test" ],
31-
"stopOnEntry": false,
32-
"sourceMaps": true,
33-
"outFiles": ["${workspaceRoot}/out/test/**/*.js"],
34-
"preLaunchTask": "npm compile"
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"
3533
}
3634
]
37-
}
35+
}

‎.vscode/settings.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// Place your settings in this file to overwrite default and user settings.
22
{
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-
"typescript.tsdk": "./node_modules/typescript/lib", // we want to use the TS server from our node_modules folder to control its version
10-
11-
"typescript.tsc.autoDetect": "off",
12-
"npm.autoDetect": "off"
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"
1313
}

‎.vscode/tasks.json‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,43 @@
1-
// Available variables which can be used inside of strings.
2-
// ${workspaceRoot}: the root folder of the team
3-
// ${file}: the current opened file
4-
// ${fileBasename}: the current opened file's basename
5-
// ${fileDirname}: the current opened file's dirname
6-
// ${fileExtname}: the current opened file's extension
7-
// ${cwd}: the current working directory of the spawned process
8-
// A task runner that calls a custom npm script that compiles the extension.
1+
// See https://go.microsoft.com/fwlink/?LinkId=733558
2+
// for the documentation about the tasks.json format
93
{
104
"version": "2.0.0",
115
"tasks": [
126
{
13-
"type": "shell",
14-
"command": "npm run compile --loglevel silent",
15-
"label": "npm compile",
16-
"problemMatcher": "$tsc-watch",
7+
"type": "npm",
8+
"script": "watch",
9+
"problemMatcher": [
10+
"$ts-webpack-watch",
11+
"$tslint-webpack-watch"
12+
],
1713
"isBackground": true,
1814
"presentation": {
19-
"reveal": "silent"
15+
"reveal": "never",
16+
"group": "watchers"
2017
},
2118
"group": {
2219
"kind": "build",
2320
"isDefault": true
2421
}
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": []
2541
}
2642
]
2743
}

‎.vscodeignore‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
**/*.ts
1+
.github
22
.gitignore
3-
.vscode/**
4-
typings/**
5-
test/**
6-
tsconfig.json
3+
.yarnrc
4+
webpack.config.js
75
vsc-extension-quickstart.md
8-
docs
9-
examples
6+
tsconfig.json
7+
.vscode/**
8+
.vscode-test/**
9+
out/**
10+
src/**
11+
node_modules

‎CHANGELOG.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Change Log
2+
3+
All notable changes to the "asyncapi-preview" extension will be documented in this file.
4+
5+
## [0.2.0]
6+
7+
- Upgraded to the latest `@asyncapi/react-component@next`
8+
- Removes dependencies on Express, socket.io, js-yaml
9+
- Uses a simple `vscode.Webview` (no server required)
10+
- Fully webpacked for a better startup preformance and bundle size.
11+
12+
## [0.1.X]
13+
14+
- Initial releases

‎README.md‎

Lines changed: 10 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,25 @@
11
[![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)
22

3-
# AsyncAPI Playground Viewer - v0.0.1
3+
# AsyncAPI Preview
44

5-
**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.**
5+
Preview AsyncAPI documents inside VSCode.
66

7-
It works on asyncapi files in yaml format. Preview happens in real time as you type.
7+
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.
88

9-
## Requirements
10-
AsyncAPI Playground Viewer uses https://github.com/asyncapi/generator which requires this software to be installed:
9+
You can open AsyncAPI Preview from editor title/context menu.
1110

12-
- v12.16+ < Node.js
13-
- v6.13.7+ < npm
11+
![AsyncAPI Preview](docs/asyncapi-editor-title-context.png)
1412

15-
## Preview
13+
## Automatic hot-reloading
1614

17-
To start
18-
19-
- Open the asyncapi file and press F1.
20-
- Run the Command `Preview AsyncAPI`.
21-
22-
OR
23-
24-
- Press `Shift + Alt + A`
25-
26-
OR
27-
28-
- Click in the Editor's title bar and click `Preview AsyncAPI`
29-
30-
OR
31-
32-
- Right click file in explorer panel and click `Preview AsyncAPI`
33-
34-
THEN
35-
36-
- Preview it in vscode Itself like this
37-
38-
![AsyncAPI Editor Title Context Menu](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-editor-title-context.png)
39-
40-
![AsyncAPI Preview Command](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-preview-command.png)
41-
42-
## Configurations
43-
44-
![AsyncAPI Settings](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-settings.png)
45-
46-
### Opening In External browser
47-
48-
If you want to preview the changes in external browser change the settings `Preview In Browser` to `true` in `User/Workspace Settings`
49-
50-
THEN
51-
52-
- Run the Command `Preview AsyncAPI`.
53-
54-
OR
55-
56-
- Press `Shift + Alt + A`
57-
58-
**Preview will be automatically opened in default browser.**
59-
60-
### Change Default Port
61-
62-
Default port of the preview url can be changed by changing the `Default Port` value in `User/Workspace Settings`
63-
64-
### Show Only File Name
65-
66-
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`
67-
68-
### Change Default Host
69-
70-
Default host(localhost) of the preview url can be changed by changing the `asyncapiViewer.defaultHost` value in `User/Workspace Settings`
71-
72-
### Stop AsyncAPI Preview Server
73-
74-
To stop the preview server simply click the status bar item.
75-
76-
![Stop AsyncAPI Server](https://github.com/ivangsa/vs-asyncapi-preview/raw/master/docs/asyncapi-stop-preview-server.png)
77-
78-
## Releases
15+
Automatic hot-reloading on editor save, but currently it doesn't reload when saving referenced external files.
7916

8017
### Credits
8118

82-
AsyncAPI Viewer utilizes the following open source projects
19+
AsyncAPI Viewer utilizes the following open source projects:
8320

84-
- [AsyncAPI Generator](https://github.com/asyncapi/generator)
85-
- [Express](https://github.com/expressjs/express)
86-
- [socket.io](https://github.com/socketio/socket.io/)
87-
- [yaml.js](https://github.com/jeremyfa/yaml.js)
21+
- [@asyncapi/asyncapi-react](https://github.com/asyncapi/asyncapi-react/tree/next)
8822

8923
### Contributors
9024

91-
This extension is inspired in [Swagger Viewer](https://github.com/arjun-g/vs-swagger-viewer)
25+
Ivan Garcia Sainz-Aja [ivangsa](https://github.com/ivangsa)

0 commit comments

Comments
 (0)