meteor-svelte / meteor-svelte Goto Github PK

View Code? Open in Web Editor NEW

114.0 114.0 13.0 89 KB

Build cybernetically enhanced web apps with Meteor and Svelte.

License: MIT License

JavaScript 100.00%

meteor svelte

meteor-svelte's Introduction

Build cybernetically enhanced web apps with Meteor and Svelte.

Installation

To use meteor-svelte, run the following commands:

$ meteor add svelte:compiler
$ meteor npm install svelte@<version>

Important: The version of the svelte npm package should match the version of svelte:compiler.

Options

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.

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

meteor-svelte's People

Contributors

Stargazers

Watchers

Forkers

elidoran mahadoang bossikkk arggh captainn joshleblanc faburem rktel zodern boomfly cie sebastianquack luxiaolin

meteor-svelte's Issues

TypeError: undefined is not a constructor ...

I've tried multiple svelte components (installed with npm) already.
But somehow I'm getting the following error with some of them:

Uncaught TypeError: NotificationDisplay is not a constructor
    at create_fragment (app.js?hash=63890eddfe471e366e6b712ef966fc84046820ae:124)
    at init (index.mjs:1462)
    at new App (App.svelte:10)
    at main.js:9
    at maybeReady (meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938)
    at HTMLDocument.loadingCompleted (meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950)

I'm using the following module:
https://github.com/beyonk-adventures/svelte-notifications

I'm also getting a similar error with this module:
https://github.com/keenethics/svelte-notifications

With vanilla Svelte this both seem to work perfectly fine. So it must be something Meteor or this Meteor plugin is doing.

Example Script:

<script>
import { Meteor } from "meteor/meteor";
import { useTracker } from "meteor/rdb:svelte-meteor-data";

import {NotificationDisplay, notifier} from '@beyonk/svelte-notifications';

function dox(){
    notifier.danger("TEST",5000);
}

</script>

<NotificationDisplay/>
Hello World!
<button on:click={dox}>TEST</button>

Any Idea what could be causing this error?

Error updating Svelte > 3.6.10 with 4.0.0-beta.0

Trying out Meteor Svelte 4.0.0-beta.0, I keep hitting this error with any version newer than 3.6.10 (including 3.6.11):

Uncaught (in promise) TypeError: store.subscribe is not a function
    at subscribe (index.mjs:41)
    at instance (Router.svelte:14)
    at init (index.mjs:1228)
    at new Router (Router.svelte:105)
    at Array.create_default_slot (App.svelte:33)
    at create_slot (index.mjs:55)
    at create_fragment (npdev_svelte-loadable.js?hash=b06f54066c982012946fa3443696c1575cf85b8a:129)
    at init (index.mjs:1240)
    at new svelte_loadable_provider_client (npdev_svelte-loadable.js?hash=b06f54066c982012946fa3443696c1575cf85b8a:183)
    at create_fragment (App.svelte:25)

You can see it by updating to any version of svelte newer than 3.6.10 in my meteor svelte starter. I don't actually know if this is a meteor-svelte incompatibility or something in svelte-routing or svelte-loadable.

meteor svelte project layout

I have just reworked a default meteor project with

client/main.html
client/HelloWorld.html

so that main.html contains the index.html content of the Svelte quickstart. I.e. my main.html looks as shown below:

<!doctype html>
<html>
<head>
    <title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='HelloWorld.js'></script>
<script>
    var app = new HelloWorld({
        target: document.querySelector( 'main' ),
        data: {
            name: 'world'
        }
    });
</script>
</body>
</html>

Meteor detects changes and attempts to run the svelte compiler, but I get this error:

While processing files with klaussner:svelte (for target web.browser):
client/main.html:1:1: Expected valid tag name

From my svelte experience, that means, the compiler tries to compile the main.html as a component. How should I lay out my meteor project so that the svelte compiler does not compile main.html, but only my components?

How to update svelte to last version

I love this package. this is easy to integrate with meteor.
But svelte update new version and How to update svelte to last version on my project

Thank you.

Syntax error on IE11

The svelte NPM uses the arrow syntax, but this is not transpiled for older browser, giving syntax errors on IE11.

The error can be reproduced using the example repo at https://github.com/meteor-svelte/tracker-example

This is the place, where the error appears in modules.js, see the last line:

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                               //
// node_modules/svelte/internal.js                                                                               //
//                                                                                                               //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                                                                                                 //
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function noop() {}

const identity = x => x;

Meteor 1.8 Uncaught Error: 'target' is a required option

Meteor 1.8
Error Uncaught Error: 'target' is a required option

options.name should be capitalised

How to fixed

Thank you

Error messages

Currently I'm constantly faced with this situation:

Happily writing code
My app suddenly crashes
I only find this in the console:

=> Started proxy.                             
                                              
/Users/arggh/.meteor/packages/coffeescript/.1.0.17.1t6mjfc++os+web.browser+web.cordova/plugin.compileCoffeescript.os/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:116
      throw error;
      ^
[object Object]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `../scripts/kill-all-chrome.sh & meteor --settings settings-dev.json`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/arggh/.npm/_logs/2019-07-08T09_37_18_448Z-debug.log

The reason for these crashes and errors are syntax errors, such as an HTML element left unclosed, or a wrongly formatted reactive statement. The Svelte compiler does provide better error messages, as can be seen when the same code is copy-pasted into the REPL on svelte.dev, but Meteor doesn't give me any hints whatsoever.

I wonder, if this is something that svelte:compiler can fix?

Wrapping Svelte components to a package with Meteor

I seem to have hit an obstacle, trying to move my Svelte components into a reusable package.

I wish I could have a package, containing a bunch of Svelte components like so:

- src /
  - TextInput.svelte
  - ColorPicker.svelte

and in my Meteor app code:

<script>
   import { ColorPicker } from 'my-svelte-components';
</script>

<ColorPicker/>

...but it seems quite hard to accomplish. Any ideas if this is even remotely possible?

Target is a required option in new Meteor installation

Hi there, thanks for creating this compiler, I've enjoyed using Svelte and trying to set it up with Meteor. My problem comes whenever I try and start a new project and add svelte:compiler and the npm package I always get the following error:

Uncaught Error: 'target' is a required option
    at new SvelteComponentDev (modules.js?hash=b226ee5abddf56e8404c7dddc73cde14cdea3f8c:2352)

Steps to reproduce:

1. Create a new meteor project `meteor create example`
2. run `meteor add svelte:compiler` (get 3.6.7_1)
3. run `meteor npm install [email protected]`
4. Add the following code to `main.js`

import { Meteor } from 'meteor/meteor'
import App from '/imports/client/components/App.svelte'

Meteor.startup(() => {
  new App({
    target: document.querySelector("#root")
  })
})

5. Run the app. Get above error

I'm not sure I'm matching the versions in the right way? I have managed to get other version running by cloning other meteor+svelte repos. Thanks!

Meteor organization name

Hey, I'm sitting on svelte and sveltejs meteor organization names, give me your meteor login name if you want me to add you to the orgs if you want to publish the package under svelte:compiler or sveltejs:compiler or something like that.

[Question] Complete integration

Is it possible to have an integration between (Tracker + SSR and possibly Apollo) all in one place?

I tried but no working, It might be interesting to have another example with all the resources

Babel transforms not applying to .svelte files

I've mostly ported svelte-loadable over to work with Meteor Svelte. The last piece of the puzzle is a ported babel plugin base on the one in npdev:react-loadable, which makes configuration less verbose. That babel plugin though doesn't run on code specified in .svelte files. I would guess that means that other user configured babel plugins won't run either.

Merge `svelte:compiler` and `svelte:core`

I think we don't need two separate packages anymore since the file extension can be configured with package.json instead of svelte:compiler-html. Having only one package would make updating a little more convenient. Any objections, @zimme? 🙂

Error then import { Store } from 'svelte/store.js';

import { Store } from 'svelte/store.js';

Uncaught (in promise) SyntaxError: Unexpected token {
at eval (modules.js?hash=e85cfce550754a19536a1fda19bffb3b178b0c60:26034)

Question: Optional Chaining on Svelte components

Hi, has anyone managed to make "Optional chaining" work on svelte components?
Meteor already supports this in Blaze/Server.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Upgrade to svelte 3.44.3?

There are a number of bug fixes, and at least one is breaking my current app. Any chance we can upgrade the compiler to a more recent svelte?

Using apollo with meteor-svelte

Let's use this issue to talk about what's needed to use Apollo properly with Svelte in a Meteor app.

Do we need to create a package to enable tighter integration, I don't think we need to do this.

It might be needed for graphql subscriptions, if the result is represented as a Tracker based result set, but maybe rxjs or some other observable implementation could be used instead?

Anyways, let's keep the discussion going and see what comes of it.

Require manual install of svelte with npm

I was laying on the beach today and for some reason I started to think about this package and started thinking that maybe we should require the users to install svelte manually and we just provide the meteor compiler.

meteor add svelte:compiler
meteor npm i -D svelte

Then we just check that svelte is available when the compiler runs and print an error message if not.
This way we won't be required to always keep this package up to date with the latest svelte version.

Cannot import component

Hey,
I'm trying to import a component which I had installed via npm.


<script>
import {Router} from 'svelte-routing';
</script>

This gives me the following error:

W20201021-11:29:39.911(2)? (STDERR) SyntaxError: Unexpected token '<'
W20201021-11:29:39.911(2)? (STDERR)     at wrapSafe (internal/modules/cjs/loader.js:1053:16)
W20201021-11:29:39.911(2)? (STDERR)     at Module._compile (internal/modules/cjs/loader.js:1101:27)

I have to write import Router from 'svelte-routing/src/Router.svelte'; to make it work. This happens on every npm package I try to import. Any idea how to fix this?

CSS Preprocessing

This repository doesn't seem to be very active, but the compiler works so I'll ask away!

Did you manage to get any kind of CSS preprocessing running with this Svelte integration?

I'd love to use PostCSS plugins with Svelte, or even use the Meteor package nathantreid:css-modules, which I tried, but it's throwing this kind of error in the SSR example app:

Stacktrace

TypeError: require(...).addStyles is not a function
W20180813-17:46:34.550(3)? (STDERR)     at App.css (components/Message.html:2:4)
W20180813-17:46:34.550(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:322:7)
W20180813-17:46:34.550(3)? (STDERR)     at Module.require (packages/modules-runtime.js:224:14)
W20180813-17:46:34.550(3)? (STDERR)     at require (packages/modules-runtime.js:244:21)
W20180813-17:46:34.550(3)? (STDERR)     at App.html (/Users/arggh/Development/app/.meteor/local/build/programs/server/app/app.js:13:14)
W20180813-17:46:34.550(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:322:7)
W20180813-17:46:34.550(3)? (STDERR)     at Module.require (packages/modules-runtime.js:224:14)
W20180813-17:46:34.550(3)? (STDERR)     at require (packages/modules-runtime.js:244:21)
W20180813-17:46:34.551(3)? (STDERR)     at main.js (server/main.js:1:189)
W20180813-17:46:34.551(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:322:7)
W20180813-17:46:34.551(3)? (STDERR)     at Module.require (packages/modules-runtime.js:224:14)
W20180813-17:46:34.551(3)? (STDERR)     at require (packages/modules-runtime.js:244:21)

load method from npm module can't export

I'm getting an error using svelte-loadable where its load method is not exported from the package (Loadable.svelte). If I rename it, I can get it to export. I don't know if the error is in Meteor core or in meteor-svelte.

svelte:compiler fails to compile svelte exports from js files

  import { Router, Link, Route } from "svelte-routing";

This fails when importing App.svelte on the server.

C:\users\josh\documents\dev\aa2gd-meteor\node_modules\svelte-routing\src\Router.svelte:1
(function (exports, require, module, __filename, __dirname) { <script>

svelte-routing's index.js looks like this

export { default as Router } from "./Router.svelte";
export { default as Route } from "./Route.svelte";
export { default as Link } from "./Link.svelte";
export { navigate } from "./history.js";
export { link, links } from "./actions.js";

Importing directly works.

import Router from 'svelte-routing/src/Router';

I assume it's trying to import as a JS file rather than a svelte file.

Problems importing Svelte components from package

Importing Svelte components from a package that has svelte as a dependency will break a Meteor app that uses svelte:compiler.

Scenario:

my-svelte-components/package.json

{
   "name": "@arggh/my-svelte-components",
   "svelte": "index.js",
   "dependencies": {
      "svelte": "3.7.1"
   }
}

app/package.json

{
   "name": "my-meteor-app",
   "dependencies": {
      "@arggh/my-svelte-components": "1.0.0",
      "svelte": "3.7.1"
   }
}

If the svelte dependency is removed from the package → Meteor app runs fine.

My guess is, this is somewhat related to these issues:

sveltejs/svelte#3671
sveltejs/svelte#3165
sveltejs/svelte#3448

From what I quickly gathered, the problem is that there are multiple Svelte internal runtimes present in the app and they should deduplicated.

I tried this with the latest 4.0.0-beta release as well.

Configuration for file extensions

Can we use config options in package.json/.svelterc or some other way to eliminate the need for a separate svelte:compiler-no-html package?

Incompatible with Svelte 4?

I tried to launch a brand new Meteor project, installing zodern:melte then Svelte. However, when I tried to run the application, it crashed with error:

Error: Cannot find the `svelte` package in your application. Please install it with `meteor npm install `svelte`.

Svelte version had been set to the latest 4.1.1. It seems that the library is incompatible with Svelte 4. I had to manually declare Svelte at version 3.59.2 for the application to start.

Thanks!

Compatibility with Meteor v2

I upgraded my project from 1.12.1 to 2.2 and it looks like the upgrade breaks this package.

I investigated the issue and it seems like on 2.2 the Babel.getDefaultOptions call in transpileWithBabel returns options with sourceMaps set to false. Adding a .babelrc or babel.config.json file to the root of the project doesn't solve the issue, as a workaround I added options.sourceMaps = true; under options.filename = path;.

I'm not sure if I'm doing something wrong, are there any babel or meteor configurations that solve this issue or setting the sourceMaps option in the transpileWithBabel file is the way forward?

Can't get the basic SSR example repo running

W20190608-00:53:43.235(3)? (STDERR) TypeError: create_ssr_component is not a function
W20190608-00:53:43.235(3)? (STDERR)     at App.svelte (components/App.svelte:2:3)

I tried to get the basic SSR example repo running with the latest Svelte (3.4.4), but got this error when trying to run meteor.

Any ideas what might be going on here?

Cannot read property 'sections' of null (v3.44.3)

After updating to the latest release, I'm getting the following error when I try to run my Meteor project (mostly Blaze but with four Svelte templates, which have been working great for years):

/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/meteor-promise/promise_server.js:218
      throw error;
      ^

TypeError: Cannot read property 'sections' of null
    at new SourceMapConsumer (/Users/luke/.meteor/packages/svelte_compiler/.3.44.3.wxcc3p.dk15d++os+web.browser+web.browser.legacy+web.cordova/plugin.svelte-compiler.os/npm/node_modules/meteor/svelte-compiler/node_modules/source-map/lib/source-map-consumer.js:20:20)
    at SvelteCompiler.combineSourceMaps (packages/svelte-compiler/SvelteCompiler.js:195:27)
    at SvelteCompiler.transpileWithBabel (packages/svelte-compiler/SvelteCompiler.js:186:23)
    at SvelteCompiler.compileOneFile (packages/svelte-compiler/SvelteCompiler.js:130:19)
    at getResult (packages/caching-compiler/caching-compiler.js:305:46)
    at packages/svelte-compiler/SvelteCompiler.js:85:22
    at /Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/meteor-promise/fiber_pool.js:43:40
 => awaited here:
    at Promise.await (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/meteor-promise/promise_server.js:60:12)
    at JsOutputResource.finalize (/tools/isobuild/compiler-plugin.js:931:12)
    at JsOutputResource.hasPendingErrors (/tools/isobuild/compiler-plugin.js:936:10)
    at JsOutputResource.reportPendingErrors (/tools/isobuild/compiler-plugin.js:941:14)
    at ImportScanner.scanFile (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/isobuild/tools/isobuild/import-scanner.ts:1083:14)
    at /Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/isobuild/tools/isobuild/import-scanner.ts:1142:14
    at each (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/underscore/underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/isobuild/tools/isobuild/import-scanner.ts:1105:5)
    at /Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/isobuild/tools/isobuild/import-scanner.ts:740:14
    at Array.forEach (<anonymous>)
    at ImportScanner.scanImports (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/isobuild/tools/isobuild/import-scanner.ts:738:22)
    at /tools/isobuild/compiler-plugin.js:1381:17
    at Array.forEach (<anonymous>)
    at Function.computeJsOutputFilesMap (/tools/isobuild/compiler-plugin.js:1346:19)
    at ClientTarget._emitResources (/tools/isobuild/bundler.js:1161:8)
    at /tools/isobuild/bundler.js:864:12
    at Object.enterJob (/tools/utils/buildmessage.js:388:12)
    at ClientTarget.make (/tools/isobuild/bundler.js:852:18)
    at /tools/isobuild/bundler.js:3260:14
    at /tools/isobuild/bundler.js:3413:25
    at Array.forEach (<anonymous>)
    at /tools/isobuild/bundler.js:3367:14
    at Object.capture (/tools/utils/buildmessage.js:283:5)
    at bundle (/tools/isobuild/bundler.js:3241:31)
    at /tools/isobuild/bundler.js:3184:32
    at Slot.withValue (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/@wry/context/lib/context.esm.js:69:29)
    at Object.withCache (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/fs/tools/fs/files.ts:1662:39)
    at Object.bundle (/tools/isobuild/bundler.js:3184:16)
    at /tools/runners/run-app.js:581:24
    at Function.run (/Users/luke/.meteor/packages/meteor-tool/.2.5.3.3lljc7.90bvp++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/tool-env/tools/tool-env/profile.ts:289:14)
    at bundleApp (/tools/runners/run-app.js:580:34)
    at AppRunner._runOnce (/tools/runners/run-app.js:627:35)
    at AppRunner._fiber (/tools/runners/run-app.js:949:28)
    at /tools/runners/run-app.js:410:12

I'm not sure what it means, but I did do a check to see if sections was used in any of my Svelte templates. It is not.

I will downgrade to v3.31.2 for now but I wanted to post a record of this issue.

Thanks for making this package available!

Split up repository

This repository contains three Atmosphere packages: svelte:core, svelte:compiler, and svelte:compiler-no-html. In the future, it could be split up to allow svelte:core to be used elsewhere. Currently, having everything in one repository should be fine because all packages are coupled together anyway.

ios svelte requires 3.27.0 + blank screen

Done my first ios run following tutorial up to https://www.meteor.com/tutorials/svelte/running-on-mobile

➜ simple-todos git:(master) ✗ meteor run ios

WARNING: this package requires [email protected] to be installed as npm peer dependency, but your package.json specifies:

  "svelte": "^3.29.7"

If you encounter error messages, consider running:

  meteor npm install --save [email protected]

=> Started MongoDB.
%% No simulator found for ". Falling back to the default target.
%% Adding xcodebuildArg: [ '-UseModernBuildSystem=0' ]
%% Adding xcodebuildArg: [ '-quiet' ]
=> Started your app.

=> App running at: http://localhost:3000/
warning: The Legacy Build System will be removed in a future release. You can configure the selected build system and this deprecation message in File

I was expecting app to look like

but got:

meteor npm install --save [email protected]
didn't help fix the blank screen

SSR support

Do you think there is any chance we can get SSR support?
I was researching this topic a bit and it seems that svelte takes a rather special approach here:
https://svelte.technology/guide#server-side-rendering
This doesn't seem to work with Meteor because you cannot overload require at runtime (or at least I was not able to get it working).
Now I understand that the build plugin is providing the compile functionality for all imports (i.e. client and server) and we don't want to overcomplicate how everything works for regular client side imports. Neither can we create a new build plugin because it would process the same extensions and files. However I was wondering if there would be a way to export the {code} generated by the svelte compiler when using generate: 'ssr' along with the default export?
That way you could still do import Example from '/imports/Example.html' on the client and on the server for ssr you could use import {ssr} from '/imports/Example.html'. Another Option could be to extend the svelte class generated by the compiler and add the static .render(data) method from the generate: 'ssr' compile step.
Happy to hear your thoughts on this!

Typescript for Svelte

Working happily with Svelte in Meteor. And also with Typescript for server files. I was wondering if I can use Typescript in svelte:compiler if I just update the Svelte npm package to 3+? Or does svelte:compiler first needs an update too?

Error in web.browser.legacy build

Starting with a fresh project:

meteor create --bare legacy-test-project
cd legacy-test-project
meteor add svelte:compiler
meteor npm i -s [email protected]

I create a simple App.svelte and mount it to the body using:

Meteor.startup(() => {
    new App({
        target: document.querySelector('body')
    })
})

If I hit it using a "modern" user agent, everything works fine. For example

Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

However, if I hit it using a "legacy" user agent, it fails:

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

The error message from the console is:

app.js?hash=4c618e8c0472a0480045bccc839d68edaa64428a:113 Uncaught TypeError: Class constructor SvelteComponentDev cannot be invoked without 'new'
    at new App (app.js?hash=4c618e8c0472a0480045bccc839d68edaa64428a:113)
    at main.js:4
    at maybeReady (meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938)
    at HTMLDocument.loadingCompleted (meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950)

What's happening is that the older user agent is detected and the flow is routed to the web.browser.legacy build bundle.

I'm not exactly sure why, but it appears that the compilation target of the legacy bundle is not compatible with the output of the svelte compiler. Reading up on this, I am led to believe it may have something to do with the babel presets of the legacy bundle, which apparently target ES5. I have attempted to overwrite the presets with a custom .babelrc, but have had no luck.