facebook / jscodeshift

A JavaScript codemod toolkit.
https://jscodeshift.com
MIT License
9.26k stars 477 forks source link

can I run jscodeshift as a REPL? #546

Open sibelius opened 1 year ago

Daniel15 commented 1 year ago

The closest thing we have to a REPL at the moment is https://astexplorer.net/. You can select jscodeshift from the "Transform" drop down. AST Explorer lets you edit a transform and see how the output changes as you edit it.

roddds commented 1 year ago

Not directly, but you can use it with node (using App.js from create-react-app as an example):

$ node
Welcome to Node.js v16.14.2.
Type ".help" for more information.
> const j = require('jscodeshift');
undefined

> const root = new j(fs.readFileSync('./App.js').toString())
undefined

> root
Collection {
  _parent: undefined,
  __paths: [
    NodePath {
      value: [Node],
      parentPath: null,
      name: null,
      __childCache: null
    }
  ],
  _types: [ 'File', 'Node', 'Printable' ]
}

> root.find(j.JSXElement, {openingElement: {name: {name: 'p'}}}).paths()[0]
<ref *1> NodePath {
  value: Node {
    type: 'JSXElement',
    start: 211,
    end: 286,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: undefined,
      lines: [Lines],
      tokens: [Array],
      indent: 8
    },
    openingElement: Node {
      type: 'JSXOpeningElement',
      start: 211,
      end: 214,
      loc: [SourceLocation],
      name: [Node],
      attributes: [],
      selfClosing: false
    },
    closingElement: Node {
      type: 'JSXClosingElement',
      start: 282,
      end: 286,
      loc: [SourceLocation],
      name: [Node]
    },
    children: [ [Node], [Node], [Node] ]
  },
  parentPath: NodePath {
    value: [
      [Node], [Node],
      [Node], [Node],
      [Node], [Node],
      [Node]
    ],
    parentPath: NodePath {
      value: [Node],
      parentPath: [NodePath],
      name: 1,
      __childCache: [Object: null prototype]
    },
    name: 'children',
    __childCache: [Object: null prototype] {
      '0': [NodePath],
      '1': [NodePath],
      '2': [NodePath],
      '3': [Circular *1],
      '4': [NodePath],
      '5': [NodePath],
      '6': [NodePath]
    }
  },
  name: 3,
  __childCache: [Object: null prototype] {
    type: NodePath {
      value: 'JSXElement',
      parentPath: [Circular *1],
      name: 'type',
      __childCache: null
    },
    openingElement: NodePath {
      value: [Node],
      parentPath: [Circular *1],
      name: 'openingElement',
      __childCache: [Object: null prototype]
    },
    closingElement: NodePath {
      value: [Node],
      parentPath: [Circular *1],
      name: 'closingElement',
      __childCache: [Object: null prototype]
    },
    children: NodePath {
      value: [Array],
      parentPath: [Circular *1],
      name: 'children',
      __childCache: [Object: null prototype]
    }
  }
}

> j(root.find(j.JSXElement, {openingElement: {name: {name: 'p'}}}).paths()[0])
Collection {
  _parent: undefined,
  __paths: [
    NodePath {
      value: [Node],
      parentPath: [NodePath],
      name: 3,
      __childCache: [Object: null prototype]
    }
  ],
  _types: [ 'JSXElement', 'Expression', 'Node', 'Printable' ]
}

> j(root.find(j.JSXElement, {openingElement: {name: {name: 'p'}}}).paths()[0]).toSource()
'<p>\n  Edit <code>src/App.js</code> and save to reload.\n</p>'
>