Update API docs for Svelte

Author: shirakaba

website/docs/api/interfaces/abstractbuttonprops.md

@@ -7,21 +7,24 @@ sidebar_label: "AbstractButtonProps"
 The Button component provides ability to add and manipulate native button widgets. It is based on
 [NodeGui's QPushButton](https://docs.nodegui.org/docs/api/QPushButton).
 ## Example
-```javascript
-import React from "react";
-import { Renderer, Button, Window } from "@nodegui/react-nodegui";
-const App = () => {
-  return (
-    <Window>
-      <Button style={buttonStyle} text={"Hello World"} />
-    </Window>
-  );
-};
-const buttonStyle = `
-  color: white;
-`;
-Renderer.render(<App />);
 
+```svelte
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    (window as any).win = win; // Prevent garbage collection.
+    win.nativeView.show();
+    return () => {
+      delete (window as any).win;
+    };
+  });
+</script>
+
+<svelte:options namespace="foreign" />
+<window bind:this={win}>
+  <button style="color: white;">Hello World</button>
+</window>
 ```
 
 ## Type parameters

website/docs/api/interfaces/buttonprops.md

@@ -7,21 +7,24 @@ sidebar_label: "ButtonProps"
 The Button component provides ability to add and manipulate native button widgets. It is based on
 [NodeGui's QPushButton](https://docs.nodegui.org/docs/api/QPushButton).
 ## Example
-```javascript
-import React from "react";
-import { Renderer, Button, Window } from "@nodegui/react-nodegui";
-const App = () => {
-  return (
-    <Window>
-      <Button style={buttonStyle} text={"Hello World"} />
-    </Window>
-  );
-};
-const buttonStyle = `
-  color: white;
-`;
-Renderer.render(<App />);
 
+```svelte
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    (window as any).win = win; // Prevent garbage collection.
+    win.nativeView.show();
+    return () => {
+      delete (window as any).win;
+    };
+  });
+</script>
+
+<svelte:options namespace="foreign" />
+<window bind:this={win}>
+  <button style="color: white;">Hello World</button>
+</window>
 ```
 
 ## Hierarchy

website/docs/api/interfaces/checkboxprops.md

@@ -7,21 +7,24 @@ sidebar_label: "CheckBoxProps"
 The CheckBox component provides ability to add and manipulate native button widgets. It is based on
 [NodeGui's QCheckBox](https://docs.nodegui.org/docs/api/QCheckBox).
 ## Example
-```javascript
-import React from "react";
-import { Renderer, CheckBox, Window } from "@nodegui/react-nodegui";
-const App = () => {
-  return (
-    <Window>
-      <CheckBox style={checkboxStyle} text={"Hello World"} checked={true} />
-    </Window>
-  );
-};
-const checkboxStyle = `
-  color: white;
-`;
-Renderer.render(<App />);
 
+```svelte
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    (window as any).win = win; // Prevent garbage collection.
+    win.nativeView.show();
+    return () => {
+      delete (window as any).win;
+    };
+  });
+</script>
+
+<svelte:options namespace="foreign" />
+<window bind:this={win}>
+  <checkBox style="color: white;" checked={true}>Hello World</checkBox>
+</window>
 ```
 
 ## Hierarchy

website/docs/api/interfaces/systemtrayiconprops.md

@@ -7,31 +7,38 @@ sidebar_label: "SystemTrayIconProps"
 The SystemTrayIcon component provides the ability to add and manipulate a native system tray icon.
 [NodeGui's QSystemTrayIcon](https://docs.nodegui.org/docs/api/generated/classes/qsystemtrayicon).
 ## Example
-```javascript
-import React from "react";
-import { QIcon, QAction } from "@nodegui/nodegui";
-import { Menu, Renderer, SystemTrayIcon, Window } from "@nodegui/react-nodegui";
-import path from "path";
-
-const icon = new QIcon(path.join(__dirname, "../extras/assets/nodegui.png"));
-const action = new QAction();
-action.setText("Hello");
-action.addEventListener("triggered", () => {
-  console.log("hello");
-});
-
-const App = () => {
-  return (
-    <Window>
-      <SystemTrayIcon icon={icon} tooltip="Hello World" visible>
-        <Menu actions={[action]} />
-      </SystemTrayIcon>
-    </Window>
-  );
-};
-
-Renderer.render(<App />);
 
+```svelte
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { QIcon, QAction } from "@nodegui/nodegui";
+  import path from "path";
+
+  onMount(() => {
+    (window as any).win = win; // Prevent garbage collection.
+    win.nativeView.show();
+
+    const icon = new QIcon(path.join(__dirname, "../extras/assets/nodegui.png"));
+    const action = new QAction();
+    action.setText("Hello");
+    function onTriggered(){
+      console.log("hello");
+    }
+    action.addEventListener("triggered", onTriggered);
+
+    return () => {
+      action.removeEventListener("triggered", onTriggered);
+      delete (window as any).win;
+    };
+  });
+</script>
+
+<svelte:options namespace="foreign" />
+<window bind:this={win}>
+  <systemTrayIcon {icon} tooltip="Hello World" visible>
+    <menu actions={[action]}/>
+  </systemTrayIcon>
+</window>
 ```
 
 ## Hierarchy

website/docs/api/interfaces/viewprops.md

@@ -8,23 +8,28 @@ The View component can be used to encapsulate other components and provide struc
 It functions similar to a div in the web world. It is based on
 [NodeGui's QWidget](https://docs.nodegui.org/docs/api/QWidget).
 ## Example
-```javascript
-import React from "react";
-import { Renderer, Button, Window, View } from "./index";
-const App = () => {
- return (
-   <Window>
-     <View>
-       <Button style={buttonStyle} text={"Hello"} />
-       <Button style={buttonStyle} text={"World"} />
-     </View>
-   </Window>
- );
-};
-const buttonStyle = `
- color: white;
-`;
-Renderer.render(<App />);
+
+```svelte
+<script lang="ts">
+  import { onMount } from "svelte";
+  const buttonStyle = "color: white;";
+
+  onMount(() => {
+    (window as any).win = win; // Prevent garbage collection.
+    win.nativeView.show();
+    return () => {
+      delete (window as any).win;
+    };
+  });
+</script>
+
+<svelte:options namespace="foreign" />
+<window bind:this={win}>
+  <view>
+    <button style="{buttonStyle}">Hello</button>
+    <button style="{buttonStyle}">World</button>
+  </view>
+</window>
 ```
 
 ## Type parameters