Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

r00t3g:melte

v1.4.8•Published 3 years ago

r00t3g:melte

NOTE: This plugin is based on zodern:melte, implements Typescript and SCSS preprocessing for Svelte components, and exists only until the changes are stabilized and accepted by @zodern. For now this package is made for use within one certain project and yet is not production tested and is to be used at own risk. Please read through this README thoroughly to be aware of certain limitations and drawbacks introduced by this plugin! It is highly recommended to use the original plugin from https://github.com/zodern/melte for, now unless you are 100% sure what you are doing

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
  • Supports SCSS preprocessing and global attribute for style blocks

Tested ONLY with Meteor 2.1

Changelog

  • 2021-06-25: v.1.4.7 Multiple improvements:
    • Fix relative import paths in SCSS
    • Allow multiple <style global /> tags in Svelte components
  • 2021-04-16: v.1.4.6 Meteor-compatible paths support in SCSS imports
  • 2021-04-02: v.1.4.5 Upstream sync, reactive labels imports fix (#1)
  • 2021-03-16: v.1.4.4 Basic TS and CSS preprocessing support added

Installation

To use r00t3g:melte, run the following commands:

$ meteor add r00t3g:melte
$ meteor npm install svelte svelte-preprocess

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>

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.

Preprocessing

Scripts

Currently, only Typescript preprocessing is supported for script blocks with lang="ts" attribute set. In order to get preprocessing working, additional NPM-packages need to be installed:

$ meteor npm i --save-dev svelte-preprocess typescript

It is highly recommended to use TS version, supported by the Meteor release you are using.

Styles

SCSS preprocessing is available for style blocks and is enabled for components by adding lang="scss" attribute. Just as with scripts, an installation of the toolkit is required to use SCSS reprocessing:

$ meteor npm i --save-dev svelte-preprocess node-sass

It is highly recommended to use node-sass (libsass) version of the SCSS compiler, however, Dart version should also work well.

Style limitations:

  • In accordance with svlete-preprocess documentation, global styles are also supported, but ONLY by adding the

global attribute and NOT by the :global rule.

  • SCSS transformer does not use Meteor resolver which makes it impossible to imports styles from Atmosphere packages.

  • For the same reason, all imports paths must be specified relatively to application root, e.g.:

@import '/client/style/theme.scss';

or

@import '/imports/style/variables.scss';
  • To import files from node_modules, the import path must be prefixed with a tilde (~), e.g.:
@import '~/my-awesome-library/lib/scss/library.scss';

or

@import '~/material-design-icons/iconfont/material-icons.css';

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.

Examples