feat: Svelte 5

demo/app/App.svelte

@@ -1,48 +1,26 @@
-<radSideDrawer bind:this={drawer}>
-    <radSideDrawer.drawerContent>
-        <gridLayout rows="auto, *" >
-            <label row="0" padding="10" class="h2" horizontalAlignment="left">Examples</label>
-            <label row="0" class="fas h2" text="&#xf00d;" padding="10" horizontalAlignment="right" on:tap={() => drawer.closeDrawer()} />
-            <scrollView row="1" >
-                <stackLayout>
-                    <label text="ListView" class:current={$current_page == ListViewPage} padding="10" on:tap="{() => gotoPage(ListViewPage)}" />
-                     <label text="Text Nodes" class:current={$current_page == TextNodePage} padding="10" on:tap="{() => gotoPage(TextNodePage)}" />
-                     <label text="SegmentedBar" class:current={$current_page == SegmentedBarPage} padding="10" on:tap="{() => gotoPage(SegmentedBarPage)}" />
-                     <label text="Formatted String" class:current={$current_page == FormattedStringPage} padding="10" on:tap="{() => gotoPage(FormattedStringPage)}" />
-                     <label text="Transitions" class:current={$current_page == TransitionsPage} padding="10" on:tap="{() => gotoPage(TransitionsPage)}" />
-                </stackLayout>
-            </scrollView>
-        </gridLayout>
-    </radSideDrawer.drawerContent>
-    <radSideDrawer.mainContent>
-        <frame id="navframe" defaultPage={ListViewPage}></frame>
-    </radSideDrawer.mainContent>
-</radSideDrawer>
+<page>
+    <actionBar title="Svelte 5 + NativeScript" class="bg-purple-800 text-white" />
+    <tabView class="bg-white" selectedIndex={selectedTab} onselectedIndexChange={(e) => selectedTab = e.value}>
+        <tabViewItem title="Reactivity" iconSource="sys://figure.jumprope.circle.fill" class="text-sm">
+            <ReactivityPage />
+        </tabViewItem>
+        <tabViewItem title="Stores" iconSource="sys://storefront.fill" class="text-sm">
+            <StoresPage />
+        </tabViewItem>
+        <tabViewItem title="Controls" iconSource="sys://gamecontroller.fill"class="text-sm">
+            <ControlsPage />
+        </tabViewItem>
+        <tabViewItem title="About" iconSource="sys://info.circle.fill"class="text-sm">
+            <AboutPage />
+        </tabViewItem>
+    </tabView>
+</page>
 
 <script>
-    import { onMount } from 'svelte'
-    import * as nav from './Nav'
-    import ListViewPage from './pages/ListViewPage.svelte'
-    import TextNodePage from './pages/TextNodePage.svelte'
-    import SegmentedBarPage from './pages/SegmentedBarPage.svelte'
-    import FormattedStringPage from './pages/FormattedStringPage.svelte'
-    import TransitionsPage from './pages/TransitionsPage.svelte'
+    import ReactivityPage from './pages/ReactivityPage.svelte'
+    import StoresPage from './pages/StoresPage.svelte'
+    import ControlsPage from './pages/ControlsPage.svelte'
+    import AboutPage from './pages/AboutPage.svelte'
 
-    function gotoPage(page) {
-        drawer.closeDrawer();
-        nav.goto(page);
-    }
-
-    let drawer;
-    let current_page = nav.current_page
-
-    onMount(() => {
-        nav.init("navframe", drawer, ListViewPage)
-    })
+    let selectedTab = 0;
 </script>
-
-<style>
-    .current {
-        font-weight: bold;
-    }
-</style>

demo/app/app.css

@@ -1,16 +1,20 @@
-/*
-In NativeScript, the app.css file is where you place CSS rules that
-you would like to apply to your entire application. Check out
-http://docs.nativescript.org/ui/styling for a full list of the CSS
-selectors and properties you can use to style UI components.
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-/*
-In many cases you may want to use the NativeScript core theme instead
-of writing your own CSS rules. For a full list of class names in the theme
-refer to http://docs.nativescript.org/ui/theme. 
-The imported CSS rules must precede all other types of rules.
-*/
-@import '@nativescript/theme/css/core.css';
-@import '@nativescript/theme/css/default.css';
-@import './font-awesome.css';
+/* https://fontawesome.com/icons?d=gallery&m=free */
 
+.far {
+    font-family: "Font Awesome 5 Free", "fa-regular-400";
+    font-weight: 400;
+}
+
+.fas {
+    font-family: "Font Awesome 5 Free", "fa-solid-900";
+    font-weight: 900;
+}
+
+.fab {
+    font-family: "Font Awesome 5 Brands", "fa-brands-400";
+    font-weight: 400;
+}

demo/app/app.ts

@@ -1,11 +1,4 @@
 import { svelteNativeNoFrame } from "@nativescript-community/svelte-native";
-import RadSideDrawerElement from "@nativescript-community/svelte-native-nativescript-ui/sidedrawer"
-
-RadSideDrawerElement.register();
-
-//import * as trace from "@nativescript/core/trace"
-//trace.enable();
-//trace.addCategories(DomTraceCategory);
-
 import App from "./App.svelte";
-svelteNativeNoFrame(App as typeof SvelteComponent, {});
+
+svelteNativeNoFrame(App, {});

demo/app/pages/AboutPage.svelte

@@ -0,0 +1,65 @@
+<scrollView>
+    <stackLayout class="p-6">
+        <!-- Hero -->
+        <stackLayout class="bg-purple-800 rounded-2xl p-6 mb-6">
+            <label text="Svelte 5" class="text-4xl font-bold text-white text-center" />
+            <label text="+" class="text-2xl text-purple-300 text-center" />
+            <label text="NativeScript" class="text-4xl font-bold text-white text-center" />
+        </stackLayout>
+
+        <!-- Version info -->
+        <label text="Technology" class="text-xl font-bold text-purple-800 mb-2" />
+        <stackLayout class="bg-gray-100 rounded-xl p-4 mb-6">
+            <gridLayout columns="*, auto" class="mb-3">
+                <label col="0" text="Svelte" class="text-base text-gray-600" />
+                <label col="1" text="5 (Custom Renderer API)" class="text-base font-bold text-purple-700" />
+            </gridLayout>
+            <gridLayout columns="*, auto" class="mb-3">
+                <label col="0" text="NativeScript" class="text-base text-gray-600" />
+                <label col="1" text="9.x" class="text-base font-bold text-purple-700" />
+            </gridLayout>
+            <gridLayout columns="*, auto" class="mb-3">
+                <label col="0" text="Styling" class="text-base text-gray-600" />
+                <label col="1" text="Tailwind CSS" class="text-base font-bold text-purple-700" />
+            </gridLayout>
+            <gridLayout columns="*, auto">
+                <label col="0" text="Platform" class="text-base text-gray-600" />
+                <label col="1" text={platform} class="text-base font-bold text-purple-700" />
+            </gridLayout>
+        </stackLayout>
+
+        <!-- Features -->
+        <label text="What's New" class="text-xl font-bold text-purple-800 mb-2" />
+        <stackLayout class="bg-gray-100 rounded-xl p-4 mb-6">
+            {#each features as feature}
+                <gridLayout columns="30, *" class="mb-3">
+                    <label col="0" text={feature.icon} class="fas text-purple-600 text-base mr-3" />
+                    <stackLayout col="1">
+                        <label text={feature.title} class="text-base font-bold text-gray-800" />
+                        <label text={feature.desc} class="text-sm text-gray-500 leading-[3]" textWrap="true" />
+                    </stackLayout>
+                </gridLayout>
+            {/each}
+        </stackLayout>
+
+        <!-- Tap counter -->
+        <stackLayout class="bg-purple-100 rounded-xl p-4 mb-2">
+            <label text={'Tapped ' + tapCount + ' times'} class="text-center text-base text-purple-700 mb-2" />
+            <button text="Tap Me!" class="bg-purple-700 text-white rounded-lg p-3 text-base font-bold" ontap={() => tapCount++} />
+        </stackLayout>
+    </stackLayout>
+</scrollView>
+
+<script>
+    import { isIOS, isAndroid } from '@nativescript/core/platform';
+
+    let tapCount = 0;
+    const platform = isIOS ? 'iOS' : isAndroid ? 'Android' : 'Unknown';
+
+    const features = [
+        { icon: '\uf1b2', title: 'Custom Renderer API', desc: "Render any platform" },
+        { icon: '\uf0e7', title: 'Reactive by Default', desc: 'Fine-grained reactivity with Svelte stores' },
+        { icon: '\uf3fd', title: 'Truly Native', desc: 'Real native UI components, not web views' },
+        { icon: '\uf53f', title: 'Tailwind CSS', desc: 'Utility-first styling for native views' },
+    ];
+</script>

demo/app/pages/ControlsPage.svelte

@@ -0,0 +1,58 @@
+<scrollView>
+    <stackLayout class="p-6">
+        <label text="Native Controls" class="text-2xl font-bold text-purple-800 mb-4" />
+
+        <!-- Slider -->
+        <stackLayout class="bg-gray-100 rounded-xl p-4 mb-6">
+            <label text="Slider" class="text-lg font-bold text-purple-700 mb-1" />
+            <slider value={sliderValue} minValue="0" maxValue="100" class="text-purple-700" onvalueChange={(e) => sliderValue = Math.round(e.value)} />
+            <label class="text-center text-base text-gray-600">
+                <formattedString>
+                    <span text="Value: " />
+                    <span text={sliderValue.toString()} class="font-bold text-purple-700" />
+                </formattedString>
+            </label>
+            <progress value={sliderValue} maxValue="100" class="text-purple-700 mt-2" />
+        </stackLayout>
+
+        <!-- Switch -->
+        <stackLayout class="bg-gray-100 rounded-xl p-4 mb-6">
+            <label text="Switch" class="text-lg font-bold text-purple-700 mb-2" />
+            <gridLayout columns="*, auto" class="mb-2">
+                <label col="0" text="Enable notifications" class="text-base text-gray-700" />
+                <switch col="1" class="text-purple-700" oncheckedChange={(e) => notifications = e.object.checked} />
+            </gridLayout>
+            <gridLayout columns="*, auto">
+                <label col="0" text="Auto-save" class="text-base text-gray-700" />
+                <switch col="1" class="text-purple-700" oncheckedChange={(e) => autoSave = e.object.checked} />
+            </gridLayout>
+        </stackLayout>
+
+        <!-- Status summary -->
+        <stackLayout class="bg-gray-100 rounded-xl p-4 mb-6">
+            <label text="Settings Summary" class="text-lg font-bold text-purple-700 mb-2" />
+            <label text={'Notifications: ' + (notifications ? 'On' : 'Off')} class={'text-base mb-1 ' + (notifications ? 'text-green-700' : 'text-red-500')} />
+
+            <label text={'Auto-Save: ' + (autoSave ? 'On' : 'Off')} class={'text-base ' + (autoSave ? 'text-green-700' : 'text-red-500')} />
+        </stackLayout>
+
+        <!-- Segmented bar -->
+        <stackLayout class="bg-gray-100 rounded-xl p-4 mb-2">
+            <label text="Segmented Bar" class="text-lg font-bold text-purple-700 mb-2" />
+            <segmentedBar selectedIndex={selectedPriority} onselectedIndexChange={(e) => selectedPriority = e.value}>
+                <segmentedBarItem title="Low" />
+                <segmentedBarItem title="Medium" />
+                <segmentedBarItem title="High" />
+            </segmentedBar>
+            <label text={'Priority: ' + priorities[selectedPriority]} class="text-base text-center text-gray-700 mt-3 font-semibold" />
+        </stackLayout>
+    </stackLayout>
+</scrollView>
+
+<script>
+    let sliderValue = 50;
+    let notifications = false;
+    let autoSave = false;
+    let selectedPriority = 1;
+    const priorities = ['Low', 'Medium', 'High'];
+</script>