Svelte 4 support and ESM as default

[benmccann]

Fixes #121

[sebastianrothe]

Fixes #121

[sebastianrothe]

I guess we need to do the following things:

• Upgrade Svelte to 4
• Fix tests
• Add another e2e test for Svelte4 (vite setup)

[benmccann]

Thanks for the review @sebastianrothe. Do you think we could merge this and get a new version out?

[sebastianrothe]

Thanks for the review @sebastianrothe. Do you think we could merge this and get a new version out?

Yes, looks good. I am going to merge it and try to release it this evening. Should we make it a new Major? V4?

[benmccann]

Yeah, it's probably worthy of a new major

[rallets]

Hi @benmccann @sebastianrothe, is it possible to get more info about the new config section

"globals": {
    "ts-jest": {
      "tsconfig": "tsconfig.spec.json",
      "useESM": true
    }
  },

and why do we need a custom tsconfig.spec.json?
Is it ok to reuse the standard/existing tsconfig.json ? If omitted, it falls back to that?
Thanks

[sebastianrothe]

Hi @benmccann @sebastianrothe, is it possible to get more info about the new config section

"globals": {
    "ts-jest": {
      "tsconfig": "tsconfig.spec.json",
      "useESM": true
    }
  },

and why do we need a custom tsconfig.spec.json? Is it ok to reuse the standard/existing tsconfig.json ? If omitted, it falls back to that? Thanks

The important thing is the flag for ESM: "useESM": true. (https://kulshekhar.github.io/ts-jest/docs/guides/esm-support)

Most projects have a dedicated tsconfig for tests, which only includes the sources for the tests. The reason is, that the compiler and tests run faster, if it doesn't have to scan the whole project.

Likewise, for your default tsconfig.json, test sources can be excluded there, so they don't slow down the compiler on this side.

Depending on your specific tsconfig.json you can omit it with ts-jest and then your default one is used.

[rallets]

@sebastianrothe tks for the explanation, I got it. I'm just testing the new release, and found a typo in the suggested configs:
"extensionsToTreatAsEsm": ["svelte"]
should be
"extensionsToTreatAsEsm": [".svelte"] <= note the dot

otherwise you get the error:

Validation Error:

  Option: extensionsToTreatAsEsm: ['svelte', 'ts'] includes a string that does not start with a period (.).
  Please change your configuration to extensionsToTreatAsEsm: ['.svelte', '.ts'].

[sebastianrothe]

Thanks. Should be fixed with #142

[rallets]

@sebastianrothe then I got another warning about the deprecated usage of globals:

ts-jest[ts-jest-transformer] (WARN) Define `ts-jest` config under `globals` is deprecated. Please do
transform: {
    <transform_regex>: ['ts-jest', { /* ts-jest config goes here in Jest */ }],
},

then I removed globals and moved to transform:

"transform": {
        "^.+\\.svelte$": [
            "svelte-jester",
            {
                "preprocess": "./App/svelte-pipeline/svelte.config.js"
            }
        ],
        "^.+\\.ts$": [
            "ts-jest",
            {
                "tsconfig": "<rootDir>/tsconfig.spec.json",
                "useESM": true
            }
        ]
    },

I can confirm that now I can run all the tests as before this release (so no breaking changes) and also I can test Svelte components and stores, that previously I could not.

Tks for your time!

[sebastianrothe]

This will be addressed in #142 as well.

Since it is just a warning, we did not change it until now.