zodern / melte Goto Github PK
View Code? Open in Web Editor NEWSvelte compiler for Meteor with built in tracker integration and HMR
License: MIT License
Svelte compiler for Meteor with built in tracker integration and HMR
License: MIT License
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:
git clone https://github.com/qnipp/meteor-svelte-tracker-ssr-example
cd meteor-svelte-tracker-ssr-example; meteor update
meteor npm install --save [email protected] @babel/runtime
meteor add hot-module-replacement
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'
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:
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}
You do not need to include anything for $m:
to work.
$ 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 load recent PostCSS plugin versions.<style>
blocks
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.
See also my repo with the results of these steps.
meteor create --svelte
meteor npm install --save-dev postcss postcss-load-config postcss-nested
postcss.config.js
to load postcss-nested
plugin (like this)svelte:compiler
's css
option to false
in package.json
(like this)<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
package.json
standard-minifier-css
for juliancwirko:postcss
css: true
in svelte:compiler
optionsmeteor reset
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
cd /tmp
meteor create --svelte repro
cd repro
meteor add platform android
meteor run android-device --mobile-server http://<meteor host IP>:3000
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:
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-sveltecarbon-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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.