Skip to content

Commit 480ee29

Browse files
dummdidummSimon Holthausenkaisermann
authored
(feat) support preserveValueImports introduced in TS 4.5 (#434)
* (feat) support preserveValueImports introduced in TS 4.5 This new flag keeps imports as is, essentially functioning the same as the import transformer. * Update test/transformers/typescript.test.ts Co-authored-by: Simon Holthausen <[email protected]> Co-authored-by: Christian Kaisermann <[email protected]>
1 parent 6c6c62b commit 480ee29

File tree

6 files changed

+49
-20
lines changed

6 files changed

+49
-20
lines changed

‎docs/preprocessing.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ export default {
6767

6868
The following options can be passed to the preprocessor. None are required:
6969

70-
| Option | Default | Description |
71-
| --------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
72-
| `markupTagName` | `"template"` | `string` that sets the name of the tag `svelte-preprocess` looks for markup in custom languages.<br><br>i.e `markup` makes it possible to write your markup between `<markup lang="..."></markup>` tag. |
73-
| `aliases` | `null` | A list of tuples `[alias: string, language: string]` that correlates an `alias` to a `language`<br><br>i.e `['cst', 'customLanguage']` means<br>`<... src="./file.cst">`<br>`<... lang="cst">`<br>are treated as `customLanguage`. |
74-
| `preserve` | `[]` | A `string` list of languages/aliases that shouldn't pass through the preprocessor. (i.e `ld+json`) |
75-
| `sourceMap` | `false` | If `true`, `svelte-preprocess` generates sourcemap for every language that supports it. |
70+
| Option | Default | Description |
71+
| --------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
72+
| `markupTagName` | `"template"` | `string` that sets the name of the tag `svelte-preprocess` looks for markup in custom languages.<br><br>i.e `markup` makes it possible to write your markup between `<markup lang="..."></markup>` tag. |
73+
| `aliases` | `null` | A list of tuples `[alias: string, language: string]` that correlates an `alias` to a `language`<br><br>i.e `['cst', 'customLanguage']` means<br>`<... src="./file.cst">`<br>`<... lang="cst">`<br>are treated as `customLanguage`. |
74+
| `preserve` | `[]` | A `string` list of languages/aliases that shouldn't pass through the preprocessor. (i.e `ld+json`) |
75+
| `sourceMap` | `false` | If `true`, `svelte-preprocess` generates sourcemap for every language that supports it. |
7676

7777
##### Configuring preprocessors
7878

@@ -368,12 +368,12 @@ Note: `svelte-preprocess` automatically configures inclusion paths for your root
368368

369369
### TypeScript
370370

371-
| Option | Default | Description |
372-
| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
373-
| `tsconfigDirectory` | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'` |
374-
| `tsconfigFile` | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'` |
375-
| `compilerOptions` | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found. |
376-
| `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`. |
371+
| Option | Default | Description |
372+
| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
373+
| `tsconfigDirectory` | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'` |
374+
| `tsconfigFile` | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'` |
375+
| `compilerOptions` | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found. |
376+
| `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`. |
377377

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

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
"sugarss": "^2.0.0",
8888
"svelte": "^3.42.0",
8989
"ts-jest": "^25.1.0",
90-
"typescript": "^4.4.2"
90+
"typescript": "^4.5.2"
9191
},
9292
"dependencies": {
9393
"@types/pug": "^2.0.4",

‎src/transformers/typescript.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,11 @@ async function simpleTranspiler({
466466
}: InternalTransformerOptions) {
467467
const { transpiledCode, sourceMapText, diagnostics } = transpileTs({
468468
code: content,
469-
transformers: { before: [importTransformer] },
469+
// `preserveValueImports` essentially does the same as our import transformer,
470+
// keeping all imports that are not type imports
471+
transformers: compilerOptions.preserveValueImports
472+
? undefined
473+
: { before: [importTransformer] },
470474
fileName: filename,
471475
basePath,
472476
options,
@@ -505,9 +509,10 @@ const transformer: Transformer<Options.Typescript> = async ({
505509
}
506510

507511
const handleMixedImports =
508-
options.handleMixedImports === false
512+
!compilerOptions.preserveValueImports &&
513+
(options.handleMixedImports === false
509514
? false
510-
: options.handleMixedImports || canUseMixedImportsTranspiler;
515+
: options.handleMixedImports || canUseMixedImportsTranspiler);
511516

512517
return handleMixedImports
513518
? mixedImportsTranspiler({

‎test/fixtures/PreserveValueImports.svelte

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script lang="ts">
2+
import { type Foo, Bar } from './somewhere';
3+
import Component from './component.svelte';
4+
import { Value } from './value';
5+
import type { Type } from './type';
6+
</script>

‎test/transformers/typescript.test.ts

+18
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,24 @@ describe('transformer - typescript', () => {
140140
expect(code).toContain('<!-- Some comment -->');
141141
});
142142

143+
it('should keep all value imports with preserveValueImports', async () => {
144+
const tpl = getFixtureContent('PreserveValueImports.svelte');
145+
146+
const opts = sveltePreprocess({
147+
typescript: {
148+
tsconfigFile: false,
149+
compilerOptions: { preserveValueImports: true },
150+
},
151+
});
152+
153+
const { code } = await preprocess(tpl, opts);
154+
155+
expect(code).toContain("import { Bar } from './somewhere'");
156+
expect(code).toContain("import Component from './component.svelte'");
157+
expect(code).toContain("import { Value } from './value'");
158+
expect(code).not.toContain("'./type'");
159+
});
160+
143161
it('should deal with empty transpilation result', async () => {
144162
const tpl = getFixtureContent('TypeScriptTypesOnly.svelte');
145163

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -7759,10 +7759,10 @@ typedarray-to-buffer@^3.1.5:
77597759
dependencies:
77607760
is-typedarray "^1.0.0"
77617761

7762-
typescript@^4.4.2:
7763-
version "4.4.2"
7764-
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86"
7765-
integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==
7762+
typescript@^4.5.2:
7763+
version "4.5.2"
7764+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
7765+
integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
77667766

77677767
uglify-js@^3.1.4:
77687768
version "3.12.1"

0 commit comments

Comments
 (0)