JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q41593F
  • License ISC

Collection of more or less primitive helpers and abstractions for JSCodeShift, build for design system migrations and upgrades.

Package Exports

  • jscodeshaft

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jscodeshaft) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JSCodeShaft

A collection of simple, often deliberately primitive helpers and abstractions to ease the pain of upgrading/migrating and deprecating certain aspects of your codebases. The primary focus here are React-based design systems, but fair amount of code here may work in other envs too.

shaft noun [C]
a rod forming part of a machine such as an engine, that turns in order to pass power on to the machine.

TODOs

  1. cleanup all helpers and their categories
  2. sort out a roadmap
  3. proper documentation on AST, JSCodeShift and this.

First steps

Whatever you do, familiarise yourself with how AST works. Preferably bookmark https://astexplorer.net/ and while you're at it, set the Transform to jscodeshift and the parser to whatever understands JSX, e.g. babel-eslint or flow.

In order to achieve anything, you will have to traverse a lot of nodes, so don't be afraid to abstract even small pieces of logic in helpers for future reuse.

Also, mutation is fine. In fact, it's expected. Don't over-complicate your life trying to avoid it.

Please, please, please be verbose in your comments (obviously within reason) – there are many not entirely obvious cases you'll have to handle, and nobody wants to guess what you had in mind 3 months from now.

Some jscodeshift resources and code samples

  1. https://github.com/sejoker/awesome-jscodeshift
  2. https://github.com/rajasegar/awesome-codemods
  3. https://github.com/cowchimp/awesome-ast
  4. https://github.com/facebook/jscodeshift/tree/master/src/collections
  5. https://github.com/cpojer/js-codemod
  6. https://gist.github.com/ptbrowne/4fab98301c8bcffeaf3af215025d5b2c
  7. https://vramana.github.io/blog/2015/12/21/codemod-tutorial/
  8. https://skovy.dev/jscodeshift-custom-transform/
  9. https://github.com/cpojer/js-codemod/blob/master/transforms/template-literals.js
  10. https://www.npmjs.com/package/jscodeshift-helper
  11. https://katilius.dev/writing-js-codemods/