fix: deprecate type attribute (#417)

* fix: deprecate type attribute

* fix: deprecate lang=typescript

* fix: warn type/lang deprecation logs once per npm process

Author: kaisermann

Diff for: 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.<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>`<... type="text/customLanguage">`<br>`<... type="application/customLanguage">`<br>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`<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
@@ -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 for: examples/sapper-rollup/src/routes/blog/index.svelte

@@ -8,7 +8,7 @@
   }
 </script>
 
-<script type="text/typescript">
+<script lang="ts">
   interface Post {
     title: string
     slug: string

Diff for: examples/svelte-rollup/src/App.svelte

@@ -1,19 +1,19 @@
-<template type="text/pug">
+<template lang="pug">
   h1 Hello!
   br
   input(bind:value="{label}")
   br
   Nested("{label}")
 </template>
 
-<script type="text/typescript">
+<script lang="ts">
   import Nested from './Nested.svelte'
   export let label: string = ''
 
   $: console.log(label)
 </script>
 
-<style type="text/stylus">
+<style lang="stylus">
 	h1
 		color blue
 </style>

Diff for: 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<string, any> = {
   sass: {
     indentedSyntax: true,
@@ -85,13 +89,27 @@ 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') {
       throw new Error('type attribute must be string');
     }
 
     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 for: test/transformers/typescript.test.ts

@@ -31,7 +31,7 @@ const autoProcessTS = (content: string, compilerOptions?: any) => {
   return opts.script?.({
     content,
     markup: `<script lang="ts">${content}</script>`,
-    attributes: { type: 'text/typescript' },
+    attributes: { lang: 'ts' },
     filename: resolve(__dirname, '..', 'App.svelte'),
   }) as Processed & { diagnostics: Diagnostic[] };
 };