Skip to content
Svelte Native starter template
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.
app Updated to latest template May 16, 2019
.editorconfig
.gitignore Updated to latest template May 16, 2019
LICENSE
Readme.md Updated to latest template May 16, 2019
nsconfig.json Updated to latest template May 16, 2019
package-lock.json latest libs May 22, 2019
package.json latest libs May 22, 2019
tsconfig.json Create template using tns command Feb 24, 2019
tsconfig.tns.json Create template using tns command Feb 24, 2019
tsfmt.json Updated to latest template May 16, 2019
webpack.config.js add .mjs support May 21, 2019

Readme.md

This is a barebones svelte-native project template. It was created directly from a nativescript core project template. It provides an easy way to get started with a svelte native project.

Usage

You can get started with this using degit

$ degit halfnelson/svelte-native-template myapp

your svelte-native app will be found in the myapp folder

Recreating From Scratch

This was created using:

Create ns core app

    tns create svelte-ns-testapp --appid sntest.halfnelson.github.io --ts

Install svelte, svelte-native, svelte-loader

    $ npm install --save-dev svelte
    $ npm install svelte-native
    $ npm install --save-dev "halfnelson/svelte-loader#fix-virtual-purge"
    $ npm install --save-dev svelte-native-preprocessor

import SvelteNativePreprocessor in webpack.config.js

const svelteNativePreprocessor = require("svelte-native-preprocessor");

Append svelte-loader to end module rules after ts

  {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: [
            { 
                loader: 'svelte-loader',
                options: {
                    preprocess: svelteNativePreprocessor()
                }
            }
        ]
    }

Remove nativescript files from app except for package.json and app.ts and app.css

make the following changes to the app folder:

add svelte-components.d.ts:

declare module "*.svelte" {
    export default SvelteComponent;
}

change app.ts to:

import { svelteNative } from "svelte-native";
import App from  "./App.svelte";
svelteNative(App, {});

add App.svelte:

<page xmlns="tns" class="page">
    <actionBar title="My App" icon="" class="action-bar">
    </actionBar>
    <stackLayout class="p-20">
        <label text="Tap the button" class="h1 text-center"/>
        <button text="TAP" on:tap="{ onTap }" class="btn btn-primary btn-active"/>
        <label text="{ message }" class="h2 text-center" textWrap="true"/>
    </stackLayout>
</page>

<script>
    let counter = 42;
    let message;
    $: message = (counter <= 0) 
                    ? "Hoorraaay! You unlocked the Svelte-Native clicker achievement!"
                    : `${counter} taps left`
    
    const onTap = () => counter--;
</script>

Run the app with an ensure it worked

tns run android
You can’t perform that action at this time.