phares3757/vscode-kanbn
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Gordon
2021-03-24 01:15:25 +00:00
parent b29ece8904
commit fbe3dd7a7d
24 changed files with 49410 additions and 9796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@ -1,34 +1,5 @@
# VSCode Webview React
# VSCode kanbn extension
This project was bootstrapped with
* [Create React App](https://github.com/facebookincubator/create-react-app)
* [Create React App TypeScript](https://github.com/wmonk/create-react-app-typescript)
* [VSCode Extension Webview Sample](https://github.com/Microsoft/vscode-extension-samples/tree/master/webview-sample)
[The webview API](https://code.visualstudio.com/docs/extensions/webview) allows extensions to create customizable views within VSCode. Single Page Application frameworks are perfect fit for this use case. However, to make modern JavaScript frameworks/toolchains appeal to VSCode webview API's [security best practices](https://code.visualstudio.com/docs/extensions/webview#_security) requires some knowledge of both the bundling framework you are using and how VSCode secures webview. This project aims to provide an out-of-box starter kit for Create React App and TypeScript in VSCode's webview.
## Development
Run following commands in the terminal
```shell
yarn install
yarn run build
```
And then press F5, in Extension Development Host session, run `Start React Webview` command from command palette.
## Under the hood
Things we did on top of Create React App TypeScript template
* We inline `index.html` content in `ext-src/extension.ts` when creating the webview
* We set strict security policy for accessing resources in the webview.
* Only resources in `/build` can be accessed
* Onlu resources whose scheme is `vscode-resource` can be accessed.
* For all resources we are going to use in the webview, we change their schemes to `vscode-resource`
* Since we only allow local resources, absolute path for styles/images (e.g., `/static/media/logo.svg`) will not work. We add a `.env` file which sets `PUBLIC_URL` to `./` and after bundling, resource urls will be relative.
* We add baseUrl `<base href="${vscode.Uri.file(path.join(this._extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">` and then all relative paths work.
## Limitations
Right now you can only run production bits (`yarn run build`) in the webview, how to make dev bits work (webpack dev server) is still unknown yet. Suggestions and PRs welcome !
// TODO readme...
```