strd6 / editor

Edit Github repos and run them in your browser.

Editor

The funny story about this editor is that it has an unbroken history from a single gist https://gist.github.com/STRd6/6286182/6196ffb39db7d10c56aa263190525318ca609db7

The original gist was an exploration in a self-hosting gist editor. One that could load gists via the Github API, update them, and create new gists. It succeeded at that, but I ran into the limits of the gist structure, namely no branches or folders.

I went on and created a git repo, merged in the gist history, and continued from there. Maybe if I were smarter I could have rewritten it from scratch to be better, but I had no idea what I was doing and still don't know to this day.

So that may explain why this is in such need of a cleanup.

Demo

Run it!

Components

• Packager
• Hygiene

Templates

• Actions
• Editor
• Github Status
• Text Editor
• Repo Info

FAQ

Help the run popup closes immediately after opening...?

Make sure your adblock extension isn't being to aggro!

editor's Issues

Sandbox window should open immediately so we don't get popup blocker prompts

We'll need to write to the window after it is opened and we've completed our build, but open it immediately so we don't get blocked.

Dependency Explorer

Open dependency source in an editor window. Allow for saving back to github or perhaps overwriting local copy or a local branched copy.

Packaged Dependencies

Distribute packages as .json files. Allow for bundling dependencies.

Auto-Close Test and Run windows if an error occurs

We need to open the pop-up immediately on user interaction event, but the contents aren't available until later. We should auto-close the window if there was an error generating the contents.

Publishing Project to gh-pages takes a long time and uploads 10MB of data for editor itself

Version Packages

Publish packages json to sha, version, and branch where appropriate.

We may even want to create an index file that lists versions.

See also #25

Auto-rebase when pushing to feature branches

To eliminate the "Empty commit" and squash all the others into one commit for the branch we should rebase and force-push our branch commits..

It may get more complex if we merge master into the branch, but maybe not.

Carry forward global script requires from packages.

We should aggregate all global script requires from packages and use them to create the standalone html for the top level app.

This could lead to a little trouble if there are incompatible requires, but the solution is to avoid global script requires where possible.

Auth is a little rough

Auth button doesn't disappear after retrieving token from auth site.

Retries for Unprocessable Entity Errors

Github API sometimes throws errors when saving and a manual retry is required.

We should auto-retry the intermittent errors that it makes sense for.

Github repo info widget

It would be nice to see what repo is loaded and what branch we are on.

Find in files

Search all files for matching strings.

The editor should immediately open to the new file after clicking "New File" and providing a file name.

Clean up old branches on Github

Delete branches that have been merged back into master.

Remove gh-pages builds that are no longer current.

This should be automated as part of our repo hygiene tools.

Creating issues from editor app

Switching branches doesn't close open editor windows

Loading <branch>.js in published html files has issues with cache control.

We should either append a cache buster string or think about referencing a .js instead.

Ace Editor Highlighting for Literate Code

Highlight code blocks in the correct language mode for literate files.

Prompt before losing unsaved data

Allow for custom scripts or add-ons to run in the editor

Tests should be run in same module context as normal files

to run tests we should basically:

for each test in test/*
  require test/[name]

Add Hygiene To clean file formatting

Use features/Pull Requests instead of issues

Errors aren't reported when packaging dependencies.

I was encountering cross domain errors when trying to getJSON in the packager, but it ended up throwing an error in JS later rather than reporting the failure on the console and aborting.

Track modified state for files

.haml and .styl highlighting support

We'll probably need to setup our own Ace CDN to host the syntax highlighters.

Pull from upstream

If a repo is forked we should be able to detect that and add a "pull from upstream" button that will merge in any upstream changes.

Or optionally force a sync with upstream.

Rename ENV to PACKAGE, have require generate a require function for a package and not know about any globals

Scripts with executable bit set lose it when saving

Prevent losing data from switching issue branches

Require

Implement a node.js style require.

• #51
• #52

Sorting filetree when loading git data

Continuous Deployment

Merges to master should deploy the latest version.

There may be some challenges with the self-hosting nature of things.

Sometime ACE editor is blank when opening a new file

Scrolling seems to fix it, but it would be nice if the editor always showed up after clicking on a file.

Maybe need to add a delay to focusing so ACE is ready for it?

Filetree should support displaying files in folders and collapsing folders

Maybe break it out into its own separate component. Much could probably be done with some simple css, the existing HAMLjr functionality, and jQuery toggle class.

Generate documentation and publish on gh-pages

The editor should be able to generate project documentation and publish it to gh-pages. The documentation should be interactive. There should be links from the docs to the app and back.

We may need to implement something comparable to docco, with a template and optional hooks for interactive scripts.

auto-bundle Require as a project dependency?

Currently every project needs to add require as a remote dependency. We should auto-require it since it's pretty close to the root of the whole system.

Reduce commits to gh-pages branch.

Instead of using a series of content updates which results in many extra api calls and commits we should make one commit based on the existing gh-pages tree, adding/modifying our 3 files.

Require templates individually

Components that provide templates should not jam them into a global namespace, instead we should be able to require them as needed and named as we wish.

Rendering HAMLjr templates within a component

A component should be able to reference HAMLjr templates that it defines in a simple way.

This should continue to work if the component is reused within another component.

Ideally it would be transparently handled so that from any HAMLjr template one can call render "whatev", obj and it will choose the correct template.

Some save errors are not reported to console

When publishing to github sometimes a 409 Conflict error is encountered but it is not displayed on the console.

Emoji Commits

Commits should have two random emoji so that they are more visually distinct.

Binary data in repos causes editor to fail to load the repo

When loading data from github repos, if they have binary data (images, fonts, etc.) it fails to decode and throws an exception causing the entire load to fail.

We should at least catch the exception. The challenge though is that when we save back it may delete the files if they aren't in the working tree.

One possibility is to keep the files encoded, and prevent opening them in the editor. This may be a good stop-gap solution.

We should probably keep binary data out of our trees anyway, but if it's there we should be able to continue and not destroy it.

Remove any open editors when loading a new repo or branch

Currently old editor divs remain in dom, we should remove them when reloading the files so as not to confuse things.

Merge button for feature branches

Repo info doesn't stay up to date when switching branches or loading a new repo

Error when building package and entry point is not found isn't displayed

The error should be displayed, currently it just hangs with Saving...

Requiring css and text files from code files

Currently .css and .styl files are specially compiled into a style.css, but we should instead be able to require the content of these files from JS. This will allow components to insert their own styling and keep the build process consistent.

When creating a feature branch if there is another branch that begins with the same name errors occur

In the github api if you have two branches where one begins with a subset it returns an array rather than an object.

Ex:

GET https://api.github.com/repos/STRd6/editor/git/refs/heads/e

Returns an array of all branches that begin with e rather than 404 for branch e not being found.

We can mitigate this by deleting our unused branches on Github.

The correct fix is to check if we received an array instead of an object and if so examine each object in the array to find an exact name match.

Run Docs Button in Editor

We should be able to open the docs in an iframe just like running the tests or the app.