jurassix / atom-javascript-refactor

atom plugin that provides refactoring support for JavaScript

atom-javascript-refactor package

Atom JavaScript ES6 Module and CommonJS refactoring support

atom-javascript-refactor simplifies ES6 Module and CommonJS refactoring, by allowing you to rename or move any file within your project and have all references updated automatically.

atom-javascript-refactor allows you to rename a file, and all referencing Modules will be updated with new path.

For example, given the following file:

src/animals.js

import cat from './meow';

Let's rename the file src/meow.js to src/kitten.js.

src/animals.js is transformed to

import cat from './kitten';

atom-javascript-refactor also updates all locally referenced Modules inside of the moved file.

For example, given the following files:

src/meow.js

import { RAINBOW } from '../constants';

src/animals.js

import cat from './meow';

Let's move the file src/meow.js to src/city-kitty/meow.js.

src/city-kitty/meow.js is transformed to

import { RAINBOW } from '../../constants';

src/animals.js is transformed to

import cat from './city-kitty/meow';

Usage

Using the TreeView, Right click on any .js file or directory to expose the Rename (with refactor support) option. Selecting this option will open a modal that will allow you to update the file name or path. Pressing Enter Key will apply the file rename/move and then run a codemod on the root folder.

Note: there currently is no support for Drag and Drop.

Install

apm i javascript-refactor

Develop

> cd atom-javascript-refactor
> npm i
> apm link

Contribute

• Please open an issue before submitting a PR
• All PR's should be accompanied wth tests 🚀

atom-javascript-refactor's Issues

Remove 'os' dependency

It's a node builtin

Cannot rename directory to existing directory path

This throws an error at the moveSync() call in renameFile(). Ideally it would merge the directory contents.

We might be able to use this - https://github.com/binocarlos/merge-dirs

Support for moving functions?

Does this module support moving functions from one file to another? If not, would there be any interest in a PR for this functionality?

Investigate using nuclide-commons-ui

It includes the AtomInput component that we already use, and a Spinner component that we may be able to use in the StatusBarTileComponent.

https://www.npmjs.com/package/nuclide-commons-ui

Move utils into a utils folder

Doesn't work for me

Hi,

Just installed the plugin, I added vue to the file extensions, so:

but nothing happens when I move a file. Maybe Vue is not supported?

Best Regards,

Francesco Saverio

Use redux libdefs from flow-typed

The flow-typed repo already has a complete libdef for redux. However, a few of our source files need to reference redux types (like Store), and it is not yet possible to import types from a module declaration.

Blocked by flow-typed/flow-typed#16

isNewPathValid should only catch "does not exist" error when stat'ing the next path

Context menu item is not shown when clicking on a tree view row outside of the file name

Rename File stopped working

After right-clicking on a file and choosing "Rename (with refactor support)", nothing happens. The dialog box where it asks for the new name does not come up.

This stopped working recently (like a few weeks ago).

No errors in the dev console either 😭

Support .css files

create-react-app bootstraps css support loaded from JavaScript; JS files have import statements to .css files. We need to update our JS files if these move.

Configure test runner

What runner do we want to use? My vote would be for ava or jest. Both can run tests in parallel. I've never used jest so I'd probably just stick with ava.

Tests

We need test coverage for 1.0 release.

Uncaught TypeError: q.drain is not a function

[Enter steps to reproduce:]

1. ...
2. ...

Atom: 1.21.1 x64
Electron: 1.6.15
OS: Mac OS X 10.12.6
Thrown From: javascript-refactor package 0.5.7

Stack Trace

Uncaught TypeError: q.drain is not a function

At /Users/nadiacarvalho/.atom/packages/javascript-refactor/node_modules/async/lib/async.js:909

TypeError: q.drain is not a function
    at /packages/javascript-refactor/node_modules/async/lib/async.js:909:23
    at /packages/javascript-refactor/node_modules/async/lib/async.js:44:16
    at /packages/javascript-refactor/node_modules/fs-plus/lib/fs-plus.js:438:24
    at FSReqWrap.oncomplete (fs.js:112:15)

Commands

     -0:43.8.0 core:save (input.hidden-input)
     -0:40.6.0 core:paste (input.hidden-input)
     -0:39.5.0 core:undo (input.hidden-input)
     -0:38.6.0 core:save (input.hidden-input)
     -0:27.1.0 tree-view:remove (span.name.icon.icon-file-directory)
     -0:15 remote-sync:configure (span.name.icon.icon-file-directory)
     -0:05.5.0 remote-sync:upload-folder (div.header.list-item)

Non-Core Packages

atom-beautify 0.30.5 
atom-clock 0.1.15 
atom-javascript-console-snippets 0.10.0 
atomify 0.6.0 
chestnut-light-atom-syntax 0.2.1 
es6-javascript 1.0.0 
format-javascript-comment 0.2.5 
gcc-make-run 0.2.12 
gpp-compiler 3.0.7 
javascript-object-snippets 0.3.0 
javascript-refactor 0.5.7 
javascript-snippets 1.2.1 
javascript-standard-snippets 0.2.1 
language-javascript-better 1.7.1 
language-javascript-jxa 0.2.8 
language-javascript-subtlegradient 0.1.0 
min-ui 0.0.4 
qolor 0.4.2 
remote-sync 4.1.6 
turbo-javascript 1.4.0 
zooce-syntax 1.0.1 

Add support for renaming references in moved files

jurassix/refactoring-codemods#1

Move "Rename (with refactor support)" menu item next to "Rename"

Add eslint support

Coverage reports

Coveralls seems popular. Anything else worth looking at?

cc @spudly @jurassix

Trigger refactor with a drag-and-drop

Configure travis

Refactor support for renaming a named export

Setting updates require an Atom reload for the package to include them

I'm seeing an when triaging #65 where changes to Ignore Config or Ignore Pattern are requiring me to reload Atom for my Package to pick up these changes. More research is needed to determine how to resolve.

Doesn't rename references to index.js files when imported by directory

When you import a file by directory that contains an index.js file, and you rename the index.js file, references to it don't get updated.

Take the following example. Here's what the directory structure looks like before the refactor:

src/
  components/
    MyComponent.js (this file imports from "./propTypes")
    propTypes/
      index.js

If you rename /components/propTypes/index.js to /utils/propTypes.js, it will not update the MyComponent.js file to import from the new location.

Directory Structure after refactor:

src/
  components/
    MyComponent.js (this file imports from "./propTypes")
  utils/
    propTypes.js

Import String before refactor:

import * as propTypes from './propTypes';

Expected import string after refactor:

import * as propTypes from '../utils/propTypes';

Actual import string after refactor: (same as before refactor)

import * as propTypes from './propTypes';

Option to derive jscodeshift printOptions from eslint config

  printOptions: {
    trailingComma: true,
    quote: 'single',
  },

Add progress spinner in status bar

Or somewhere

Doesn't work for me :(

Hi,

I tried this package after installing it directly from Atom packages manager.
I have a file User.jsx with the following content :
import api from './Api';

From rename with refactor Atom menu, I renamed my Api.jsx file into Api2.jsx but the content of User.jsx file is not changed :-(

I tried after changing file format settings of package (js to jsx), but same result, no change.

Can you help me with this issue?

Refactor into a strategy pattern

If we add a small abstraction on top of our JavaScript rename + codemod transforms, then potentially we could support other file formats in the future if we wanted. Might even be worth moving the JS strategy into a separate project and inject it here...Or at least provide a way to inject others and have this be the 'native' implementation.

Performance Improvements

Currently we serially apply the releative transform this needs to be updated to support a batch mode so we only call it once on the project.

Another possible performance optimization is to combine the import and releative transforms into a single transform that is called once on the project per rename. This significantly increased complexity of the transform, and makes it a very niche transform. But would be worth the complexity to only traverse/transform to AST/apply mods to the project structure once.

Finally we need a proper test that scaffolds a large file base and run the transforms on these as a baseline.

Add flow types

Let's add this to vscode also!

Hey @jurassix ,

I know we talked a while back on some thread about adding this to sublime and you said you were more interested in adding it to vscode. I'm using vscode now and would love to have this plugin there :)

Lemme know how I can help!

Directory Rename with refactors

Add support for windows

This is kinda annoying, I'd love if it just used regular slashes!

clicking Rename (with refactor support) does nothing

Running Atom 1.22.1

Move components into a subdir

Display a notification when the user attempts to rename a file to a path that already exists

The default Rename command does this, so we can use that as an example.

Re-enable greenkeeper

I think it broke when the repo was renamed. Nuclide has an update but there is no pull request from greenkeeper.

Configure greenkeeper

We'll probably want better test coverage before we do this. Greenkeeper runs tests when bumping dependencies and will tell you if the new version broke anything.

Update references to .json files

The resolve algo used by node/browserify/webpack allow js files to require/import .json files without including the extension. When moving a .json file, or file that references a .json file, the path to the json file should be updated.

Event target of "atom-javascript-refactor:refactor" handler varies with right-click location

Depending on where you right click on a file or directory in the tree view to open the context menu, sometimes the refactor handler event.target is the element with the [data-path] attribute, and sometimes it is a parent element, up to and including the .file or .directory element specified in menus/atom-javascript-refactor.json.

To reproduce, right-click as far to the left as possible on a file entry. event.target will be the parent list item.

I'm not sure if this is an atom bug or expected behavior, but we can work around it by finding the first child with a [data-path] attribute if the event.target does not have one.

should support exports

see this issue.
reference: jurassix/refactoring-codemods#2

Files open in editor seem to behave undeterministic when renamed/moved

If the file is open in text editor it seems transform changes applied are reverted. Some kind of atom cache or git cache issue is happening - i think. Need to research tree-view move-dialog and rename functions to see what subtleties are missing in our implementation

Does not work at all

refactor does not work

Possibly rename?

The "codemods" bit is arguably an implementation detail, and the "atom" bit could probably be dropped. Looking through my extensions, about half use the "atom-" prefix, so we could go either way.

Interactive Mode

Show a panel with all refactors possible let user select/deselect files to update

Switch eslint-plugin-flow-vars to eslint-plugin-flowtype

This is output to the console on an npm install:

npm WARN deprecated [email protected]: eslint-plugin-flow-vars has been deprecated in favor of [email protected] or higher

Marketing

We need to clean up the README.md to be clear about what this atom package does. The README.md is visiable in: Atom Settings > Packages, APM, and GitHub. Language should be simple and informational.

We also need a visual demo. I'm inclined to use a GIF but they are quite large. it would be nice to have audio too. I'm thinking a DEMO video would be good, hosted on YouTube.

After this issue is closed we should spread the word to Facebook members, especially the ones interested in codemods, to get some feedback/critique of this.

Make path in modal pane relative to the project root

Performance

When I am processing a refactor ("Refactor in progress..." in the stats bar) with this package, I am seeing Atom Helper take 100% of one of my CPU cores. It can also take a couple of minutes to process on a new 5K retina imac with 32gb of RAM.

My project is mid-sized, so I'm not sure what the issue is. Maybe it is going into node_modules for some reason? Could there be a way to limit the scope of the refactor?