OriginalSin/map-mobile

Svelte mobile

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