zodern / melte Goto Github PK

The path is missing the package name, so it instead shows as if it is part of the app.

When I have a construct like:

and using lang="ts" in a Svelte source file, it seems to say that "counts" is not found.

I can work around this with:

    let counts: SiteStatistic
    $m: counts = SiteStatistics.find().fetch()[0]

However, I'm hoping there is a cleaner way. Any suggestions?

If I try to define PostCSS plugins, the build crashes on this error:

/Users/arggh/.meteor/packages/coffeescript/.1.0.17.jzhn4e.2mhnq++os+web.browser+web.cordova/plugin.compileCoffeescript.os/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:116
      throw error;
      ^

TypeError: processed.code.replace is not a function
    at parse_attached_sourcemap (/Users/arggh/Develop/app/node_modules/svelte/src/compiler/utils/mapped_code.ts:305:34)
    at processed_tag_to_code (/Users/arggh/Develop/app/node_modules/svelte/src/compiler/preprocess/index.ts:111:2)
    at process_single_tag (/Users/arggh/Develop/app/node_modules/svelte/src/compiler/preprocess/index.ts:168:10)

Meteor version: 2.1
zodern:melte version: 1.3.1

Hello @zodern, I recently migrated my project to Meteor 3.0 and encountered an issue. I found out where the problem is coming from, but what can we do as a solution?

I updated my application sequentially with the following commands:

meteor update --release 3.0-rc.2
meteor reset
rm -rf node_modules
rm -rf package-lock.json
meteor npm i

Then I ran my application.

meteor --settings settings.json --port 4100 --raw-logs

The application runs successfully, but on the client side, the application remains on a white screen and I get the following error in the log.

Uncaught ReferenceError: __DYNAMIC_VERSIONS__ is not defined
    at module (dynamic-import.js:452:16)
    at fileEvaluate (modules-runtime-hot.js:386:7)
    at Module.require (modules-runtime-hot.js:268:27)
    at mod.require (modules.js:295:33)
    at require (modules-runtime-hot.js:308:21)
    at module (dynamic-import.js:30:23)
    at fileEvaluate (modules-runtime-hot.js:386:7)
    at Module.require (modules-runtime-hot.js:268:27)
    at mod.require (modules.js:295:33)
    at Object.require (modules-runtime-hot.js:308:21)

My observation is that when I remove the svelte:compiler setting from package.json and add the [email protected] package to the application, it works.

Below is the content of the packages file and package.json for the application.

packages:

[email protected]             # Packages every Meteor app needs to have
[email protected]       # Packages for a great mobile UX
[email protected]                   # The database Meteor supports right now

[email protected]   # CSS minifier run for production mode
[email protected]    # JS minifier run for production mode
[email protected]                # ECMAScript 5 compatibility for older browsers
[email protected]             # Enable ECMAScript2015+ syntax in app code
[email protected]              # Enable TypeScript syntax in .ts and .tsx modules
[email protected]            # Server-side component of the `meteor shell` command

# [email protected]             # Define static page content in .html files
zodern:melte                          # Meteor package to allow us to create files with the .svelte extension
[email protected]  # Update client in development without reloading the page
zodern:types                          # Enable types from meteor/atmosphere packages

[email protected]
[email protected]
# universe:i18n
[email protected]
[email protected]
[email protected]
mdg:validated-method
# percolate:migrations
[email protected]
[email protected]

package.json:

{
  "name": "namaz-vakti-app",
  "private": true,
  "scripts": {
    "start": "meteor --settings settings.json --port 4100 --raw-logs",
    "start:android": "meteor run android-device --settings settings.json --port 4100 --raw-logs --mobile-server=192.168.1.150",
    "deploy:prod": "mup deploy --config=.deploy/prod/mup.js --settings=.deploy/prod/settings.json --verbose",
    "stop:prod": "mup stop --config=.deploy/prod/mup.js --settings=.deploy/prod/settings.json --verbose",
    "restart:prod": "mup restart --config=.deploy/prod/mup.js --settings=.deploy/prod/settings.json",
    "reconfig:prod": "mup reconfig --config=.deploy/prod/mup.js --settings=.deploy/prod/settings.json",
    "setup:prod": "mup setup --config=.deploy/prod/mup.js --settings=.deploy/prod/settings.json --verbose",
    "ssh:prod": "mup ssh --config=.deploy/prod/mup.js --settings=.deploy/prod/settings.json",
    "logs:prod": "mup logs --tail 200 -f --config=.deploy/prod/mup.js --settings=.deploy/prod/settings.json",
    "shell:prod": "meteor mongo shell --settings=.deploy/prod/settings.json"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.6",
    "@material-tailwind/html": "^2.2.2",
    "@sentry/svelte": "^7.108.0",
    "autoprefixer": "^10.4.17",
    "bcrypt": "^5.1.0",
    "classnames": "^2.5.1",
    "daisyui": "^4.7.2",
    "dayjs": "^1.11.9",
    "hex-to-css-filter": "^5.4.0",
    "meteor-node-stubs": "^1.2.5",
    "notiflix": "^3.2.6",
    "postcss": "^8.4.33",
    "postcss-load-config": "^5.0.2",
    "simpl-schema": "^3.4.1",
    "svelte": "3.54.0",
    "svelte-preprocess": "^5.1.3",
    "tailwindcss": "^3.4.1",
    "tippy.js": "^6.3.7",
    "toastify-js": "^1.12.0"
  },
  "devDependencies": {
    "@types/jquery": "^3.5.16",
    "@types/toastify-js": "^1.11.1",
    "tinro": "^0.6.12",
    "typescript": "^5.2.2"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js"
    },
    "nodeModules": {
      "recompile": {
        "svelte": [
          "legacy"
        ]
      }
    },
    "testModule": "tests/main.js"
  },
  "svelte:compiler": {
    "extensions": [
      "svelte",
      "html"
    ],
    "hydratable": true,
    "css": false
  }
}

If the file being edited exists in a package, and contains errors, Meteor crashes.

The same doesn't happen with svelte files imported directly from within the app.

Steps to reproduce:

1. git clone https://github.com/qnipp/meteor-svelte-tracker-ssr-example
2. cd meteor-svelte-tracker-ssr-example; meteor update
   Some warnings at this point, install suggested dependencies:
3. meteor npm install --save [email protected] @babel/runtime
   Working with full reload needed. Now trying to get HRM to work:
4. meteor add hot-module-replacement
   Still makes a reload. Adding this package:
5. meteor add zodern:melte and swap svelte:compiler with zodern:melte in .meteor/packages.

Now when I make a change, an error is thrown in browser console:

zodern_melte.js [HMR][Svelte] Error during component init: <Person>
zodern_melte.js DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

I haven't really given this much thought yet, but I ran into a situation where I would like to have autoprefixer mangle the CSS of various Svelte components in our app, some of them residing in separate packages.

Now, to achieve that, it seems I'd need to somehow add lang="postcss" attribute to all those components' <style> tags.

Would be great, if I could configure zodern:melte to always run postcss plugins as preprocessors, regardless of any lang-attributes.

(I also tried to achieve autoprefixing using juliancwirko:postcss package, but that didn't have any effect on the Svelte components' CSS)

Hello, is there going to be any development for meteor.js 3.0? I would like to try the beta version in some of my projects.

When I follow the instructions to set up typsecript, I receive the following output:

 !  ~/c/w/d/app   *~+…  meteor                    2.8m  Fri 10 Dec 2021 05:01:16 PM CET
[[[[[ ~/code/web/daymeter/app ]]]]]

=> Started proxy.
=> Started HMR server.
=> Errors prevented startup:

   While building for web.browser:
   imports/ui/App.svelte: Cannot find module 'typescript'
   Require stack:
   -
   /home/kevin/.meteor/packages/zodern_melte/.1.4.4.11x2b6e.30lh++os+web.browser+web.browser.legacy+web.cordova/plugin.melte-compiler.os/npm/node_modules/meteor/zodern_melte-compiler/node_modules/svelte-preprocess/dist/transformers/typescript.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/bundler.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/compiler.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/packaging/package-client.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/packaging/catalog/catalog-remote.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/packaging/catalog/catalog.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/packaging/tropohouse.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/meteor-services/config.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/meteor-services/auth.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/utils/http-helpers.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/packaging/warehouse.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/cli/main.js
   -
   /home/kevin/.meteor/packages/meteor-tool/.2.5.1.1ru6508.wvws++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/index.js

   While building for web.browser.legacy:
   imports/ui/App.svelte: this.getTs(...) is not a function

=> Your application has errors. Waiting for file change.
=> Started MongoDB.

I did tell Meteor to recompile Svelte:

package.json

[...]
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js",
    "nodeModules": {
      "recompile": {
        "svelte": "legacy"
      }
    }
  },
[...]

TypeScript is installed. I can see it in the node_modules directory.

What might I be missing in my configuration?

Because of SSR, I am guarding subscription calls with Meteor.isClient, otherwise the SSR-generated page would fail because subscribe is not available on the server. But in such case, it looks like it won't unsubscribe on dismount.

if (Meteor.isClient) {
  $m: Meteor.subscribe('zodern.does.great.job')
}

I can do it manually though

  let subHandle: Meteor.SubscriptionHandle | undefined = undefined
  if (Meteor.isClient) {
    $m: subHandle = Meteor.subscribe('zodern.does.great.job')
  }

  onDestroy(() => {
    if (Meteor.isClient) {
      subHandle?.stop()
    }
  })

If build cordova targets get error:

Uncaught TypeError: Class constructor SvelteComponentDev cannot be invoked without 'new'

https://github.com/meteor/meteor/blob/c7534dbcddd3c677efb6297e67132b05bd63dc87/packages/babel-compiler/babel-compiler.js#L90

This line makes modernBrowsers only for web.browser arch, but svelte need it if we compile web.cordova

Sometimes our app breaks while changing routes with this error:

TypeError: Cannot read property 'push' of null
    at _autoStopComputation (autorun.js:45)
    at Object.svelteAwareAutorun [as autorun] (autorun.js:20)
    at Blaze.View.autorun (view.js:206)
    at Blaze.TemplateInstance.autorun (template.js:325)
    at Blaze.TemplateInstance.<anonymous> (svelte-component.js:46)
    at template.js:119
    at Function.Template._withTemplateInstanceFunc (template.js:490)
    at fireCallbacks (template.js:115)
    at Blaze.View.<anonymous> (template.js:208)
    at view.js:107

I've so far observed it happening only in dev mode. I will report if I manage to reproduce with a production bundle.

It may be useful to have a guide to migrate from rdb:svelte-meteor-data to zodern:melte. Some suggestions:

No need for $var

In svelte-meteor-data, one uses:

$: players = useTracker(() => Players.find().fetch())

and then in the HTML:

{$players}

In Melte, this would become:

$m: players = Players.find().fetch()

and

{players}

No need to include anything

You do not need to include anything for $m: to work.

Remove rdb:svelte-meteor-data and svelte-compiler

$ meteor remove rdb:svelte-meteor-data
$ meteor remove svelte-compiler

You may also want to install typescript and svelte-preprocess:

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

I cannot get melte to use postcss in <style> blocks load recent PostCSS plugin versions.

UPDATE: I finally figured out that it's something to do with using a plugin that's been updated for PostCSS 8. Downgrading the plugin, e.g., postcss-nested@4, makes everything work fine. I can't figure out how to edit melte-complier to make it compatible with the new plugin API, but for now at least I can just stick with older plugin versions.

Minimal reproduction

See also my repo with the results of these steps.

1. meteor create --svelte
2. meteor npm install --save-dev postcss postcss-load-config postcss-nested
3. Create postcss.config.js to load postcss-nested plugin (like this)
4. Set svelte:compiler's css option to false in package.json (like this)
5. Add a <style lang="postcss"> block with a nested rule to App.svelte (like this)

Expected: postcss-nested plugin will transform the nested rule to proper CSS.

Actual: Build fails with imports/ui/App.svelte: Colon is expected (the exact error depends on the invalid CSS I've written)

Note: PostCSS works with .css files: If I put a nested rule in main.css it gets transformed properly. It only fails to transform CSS in .svelte files

Other things I've tried

• Putting PostCSS config in package.json
• Swapping out standard-minifier-css for juliancwirko:postcss
• Setting css: true in svelte:compiler options
• meteor reset
• Doing this in my actual web app project
• Setting the postcss option of svelte:compiler in package.json (see second post below)

Any ideas? I'm going crazy trying to get this to work. I love being able to use Svelte in Meteor, but it's been a drag to either write vanilla CSS or have to keep my styles in separate files. As I said above, this is working with older plugin versions now. Wish I could figure out how to update the package to be compatible with the most recent API, but I can't.

Thank you for looking! 🙏

Thanks for adding Svelte support to meteor.

When using svelte and cordova the svelte libraries are note being included. I learned per this forum post:
https://forums.meteor.com/t/has-anybody-tried-svelte-mobile/53243/8

// navigate to your app's root directory, then go to imports, and then create the symbolic link there
$ cd imports
$ ln -s ../node_modules/svelte/

This seems to solve the problem on cordova.

Here is the error:

zodern_melte-compiler.js?hash=24753a6571f4db1ee799c82d1fee83f5d983dbfd:509 [HMR][Svelte] Unrecoverable error in <App>: next update will trigger a full reload
logError @ zodern_melte-compiler.js?hash=24753a6571f4db1ee799c82d1fee83f5d983dbfd:509
Proxy<App> @ zodern_melte-compiler.js?hash=24753a6571f4db1ee799c82d1fee83f5d983dbfd:866
(anonymous) @ app.js?hash=6783f354979135c3f7206021b162f9c5af125ebd:384
maybeReady @ meteor.js?hash=39ce5c7fe4f62f37efc0097b67b41a4f3a773988:975
releaseReadyHold @ meteor.js?hash=39ce5c7fe4f62f37efc0097b67b41a4f3a773988:964
Channel.fire @ cordova.js:872
(anonymous) @ cordova.js:232
setTimeout (async)
fireDocumentEvent @ cordova.js:227
(anonymous) @ cordova.js:1306
f @ cordova.js:720
Channel.subscribe @ cordova.js:802
join @ cordova.js:726
(anonymous) @ cordova.js:1305
f @ cordova.js:720
Channel.fire @ cordova.js:872
(anonymous) @ cordova.js:1287
onScriptLoadingComplete @ cordova.js:1662
scriptLoadedCallback @ cordova.js:1679
(anonymous) @ cordova.js:1633
load (async)
exports.injectScript @ cordova.js:1619
injectIfNecessary @ cordova.js:1631
handlePluginsObject @ cordova.js:1684
(anonymous) @ cordova.js:1713
(anonymous) @ cordova.js:1633
load (async)
exports.injectScript @ cordova.js:1619
injectIfNecessary @ cordova.js:1631
exports.load @ cordova.js:1711
(anonymous) @ cordova.js:1286
setTimeout (async)
(anonymous) @ cordova.js:1285
build @ cordova.js:47
require @ cordova.js:62
(anonymous) @ cordova.js:1902
(anonymous) @ cordova.js:1904
zodern_melte-compiler.js?hash=24753a6571f4db1ee799c82d1fee83f5d983dbfd:871 Uncaught TypeError: Class constructor SvelteComponentDev cannot be invoked without 'new'
    at new App (app.js?hash=6783f354979135c3f7206021b162f9c5af125ebd:312)
    at createProxiedComponent (zodern_melte-compiler.js?hash=24753a6571f4db1ee799c82d1fee83f5d983dbfd:1169)
    at new ProxyComponent (zodern_melte-compiler.js?hash=24753a6571f4db1ee799c82d1fee83f5d983dbfd:735)
    at new Proxy<App> (zodern_melte-compiler.js?hash=24753a6571f4db1ee799c82d1fee83f5d983dbfd:835)
    at app.js?hash=6783f354979135c3f7206021b162f9c5af125ebd:384
    at maybeReady (meteor.js?hash=39ce5c7fe4f62f37efc0097b67b41a4f3a773988:975)
    at Channel.releaseReadyHold (meteor.js?hash=39ce5c7fe4f62f37efc0097b67b41a4f3a773988:964)
    at Channel.fire (cordova.js:872)
    at cordova.js:232

Using Meteor 2.5.1
Cordova 10.0.0
Android SDK Tools 30.0.3

Steps to reproduce

1. cd /tmp
2. meteor create --svelte repro
3. cd repro
4. meteor add platform android
5. meteor run android-device --mobile-server http://<meteor host IP>:3000
6. Observe Error

Hey, I seem to be having an issue or potentially misunderstanding tracker statements.

I see that in the Readme file, there is a Meteor.subscribe call inside a tracker statement $m. If I do that in my meteor app, my subscriptions get multiplied. If I use Tracker.autorun instead, they don't.

Using "$m" for the "mainObjects-sources" subscription:

Using Tracker.autorun:

Could you please clarify what exactly is the difference between using $m and Tracker.autorun? And why should we put "Meteor.subscribe" calls inside tracker statements if it leads to the subscriptions being multiplied?

Thanks!

Possible?

Is there a way to configure ESLint to ignore the label $m: declaration? Right now, I get a '$m:' is defined but never used. no-unused-labels error. I know I could silence this type of error entirely as a rule Svelte override, but I am wondering if there's a way to disabled only this specific one, just as it is done for $: labels. Thanks in adavance!

If I set css: false in zodern:melte's svelte:compiler settings, then all (Svelte components') CSS gets discarded completely.

I would expect that CSS to be included as part of the merged stylesheets. If I set css: true, the styles get included in the JS bundle as expected.

The meaning of css: true vs. css: false in the Svelte's compiler logic is whether to include to CSS in JS code or not, in which case it gets passed to CSS output, which in my understanding, zodern:melte should include in the app's CSS bundle.

From https://svelte.dev/docs#svelte_compile

If true, styles will be included in the JavaScript class and injected at runtime. It's recommended that you set this to false and use the CSS that is statically generated, as it will result in smaller JavaScript bundles and better performance.

Hey!

I'm working on a meteor project that makes use of zodern/melte's $m functionality. We use Meteor sessions to set and get information about toasts so the app can appropriately display them. We have the following reactive block, which from my understanding should keep track of when the session variables change, but does not.

This reactive block does not run when the session variables change as intended.

When I change the reactive block to a Tracker.autorun block, it works completely fine and as intended. My understanding was that $m and Tracker.autorun should have the exact same behavior.

Additionally, if I self-reference the above variables like so it also fixes the issue:

It's worth pointing out that this has happened in other places in our app, namely with subscriptions to Meteor publications, but this was the simplest example I could come by.

These reactive blocks were not causing this issue a couple of months ago (I remember them working around the middle of September, but I'm unsure of when they stopped working).

Please let me know if you need any more information. Thanks!

Hello! Is there a way to tell Meteor to use package.json svelte fields to specific packages. For example svelte-notifications

By default Meteor will use main field: build/bundle.js and now by strange reasons client produces this error:

If i add recompile option for this package Meteor get module field build/bundle.mjs but this is prebuilded too and produced same error.

How to tell Meteor to use svelte field to recompile this package?

Hi I'm new to Svelte and trying to learn. In general, I developed a simple chat application Meteor+Svelte. The application I'm extending is a SPA while I was looking at how to convert it to an SSR application, I looked at the example you gave here. I wanted to try it simply using the server-render package, unfortunately zodern:melte is not used here. When I try with this package, I get the following error.

W20220122-09:17:31.228(3)? (STDERR) Error: Cannot find package "zodern:melte". Try "meteor add zodern:melte".
W20220122-09:17:31.228(3)? (STDERR)     at makeInstallerOptions.fallback (packages/modules-runtime.js:611:13)
W20220122-09:17:31.228(3)? (STDERR)     at Module.require (packages/modules-runtime.js:244:14)
W20220122-09:17:31.228(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/components/Messages.svelte:84:18)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/pages/chat/Chat.svelte:24:43)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/components/Rooms.svelte:73:19)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/public/components/Rooms.svelte:73:19)
W20220122-09:17:31.229(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.229(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)
W20220122-09:17:31.229(3)? (STDERR)     at Module.moduleLink [as link] (/Users/recepozen/.meteor/packages/modules/.0.18.0.10yctwz.y5qa++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220122-09:17:31.229(3)? (STDERR)     at module (imports/app/user/pages/dashboard/Dashboard.svelte:8:5)
W20220122-09:17:31.230(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:336:7)
W20220122-09:17:31.230(3)? (STDERR)     at Module.require (packages/modules-runtime.js:238:14)

The code I added for SSR;

Client ;

import App from '../imports/app/App.svelte';
import { onPageLoad } from 'meteor/server-render';

onPageLoad(() => {
  new App({
    target: document.querySelector('#app'),
    hydrate: true
  });
});

Server;

import { onPageLoad } from 'meteor/server-render'
import App from '/imports/app/App.svelte'

onPageLoad((sink) => {
  console.log(sink);
  const { html, css } = App.render();

  sink.appendToHead(`<style>${css.code}</style>`);
  sink.renderIntoElementById('root', html);
});

My code without SSR is available here, how can I provide SSR support with zodern:melte. Is this possible? If possible, how should I do it?

Thanks for making this package!

Any preliminary thoughts on support for Svelte 5? My guess is that it won't release until early next year but the fine grained reactivity by default with proxies looks pretty good: sveltejs/svelte#9739

I'm not entirely sure how that plays with Meteor's reactive cursors though. Was wondering if you've already given this some thought.

Latest package version on Atmosphere is 1.4.4 and latest version on Github seems to be 1.4.2.

Would be much appreciated, if you could push the changes up until 1.4.4 to Github ❤️

Hi, any plans to support having Blaze template side by side with Svelte? This is for projects that initially started with Blaze and is incrementally migrating to Svelte. Thanks!

wizonesolutions (Kevin Kaland) 23 hours ago
Does zodern:melte have svelte.config.js support out of the box? For preprocessors, for example.

zodern 20 hours ago
It does not. Which preprocessors are you wanting to use?

wizonesolutions (Kevin Kaland) 9 hours ago
Potentially https://github.com/carbon-design-system/carbon-preprocess-svelte

carbon-design-system/carbon-preprocess-svelte

zodern 14 minutes ago
It doesn't seem it would be difficult to add support for svelte.config.js. Would you mind opening an issue on https://github.com/zodern/melte?

Opening issue as requested. My goal is to be able to use things like Carbon Components preprocessors.

I'm probably just very confused right now. To track down some subscription issue I've narrowed it down to this:

<script>
  import { Meteor } from 'meteor/meteor';
  Meteor.subscribe('contacts');
</script>

If I render this component conditionally (toggling a checkbox) it will subscribe / unsubscribe from contacts. How? There is no $m or Tracker. I also can't see an onDestroy being generated for this component. What is this magic and how do I disable it? Does melte somehow globally wrap every component in a Tracker?

Edit: I need this because I want certain subscriptions to be subscribed to lazily (once needed) but then keep them open forever. I had this abstracted away and wondered why it was unsubscribing.

When this option is disabled, which seems to be the default, typescript can remove imports for components. We should either find a way to ensure this option is always enabled when compiling svelte components, or document this.