Add Windows support and first-class Linux support

[matheuss]

TODO

• Fix npm prune; npm install --production on Windows – 35df444
• Fix NODE_ENV=production webpack on Windows a1aacdb
• Add a bigger icon.ico for Windows 9028726
• Build on AppVeyor
• Add Building on Windows to README.md
• Add a GIF to show when installing on Windows – cc @rauchg @evilrabbit
• Find out why hotkeys like Ctrl+T, Ctrl+N etc aren't working – related: Ctrl-based shortcuts don't work on Linux #274
• Fix the maximize and close SVGs – cc @codetheory @evilrabbit
• Add padding to the hamburger menu, minimize, maximize and close buttons – cc @codetheory @evilrabbit
• Design review – cc @codetheory @evilrabbit @rauchg
• Add CSS classes to enable customization of the hamburger menu, minimize, maximize and close buttons .header_shape is enough
• Performance review – cc @rauchg
• Test on macOS to make sure that pty.js doesn't introduce any weird behavior

Summary

• child_pty => pty.js to enable Windows support (7f29ead)
• A brand new interface for Linux and Windows (macOS stays untouched) (9dbff52):

Why this new design 🤔

When you create a frameless window, you need to specify -webkit-app-region: drag in CSS to tell Electron which regions are draggable.
Electron's documentation states:

Note that if you have made the whole window draggable, you must also mark buttons as non-draggable, otherwise it would be impossible for users to click on them

The problem is that on macOS, the above is simply not true. An element specified as the draggable region will receive click events:

On Linux and Windows, the behavior is the one described in the documentation – the element will not receive click events:

(On Windows/Linux you can drag the window too, I just didn't recorded it)

With that in mind, we introduced a new <div> that becomes visible on Windows/Linux when there are two or more open tabs:

Building on Windows

To build on Windows you need to install some dependencies and run some commands:

1. Install VC++ Build Tools Technical Preview using the Default Install option
2. Install Python 2.7, add it to your PATH and run npm config set python python2.7
3. Run npm config set msvs_version 2015 --global

About pty.js

We're using @Tyriar's fork of pty.js – the same used on Visual Studio Code. Check #190 for a discussion on that.

Feeback wanted

We need your feedback to make sure this feature is 💯 👌 💅 ✨ for the upcoming 1.0.0 release! Any help is more than welcome, especially with tests on Windows and Linux (and macOS too, to make sure that there are no unexpected side effects) 😄

Closes #167; Closes #190; Closes #795;

[luisrudge]

will we be able to run cmder inside of it? http://cmder.net/

[AlmirKadric]

OH S**T it's finally here
You've got yourself a tester 👍

[factormystic]

Windows:

1. running npm start for the first time there's no errors, but just a blank black window. After restarting the app, getting an unhandled Exception when starting a new tab (any way; via new tab, new window, split action, etc):
   TypeError: spawn is not a function
2. Maximizing by clicking the maximize button seems to be resizing the window to the size of the active display, but dragging the window still works and doesn't restore the window as it should
3. Snap actions don't work (eg, drag the window to the right side of the screen & release should snap the window to 50% of the display width). Related to this, is that minimizing doesn't animate like normal windows. This is probably due to whatever your electron window configuration is, I believe if you go full borderless you don't get this functionality automatically.
4. The app name & icon when right clicking the task bar icon, and also after pinning the app, is Electron (but maybe this is due to running in development?)

[matheuss]

@factormystic:

1: Ops, I forgot to write about that on the PR description.

1.1 Install VC++ Build Tools Technical Preview using the Default Install option
1.2 Install Python 2.7, add it to your PATH and run npm config set python python2.7
1.3 Run npm config set msvs_version 2015 --global
1.4 del node_modules && del app/node_modules
1.5 npm install

This is necessary to build pty.js and should fix the issue 😄 I'll add instructions to the PR description and README.md

2 and 3: I'll look into that 😄

4: Yeah, this happens when you're running in dev mode – it works as expected when you run the bundled application 😄

[matheuss]

@luisrudge I don't think so 🤔 From what I understood, Cmder is a terminal emulator itself, a full app. Is that correct?

But you can use bash 😄

[anaisbetts]

A few bugs I noticed:

• You need to handle --squirrel-install and friends, or else you won't get a shortcut
• If you set your shell to Windows-on-Linux bash (i.e. C:\Windows\System32\bash.exe), history doesn't work (i.e. type a command hit enter, then hit up to see it again, it doesn't work)
• The default font list doesn't include any Windows fonts
• QuickEdit doesn't work - this is a Windows thing that old people like me use, where you can select text, right click to copy it, then clear the selection and right-click to paste
• No context menu on right-click

A very good start!

[ppot]

@matheuss Maybe using pty.js will fix the TypeError: spawn is not a function I also receive on my macOS! Strange. Appends sometimes!

[supnate]

Really cool! But how do you guys make pty.js work on Windows!

[fhelwanger]

It would be nice to have an option on Windows explorer context menu to "Open Hyper here" the same way we can open Atom in some folder:

[matheuss]

@supnate we're using @Tyriar's fork – all the credit goes to him 😄

[Tyriar]

Looks great @matheuss 😃, just wanted to let you know some stuff about VS Code's situation so you're all aware:

• This fork has been used in VS Code since the integrated terminal shipped (based on xterm.js and this pty.js fork)
• I consider the state of the fork to be a little messy right now, you can see a summary of the issues here Improve Windows support in integrated terminal microsoft/vscode#13625 - if you proceed with this please subscribe to this issue
• As @paulcbetts calls out there are some issues with history doesn't work, there are also some other issues such as ctrl+c not working to kill process, and some other keys not working while in other terminals such as mongodb and ruby shells. Another annoying bug is that sometimes the prompt gets out of sync, I haven't identified yet if the cause for this is pty.js or xterm.js
• All Windows pty.js issues for VS Code are being tracked here which is definitely worth a read. I consider most of these to be artifacts of using an old version of winpty in pty.js
• The actual changes to get it working for VS Code weren't major, but since then there have been some pretty big bug fixes (thanks to @the-ress) https://github.com/Tyriar/pty.js/commits/prebuilt

Despite all these shortcomings, AFAIK it's the best option for all platforms which is why we're using it 😃. It's been on my backlog for a while to spend a sprint to clean up this situation as while many people are happy with the Windows experience, I find it frustrating jumping over from Linux which is so smooth.

[jahe]

I followed the updated instructions in the pr description and by npm start I get an "Uncaught Exception: TypeError: spawn is not a funciton" just like @factormystic:

Any idea why this happens?

[cchamberlain]

@jahe - What's your node --version / npm -v?

[jahe]

@cchamberlain

node --version
v6.7.0

npm -v
3.10.3

[calvinrbnspiess]

Getting the same error as @jahe and @factormystic.
I followed the instructions, but I have Visual Studio 2015 with Visual C++ Tools installed.

F:\Projekte\Web\hyper>node --version && npm -v
v6.7.0
3.10.3

F:\Projekte\Web\hyper>npm start

> @ start F:\Projekte\Web\hyper
> concurrently --kill-others --raw "npm run dev" "npm run app"


> @ dev F:\Projekte\Web\hyper
> webpack -w


> @ app F:\Projekte\Web\hyper
> electron app



Webpack is watching the files…

Cannot find module '..\build\Release\pty.node'
A native module failed to load. Typically this means you installed the modules incorrectly.
 Use `scripts/install.sh` to trigger the installation.
 More information: https://github.com/zeit/hyper/issues/72
running in dev mode
electron will open file://F:\Projekte\Web\hyper\app\index.html
Checking for notification messages
ignoring auto updates during dev
No matching notification messages
Hash: fc3fed944d45e1799f8c
Version: webpack 2.1.0-beta.25
Time: 5325ms
           Asset    Size  Chunks             Chunk Names
       bundle.js  4.4 MB       0  [emitted]  main
assets\icons.svg  1.8 kB          [emitted]
    + 317 hidden modules

[jcolesio]

@jasonmit You da man!!!!!!!! worked !

all we need is the arrow keys to register ;)

[jasonmit]

@jcolesio microsoft/WSL#111 looks to be the source of the the arrow key issue

[DanielPintilei]

transparent: false BrowserWindow default would be nice; With transparent: true the window flickers sometimes on win.show() + there is no minimize/restore animation

[hmbrg]

When will there be a release windows version?

[ppot]

In version 1.0.0. Likely coming in the next couple of weeks. cc/ @matheuss

[howdoicomputer]

Oh my God, this is amazing. As a heavy user of cmder, I can't be happier that terminal innovation is coming to Windows.

[thekalinga]

Its not working on Ubuntu 14.04.

1. Ctrl+A used to take me to the first character in the terminal before
   => Now it does all text in the window like a browser does

2. Select text & try right clicking/pressing Ctrl+C, the selection is gone.
   => Text cannot be copied

[ppot]

@thekalinga 2. On windows you need to use : ctrl+shift+c for copy.
see : https://github.com/zeit/hyper/blob/master/app/accelerators.js
-> Right clicking not implemented right now.

1. ctrl+A is used to selectAll like any linux terminal.
   -> First character on the terminal top or bottom.

[plessbd]

@ppot

ctrl+A is used to selectAll like any linux terminal.
-> First character on the terminal top or bottom.

I believe most terminals ctrl+a moves to the beginning of the line and ctrl+e moves to the end of a line

see:
http://ss64.com/osx/syntax-bashkeyboard.html
http://lifehacker.com/5743814/become-a-command-line-ninja-with-these-time-saving-shortcuts
http://www.howtogeek.com/howto/ubuntu/keyboard-shortcuts-for-bash-command-shell-for-ubuntu-debian-suse-redhat-linux-etc/

[trodrigues]

I just landed here looking for info on how to run Hyper with Bash on windows and found this comment by @Tyriar.

I wonder if there's a good place to document this to prevent someone getting so lost in the future. I don't see an FAQ section in the website.

Happy to provide a PR for this but wondering where the best place is.

[webframp]

As mentioned by @plessbd:

@ppot
ctrl+A is used to selectAll like any linux terminal.
-> First character on the terminal top or bottom.
I believe most terminals ctrl+a moves to the beginning of the line and ctrl+e moves to the end of a line

It seems like a bad idea to override any gnu readline default keybindings without some way for the user to disable as the majority of shells (bash, zsh, fish) will implement basic readline bindings by default. I definitely prefer ctrl+a to move to the start of the line, not select all.

[ppot]

@webframp cmd+a is selectAll in macOS. ctrl+a is also true for what you are saying. The key-mapping need to be changed.

[ppot]

@webframp hterm interpret those actions as: ctrl+a === ctrl+shit+a and ctrl+e === ctrl+shit+e

[webframp]

Thanks @ppot, ctrl+shift+a if not already taken would make sense as select-all and still preserves ctrl+a start of line behavior

[martijnrondeel]

Any news on 1.0.0?

[fhelwanger]

It's already released, 1.1.0 is the latest version: https://github.com/zeit/hyper/releases/tag/1.1.0

[reeseovine]

I would like to see support for Bash on Windows (WSL). Maybe a setting in .hyper.js?
Thanks.

[matheuss]

@katacarbix it's just a matter of putting bash on shell on .hyper.js.

PS: If it doesn't work, you need the absolute location

[AlmirKadric]

@katacarbix also take a look at this PR #1347
it provides the ability to support multiple shells from the .hyper.js config

[sabahang]

@jasonmit @jcolesio had the same highlighting issue. It was one of the following registry keys that did the trick:
"PopupColors"=dword:000000f5
"ScreenColors"=dword:00000087
"EnableColorSelection"=dword:00000000

Not sure which one did the trick. For other running into same issue try one by one until it works! no restart needed!

[19lmyers]

Why can't you just flag the buttons as non-draggable on the old design, so they can receive click events?
The main thing irritating me about this app right now is that the tab bar is below the title bar, an obvious regression from the Mac OS version.

[ppot]

Insted of commenting on this PR, please open new issue and it will be discussed there.
Thanks! 💪