https://github.com/villy-p/vscode-webview-extension-svelte

A template repository to quickly make a Visual Studio Code Webview Extension using Svelte and Rollup
https://github.com/villy-p/vscode-webview-extension-svelte

rollup svelte template template-project vscode vscode-api vscode-extension

Last synced: 29 days ago
JSON representation

A template repository to quickly make a Visual Studio Code Webview Extension using Svelte and Rollup

• Host: GitHub
• URL: https://github.com/villy-p/vscode-webview-extension-svelte
• Owner: Villy-P
• License: mit
• Created: 2024-08-02T22:34:51.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-30T01:38:40.000Z (about 1 month ago)
• Last Synced: 2024-10-10T12:05:58.365Z (29 days ago)
• Topics: rollup, svelte, template, template-project, vscode, vscode-api, vscode-extension
• Language: TypeScript
• Homepage:
• Size: 327 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VSCode-Webview-Extension-Svelte

A template repository to quickly make a Visual Studio Code Webview Extension using Svelte and Rollup

This repo gives you everything you need to start making your own webview extensions using the power and reactivity of Svelte.

It automatically comes with everything you need, from components to CSS.

## Startup

You can start using this repository by clicking the `Use the template` button on the [Github Page](https://github.com/Villy-P/VSCode-Webview-Extension-Svelte).

After you create your repo, you can run `npm run compile` to begin compiling the frontend and backend, and press `F5` to start the Extension enviroment.

You can find the extension by pressing `Ctrl-Shift-P` and navigating to `Hello World`.

Before you begin making changes, change your extension details in `package.json` and webview properties in `src/extension/extension.ts` on line `6`.

When you do make a change on the front or backend, use `Ctrl-R` on your Extension Environment to see the changes.

After that, you are good to go!

Read the `Directory Composition` section to see where to put which files.

Read the `Examples` section to see examples of what to do.

## Directory Composition

### Front End

This is your webview itself and all files pertaining to it:

| File / Folder     | Use                                         |

| ----------------- | ------------------------------------------- |

| `src/main.ts`     | The base file for your Svelte Webview       |

| `src/App.svelte`  | This is your webview page                   |

| `src/css/`        | This folder holds all your CSS              |

| `src/components/` | You can put all your Svelte components here |

You can put `ts` files that you use on the front end anywhere in the project directory EXCEPT the `src/extension` folder.

### Back End

This is the VSCode Backend that will contain all files used by the backend.

| File / Folder                | Use                                                       |

| ---------------------------- | --------------------------------------------------------- |

| `src/extension/extension.ts` | This is the base file for your extension.                 |

| `src/extension/panel.ts`     | This is the class that handles the creation of the Panel. |

| `src/extension/`             | Place all utility `ts` files here                         |

## Additions

If you want to add other popular libraries to your project, like TailwindCSS, go to [ADDITIONS.md](./ADDITIONS.md).

## Examples

### Sending data from the backend to front end

`src/extension/extension.ts`

``` ts

import * as vscode from 'vscode';

import { SveltePanel } from './panel';

export function activate(context: vscode.ExtensionContext) {

 let disposable = vscode.commands.registerCommand('extension-name.helloWorld', () => {

  SveltePanel.render("showPanel", "Panel Name", context.extensionUri);

  SveltePanel.currentPanel?.post({

   title: "data-name",

   msg: "This is a message from the backend"

  });

 });

 context.subscriptions.push(disposable);

}

export function deactivate() {}

```

`src/App.svelte`

``` html

 window.addEventListener("message", (e) => {

  if (e.data.title === "data-name")

   console.log(e.data.msg);

 });

Hello, World!

```


## Contributing

Check out the [contributing guidelines](.github/CONTRIBUTING.md).

## License

File Makeup Viewer is licensed under the [MIT](./LICENSE) license

## Changelog

View all upcoming and previous releases [here](./CHANGELOG.md)