Skip to content

Commit

Permalink
feat: support preserveValueImports introduced in TS 4.5 (#434)
Browse files Browse the repository at this point in the history 
* (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 <simon.holthausen@accso.de>
Co-authored-by: Christian Kaisermann <christian@kaisermann.me>
  • Loading branch information
@dummdidumm @kaisermann
3 people committed Dec 13, 2021
1 parent 6c6c62b commit 4ea9982
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 20 deletions.
24 changes: 12 additions & 12 deletions docs/preprocessing.md
View file
Expand Up @@ -67,12 +67,12 @@ export default {

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

| Option | Default | Description |
| --------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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. |
| `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`. |
| `preserve` | `[]` | A `string` list of languages/aliases that shouldn't pass through the preprocessor. (i.e `ld+json`) |
| `sourceMap` | `false` | If `true`, `svelte-preprocess` generates sourcemap for every language that supports it. |
| Option | Default | Description |
| --------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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. |
| `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`. |
| `preserve` | `[]` | A `string` list of languages/aliases that shouldn't pass through the preprocessor. (i.e `ld+json`) |
| `sourceMap` | `false` | If `true`, `svelte-preprocess` generates sourcemap for every language that supports it. |

##### Configuring preprocessors

Expand Down Expand Up @@ -368,12 +368,12 @@ 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`. |
| 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`. |

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

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -87,7 +87,7 @@
"sugarss": "^2.0.0",
"svelte": "^3.42.0",
"ts-jest": "^25.1.0",
"typescript": "^4.4.2"
"typescript": "^4.5.2"
},
"dependencies": {
"@types/pug": "^2.0.4",
Expand Down
11 changes: 8 additions & 3 deletions src/transformers/typescript.ts
View file
Expand Up @@ -466,7 +466,11 @@ async function simpleTranspiler({
}: InternalTransformerOptions) {
const { transpiledCode, sourceMapText, diagnostics } = transpileTs({
code: content,
transformers: { before: [importTransformer] },
// `preserveValueImports` essentially does the same as our import transformer,
// keeping all imports that are not type imports
transformers: compilerOptions.preserveValueImports
? undefined
: { before: [importTransformer] },
fileName: filename,
basePath,
options,
Expand Down Expand Up @@ -505,9 +509,10 @@ const transformer: Transformer<Options.Typescript> = async ({
}

const handleMixedImports =
options.handleMixedImports === false
!compilerOptions.preserveValueImports &&
(options.handleMixedImports === false
? false
: options.handleMixedImports || canUseMixedImportsTranspiler;
: options.handleMixedImports || canUseMixedImportsTranspiler);

return handleMixedImports
? mixedImportsTranspiler({
Expand Down
6 changes: 6 additions & 0 deletions test/fixtures/PreserveValueImports.svelte
View file
@@ -0,0 +1,6 @@
<script lang="ts">
import { type Foo, Bar } from './somewhere';
import Component from './component.svelte';
import { Value } from './value';
import type { Type } from './type';
</script>
18 changes: 18 additions & 0 deletions test/transformers/typescript.test.ts
View file
Expand Up @@ -140,6 +140,24 @@ describe('transformer - typescript', () => {
expect(code).toContain('<!-- Some comment -->');
});

it('should keep all value imports with preserveValueImports', async () => {
const tpl = getFixtureContent('PreserveValueImports.svelte');

const opts = sveltePreprocess({
typescript: {
tsconfigFile: false,
compilerOptions: { preserveValueImports: true },
},
});

const { code } = await preprocess(tpl, opts);

expect(code).toContain("import { Bar } from './somewhere'");
expect(code).toContain("import Component from './component.svelte'");
expect(code).toContain("import { Value } from './value'");
expect(code).not.toContain("'./type'");
});

it('should deal with empty transpilation result', async () => {
const tpl = getFixtureContent('TypeScriptTypesOnly.svelte');

Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Expand Up @@ -7759,10 +7759,10 @@ typedarray-to-buffer@^3.1.5:
dependencies:
is-typedarray "^1.0.0"

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

uglify-js@^3.1.4:
version "3.12.1"
Expand Down

0 comments on commit 4ea9982

Please sign in to comment.