Skip to content

haliltaskit/svelte-native

 
 

Repository files navigation

Allows the use of Svelte (v3) within a NativeScript application. (Thanks to nativescript-vue for their dom implementation)

This is still alpha software, use at own risk, contributions welcome

See https://svelte-native.technology for docs and tutorials

todo in svelte-native

Features

Svelte-Native includes Svelte specific integrations such as

  • The ability to use svelte components to create native applications on top of NativeScript core
  • Svelte specific navigation and modals eg navigate({ page: MySvelteComponent })
  • Integration with svelte's transistions eg <label transition:fade="{duration: 2000}">
  • Integration with sveltes scoped styles

Todo

  • At least 1 emoji in readme
  • More Tests 😳

Installation

You can get started developing with this using the latest template app

$ npx degit halfnelson/svelte-native-template myapp

A fresh svelte-native app will be found in the myapp folder

Once installed, the build workflow is to use the tns build or tns run commands as normal.

remember to include --bundle on your tns commands so the svelte is compiled!

Usage

App.svelte

<page> <actionBar title="Svelte Native"></actionBar> <stackLayout> <label text={msg}></label> <button text="Change" on:tap="{toggle}"></button> </stackLayout> </page> <script> export let msg = 'Hello World!' let ab; const toggle = () => { msg = "Hi from svelte" } </script>

Main.ts

import App from './components/App.svelte'; import { svelteNative } from 'svelte-native' svelteNative(App, {msg: "Hi from launcher"});

About

Svelte controlling native components via Nativescript

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • HTML 33.8%
  • JavaScript 31.8%
  • TypeScript 25.2%
  • CSS 9.1%
  • Other 0.1%