Framework for decorating a TypeScript language service with additional support for languages embedded inside of template strings.
This framework helps you to extend TypeScript's editor support for languages embedded inside of template strings. It hides most of the details of dealing with template strings so that you only have to worry about working with the template string contents themselves.
Support for embedded template languages is implemented using the TemplateLanguageService interface. Here's a simple TemplateLanguageService that adds completions that repeat the prior characters in a template string
import { TemplateLanguageService, TemplateContext } from 'typescript-template-language-service-decorator';
class EchoTemplateLanguageService implements TemplateLanguageService {
getCompletionsAtPosition(
context: TemplateContext,
position: ts.LineAndCharacter
): ts.CompletionInfo {
const line = context.text.split(/\n/g)[position.line];
return {
isGlobalCompletion: false,
isMemberCompletion: false,
isNewIdentifierLocation: false,
entries: [
{
name: line.slice(0, position.character),
kind: '',
kindModifiers: 'echo',
sortText: 'echo'
}
]
};
}
}The TemplateLanguageService operates on the contents of template nodes. context.text for example returns the text content of the template string, and the position passed to getCompletionsAtPosition is relative to the template string body.
The decorateWithTemplateLanguageService method takes a existing TypeScript language service and decorates it with a TemplateLanguageService. Here's how you would use this method to create a simple TypeScript server plugin for the EchoTemplateLanguageService
import * as ts from 'typescript/lib/tsserverlibrary';
import { decorateWithTemplateLanguageService } from 'typescript-template-language-service-decorator';
export = (mod: { typescript: typeof ts }) => {
return {
create(info: ts.server.PluginCreateInfo): ts.LanguageService {
return decorateWithTemplateLanguageService(
mod.typescript,
info.languageService,
info.project,
new EchoTemplateLanguageService(),
{ tags: ['echo'] });
}
};
};This plugin will now add echo completions to all template strings tagged with echo.
For more advanced examples of using this library:
To build, you'll need Git and Node.js.
First, fork the typescript-template-language-service-decorator repo and clone your fork:
git clone https://github.com/YOUR_GITHUB_ACCOUNT_NAME/typescript-template-language-service-decorator.git
cd typescript-template-language-service-decoratorThen install dev dependencies:
npm installThe plugin is written in TypeScript. The source code is in the src/ directory with the compiled JavaScript output to the lib/ directory. Kick off a build using the compile script:
npm run compileAnd then run the end to end tests with the e2e script:
(cd e2e && npm install)
npm run e2eYou can submit bug fixes and features through pull requests. To get started, first checkout a new feature branch on your local repo:
git checkout -b my-awesome-new-feature-branchMake the desired code changes, commit them, and then push the changes up to your forked repository:
git push origin my-awesome-new-feature-branchThen submit a pull request against the Microsoft typescript-template-language-service-decorator repository.
Please also see our Code of Conduct.
Code originally forked from: https://github.com/Quramy/ts-graphql-plugin
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![microsoft-github-policy-service[bot] avatar](https://avatars.githubusercontent.com/in/95686?v=4 "microsoft-github-policy-service[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent