Confirm compatibility between @rollup/plugin-typescript and @web/dev-server

[ouweiya]

The documentation mentions that @rollup/plugin-typescript does not work properly. However, after trying to use @rollup/plugin-typescript in @web/dev-server, I found no errors and it seems to work as expected.

Here is the code:

import typescript from '@rollup/plugin-typescript';
const ts = fromRollup(typescript);

export default {
  ...
  plugins: [ts()],
};

Is this due to an update in the packages, but the documentation has not been updated yet?
Or is it because some features of TypeScript are not supported?

The problem encountered at the moment is that during the development process, TypeScript compilation is slower than page refresh, causing the page to display data from the previous iteration.

[koddsson]

The problem encountered at the moment is that during the development process, TypeScript compilation is slower than page refresh, causing the page to display data from the previous iteration.

With @rollup/plugin-typescript? Have you considered using the esbuild plugin like the docs suggest? I think performance is the main reason that the esbuild plugin is recommended over the Rollup one.

[ouweiya]

The downside is that esbuild doesn't do any type checking, it only strips types.
https://modern-web.dev/guides/dev-server/typescript-and-jsx/#esbuild

The biggest issue is the gap between TypeScript and esbuild. If TypeScript is used in the production environment and esbuild is used in the development environment, it will inevitably result in unexpected differences, and the two are not well compatible. Esbuild does not support types and only supports a limited number of tsconfig.json configurations.

In the end, I used rollup-plugin-serve and rollup-plugin-livereload to replace @web/dev-server. I am disappointed that, as a modern development server, it cannot work out-of-the-box with TypeScript, which should be a standard feature.

[koddsson]

The downside is that esbuild doesn't do any type checking,

I've just used the TypeScript compiler as part of an LSP in my editor and then as part of the CI/CD process by adding a tsc --check to the test script.

I'm curious to what else you'd like TypeScript to do in a development server.

[ouweiya]

The useDefineForClassFields is not supported, causing errors when using Lit.
Lit-related documentation:
https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields

Error: The following properties on element my-two will not trigger updates as expected because they are set using class fields: firstName. Native class fields and some compiled output will overwrite accessors used for detecting changes.

Development environment:

"@web/dev-server-esbuild": "^0.3.4",
"rollup": "^3.19.1",
"@web/dev-server": "^0.1.36",

tsconfig.json

{
"compilerOptions": {
   ...
    "module": "es2022",
    "target": "es2022",
    "strict": true,
    "lib": ["es2022", "dom", "dom.iterable"],
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
  },
}

I found related documentation for esbuild:
https://esbuild.github.io/content-types/#tsconfig-json

Note: TypeScript silently shipped a breaking change in version 4.3.2 where if the useDefineForClassFields option is not specified, it defaults to true if you specify target: "ESNext" (and later on also target: "ES2022" or newer). Before version 4.3.2, the useDefineForClassFields option always defaulted to false. The latest version of esbuild has been updated to reflect the behavior of TypeScript version 4.3.2. If you need the old behavior, make sure to specify useDefineForClassFields: false in addition to target: "ESNext". See TypeScript PR #42663 for more information.

Lit code:

@customElement('my-two')
class Two extends LitElement {
  @property()
  firstName: any;

  render() {
    return html`<p class="text-green-600">Hello, ${this.firstName}!</p>`;
  }
}

@customElement('my-element')
class One extends LitElement {
  render() {
    return html`
      <p class="text-red-500 bg-purple-400">Hello from my template.</p>  
      <my-two .firstName="${8888}"></my-two>
    `;
  }
}

[thepassle]

useDefineForClassFields should be supported, iirc you also have to set the esbuild target for it to work

[ouweiya]

I set "target": "esnext", and "useDefineForClassFields": false, and all dependency versions are up to date, but I'm still out of luck.

[thepassle]

@jpzwarte dont you have a ts+wds/esbuild setup running? Could you share your setup?

[ouweiya]

My minimal demo library.

https://github.com/ouweiya/esbuild-dev-server

[ouweiya]

I know the reason why configure doesn't work.

https://modern-web.dev/docs/dev-server/plugins/esbuild/#examples

Transform all .ts files to javascript using settings from tsconfig.json. (The tsconfig.json file is not read by default.)

plugins: [esbuildPlugin({ ts: true, tsconfig: fileURLToPath(new URL('./tsconfig.json', import.meta.url)) })],

[ouweiya]

In the end, I've decided to give up on using esbuild and continue with tsc instead, as it requires focusing on too many details for both, especially when using two different TypeScript compilers for the same codebase. The hidden development costs of this approach far outweigh the convenience brought by @web/dev-server.

Thank you to those who have helped me; you have all been very enthusiastic and friendly. I appreciate your assistance.