├── .npm └── plugin │ └── melte-compiler │ ├── .gitignore │ ├── README │ └── npm-shrinkwrap.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── banner.png ├── hmr-runtime.js ├── package.js ├── plugin.js ├── proxy-adapter.js └── tracker.js /.npm/plugin/melte-compiler/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.npm/plugin/melte-compiler/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /.npm/plugin/melte-compiler/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 4, 3 | "dependencies": { 4 | "@babel/runtime": { 5 | "version": "7.4.3", 6 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz", 7 | "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==" 8 | }, 9 | "regenerator-runtime": { 10 | "version": "0.13.11", 11 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", 12 | "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.7.3, 1.7.4 - March 19, 2025 2 | 3 | - Support typescript 5 4 | 5 | ## 1.7.1, 1.7.2 - March 20, 2024 6 | 7 | - Support Meteor 3 8 | - Update zodern:melte-compiler to 1.4.1 for Meteor 3 support 9 | 10 | ## 1.7.0 - January 25, 2023 11 | 12 | - Update `zodern:melte-compiler`: 13 | - Fix typescript sometimes removing imports for components 14 | - Partial support for source maps for typescript 15 | - Fix crash when error compiling with babel 16 | 17 | ## 1.6.1 - July 12, 2022 18 | 19 | - Update `zodern:melte-compiler`: 20 | - Delay importing svelte until it is needed. This fixes errors from not finding svelte when publishing packages that depend on `zodern:melte` 21 | 22 | ## 1.6.0 - May 2, 2022 23 | 24 | - Update `zodern:melte-compiler`: 25 | - Support typescript in scripts with context="module" 26 | 27 | ## 1.5.2 - February 23, 2022 28 | 29 | - Update `zodern:melte-compiler`: 30 | - Fix crash when using old version of Svelte 3 31 | 32 | ## 1.5.1 - February 12, 2022 33 | 34 | - Update `zodern:melte-compiler`: 35 | - Fix compiling tracker statements for SSR 36 | 37 | ## 1.5.0 - February 12, 2022 38 | 39 | - Update `zodern:melte-compiler`: 40 | - Fix crash when file has a syntax error 41 | - Fix source maps. If the svelte file uses typescript, there are still some issues with source maps 42 | 43 | ## 1.4.5 - December 27, 2021 44 | 45 | - Update `zodern:melte-compiler`: 46 | - Fix loading typescript compiler 47 | - Fix using `css` option 48 | - Fix using post css 49 | - Fix using optional chaining 50 | - Fix HMR bugs 51 | 52 | ## 1.4.4 - April 21, 2021 53 | 54 | - Fix `Cannot find module 'babylon'` error. 55 | 56 | ## 1.4.3 - April 21, 2021 57 | 58 | - Fix error when svelte options are not in the app's package.json file 59 | 60 | ## 1.4.2 - April 19, 2021 61 | 62 | - Move compiler into its own package, `zodern:melte-compiler` to allow other packages to use and extend it. 63 | 64 | ## 1.4.1 - April 17, 2021 65 | 66 | - Fix errors with the legacy web client 67 | 68 | ## 1.4.0 - April 17, 2021 69 | 70 | - Use typescript with svelte (@r00t3g) 71 | - Fix using HMR with SSR 72 | - Various other improvements and fixes for HMR 73 | - Fix sometimes causing the meteor tool to crash when there is a syntax error in a svelte file 74 | 75 | ## 1.3.1 - March 25, 2021 76 | 77 | - Fix production builds re-using cache entries from development builds 78 | 79 | ## 1.3.0 - January 18, 2021 80 | 81 | - Fix error when updating with HMR fails 82 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2019 Christian Klaussner 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of 5 | this software and associated documentation files (the "Software"), to deal in 6 | the Software without restriction, including without limitation the rights to 7 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 8 | the Software, and to permit persons to whom the Software is furnished to do so, 9 | subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 16 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 17 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 18 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 19 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # zodern:melte 2 | 3 | Build [cybernetically enhanced web apps](https://svelte.dev) with Meteor and Svelte. 4 | 5 | Based on [meteor-svelte](https://github.com/meteor-svelte/meteor-svelte/pull/30) with these added features: 6 | 7 | - Tracker statements 8 | - 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](https://docs.meteor.com/packages/hot-module-replacement.html) package. 9 | - Handles syntax errors without crashing 10 | - Supports Typescript preprocessing for script blocks 11 | 12 | Compatible with Meteor 1.8.2 and newer. 13 | 14 | ## Installation 15 | 16 | To use `meteor-svelte`, run the following commands: 17 | 18 | ```bash 19 | meteor add zodern:melte 20 | meteor npm install svelte 21 | ``` 22 | 23 | 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: 24 | 25 | ```js 26 | { 27 | ... 28 | 29 | "meteor": { 30 | ... 31 | 32 | "nodeModules": { 33 | "recompile": { 34 | "svelte": ["legacy"] 35 | } 36 | } 37 | } 38 | } 39 | ``` 40 | 41 | ### Tracker Statements 42 | 43 | In addition to the [$ reactive statements](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive) 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`](https://docs.meteor.com/api/tracker.html#Tracker-autorun). 44 | 45 | Example: 46 | 47 | ```html 48 | 63 | 64 | Sort by: 65 | 69 | 70 | {#if !subReady} 71 |

Loading...

72 | {/if} 73 | 74 | 79 | 80 |

{completedCount} completed

81 | ``` 82 | 83 | ## Typescript 84 | 85 | To use typescript with svelte files: 86 | 87 | 1) Add the typescript npm package to your app with `meteor npm i --save-dev typescript` 88 | 2) Add a `tsconfig.json` file. An example file can be found in the [Meteor docs](https://guide.meteor.com/build-tool.html#typescript) 89 | 3) In your svelte files, set the `lang="ts"` attribute for scripts: 90 | 91 | ```html 92 | 98 | 99 | 100 |

You've clicked the button {count} times (doubled: {doubled}).

101 | ``` 102 | 103 | Melte does not check the types when compiling Svelte files. To check types, you can use [`svelte-check`](https://www.npmjs.com/package/svelte-check) or [`eslint-plugin-svelte3`](https://github.com/sveltejs/eslint-plugin-svelte3). 104 | 105 | Learn more about using Typescript and Svelte from [Svelte's docs](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md). 106 | 107 | 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. 108 | 109 | ## Options 110 | 111 | Compiler options can be specified with a `"svelte:compiler"` property in `package.json`. For example: 112 | 113 | ```json 114 | { 115 | ... 116 | "svelte:compiler": { 117 | "extensions": ["svelte", "html"], 118 | "hydratable": true, 119 | "css": false 120 | } 121 | } 122 | ``` 123 | 124 | **`extensions` (default: `["svelte"]`)** 125 | 126 | An array of file extensions to be recognized by the package. 127 | Note that HTML files are not compiled with the Svelte compiler if they contain top-level `` or `` elements. 128 | 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). 129 | 130 | **`hydratable` (default: `false`)** 131 | 132 | By default, Svelte removes server-rendered static HTML when the application is loaded on the client and replaces it with a client-rendered version. 133 | 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](https://svelte.dev/docs#Creating_a_component). 134 | 135 | **`css` (default: `true`)** 136 | 137 | Svelte can [extract styles for server-side rendering](https://svelte.dev/docs#Server-side_component_API). 138 | 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. 139 | 140 | ## Server-Side Rendering 141 | 142 | `meteor-svelte` supports server-side rendering with minimal configuration. 143 | If you import Svelte components on the server, they are automatically built for server-side rendering. 144 | See the [Svelte API docs](https://svelte.dev/docs#Server-side_component_API), the [example app](https://github.com/meteor-svelte/ssr-example), and the `hydratable` and `css` options above for more details. 145 | 146 | ## Examples 147 | 148 | * [Apollo integration](https://github.com/meteor-svelte/apollo-example) 149 | * [Tracker integration](https://github.com/meteor-svelte/tracker-example) 150 | * [Server-side rendering](https://github.com/meteor-svelte/ssr-example) 151 | -------------------------------------------------------------------------------- /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zodern/melte/01d353fb14f6a48aa159109995b7fa2276797c67/banner.png -------------------------------------------------------------------------------- /hmr-runtime.js: -------------------------------------------------------------------------------- 1 | const { makeApplyHmr } = require('meteor/zodern:melte-compiler/hmr-runtime.js'); 2 | 3 | module.exports.applyHmr = makeApplyHmr(args => { 4 | // Mark this file as reloadable 5 | args.m.hot.accept(); 6 | 7 | let acceptCallback = null; 8 | if (args.m.hot.data?.acceptCallback) { 9 | // svelte-hmr expects accept to work as with nollup or vite 10 | // applying changes is done synchronously, so we wait until after it is done 11 | setTimeout(() => args.m.hot.data.acceptCallback(), 10); 12 | } 13 | 14 | args.m.hot.dispose((data) => { 15 | if (acceptCallback) { 16 | data.acceptCallback = acceptCallback; 17 | } 18 | }); 19 | 20 | return Object.assign({}, args, { 21 | hot: { 22 | ...args.m.hot, 23 | accept(cb) { 24 | acceptCallback = cb; 25 | } 26 | }, 27 | hotOptions: { 28 | ...(args.hotOptions || {}), 29 | noOverlay: true 30 | }, 31 | reload() { 32 | if (Package && Package.reload) { 33 | Package.reload.Reload._reload({ immediateMigration: true }); 34 | } else { 35 | window.location.reload(); 36 | } 37 | } 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'zodern:melte', 3 | version: '1.7.4', 4 | summary: 'Svelte compiler with tracker integration, HMR and Typescript support', 5 | git: 'https://github.com/zodern/melte.git', 6 | documentation: 'README.md' 7 | }); 8 | 9 | Package.registerBuildPlugin({ 10 | name: 'melte-compiler', 11 | use: [ 12 | 'ecmascript@0.12.7', 13 | 'zodern:melte-compiler@1.4.3' 14 | ], 15 | sources: [ 16 | 'plugin.js' 17 | ], 18 | npmDependencies: { 19 | '@babel/runtime': '7.4.3', 20 | } 21 | }); 22 | 23 | Package.onUse(function (api) { 24 | api.versionsFrom('1.8.1'); 25 | api.use('isobuild:compiler-plugin@1.0.0'); 26 | api.use('ecmascript@0.12.7', 'client'); 27 | api.use('tracker', 'client'); 28 | api.use('zodern:melte-compiler', 'client'); 29 | 30 | api.addFiles('tracker.js', 'client'); 31 | 32 | // Dependencies for compiled Svelte components (taken from `ecmascript`). 33 | api.imply([ 34 | 'ecmascript-runtime', 35 | 'babel-runtime', 36 | 'promise@0.11.2||1.0.0-beta.300-6' 37 | ]); 38 | }); 39 | -------------------------------------------------------------------------------- /plugin.js: -------------------------------------------------------------------------------- 1 | import MelteCompiler from 'meteor/zodern:melte-compiler/MelteCompiler.js'; 2 | import options from 'meteor/zodern:melte-compiler/options.js'; 3 | 4 | Plugin.registerCompiler({ 5 | extensions: (options && options.extensions) || ['svelte'] 6 | }, () => new MelteCompiler(options)); 7 | -------------------------------------------------------------------------------- /proxy-adapter.js: -------------------------------------------------------------------------------- 1 | if (process.env.NODE_ENV === "development") { 2 | const { proxyAdapter } = require('meteor/zodern:melte-compiler/hmr-runtime.js'); 3 | 4 | module.exports = proxyAdapter; 5 | } 6 | -------------------------------------------------------------------------------- /tracker.js: -------------------------------------------------------------------------------- 1 | const { onDestroy } = require('svelte'); 2 | const { Tracker } = require('meteor/tracker'); 3 | 4 | module.exports = { 5 | createReactiveWrapper() { 6 | let computation = null; 7 | 8 | onDestroy(() => { 9 | if (computation) { 10 | computation.stop(); 11 | } 12 | }); 13 | 14 | return function (func) { 15 | if (computation) { 16 | computation.stop(); 17 | } 18 | 19 | computation = Tracker.autorun(func); 20 | 21 | return computation; 22 | } 23 | } 24 | } 25 | --------------------------------------------------------------------------------