Skip to content

(feat) support preserveValueImports introduced in TS 4.5 #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 13, 2021
Merged

(feat) support preserveValueImports introduced in TS 4.5 #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b67606
(feat) support preserveValueImports introduced in TS 4.5
Nov 18, 2021
bb35da6
Update test/transformers/typescript.test.ts
kaisermann Nov 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/preprocessing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick question: (when) have we removed the support for v3? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

never, these are the dev dependencies, not the peer dependencies.

},
"dependencies": {
"@types/pug": "^2.0.4",
Expand Down
11 changes: 8 additions & 3 deletions src/transformers/typescript.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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