GithubHelp home page GithubHelp logo

jurassix / atom-javascript-refactor Goto Github PK

View Code? Open in Web Editor NEW
32.0 4.0 3.0 345 KB

atom plugin that provides refactoring support for JavaScript

License: MIT License

JavaScript 98.73% CSS 1.27%

atom-javascript-refactor's Introduction

atom-javascript-refactor package

Build Status Coverage Status Dependency Status devDependency Status

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 People

Contributors

ahutchings avatar greenkeeperio-bot avatar jurassix avatar mitchellmc avatar thommymo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

atom-javascript-refactor's Issues

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?

Doesn't work for me

Hi,

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

screen shot 2017-06-23 at 11 23 26

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

Best Regards,

Francesco Saverio

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 

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';

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.

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!

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.

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

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.

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.