https://github.com/halfnelson/svelte-native

Svelte controlling native components via Nativescript
https://github.com/halfnelson/svelte-native

Last synced: 28 days ago
JSON representation

Svelte controlling native components via Nativescript

• Host: GitHub
• URL: https://github.com/halfnelson/svelte-native
• Owner: halfnelson
• License: mit
• Created: 2019-01-31T14:19:35.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-11T13:59:01.000Z (7 months ago)
• Last Synced: 2024-04-13T19:05:38.315Z (7 months ago)
• Language: TypeScript
• Size: 8.37 MB
• Stars: 1,702
• Watchers: 27
• Forks: 75
• Open Issues: 100
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - svelte-native - Svelte controlling native components via Nativescript (JavaScript)
• awesome-list - svelte-native

README

        
# Svelte Native

Create Mobile applications using native widgets via [Svelte](https://github.com/sveltejs/svelte) and [NativeScript](https://github.com/nativescript/nativescript).

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

![todo in svelte-native](https://raw.githubusercontent.com/halfnelson/svelte-native/master/nativescript-svelte-todo.gif)

## 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 ``

 * Integration with sveltes scoped styles

 * Complete coverage of the Nativescript core UI modules

 * Uses unmodified Svelte and Nativescript modules

## Work In Progress

While Svelte Native is feature complete, there are some items outstanding to bring it to the level of other Nativescript library integrations

 - [x] At least 1 emoji in readme.md :+1:

 - [ ] More Tests 😳 [#54](https://github.com/halfnelson/svelte-native/issues/54)

 

## Installation

You can get started developing with this using the latest template

```bash

$ npm install -g nativescript

$ tns create myapp --template @nativescript/template-blank-svelte

```

A fresh Svelte Native app will be found in the `myapp` folder

Once installed use the `tns preview`, `tns build` or `tns run` commands as for a normal NativeScript application. 

## Usage

App.svelte

```html

    

    

        

        

    

  export let msg = 'Hello World!'

  const toggle = () => {

      msg = "Hi from svelte"

  }

```

Main.ts

```js

import App from './components/App.svelte';

import { svelteNative } from 'svelte-native'

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

```

## Examples

### Svelte Native HackerNews

Simple HackerNews client in Svelte Native.

See https://github.com/halfnelson/svelte-native-hackernews for the repo.

![HackerNews Example Image](https://raw.githubusercontent.com/halfnelson/svelte-native-hackernews/master/nativescript-svelte-hn.gif)

### Svelte Native Grocery

Grocery app example in Svelte Native.

See https://github.com/halfnelson/svelte-native-grocery for the repo.

![Grocery Example Image](https://raw.githubusercontent.com/halfnelson/svelte-native-grocery/master/nativescript-svelte-grocery.gif)

### Svelte Native Realworld

Realworld implementation app in Svelte Native.

See https://github.com/halfnelson/svelte-native-realworld for the repo.

![Realworld Example Image](https://raw.githubusercontent.com/halfnelson/svelte-native-realworld/master/nativescript-svelte-realworld.gif)

## Credits

The DOM implementation is based on the one from Nativescript-Vue. Thanks!

The API Docs were ported from the Nativescript-Vue Too

The Site Design is from SvelteJS