Build cybernetically enhanced web apps with Meteor and Svelte.
Based on meteor-svelte with these added features:
- 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
globalattribute for style blocks
Tested ONLY with Meteor 2.1
WARNING!
Since 2022-01-14 v. 1.4.10 this plugin no longer supports $m reactive statements and PostCSS since they are not needed in the maintainer's projects! However, this increases the overall build performance and in case you do not use Meteor reactivity in Svelte components, you may benefit from using this version
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
- 2022-01-14: 1.4.10 [BREAKING] Properly handle css compiler option, $m and PostCSS support dropped
- 2021-10-13: 1.4.9 Add options hash for babel cache suffix, add support for dev and cssHash compilerOptions
- 2021-09-26: 1.4.8 Properly handle babel compilation errors
- 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
To use r00t3g:melte, run the following commands:
$ meteor add r00t3g:melte
$ meteor npm install svelte svelte-preprocess 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.
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 typescriptIt is highly recommended to use TS version, supported by the Meteor release you are using.
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-sassIt is highly recommended to use node-sass (libsass) version of the SCSS compiler, however, Dart version should also work well.
-
In accordance with svlete-preprocess documentation, global styles are also supported, but ONLY by adding the
globalattribute and NOT by the:globalrule. -
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';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.