zodern:melte
Build cybernetically enhanced web apps with Meteor and Svelte.
Based on meteor-svelte with these added features:
- Tracker statements
- Support for hot module replacement (HMR) to update modified components without requiring a full page reload. Requires your app to use Meteor 2 and the hot-module-replacement package.
- Handles syntax errors without crashing
- Supports Typescript preprocessing for script blocks
Compatible with Meteor 1.8.2 and newer.
Installation
To use meteor-svelte
, run the following commands:
meteor add zodern:melte meteor npm install svelte
The svelte
npm package uses newer JS syntax. To fix any errors with the cordova or legacy client, update your package.json file to tell Meteor to recompile it:
1{ 2 ... 3 4 "meteor": { 5 ... 6 7 "nodeModules": { 8 "recompile": { 9 "svelte": ["legacy"] 10 } 11 } 12 } 13}
Tracker Statements
In addition to the $ reactive statements Svelte normally supports, this adds $m
tracker statements. They behave the same as normal reactive statements, but also rerun whenever any Tracker dependencies they use are invalidated. Behind the scenes, it uses Tracker.autorun
.
Example:
1<script> 2const Todos = new Mongo.Collection('todos'); 3 4let sortDirection = 1; 5let subReady = false; 6 7// Tracker will unsubscribe when the Svelte component is destroyed 8$m: { 9 let sub = Meteor.subscribe('todos'); 10 subReady = sub.ready(); 11} 12 13// This will rerun whenever the documents are updated or sortDirection is changed 14$m: todos = Todos.find({}, { sort: { createdAt: sortDirection}}).fetch() 15 16// You can still use normal reactive statements 17$: completedCount = todos.filter(todo => todo.completed).length; 18</script> 19 20Sort by: 21<select bind:value="{sortDirection}"> 22 <option value="-1">Oldest First</option> 23 <option value="1">Newest First</option> 24</select> 25 26{#if !subReady} 27 <p>Loading...</p> 28{/if} 29 30<ul> 31 {#each todos as todo} 32 <li>{todo.name} - {todo.createdAt}</li> 33 {/each} 34</ul> 35 36<p>{completedCount} completed</p>
Typescript
To use typescript with svelte files:
- Add the typescript npm package to your app with
meteor npm i --save-dev typescript
- Add a
tsconfig.json
file. An example file can be found in the Meteor docs - In your svelte files, set the
lang="ts"
attribute for scripts:
1<script lang="ts"> 2 let count = 0; 3 4 let doubled: number; 5 $: doubled = count * 2; 6</script> 7 8<button on:click="{() => count += 1}">Click me</button> 9<p>You've clicked the button {count} times (doubled: {doubled}).</p>
Melte does not check the types when compiling Svelte files. To check types, you can use svelte-check
or eslint-plugin-svelte3
.
Learn more about using Typescript and Svelte from Svelte's docs.
If you encounter the error The "path" argument must be of type string. Received undefined
, this is usually from Typescript not being able to find the tsconfig.json
file.
Options
Compiler options can be specified with a "svelte:compiler"
property in package.json
. For example:
1{ 2 ... 3 "svelte:compiler": { 4 "extensions": ["svelte", "html"], 5 "hydratable": true, 6 "css": false 7 } 8}
extensions
(default: ["svelte"]
)
An array of file extensions to be recognized by the package.
Note that HTML files are not compiled with the Svelte compiler if they contain top-level <head>
or <body>
elements.
Instead, the contents of the elements are added to the respective sections in the HTML output generated by Meteor (similar to what the static-html
package does).
hydratable
(default: false
)
By default, Svelte removes server-rendered static HTML when the application is loaded on the client and replaces it with a client-rendered version.
If you want to reuse (hydrate) server-rendered HTML, set the hydratable
option to true
(which generates additional code for client components) and use the hydrate
option when instantiating your root component.
css
(default: true
)
Svelte can extract styles for server-side rendering.
If you want to render CSS on the server, you might want to set the css
option to false
so that client-rendered components don't insert CSS into the DOM.
Server-Side Rendering
meteor-svelte
supports server-side rendering with minimal configuration.
If you import Svelte components on the server, they are automatically built for server-side rendering.
See the Svelte API docs, the example app, and the hydratable
and css
options above for more details.