Skip to content

Commit

Permalink
breaking: svelte-preprocess 6 (#640)
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
dummdidumm committed Jun 12, 2024
1 parent aa36477 commit 133472c
Show file tree
Hide file tree
Showing 42 changed files with 7,176 additions and 5,551 deletions.
8 changes: 5 additions & 3 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
}
12 changes: 6 additions & 6 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 }}
Expand Down
6 changes: 6 additions & 0 deletions docs/migration-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
17 changes: 9 additions & 8 deletions docs/preprocessing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:**

Expand Down Expand Up @@ -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`

Expand Down
19 changes: 0 additions & 19 deletions jest.config.js

This file was deleted.

48 changes: 21 additions & 27 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 <[email protected]>",
"repository": "https://github.com/sveltejs/svelte-preprocess",
"keywords": [
"svelte",
"preprocess",
"typescript",
"less",
"stylus",
"sass",
Expand All @@ -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"
},
Expand All @@ -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...\"",
Expand All @@ -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",
Expand All @@ -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": {
Expand Down
Loading

0 comments on commit 133472c

Please sign in to comment.