NativeScript · NathanWalker · Feb 23, 2025 · Aug 3, 2024 · Aug 12, 2024 · Aug 12, 2024
diff --git a/.vitepress/theme/cliLanguage.ts b/.vitepress/theme/cliLanguage.ts
@@ -1,10 +1,10 @@
 // https://mysticmind.dev/vitepress-fenced-code-block-syntax-highlighting-quirks-with-net-or-other-languages
-import { BUNDLED_LANGUAGES } from "shiki";
-import cliLanguageGrammar from "./shiki/cli.tmLanguage.json";
+import { bundledLanguages } from 'shiki'
+import cliLanguageGrammar from './shiki/cli.tmLanguage.json'
 
-BUNDLED_LANGUAGES.push({
-  id: "cli",
-  scopeName: "source.cli",
-  // @ts-ignore
+bundledLanguages['cli'] = {
+  id: 'cli',
+  scopeName: 'source.cli',
   grammar: cliLanguageGrammar,
-});
+}
+// bundledLanguages.push()
diff --git a/content/dev-reference.md b/content/dev-reference.md
@@ -100,18 +100,116 @@ For example:
 ![some image](../assets/images/setup/windows/<some_image>.png)
 ```
 
-<!-- <Tabs>
-<Tab name="Vue">
+## Tabs
 
-SOMETHING SOMETHING
+:::warning
 
-```ts
-asd
+In order to render Markdown inside a tab, you **must** have one line break above and below the markdown content.
+
+For example:
+
+```xml
+<Tab>
+  # Test
+</Tab>
 ```
 
+Will render `# Test` literally, while
+
+```xml
+<Tab>
+
+  # Test
+
 </Tab>
+```
+
+Will render a `h1` Test title.
+
+:::
+
+<Tabs>
+  <Tab title="Simple Tab">
+  This is the most basic tab there is. Pure html content or whatever.
+  </Tab>
+
+  <Tab title="With Code Block">
+
+  ```ts
+  console.log('Hello World!')
+  ```
+
+  </Tab>
+
+  <Tab title="With External Code Block">
+
+<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
+
+  </Tab>
+
+  <Tab title="With Two Ext-Code Blocks">
+
+<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
+
+And another one:
+
+<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
 
-</Tabs> -->
+  </Tab>
+</Tabs>
+
+### Flavor Tabs
+
+<Tabs>
+<Tab flavor="vue">
+This is the vue tab
+</Tab>
+<Tab flavor="typescript">
+This is the typescript tab
+</Tab>
+<Tab flavor="javascript">
+This is the javascript tab
+</Tab>
+<Tab flavor="angular">
+This is the angular tab
+</Tab>
+<Tab flavor="svelte">
+This is the svelte tab
+</Tab>
+<Tab flavor="react">
+This is the react tab
+</Tab>
+<Tab flavor="solid">
+This is the solid tab
+</Tab>
+
+</Tabs>
+
+All Flavor tabs will be synchronized and ordered consistently:
+
+<Tabs>
+<Tab flavor="typescript">
+This is the typescript tab
+</Tab>
+<Tab flavor="javascript">
+This is the javascript tab
+</Tab>
+<Tab flavor="angular">
+This is the angular tab
+</Tab>
+<Tab flavor="svelte">
+This is the svelte tab
+</Tab>
+<Tab flavor="react">
+This is the react tab
+</Tab>
+<Tab flavor="vue">
+This is the vue tab
+</Tab>
+<Tab flavor="solid">
+This is the solid tab
+</Tab>
+</Tabs>
 
 ## StepList
 

diff --git a/content/ui/action-bar.md b/content/ui/action-bar.md
@@ -20,7 +20,12 @@ Views also part of the ActionBar abstraction:
 <img src="../assets/images/screenshots/android/ActionBar.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/ActionBar/page.xml#example
+<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
+<<< @/../examples/angular/src/ui/ActionBar/component.html#example
+<<< @/../examples/react/src/components/ui/actionbar.tsx#example
+<<< @/../examples/solid/src/ui/actionbar.tsx#example
+<<< @/../examples/svelte/app/components/ui/ActionBar.svelte#example
+<<< @/../examples/vue/src/ui/Actionbar/component.vue#example
 
 ## Examples
 

diff --git a/content/ui/activity-indicator.md b/content/ui/activity-indicator.md
@@ -15,7 +15,43 @@ contributors:
 <img src="../assets/images/screenshots/android/ActivityIndicator.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/ActivityIndicator/template.xml#example
+<Tabs>
+<Tab flavor="vue">
+
+<<< @/../examples/vue/src/ui/ActivityIndicator/component.vue#example
+
+</Tab>
+<Tab flavor="typescript">
+
+<<< @/../examples/typescript/src/ui/ActivityIndicator/template.xml#example
+
+</Tab>
+<Tab flavor="javascript">
+
+<<< @/../examples/typescript/src/ui/ActivityIndicator/template.xml#example
+
+</Tab>
+<Tab flavor="angular">
+
+<<< @/../examples/angular/src/ui/ActivityIndicator/component.html#example
+
+</Tab>
+<Tab flavor="svelte">
+
+<<< @/../examples/svelte/app/components/ui/ActivityIndicator.svelte#example
+
+</Tab>
+<Tab flavor="react">
+
+<<< @/../examples/react/src/components/ui/activityindicator.tsx#example
+
+</Tab>
+<Tab flavor="solid">
+
+<<< @/../examples/solid/src/ui/activityindicator.tsx#example
+
+</Tab>
+</Tabs>
 
 ## Examples
 

diff --git a/content/ui/button.md b/content/ui/button.md
@@ -17,7 +17,12 @@ For more information about the available gestures, see [Gestures](/guide/gesture
 <img src="../assets/images/screenshots/android/Button.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Button/template.xml#example
+<<< @/../examples/typescript/src/ui/Button/template.xml#example
+<<< @/../examples/angular/src/ui/Button/component.html#example
+<<< @/../examples/react/src/components/ui/button.tsx#example
+<<< @/../examples/solid/src/ui/button.tsx#example
+<<< @/../examples/svelte/app/components/ui/Button.svelte#example
+<<< @/../examples/vue/src/ui/Button/component.vue#example
 
 ## Examples
 

diff --git a/content/ui/date-picker.md b/content/ui/date-picker.md
@@ -17,7 +17,12 @@ See also: [TimePicker](/ui/time-picker).
 <img src="../assets/images/screenshots/android/DatePicker.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/DatePicker/template.xml#example
+<<< @/../examples/typescript/src/ui/DatePicker/template.xml#example
+<<< @/../examples/angular/src/ui/DatePicker/component.html#example
+<<< @/../examples/react/src/components/ui/datepicker.tsx#example
+<<< @/../examples/solid/src/ui/datepicker.tsx#example
+<<< @/../examples/svelte/app/components/ui/DatePicker.svelte#example
+<<< @/../examples/vue/src/ui/DatePicker/component.vue#example
 
 ```xml
 <DatePicker

diff --git a/content/ui/dialogs.md b/content/ui/dialogs.md
@@ -45,7 +45,12 @@ See [DialogOptions](/api/interface/DialogOptions), [R.style](https://developer.a
 <img src="../assets/images/screenshots/android/Dialogs-Alert.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Dialogs/template.ts#example-alert
+<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-alert
+<<< @/../examples/angular/src/ui/Dialogs/component.html#example-alert
+<<< @/../examples/react/src/components/ui/dialogs.tsx#example-alert
+<<< @/../examples/solid/src/ui/dialogs.tsx#example-alert
+<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-alert
+<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-alert
 
 A dialog for alerting the user.
 
@@ -60,7 +65,12 @@ See [alert()](/api/#alert).
 <img src="../assets/images/screenshots/android/Dialogs-Action.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Dialogs/template.ts#example-action
+<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-action
+<<< @/../examples/angular/src/ui/Dialogs/component.html#example-action
+<<< @/../examples/react/src/components/ui/dialogs.tsx#example-action
+<<< @/../examples/solid/src/ui/dialogs.tsx#example-action
+<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-action
+<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-action
 
 A dialog for prompting the user to choose.
 
@@ -77,7 +87,12 @@ See [action()](/api/#action).
 <img src="../assets/images/screenshots/android/Dialogs-Confirm.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Dialogs/template.ts#example-confirm
+<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-confirm
+<<< @/../examples/angular/src/ui/Dialogs/component.html#example-confirm
+<<< @/../examples/react/src/components/ui/dialogs.tsx#example-confirm
+<<< @/../examples/solid/src/ui/dialogs.tsx#example-confirm
+<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-confirm
+<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-confirm
 
 A dialog for prompting the user to confirm.
 
@@ -92,7 +107,12 @@ See [confirm()](/api/#confirm).
 <img src="../assets/images/screenshots/android/Dialogs-Prompt.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Dialogs/template.ts#example-prompt
+<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-prompt
+<<< @/../examples/angular/src/ui/Dialogs/component.html#example-prompt
+<<< @/../examples/react/src/components/ui/dialogs.tsx#example-prompt
+<<< @/../examples/solid/src/ui/dialogs.tsx#example-prompt
+<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-prompt
+<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-prompt
 
 A dialog for prompting the user for input.
 
@@ -111,7 +131,12 @@ See [prompt()](/api/#prompt), [CoreTypes.AutocapitalizationType](/api/namespace/
 <img src="../assets/images/screenshots/android/Dialogs-Login.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Dialogs/template.ts#example-login
+<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-login
+<<< @/../examples/angular/src/ui/Dialogs/component.html#example-login
+<<< @/../examples/react/src/components/ui/dialogs.tsx#example-login
+<<< @/../examples/solid/src/ui/dialogs.tsx#example-login
+<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-login
+<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-login
 
 A dialog for prompting the user for credentials.
 

diff --git a/content/ui/html-view.md b/content/ui/html-view.md
@@ -22,8 +22,15 @@ See also: [WebView](/ui/web-view).
 <img src="../assets/images/screenshots/android/HtmlView.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/HtmlView/template.xml#example
-<<< @/../examples/src/ui/HtmlView/template.ts#example{xml}
+<<< @/../examples/typescript/src/ui/HtmlView/template.xml#example
+<<< @/../examples/typescript/src/ui/HtmlView/template.ts#example{xml}
+
+<<< @/../examples/angular/src/ui/HtmlView/component.html#example
+<<< @/../examples/angular/src/ui/HtmlView/component.ts#example{html}
+<<< @/../examples/react/src/components/ui/htmlview.tsx#example
+<<< @/../examples/solid/src/ui/htmlview.tsx#example
+<<< @/../examples/svelte/app/components/ui/HtmlView.svelte#example
+<<< @/../examples/vue/src/ui/HtmlView/component.vue#example
 
 ## Props
 

diff --git a/content/ui/image.md b/content/ui/image.md
@@ -16,7 +16,7 @@ When working with images, consider following [the best practices](/performance.h
 
 Working with many images can quickly become a memory hog, for improved image handling it's recommended to use an Image caching library. Here are a few plugins from our community:
 
-- [@triniwiz/image-cache-it](https://triniwiz.github.io/nativescript-plugins/api-reference/image-cache-it.html)
+- [@triniwiz/nativescript-image-cache-it](https://triniwiz.github.io/nativescript-plugins/api-reference/image-cache-it.html)
 - [@nativescript-community/ui-image](https://github.com/nativescript-community/ui-image)
 
 :::
@@ -28,7 +28,7 @@ Working with many images can quickly become a memory hog, for improved image han
 <img src="../assets/images/screenshots/android/Image.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Image/template.xml#example
+<<< @/../examples/typescript/src/ui/Image/template.xml#example
 
 ## Examples
 

diff --git a/content/ui/label.md b/content/ui/label.md
@@ -21,7 +21,13 @@ The NativeScript `<Label>` is not the same as the HTML `<Label>`.
 <img src="../assets/images/screenshots/android/Label.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/Label/template.xml#example
+<<< @/../examples/typescript/src/ui/Label/template.xml#example
+
+<<< @/../examples/angular/src/ui/Label/component.html#example
+<<< @/../examples/react/src/components/ui/label.tsx#example
+<<< @/../examples/solid/src/ui/label.tsx#example
+<<< @/../examples/svelte/app/components/ui/Label.svelte#example
+<<< @/../examples/vue/src/ui/Label/component.vue#example
 
 ## Examples
 

diff --git a/content/ui/list-picker.md b/content/ui/list-picker.md
@@ -15,8 +15,15 @@ contributors:
 <img src="../assets/images/screenshots/android/ListPicker.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/ListPicker/template.xml#example
-<<< @/../examples/src/ui/ListPicker/template.ts#example
+<<< @/../examples/typescript/src/ui/ListPicker/template.xml#example
+<<< @/../examples/typescript/src/ui/ListPicker/template.ts#example
+
+<<< @/../examples/angular/src/ui/ListPicker/component.html#example
+<<< @/../examples/angular/src/ui/ListPicker/component.ts#example
+<<< @/../examples/react/src/components/ui/label.tsx#example
+<<< @/../examples/solid/src/ui/label.tsx#example
+<<< @/../examples/svelte/app/components/ui/ListPicker.svelte#example
+<<< @/../examples/vue/src/ui/ListPicker/component.vue#example
 
 ## Props
 

diff --git a/content/ui/list-view.md b/content/ui/list-view.md
@@ -22,17 +22,24 @@ For additional features and improved performance in certain scenarios, consider
 <img src="../assets/images/screenshots/android/ListView.png"/>
 </DeviceFrame>
 
-<<< @/../examples/src/ui/ListView/template.xml#example
-<<< @/../examples/src/ui/ListView/template.ts#example
+<<< @/../examples/typescript/src/ui/ListView/template.xml#example
+<<< @/../examples/typescript/src/ui/ListView/template.ts#example
+
+<<< @/../examples/angular/src/ui/ListView/component.html#example
+<<< @/../examples/angular/src/ui/ListView/component.ts#example
+<<< @/../examples/react/src/components/ui/listview.tsx#example
+<<< @/../examples/solid/src/ui/listview.tsx#example
+<<< @/../examples/svelte/app/components/ui/ListView.svelte#example
+<<< @/../examples/vue/src/ui/ListView/component.vue#example
 
 ## Examples
 
 ### ListView with multiple itemTemplates
 
 Individual items can be rendered using a different template. For example, let's say our items can either be headings or items. In that case, we can define a template for them, and pass in an `itemTemplateSelector` function that will get called before rendering an item.
 
-<<< @/../examples/src/ui/ListView/multiple-templates.xml#example
-<<< @/../examples/src/ui/ListView/template.ts#itemTemplateSelector
+<<< @/../examples/typescript/src/ui/ListView/multiple-templates.xml#example
+<<< @/../examples/typescript/src/ui/ListView/template.ts#itemTemplateSelector
 
 ## Props