Installation
Hyper will show a notification when your modules are installed to.hyperplugins. All command keys can be changed. In order to change them, edit.hyper.js and add your desired change to keymaps. Then Hyper will change the default with your custom change. Example: 'window:devtools': 'Cmd+Alt+O'. Hyper 3 A cross-platform terminal powered by web technologies Hyper is a terminal powered by web technologies, that is fully-extensible with JavaScript and customizable with CSS. The Hyper TX series has evolved along with the requirements of mainstream CPUs. The launch of Hyper TX3 EVO marks another milestone with Cooler Master’s Improved Direct Contact technology, further improving cooling performance. Editors' note: This is a review of the full version of HyperCam 3.5.1211.29. The trial version is limited to 21 days. The trial version is limited to 21 days. Best VPN Services for 2020. The Hyper Scape team provides a look into where they are taking the game in the months ahead. September 22 2020 HYPER SCAPE PATCH NOTES V1.2. Hyper Scape Title Update v1.2 features sound optimization, an Xbox One crash fix, and additional debug logs. September 17 2020.
latest version: 3.0.264-bit | |
macOS (.app) | 3.0.2 |
Windows (.exe) | 3.0.2 |
Debian (.deb) | 3.0.2 |
Fedora (.rpm) | 3.0.2 |
Other Linux distros (.AppImage) | 3.0.2 |
Project Goals
The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. In the beginning, our focus will be primarily around speed, stability and the development of the correct API for extension authors.
In the future, we anticipate the community will come up with innovative additions to enhance what could be the simplest, most powerful and well-tested interface for productivity.
Extensions
Extensions are available on npm. We encourage everyone to include
hyper
in the keywords
field in package.json
.Then edit
.hyper.js
and add it to plugins
Hyper
will show a notification when your modules are installed to .hyper_plugins
.Keymaps
All command keys can be changed. In order to change them, edit
.hyper.js
and add your desired change to keymaps
. Then Hyper will change the default with your custom change. Ommwriter 1 613.
Example:
'window:devtools': 'Cmd+Alt+O'
Default keymaps:
Configuration
![Hyper 3 Hyper 3](https://dotdev.co/wp-content/uploads/2019/05/hyper3.png)
Config location
macOS | ~/Library/Application Support/Hyper/.hyper.js |
Windows | $Env:AppData/Hyper/.hyper.js |
Linux | ~/.config/Hyper/.hyper.js |
Note: config at
~/.hyper.js
still supported, but will be ignored, if config in application directory present. Otherwise it will be moved to the application directory at first run.The
config
object seen above in.hyper.js
admits the followingProperty | Default | Description |
updateChannel | 'stable' | The update channel to receive updates from |
fontSize | 12 | The default size in pixels for the terminal |
fontFamily | 'Menlo, DejaVu Sans Mono, Lucida Console, monospace' | The font family to use with optional fallbacks |
uiFontFamily | '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, ..' | The font family to use for the UI with optional fallbacks |
fontWeight | 'normal' | The default font weight: 'normal' or 'bold' |
fontWeightBold | 'bold' | The font weight for bold characters: 'normal' or 'bold' |
cursorColor | 'rgba(248,28,229,0.8)' | The color of the caret in the terminal |
cursorAccentColor | '#000' | The text color under BLOCK cursor |
cursorShape | 'BLOCK' | The shape of the caret in the terminal. Available options are: 'BEAM', 'UNDERLINE', 'BLOCK' |
cursorBlink | 'false' | If true, cursor will blink |
foregroundColor | '#fff' | The color of the main text of the terminal |
backgroundColor | '#000' | The color and opacity of the window and main terminal background |
selectionColor | 'rgba(248,28,229,0.3)' | The background color/opacity of the text selection in terminal |
borderColor | '#333' | The color of the main window border and tab bar |
css | ' | Custom CSS to include in the main window |
padding | '12px 14px' | CSS padding values for the space around each term |
colors | { black: '#000000', red: '#ff0000', .. } | A list of overrides for the color palette. The names of the keys represent the 'ANSI 16', which can all be seenin the default config. |
shell | ' | A path to a custom shell to run when Hyper starts a new session |
shellArgs | '['--login']' | An array of shell arguments |
env | {} | An object of environment variables to set before launching shell |
windowSize | [540, 380] | The default width/height in pixels of a new window |
scrollback | 1000 | The number of rows to be persisted in terminal buffer for scrolling |
copyOnSelect | false | If true, selected text will automatically be copied to the clipboard |
quickEdit | false | If true, on right click selected text will be copied or pasted if no selection is present (true by default on Windows) |
defaultSSHApp | true | If true, Hyper will be set as the default protocol client for SSH |
modifierKeys | {altIsMeta: false} | Change the behaviour of modifier keys to act as meta key |
showHamburgerMenu | true on Linux/Windows, false on macOS | Change the visibility of the hamburger menu. Available options are: true, false |
showWindowControls | ' | Change the position/visibility of the window controls. Available options are: true, false, 'left' |
Extensions API
Extensions are universal Node.js modules loaded by both Electron and the renderer process.
The extension system is designed around composition of the APIs we use to build the terminal:
React
components andRedux
actions.Instead of exposing a custom API method or parameter for every possible customization point, we allow you to intercept and compose every bit of functionality!
The only knowledge that is therefore required to successfully extend
Hyper
is that of its underlying open source libraries.You can find additional details about plugin developmentin the Hyper repository.
Your module has to expose at least one of these methods:
Method | Invoked from | Description | ||||||
onApp | Electron | Invoked when the app first loads. If a plugin reloads, it's invoked again with the existing app. Parameters:
| ||||||
onWindow | Electron | Invoked when each window is created. If a plugin reloads, it's invoked again with the existing windows. Parameters:
| ||||||
onUnload | Electron | Invoked when a plugin is removed by the user. Parameters:
| ||||||
decorateConfig | Electron / Renderer | v0.5.0+. Allows you to decorate the user's configuration. Useful for themeing or custom parameters for your plugin. Parameters:
| ||||||
decorateEnv | Electron | v0.7.0+. Allows you to decorate the user's environment by returning a modified environment object. Parameters:
| ||||||
decorateMenu | Electron | Invoked with the Electron's Menu template. If a plugin reloads, it's called again and the menu is refreshed.Parameters:
| ||||||
decorateBrowserOptions | Electron | Allows you to decorate Electron's BrowserWindow options when a new window is created.Parameters:
| ||||||
onRendererWindow | Renderer | Invoked when a plugin is first loaded or subsequently reloaded in each window. Parameters:
| ||||||
middleware | Renderer | A custom Redux middleware that can intercept any action. Subsequently we invoke the thunk middleware, which means your middleware cannext thunks. | ||||||
reduceUI reduceSessions reduceTermGroups | Renderer | A custom reducer for the ui ,sessions or termgroups state shape.
| ||||||
getTabsProps | Renderer | Passes down props from <Tabs> to the <Header> component. Must return the composed props object.
| ||||||
getTabProps | Renderer | Passes down props from <Tab> to the <Tabs> component. Must return the composed props object.
| ||||||
getTermGroupProps | Renderer | Passes down props from <Terms> to the <TermGroup> component. Must return the composed props object.
| ||||||
getTermProps | Renderer | Passes down props from <TermGroup> to the <Term> component. Must return the composed props object.
| ||||||
mapHyperState mapTermsState mapHeaderState mapNotificationsState | Renderer | A custom mapper for the state properties thatcontainer componentsreceive. Note that for children components to get these properties, you have to pass them down using the corresponding methods (like getTermProps ).Must return an extended object of the map passed.
| ||||||
mapHyperDispatch mapTermsDispatch mapHeaderDispatch mapNotificationsDispatch | Renderer | A custom mapper for the dispatch properties. Must return an extended object of the map passed.
| ||||||
decorateHyper decorateNotifications decorateNotification decorateHeader decorateTabs decorateTab decorateTerms decorateTermGroup decorateSplitPane decorateTerm | Renderer | Invoked with the React Component to decorate. Must return a Higher Order Component.Parameters:
|
Module loading
The user can hot-load and hot-reload plugins by pressing Command + R (refresh). Please strive to make plugins that don't require a complete restart of the application to work.
Notice
Plugins affecting the `BrowserWindow` will the effect on new windows after hot-reload.
In the future we might do this automatically.
When developing, you can add your plugin to
.hyper_plugins/local
and then specify it under the localPlugins
array in.hyper.js
. We load new plugins:- Periodically (every few hours)
- When changes are made to the configuration file (
plugins
orlocalPlugins
) - When the user clicks Plugins > Update all now
The process of reloading involves
- Running
npm prune
andnpm install
in.hyper_plugins
. - Pruning the
require.cache
in both electron and the renderer process - Invoking
on*
methods on the existing instances and re-rendering components with the fresh decorations in place.
Plugins location
macOS | ~/Library/Application Support/Hyper/.hyper_plugins |
Windows | $Env:AppData/Hyper/.hyper_plugins |
Linux | ~/.config/Hyper/.hyper_plugins |
Note: plugins at
~/.hyper_plugins
still supported, but will be ignored, if plugins in application directory present. Otherwise they will be moved to the application directory at first run.Note: on the main process, plugins are registered as soon as possible (we fire
onLoad
). On the browser, it's up to the user to trigger their load by pressing command+R. We put the user in control of the loading in this way to prevent them from losing critical work by extensions that reset state or don't preserve it correctly.Decorating components
![Bike Bike](https://www.bfgcdn.com/1500_1500_90/502-1313-0511/vaude-hyper-14-3-cycling-backpack.jpg)
We give you the ability to provide a higher order component for every piece of the
Its structure is as follows:
Hyper
UI.Its structure is as follows:
All the
decorate*
methods receive the following references in an object passed as the second parameter:React | The entire React namespace. |
notify | A helper function that shows a desktop notification. The first parameter is the title, the second is the optional body of the notification, and the third is another optional parameter which can be used to log details to the development console. To pass these details, simply provide and object with an error property containing the information to log. |
Notification | The Notification component in case you want to re-use it. |
All the components accept the following two properties to extend their markup:
customChildren | An array of Element or a singleElement to insert at the bottom of the component. |
customChildrenBefore | The same as the above property, but inserted as the first child element(s) of the component. |
Your higher order component can supply a
onDecorated
property to the decorated component to get a reference to its instance.Your Term higher order component can supply an
onCursorMove
handler property that be called when cursor has moved with an object parameter representing its relative position to Term origin:x | Horizontal position in pixels |
y | Vertical position in pixels |
width | Cursor width in pixels |
height | Cursor height in pixels |
col | Horizontal position in columns |
row | Vertical position in rows |
We encourage you to maintain compatibility with other decorators. Since many can be set, don't assume that yours is the only one.
For example, if you're passing children, compose potential existing values:
Or if you use
onDecorated
propertyActions and Effects
All theRedux actionsare available for you to handle through your middleware and reducers. For an example, refer to the Hyperpowerreference plugin.
Side effects occur in two fundamental forms:
- Some actions dispatch other actions based on state.
- Some actions do async work by communicating over the RPC channel to the main process
In all cases, the side effect is passed as the
effect
key in the action and later handled by our middleware.This means that you can override, compose or completely eliminate effects! In other words, this is how you can change the default functionality or behavior of the app.
As an example, consider the action we use to increase the font size when you press
Command+=
:The underlying terminal
Hyper
achieves a lot of its speed and functionality thanks to the power ofxterm.jsAdditional APIs
The Electron
app
objects are extended with the following properties:config | An Object with the config block from.hyper.js . |
plugins | An Object with helpers for plugins. |
getWindows | A Function that returns an Set of all the open windows. |
createWindow | A Function that will create a new window. Accepts an optional callback that will be passed as the new window's init callback. |
Electron
BrowserWindow
objects are extended with the following parameters:rpc | An EventEmitter that allows for communication with the window process. |
sessions | A Map of Session objects which hold the communication with each term's pty. |
Renderer windows are similarly extended with:
rpc | An EventEmitter that allows for communication with the window process. |
store | The Redux Store object. This allows access todispatch actions or read the global state withgetState . |
The
rpc
object is symmetrical between browser and renderer process. The API is the same as Node.js, with the exception that it only admits a single object as its parameters only:Example theme: Hyperyellow
The following extension simply alters the config to add CSS and yellow colors! Here's thecode.
Themes are simply plugins! Only one hook,
decorateConfig
is needed:I grabbed the class names by inspecting the term with Devtools, which you can trigger from
View -> Toggle Developer Tools
. When you do so, notice that some classes are automatically generated and followed by a random nonce (e.g.: term_13hv8io
). Ignore those: they change with every new window!Notice the emphasis on playing nice with other extensions. Specifically, we create a new object, extend only the keys we are interested in, and we compose the CSS to preserve the user's setting and that of other authors':
Example extension: Hyperpower
The following extension renders particles as the caret moves:
Let's walk throughits code.
First, we intercept the Redux action
First, we intercept the Redux action
SESSION_ADD_DATA
. You can find the full list of actionsin the repository.Notice that we don't re-dispatch the action, which means we never render the output of the command to the terminal. Instead, we dispatch an action of our own, which we grab in the
uiReducer
and later map:We then want to decorate the
<Term>
component so that we can access the underlying caret.However,
<Term>
is not a container that we can map props to. So we use getTermProps
to pass the property further down:The extension thenreturnsa higher order component to wrap
<Term>
. Notice we pass the onDecorated
property to access the base Term component and its DOM ref, and theonCursorMove
property to use Hyper cursor API:Hyper 3 is finally out! The primary focus for thisrelease is performance.
The latest version includes several enhancements that make Hyperreally fast. For those of us who spend a significant amountof time on the command line, this release is a total game changer.
Download Hyper 3 to try it out, and read on to learn more aboutwhat's new.
Getting There
Looking back on this release, a pleasant surprise has been how littletime it took from 'let's make this thing faster' to'Holy shell! That's fast!'
Below, we visit some of the important changes that were shipped aspart of this release:
WebGL Renderer
The renderer is the piece of code that draws actual pixels on thescreen based on the state of the terminal. The original Hyper rendererwas based on the DOM. While that was a flexible approach thanks toCSS, it was also very slow.
Hyper 2 improved upon this by switching from
hterm
toxterm.js
and using its canvas-based renderer. While thatmade Hyper 2 faster, for Hyper 3 we knew it was possible to delivereven faster performance by completely rewriting the renderer with WebGL. By fortunate coincidence, as we were still figuring things out, Daniel Imms (fromxterm.js
and VSCode
fame),just returned from a 'vacation'where he happened to be write a shiny new WebGL renderer.Isn't the open source community just amazing? We immediately mergedDaniel's branch onto a test fork, and well, it ran circles aroundHyper 2. Thanks Daniel!
We are aware of a few minor limitations with using this renderer (e.gselection is always black-and-white, and you can't have more than 16terminals visible simultaneously) but the performance benefitsoutweigh them. The new renderer is still work-in-progress, so you canexpect further improvements in the near future.
IPC Batching
We also discovered that commands that were very verbose would causeHyper to temporarily choke for a few seconds. For example, running
find ~
would cause Hyper to:- Run painfully slow for ~5 seconds (at ~1 frame-per-second)
- Suddenly get faster (at ~15 frames-per-second) and finish printingeverything in ~10 seconds.
Digging within the CPU profile, we noticed that the 'renderer' processwas spending most of its time handling an overwhelming amount ofmessages coming in from the main process.
It is easy to see the difference between Hyper v2 and v3.The pink segments represent the time spent in processing IPC, instead of parsing or rendering.
Electron uses a multi-process architecture where each window runs onits own separate 'renderer' process. Additionally, there's oneNode.js-based 'main' process that communicates directly with theunderlying OS. In order for terminal data to be rendered by Hyper, itmust be passed from the main process to the renderer process using IPC(Inter-Process Communication).
Node's IPC, unfortunately, comes with a non-trivial amount ofoverhead.Messages are sent back and forth as JSON strings,which must be encoded on one side and decoded on the other. Also,receiving data through IPC is an async operation, and thus queued inV8's event loop. Yielding back to the event loop each time afterprocessing small messages makes matters further worse. This repeatedIPC caused thrashing when processing bursts of text (like running
cat
on a large file).To mitigate this problem, we came up with a simple solution:batch data into larger chunks before sending them to the rendererprocess. IPC batching reduces the number of messages for verbose commandssignificantly and allows the renderer to focus on, well, rendering.
One important consideration was tobatch as much data as possible to reduce the IPC overhead, but notso much that we introduce perceivable latency. With this approach, the renderer process now spends most of its timedoing terminal emulation and rendering instead of processing IPCmessages. The outcome is a much smoother, and faster terminal.
On a similar vein, we are also testing a new approach todecide how much data is parsedbefore yielding to the renderer. The idea is to prevent skipped framesfor a more responsive terminal.
Electron V3
Hyper 3 bumps the underlying Electron from V1 to V3. We also testedV4, but a regression in the Canvas APIforced us to stay on V3. The upgrade brings in newer versions of V8and Node.js, and their corresponding bug fixes.
Faster Startup Time
Hyper 3 improves startup time by creating the firstpseudoterminal (pty) as soon as possible. A pty is a facilityprovided by operating systems to allow programs such as Hyper toemulate terminals.
Hyper 30 Turbo Engine
In previous versions, Hyper would wait for the Chromium window toopen, send an 'I'm ready' message, and only then create thepty. Those two activities take a substantial amount of time, but couldbe done in parallel.
Hyper 3 starts initializing both at the same time. By the time thewindow says 'I'm ready', the pty is already warmed-up and ready to beconsumed. This gives Hyper 3 a decent boost in launch time (about150ms on Linux, potentially better on other platforms).
Emoji Support
If you're on MacOS, you can now press
Command + Control + Space
to get an emoji popup and jazz up those commit messages.Hyper 3 Cam
More Themes on Hyper Store
Since Hyper 2, we have added many new themes into the Hyper Store. This meansit's now even easier to customise your Hyper experience to yourpersonality.
We have a detailed contribution page that explains how you can goabout enlisting your extension. We encourage all contribution and look forward to adding more themesand plugins from the community!
The Road Ahead
Terminals have existed since the 60s, and have been a powerful tool inour workflows. Their flexibility guarantees that they will remainrelevant for years to come. We're in for the long haul.
Hyper is a new kind of terminal, built on top of web technology, witha focus on extensibility. This opens new possibilities that can makethe CLI experience more productive (and fun)!
We're excited to keep improving Hyper, both in terms of performanceand capabilities — there's a lot to do. Hyper is completely opensource, and we welcome your involvement and contribution.
Acknowledgments
We're genuinely thankful to the open source community. We're notsaying this only because we are building on top of an incredible setof open source libraries, but also because we find the helpful ethosof the community very touching.
As soon as the
xterm.js
team heard we were working on performance, they jumped right in andhelped us with feedback and several initiatives they had on theirside. We would like to extend huge thanks to Daniel Imms, @Jerch and Benjamin Staneck for theircontribution and feedback.