npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

typescript-template-language-service-decorator

v2.3.2

Published

Framework for decorating a TypeScript language service with support for languages embedded in template strings

Downloads

334,392

Readme

TypeScript Template Language Service Decorator

Framework for decorating a TypeScript language service with additional support for languages embedded inside of template strings.

Build Status

Usage

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.

Examples

For more advanced examples of using this library:

Contributing

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-decorator

Then install dev dependencies:

npm install

The 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 compile

And then run the end to end tests with the e2e script:

(cd e2e && npm install)
npm run e2e

You 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-branch

Make the desired code changes, commit them, and then push the changes up to your forked repository:

git push origin my-awesome-new-feature-branch

Then submit a pull request against the Microsoft typescript-template-language-service-decorator repository.

Please also see our Code of Conduct.

Credits

Code originally forked from: https://github.com/Quramy/ts-graphql-plugin