switch to using prettier-plugin-svelte for formatting (#10)

* switch to using prettier-plugin-svelte for formatting * fallback to prettier html formatting on svelte v2 * update to prettier-plugin-svelte v0.4.1 * update to prettier-plugin-svelte v0.4.2
jamesbirtles · May 5, 2019 · 8a5d23c · 8a5d23c
1 parent 644261b
commit 8a5d23c
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 139 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
         "indent-string": "^3.2.0",
         "lodash": "^4.17.10",
         "prettier": "1.17.0",
+        "prettier-plugin-svelte": "0.4.2",
         "sinon": "^4.5.0",
         "source-map": "^0.7.3",
         "svelte": "3.2.0",

diff --git a/src/plugins/CSSPlugin.ts b/src/plugins/CSSPlugin.ts
@@ -5,9 +5,6 @@ import {
     getLESSLanguageService,
     LanguageService,
 } from 'vscode-css-languageservice';
-import * as prettier from 'prettier';
-import detectIndent from 'detect-indent';
-import indentString from 'indent-string';
 import {
     Host,
     Document,
@@ -19,9 +16,7 @@ import {
     Fragment,
     DiagnosticsProvider,
     Diagnostic,
-    TextEdit,
     Range,
-    FormattingProvider,
     CompletionList,
     DocumentColorsProvider,
     ColorInformation,
@@ -38,7 +33,6 @@ export class CSSPlugin
         HoverProvider,
         CompletionsProvider,
         DiagnosticsProvider,
-        FormattingProvider,
         DocumentColorsProvider,
         ColorPresentationsProvider,
         DocumentSymbolsProvider {
@@ -52,7 +46,6 @@ export class CSSPlugin
         diagnostics: { enable: true },
         hover: { enable: true },
         completions: { enable: true },
-        format: { enable: true },
         documentColors: { enable: true },
         colorPresentations: { enable: true },
         documentSymbols: { enable: true },
@@ -127,31 +120,6 @@ export class CSSPlugin
         return [...(results ? results.items : []), ...emmetResults.items];
     }
 
-    async formatDocument(document: Document): Promise<TextEdit[]> {
-        if (!this.host.getConfig<boolean>('css.format.enable')) {
-            return [];
-        }
-
-        if (document.getTextLength() === 0) {
-            return [];
-        }
-
-        const config = await prettier.resolveConfig(document.getFilePath()!);
-        const formattedCode = prettier.format(document.getText(), {
-            ...config,
-            parser: getLanguage(extractLanguage(document)),
-        });
-
-        let indent = detectIndent(document.getText());
-        return [
-            TextEdit.replace(
-                Range.create(document.positionAt(0), document.positionAt(document.getTextLength())),
-                '\n' +
-                    indentString(formattedCode, indent.amount, indent.type == 'tab' ? '\t' : ' '),
-            ),
-        ];
-    }
-
     getDocumentColors(document: Document): ColorInformation[] {
         if (!this.host.getConfig<boolean>('css.documentColors.enable')) {
             return [];

diff --git a/src/plugins/HTMLPlugin.ts b/src/plugins/HTMLPlugin.ts
@@ -1,8 +1,4 @@
-import {
-    getLanguageService,
-    HTMLDocument,
-    HTMLFormatConfiguration,
-} from 'vscode-html-languageservice';
+import { getLanguageService, HTMLDocument } from 'vscode-html-languageservice';
 import { getEmmetCompletionParticipants } from 'vscode-emmet-helper';
 import {
     Host,
@@ -13,20 +9,16 @@ import {
     CompletionsProvider,
     CompletionItem,
     CompletionList,
-    FormattingProvider,
-    TextEdit,
-    Range,
     SymbolInformation,
 } from '../api';
 
-export class HTMLPlugin implements HoverProvider, CompletionsProvider, FormattingProvider {
+export class HTMLPlugin implements HoverProvider, CompletionsProvider {
     public pluginId = 'html';
     public defaultConfig = {
         enable: true,
         hover: { enable: true },
         completions: { enable: true },
         tagComplete: { enable: true },
-        format: { enable: true },
         documentSymbols: { enable: true },
     };
 
@@ -89,33 +81,6 @@ export class HTMLPlugin implements HoverProvider, CompletionsProvider, Formattin
         return this.lang.doTagComplete(document, position, html);
     }
 
-    formatDocument(document: Document): TextEdit[] {
-        if (!this.host.getConfig<boolean>('html.format.enable')) {
-            return [];
-        }
-
-        const html = this.documents.get(document);
-        if (!html) {
-            return [];
-        }
-
-        const style = html.roots.find(node => node.tag === 'style');
-        const script = html.roots.find(node => node.tag === 'script');
-
-        let rangeEnd = document.getTextLength();
-        if (style && style.start < rangeEnd) {
-            rangeEnd = style.start + 1;
-        }
-        if (script && script.start < rangeEnd) {
-            rangeEnd = script.start + 1;
-        }
-
-        const range = Range.create(document.positionAt(0), document.positionAt(rangeEnd));
-
-        const settings = this.host.getConfig<HTMLFormatConfiguration>('html.format.settings') || {};
-        return this.lang.format(document, range, settings);
-    }
-
     getDocumentSymbols(document: Document): SymbolInformation[] {
         if (!this.host.getConfig<boolean>('html.documentSymbols.enable')) {
             return [];

diff --git a/src/plugins/SveltePlugin.ts b/src/plugins/SveltePlugin.ts
@@ -1,4 +1,5 @@
 import cosmic from 'cosmiconfig';
+import * as prettier from 'prettier';
 import {
     DiagnosticsProvider,
     Document,
@@ -8,11 +9,13 @@ import {
     Fragment,
     Position,
     Host,
+    FormattingProvider,
+    TextEdit,
 } from '../api';
 import { SvelteDocument } from '../lib/documents/SvelteDocument';
 import { RawSourceMap, RawIndexMap, SourceMapConsumer } from 'source-map';
 import { PreprocessOptions, CompileOptions, Warning } from 'svelte/compiler';
-import { loadSvelte } from './svelte/loadSvelte';
+import { importSvelte, getSveltePackageInfo } from './svelte/sveltePackage';
 
 interface SvelteConfig extends CompileOptions {
     preprocess?: PreprocessOptions;
@@ -22,11 +25,12 @@ const DEFAULT_OPTIONS: CompileOptions = {
     dev: true,
 };
 
-export class SveltePlugin implements DiagnosticsProvider {
+export class SveltePlugin implements DiagnosticsProvider, FormattingProvider {
     public pluginId = 'svelte';
     public defaultConfig = {
         enable: true,
         diagnostics: { enable: true },
+        format: { enable: true },
     };
 
     private host!: Host;
@@ -43,7 +47,7 @@ export class SveltePlugin implements DiagnosticsProvider {
         let source = document.getText();
 
         const config = await this.loadConfig(document.getFilePath()!);
-        const svelte = loadSvelte(document.getFilePath()!) as any;
+        const svelte = importSvelte(document.getFilePath()!) as any;
 
         const preprocessor = makePreprocessor(document as SvelteDocument, config.preprocess);
         source = (await svelte.preprocess(source, preprocessor)).toString();
@@ -93,6 +97,27 @@ export class SveltePlugin implements DiagnosticsProvider {
             return { ...DEFAULT_OPTIONS, preprocess: {} };
         }
     }
+
+    async formatDocument(document: Document): Promise<TextEdit[]> {
+        if (!this.host.getConfig<boolean>('svelte.format.enable')) {
+            return [];
+        }
+
+        const config = await prettier.resolveConfig(document.getFilePath()!);
+        const sveltePkg = getSveltePackageInfo(document.getFilePath()!);
+        const formattedCode = prettier.format(document.getText(), {
+            ...config,
+            plugins: [require.resolve('prettier-plugin-svelte')],
+            parser: sveltePkg.version.major >= 3 ? ('svelte' as any) : 'html',
+        });
+
+        return [
+            TextEdit.replace(
+                Range.create(document.positionAt(0), document.positionAt(document.getTextLength())),
+                formattedCode,
+            ),
+        ];
+    }
 }
 
 interface Preprocessor extends PreprocessOptions {

diff --git a/src/plugins/TypeScriptPlugin.ts b/src/plugins/TypeScriptPlugin.ts
@@ -1,7 +1,4 @@
 import ts, { NavigationTree } from 'typescript';
-import * as prettier from 'prettier';
-import detectIndent from 'detect-indent';
-import indentString from 'indent-string';
 import URL from 'vscode-uri';
 import {
     DiagnosticsProvider,
@@ -13,8 +10,6 @@ import {
     HoverProvider,
     Position,
     Hover,
-    FormattingProvider,
-    TextEdit,
     OnRegister,
     Host,
     DocumentSymbolsProvider,
@@ -35,7 +30,6 @@ export class TypeScriptPlugin
     implements
         DiagnosticsProvider,
         HoverProvider,
-        FormattingProvider,
         OnRegister,
         DocumentSymbolsProvider,
         CompletionsProvider {
@@ -48,7 +42,6 @@ export class TypeScriptPlugin
         enable: true,
         diagnostics: { enable: true },
         hover: { enable: true },
-        format: { enable: true },
     };
 
     private host!: Host;
@@ -112,31 +105,6 @@ export class TypeScriptPlugin
         };
     }
 
-    async formatDocument(document: Document): Promise<TextEdit[]> {
-        if (!this.host.getConfig<boolean>('typescript.format.enable')) {
-            return [];
-        }
-
-        if (document.getTextLength() === 0) {
-            return [];
-        }
-
-        const config = await prettier.resolveConfig(document.getFilePath()!);
-        const formattedCode = prettier.format(document.getText(), {
-            ...config,
-            parser: getParserFromAttributes(document.getAttributes()),
-        });
-
-        let indent = detectIndent(document.getText());
-        return [
-            TextEdit.replace(
-                Range.create(document.positionAt(0), document.positionAt(document.getTextLength())),
-                '\n' +
-                    indentString(formattedCode, indent.amount, indent.type == 'tab' ? '\t' : ' '),
-            ),
-        ];
-    }
-
     getDocumentSymbols(document: Document): SymbolInformation[] {
         if (!this.host.getConfig<boolean>('typescript.documentSymbols.enable')) {
             return [];
@@ -221,17 +189,3 @@ export class TypeScriptPlugin
         });
     }
 }
-
-function getParserFromAttributes(attrs: Record<string, string>): prettier.BuiltInParserName {
-    const type = attrs.lang || attrs.type;
-
-    switch (type) {
-        case 'typescript':
-        case 'text/typescript':
-            return 'typescript';
-        case 'javascript':
-        case 'text/javascript':
-        default:
-            return 'babylon';
-    }
-}
diff --git a/src/plugins/svelte/loadSvelte.ts b/src/plugins/svelte/loadSvelte.ts
diff --git a/src/plugins/svelte/sveltePackage.ts b/src/plugins/svelte/sveltePackage.ts
@@ -0,0 +1,32 @@
+import { dirname, resolve } from 'path';
+
+export function getSveltePackageInfo(fromPath: string) {
+    const packageJSONPath = require.resolve('svelte/package.json', {
+        paths: [fromPath, __dirname],
+    });
+    const { version } = require(packageJSONPath);
+    const [major, minor, patch] = version.split('.');
+
+    return {
+        path: dirname(packageJSONPath),
+        version: {
+            full: version,
+            major,
+            minor,
+            patch,
+        },
+    };
+}
+
+export function importSvelte(fromPath: string) {
+    const pkg = getSveltePackageInfo(fromPath);
+
+    let main = pkg.path;
+    if (pkg.version.major > 2) {
+        main = resolve(pkg.path, 'compiler');
+    }
+
+    console.log('Using Svelte v' + pkg.version.full, 'from', main);
+
+    return require(main);
+}
diff --git a/src/server.ts b/src/server.ts
@@ -13,7 +13,6 @@ import { HTMLPlugin } from './plugins/HTMLPlugin';
 import { CSSPlugin } from './plugins/CSSPlugin';
 import { wrapFragmentPlugin } from './api/wrapFragmentPlugin';
 import { TypeScriptPlugin } from './plugins/TypeScriptPlugin';
-import { set, get } from 'lodash';
 
 namespace TagCloseRequest {
     export const type: RequestType<
@@ -58,7 +57,6 @@ export function startServer() {
     });
 
     connection.onDidChangeConfiguration(({ settings }) => {
-        set(settings.svelte, 'plugin.html.format.settings', get(settings, 'html.format', {}));
         manager.updateConfig(settings.svelte);
     });
 

diff --git a/yarn.lock b/yarn.lock
@@ -415,6 +415,13 @@ path-to-regexp@^1.7.0:
   dependencies:
     isarray "0.0.1"
 
+prettier-plugin-svelte@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-0.4.2.tgz#29f7ea4c8c2068674d950428ab7926fb8234190c"
+  integrity sha512-BjMxmU5aZJSW5hDEG3BhZ4GUzx28cgOkfwO/SOCxkCq/4qbAR2AoCtB+t7j2mg0TPJG0oA7glCDri8QpcTSuQA==
+  dependencies:
+    tslib "^1.9.3"
+
 prettier@1.17.0:
   version "1.17.0"
   resolved "https://registry.npmjs.org/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
@@ -516,6 +523,11 @@ ts-node@^7.0.1:
     source-map-support "^0.5.6"
     yn "^2.0.0"
 
+tslib@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+  integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
+
 type-detect@4.0.8, type-detect@^4.0.5:
   version "4.0.8"
   resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"