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

@ts-tools/robotrix

v6.0.0

Published

Useful TypeScript transpilation transformers.

Downloads

230

Readme

@ts-tools/robotrix

npm version

Useful TypeScript transpilation transformers.

Getting started

Install the library:

npm i @ts-tools/robotrix

Transformers

Node Env Transformer

Replaces process.env.[PARAM] expressions with string literals, using provided env.

import ts from 'typescript';
import { createNodeEnvTransformer } from '@ts-tools/robotrix';

const nodeEnvTransformer = createNodeEnvTransformer(process.env);

const transpileOutput = ts.transpileModule(code, { transformers: { before: [nodeEnvTransformer] } });

React Dev Transformer

Adds meta-data which is used by React for development error messages.

It adds the following attributes to all JSX elements:

  • __self={this}
  • __source={{ fileName: __jsxFileName, lineNumber: [jsx line number], pos: [jsx node position], end: [jsx node end] }}

if __source was added, the following declaration is prepended to source file: const __jsxFileName = [absolute file path]

import ts from 'typescript';
import { reactDevTransformer } from '@ts-tools/robotrix';

const transpileOutput = ts.transpileModule(code, { transformers: { before: [reactDevTransformer] } });

Dead Ifs Transformer

Detects and removes dead if branches. Checks the expression of every if statement, and cancels out always falsy branches.

It detects true, false, and basic string equality comparison (==, ===, !=, !==).

import ts from 'typescript';
import { deadIfsTransformer } from '@ts-tools/robotrix';

const transpileOutput = ts.transpileModule(code, { transformers: { before: [deadIfsTransformer] } });

Remap Imports Transformer

Remaps targets of esnext's static or dynamic imports/re-exports.

import ts from 'typescript';
import { createRemapImportsTransformer } from '@ts-tools/robotrix';

const remapImportsTransformer = createRemapImportsTransformer({
  remapTarget(target: string, containingFile: string): string {
    // remaps 'lodash' to 'lodash-es'
    // all others targets are untouched
    return target === 'lodash' ? 'lodash-es' : target;
  },
});

const transpileOutput = ts.transpileModule(code, { transformers: { before: [remapImportsTransformer] } });

CommonJS to ESM Transformer

Transforms CommonJS calls/exports to ESM syntax. If a source file is identified as using require, module, or exports, it is wrapped with the following:

[generated imports]

let exports = {}, module = { exports }

[original code]

export default module.exports

Each require(...) call with a string request is converted to a generated import statement with a unique identifier.

import ts from 'typescript';
import { createCjsToEsmTransformer } from '@ts-tools/robotrix';

const cjsToEsmTransformer = createCjsToEsmTransformer();
const transpileOutput = ts.transpileModule(code, { transformers: { before: [cjsToEsmTransformer] } });

createCjsToEsmTransformer() also accepts an optional options object, where one can currently specify shouldTransform to control whether to transform require(...) calls based on their target.

const blacklisted = new Set(['fs', 'another', 'etc']);

// doesn't convert any require(...) calls that target items in blacklisted
const cjsToEsmTransformer = createCjsToEsmTransformer({
  shouldTransform: (request) => !blacklisted.has(request),
});

Resolved Modules Transformer

Remaps static/dynamic esm imports/re-exports to the actual files resolved by TypeScript. It ignores relative targets (./ or ../) or ones resolved to definition (.d.ts) files.

Unlike other transformers in robotrix, this transformer requires TypeScript to resolve imports as part of a typed-checked transpilation (where a ts.Program is involved). This means it can be used when creating a custom ts.LanguageService and specifying getCustomTransformers() during host creation.

import ts from 'typescript';
import { resolvedModulesTransformer } from '@ts-tools/robotrix';

const languageServiceHost: ts.LanguageServiceHost = {
  getCustomTransformers() {
    return {
      before: [resolvedModulesTransformer],
    };
  },
  // ...rest of the host implementation is up to you
};

const languageService = ts.createLanguageService(languageServiceHost);

License

MIT