From 2632a88d380a14843393d5246f471a8c6446a3b5 Mon Sep 17 00:00:00 2001 From: Christian Kaisermann Date: Sat, 2 Oct 2021 08:08:19 -0300 Subject: [PATCH] fix: deprecate type attribute (#417) * fix: deprecate type attribute * fix: deprecate lang=typescript * fix: warn type/lang deprecation logs once per npm process --- docs/preprocessing.md | 10 +++++----- .../sapper-rollup/src/routes/blog/index.svelte | 2 +- examples/svelte-rollup/src/App.svelte | 6 +++--- src/modules/language.ts | 18 ++++++++++++++++++ test/transformers/typescript.test.ts | 2 +- 5 files changed, 28 insertions(+), 10 deletions(-) diff --git a/docs/preprocessing.md b/docs/preprocessing.md index d8900a6c..5bb71a4b 100644 --- a/docs/preprocessing.md +++ b/docs/preprocessing.md @@ -70,8 +70,8 @@ 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.

i.e `markup` makes it possible to write your markup between `` tag. | -| `aliases` | `null` | A list of tuples `[alias: string, language: string]` that correlates an `alias` to a `language`

i.e `['cst', 'customLanguage']` means
`<... src="./file.cst">`
`<... lang="cst">`
`<... type="text/customLanguage">`
`<... type="application/customLanguage">`
are treated as `customLanguage`. | -| preserve | `[]` | A `string` list of languages/aliases that shouldn't pass through the preprocessor. (i.e `ld+json`) | +| `aliases` | `null` | A list of tuples `[alias: string, language: string]` that correlates an `alias` to a `language`

i.e `['cst', 'customLanguage']` means
`<... src="./file.cst">`
`<... lang="cst">`
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 @@ -133,7 +133,7 @@ export default { }; ``` -Now `svelte-preprocess` will use the `potatoLanguage` preprocessor whenever it finds a tag with `lang="potato"`, `type="text/potatoLanguage"` or `src="./index.pot"`. +Now `svelte-preprocess` will use the `potatoLanguage` preprocessor whenever it finds a tag with `lang="potato"` or `src="./index.pot"`. These methods receive the same arguments and act exactly like a [common svelte preprocessor](https://svelte.dev/docs#svelte_preprocess), but the concept of `markup`/`style`/`script` is abstracted as they are executed whenever `svelte-preprocess` find the aforementioned attributes. @@ -273,7 +273,7 @@ The PostCSS preprocessor accepts four options: In auto-preprocessing mode, you can set `postcss: true` if `postcss-load-config` is installed and `svelte-preprocess` will look for a PostCSS config file in your project. -When a `lang="sugarss"`/`type="text/sugarss"` is found, `sugarss` is automatically loaded and extra indentation is removed. +When a `lang="sugarss"` is found, `sugarss` is automatically loaded and extra indentation is removed. You can check the [PostCSS API reference](https://api.postcss.org/) for PostCSS specific options. @@ -356,7 +356,7 @@ You can check the [Sass API reference](https://sass-lang.com/documentation/js-ap Note: `svelte-preprocess` automatically configures inclusion paths for your root directory, `node_modules` and for the current file's directory. -Note: when a `lang="sass"`/`type="text/sass"` is found, `indentedSyntax` is automatically set to `true`. +Note: when a `lang="sass"` is found, `indentedSyntax` is automatically set to `true`. Note: `sass`, with indented syntax, and `scss` are not interchangeable so make sure to configure the correct one that fits your needs. diff --git a/examples/sapper-rollup/src/routes/blog/index.svelte b/examples/sapper-rollup/src/routes/blog/index.svelte index 9a713ba7..37de37d5 100644 --- a/examples/sapper-rollup/src/routes/blog/index.svelte +++ b/examples/sapper-rollup/src/routes/blog/index.svelte @@ -8,7 +8,7 @@ } - - \ No newline at end of file diff --git a/src/modules/language.ts b/src/modules/language.ts index 40bb4d3d..c4e7cf09 100644 --- a/src/modules/language.ts +++ b/src/modules/language.ts @@ -3,6 +3,10 @@ import { basename } from 'path'; import type { PreprocessorArgs } from '../types'; import { isValidLocalPath } from './utils'; +// todo: remove on v5 +let hasLoggedDeprecatedLangTypescriptWarning = false; +let hasLoggedDeprecatedTypeWarning = false; + const LANGUAGE_DEFAULTS: Record = { sass: { indentedSyntax: true, @@ -85,6 +89,13 @@ export const getLanguage = (attributes: PreprocessorArgs['attributes']) => { } alias = attributes.lang; + + if (alias === 'typescript' && !hasLoggedDeprecatedLangTypescriptWarning) { + hasLoggedDeprecatedLangTypescriptWarning = true; + console.warn( + `[svelte-preprocess] Deprecation notice: using 'lang="typescript"' is no longer recommended and will be removed in the next major version. Please use 'lang="ts"' instead.`, + ); + } } else if (attributes.type) { // istanbul ignore if if (typeof attributes.type !== 'string') { @@ -92,6 +103,13 @@ export const getLanguage = (attributes: PreprocessorArgs['attributes']) => { } alias = attributes.type.replace(/^(text|application)\/(.*)$/, '$2'); + + if (attributes.type.includes('text/') && !hasLoggedDeprecatedTypeWarning) { + hasLoggedDeprecatedTypeWarning = true; + console.warn( + `[svelte-preprocess] Deprecation notice: using the "type" attribute is no longer recommended and will be removed in the next major version. Please use the "lang" attribute instead.`, + ); + } } else if ( typeof attributes.src === 'string' && isValidLocalPath(attributes.src) diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts index c4366801..12ea3d88 100644 --- a/test/transformers/typescript.test.ts +++ b/test/transformers/typescript.test.ts @@ -31,7 +31,7 @@ const autoProcessTS = (content: string, compilerOptions?: any) => { return opts.script?.({ content, markup: ``, - attributes: { type: 'text/typescript' }, + attributes: { lang: 'ts' }, filename: resolve(__dirname, '..', 'App.svelte'), }) as Processed & { diagnostics: Diagnostic[] }; };