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
sveltejs · Jun 12, 2024 · 133472c · 133472c
1 parent aa36477
commit 133472c
Show file tree

Hide file tree

Showing 42 changed files with 7,176 additions and 5,551 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,14 +2,16 @@
   "extends": ["@kiwi"],
   "env": {
     "node": true,
-    "jest": true
+    "jest": true,
   },
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/prefer-nullish-coalescing": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "no-console": "off",
-    "line-comment-position": "off"
-  }
+    "line-comment-position": "off",
+    "import/order": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+  },
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -6,11 +6,11 @@ jobs:
   Lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 18
           cache: 'pnpm'
       - run: pnpm install
       - run: pnpm lint
@@ -19,13 +19,13 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [16, 18, 20]
+        node-version: [18, 20, 22]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
       - run: git config --global core.autocrlf false
-      - uses: actions/checkout@v2
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}

diff --git a/docs/migration-guide.md b/docs/migration-guide.md
@@ -90,3 +90,9 @@ sveltePreprocess({
 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.
 
 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.
+
+## From `v5` to `v6`
+
+- Svelte 4 or higher is required now
+- Node 18 or higher is required now
+- 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
diff --git a/docs/preprocessing.md b/docs/preprocessing.md
@@ -288,7 +288,7 @@ Apart from those, the Pug preprocessor accepts:
 | Option           | Default     | Description                                                                                                         |
 | ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------- |
 | `markupTagName`  | `template`  | the tag name used to look for the optional markup wrapper. If none is found, `pug` is executed over the whole file. |
-| `configFilePath` | `undefined` | the path of the directory containing the Pug configuration.                                                     |
+| `configFilePath` | `undefined` | the path of the directory containing the Pug configuration.                                                         |
 
 **Template blocks:**
 
@@ -367,20 +367,21 @@ Note: `svelte-preprocess` automatically configures inclusion paths for your root
 
 ### TypeScript
 
-| Option               | Default     | Description                                                                                                                                                                                                                                                                                                                                                                                 |
-| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `tsconfigDirectory`  | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`                                                                                                                                                                                                                                                                                             |
-| `tsconfigFile`       | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                                                                                                                                                                                                                                                                                                   |
-| `compilerOptions`    | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found.                                                                                                                                                                                                                                                                                 |
-| `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`. |
+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.
+
+| Option              | Default     | Description                                                                                                 |
+| ------------------- | ----------- | ----------------------------------------------------------------------------------------------------------- |
+| `tsconfigDirectory` | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`             |
+| `tsconfigFile`      | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                   |
+| `compilerOptions`   | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found. |
 
 You can check the [`compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for specific TypeScript options.
 
 #### Typescript - Limitations
 
 - 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).
 
-- 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.
+- 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.
 
 ### `globalStyle`
 

diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -4,12 +4,20 @@
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "description": "A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors",
   "author": "Christian Kaisermann <christian@kaisermann.me>",
   "repository": "https://github.com/sveltejs/svelte-preprocess",
   "keywords": [
     "svelte",
     "preprocess",
+    "typescript",
     "less",
     "stylus",
     "sass",
@@ -18,9 +26,9 @@
     "coffeescript"
   ],
   "engines": {
-    "node": ">= 16.0.0"
+    "node": ">= 18.0.0"
   },
-  "packageManager": "pnpm@8.12.1",
+  "packageManager": "pnpm@9.3.0",
   "volta": {
     "node": "20.10.0"
   },
@@ -31,7 +39,7 @@
     "prebuild": "node scripts.js rmrf ./dist",
     "build": "tsc --build tsconfig.build.json",
     "dev": "pnpm build -w",
-    "test": "jest",
+    "test": "vitest run",
     "lint": "eslint --ext js,ts .",
     "format": "prettier --write \"**/*.{ts,js,json}\"",
     "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 @@
       "@commitlint/config-conventional"
     ]
   },
-  "lint-staged": {
-    "*.{ts,js,tsx,jsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.json": [
-      "prettier --write"
-    ]
-  },
   "devDependencies": {
     "@babel/core": "^7.23.6",
     "@babel/preset-env": "^7.23.6",
@@ -63,48 +62,43 @@
     "@kiwi/eslint-config": "^2.0.2",
     "@kiwi/prettier-config": "^2.0.2",
     "@types/babel__core": "^7.20.5",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^14.18.34",
+    "@types/node": "^18.0.0",
+    "@types/pug": "^2.0.6",
     "@types/stylus": "^0.48.38",
     "autoprefixer": "^10.4.16",
     "babel-minify": "^0.5.2",
     "coffeescript": "^2.7.0",
     "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.29.0",
-    "jest": "^29.5.0",
     "less": "^3.13.1",
-    "lint-staged": "^10.5.4",
     "postcss": "^8.4.32",
     "postcss-easy-import": "^4.0.0",
     "postcss-load-config": "^3.1.4",
-    "prettier": "^2.8.1",
+    "prettier": "^3.3.2",
     "pug": "^3.0.2",
     "sass": "^1.56.2",
     "stylus": "^0.55.0",
     "sugarss": "^4.0.0",
-    "svelte": "^3.54.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.0.2"
+    "svelte": "^4.0.0",
+    "typescript": "^5.0.2",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@types/pug": "^2.0.6",
     "detect-indent": "^6.1.0",
-    "magic-string": "^0.30.5",
-    "sorcery": "^0.11.0",
     "strip-indent": "^3.0.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.10.2",
     "coffeescript": "^2.5.1",
     "less": "^3.11.3 || ^4.0.0",
     "postcss": "^7 || ^8",
-    "postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
+    "postcss-load-config": ">=3",
     "pug": "^3.0.0",
     "sass": "^1.26.8",
-    "stylus": "^0.55.0",
+    "stylus": ">=0.55",
     "sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-    "svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0",
-    "typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
+    "svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0",
+    "typescript": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@babel/core": {