Hello, I’m integrating Svelte into my Meteor project. I’m using the svelte:compiler and svelte packages. On the backend I’m using Typescript, the native Meteor version.
I’d like to take advantage of Typescript on the frontend too. Now Svelte just has included Typescript support as well. How do I do this? Does anyone know if there is an update underway of svelte:compiler and do I even need this?
Best,
I was wondering the same actually …
That’s enough backup for me to make it an issue on github svelte:compiler
Here’s a PoC plugin built over zodern:melte with TS and SCSS support if you still wish to try: The trusted source for JavaScript packages, Meteor resources and tools | Atmosphere
I checked it out but but only got this:
modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:234 Uncaught Error: Cannot find module 'meteor/zodern:melte/hmr-runtime.js'
at makeMissingError (modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:234)
at Module.resolve (modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:249)
at Module.moduleLink [as link] (modules.js?hash=5e33e7657f09c1af865ec3fed6444213081adbc4:303)
at app.js?hash=3c916bc7f2a59d2f442273d903ad60ec932dd101:60
at module (app.js?hash=3c916bc7f2a59d2f442273d903ad60ec932dd101:185)
at fileEvaluate (modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:388)
at Module.require (modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:270)
at Module.moduleLink [as link] (modules.js?hash=5e33e7657f09c1af865ec3fed6444213081adbc4:310)
at module (main.ts:1)
at fileEvaluate (modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:388)
makeMissingError @ modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:234
Module.resolve @ modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:249
moduleLink @ modules.js?hash=5e33e7657f09c1af865ec3fed6444213081adbc4:303
(anonymous) @ app.js?hash=3c916bc7f2a59d2f442273d903ad60ec932dd101:60
module @ app.js?hash=3c916bc7f2a59d2f442273d903ad60ec932dd101:185
fileEvaluate @ modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:388
require @ modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:270
moduleLink @ modules.js?hash=5e33e7657f09c1af865ec3fed6444213081adbc4:310
module @ main.ts:1
fileEvaluate @ modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:388
require @ modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:270
require @ modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:310
(anonymous) @ app.js?hash=3c916bc7f2a59d2f442273d903ad60ec932dd101:229
hot-module-replacement.js?hash=22d8cfbe1ca1509fc13b6f268883287a7c6b3b6c:299 HMR: connected
Any progress? I’m exploring this as well
No. I think you have to use svelte - preprocessor and use that to compile typescript in svelte. Since that is done before svelte gets compiled itself, I don’t think there should be an issue with Meteor. I abandoned Typescript. It does away with all the Javascript advantages. For Meteor the refactoring is a pain. I figured I didn’t need schemas anymore for MongoDB, which is not true. I hate simple schema, but TS doesn’t take its place. I use check / Match now. Works well. Good luck!
By now, yes. You have to use zodern:melte, svelte-preprocess, typescript through npm, to allow compiling Svelte script tags (), as well as typescript with Meteor (meteor add typescript). Key is to have the right versions of everything. Typescript with Meteor is 4.4.1, but I can’t find a normal one of this on npm, so I use 4.4.2. I’m also using Svelte 3.29.7. Found that one by trial and error.
Trialled and errored a bit further: Using Svelte 3.36.0 now.
Funny, every time I search for the combination of svelte, meteor and typescript I stumble upon my own post.
I had to spend another day trialling and erroring the most updated versions that work together. I now use:
npm modules:
svelte: 3.46.4
svelte-preprocess: 5.0.0
tinro: 0.6.12
typescript front end: 4.9.4
meteor packages:
meteor: 2.9.0
static-html: 1.3.2
typescript back end: 4.6.4
zodern:melte: 1.6.1
zodern:melte-compiler: 1.3.1
this is in the package.json:
“svelte:compiler”: {
“extensions”: [
“svelte”
],
“hydratable”: false,
“css”: true
}
I don’t use server side rendering.
You can certainly use the newest svelte version. When I have some spare time, I want to publish a working guide. There is just one issue left and that is broken sourcemaps and eg console.logs refer to incorrect code.
Also, the atmospehere typescript seems to be working better than the npm version. I am yet to investigate because it seems to be a bit inconsistent.
Use the zodern:types package, that helps a lot with importing. There is a bug in 2.9.0 that breaks it for some modules though.
Also, the tsconfig needs to be correctly set. This seems to be my minimal setup:
{
// see https://guide.meteor.com/build-tool.html#typescript for a config example
"compilerOptions": {
"allowSyntheticDefaultImports": true, // to be able to import eg meteor/mongo
"baseUrl": ".", // required by "paths"
"module": "esNext", // required by "preserveValueImports"
"moduleResolution": "node", // required by zodern:types (not documented)
"paths": {
"/*": ["*"], // support absolute /imports/* with a leading '/'
// support Meteor/Atmospehere packages, required by zodern:types
"meteor/*": [
"node_modules/@types/meteor/*",
".meteor/local/types/packages.d.ts"
]
},
"preserveSymlinks": true, // required by zodern:types
"preserveValueImports": true, // otherwise TS will remove imported components
"types": ["node", "svelte"]
},
"exclude": ["./.meteor/**", "./packages/**"] // this may solve VS Code Svelte plugin warnings
}
Lots of overlap, mine is not as minimal.
One module not in zodern:types is meteor-roles, so I have it in “types”:[
{
"compilerOptions": {
/* Basic Options */
"target": "es2018",
"module": "esNext",
"lib": ["esnext", "dom"],
"allowJs": true,
"checkJs": false,
"jsx": "preserve",
"incremental": true,
"noEmit": true,
/* Strict Type-Checking Options */
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
/* Additional Checks */
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": false,
"preserveValueImports": true,
/* Module Resolution Options */
"baseUrl": ".",
"paths": {
/* Support absolute /imports/* with a leading '/' */
"/*": ["*"],
"meteor/*":[
"node_modules/@types/meteor/*",
".meteor/local/types/packages.d.ts"
]
},
"moduleResolution": "node",
"resolveJsonModule": true,
"types": ["node", "meteor-roles"],
"esModuleInterop": true,
"preserveSymlinks": true,
// added for dayjs package:
"allowSyntheticDefaultImports": true
},
/* Include inserted to solve problem after deleting files */
"include": ["**/*"],
"exclude": ["./.meteor/**", "./packages/**"],
}
Hello, I’m integrating Svelte into my Meteor project. I’m using the svelte:compiler and svelte packages. On the backend I’m using Typescript, the native Meteor version.
I’d like to take advantage of Typescript on the frontend too. Now Svelte just has included Typescript support as well. How do I do this? Does anyone know if there is an update underway of svelte:compiler and do I even need this?
Best,