dependents/dependents

Navigate front-end codebases in Sublime Text 2/3

Dependents

Navigate front-end codebases in Sublime Text 2/3

For updates, follow @getDependents.

Currently supports JavaScript (AMD, CommonJS, and ES6) and CSS Preprocessor (Sass and Stylus) codebases.

1. Installation
2. Usage and Settings Details
3. Bindings
4. Reporting an Issue
5. Contributing to Dependents

Installation

You can install Dependents via Package Control.

Don't see it? Try reinstalling Package Control. Alternatively, add the repository and install it:

1. Package Control -> Add Repository
2. Enter https://github.com/dependents/Dependents
3. Package Control -> Install Package
4. Choose Dependents

Nodejs Dependency

You must have Node.js installed on your system. Anything v0.10 and above is fine.

• Note: The Node.js windows installer will add the install directory to the PATH variable but you must reboot to reload it.

NVM Users

NVM will install Nodejs outside of the standard binary location. If you encounter an error where your Node executable cannot be found, please override the node_path in User settings:

• Preferences -> Package Settings -> Dependents -> Settings - User

{
  "node_path": "path/to/the/node/install/directory"
}

• This will allow Dependents to find the Node binary for every codebase

Bindings

To more swiftly and conveniently trigger the package's commands both key and mouse bindings are provided.

Key bindings

By default, the following key bindings have been supplied:

OSX:

• Jump to dependency: Command + Option + Right arrow
• Find Dependents: Command + Option + Up arrow
• Copy path to clipboard: Command + Shift + C

Windows and Linux:

• Jump to dependency: Ctrl + Shift + Down arrow
• Find Dependents: Ctrl + Shift + Up arrow

Mouse bindings

By default, the following key bindings have been supplied:

OSX:

• Jump to dependency: Command + Option + Click on the dependency item
• Find Dependents: Command + Shift + Click anywhere in document

Windows and Linux:

• Jump to dependency: Ctrl + Alt + Click on the dependency item
• Find Dependents: Ctrl + Shift + Click anywhere in document

Reporting an issue

You can get console logs via View -> Show Console.

Paste those logs into the body of your issue.

Feel free to chat with me on Gitter if you need help or ping me @mrjoelkemp.

License

(Creative Commons Attribution NoDerivs (CC-ND)](https://tldrlegal.com/license/creative-commons-attribution-noderivs-(cc-nd))

The no derivatives creative commons license is straightforward; you can take a work released under this license and re-distribute it but you can’t change it.

dependents's Issues

Use the new node binary for jump to dependency aliasing

dependents/node-dependents#6

Try to use node-dependents

https://github.com/mrjoelkemp/node-dependents

Should be used to do all the heavy lifting. Python then just issues a call, gets the results list by scraping stdout then populating the dropdown

Better relative path resolution

Currently only handles relative pathing one-level deep: ../.

Should support more than that.

Specific example: https://github.com/jscs-dev/node-jscs/blob/61c51161392a7048dc313a33a83e11370e9b00d2/lib/options/preset.js#L3

New Feature: Copy dependents paths to clipboard

Often times someone will ask in a chat: "who uses this module?". Can use dependents but need to find a way of copying those filenames and pasting them.

• Backdoor is to use the ST console to get those lines
• Should have a menu option of copying dependents to clipboard (show status of finding dependents then show status of the results being copied to the clipboard)

New Feature: Jump to SASS dependencies

Aliased dependents

Use the requirejs config to look up dependents.

Depends on dependents/node-dependents@d7920aa

Strange 'substring' error

Traceback (most recent call last):
  File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 524, in run_
    return self.run(**args)
  File "Dependents in /Users/jokemp/Library/Application Support/Sublime Text 3/Installed Packages/Dependents.sublime-package", line 21, in run
  File "Dependents in /Users/jokemp/Library/Application Support/Sublime Text 3/Installed Packages/Dependents.sublime-package", line 46, in __init__
ValueError: substring not found

in test/sync.js trying to jump to dependency

Jump to SASS Partial

Should just need a "sass_config" that defines the root of the sass codebase. Jumping around should have the same logic as JS

Fix relative pathing

Off by a leading slash

Cut new release for config feature

• Test config integration
• Draft changelog (describe new feature, ask for an upgrade to dependents)

Test fixtures

Create a test directory with sample apps for manual testing.

Apps:

• AMD
• CommonJS
• ES6
• SASS

Must include:

• Relative pathing
• Aliased paths

Pubsub features

• Find all listeners of an event
• Find all triggers of an event
• Open all files that care about an event

Click on identifier to jump to dependency

You see an instance of a module used within the code and want to jump to it immediately

instead of tracing the variable as follows:

• Look up where the variable was created
• Look up the class instantiated
• Find the class within the factory function (for AMD)
• Find the path of the class (using position or name matching)

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Performance regression in large codebases

Dependents: Elapsed - 6.762444019317627 seconds for ~1k modules.

Used to be 2 or 3.

Depends on: dependents/node-dependents#26

Accept a shim config location and pass it to node-dependents

Shim config will be used in addition to the require config to resolve paths

Add "Open all Dependents" to File menu

Currently only in Right-click menu

Remove the constraint of only processing files within the root

Tests pull in modules that you should be able to jump to.

ES6 support

Depends on dependents/node-dependents#22

Click to dependency doesn't work for inner requires

require(['foo/bar'], ...)

Fails because we currently only look for the dependency as a complete line instead of the string under the cursor.

Python 2 support

Need to try/except the import statements

CommonJS support

Easy to isolate testing and development now that #5 via .deprc has landed. Use node-jscs as a testbed for commonjs module parsing. Use node-precinct but see why it fails.

Depends on: dependents/node-dependents#22

Use package settings instead of a keybinding config

This would avoid the need to duplicate args and also ease menus and such.

Use the mouse click + cmd + option to trigger dependency mode

Currently it's:

1. move your cursor (either by keyboard or click)
2. cmd + option + right

Should be:

1. Hold cmd + option
2. Click on the path to jump to

Related to #8

Relevant references:

1. https://github.com/SublimeText/MouseEventListener/blob/master/mouse_event_listener.py
2. history_list.py in Default.sublime-package
   • Unzip it then look for the file

Code cleanup items

• Reduce redundancy between Dependents.py and JumpToDependency.py
• Move non-command files to lib/
• JumpToDependency: Consider setting the root to sass_root instead of https://github.com/mrjoelkemp/sublime-dependents/blob/master/JumpToDependency.py#L158

Extend this idea to sass

Show stylesheets that import/depend-on the current partial

• Good for gauging the severity of your changes
• Need a new node tool that parses SASS' ast but is similar to node-dependents

Jump to a partial using the same behavior as defined for JS files

Can we use the custom bindings (if supplied) and not the defaults?

Folks want to change the bindings permanently, not add on additional ones.

Perf ideas

Sample stats

• 1097 files
• 2152.46 ms to find the dependencies for all
• 258ms to traverse all files using node-dir

Server idea

Create a long-running server that does the following:

1. builds the dependent matrix on load
2. On file change, compute dependencies, remove/add the file as a dependent of the other files.
   • Slow in that you have to find out who you're a dependent of. Unless we keep another hash of the inverse relationship (file -> list of files the file depends on).

This way, it's O(1) to modify the dependent matrix.

Pros:

• Super fast

Cons:

• Server needs to always run otherwise the sublime plugin is dead (possibly use monit or something to keep it alive (or restart)

File system matrix storage?

Possibly pickle?

Still need on save hook to recompute the matrix and flush to disk.

Stream the dependents as we compute them

Need a way of refreshing the quick panel with the new items

Different codebases have different roots

Specifying the root in the keymap implies that all of your projects have the same root name.

Solutions:

1. Automatically deduce the root

Each time the command is triggered, traverse up the directory tree to see the top-most directory that doesn't contain a .js file.

• Could do this once and save the result in a file somewhere? Not in the current codebase
  • Look at how package manager caches data

1. Use a .dependentsrc file in the root directory.
2. Ask users to add root and config .editorconfig

Add a right click menu

Right click menu on the entire file should now have an option to "Find dependents".

Possibly have multiple options:

• Find Dependents for File
• Find Dependents for Selection (based on where your mouse is)

Auto-setup the sublime-mousemap

Detect if the file exists, if so, then add to it. Otherwise, prepopulate it.

Auto update node-dependents as a precondition

Run npm update -g dependents in the shell.

Although, this may need to be altered due to Python sucking balls at executing anything in usr/local/bin by default.

Will likely have to run /usr/local/bin/npm update -g dependents

"substring not found" error

Traceback (most recent call last): File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 526, in run_ return self.run() File "/Users/justinpagano/Library/Application Support/Sublime Text 3/Packages/Dependents/JumpToDependency.py", line 35, in run self.view.pathWithinRoot = self.view.filename[self.view.filename.index(self.window.root) + len(self.window.root):] ValueError: substring not found

Started getting this suddenly.

Jump directory to file if there's only one dependent

If a file has only one dependent, open that file directly, avoiding showing the quick panel and avoiding the need to click through.

Handle jumping to loader-prefixed files (like hogan loader, text plugin, css)

Strip out 'hgn!' and such

Use click region over cursor position if available

Cursor could be on a separate view while you right click on a particular path and choose Dependents -> Jump to Dependency

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Windows support

1. Needs an easy way of invoking a globally installed npm module or supplying the local install path for windows machines where /usr/local/bin is currently hardcoded
   • Python can't find these executables (for OSX at least) using shutils
2. Add default keymaps and mousemaps

Accept a requirejs config location

Need to pass that to the node tool to use requirejs config to resolve paths

Fresh install of latest release seems busted due to directory name?

New Feature: Open dependency tree for a module as a JSON file

1. Of the current file down
2. Of the trees including the current file

Root
  A
    C
  B
    D

Staggered view of the tree and dependencies

• dependencies are listed below the file with an indent

Use mrjoelkemp/node-dependency-tree to get the tree

Critical: Node files aren't found within the sublime-package file.

Figure out how to resolve files within the package.

Jump to the module under your cursor

Not sure which key binding to use.

Implementation:

• Get text under cursor
• Need a root supplied in the key binding configuration
• Open the file: root + string under cursor
• If file isn't there, show a dialog warning

Relative paths broken

AttributeError: 'View' object has no attribute 'pathWithinRoot'

Feature: key command to open all of the dependents of a file

Instead of showing the dropdown, open all files

New Feature: Tell where a module's function gets called

• Pull the module's dependents
• look for CallExpressions with the name of the function

Depends on dependents/node-dependents#44 when integrating https://github.com/mrjoelkemp/node-callers

Read CSS sourcemap to jump to sass file instead of css (plugin-loaded) file

UPDATE: Looked into this and it's not trivial. One of the many sources is the sass file that generated the css file. Imports are also listed as sources.

Will need to traverse the list of sources and jump to the one that's most similar to the current css file being jumped to.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Does the tool fail if you don't supply a config?

Couldn't find dependency that used a relative path

Double check that both . and .. resolve properly.

For Behance, test that nbd relative paths resolve within the network's codebase.

Jump to driver script

Often, you're in a module and want to know which app(s), not just containing modules, use it.

Will need to add support for this to node-dependents.

• Could programmatically search for all driver scripts, generate dependency trees for each, then check which sets the current modules is a member of.
  • Optimization: support a requirejs build script that has a list of modules and uses mrjoelkemp/node-get-modules-to-build to avoid computing the set of driver scripts each time.
  • Optimization: Make sure dependency tree generation uses a memoized traversal to speed up the process of generating trees for each driver script.

Prevent repetitive invocations

Can the tool check the state of the loading indicator thread? Or does the plugin not have state?

Global install of node-dependents

Will then need to fall back to local install if a global is not found

Can use which dependents to check for global install and then fall back to running the local node_modules/node-dependents/bin/dependents.js if not found.

Pros:

• Avoids dependents being placed in your codebase (unfortunately syncs over to a VM if you're using a watcher)

Cons:

• Makes auto-updating the node tool harder since you may need to sudo npm install dependents
  • Actually not a problem, since npm update -g dependents will also update it if it's globally installed