|
| 1 | +import { createSystem } from '@typescript/vfs'; |
| 2 | +import { LiquidRawTag, NodeTypes } from '@shopify/liquid-html-parser'; |
| 3 | +import { AbstractFileSystem, Mode, Modes, SourceCodeType, findCurrentNode } from '@shopify/theme-check-common'; |
| 4 | +import ts, { LanguageService } from 'typescript'; |
| 5 | +import { |
| 6 | + CompletionItem, |
| 7 | + CompletionList, |
| 8 | + CompletionParams, |
| 9 | + Diagnostic, |
| 10 | + DocumentDiagnosticParams, |
| 11 | + Hover, |
| 12 | + HoverParams, |
| 13 | + ClientCapabilities as LSPClientCapabilities, |
| 14 | + Position |
| 15 | +} from 'vscode-languageserver'; |
| 16 | +import { TextDocument } from 'vscode-languageserver-textdocument'; |
| 17 | + |
| 18 | +import { DocumentManager } from '../documents'; |
| 19 | +import { findJSConfig } from './utils'; |
| 20 | + |
| 21 | +export class JSLanguageService { |
| 22 | + private service: LanguageService | null = null; |
| 23 | + private snapshotManager: Map<string, ts.IScriptSnapshot> = new Map(); |
| 24 | + private fileMap: Map<string, string> = new Map(); |
| 25 | + |
| 26 | + constructor(private documentManager: DocumentManager) {} |
| 27 | + |
| 28 | + async setup(clientCapabilities: LSPClientCapabilities, fs: AbstractFileSystem, workspacePath: string) { |
| 29 | + console.log('test') |
| 30 | + let vfs: any | null = null; |
| 31 | + try { |
| 32 | + vfs = createSystem(this.fileMap); |
| 33 | + } catch (error) { |
| 34 | + console.error(error); |
| 35 | + } |
| 36 | + |
| 37 | + if (!vfs) { |
| 38 | + throw new Error('Failed to create VFS'); |
| 39 | + } |
| 40 | + // TODO: we need to get fileExists to be synchronous |
| 41 | + const configPath = findJSConfig(workspacePath, [], () => true); |
| 42 | + let compilerOptions: ts.CompilerOptions; |
| 43 | + let compilerHost: ts.CompilerHost | null = null; |
| 44 | + |
| 45 | + if (configPath) { |
| 46 | + const projectConfig = JSON.parse(await fs.readFile(configPath)); |
| 47 | + compilerOptions = projectConfig.compilerOptions; |
| 48 | + } else { |
| 49 | + compilerOptions = { |
| 50 | + target: ts.ScriptTarget.ESNext, |
| 51 | + module: ts.ModuleKind.ESNext, |
| 52 | + moduleResolution: ts.ModuleResolutionKind.Node, |
| 53 | + } |
| 54 | + } |
| 55 | + const host: ts.LanguageServiceHost = { |
| 56 | + getCompilationSettings: () => compilerOptions, |
| 57 | + getScriptFileNames: () => Array.from(this.fileMap.keys()), |
| 58 | + fileExists: vfs.fileExists, |
| 59 | + readFile: vfs.readFile, |
| 60 | + readDirectory: vfs.readDirectory, |
| 61 | + // TODO: we need a snapshot manager |
| 62 | + getScriptVersion: (fileName: string) => '1', |
| 63 | + getScriptSnapshot: (fileName: string) => |
| 64 | + this.snapshotManager.get(fileName) || ts.ScriptSnapshot.fromString(''), |
| 65 | + getCurrentDirectory: () => workspacePath, |
| 66 | + getDefaultLibFileName: ts.getDefaultLibFilePath, |
| 67 | + getCompilerHost: () => compilerHost! |
| 68 | + }; |
| 69 | + this.service = ts.createLanguageService(host); |
| 70 | + } |
| 71 | + |
| 72 | + async completions(params: CompletionParams): Promise<null | CompletionList | CompletionItem[]> { |
| 73 | + const service = this.service; |
| 74 | + if (!service) return null; |
| 75 | + const jsDocument = this.getDocuments(params, service); |
| 76 | + if (!jsDocument) return null; |
| 77 | + // TODO: convert position to offset |
| 78 | + const completions = await service.getCompletionsAtPosition(jsDocument.uri, positionToOffset(jsDocument, params.position), {}); |
| 79 | + if (!completions) return null; |
| 80 | + // @ts-expect-error |
| 81 | + return completions; |
| 82 | + } |
| 83 | + |
| 84 | + async diagnostics(params: DocumentDiagnosticParams): Promise<Diagnostic[]> { |
| 85 | + const service = this.service; |
| 86 | + if (!service) return []; |
| 87 | + const jsDocument = this.getDocuments(params, service); |
| 88 | + if (!jsDocument) return []; |
| 89 | + // @ts-expect-error |
| 90 | + return service.getSemanticDiagnostics(jsDocument.uri); |
| 91 | + } |
| 92 | + |
| 93 | + async hover(params: HoverParams): Promise<Hover | null> { |
| 94 | + const service = this.service; |
| 95 | + if (!service) return null; |
| 96 | + const jsDocument = this.getDocuments(params, service); |
| 97 | + if (!jsDocument) return null; |
| 98 | + const hover = await service.getQuickInfoAtPosition(jsDocument.uri, positionToOffset(jsDocument, params.position)); |
| 99 | + if (!hover) return null; |
| 100 | + // @ts-expect-error |
| 101 | + return hover; |
| 102 | + } |
| 103 | + |
| 104 | + private getDocuments( |
| 105 | + params: HoverParams | CompletionParams | DocumentDiagnosticParams, |
| 106 | + service: LanguageService, |
| 107 | + ): TextDocument | null { |
| 108 | + const document = this.documentManager.get(params.textDocument.uri); |
| 109 | + if (!document) return null; |
| 110 | + |
| 111 | + switch (document.type) { |
| 112 | + case SourceCodeType.JSON: { |
| 113 | + return null; |
| 114 | + } |
| 115 | + case SourceCodeType.LiquidHtml: { |
| 116 | + if (document.ast instanceof Error) return null; |
| 117 | + const textDocument = document.textDocument; |
| 118 | + let offset = 0; |
| 119 | + let isDiagnostics = false; |
| 120 | + if ('position' in params && params.position.line !== 0 && params.position.character !== 0) { |
| 121 | + offset = textDocument.offsetAt(params.position); |
| 122 | + } else { |
| 123 | + const stylesheetIndex = document.source.indexOf('{% javascript %}'); |
| 124 | + offset = stylesheetIndex; |
| 125 | + isDiagnostics = true; |
| 126 | + } |
| 127 | + const [node, ancestors] = findCurrentNode(document.ast, offset); |
| 128 | + let stylesheetTag = [...ancestors].find( |
| 129 | + (node): node is LiquidRawTag => |
| 130 | + node.type === NodeTypes.LiquidRawTag && node.name === 'javascript', |
| 131 | + ); |
| 132 | + if (isDiagnostics && 'children' in node && node.children) { |
| 133 | + stylesheetTag = node.children.find( |
| 134 | + (node): node is LiquidRawTag => |
| 135 | + node.type === NodeTypes.LiquidRawTag && node.name === 'stylesheet', |
| 136 | + ); |
| 137 | + } |
| 138 | + |
| 139 | + if (!stylesheetTag) return null; |
| 140 | + |
| 141 | + const schemaLineNumber = textDocument.positionAt(stylesheetTag.blockStartPosition.end).line; |
| 142 | + // Hacking away "same line numbers" here by prefixing the file with newlines |
| 143 | + // This way params.position will be at the same line number in this fake jsonTextDocument |
| 144 | + // Which means that the completions will be at the same line number in the Liquid document |
| 145 | + const stylesheetString = |
| 146 | + Array(schemaLineNumber).fill('\n').join('') + |
| 147 | + stylesheetTag.source |
| 148 | + .slice(stylesheetTag.blockStartPosition.end, stylesheetTag.blockEndPosition.start) |
| 149 | + .replace(/\n$/, ''); // Remove trailing newline so parsing errors don't show up on `{% endstylesheet %}` |
| 150 | + const stylesheetTextDocument = TextDocument.create( |
| 151 | + textDocument.uri, |
| 152 | + 'json', |
| 153 | + textDocument.version, |
| 154 | + stylesheetString, |
| 155 | + ); |
| 156 | + this.fileMap.set(textDocument.uri, stylesheetString); |
| 157 | + const program = this.service.getProgram(); |
| 158 | + console.log(program?.getSourceFiles()); |
| 159 | + return stylesheetTextDocument |
| 160 | + } |
| 161 | + } |
| 162 | + } |
| 163 | +} |
| 164 | + |
| 165 | +function positionToOffset(textDocument: TextDocument, position: Position): number { |
| 166 | + return textDocument.offsetAt(position); |
| 167 | +} |
0 commit comments