Skip to content

Commit 133472c

Browse files
dummdidummdummdidumm
authored
breaking: svelte-preprocess 6 (#640)
- breaking: remove TS mixed imports support, require TS 5.0 or higher - breaking: require Svelte 4+, Node 18+ - breaking: add exports map - fix: adjust type import - fix: remove pug types from dependencies - fix: allow TS filename to be undefined, fixes #488 - chore: replace jest with vitest - chore: relax eslint config - chore: bump peer deps, fixes #553, closes#635 - chore: update CI, closes #638 - chore: get rid of magic-string as it's no longer used, bump node types - docs: migration info
1 parent aa36477 commit 133472c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+7176
-5551
lines changed

‎.eslintrc‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22
"extends": ["@kiwi"],
33
"env": {
44
"node": true,
5-
"jest": true
5+
"jest": true,
66
},
77
"rules": {
88
"@typescript-eslint/no-explicit-any": "off",
99
"@typescript-eslint/ban-types": "off",
1010
"@typescript-eslint/prefer-nullish-coalescing": "off",
1111
"@typescript-eslint/no-non-null-assertion": "off",
1212
"no-console": "off",
13-
"line-comment-position": "off"
14-
}
13+
"line-comment-position": "off",
14+
"import/order": "off",
15+
"@typescript-eslint/ban-ts-comment": "off",
16+
},
1517
}

‎.github/workflows/ci.yml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ jobs:
66
Lint:
77
runs-on: ubuntu-latest
88
steps:
9-
- uses: actions/checkout@v2
10-
- uses: pnpm/action-setup@v2
9+
- uses: actions/checkout@v4
10+
- uses: pnpm/action-setup@v4
1111
- uses: actions/setup-node@v4
1212
with:
13-
node-version: 16
13+
node-version: 18
1414
cache: 'pnpm'
1515
- run: pnpm install
1616
- run: pnpm lint
@@ -19,13 +19,13 @@ jobs:
1919
runs-on: ${{ matrix.os }}
2020
strategy:
2121
matrix:
22-
node-version: [16, 18, 20]
22+
node-version: [18, 20, 22]
2323
os: [ubuntu-latest, windows-latest, macOS-latest]
2424

2525
steps:
2626
- run: git config --global core.autocrlf false
27-
- uses: actions/checkout@v2
28-
- uses: pnpm/action-setup@v2
27+
- uses: actions/checkout@v4
28+
- uses: pnpm/action-setup@v4
2929
- uses: actions/setup-node@v4
3030
with:
3131
node-version: ${{ matrix.node-version }}

‎docs/migration-guide.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,3 +90,9 @@ sveltePreprocess({
9090
In `v3`, `svelte-preprocess` was able to type-check Svelte components. However, giving the specifics of the structure of a Svelte component and how the `script` and `markup` contents are related, type-checking was sub-optimal.
9191

9292
In `v4`, your TypeScript code will only be transpiled into JavaScript, with no type-checking whatsoever. We're moving the responsibility of type-checking to tools better fit to handle it, such as [`svelte-check`](https://www.npmjs.com/package/svelte-check), for CLI and CI usage, and the [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension, for type-checking while developing.
93+
94+
## From `v5` to `v6`
95+
96+
- Svelte 4 or higher is required now
97+
- Node 18 or higher is required now
98+
- When using TypeScript, the minimum required version is now 5.0, `"verbatimModuleSyntax": true` is now required in your `tsconfig.json`, and the mixed imports transpiler was removed

‎docs/preprocessing.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ Apart from those, the Pug preprocessor accepts:
288288
| Option | Default | Description |
289289
| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------- |
290290
| `markupTagName` | `template` | the tag name used to look for the optional markup wrapper. If none is found, `pug` is executed over the whole file. |
291-
| `configFilePath` | `undefined` | the path of the directory containing the Pug configuration. |
291+
| `configFilePath` | `undefined` | the path of the directory containing the Pug configuration. |
292292

293293
**Template blocks:**
294294

@@ -367,20 +367,21 @@ Note: `svelte-preprocess` automatically configures inclusion paths for your root
367367

368368
### TypeScript
369369

370-
| Option | Default | Description |
371-
| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
372-
| `tsconfigDirectory` | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'` |
373-
| `tsconfigFile` | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'` |
374-
| `compilerOptions` | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found. |
375-
| `handleMixedImports` | inferred | optional `boolean` that defines the transpilation strategy. If set to `true`, you don't need to strictly separate types and values in imports. You need at least Svelte version 3.39 if you want to use this. `true` by default if you meet the minimum version requirement, else `false`. This option will be ignored if you set `preserveValueImports` to `true` in your `tsconfig.json`. |
370+
Since version 5, Svelte supports TypeScript natively with a few exceptions: You can only use type-only syntax, i.e. syntax that is just removed from the resulting JS output, and doesn't require code. Non-type-only features are decorators for example. If you need those features, you need to still use a TypeScript preprocessor like this one, else you can omit it.
371+
372+
| Option | Default | Description |
373+
| ------------------- | ----------- | ----------------------------------------------------------------------------------------------------------- |
374+
| `tsconfigDirectory` | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'` |
375+
| `tsconfigFile` | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'` |
376+
| `compilerOptions` | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found. |
376377

377378
You can check the [`compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for specific TypeScript options.
378379

379380
#### Typescript - Limitations
380381

381382
- Since `v4`, `svelte-preprocess` doesn't type-check your component, its only concern is to transpile it into valid JavaScript for the compiler. If you want to have your components type-checked, you can use [svelte-check](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md).
382383

383-
- Using TypeScript inside a component's markup is currently **not** supported. See [#525](https://github.com/sveltejs/svelte-preprocess/issues/525) for development updates to this.
384+
- Using TypeScript features that are not type-only (i.e. are transpiled to different JS code) inside a component's markup is currently **not** supported. See [#525](https://github.com/sveltejs/svelte-preprocess/issues/525) for development updates to this.
384385

385386
### `globalStyle`
386387

‎jest.config.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎package.json‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,20 @@
44
"license": "MIT",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",
7+
"exports": {
8+
".": {
9+
"types": "./dist/index.d.ts",
10+
"default": "./dist/index.js"
11+
},
12+
"./package.json": "./package.json"
13+
},
714
"description": "A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors",
815
"author": "Christian Kaisermann <christian@kaisermann.me>",
916
"repository": "https://github.com/sveltejs/svelte-preprocess",
1017
"keywords": [
1118
"svelte",
1219
"preprocess",
20+
"typescript",
1321
"less",
1422
"stylus",
1523
"sass",
@@ -18,9 +26,9 @@
1826
"coffeescript"
1927
],
2028
"engines": {
21-
"node": ">= 16.0.0"
29+
"node": ">= 18.0.0"
2230
},
23-
"packageManager": "pnpm@8.12.1",
31+
"packageManager": "pnpm@9.3.0",
2432
"volta": {
2533
"node": "20.10.0"
2634
},
@@ -31,7 +39,7 @@
3139
"prebuild": "node scripts.js rmrf ./dist",
3240
"build": "tsc --build tsconfig.build.json",
3341
"dev": "pnpm build -w",
34-
"test": "jest",
42+
"test": "vitest run",
3543
"lint": "eslint --ext js,ts .",
3644
"format": "prettier --write \"**/*.{ts,js,json}\"",
3745
"postinstall": "echo \"[svelte-preprocess] Don't forget to install the preprocessors packages that will be used: sass, stylus, less, postcss & postcss-load-config, coffeescript, pug, etc...\"",
@@ -46,15 +54,6 @@
4654
"@commitlint/config-conventional"
4755
]
4856
},
49-
"lint-staged": {
50-
"*.{ts,js,tsx,jsx}": [
51-
"eslint --fix",
52-
"prettier --write"
53-
],
54-
"*.json": [
55-
"prettier --write"
56-
]
57-
},
5857
"devDependencies": {
5958
"@babel/core": "^7.23.6",
6059
"@babel/preset-env": "^7.23.6",
@@ -63,48 +62,43 @@
6362
"@kiwi/eslint-config": "^2.0.2",
6463
"@kiwi/prettier-config": "^2.0.2",
6564
"@types/babel__core": "^7.20.5",
66-
"@types/jest": "^27.5.2",
67-
"@types/node": "^14.18.34",
65+
"@types/node": "^18.0.0",
66+
"@types/pug": "^2.0.6",
6867
"@types/stylus": "^0.48.38",
6968
"autoprefixer": "^10.4.16",
7069
"babel-minify": "^0.5.2",
7170
"coffeescript": "^2.7.0",
7271
"conventional-changelog-cli": "^2.2.2",
7372
"eslint": "^8.29.0",
74-
"jest": "^29.5.0",
7573
"less": "^3.13.1",
76-
"lint-staged": "^10.5.4",
7774
"postcss": "^8.4.32",
7875
"postcss-easy-import": "^4.0.0",
7976
"postcss-load-config": "^3.1.4",
80-
"prettier": "^2.8.1",
77+
"prettier": "^3.3.2",
8178
"pug": "^3.0.2",
8279
"sass": "^1.56.2",
8380
"stylus": "^0.55.0",
8481
"sugarss": "^4.0.0",
85-
"svelte": "^3.54.0",
86-
"ts-jest": "^29.1.1",
87-
"typescript": "^5.0.2"
82+
"svelte": "^4.0.0",
83+
"typescript": "^5.0.2",
84+
"vitest": "^1.6.0"
8885
},
8986
"dependencies": {
90-
"@types/pug": "^2.0.6",
9187
"detect-indent": "^6.1.0",
92-
"magic-string": "^0.30.5",
93-
"sorcery": "^0.11.0",
9488
"strip-indent": "^3.0.0"
9589
},
9690
"peerDependencies": {
9791
"@babel/core": "^7.10.2",
9892
"coffeescript": "^2.5.1",
9993
"less": "^3.11.3 || ^4.0.0",
10094
"postcss": "^7 || ^8",
101-
"postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
95+
"postcss-load-config": ">=3",
10296
"pug": "^3.0.0",
10397
"sass": "^1.26.8",
104-
"stylus": "^0.55.0",
98+
"stylus": ">=0.55",
10599
"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
106-
"svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0",
107-
"typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
100+
"svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0",
101+
"typescript": "^5.0.0"
108102
},
109103
"peerDependenciesMeta": {
110104
"@babel/core": {

0 commit comments

Comments
 (0)