dschaefer / eclipse-two

A prototype IDE based on Electron

The Two IDE

A full featured IDE based on Electron.

NOTE: I am putting a pause on this version to take a slightly different tact. I'll be working on a new IDE called Two4Arduino to see if we can take these concepts and make a great IDE for Arduino. As I blogged recently, this is about taking IDE building and turn it on it's ear. Leverage components available in npm, make new ones where necessary, and then wrap them in an IDE shell specially built for a given purpose. Let's see if that works. More later...

The philosophy is to treat the IDE as a web-site which has access to local resources and tools as well as cloud based services. It brings a new user experience to the desktop IDE that is friendly, integrated, and powerful. The user starts with a dashboard of cards supplied by plug-ins that give the developer access to all the information they need to do their jobs. From there, the IDE helps the user through working with code, checking that code into source control, integrating changes with change management systems like JIRA or bugzilla, provides a user interface to cloud services like logs allowing the developer to associate code changes with cloud resources.

The foundation is Electron which provides an HTML5 user interface with a node.js backend. Plug-ins will be dynamically loaded as required and can launch and integrate with microservices. The Language Server Protocol will be a key part of this, as will protocols that integrate other tools.

It's a platform that will serve us well for the next 20 years as Eclipse One has done for the last 20 years.

Plan

Phase 1 - Self Host

First stage is to get the IDE to the point where we can self host. That includes the following features

• File Explorer that navigates mounted directories and opens files in the editor.
• Text Editor that supports JavaScript, HTML, CSS, and package.json.
• Folder Editor that supports adding and removing files in a directory.
• Build support that runs 'npm run build' and presents output in a console pane
• Launch support that runs 'npm start', presents output, and has a stop button that kills the process

File Explorer will be hand roled. Editor is Monaco. Build and Launch will follow design language of Eclipse Launch Bar.

Phase 2 - Git support

Add UI to work with Git to further support self hosting. Also add Github page to support cloning of repo.

Use nodegit as underlying API for Git commands. Added pane to FolderEditor for git operations. Some may be added to context menus in the FileExplorer. Github page uses webview with code injection to add a button to clone and set up the workspace.

Phase 3 - Native support

To support writing extensions using node.js's native build capability, we'll add C++ support and start working with the LSP and CDT.

Try it

To get the IDE running, once you check out of source control, do the following

npm install
npm run build
npm start

That's it. I also have a "watch" script you can use to auto build while developing.

BTW, make sure you're using a recent version of npm that can handle @typings.

Contributing

See the Architecture guide for some of the philosophy we're taking here. The keys are to use React for now since it gives us a great head start. It's early days so be prepared for a lot of significant changes upstream while I work things out.

Since the plan is to move this to Eclipse, we'll need contributors to sign the Eclipse CLA. When submitting a PR, include you're Eclipse account info so we can link things together.

eclipse-two's Issues

Create a reusable Browser class

I am working on adding forward and back buttons and location text form for the Github Page. It would be good to have this browser "chrome" available for other pages as a reusable element.

cannot install types\three

Ran npm install just after cloning and received this failure:

npm http 404 https://registry.npmjs.org/types/three
npm ERR! 404 Not Found
npm ERR! 404
npm ERR! 404 'types/three' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 It was specified as a dependency of 'eclipse-two'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.

npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\ProgramData\chocolatey\lib\nodejs.commandline\tools\node.exe" "C:\ProgramData\chocolatey\lib\npm\too
ls\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! cwd G:\proj\eclipse-two
npm ERR! node -v v5.10.1
npm ERR! npm -v 1.4.9
npm ERR! code E404

Github Open In Eclipse Two

For the Github page, we're currently injecting javascript in the webview preload that changes the Open in Desktop to Open in Eclipse Two. We need to implement a click handler for that button that will kick off a git clone of the repo and bringing the working directory into the FileExplorer. We'll need a dialog that at least asks the user for the destination of the clone. We may want to offer other choices as well.

[Help Wanted] Monaco doesn't resize

When you change the size of the window or move the splitter, the Monaco editor doesn't resize.

BTW, great issue if someone wants to jump in and help ;)

What will be the License?

Hi,

I'm creating installation routines for local or remote ide setups (http://www.agileventures.org/projects/dda-pallet). So I'm always searching for cool new ide concepts :-).
May I ask, if you've already thought about a License?

BR, jerger

Cannot read property 'config' of undefined in Monaco.ts

Hey there,

found an strange error in Monaco.ts.

loader.require.config({
    baseUrl: baseUrl
});

This line of code does not allow to start eclipse-two respectively gives an error in the dev tools and the editor cannot start.

After removing this line all works fine.

Hope I could help :)

Greetings

Implement Save for the editors

Right now all you can do is open files to look at them and then close the tab. Would be good to implement save so you can save changes (yes, we're that early in this thing). Start with grabbing the Command/Control S key action and save the contents of the currently active editor into it's filePath. Also implement a dirty bit so we don't save if there hasn't been changes and so that we don't close the tab if the editor is dirty without asking the user.

Project scope/differentiation

Just throwing this out there for discussion: How is this project different from Orion and/or Eclipse Che? Is there overlap? Is this a completely different approach? How does it fit into the space of other tools out there?

What's a project? workspace?

After years of struggling with the Eclipse resource management model, I'd love to keep that fight out of Two. Text editors like VS.Code somewhat have done away with formal projects and things seem to work OK. Though things may be at the workspace level now.

My original thinking and what I have in the FileExplorer is the idea of mount points. You mount one or more directories from the file system as root nodes in the file tree. And that mainly done to reduce noise and leave off directories you don't plan on working in.

Question is, how do we do some of the things we got used to when we had projects in Eclipse. Things like inter project dependencies, or per project build and indexing settings.

I think those things could be done on the folder level. Extensions could analyze the files that exist in the tree under a folder and apply semantics at that level. I'd like to add an editor for folders that shows details about the files but that is also extendible to allow management of folder level settings. Github kinda does this showing the README files for a folder.

Anyway, not sure how this would really work. Need some real world experience with it. Any advice from anyone would be appreciated.

Create reusable tab folder type thing

The Pages are implemented with a nav bar that pick the changes. As I then went to do the editor tabs, I'm realizing that they are actually the same thing. All I'm changing is the formatting and adding a close button on the tab. This should be in a common superclass.

React, or VanillaJS+TypeScript+CustomElements?

I did have a start of this using React because that's what I was familiar with and it seemed a reasonable framework to pick. I have been hesitant to pick any framework since we really need to look 10 years ahead and make sure we're future proof.

I also started running into issues with the architecture of React versus what I'm used to with Eclipse SWT and it's event-based model. React is good at generating UI from a data model, but I'm not sure that's what the foundation of an IDE is. React may be interesting for some IDE views that are more data centric, and that can be done with the the help of Chromium's webview.

Over the last week, I've switched to using plain VanillaJS and TypeScript and am pretty happy with it. It's forced me to learn CSS which isn't as scary as I thought. I am also using custom elements from the Web Components spec to componentize the UI so I have a similar architecture to what I had with React. I will be adding custom events for higher level notifications like a request to open a file in the editor. We'll see how that works out.

Once I get back to where I was with React, I'd like to make the switch and remove the React code. I'd love to hear from others following this project on whether that's the right move or not. Thanks!