2017-01-27 17:45:42 -09:00
<!doctype html>
< html >
< head >
< title > Hyper™< / title >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "initial-scale=1.0" / >
< meta name = "twitter:card" content = "summary_large_image" / >
< meta name = "twitter:site" content = "@zeithq" / >
< meta name = "og:title" content = "Hyper™" / >
< meta name = "og:url" content = "https://hyper.now.sh" / >
< meta name = "description" content = "Hyper™: HTML/JS/CSS terminal" / >
< meta name = "og:description" content = "Hyper™: HTML/JS/CSS terminal" / >
< meta name = "og:image" content = "https://hyper.now.sh/static/hyper.png" / >
< meta name = "theme-color" content = "#000000" >
< link rel = "dns-prefetch" href = "https://cdn.zeit.co" / >
< link rel = "shortcut icon" href = "favicon.png" / >
< style >
* {
margin: 0;
padding: 0;
text-rendering: geometricPrecision;
box-sizing: border-box;
}
body, html {
background: #000;
color: #ccc;
font: 12px Menlo, "DejaVu Sans Mono", "Lucida Console", monospace;
}
#header {
position: fixed;
top: 15px;
right: 20px;
z-index: 10000;
display: flex;
transition: all 0.3s ease;
transition-property: transform, opacity;
}
#header span {
color: #999;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
display: flex;
align-items: center;
margin-right: 10px;
}
#header a {
color: #999;
text-decoration: none;
}
#header a img {
height: 16px;
margin-left: 6px;
margin-right: 4px;
}
#header a:hover {
color: #FF2E88;
}
#header a.download-link {
color: #FF2E88;
}
#header.hidden {
transform: translateY(-35px);
opacity: 0;
}
#logo {
position: absolute;
left: 0;
right: 0;
top: 0;
padding: 50px 0 40px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
text-align: center;
z-index: 1000;
}
#logo img {
display: block;
margin: 0 auto 10px;
}
#logo .title, #logo .subtitle {
padding: 3px 0;
}
#logo .title {
font-size: 16px;
}
#logo .title b {
font-weight: 500;
}
#logo .subtitle {
color: #9B9B9B;
}
#top {
height: 100vh;
width: 100vw;
position: relative;
text-align: center;
max-width: 100%;
}
#top .top-content {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
animation-name: arrow-appear;
animation-delay: 2s;
animation-duration: 500ms;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.top-download {
position: relative;
bottom: 75px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
.download-button {
background: #50E3C2;
color: #494949;
height: 42px;
display: flex;
align-items: center;
padding: 0 20px;
margin-bottom: 10px;
text-decoration: none;
transition: background .12s ease-in-out;
}
.download-button:hover {
background: #72EBD0;
}
.download-button svg {
color: #2EAA8F;
}
.download-button svg#fallback-icon {
margin-left: 10px;
}
.download-button svg:not(#fallback-icon) {
margin-right: 10px;
}
.download-button strong {
color: #000000;
}
#arrow {
position: absolute;
left: 50%;
margin-left: -9px;
bottom: 20px;
}
@keyframes arrow-appear {
from {
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}
@keyframes arrow-video-finish {
from {
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}
#video {
height: 100vh;
bottom: 0;
width: 100%;
position: absolute;
}
#video video {
height: 100%;
width: 100%;
}
#loading:before {
content: 'Loading...';
position: absolute;
display: block;
left: 0;
top: 50%;
right: 0;
color: #666;
opacity: 0;
animation-name: appear;
animation-delay: 2s;
animation-duration: 500ms;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#poster {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#poster img {
margin: auto;
}
#content {
max-width: 800px;
margin: auto;
}
#content a, .other-downloads a {
color: #FF2E88;
text-decoration: none;
border-bottom: 1px solid #FF2E88;
}
#content a:hover, .other-downloads a:hover {
background: #FF2E88;
color: #fff;
}
#content h2, #content h3 {
font-size: 12px;
font-weight: bold;
color: #ccc;
margin: 0 0 30px 0;
padding-top: 30px;
}
#content h2 a, #content h3 a {
color: #ccc;
border-bottom-width: 0;
}
#content p {
margin: 0 0 20px;
line-height: 18px;
}
#content h2:before {
content: '## ';
}
#content h3:before {
content: '### ';
}
2017-08-31 16:24:37 -08:00
#content h4:before {
content: '#### ';
}
2017-01-27 17:45:42 -09:00
#content code {
font: 12px Menlo, "DejaVu Sans Mono", "Lucida Console", monospace;
}
#content p code, #content li code, #content td code {
color: #fff;
}
#content p code:before, #content p code:after,
#content td code:before, #content td code:after,
#content li code:before, #content li code:after {
content: '`';
}
#content pre {
margin: 30px;
color: #50E3C2;
line-height: 18px;
}
#content table thead td {
color: #999;
font-size: 10px;
}
#content table {
width: 100%;
border-collapse: collapse;
2017-05-19 09:00:46 -08:00
margin-bottom: 20px;
2017-01-27 17:45:42 -09:00
}
#content td > table {
margin: 0;
}
#content table td {
vertical-align: top;
border: 1px solid #444;
line-height: 15px;
position: relative;
}
#content table td.highlighted:after {
position: absolute;
content: "";
border: 1px solid #50E3C2;
width: 100%;
height: 100%;
top: -1px;
left: -1px;
pointer-events: none;
}
#content table td.invisible-top-left {
border-top: 0;
border-left: 0;
}
#content #installation-table a {
border-bottom: none;
transition: color 0.3s ease;
}
#content #installation-table a:hover {
background: none;
color: #50E3C2;
}
#content #installation-table td:not(:first-child) {
text-align: center;
}
#content #installation-table td:not(.highlighted) img {
opacity: 0;
transition: opacity 0.3s ease;
}
#content #installation-table td a:hover img {
opacity: 1;
}
#content #installation-table td.highlighted a {
color: #50E3C2;
}
#content #installation-table {
color: #FFF;
}
#content #installation-table td[id^="td"] {
padding: 0;
}
#content #installation-table a {
display: block;
padding: 10px;
}
#content td.soon {
color: #555;
}
#content td {
padding: 10px;
}
#content table.config td:nth-child(2) {
width: 30%;
color: #999;
}
#content table.config tbody td:first-child {
color: #fff;
}
#content table.api tbody td:first-child {
color: #fff;
}
#content table.api > tbody > tr > td:nth-child(2) {
width: 13%;
}
#content table.api tbody tbody td:first-child {
width: 20%;
}
#content td > p:first-child {
margin-top: 0;
}
#content ul {
margin: 20px 10px;
}
#content ul li {
list-style-type: none;
line-height: 18px;
margin: 5px 0;
padding-left: 20px;
}
#content ul li:before {
content: '-';
color: #999;
position: absolute;
margin-left: -20px;
}
#content p b {
color: #fff;
}
@media screen and (max-height: 500px) {
.title {
display: none;
}
}
@media screen and (max-height: 550px) {
.title span {
display: none !important;
}
}
@media screen and (max-height: 650px) {
#logo img {
height: 50px;
width: auto;
padding: 0;
margin-top: 0;
}
}
@media screen and (max-height: 700px) {
#logo {
padding: 30px 0 0;
}
}
@media screen and (max-width: 800px) {
#content table {
margin-left: 0;
margin-right: 0;
}
#download-for {
display: none !important;
}
#header {
width:300px;
margin: 0 auto;
}
}
@media screen and (max-width: 700px) {
#header {
text-align: center;
padding: 20px 0;
position: static;
}
#video video {
display: none;
}
#video {
background: no-repeat center url('https://cdn.zeit.co/hyper/hyperapp.gif');
background-size: 100%;
height: 100vh;
}
#content {
padding: 20px;
}
pre {
white-space:pre-wrap; word-wrap:break-word; overflow:auto;
}
#content table {
margin-left: 0;
margin-right: 0;
2017-05-19 09:00:46 -08:00
margin-bottom: 20px;
2017-01-27 17:45:42 -09:00
}
#content table td {
width: 50% !important;
}
#content table td:nth-child(3) {
display: none;
}
#content .table-note:after {
margin: 15px 0;
content: "Please note: the complete table information is available in bigger resolutions!";
display: block;
color: #999;
}
#content img {
max-width: 100%;
height: auto;
}
#arrow {
display: none;
}
}
.is-hidden {
display: none;
}
< / style >
< / head >
< body >
< div id = "main" >
< div id = "header" >
< span > < a target = "_blank" href = "https://zeit.co" > ▲ < / a > < / span >
< span > < a target = "_blank" href = "https://github.com/zeit/hyper/releases" > Changelog< / a > < / span >
< span > < a target = "_blank" href = "https://github.com/zeit/hyper" > GitHub< / a > < / span >
< span > License: < b > MIT< / b > < / span >
< span > < span id = "download-for" > Download for:< / span >
< a href = "#installation" class = "download-link" > < img src = "static/apple-logo.svg" / > < / a >
< a href = "#installation" class = "download-link" > < img src = "static/windows-logo.svg" / > < / a >
< a href = "#installation" class = "download-link" > < img src = "static/linux-logo.svg" / > < / a >
< / span >
< / div >
< div id = "top" >
< div id = "loading" > < / div >
< div id = "logo" >
< img width = '60' height = '53' title = '' alt = '' src = 'data:image/gif;base64,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
< div class = "title" > < b > Hyper< / b > ™ < span style = "font-size: 12px; display: block; margin-top: 6px; color: #999" > JS/HTML/CSS Terminal< / span > < / div >
< / div >
< div id = "video" >
< video id = "vid" src = "https://cdn.zeit.co/hyper/hyperapp.mp4" height = "100%" autoplay muted > < / video >
< / div >
< div class = "top-content" >
< div class = "top-download" >
< a href = "#installation" class = "download-button" >
< svg id = "mac-os-icon" class = "is-hidden" xmlns = "http://www.w3.org/2000/svg" width = "14" height = "16" viewBox = "0 0 14 16" fill = "currentColor" fill-rule = "evenodd" >
< path d = "M13.1092683,12.4146341 C12.8702439,12.9668293 12.5873171,13.475122 12.2595122,13.942439 C11.8126829,14.5795122 11.4468293,15.0204878 11.164878,15.2653659 C10.7278049,15.6673171 10.2595122,15.8731707 9.75804878,15.884878 C9.39804878,15.884878 8.96390244,15.782439 8.45853659,15.5746341 C7.9515122,15.3678049 7.48556098,15.2653659 7.0595122,15.2653659 C6.61268293,15.2653659 6.13346341,15.3678049 5.62087805,15.5746341 C5.1075122,15.782439 4.69395122,15.8907317 4.3777561,15.9014634 C3.89687805,15.9219512 3.41756098,15.7102439 2.93912195,15.2653659 C2.6337561,14.9990244 2.25180488,14.542439 1.7942439,13.8956098 C1.30331707,13.204878 0.899707317,12.4039024 0.583512195,11.4907317 C0.244878049,10.5043902 0.0751219512,9.54926829 0.0751219512,8.62458537 C0.0751219512,7.56536585 0.304,6.65180488 0.762439024,5.8862439 C1.12273171,5.27131707 1.60204878,4.7862439 2.20195122,4.43014634 C2.80185366,4.07404878 3.45004878,3.89258537 4.14809756,3.88097561 C4.53004878,3.88097561 5.03092683,3.99912195 5.65336585,4.23131707 C6.27404878,4.46429268 6.67258537,4.58243902 6.84731707,4.58243902 C6.97795122,4.58243902 7.42068293,4.44429268 8.17121951,4.16887805 C8.88097561,3.91346341 9.48,3.80770732 9.97073171,3.84936585 C11.3004878,3.95668293 12.2995122,4.48087805 12.9639024,5.42526829 C11.7746341,6.14585366 11.1863415,7.15512195 11.1980488,8.44985366 C11.2087805,9.45834146 11.5746341,10.297561 12.2936585,10.9639024 C12.6195122,11.2731707 12.9834146,11.5121951 13.3882927,11.6819512 C13.3004878,11.9365854 13.2078049,12.1804878 13.1092683,12.4146341 L13.1092683,12.4146341 Z M10.0595122,0.413658537 C10.0595122,1.20410732 9.77073171,1.94214634 9.19512195,2.62526829 C8.5004878,3.43736585 7.66029268,3.90663415 6.74917073,3.83258537 C6.73756098,3.7377561 6.73082927,3.63795122 6.73082927,3.53307317 C6.73082927,2.7742439 7.06117073,1.96214634 7.64780488,1.29814634 C7.94068293,0.96195122 8.31317073,0.682409756 8.76487805,0.459414634 C9.21560976,0.239746341 9.64195122,0.118263415 10.0429268,0.0974634146 C10.0546341,0.203131707 10.0595122,0.308809756 10.0595122,0.41364878 L10.0595122,0.413658537 Z" / >
< / svg >
< svg id = "linux-icon" class = "is-hidden" xmlns = "http://www.w3.org/2000/svg" width = "14" height = "16" viewBox = "0 0 14 16" fill = "currentColor" fill-rule = "evenodd" >
< g > < path d = "M13.4703444,13.3930607 C13 . 4050383 , 13 . 3179586 13 . 311977 , 13 . 2461219 13 . 194426 , 13 . 1742852 C13 . 1764668 , 13 . 1628566 13 . 1274872 , 13 . 1334688 13 . 0474872 , 13 . 0893872 C12 . 9674872 , 13 . 0453056 12 . 9038138 , 13 . 0061219 12 . 8548342 , 12 . 9734688 C12 . 8074872 , 12 . 9408158 12 . 7454464 , 12 . 8836729 12 . 6670791 , 12 . 8036729 C12 . 5903444 , 12 . 7236729 12 . 5283036 , 12 . 638775 12 . 4842219 , 12 . 548979 C12 . 4401403 , 12 . 4591831 12 . 3960587 , 12 . 3399994 12 . 3552423 , 12 . 1881627 C12 . 3127934 , 12 . 036326 12 . 2899362 , 11 . 8681627 12 . 2834056 , 11 . 6836729 C12 . 2001403 , 11 . 7555096 12 . 154426 , 11 . 8959178 12 . 1446301 , 12 . 1081627 C12 . 1348342 , 12 . 318775 12 . 1805485 , 12 . 5342852 12 . 2785077 , 12 . 7546933 C12 . 3764668 , 12 . 9751015 12 . 5234056 , 13 . 1171423 12 . 7209566 , 13 . 1840811 C12 . 911977 , 13 . 2493872 13 . 0638138 , 13 . 3195913 13 . 1813648 , 13 . 3930607 C13 . 2972832 , 13 . 4681627 13 . 3723852 , 13 . 551428 13 . 4050383 , 13 . 6477545 C13 . 4376913 , 13 . 7424484 13 . 3821811 , 13 . 8453056 13 . 2401403 , 13 . 956326 C13 . 0964668 , 14 . 0657137 12 . 8678954 , 14 . 1751015 12 . 5527934 , 14 . 2828566 C12 . 1185077 , 14 . 431428 11 . 8099362 , 14 . 558775 11 . 6287117 , 14 . 6616321 C11 . 4474872 , 14 . 7661219 11 . 1813648 , 14 . 9636729 10 . 8303444 , 15 . 2559178 C10 . 591977 , 15 . 4518362 10 . 3389158 , 15 . 5579586 10 . 0711607 , 15 . 5726525 C9 . 80340561 , 15 . 5873464 9 . 58626275 , 15 . 4893872 9 . 41973214 , 15 . 278775 C9 . 25320153 , 15 . 0681627 9 . 19932398 , 14 . 7677545 9 . 25973214 , 14 . 3808158 C9 . 3723852 , 13 . 636326 9 . 37075255 , 13 . 0567341 9 . 25156888 , 12 . 6404076 C9 . 156875 , 12 . 313877 9 . 13565051 , 12 . 0248974 9 . 18952806 , 11 . 7751015 C9 . 24340561 , 11 . 5253056 9 . 32667092 , 11 . 3799994 9 . 43932398 , 11 . 3375505 C9 . 55197704 , 11 . 2951015 9 . 67442602 , 11 . 3848974 9 . 80503826 , 11 . 6053056 C9 . 81646683 , 11 . 6346933 9 . 84422194 , 11 . 6934688 9 . 88503826 , 11 . 7799994 C9 . 92748724 , 11 . 8665301 9 . 9601403 , 11 . 9269382 9 . 98789541 , 11 . 9628566 C10 . 0140179 , 11 . 998775 10 . 0548342 , 12 . 0444892 10 . 1087117 , 12 . 1016321 C10 . 1625893 , 12 . 158775 10 . 2295281 , 12 . 1979586 10 . 3095281 , 12 . 2224484 C10 . 3895281 , 12 . 2469382 10 . 4842219 , 12 . 2616321 10 . 5903444 , 12 . 2665301 C10 . 7927934 , 12 . 2730607 10 . 9740179 , 12 . 2306117 11 . 1356505 , 12 . 1408158 C11 . 2956505 , 12 . 0510198 11 . 4164668 , 11 . 951428 11 . 4964668 , 11 . 8420403 C11 . 5764668 , 11 . 7310198 11 . 6564668 , 11 . 6265301 11 . 7380995 , 11 . 5253056 C11 . 8180995 , 11 . 4240811 11 . 8883036 , 11 . 3669382 11 . 9487117 , 11 . 3555096 C12 . 0140179 , 11 . 3440811 12 . 074426 , 11 . 278775 12 . 1266709 , 11 . 1595913 C12 . 1805485 , 11 . 0404076 12 . 2164668 , 10 . 8755096 12 . 234426 , 10 . 6648974 C12 . 2523852 , 10 . 4542852 12 . 2376913 , 10 . 2012239 12 . 1903444 , 9 . 91061169 C12 . 1005485 , 9 . 39306067 11 . 9242219 , 8 . 8248974 11 . 6597321 , 8 . 20448924 C11 . 3952423 , 7 . 58571373 11 . 0980995 , 7 . 10081577 10 . 7715689 , 6 . 74979536 C10 . 1821811 , 6 . 12448924 9 . 78707908 , 5 . 47632597 9 . 5846301 , 4 . 80367291 C9 . 37728316 , 4 . 09510148 9 . 28748724 , 3 . 45836679 9 . 316875 , 2 . 89346883 C9 . 34626275 , 2 . 48857087 9 . 25809949 , 2 . 0493872 9 . 05401786 , 1 . 57591781 C8 . 84993622 , 1 . 10244842 8 . 57565051 , 0 . 741632095 8 . 23769132 , 0 . 491836177 C8 . 02381377 , 0 . 331836177 7 . 75769132 , 0 . 207754544 7 . 44258928 , 0 . 121223932 C7 . 12748724 , 0 . 0346933194 6 . 8123852 , -0 . 00449035409 6 . 49565051 , 0 . 000407605092 C6 . 10871173 , 0 . 000407605092 5 . 79850765 , 0 . 0624484214 5 . 56667092 , 0 . 188162707 C5 . 08993622 , 0 . 444489238 4 . 77483418 , 0 . 754693319 4 . 61973214 , 1 . 12040761 C4 . 4646301 , 1 . 48612189 4 . 39279337 , 1 . 93673414 4 . 40585459 , 2 . 47224434 C4 . 43034439 , 3 . 65101985 4 . 47769132 , 4 . 57346883 4 . 54952806 , 5 . 23959128 C4 . 46626275 , 5 . 54979536 4 . 09728316 , 6 . 1293872 3 . 44258928 , 6 . 97999944 C3 . 32340561 , 7 . 09918312 3 . 20748724 , 7 . 25918312 3 . 09483418 , 7 . 46163209 C2 . 98218112 , 7 . 66408107 2 . 8923852 , 7 . 84530556 2 . 82707908 , 8 . 00693822 C2 . 76177296 , 8 . 16693822 2 . 67360969 , 8 . 40040761 2 . 56422194 , 8 . 70244842 C2 . 45483418 , 9 . 00612189 2 . 37483418 , 9 . 21999944 2 . 32748724 , 9 . 34571373 C2 . 28503826 , 9 . 45346883 2 . 21973214 , 9 . 57755046 2 . 13156888 , 9 . 72122393 C2 . 04177296 , 9 . 86326475 1 . 96993622 , 10 . 0036729 1 . 91769132 , 10 . 1408158 C1 . 86381377 , 10 . 2779586 1 . 83442602 , 10 . 4330607 1 . 82789541 , 10 . 6044892 C1 . 82136479 , 10 . 7351015 1 . 82789541 , 10 . 8477545 1 . 84585459 , 10 . 9440811 C1 . 87034439 , 11 . 0877545 1 . 91442602 , 11 . 1318362 1 . 97973214 , 11 . 0779586 C2 . 24748724 , 10 . 8755096 2 . 58381377 , 10 . 9946933 2 . 98871173 , 11 . 4355096 C3 . 27442602 , 11 . 7457137 3 . 77728316 , 12 . 4657137 4 . 49728316 , 13 . 5955096 C4 . 55605867 , 13 . 6967341 4 . 61646683 , 13 . 8044892 4 . 67524234 , 13 . 9220403 C4 . 73565051 , 14 . 0379586 4 . 79116071 , 1
< / svg >
< svg id = "windows-icon" class = "is-hidden" xmlns = "http://www.w3.org/2000/svg" width = "14" height = "16" viewBox = "0 0 14 16" fill = "currentColor" fill-rule = "evenodd" >
< path d = "M0,2.26533478 L6.53869277,1.37757635 L6.54155105,7.66524117 L0.0059730822,7.70234465 L0,2.26533478 Z M6.53557797,8.38970261 L6.54065326,14.6828472 L0.00507528763,13.78707 L0.00470884087,8.34749015 L6.53557797,8.38970261 Z M7.32822064,1.26144186 L15.9979845,0 L15.9979845,7.58527313 L7.32822064,7.65388892 L7.32822064,1.26144186 Z M16,8.44888407 L15.9979662,16 L7.32820232,14.7801313 L7.31605461,8.43474628 L16,8.44888407 Z" / >
< / svg >
< span id = "download-button-text" >
< strong > Download Hyper< / strong >
< / span >
< svg id = "fallback-icon" class = "is-hidden" width = "17px" height = "13px" viewBox = "0 0 17 13" version = "1.1" xmlns = "http://www.w3.org/2000/svg" >
< g id = "Page-1" stroke = "none" stroke-width = "1" fill = "none" fill-rule = "evenodd" stroke-linecap = "square" > < g id = "hyper.is" transform = "translate(-1082.000000, -471.000000)" stroke = "currentColor" > < g id = "Group" transform = "translate(1081.000000, 471.000000)" > < path d = "M1.5,5.5 L1.5,11.5" id = "Line" > < / path > < path d = "M17.5,5.5 L17.5,11.5" id = "Line" > < / path > < path d = "M9.5,0.5 L9.5,7.57106781" id = "Line" > < / path > < path d = "M6.5,5 L9.32842712,7.82842712" id = "Line" > < / path > < path d = "M9.5,5 L12.3284271,7.82842712" id = "Line" transform = "translate(10.914214, 6.414214) scale(-1, 1) translate(-10.914214, -6.414214) " > < / path > < path d = "M1.5,12 L17.5,12" id = "Line" > < / path > < / g > < / g > < / g >
< / svg >
< / a >
< span class = "other-downloads" > < a href = "#installation" > Other platforms< / a > < / span >
< / div >
< div id = "arrow" > < a href = "#installation" > < img src = "static/arrow.svg" width = "18" / > < / a > < / div >
< / div >
< / div >
< div id = "content" >
< h2 id = "installation" > < a href = "#installation" > Installation< / a > < / h2 >
< table id = "installation-table" class = "offset-header" >
< tr >
< td style = "width: 33.333%" class = "invisible-top-left" > < / td >
< td style = "width: 33.333%" > 32-bit< / td >
< td style = "width: 33.333%" > 64-bit< / td >
< / tr >
< tr >
2017-08-19 08:12:25 -08:00
< td > < b > macOS< / b > (.app)< / td >
2017-01-27 17:45:42 -09:00
< td id = "td-mac-os" colspan = "2" >
2017-08-19 08:12:25 -08:00
< a href = "https://releases.hyper.is/download/mac" > DOWNLOAD < img src = "static/download-icon.svg" / > < / a >
2017-01-27 17:45:42 -09:00
< / td >
< / tr >
< tr >
< td > < b > Windows< / b > (.exe)< / td >
< td class = "soon" > COMING SOON< / td >
< td id = "td-win" >
2017-08-19 08:12:25 -08:00
< a href = "https://releases.hyper.is/download/win" > DOWNLOAD < img src = "static/download-icon.svg" / > < / a >
2017-01-27 17:45:42 -09:00
< / td >
< / tr >
< tr >
< td > < b > Debian< / b > (.deb)< / td >
< td class = "soon" > COMING SOON< / td >
< td id = "td-debian" >
2017-08-19 08:12:25 -08:00
< a href = "https://releases.hyper.is/download/deb" > DOWNLOAD < img src = "static/download-icon.svg" / > < / a >
2017-01-27 17:45:42 -09:00
< / td >
< / tr >
< tr >
< td > < b > Fedora< / b > (.rpm)< / td >
< td class = "soon" > COMING SOON< / td >
< td id = "td-fedora" >
2017-08-19 08:12:25 -08:00
< a href = "https://releases.hyper.is/download/rpm" > DOWNLOAD < img src = "static/download-icon.svg" / > < / a >
2017-01-27 17:45:42 -09:00
< / td >
< / tr >
< tr >
< td > < b > Other Linux distros< / b > (.AppImage)< / td >
< td class = "soon" > COMING SOON< / td >
< td id = "td-appimage" colspan = "2" >
2017-08-19 08:12:25 -08:00
< a href = "https://releases.hyper.is/download/AppImage" > DOWNLOAD < img src = "static/download-icon.svg" / > < / a >
2017-01-27 17:45:42 -09:00
< / td >
< / tr >
< / table >
< h2 id = "hashtag-goals" > < a href = "#hashtag-goals" > Project goals< / a > < / h2 >
< p > The goal of the project is to create a beautiful and extensible experience
for command-line interface users, built on open web standards.< / p >
< p > In the beginning, our focus will be primarily around speed, stability and
the development of the correct API for extension authors.< / p >
< p > 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.< / p >
< h2 id = "extensions" > < a href = "#extensions" > Extensions< / a > < / h2 >
< p > Extensions are available on npm. We encourage everyone to
include < code > hyper< / code > in the < code > keywords< / code >
field in < code > package.json< / code > .< / p >
< pre > < code > $ npm search hyper< / code > < / pre >
< p > Then edit < code > ~/.hyper.js< / code > and add it to < code > plugins< / code > < / p >
< pre > < code > module.exports = {
config: { /*... */ },
plugins: [
< b > "hyperpower"< / b >
]
};< / code > < / pre >
< p > < code > Hyper< / code > will show a notification when your modules are
installed to < code > ~/.hyper_plugins< / code > .< / p >
2017-01-27 17:52:13 -09:00
< p > You can also take a look at
2017-01-27 17:45:42 -09:00
< a href = "https://github.com/bnb/awesome-hyper" > Awesome Hyper< / a >
for a curated list of plugins and resources.< / p >
2017-08-30 11:05:11 -08:00
2017-06-14 17:03:41 -08:00
< h2 id = "keymaps" > < a href = "#keymaps" > Keymaps< / a > < / h2 >
2017-08-04 14:05:10 -08:00
< P > All command keys can be changed. In order to change them, edit
2017-06-14 17:03:41 -08:00
< code > ~/.hyper.js< / code > and add your desired change to < code > keymaps< / code > .
< / p >
< p > Then Hyper will change the default with your custom change.< / p >
< p > Example: < code > 'window:devtools': 'Cmd+Alt+O'< / code > < p >
< pre > < code > module.exports = {
config: { /*... */ },
keymaps: {
'window:devtools': 'cmd+alt+o'
}
2017-08-30 11:05:11 -08:00
};< / code > < / pre >
2017-08-04 14:05:10 -08:00
2017-01-27 17:45:42 -09:00
< h2 id = "cfg" > < a href = "#cfg" > Configuration< / a > < / h2 >
< p > The < code > config< / code > object seen above in < code > ~/.hyper.js< / code >
admits the following< / p >
< table class = "config" >
< thead >
< tr >
< td > Property< / td >
< td > Default< / td >
< td > Description< / td >
< / tr >
< / thead >
< tbody >
< tr >
< td > "fontSize"< / td >
< td > 12< / td >
< td > The default size in pixels for the terminal< / td >
< / tr >
< tr >
< td > "fontFamily"< / td >
< td > "Menlo, DejaVu Sans Mono, Lucida Console, monospace"< / td >
< td > The font family to use with optional fallbacks< / td >
< / tr >
2017-02-17 18:15:55 -09:00
< tr >
< td > "uiFontFamily"< / td >
< td > "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, ..."< / td >
< td > The font family to use for the UI with optional fallbacks< / td >
< / tr >
< tr >
2017-01-27 17:45:42 -09:00
< tr >
< td > "cursorColor"< / td >
< td > "#F81CE5"< / td >
< td > The color of the caret in the terminal< / td >
< / tr >
< tr >
< td > "cursorShape"< / td >
< td > "BLOCK"< / td >
< td > The shape of the caret in the terminal. Available options are: 'BEAM', 'UNDERLINE', 'BLOCK'< / td >
< / tr >
2017-02-17 15:11:23 -09:00
< tr >
< td > "cursorBlink"< / td >
< td > "false"< / td >
< td > If true, cursor will blink< / td >
< / tr >
2017-01-27 17:45:42 -09:00
< tr >
< td > "foregroundColor"< / td >
< td > "#fff"< / td >
< td > The color of the main text of the terminal< / td >
< / tr >
< tr >
< td > "backgroundColor"< / td >
< td > "#000"< / td >
< td > The color and opacity of the window and main terminal background< / td >
< / tr >
< tr >
< td > "borderColor"< / td >
< td > "#333"< / td >
< td > The color of the main window border and tab bar< / td >
< / tr >
< tr >
< td > "css"< / td >
< td > ""< / td >
< td > Custom CSS to include in the main window< / td >
< / tr >
< tr >
< td > "termCSS"< / td >
< td > ""< / td >
< td > Custom CSS to include in the terminal window< / td >
< / tr >
< tr >
< td > "padding"< / td >
< td > "12px 14px"< / td >
< td > CSS padding values for the space around each term< / td >
< / tr >
< tr >
< td > "colors"< / td >
< td > { black: "#000000", red: "#ff0000", ... }< / td >
< td > A list of overrides for the color palette. The names of the keys represent the "ANSI 16", which can all be seen < a href = "https://github.com/zeit/hyper/blob/aaed99abac97a3d6b1766f194522a69e8a994bcb/lib/utils/colors.js" > in the default config< / a > .< / td >
< / tr >
< tr >
< td > "shell"< / td >
< td > ""< / td >
< td > A path to a custom shell to run when Hyper starts a new session< / td >
< / tr >
< tr >
< td > "npmRegistry"< / td >
< td > npm get registry< / td >
< td > Override the npm registry URL to use when installing plugins< / td >
< / tr >
< tr >
< td > "windowSize"< / td >
< td > null< / td >
< td > The default width/height in pixels of a new window e.g. [540, 380]< / td >
< / tr >
< tr >
< td > "copyOnSelect"< / td >
< td > false< / td >
< td > If true, selected text will automatically be copied to the clipboard< / td >
< / tr >
< tr >
< td > "bell"< / td >
< td > "SOUND"< / td >
< td > System bell configuration. Available options are: "SOUND", false< / td >
< / tr >
< tr >
< td > "bellSoundURL"< / td >
< td > "lib-resource:hterm/audio/bell"< / td >
< td > The URL of the bell sound to use, used only if "bell" is set to "SOUND"< / td >
< / tr >
< tr >
< td > "modifierKeys"< / td >
< td >
{
cmdIsMeta: false,
altIsMeta: false
}
< / td >
< td > Change the behaviour of modifier keys to act as meta key< / td >
< / tr >
2017-01-27 17:52:13 -09:00
< tr >
< td > "showHamburgerMenu"< / td >
< td > ""< / td >
< td >
Change the visibility of the hamburger menu. Available options
are: true, false
< / td >
< / tr >
< tr >
< td > "showWindowControls"< / td >
< td > ""< / td >
< td >
Change the position/visibility of the window controls.
Available options are: true, false, "left"
< / td >
< / tr >
2017-01-27 17:45:42 -09:00
< / tbody >
< / table >
< span class = "table-note" > < / span >
< h2 id = "extensions-api" > < a href = "#extensions-api" > Extensions API< / a > < / h2 >
< p > Extensions are universal Node.js modules loaded by both
Electron and the renderer process.< / p >
< p > The extension system is designed around < b > composition< / b >
of the APIs we use to build the terminal: < code > React< / code >
components and < code > Redux< / code > actions.< / p >
< p > 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!< / p >
< p > The only knowledge that is therefore required to successfully
extend < code > Hyper< / code > is that of its underlying open
source libraries.< / p >
2017-05-13 06:57:41 -08:00
< p > Your module has to expose at least one of these methods:< / p >
2017-01-27 17:45:42 -09:00
< table class = "api" >
< thead >
< tr >
< td > Method< / td >
< td > Invoked from< / td >
< td > Description< / td >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > onApp< / code > < / td >
< td > Electron< / td >
< td >
< p > Invoked when the app first loads. If a plugin reloads,
it's invoked again with the existing app.< / p >
< p > Parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > app< / code > < / td >
< td > The electron app.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td > < code > onWindow< / code > < / td >
< td > Electron< / td >
< td >
< p > Invoked when each window is created. If a plugin reloads,
it's invoked again with the existing windows.< / p >
< p > Parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > window< / code > < / td >
< td > An electron < code > BrowserWindow< / code > .< / td >
< / tr >
< / table >
< / td >
< / tr >
< tr >
< td > < code > onUnload< / code > < / td >
< td > Electron< / td >
< td >
< p > Invoked when a plugin is removed by the user.< / p >
< p > Parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > app< / code > < / td >
< td > The electron app.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td > < code > decorateConfig< / code > < / td >
< td > Electron / Renderer< / td >
< td >
< p > < b > v0.5.0+< / b > . Allows you to decorate the user's configuration.< br >
Useful for themeing or custom parameters for your
plugin.< / p >
< p > Parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > config< / code > < / td >
< td > The < code > config< / code > object< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td > < code > decorateEnv< / code > < / td >
< td > Electron< / td >
< td >
< p > < b > v0.7.0+< / b > . Allows you to decorate the user's environment
by returning a modified environment object.
< p > Parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > environment< / code > < / td >
< td > The < code > environment< / code > object< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td > < code > decorateMenu< / code > < / td >
< td > Electron< / td >
< td >
< p > Invoked with the Electron's < code > Menu< / code > template.
If a plugin reloads, it's called again and the menu
is refreshed.< / p >
< p > Parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > menu< / code > < / td >
< td > The menu template object< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
2017-05-10 11:15:18 -08:00
< td > < code > onRendererWindow< / code > < / td >
2017-01-27 17:45:42 -09:00
< td > Renderer< / td >
< td >
< p > Invoked when a plugin is first loaded or subsequently
reloaded in each window.< / p >
< p > Parameters:< / p >
< table >
< tr >
< tbody >
< td > < code > window< / code > < / td >
< td > The window object< / td >
< / tbody >
< / tr >
< / table >
< / td >
< / tr >
< tr >
< td > < code > middleware< / code > < / td >
< td > Renderer< / td >
< td >
< p > A custom Redux middleware that can intercept any
action. Subsequently we invoke the < code > thunk< / code >
middleware, which means your middleware can
< code > next< / code > thunks.< / p >
< / td >
< / tr >
< tr >
2017-02-15 05:15:39 -09:00
< td > < code > reduceUI< / code > < br > < code > reduceSessions< / code > < br > < code > reduceTermGroups< / code > < / td >
2017-01-27 17:45:42 -09:00
< td > Renderer< / td >
< td >
2017-02-15 05:15:39 -09:00
< p > A custom reducer for the < code > ui< / code > , < code > sessions< / code > or < code > termgroups< / code > state shape.< / p >
2017-01-27 17:45:42 -09:00
< table >
< tbody >
< tr >
< td > < code > state< / code > < / td >
< td > The Redux state object< / td >
< / tr >
< tr >
< td > < code > action< / code > < / td >
< td > The action object< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td >
2017-01-27 17:52:13 -09:00
< code > getTermGroupProps< / code >
2017-01-27 17:45:42 -09:00
< / td >
< td > Renderer< / td >
< td >
< p > Passes down props from < code > < Terms> < / code >
2017-01-27 17:52:13 -09:00
to the < code > < TermGroup> < / code > component. Must return
the composed props object.< / p >
< table >
< tbody >
< tr >
< td > < code > uid< / code > < / td >
< td > TermGroup uid< / td >
< / tr >
< tr >
< td > < code > parentProps< / code > < / td >
< td > Props form the parent component.< / td >
< / tr >
< tr >
< td > < code > props< / code > < / td >
< td > The existing properties that will be
passed to the component.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td >
< code > getTermProps< / code >
< / td >
< td > Renderer< / td >
< td >
< p > Passes down props from < code > < TermGroup> < / code >
2017-01-27 17:45:42 -09:00
to the < code > < Term> < / code > component. Must return
the composed props object.< / p >
< table >
< tbody >
< tr >
< td > < code > uid< / code > < / td >
< td > Term uid< / td >
< / tr >
< tr >
< td > < code > parentProps< / code > < / td >
< td > Props form the parent component.< / td >
< / tr >
< tr >
< td > < code > props< / code > < / td >
< td > The existing properties that will be
passed to the component.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td >
< code > getTabsProps< / code >
< / td >
< td > Renderer< / td >
< td >
2017-02-18 08:04:19 -09:00
< p > Passes down props from < code > < Tabs> < / code >
2017-01-27 17:45:42 -09:00
to the < code > < Header> < / code > component. Must return
the composed props object.< / p >
< table >
< tbody >
< tr >
< td > < code > parentProps< / code > < / td >
< td > Props form the parent component.< / td >
< / tr >
< tr >
< td > < code > props< / code > < / td >
< td > The existing properties that will be
passed to the component.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td >
< code > getTabProps< / code >
< / td >
< td > Renderer< / td >
< td >
2017-02-18 08:04:19 -09:00
< p > Passes down props from < code > < Tab> < / code >
2017-01-27 17:45:42 -09:00
to the < code > < Tabs> < / code > component. Must return
the composed props object.< / p >
< table >
< tbody >
< tr >
< td > < code > uid< / code > < / td >
< td > Tab / Term uid< / td >
< / tr >
< tr >
< td > < code > parentProps< / code > < / td >
< td > Props form the parent component.< / td >
< / tr >
< tr >
< td > < code > props< / code > < / td >
< td > The existing properties that will be
passed to the component.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td >
< code > mapHyperState< / code > < br >
< code > mapTermsState< / code > < br >
< code > mapHeaderState< / code > < br >
< code > mapNotificationsState< / code >
< / td >
< td > Renderer< / td >
< td >
< p > A custom mapper for the state properties that
< a href = "https://github.com/zeit/hyper/tree/master/lib/containers" target = "_blank" > container components< / a > receive. Note that for children components to
get these properties, you have to pass them down using the corresponding
methods (like < code > getTermProps< / code > ).< / p > < p > Must
return an extended object of the map passed.< / p >
< table >
< tbody >
< tr >
< td > < code > state< / code > < / td >
< td > The < code > Redux< / code > global state< / td >
< / tr >
< tr >
< td > < code > map< / code > < / td >
< td > The existing map of properties that will be
passed to the component.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td >
< code > mapHyperDispatch< / code > < br >
< code > mapTermsDispatch< / code > < br >
< code > mapHeaderDispatch< / code > < br >
< code > mapNotificationsDispatch< / code >
< / td >
< td > Renderer< / td >
< td >
< p > A custom mapper for the dispatch properties. Must
return an extended object of the map passed.< / p >
< table >
< tbody >
< tr >
< td > < code > dispatch< / code > < / td >
< td > The Redux dispatch function< / td >
< / tr >
< tr >
< td > < code > map< / code > < / td >
< td > The existing map of properties that will be
passed to the component.< / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
< td >
< code > decorateHyper< / code > < br >
2017-03-05 14:19:28 -09:00
< code > decorateNotifications< / code > < br >
< code > decorateNotification< / code >
2017-01-27 17:45:42 -09:00
< code > decorateHeader< / code > < br >
< code > decorateTabs< / code > < br >
< code > decorateTab< / code >
2017-03-05 14:19:28 -09:00
< code > decorateTerms< / code > < br >
< code > decorateTermGroup< / code > < br >
< code > decorateSplitPane< / code > < br >
< code > decorateTerm< / code > < br >
2017-01-27 17:45:42 -09:00
< / td >
< td > Renderer< / td >
< td >
< p > Invoked with the < code > React< / code > < code > Component< / code >
to decorate. Must return a Higher Order Component.< / p >
< p > Parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > Hyper< / code > < / td >
< td > The < code > React< / code > < code > Component< / code >
constructor.< / td >
< / tr >
< tr >
< td > < code > env< / code > < / td >
< td > A collection of useful module references for
building components. < a href = "#decorating-components" > See below< / a > < / td >
< / tr >
< / tbody >
< / table >
< / td >
< / tr >
< / tbody >
< / table >
< span class = "table-note" > < / span >
< h3 id = "extensions-module-loading" > < a href = "#extensions-module-loading" > Module loading< / a > < / h3 >
< p > 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.< / p >
2017-08-31 16:24:37 -08:00
< h4 > Notice< / h4 >
< p > Plugins affecting the `BrowserWindow` will the effect on new windows after hot-reload.< / p >
2017-01-27 17:45:42 -09:00
< p > In the future we might do this automatically.< / p >
< p > When developing, you can add your plugin to
< code > ~/.hyper_plugins/local< / code > and then specify it
under the < code > localPlugins< / code > array in < code > ~/.hyper.js< / code > .
We load new plugins:
< ul >
< li > Periodically (every few hours)< / li >
< li > When changes are made to the configuration file
(< code > plugins< / code > or < code > localPlugins< / code > )< / li >
< li > When the user clicks Plugins > Update all now< / li >
< / ul >
< p > The process of reloading involves< / p >
< ul >
< li > Running < code > npm prune< / code > and < code > npm install< / code >
in < code > ~/.hyper_plugins< / code > .< / li >
< li > Pruning the < code > require.cache< / code > in both electron
and the renderer process< / li >
< li > Invoking < code > on*< code > methods on the existing instances
and re-rendering components with the fresh decorations in place.< / li >
< / ul >
< p > Note: on the main process, plugins are registered as
soon as possible (we fire < code > onLoad< / code > ).
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.< / p >
< h3 id = "decorating-components" > < a href = "#decorating-components" > Decorating components< / a > < / h3 >
< p > We give you the ability to provide a higher order component
for every piece of the < code > Hyper< / code > UI.< br > Its structure
is as follows:< / p >
< pre > < code > < Hyper>
< Header>
< Tabs>
< Tab /> ...
< /Tabs>
< /Header>
< Terms>
2017-05-13 06:57:41 -08:00
< TermGroup>
< SplitPane>
< TermGroup>
< Term /> ...
< /TermGroup>
< TermGroup>
< Term /> ...
< /TermGroup>
< /TermGroup>
< /SplitPane>
2017-01-27 17:45:42 -09:00
< /Terms>
< Notifications>
< Notification /> ...
< /Notifications>
< /Hyper> < / code > < / pre >
< p > All the < code > decorate*< / code > methods receive the following
references in an object passed as the second parameter:< / p >
< table >
< tbody >
< tr >
< td > < code > React< / code > < / td >
< td > The entire React namespace.< / td >
< / tr >
< tr >
< td > < code > notify< / code > < / td >
< td > A helper function that shows a desktop notification.
The first parameter is the title and the second is the optional
body of the notification.< / td >
< / tr >
< tr >
< td > < code > Notification< / code > < / td >
< td > The < code > Notification< / code > component in case you
want to re-use it.< / td >
< / tr >
< / tbody >
< / table >
< p > All the components accept the following two properties
to extend their markup:< / p >
< table >
< tbody >
< tr >
< td > < code > customChildren< / code > < / td >
< td > An array of < code > Element< / code > or a single
< code > Element< / code > to insert at the bottom
of the component.< / td >
< / tr >
< tr >
< td > < code > customChildrenBefore< / code > < / td >
< td > The same as the above property, but inserted
as the first child element(s) of the component.< / td >
< / tr >
< / tbody >
< / table >
2017-05-13 06:57:41 -08:00
< p > Your higher order component can supply a < code > onDecorated< / code >
property to the decorated component to get a reference to its instance.< / p >
2017-01-27 17:45:42 -09:00
< p > We encourage you to maintain compatibility with other decorators.
2017-05-13 06:57:41 -08:00
Since many can be set, don't assume that yours is the only one.< p >
< p > For example, if you're passing children, compose potential existing
2017-01-27 17:45:42 -09:00
values:< / p >
< pre > < code > render () {
const customChildren = Array.from(this.props.customChildren)
.concat(< p> My new child< /p> );
return < Tab {...this.props} customChildren={customChildren} />
}< / code > < / pre >
2017-05-13 06:57:41 -08:00
< p > Or if you use < code > onDecorated< / code > property< / p >
< pre > < code > onDecorated (term) {
this.term = term;
if (this.props.onDecorated) {
this.props.onDecorated(term);
}
}< / code > < / pre >
2017-01-27 17:45:42 -09:00
< h3 id = "actions-and-effects" > < a href = "#actions-and-effects" > Actions and Effects< / a > < / h3 >
< p > All the < a href = "https://github.com/zeit/hyper/tree/master/lib/actions"
target="_blank">Redux actions< / a > are available for you to
handle through your middleware and reducers. For an example, refer to the < a href = "#hyperpower" > Hyperpower< / a > reference plugin.< / p >
< p > Side effects occur in two fundamental forms:< / p >
< ul >
< li > Some actions dispatch other actions based on state.< / li >
< li > Some actions do async work by communicating over the RPC
channel to the main process< / li >
< / ul >
< p > In all cases, the side effect is passed as
the < code > effect< / code > key in the action and later handled
by our middleware.< / p >
< p > 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.< / p >
< p > As an example, consider the action we use to increase
the font size when you press < code > Command+=< / code > :< / p >
< pre > < code > export function increaseFontSize () {
return (dispatch, getState) => {
dispatch({
type: UI_FONT_SIZE_INCR,
effect () {
const state = getState();
const old = state.ui.fontSizeOverride || state.ui.fontSize;
const value = old + 1;
dispatch({
type: UI_FONT_SIZE_SET,
value
});
}
});
};
}< / code > < / pre >
< h3 id = "hterm" > < a href = "#hterm" > The underlying terminal< / a > < / h3 >
< p > < code > Hyper< / code > achieves a lot of its speed and functionality
thanks to the power of < a target = "_blank" href = "https://chromium.googlesource.com/apps/libapps/+/master/hterm" > hterm< / a > underneath,
the terminal emulator of the Chromium project.< / p >
< p > To access the terminal object, you can supply
a < code > onTerminal< / code > property to the < code > < Term> < / code >
component.< / p >
< h3 id = "additional-apis" > < a href = "#additional-apis" > Additional APIs< / a > < / h3 >
< p > The Electron < code > app< / code > objects are extended with the following properties:< / p >
< table >
< tbody >
< tr >
< td > < code > config< / code > < / td >
< td > An < code > Object< / code > with the < code > config< / code > block
from < code > ~/.hyper.js< / code > .< / td >
< / tr >
< tr >
< td > < code > plugins< / code > < / td >
< td > An < code > Object< / code > with helpers for plugins.< / td >
< / tr >
< tr >
< td > < code > getWindows< / code > < / td >
< td > A < code > Function< / code > that returns an < code > Set< / code >
of all the open windows.< / td >
< / tr >
< tr >
< td > < code > createWindow< / code > < / td >
< td > A < code > Function< / code > that will create a new window. Accepts an
optional < code > callback< / code > that will be passed as the new window's
< code > init< / code > callback.< / td >
< / tr >
< / tbody >
< / table >
< p > Electron < code > BrowserWindow< / code > objects are extended
with the following parameters:< / p >
< table >
< tbody >
< tr >
< td > < code > rpc< / code > < / td >
< td > An < code > EventEmitter< / code > that allows for communication
with the window process.< / td >
< / tr >
< tr >
< td > < code > sessions< / code > < / td >
< td > A < code > Map< / code > of < code > Session< / code >
objects which hold the communication with each
term's pty..< / td >
< / tr >
< / tbody >
< / table >
< p > Renderer windows are similarly extended with:< / p >
< table >
< tbody >
< tr >
< td > < code > rpc< / code > < / td >
< td > An < code > EventEmitter< / code > that allows for communication
with the window process.< / td >
< / tr >
< tr >
< td > < code > store< / code > < / td >
< td > The Redux < code > Store< / code > object. This allows
access to < code > dispatch< / code > actions or read the global
state with < code > getState< / code > .< / td >
< / tr >
< / tbody >
< / table >
< p > The < code > rpc< / code > 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:< / p >
< pre > < code > window.rpc.emit('hi there', {
some: 'payload',
any: [
'object',
'here'
]
});< / code > < / pre >
< h3 id = "hyperyellow" > < a href = "#hyperyellow" > Example theme: Hyperyellow< / a > < / h3 >
< p > The following extension simply alters the config to add CSS
and yellow colors! Here's the < a target = "_blank" href = "https://github.com/zeit/hyperyellow/blob/29c4ac9748be74d7ad587b7077758ef26f6ce5c2/index.js#L1" > code< / a > .< / p >
< p style = "text-align: center" > < img src = "static/hyperyellow.gif" width = "446" height = "333" / > < / p >
< p > Themes are simply plugins! Only one hook, < code > decorateConfig< / code >
is needed:< / p >
< pre > < code > exports.decorateConfig = (config) => {
return Object.assign({}, config, {
borderColor: 'yellow',
cursorColor: 'yellow',
css: `
${config.css || ''}
.tabs_nav .tabs_list .tab_text {
color: yellow;
}
.tabs_nav .tabs_title {
color: yellow;
}
`
});
}< / code > < / pre >
< p > I grabbed the class names by inspecting the term with
Devtools, which you can trigger from < code > View -> Toggle Developer Tools< / code > .
When you do so, notice that some classes are automatically generated and
followed by a random nonce (e.g.: < code > term_13hv8io< / code > ). Ignore those: they change with every new window!< / p >
< p > 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 < b > compose< / b > the CSS to preserve
the user's setting and that of other authors':< / p >
< pre > < code > return Object.assign({}, config, {
css: `
${config.css || ''}
/* your css here */
`
});< / code > < / pre >
< h3 id = "hyperpower" > < a href = "#hyperpower" > Example extension: Hyperpower< / a > < / h3 >
< p > The following extension renders particles as the
caret moves:< / p >
< p style = "text-align: center" > < img src = "https://cloud.githubusercontent.com/assets/13041/16820268/13c9bfe6-4905-11e6-8fe4-baf8fc8d9293.gif" width = "457" height = "340" / > < / p >
< p > Let's walk through < a target = "_blank"
href="https://github.com/zeit/hyperpower/blob/master/index.js">its code< / a > .
< br > First, we intercept the Redux action < code > SESSION_ADD_DATA< / code > . See the whole list of them < a target = "_blank" href = "https://github.com/zeit/hyper/tree/master/lib/actions" > here< / a > .< / p >
< pre > < code > exports.middleware = (store) => (next) => (action) => {
if ('SESSION_ADD_DATA' === action.type) {
const { data } = action;
if (/bash: wow: command not found/.test(data)) {
store.dispatch({
type: 'WOW_MODE_TOGGLE'
});
} else {
next(action);
}
} else {
next(action);
}
};< / code > < / pre >
< p > 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 < code > uiReducer< / code > and later map:< / p >
< pre > < code > exports.reduceUI = (state, action) => {
switch (action.type) {
case 'WOW_MODE_TOGGLE':
return state.set('wowMode', !state.wowMode);
}
return state;
};
exports.mapTermsState = (state, map) => {
return Object.assign(map, {
wowMode: state.ui.wowMode
});
};< / code > < / pre >
< p > We then want to decorate the < code > < Term> < / code > component
so that we can access the underlying caret.< / p >
< p > However, < code > < Term> < / code > is not a container that
we can map props to. So we use < code > getTermProps< / code > to
pass the property further down:< / p >
< pre > < code > exports.getTermProps = (uid, parentProps, props) => {
return Object.assign(props, {
wowMode: parentProps.wowMode
});
}< / code > < / pre >
< p > The extension then < a href = "https://github.com/zeit/hyperpower/blob/82a09148e176584458829fdd8877fbc003fbb5b4/index.js#L51" target = "_blank" > returns< / a > a higher order component to
wrap < code > < Term> < / code > . Notice we pass the < code > onTerminal< / code >
property to access the underlying hterm object:< / p >
< pre > < code > render () {
return React.createElement(Term, Object.assign({}, this.props, {
onTerminal: this._onTerminal
}));
}< / code > < / pre >
< h2 id = "credits" > < a href = "#credits" > Credits< / a > < / h2 >
< p > Authored by < b > Guillermo Rauch< / b > - < a href = "https://twitter.com/rauchg" target = "_blank" > @rauchg< / a > .< br / >
Brought to you by < a href = "https://zeit.co" > < span style = "font-size: 16px" > ▲ < / span > ZEIT< / a > . Hosted on < a target = "_blank" href = "https://zeit.co/now" > now< / a > .< / p >
< p > Special thanks to the following people:< / p >
< ul >
< li > Jeff Haynies for his work on polish for general terminal behavior.< / li >
< li > Nuno Campos for his work on zooming and configuration.< / li >
< li > Leo Lamprecht and Johan Brook for their excellent UI improvements.< / li >
< li > Harrison Harnisch for our nice default color palette.< / li >
< li > Fernando Montoya for his feedback and patches.< / li >
< li > Matias Tucci for his work on the auto updater.< / li >
< li > Sebastian Markbage for his insight on the higher-order component extensibility API.< / li >
< li > Joel Besada for his editor particles < a target = "_blank" href = "https://github.com/codeinthedark/editor/pull/1" > idea< / a > and Zero Cho for his reference implementation.< / li >
< / ul >
< / div >
< script >
document.getElementById('vid').playbackRate = 1.7;
document.getElementById('vid').onended = function () {
document.getElementById('top-content').style.animationDelay = '100ms';
document.getElementById('top-content').style.animationName = 'arrow-video-finish';
}
document.addEventListener('DOMContentLoaded', () => {
var userAgent = navigator.userAgent;
var downloadButton = document.getElementsByClassName('download-button')[0];
var downloadButtonText = document.getElementById('download-button-text');
if (/Mac/.test(userAgent) & & !/iPhone/.test(userAgent) & & !/iPad/.test(userAgent)) {
2017-08-19 08:12:25 -08:00
downloadButton.setAttribute('href', 'https://releases.hyper.is/download/mac');
2017-01-27 17:45:42 -09:00
downloadButtonText.innerHTML += ' for < strong > macOS< / strong > ';
document.getElementById('td-mac-os').classList.add('highlighted');
document.getElementById('mac-os-icon').classList.remove('is-hidden');
} else if (/Windows/.test(userAgent)) {
2017-08-19 08:12:25 -08:00
downloadButton.setAttribute('href', 'https://releases.hyper.is/download/win');
2017-01-27 17:45:42 -09:00
downloadButtonText.innerHTML += ' for < strong > Windows< / strong > ';
document.getElementById('td-win').classList.add('highlighted');
document.getElementById('windows-icon').classList.remove('is-hidden');
} else if (/Linux/.test(userAgent) & & !/Android/.test(userAgent)) {
document.getElementById('linux-icon').classList.remove('is-hidden');
if (/Ubuntu/.test(userAgent)) { // needs to be improved with other debian distros
2017-08-19 08:12:25 -08:00
downloadButton.setAttribute('href', 'https://releases.hyper.is/download/deb');
2017-01-27 17:45:42 -09:00
downloadButtonText.innerHTML += ' for < strong > Debian< / strong > ';
document.getElementById('td-debian').classList.add('highlighted');
} else if (/Fedora/.test(userAgent)) {
2017-08-19 08:12:25 -08:00
downloadButton.setAttribute('href', 'https://releases.hyper.is/download/rpm');
2017-01-27 17:45:42 -09:00
downloadButtonText.innerHTML += ' for < strong > Fedora< / strong > ';
document.getElementById('td-fedora').classList.add('highlighted');
} else {
2017-08-19 08:12:25 -08:00
downloadButton.setAttribute('href', 'https://releases.hyper.is/download/AppImage');
2017-01-27 17:45:42 -09:00
downloadButtonText.innerHTML += ' for < strong > Linux< / strong > ';
document.getElementById('td-appimage').classList.add('highlighted');
}
} else {
document.getElementById('fallback-icon').classList.remove('is-hidden');
document.getElementsByClassName('other-downloads')[0].classList.add('is-hidden');
}
});
var header = document.getElementById('header');
window.addEventListener('scroll', function () {
if (window.scrollY > 200) {
header.classList.add('hidden');
} else {
header.classList.remove('hidden');
}
});
< / script >
< / body >
2017-08-04 14:05:10 -08:00
< / html >
