Better Typescript transpilation

docs/preprocessing.md

@@ -369,20 +369,19 @@ 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. |
+| 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`. |
 
 You can check the [`compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for specific TypeScript options.
 
 #### Typescript - Limitations
 
 - Since `v4`, `svelte-preprocess` doesn't type-check your component, its only concern is to transpile it into valid JavaScript for the compiler. If you want to have your components type-checked, you can use [svelte-check](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md).
 
-- As we're only transpiling, it's not possible to import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule'` otherwise bundlers will complain that the name is not exported by `MyModule`.
-
 - Using TypeScript inside a component's markup is currently **not** supported. See [#318](https://github.com/sveltejs/svelte-preprocess/issues/318) for development updates to this.
 
 ### `globalStyle`

package.json

@@ -85,14 +85,16 @@
     "sass": "^1.26.8",
     "stylus": "^0.54.7",
     "sugarss": "^2.0.0",
-    "svelte": "^3.23.0",
+    "svelte": "^3.42.0",
     "ts-jest": "^25.1.0",
     "typescript": "^3.9.5"
   },
   "dependencies": {
     "@types/pug": "^2.0.4",
     "@types/sass": "^1.16.0",
     "detect-indent": "^6.0.0",
+    "magic-string": "^0.25.7",
+    "sorcery": "^0.10.0",
     "strip-indent": "^3.0.0"
   },
   "peerDependencies": {

src/autoProcess.ts

@@ -24,7 +24,7 @@ import { transformMarkup } from './modules/markup';
 export const transform = async (
   name: string,
   options: TransformerOptions,
-  { content, map, filename, attributes }: TransformerArgs<any>,
+  { content, markup, map, filename, attributes }: TransformerArgs<any>,
 ): Promise<Processed> => {
   if (options === false) {
     return { code: content };
@@ -39,6 +39,7 @@ export const transform = async (
 
   return transformer({
     content,
+    markup,
     filename,
     map,
     attributes,
@@ -115,6 +116,7 @@ export function sveltePreprocess(
   ): Preprocessor => async (svelteFile) => {
     let {
       content,
+      markup,
       filename,
       lang,
       alias,
@@ -151,6 +153,7 @@ export function sveltePreprocess(
 
     const transformed = await transform(lang, transformerOptions, {
       content,
+      markup,
       filename,
       attributes,
     });
@@ -169,6 +172,7 @@ export function sveltePreprocess(
     if (transformers.replace) {
       const transformed = await transform('replace', transformers.replace, {
         content,
+        markup: content,
         filename,
       });
 
@@ -185,11 +189,13 @@ export function sveltePreprocess(
   const script: PreprocessorGroup['script'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult: Processed = await scriptTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -199,7 +205,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'babel',
         getTransformerOptions('babel'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;
@@ -214,11 +220,13 @@ export function sveltePreprocess(
   const style: PreprocessorGroup['style'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult = await cssTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -239,6 +247,7 @@ export function sveltePreprocess(
 
         const transformed = await transform('postcss', postcssOptions, {
           content: code,
+          markup: fullMarkup,
           map,
           filename,
           attributes,
@@ -252,7 +261,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'globalStyle',
         getTransformerOptions('globalStyle'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;

src/modules/markup.ts

@@ -1,5 +1,35 @@
 import type { Transformer, Preprocessor } from '../types';
 
+/** Create a tag matching regexp. */
+export function createTagRegex(tagName: string, flags?: string): RegExp {
+  return new RegExp(
+    `/<!--[^]*?-->|<${tagName}(\\s[^]*?)?(?:>([^]*?)<\\/${tagName}>|\\/>)`,
+    flags,
+  );
+}
+
+/** Strip script and style tags from markup. */
+export function stripTags(markup: string): string {
+  return markup
+    .replace(createTagRegex('style', 'gi'), '')
+    .replace(createTagRegex('script', 'gi'), '');
+}
+
+/** Transform an attribute string into a key-value object */
+export function parseAttributes(attributesStr: string): Record<string, any> {
+  return attributesStr
+    .split(/\s+/)
+    .filter(Boolean)
+    .reduce((acc: Record<string, string | boolean>, attr) => {
+      const [name, value] = attr.split('=');
+
+      // istanbul ignore next
+      acc[name] = value ? value.replace(/['"]/g, '') : true;
+
+      return acc;
+    }, {});
+}
+
 export async function transformMarkup(
   { content, filename }: { content: string; filename: string },
   transformer: Preprocessor | Transformer<unknown>,
@@ -9,35 +39,29 @@ export async function transformMarkup(
 
   markupTagName = markupTagName.toLocaleLowerCase();
 
-  const markupPattern = new RegExp(
-    `/<!--[^]*?-->|<${markupTagName}(\\s[^]*?)?(?:>([^]*?)<\\/${markupTagName}>|\\/>)`,
-  );
+  const markupPattern = createTagRegex(markupTagName);
 
   const templateMatch = content.match(markupPattern);
 
   /** If no <template> was found, run the transformer over the whole thing */
   if (!templateMatch) {
-    return transformer({ content, attributes: {}, filename, options });
+    return transformer({
+      content,
+      markup: content,
+      attributes: {},
+      filename,
+      options,
+    });
   }
 
   const [fullMatch, attributesStr = '', templateCode] = templateMatch;
 
-  /** Transform an attribute string into a key-value object */
-  const attributes = attributesStr
-    .split(/\s+/)
-    .filter(Boolean)
-    .reduce((acc: Record<string, string | boolean>, attr) => {
-      const [name, value] = attr.split('=');
-
-      // istanbul ignore next
-      acc[name] = value ? value.replace(/['"]/g, '') : true;
-
-      return acc;
-    }, {});
+  const attributes = parseAttributes(attributesStr);
 
   /** Transform the found template code */
   let { code, map, dependencies } = await transformer({
     content: templateCode,
+    markup: templateCode,
     attributes,
     filename,
     options,

src/modules/tagInfo.ts

@@ -27,6 +27,7 @@ export const getTagInfo = async ({
   attributes,
   filename,
   content,
+  markup,
 }: PreprocessorArgs) => {
   const dependencies = [];
   // catches empty content and self-closing tags
@@ -62,5 +63,6 @@ export const getTagInfo = async ({
     lang,
     alias,
     dependencies,
+    markup,
   };
 };

src/modules/utils.ts

@@ -107,3 +107,54 @@ export function setProp(obj, keyList, val) {
 
   obj[keyList[i]] = val;
 }
+
+export const javascriptReservedKeywords = new Set([
+  'arguments',
+  'await',
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'enum',
+  'eval',
+  'export',
+  'extends',
+  'false',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'implements',
+  'import',
+  'in',
+  'instanceof',
+  'interface',
+  'let',
+  'new',
+  'null',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'return',
+  'static',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'true',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
+]);

src/processors/typescript.ts

@@ -8,6 +8,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
     const { transformer } = await import('../transformers/typescript');
     let {
       content,
+      markup,
       filename,
       attributes,
       lang,
@@ -22,6 +23,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
 
     const transformed = await transformer({
       content,
+      markup,
       filename,
       attributes,
       options,