(feat) Support for multiple preprocessors (#384)

dummdidumm · kaisermann · web-flow · commit 1452631fc833 · 2020-07-30T16:21:30.000+02:00
* (feat) Support for multiple preprocessors #279 Co-authored-by: Christian Kaisermann <christian@kaisermann.me>
diff --git a/packages/language-server/src/lib/documents/Document.ts b/packages/language-server/src/lib/documents/Document.ts
@@ -66,7 +66,11 @@ export class Document extends WritableDocument {
             return null;
         }
 
-        const defaultLang = this.config.preprocess?.defaultLanguages?.[tag];
+        const defaultLang = Array.isArray(this.config.preprocess)
+            ? this.config.preprocess.find((group) => group.defaultLanguages?.[tag])
+                  ?.defaultLanguages?.[tag]
+            : this.config.preprocess?.defaultLanguages?.[tag];
+
         if (!tagInfo.attributes.lang && !tagInfo.attributes.type && defaultLang) {
             tagInfo.attributes.lang = defaultLang;
         }
diff --git a/packages/language-server/src/lib/documents/DocumentMapper.ts b/packages/language-server/src/lib/documents/DocumentMapper.ts
@@ -51,23 +51,39 @@ export interface DocumentMapper {
  * Does not map, returns positions as is.
  */
 export class IdentityMapper implements DocumentMapper {
-    constructor(private url: string) {}
+    constructor(private url: string, private parent?: DocumentMapper) {}
 
     getOriginalPosition(generatedPosition: Position): Position {
+        if (this.parent) {
+            generatedPosition = this.getOriginalPosition(generatedPosition);
+        }
+
         return generatedPosition;
     }
 
     getGeneratedPosition(originalPosition: Position): Position {
+        if (this.parent) {
+            originalPosition = this.getGeneratedPosition(originalPosition);
+        }
+
         return originalPosition;
     }
 
-    isInGenerated(): boolean {
+    isInGenerated(position: Position): boolean {
+        if (this.parent && !this.parent.isInGenerated(position)) {
+            return false;
+        }
+
         return true;
     }
 
     getURL(): string {
         return this.url;
     }
+
+    destroy() {
+        this.parent?.destroy?.();
+    }
 }
 
 /**
@@ -105,9 +121,17 @@ export class FragmentMapper implements DocumentMapper {
 }
 
 export class SourceMapDocumentMapper implements DocumentMapper {
-    constructor(protected consumer: SourceMapConsumer, protected sourceUri: string) {}
+    constructor(
+        protected consumer: SourceMapConsumer,
+        protected sourceUri: string,
+        private parent?: DocumentMapper,
+    ) {}
 
     getOriginalPosition(generatedPosition: Position): Position {
+        if (this.parent) {
+            generatedPosition = this.parent.getOriginalPosition(generatedPosition);
+        }
+
         const mapped = this.consumer.originalPositionFor({
             line: generatedPosition.line + 1,
             column: generatedPosition.character,
@@ -128,6 +152,10 @@ export class SourceMapDocumentMapper implements DocumentMapper {
     }
 
     getGeneratedPosition(originalPosition: Position): Position {
+        if (this.parent) {
+            originalPosition = this.parent.getGeneratedPosition(originalPosition);
+        }
+
         const mapped = this.consumer.generatedPositionFor({
             line: originalPosition.line + 1,
             column: originalPosition.character,
@@ -151,6 +179,10 @@ export class SourceMapDocumentMapper implements DocumentMapper {
     }
 
     isInGenerated(position: Position): boolean {
+        if (this.parent && !this.isInGenerated(position)) {
+            return false;
+        }
+
         const generated = this.getGeneratedPosition(position);
         return generated.line >= 0;
     }
@@ -163,6 +195,7 @@ export class SourceMapDocumentMapper implements DocumentMapper {
      * Needs to be called when source mapper is no longer needed in order to prevent memory leaks.
      */
     destroy() {
+        this.parent?.destroy?.();
         this.consumer.destroy();
     }
 }
diff --git a/packages/language-server/src/lib/documents/configLoader.ts b/packages/language-server/src/lib/documents/configLoader.ts
@@ -4,14 +4,20 @@ import { CompileOptions } from 'svelte/types/compiler/interfaces';
 import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
 import { importSveltePreprocess } from '../../importPackage';
 
+export type InternalPreprocessorGroup = PreprocessorGroup & {
+    /**
+     * svelte-preprocess has this since 4.x
+     */
+    defaultLanguages?: {
+        markup?: string;
+        script?: string;
+        style?: string;
+    };
+};
+
 export interface SvelteConfig {
     compilerOptions?: CompileOptions;
-    preprocess?: PreprocessorGroup & {
-        /**
-         * svelte-preprocess has this since 4.x
-         */
-        defaultLanguages?: { markup?: string; script?: string; style?: string };
-    };
+    preprocess?: InternalPreprocessorGroup | InternalPreprocessorGroup[];
     loadConfigError?: any;
 }
 
diff --git a/packages/language-server/src/plugins/svelte/SvelteDocument.ts b/packages/language-server/src/plugins/svelte/SvelteDocument.ts
@@ -16,6 +16,7 @@ import {
     TagInformation,
 } from '../../lib/documents';
 import { importSvelte } from '../../importPackage';
+import { isNotNullOrUndefined } from '../../utils';
 
 export type SvelteCompileResult = ReturnType<typeof compile>;
 
@@ -93,41 +94,44 @@ export class SvelteDocument {
 }
 
 export class TranspiledSvelteDocument implements Pick<DocumentMapper, 'getOriginalPosition'> {
-    static async create(document: Document, preprocessors: PreprocessorGroup = {}) {
-        const { transpiled, processedScript, processedStyle } = await transpile(
+    static async create(
+        document: Document,
+        preprocessors: PreprocessorGroup | PreprocessorGroup[] = [],
+    ) {
+        const { transpiled, processedScripts, processedStyles } = await transpile(
             document,
             preprocessors,
         );
         const scriptMapper = await SvelteFragmentMapper.createScript(
             document,
             transpiled,
-            processedScript,
+            processedScripts,
         );
         const styleMapper = await SvelteFragmentMapper.createStyle(
             document,
             transpiled,
-            processedStyle,
+            processedStyles,
         );
 
         return new TranspiledSvelteDocument(document, transpiled, scriptMapper, styleMapper);
     }
 
-    private fragmentInfos = [this.scriptMapper.fragmentInfo, this.styleMapper.fragmentInfo].sort(
-        (i1, i2) => i1.end - i2.end,
-    );
+    private fragmentInfos = [this.scriptMapper?.fragmentInfo, this.styleMapper?.fragmentInfo]
+        .filter(isNotNullOrUndefined)
+        .sort((i1, i2) => i1.end - i2.end);
 
     private constructor(
         private parent: Document,
         private transpiled: string,
-        public scriptMapper: SvelteFragmentMapper,
-        public styleMapper: SvelteFragmentMapper,
+        public scriptMapper: SvelteFragmentMapper | null,
+        public styleMapper: SvelteFragmentMapper | null,
     ) {}
 
     getOriginalPosition(generatedPosition: Position): Position {
-        if (this.scriptMapper.isInTranspiledFragment(generatedPosition)) {
+        if (this.scriptMapper?.isInTranspiledFragment(generatedPosition)) {
             return this.scriptMapper.getOriginalPosition(generatedPosition);
         }
-        if (this.styleMapper.isInTranspiledFragment(generatedPosition)) {
+        if (this.styleMapper?.isInTranspiledFragment(generatedPosition)) {
             return this.styleMapper.getOriginalPosition(generatedPosition);
         }
 
@@ -154,13 +158,13 @@ export class TranspiledSvelteDocument implements Pick<DocumentMapper, 'getOrigin
      * Needs to be called before cleanup to prevent source map memory leaks.
      */
     destroy() {
-        this.scriptMapper.destroy();
-        this.styleMapper.destroy();
+        this.scriptMapper?.destroy();
+        this.styleMapper?.destroy();
     }
 }
 
 export class SvelteFragmentMapper {
-    static async createStyle(originalDoc: Document, transpiled: string, processed?: Processed) {
+    static async createStyle(originalDoc: Document, transpiled: string, processed: Processed[]) {
         return SvelteFragmentMapper.create(
             originalDoc,
             transpiled,
@@ -170,7 +174,7 @@ export class SvelteFragmentMapper {
         );
     }
 
-    static async createScript(originalDoc: Document, transpiled: string, processed?: Processed) {
+    static async createScript(originalDoc: Document, transpiled: string, processed: Processed[]) {
         return SvelteFragmentMapper.create(
             originalDoc,
             transpiled,
@@ -185,14 +189,12 @@ export class SvelteFragmentMapper {
         transpiled: string,
         originalTagInfo: TagInformation | null,
         transpiledTagInfo: TagInformation | null,
-        processed?: Processed,
+        processed: Processed[],
     ) {
-        const sourceMapper = processed?.map
-            ? new SourceMapDocumentMapper(
-                  await new SourceMapConsumer(processed.map.toString()),
-                  originalDoc.uri,
-              )
-            : new IdentityMapper(originalDoc.uri);
+        const sourceMapper =
+            processed.length > 0
+                ? await SvelteFragmentMapper.createSourceMapper(processed, originalDoc)
+                : new IdentityMapper(originalDoc.uri);
 
         if (originalTagInfo && transpiledTagInfo) {
             const sourceLength = originalTagInfo.container.end - originalTagInfo.container.start;
@@ -208,11 +210,20 @@ export class SvelteFragmentMapper {
             );
         }
 
-        return new SvelteFragmentMapper(
-            { end: -1, diff: 0 },
-            new IdentityMapper(originalDoc.uri),
-            new IdentityMapper(originalDoc.uri),
-            sourceMapper,
+        return null;
+    }
+
+    private static async createSourceMapper(processed: Processed[], originalDoc: Document) {
+        return processed.reduce(
+            async (parent, processedSingle) =>
+                processedSingle?.map
+                    ? new SourceMapDocumentMapper(
+                          await new SourceMapConsumer(processedSingle.map.toString()),
+                          originalDoc.uri,
+                          await parent,
+                      )
+                    : new IdentityMapper(originalDoc.uri, await parent),
+            Promise.resolve<DocumentMapper>(<any>undefined),
         );
     }
 
@@ -262,49 +273,56 @@ export class SvelteFragmentMapper {
     }
 }
 
-async function transpile(document: Document, preprocessors: PreprocessorGroup = {}) {
-    const preprocessor: PreprocessorGroup = {};
-    let processedScript: Processed | undefined;
-    let processedStyle: Processed | undefined;
-
-    preprocessor.markup = preprocessors.markup;
-
-    if (preprocessors.script) {
-        preprocessor.script = async (args: any) => {
-            try {
-                const res = await preprocessors.script!(args);
-                if (res && res.map) {
-                    processedScript = res;
+async function transpile(
+    document: Document,
+    preprocessors: PreprocessorGroup | PreprocessorGroup[] = [],
+) {
+    preprocessors = Array.isArray(preprocessors) ? preprocessors : [preprocessors];
+    const processedScripts: Processed[] = [];
+    const processedStyles: Processed[] = [];
+
+    const wrappedPreprocessors = preprocessors.map((preprocessor) => {
+        const wrappedPreprocessor: PreprocessorGroup = { markup: preprocessor.markup };
+
+        if (preprocessor.script) {
+            wrappedPreprocessor.script = async (args: any) => {
+                try {
+                    const res = await preprocessor.script!(args);
+                    if (res && res.map) {
+                        processedScripts.push(res);
+                    }
+                    return res;
+                } catch (e) {
+                    e.__source = TranspileErrorSource.Script;
+                    throw e;
                 }
-                return res;
-            } catch (e) {
-                e.__source = TranspileErrorSource.Script;
-                throw e;
-            }
-        };
-    }
+            };
+        }
 
-    if (preprocessors.style) {
-        preprocessor.style = async (args: any) => {
-            try {
-                const res = await preprocessors.style!(args);
-                if (res && res.map) {
-                    processedStyle = res;
+        if (preprocessor.style) {
+            wrappedPreprocessor.style = async (args: any) => {
+                try {
+                    const res = await preprocessor.style!(args);
+                    if (res && res.map) {
+                        processedStyles.push(res);
+                    }
+                    return res;
+                } catch (e) {
+                    e.__source = TranspileErrorSource.Style;
+                    throw e;
                 }
-                return res;
-            } catch (e) {
-                e.__source = TranspileErrorSource.Style;
-                throw e;
-            }
-        };
-    }
+            };
+        }
+
+        return wrappedPreprocessor;
+    });
 
     const svelte = importSvelte(document.getFilePath() || '');
     const transpiled = (
-        await svelte.preprocess(document.getText(), preprocessor, {
+        await svelte.preprocess(document.getText(), wrappedPreprocessors, {
             filename: document.getFilePath() || '',
         })
     ).toString();
 
-    return { transpiled, processedScript, processedStyle };
+    return { transpiled, processedScripts, processedStyles };
 }
diff --git a/packages/language-server/test/plugins/svelte/SvelteDocument.test.ts b/packages/language-server/test/plugins/svelte/SvelteDocument.test.ts
@@ -50,8 +50,9 @@ describe('Svelte Document', () => {
             // stub svelte preprocess and getOriginalPosition
             // to fake a source mapping process
             sinon.stub(importPackage, 'importSvelte').returns({
-                preprocess: (text, preprocessor: any) => {
-                    preprocessor.script();
+                preprocess: (text, preprocessor) => {
+                    preprocessor = Array.isArray(preprocessor) ? preprocessor : [preprocessor];
+                    preprocessor.forEach((p) => p.script?.(<any>{}));
                     return Promise.resolve({
                         code: getSourceCode(true),
                         dependencies: [],

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,11 @@ export class Document extends WritableDocument {`
`66`	`66`	`return null;`
`67`	`67`	`}`
`68`	`68`
`69`		`- const defaultLang = this.config.preprocess?.defaultLanguages?.[tag];`
	`69`	`+ const defaultLang = Array.isArray(this.config.preprocess)`
	`70`	`+ ? this.config.preprocess.find((group) => group.defaultLanguages?.[tag])`
	`71`	`+ ?.defaultLanguages?.[tag]`
	`72`	`+ : this.config.preprocess?.defaultLanguages?.[tag];`
	`73`	`+`
`70`	`74`	`if (!tagInfo.attributes.lang && !tagInfo.attributes.type && defaultLang) {`
`71`	`75`	`tagInfo.attributes.lang = defaultLang;`
`72`	`76`	`}`