Skip to content

hmmhmmhm/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

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

  • alternative for sveltes css intensive transitions (svelte-native/transition)
  • Port grocery app
  • At least 1 emoji in readme
  • Tests 😳
  • Docs

Installation

npm install svelte-native
npm install svelte@beta
npm install svelte-loader

Setup svelte loader plugin in the webpack.config.js as per the (svelte-loader)[https://github.com/sveltejs/svelte-loader] documentation. eg:

{
    test: /\.(html|svelte)$/,
    exclude: /node_modules/,
    use: 'svelte-loader'
},

Usage

App.html

<page xmlns="tns">
    <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.html';

import { svelteNative } from 'svelte-native'

svelteNative(App, {msg: "Hi from launcher"});

see https://github.com/halfnelson/svelte-native-test-app for an example project

About

Svelte controlling native components via Nativescript

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • JavaScript 33.6%
  • TypeScript 33.0%
  • HTML 28.6%
  • CSS 4.7%
  • Other 0.1%