Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

ts-migrate-plugins

0.1.7 • Public • Published

ts-migrate-plugins

ts-migrate-plugins is designed as a set of plugins, so that it can be pretty customizable for different use-cases. This package contains a set of codemodes (plugins), which are doing transformation of js/jsx -> ts/tsx.

ts-migrate-plugins is designed around Airbnb projects. Use at your own risk.

Install

Install ts-migrate using npm:

npm install --save-dev ts-migrate-plugins

Or yarn:

yarn add --dev ts-migrate-plugins

Usage

import path from 'path';
import { tsIgnorePlugin } from 'ts-migrate-plugins';
import { forkTSServer, migrate, MigrateConfig } from 'ts-migrate-server';
 
// get input files folder
const inputDir = path.resolve(__dirname, 'input');
 
// initialize a typescript server
const server = forkTSServer();
process.on('exit', () => {
  server.kill();
});
 
// create new migration config and add ts-ignore plugin with empty options
const config = new MigrateConfig().addPlugin(tsIgnorePlugin, {});
 
// run migration
const exitCode = await migrate({ rootDir: inputDir, config, server });
 
// kill server
server.kill();
process.exit(exitCode);

List of plugins

Name Description
declare-missing-class-properties Declare missing class properties.
eslint-fix Run eslint fix to fix any eslint violations that happened along the way.
explicit-any Annotate variables with any ($TSFixMe) in the case of an implicit any violation.
hoist-class-statics Hoist static class members into the class body (vs. assigning them after the class definition).
jsdoc Convert JSDoc @param types to TypeScript annotations.
member-accessibility Add accessibility modifiers (private, protected, or public) to class members according to naming conventions.
react-class-lifecycle-methods Annotate React lifecycle method types.
react-class-state Declare React state type.
react-default-props Annotate React default props.
react-props Convert React prop types to TypeScript type.
react-shape Convert prop types shapes to TypeScript type.
strip-ts-ignore Strip // @ts-ignore. comments
ts-ignore Add // @ts-ignore comments for the remaining errors.

Type of plugins

We have three main categories of plugins:

  • Text based plugins. Plugins of this category are operating with a text of source files and operate based on this. Example: example-plugin-text.

  • Jscodeshift based plugins. These plugins are using a jscodeshift toolkit as a base for operations and transformations around Abstract Syntax Tree. Example: example-plugin-jscodeshift.

  • TypeScript ast-based plugins. The main idea behind these plugins is by parsing Abstract Syntax Tree with TypeScript compiler API, we can generate an array of updates for the text and apply them to the source file. Example: example-plugin-ts.

FAQ

What is the ts-migrate plugin?

The plugin is an abstraction around codemodes which provides centralized interfaces for the ts-migrate. Plugins should implement the following interface:

interface Plugin {
  name: string
  run(params: PluginParams<TPluginOptions = {}>): Promise<string | void> | string | void
}
 
interface PluginParams<TPluginOptions = {}> {
  options: TPluginOptions;
  fileName: string;
  rootDir: string;
  text: string;
  sourceFile: ts.SourceFile;
  getDiagnostics: () => Promise<PluginDiagnostics>;
}
 
export type Diagnostic = tsp.Diagnostic | tsp.DiagnosticWithLinePosition;
 
export interface PluginDiagnostics {
  semanticDiagnostics: Diagnostic[];
  syntacticDiagnostics: Diagnostic[];
  suggestionDiagnostics: Diagnostic[];
}

How I can write my own plugin?

You can take a look into the plugin examples. For more information, please check the plugins implementation for the ts-migrate.

I have an issue with a specific plugin, what should I do?

Please file an issue here.

Contributing

See the Contributors Guide.

Install

npm i ts-migrate-plugins

DownloadsWeekly Downloads

3,631

Version

0.1.7

License

MIT

Unpacked Size

268 kB

Total Files

75

Last publish

Collaborators

  • avatar
  • avatar