-
-
Notifications
You must be signed in to change notification settings - Fork 432
TypeScript support updates (Sapper + Svelte 3) #760
Comments
You can import the I also have a file with the type info if you are interested: declare module '@sapper/app' {
// from sapper/runtime/src/app/types.ts
// sapper doesn't export its types yet
interface Redirect {
statusCode: number
location: string
}
// end
function goto(href: string, opts = { replaceState: false }): Promise<unknown>
function prefetch(href: string): Promise<{ redirect?: Redirect; data?: unknown }>
function prefetchRoutes(pathnames: string[]): Promise<unknown>
function start(opts: { target: Node }): Promise<unknown>
const stores: () => unknown
export { goto, prefetch, prefetchRoutes, start, stores }
}
declare module '@sapper/server' {
import { RequestHandler } from 'express'
interface MiddlewareOptions {
session?: (req: Express.Request, res: Express.Response) => unknown
ignore?: unknown
}
function middleware(opts: MiddlewareOptions = {}): RequestHandler
export { middleware }
}
declare module '@sapper/service-worker' {
const timestamp: number
const files: string[]
const shell: string[]
const routes: { pattern: RegExp }[]
export { timestamp, files, files as assets, shell, routes }
}
I have converted those 3 entry points to TS and added this to the config:
This is a hack and I would like to specify
Try |
That definition file is priceless :) thank you. Did try switching the endpoint, but now on
Still works tho, which is odd, not sure why it appended the tslib import to the Thanks for the input, much obliged. |
Not sure what might cause that tbh. I didn't have any luck with |
Here's the diff to enable typescript: diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 44cbdacd..41da3ec5 100644
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -1,9 +1,15 @@
+import {
+ createEnv,
+ preprocess,
+ readConfigFile,
+} from "@pyoner/svelte-ts-preprocess"
import babel from "rollup-plugin-babel"
import commonjs from "rollup-plugin-commonjs"
import resolve from "rollup-plugin-node-resolve"
import replace from "rollup-plugin-replace"
import svelte from "rollup-plugin-svelte"
import { terser } from "rollup-plugin-terser"
+import typescript from "rollup-plugin-typescript2"
import config from "sapper/config/rollup.js"
import pkg from "./package.json"
@@ -19,6 +25,16 @@ const onwarn = (warning, onwarn) =>
const dedupe = importee =>
importee === "svelte" || importee.startsWith("svelte/")
+const env = createEnv()
+const compilerOptions = readConfigFile(env)
+const opts = {
+ env,
+ compilerOptions: {
+ ...compilerOptions,
+ allowNonTsExtensions: true,
+ },
+}
+
export default {
client: {
input: config.client.input(),
@@ -32,12 +48,14 @@ export default {
dev,
hydratable: true,
emitCss: true,
+ preprocess: preprocess(opts),
}),
resolve({
browser: true,
dedupe,
}),
commonjs(),
+ typescript(),
legacy &&
babel({
@@ -83,11 +101,13 @@ export default {
svelte({
generate: "ssr",
dev,
+ preprocess: preprocess(opts),
}),
resolve({
dedupe,
}),
commonjs(),
+ typescript(),
],
external: Object.keys(pkg.dependencies).concat(
require("module").builtinModules,
@@ -106,6 +126,7 @@ export default {
"process.env.NODE_ENV": JSON.stringify(mode),
}),
commonjs(),
+ typescript(),
!dev && terser(),
],
I didn't test if legacy output still works though. |
I know this question is kind of stupid, but where do i need to put that definition file? If i put it in the index.d.ts of a types folder and add that to my typeRoots option in the tsconfig i keep getting something among the lines of "cannot find module @sapper/server" |
You need to add it to the types array too. "typeRoots": ["node_modules/@types", "typings"],
"types": ["@pyoner/svelte-types", "@sapper"] In my project |
do you have to put it in types array? doesnt it just become an ambient module declaration? |
From what I can remember, I also got the "cannot find module" error when I didn't do it. Adding it fixed it. Looking at the docs it should work without it too. Some things might not work as expected because there is an extra This is more or less speculation on my part but the fact is that adding |
@teoxoy would you like to publish those in DefinitelyTyped until there's official support? I needed to modify a bit as the start function can also take an Element |
I don't think the maintainers of DefinitelyTyped would accept it because there is no The contents of |
To the folks using typescript for both components and routes: what rough edges have you encountered? |
Any status update on this? |
I'm going about implementing this here https://github.com/avantci/svelte-ts |
One issue I just encountered is that the route |
Just got this all building; here's a Gist of the files I had to change. This gist captures all the comments made in this thread and makes a few updates. https://gist.github.com/eh-dub/4bf3b9137f0cd10780b6383c855d7ad1 |
https://github.com/Zimtir/SENT-template |
How far will sveltejs/svelte#4518 get you? |
The additional layer with Sapper is that, prior to your app being bundled, Sapper goes through each route component to see whether it exports a The actual logic use by Sapper during this preliminary phase is currently:
(*) it's actually slightly more complicated than this. Before compile-to-CSS preprocessors are fairly common, and since they will not affect whether the component has a preload, we actually blank out the It's the second phase that's a problem when component are written in typescript, because compiling the component as-is will fail. Telling Sapper what preprocessors to run on components before running this check would require some sort of configuration file, because it doesn't really make sense to pass code as a command line parameter. Either way, this is still kind of opinionitis-y. I'm not sure what a reasonable compromise is. The best I can think of is to assume that components that do contain the string |
So I've been trying for the past week to get
With the webpack template, I did the equivalent of adding
This results in issues with loading
then I get a 404 when I try navigating to
which succeeds (but adds a ton of boilerplate). I've tried studying https://github.com/MattNguyen/sapper-template-typescript which works but is based on an older version of |
take a moment to look at the following template https://github.com/Zimtir/SENT-template |
@Zimtir no it can't, I'm looking for a |
@leefan Perhaps the issue is that sapper is looking for files to be using module-style files and your If you can't change the
To
(making the above changes seemed to be enough for me) |
@ajbouh thanks so much!! That indeed was the problem, I had it configured for |
Could we generate |
@Conduitry could we search for It looks to me like |
This is a meta issue discussing multiple different issues. If the PR you're referring to is #1222 then I'm waiting for the maintainers to either provide additional feedback or approve and merge the PR |
@Zimtir In your template I experience the same challenge. The moment you use typescript in a component, then the preload will not work. It will be executed on the client but not on the server. |
@sesteva that issue has been fixed and Sapper 0.28.0 will add TypeScript support. We're trying to wrap up a few other issues before doing a release |
@benmccann That's amazing news!!!!!! |
Sapper 0.28 has been released with TypeScript support, so I'm going to close this There's a chance there are some outstanding rough edges since this is a new feature. If you encounter any bugs, it'd be best to file them as new issues since this one has gotten quite long and discussed many facets of the support |
@benmccann Is there any info on how to turn on TypeScript support in Sapper? |
Here's a template that I think is quite good: https://github.com/babichjacob/sapper-typescript-graphql-template |
Is there going to be official documentation of the feature in the sapper website? |
Probably because he hasn't seen that one. |
Is this really considered "done"? I appreciate all the work thats gone on here, but without any documentation, examples, or even a changelog beyond "typescript support!", it doesn't feel quite "finished". Can we reopen this? It'll be easier to reuse the references in this thread if we dont bury it, as there's a lot of valuable content. Sorry in advance if I'm missing something |
For example, the only way I could get sappers autogenerated internal |
@robcresswell I believe docs are work-in-progress: https://svelte.dev/blog/svelte-and-typescript#What_about_TypeScript_in_Sapper_projects |
This issue was about enabling typescript support, we definitely need to improve the documentation around this added support. I'd recommend opening a new issue, so it is easier to track and we can discuss the best way to document this, through examples, templates etc. If you have any suggestions then they would also be most welcome. |
I've also found that adding TypeScript to Sapper via You basically have to install module.exports = {
presets: [
['@babel/preset-env'],
['@babel/preset-typescript'],
],
plugins: [
// only if you need these (for TypeORM for example)
['babel-plugin-transform-typescript-metadata'],
['@babel/plugin-proposal-decorators', {legacy: true}],
['@babel/plugin-proposal-class-properties', {loose: true}],
]
} Then in plugins: [
// ...
babel({extensions: ['.ts', '.js', '.mjs']}),
] |
Good point about the Agreed that we should add more documentation as well. Though I think that we can just point people to the Svelte documentation for TypeScript once we generate the |
Hope this diff can help others use the Sapper 0.28 Typescript enabled feature: Used snippets from: https://github.com/babichjacob/sapper-typescript-graphql-template |
Has anyone still had issues with preload not being called even with v.28.0? I'm using webpack with typescript support and still not seeing preload getting hit |
Sapper 0.28.1 is out which provides the |
@benmccann Any updates on the documentation mentioned? and/or any official sapper-typescript template? |
Someone started a PR to add that: sveltejs/sapper-template#252 If someone would like to take it over, I'd be happy to help review and get it checked in |
Hi,
Just thought I'd share my experience with Sapper + TypeScript.
I have a monorepo with various "packages", and one of them is a Sapper app that I've mostly converted to TS with the help of some repos and issues from here. Thank you all for your efforts! I plan to share this monorepo boilerplate once it's more presentable than it is now :)
Only a few things stand out for me, that I'll summarize here for others who may want to adopt it too:
mjs
generated modules into./src/node_modules/@sapper
are impossible to import with TS for the moment, see Support.mjs
output microsoft/TypeScript#18442, TLDR: As far as I can tell at the moment it is not certain how Node will proceed withmjs
therefore TS is still unsure how to proceed too. Workrounds involve other dependencies that i'd like to avoid..js
so you have to keepclient.js
,server.js
andservice-worker.js
, it would be nice if we could configure this, or sapper accept one or the other.typescript
plugin, e.g.rollup-plugin-typescript2
<script lang="ts">
on*.svelte
components, for the moment, mostly because of point 1 here.So far so good, and I'm really enjoying the sapper/svelte world, IMO is much more readable/understandable overall than most other frameworks out there.
Thanks,
The text was updated successfully, but these errors were encountered: