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
Compatible with Meteor 1.8.2 and newer.
To use meteor-svelte, run the following commands:
$ meteor add zodern:melte
$ meteor npm install svelte
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:
<script>
const Todos = new Mongo.Collection('todos');
let sortDirection = 1;
let subReady = false;
// Tracker will unsubscribe when the Svelte component is destroyed
$m: {
let sub = Meteor.subscribe('todos');
subReady = sub.ready();
}
// This will rerun whenever the documents are updated or sortDirection is changed
$m: todos = Todos.find({}, { sort: { createdAt: sortDirection}}).fetch()
// You can still use normal reactive statements
$: completedCount = todos.filter(todo => todo.completed).length;
</script>
Sort by:
<select bind:value="{sortDirection}">
<option value="-1">Oldest First</option>
<option value="1">Newest First</option>
</select>
{#if !subReady}
<p>Loading...</p>
{/if}
<ul>
{#each todos as todo}
<li>{todo.name} - {todo.createdAt}</li>
{/each}
</ul>
<p>{completedCount} completed</p>Compiler options can be specified with a "svelte:compiler" property in package.json. For example:
{
...
"svelte:compiler": {
"extensions": ["svelte", "html"],
"hydratable": true,
"css": false
}
}
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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent