From 1230ebeb43535ea535e52719018d8e9cdf0e910e Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Thu, 9 Apr 2026 13:26:50 -0700 Subject: [PATCH 1/9] feat: Svelte 5 --- demo/app/App.svelte | 66 +- demo/app/Header.svelte | 14 - demo/app/Nav.ts | 30 - demo/app/app.css | 32 +- demo/app/app.ts | 11 +- demo/app/font-awesome.css | 16 - demo/app/pages/AboutPage.svelte | 66 + demo/app/pages/ControlsPage.svelte | 58 + demo/app/pages/FormattedStringPage.svelte | 24 - demo/app/pages/ListViewPage.svelte | 99 - demo/app/pages/ReactivityPage.svelte | 65 + demo/app/pages/SegmentedBarPage.svelte | 19 - demo/app/pages/StoresPage.svelte | 85 + demo/app/pages/TextNodePage.svelte | 18 - demo/app/pages/TransitionsPage.svelte | 21 - demo/package-lock.json | 18326 ++++++++++---------- demo/package.json | 24 +- demo/svelte.config.js | 18 +- demo/tailwind.config.js | 13 + demo/tsconfig.json | 9 +- package-lock.json | 3607 +--- package.json | 14 +- rollup.config.mjs | 38 + src/components/AsComponent.svelte | 14 +- src/components/SlotComponent.svelte | 5 +- src/components/Template.svelte | 4 +- src/components/android.svelte | 2 +- src/components/ios.svelte | 2 +- src/dom/index.ts | 2 +- src/dom/native/FrameElement.ts | 3 +- src/dom/native/ListViewElement.ts | 24 +- src/dom/navigation.ts | 11 +- src/dom/renderer.ts | 129 + src/index.ts | 35 +- src/svelte-renderer.d.ts | 10 + src/transitions/easing.ts | 2 +- src/transitions/index.ts | 6 +- yarn.lock | 1926 -- 38 files changed, 10204 insertions(+), 14644 deletions(-) delete mode 100644 demo/app/Header.svelte delete mode 100644 demo/app/Nav.ts delete mode 100644 demo/app/font-awesome.css create mode 100644 demo/app/pages/AboutPage.svelte create mode 100644 demo/app/pages/ControlsPage.svelte delete mode 100644 demo/app/pages/FormattedStringPage.svelte delete mode 100644 demo/app/pages/ListViewPage.svelte create mode 100644 demo/app/pages/ReactivityPage.svelte delete mode 100644 demo/app/pages/SegmentedBarPage.svelte create mode 100644 demo/app/pages/StoresPage.svelte delete mode 100644 demo/app/pages/TextNodePage.svelte delete mode 100644 demo/app/pages/TransitionsPage.svelte create mode 100644 demo/tailwind.config.js create mode 100644 src/dom/renderer.ts create mode 100644 src/svelte-renderer.d.ts delete mode 100644 yarn.lock diff --git a/demo/app/App.svelte b/demo/app/App.svelte index 38ede645..0accefdf 100644 --- a/demo/app/App.svelte +++ b/demo/app/App.svelte @@ -1,48 +1,26 @@ - - - - - - - - - - + + + selectedTab = e.value}> + + + + + + + + + + + + + + - - diff --git a/demo/app/Header.svelte b/demo/app/Header.svelte deleted file mode 100644 index 54525197..00000000 --- a/demo/app/Header.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - {#if isAndroid} - - {:else} - - {/if} - - - - \ No newline at end of file diff --git a/demo/app/Nav.ts b/demo/app/Nav.ts deleted file mode 100644 index 373a4543..00000000 --- a/demo/app/Nav.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { navigate } from '@nativescript-community/svelte-native' -import { writable } from 'svelte/store' -import RadSideDrawerElement from '@nativescript-community/svelte-native-nativescript-ui/sidedrawer'; -import { Trace } from '@nativescript/core' - - -export let current_page = writable(null); -let nav_frame; -let drawer: RadSideDrawerElement; - -export function init(navFrame, navDrawer: RadSideDrawerElement, startPage) { - nav_frame = navFrame; - drawer = navDrawer; - current_page.set(startPage) -} - -export function goto(view, props) { - current_page.set(view); - navigate({ - page: view, - props: props, - clearHistory: true, - frame: nav_frame - }); -} - -export function toggleDrawer() { - drawer.toggleDrawerState(); -} - diff --git a/demo/app/app.css b/demo/app/app.css index 8c42e4dc..664d5a27 100644 --- a/demo/app/app.css +++ b/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; +} diff --git a/demo/app/app.ts b/demo/app/app.ts index baa6ab8e..5238aa7f 100644 --- a/demo/app/app.ts +++ b/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, {}); diff --git a/demo/app/font-awesome.css b/demo/app/font-awesome.css deleted file mode 100644 index 526c25b2..00000000 --- a/demo/app/font-awesome.css +++ /dev/null @@ -1,16 +0,0 @@ -/* 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; -} diff --git a/demo/app/pages/AboutPage.svelte b/demo/app/pages/AboutPage.svelte new file mode 100644 index 00000000..7914f2ad --- /dev/null +++ b/demo/app/pages/AboutPage.svelte @@ -0,0 +1,66 @@ + + + + + + + +