Halfnelson Thu Sep 19 2019

Hot Module Reloading

Trying out experimental HMR

An awesome member of the Svelte community Rixo has implemented preliminary support for hot module reloading in Svelte. This is a quick guide on how to set it up in your Svelte Native project

Start with a Svelte Native Project

Use an existing one or start a new one by following the Getting Started Guide

Change svelte-loader to use Rixo's Fork

Edit package.json and replace

    "svelte-loader": "github:halfnelson/svelte-loader#fix-virtual-purge"

with

    "svelte-loader": "github:rixo/svelte-loader#hmr"

Enable the hmr option in webpack

Edit webpack.config.js and replace

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

with

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

Take it for a test toast

That should be it. Fire up your app with

tns run android

and make a change and watch it update.