readme/doc

Author: farfromrefug

README.md

@@ -48,6 +48,7 @@
 	* [XML](#xml)
 * [NativeScript + Angular](#nativescript--angular)
 * [NativeScript + Vue](#nativescript--vue)
+* [NativeScript + Svelte](#nativescript--svelte)
 * [Draw Method ](#draw-method-)
 	* [Examples:](#examples)
 * [Demos and Development](#demos-and-development)
@@ -136,14 +137,41 @@ Vue.use(CanvasPlugin);
 ```
 
 
+[](#nativescript--svelte)
+
+
+[](#nativescript--svelte)
+
+## NativeScript + Svelte
+
+```ts
+// app/app.ts
+import { registerNativeViewElement } from 'svelte-native/dom';
+registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);
+```
+
+```svelte
+<!-- app/components/Foo.svelte -->
+<stackLayout>
+    <canvasView width="300" height="300" on:draw={draw} />
+</stackLayout>
+```
+
+
 [](#draw-method-)
 
 
 [](#draw-method-)
 
 ## Draw Method 
-```typescript
+
+```ts
+import type { Canvas } from '@nativescript-community/ui-canvas';
+import { Paint, createRect } from '@nativescript-community/ui-canvas';
+import { Color } from '@nativescript/core';
+
 function draw(event: { canvas: Canvas }) {
+    const canvas = event.canvas;
     const paint = new Paint();
     paint.setColor(new Color('black'));
     paint.strokeWidth = 10;
@@ -271,6 +299,7 @@ One easy solution is t modify `~/.gitconfig` and add
 ## Questions
 
 If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
+
 </details><details>
 <summary><b>ui-canvaslabel</b></summary>
 <!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
@@ -575,6 +604,8 @@ If you have any questions/issues/comments please feel free to create an issue or
 
 * [Installation](#installation)
 * [Configuration](#configuration)
+	* [NativeScript + Vue](#nativescript--vue)
+	* [NativeScript + Svelte](#nativescript--svelte)
 	* [Examples:](#examples)
 * [Demos and Development](#demos-and-development)
 	* [Repo Setup](#repo-setup)
@@ -609,6 +640,8 @@ Run the following command from the root of your project:
 
 For now only `vue` (and core) is supported.
 
+### NativeScript + Vue
+
 ```ts
 import CanvasSVG from '@nativescript-community/ui-svg/vue';
 Vue.use(CanvasSVG);
@@ -642,6 +675,19 @@ Or within and Canvas View extending `CanvasView` like `CanvasLabel`
 </CanvasSVG>
 ```
 
+### NativeScript + Svelte
+
+```ts
+// app/app.ts
+import { registerNativeViewElement } from 'svelte-native/dom';
+registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);
+```
+
+```svelte
+<!-- app/components/Foo.svelte -->
+<svgView src="~/assets/foo.svg" aspectFit="stretch" />
+```
+
 ### Examples:
 
 - [Basic](demo-snippets/vue/SVG.vue)
@@ -754,6 +800,7 @@ One easy solution is t modify `~/.gitconfig` and add
 ## Questions
 
 If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
+
 </details>
 
 [](#demos-and-development)

docs/assets/highlight.css

@@ -21,14 +21,14 @@
     --dark-hl-9: #569CD6;
     --light-hl-10: #CD3131;
     --dark-hl-10: #F44747;
-    --light-hl-11: #267F99;
-    --dark-hl-11: #4EC9B0;
-    --light-hl-12: #0070C1;
-    --dark-hl-12: #4FC1FF;
-    --light-hl-13: #098658;
-    --dark-hl-13: #B5CEA8;
-    --light-hl-14: #008000;
-    --dark-hl-14: #6A9955;
+    --light-hl-11: #008000;
+    --dark-hl-11: #6A9955;
+    --light-hl-12: #098658;
+    --dark-hl-12: #B5CEA8;
+    --light-hl-13: #267F99;
+    --dark-hl-13: #4EC9B0;
+    --light-hl-14: #0070C1;
+    --dark-hl-14: #4FC1FF;
     --light-hl-15: #000000;
     --dark-hl-15: #C8C8C8;
     --light-code-background: #FFFFFF;