Add more framework samples (microsoft#80)

Description of changes

Adds hello world sample extensions for Svelte, Vue, Angular, and SolidJS-based webview extensions.
Also includes some minor clean-up to the React samples and reorganizes the overall repo structure.

Author: hawkticehurst

README.md

@@ -14,51 +14,29 @@ Follow the instructions in the `README` file of the desired sample extension.
 
 ### Default samples
 
-A set of sample extensions using vanilla HTML, CSS, and JavaScript to render the webview UI.
+A set of sample extensions using vanilla HTML, CSS, and JavaScript/TypeScript to render the webview UI and demonstrate various VS Code APIs.
 
-| Sample extension                                 | Description                                                                       |
-| ------------------------------------------------ | --------------------------------------------------------------------------------- |
-| [component-gallery](./default/component-gallery) | Demonstrates every component in the Webview UI Toolkit.                           |
-| [hello-world](./default/hello-world)             | A basic hello-world starter extension.                                            |
-| [notepad](./default/notepad)                     | A simple notetaking extension that leverages the VS Code TreeView API.            |
-| [weather-webview](./default/weather-webview)     | Demonstrates the toolkit being used within a webview view – i.e., Visual Studio Code sidebar. |
-
-### React samples
-
-A set of sample extensions using React to render the webview UI.
-
-| Sample extension                             | Description                                                           |
-| ---------------------------------------------| --------------------------------------------------------------------- |
-| [hello-world-cra](./react/hello-world-cra)   | A basic hello-world starter extension using React + Create React App. |
-| [hello-world-vite](./react/hello-world-vite) | A basic hello-world starter extension using React + Vite.             |
-
-### Svelte samples
-
-A set of sample extensions using Svelte to render the webview UI.
+Don't see a demonstration for your desired use case, VS Code API, etc.? Open an issue and request it.
 
-| Sample extension | Description |
-| -----------------| ----------- |
-| _Coming soon_    |             |
-
-### Vue samples
-
-A set of sample extensions using Vue to render the webview UI.
-
-| Sample extension | Description |
-| -----------------| ----------- |
-| _Coming soon_    |             |
-
-### Angular samples
-
-A set of sample extensions using Angular to render the webview UI.
+| Sample extension                                 | Description                                                                                   |
+| ------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+| [component-gallery](./default/component-gallery) | Demonstrates every component in the Webview UI Toolkit.                                       |
+| [hello-world](./default/hello-world)             | A basic hello-world starter extension.                                                        |
+| [notepad](./default/notepad)                     | A simple notetaking extension that leverages the VS Code TreeView API.                        |
+| [weather-webview](./default/weather-webview)     | Demonstrates the toolkit being used within a webview view – i.e., Visual Studio Code sidebar. |
 
-| Sample extension | Description |
-| -----------------| ----------- |
-| _Coming soon_    |             |
+### Framework samples
 
-### Other samples
+A set of sample extensions that demonstrate how to use various web frameworks to render the webview UI.
 
-Don't see a demonstration for your desired framework, API, use case, etc.? Open an issue and request it.
+| Sample extension                                              | Description                                                           |
+| --------------------------------------------------------------| --------------------------------------------------------------------- |
+| [hello-world-angular](./frameworks/hello-world-angular)       | A basic hello-world starter extension using Angular.                  |
+| [hello-world-react-cra](./frameworks/hello-world-react-cra)   | A basic hello-world starter extension using React + Create React App. |
+| [hello-world-react-vite](./frameworks/hello-world-react-vite) | A basic hello-world starter extension using React + Vite.             |
+| [hello-world-solidjs](./frameworks/hello-world-solidjs)       | A basic hello-world starter extension using SolidJS.                  |
+| [hello-world-svelte](./frameworks/hello-world-svelte)         | A basic hello-world starter extension using Svelte.                   |
+| [hello-world-vue](./frameworks/hello-world-vue)               | A basic hello-world starter extension using Vue.                      |
 
 ## Contributing
 

react/hello-world-cra/.eslintrc.json renamed to frameworks/hello-world-angular/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "consistent",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "always"
+}

react/hello-world-cra/.prettierignore renamed to frameworks/hello-world-angular/.prettierignore

@@ -0,0 +1,37 @@
+# Hello World (Angular)
+
+This is an implementation of the default [Hello World](https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/default/hello-world) sample extension that demonstrates how to set up and use a [Angular](https://angular.io/) + [Webview UI Toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit) webview extension.
+
+![A screenshot of the sample extension.](./assets/hello-world-screenshot.png)
+
+## Documentation
+
+For a deeper dive into how this sample works, read the guides below.
+
+- [Extension structure](./docs/extension-structure.md)
+- [Extension commands](./docs/extension-commands.md)
+- [Extension development cycle](./docs/extension-development-cycle.md)
+
+## Run The Sample
+
+```bash
+# Copy sample extension locally
+npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-angular hello-world
+
+# Navigate into sample directory
+cd hello-world
+
+# Install dependencies for both the extension and webview UI source code
+npm run install:all
+
+# Build webview UI source code
+npm run build:webview
+
+# Open sample in VS Code
+code .
+```
+
+Once the sample is open inside VS Code you can run the extension by doing the following:
+
+1. Press `F5` to open a new Extension Development Host window
+2. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Hello World (Angular): Show`