Skip to content
Svelte controlling native components via Nativescript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo fix insert with anchor ogic May 22, 2019
docs_src remove unwanted old repl files May 22, 2019
scripts Add Changelog Apr 23, 2019
src fix insert with anchor ogic May 22, 2019
types imported components Feb 7, 2019
.gitignore restore repl, add nativescript sdk link. WIP Mar 16, 2019
CHANGELOG.md v0.3.3 May 22, 2019
LICENSE fix license Jan 31, 2019
Readme.md Update Readme.md Mar 15, 2019
nativescript-svelte-todo.gif add example image Feb 12, 2019
package-lock.json v0.3.3 May 22, 2019
package.json v0.3.3 May 22, 2019
rollup.config.js Remove deprecated components Mar 24, 2019
tsconfig.json restructure ready for components Feb 6, 2019

Readme.md

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"});
You can’t perform that action at this time.