In case you haven’t heard about Svelte: it’s a new UI library that compiles components consisting of HTML, CSS, and JavaScript to small JavaScript modules that don’t need a runtime.
You can now use Svelte in Meteor with meteor-svelte!
To use it in a new Meteor app, run meteor add svelte:compiler and meteor remove blaze-html-templates. The build plugin compiles Svelte components (files with .html extension) to JavaScript modules that can be imported anywhere in your app.
Here is a simple example of how you would write a component that retrieves data from Minimongo and displays it (alternatively, you can use the svelte:tracker package):
<!--PersonComponent.html-->
<div>
{{#if person}}
{{person.firstName}} lives in {{person.city}}
{{/if}}
</div>
<script>
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
// Document structure:
// {
// _id: …,
// firstName: …,
// city: …
// }
import Persons from './persons.js';
export default {
onrender() {
this.computation = Tracker.autorun(() => {
Meteor.subscribe('persons');
this.set({ person: Persons.findOne() });
});
},
onteardown() {
this.computation.stop();
}
};
</script>
Render the component into the DOM like this:
import PersonComponent from './PersonComponent.html';
Meteor.startup(() => {
const component = new PersonComponent({
target: document.querySelector('#svelte-root');
});
});
