Type-checking development server

[daniel-j-h]

Hey folks,

I'm using this template right now and I develop by running npm run dev and then work on the source code.

Now it happened a few times already that I e.g. forgot an import, or mixed up types, or made mistakes in other ways for which I get no feedback from the compiler or type checker. Instead sometimes the rendered dom is just blank, sometimes I get a unrecognizable error in the browser console, and so on.

I thought the benefit of having this typescript template is to use the benefits of typescript for development? But it seems like typescript only comes in play in the npm run lint script (Related #67)?

Is there a way to have the development server make use of typescript by default, so that we can benefit from types immediately? Or have you folks left it out on purpose? What's the thinking behind this?

[rschristian]

Hm, I believe this used to be the case. Need to do some debugging, we might've upgraded it without correcting a logger config or something at one point.

But it seems like typescript only comes in play in the npm run lint script

Type checking is used on production builds, i.e., preact build .... This will in fact abort the build if there's issues.

[rschristian]

Ah, it's a pretty silly issue.

In order to ensure your terminal only shows the most recent build info, we clear on every recompile. The issue is the TS error comes before the clear, so you don't end up seeing it. Whoops!

For example, let's say I have const foo: string = 5;; my terminal will look like the following after a compile:

Compiled successfully!

You can view the application in browser.

Local:            http://0.0.0.0:3000
On Your Network:  http://192.168.100.132:3000

If I scroll up, however, I'll see:

ERROR in /home/ryun/Projects/foobar/src/components/app.tsx(9,7):
TS2322: Type 'number' is not assignable to type 'string'.
Version: typescript 4.5.4
Time: 6 ms
Compiled successfully!

You can view the application in browser.

Local:            http://0.0.0.0:3000
On Your Network:  http://192.168.100.132:3000

[rschristian]

I should add that this will never result in a failed (dev) build. That is a choice we've made. If you want your dev builds to fail, that's an easy fix you can do right now.

preact.config.js

export default (config, env, helpers) => {
    if (env.isWatch) {
        const { plugin } = helpers.getPluginsByName(config, 'ForkTsCheckerWebpackPlugin')[0];
        plugin.async = false;
    }
}

[daniel-j-h]

Awesome! 👏

In order to ensure your terminal only shows the most recent build info, we clear on every recompile. The issue is the TS error comes before the clear, so you don't end up seeing it. Whoops!

With this fixed the development server should be good to use 🙇 Thanks for preactjs/preact-cli#1635 🚀