Hyper™

	64-bit
macOS (.app)	3.0.2
Windows (.exe)	3.0.2
Debian (.deb)	3.0.2
Fedora (.rpm)	3.0.2
Outras distros Linux (.AppImage)	3.0.2

$ npm search hyper

module.exports = { config: { /*... */ }, plugins: };

module.exports = { config: { /*... */ }, keymaps: { 'window:devtools': 'cmd+alt+o' }};

macOS	~/Library/Application Support/Hyper/.hyper.js
Janelas	$Env:AppData/Hyper/.hyper.js
Linux	~/.config/Hyper/.hyper.js

>

>

>

>

Propriedade	Padrão	Descrição
>updateChannel>	“estável”	O canal de atualização para receber atualizações de
fontSize	12	O tamanho padrão em pixels para o terminal
fontFamily	“Menlo, DejaVu Sans Mono, Lucida Console, monospace”	A família de fontes a usar com fallbacks opcionais
uiFontFamily>	“-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, ….”	A família de fontes a usar para a IU com fallbacks opcionais
fontWeight	“normal”	O peso padrão da fonte: “normal” ou “bold”
fontWeightBold>	“bold”	>O peso da fonte para caracteres bold: “normal” ou “negrito”
cursorColor	“rgba(248,28,229,0).8)”	A cor do carpete no terminal
>cursorAccentColor>	“#000”	A cor do texto sob o cursor BLOCK
cursorShape	“BLOCK”	A forma do carpete no terminal. As opções disponíveis são: ‘BEAM’, ‘UNDERLINE’, ‘BLOCK’
cursorBlink	“false”	Se for verdade, o cursor piscará
foregroundColor	“#fff”	A cor do texto principal do terminal
backgroundColor	“#000”	A cor e opacidade da janela e fundo do terminal principal
selectionColor	“rgba(248,28,229,0.3)”	A cor de fundo/opacidade da seleção de texto no terminal
borderColor	“#333”	A cor da borda da janela principal e barra de tabulação
css	“”	CSS Personalizado para incluir na janela principal
padding	“12px 14px”	CSS valores de enchimento para o espaço em torno de cada termo
>colors>	{ preto: “#000000”, vermelho: “#ff0000”, … }	Uma lista de anulações para a paleta de cores. Os nomes das teclas representam o “ANSI 16”, que pode ser visto na configuração padrão.
shell	“”	Um caminho para uma shell personalizada para executar quando Hyper inicia uma nova sessão
shellArgs	“”	Uma matriz de argumentos de shell
env	{}	Um objeto de variáveis de ambiente a definir antes lançando shell
windowSize		>A largura/altura padrão em pixels de uma nova janela
scrollback	1000	O número de linhas a serem persistidas no buffer de terminal para rolagem
copyOnSelect	falso	Se verdadeiro, o texto selecionado será automaticamente copiado para o clipboard
quickEdit	falso	Se verdadeiro, no clique direito do mouse, o texto selecionado será copiado ou colado se nenhuma seleção estiver presente (true by default no Windows)
defaultSSHApp	true	Se verdadeiro, Hyper será definido como o cliente de protocolo padrão para SSH
modifierKeys	{altIsMeta: false}	Alterar o comportamento das teclas modificadoras para agir como meta-chave
showHamburgerMenu>	verdadeiro no Linux/Windows, false no MacOS	Alterar a visibilidade do menu de hambúrgueres. As opções disponíveis são: true, false
showWindowControls	“”	Alterar a posição/visibilidade dos controles da janela. As opções disponíveis são: true, false, “left”

>

Método	Convidado de	Descrição
onApp	Electron	Convidado quando o aplicativo carregar pela primeira vez. Se um plugin recarregar, é invocado novamente com o aplicativo existente. Parâmetros: app O aplicativo eletrônico.
onWindow	Electrão	Foquando cada janela é criada. Se um plugin recarregar, é invocado novamente com as janelas existentes. Parâmetros: window Um electrão BrowserWindow.
onUnload	Electrão	Falado quando um plugin é removido pelo utilizador. Parâmetros: app O app.electron.
decorateConfig	Electron / Renderer	v0.5.0+. Permite decorar a configuração do utilizador. Utilizado para temas ou parâmetros personalizados para o seu plugin. Parâmetros: >config O objeto config
decorateEnv	Electron	v0.7.0+. Permite-lhe decorar o ambiente do utilizador devolvendo um objecto de ambiente modificado. Parâmetros: environment >O objeto environment
decorateMenu	Electron	Falecido com o modelo Electron’s Menu. Se um plugin é recarregado, é chamado novamente e o menu é atualizado. Parâmetros: menu >O objecto modelo do menu
decorateBrowserOptions	Electron	Permite decorar as BrowserWindow opções do Electron quando uma nova janela é criada. Parâmetros: options O objeto BrowserWindow opções.
onRendererWindow	Renderizador	Fabricado quando um plugin é carregado pela primeira vez ou posteriormente recarregado em cada janela. Parâmetros: window O objecto da janela
middleware	Renderizador	> Um middleware Redux personalizado que pode interceptar qualquer acção. Subsequentemente invocamos o middleware thunkmiddleware, o que significa que o seu middleware podenext thunks.
reduceUI reduceSessions reduceTermGroups	Renderizador	Um redutor personalizado para o ui, sessions ou termgroups forma de estado. state O objecto de estado Redux action> O objecto de acção
getTabsProps	Renderizador	Passar os escoras de <Tabs> para o componente <Header>. Deve retornar o objeto de adereços composto. parentProps Props do componente pai. props As propriedades existentes que serão passadas para o componente.
getTabProps	Renderizador	Passar os adereços de <Tab> para o componente <Tabs>. Deve retornar o objeto de adereços composto. uid Tab / Termo uid parentProps Props formam o componente pai. props As propriedades existentes que serão passadas ao componente.
getTermGroupProps	Renderizador	Passar os prumos de <Terms> para o componente <TermGroup>. Deve retornar o objeto de adereços composto. uid TermGroup uid parentProps Props formam o componente pai. props As propriedades existentes que serão passadas ao componente.
getTermProps	Renderizador	Passar os prumos de <TermGroup> para o componente <Term>. Deve retornar o objeto de adereços composto. uid Term uid parentProps Props do componente pai. props> >As propriedades existentes que serão passadas para o componente.
mapHyperState mapTermsState mapHeaderState mapNotificationsState	>Renderizador	Um mapeador personalizado para as propriedades de estado que os componentes do recipiente recebem. Note que para que os componentes filhos recebam essas propriedades, você tem que passá-las usando os métodos correspondentes (como getTermProps). Deve retornar um objeto estendido do mapa passado. state O Redux estado global map O mapa existente de propriedades que serão passadas ao componente.
mapHyperDispatch mapTermsDispatch mapHeaderDispatch> mapNotificationsDispatch	Renderizador	Um mapeador personalizado para as propriedades de expedição. Deve retornar um objeto extendido do mapa passado. dispatch A função de despacho Redux map O mapa de propriedades existente que será passado ao componente.
decorateHyper decorateNotifications decorateNotificationdecorateHeader decorateTabs decorateTabdecorateTerms decorateTermGroup decorateSplitPane decorateTerm	Renderizador	Fabricado com o React ComponentDecorar. Deve retornar um Componente de Ordem Superior. Parâmetros: Hyper O React Componentonstrutor. env Uma coleção de referências úteis de módulos para componentes de construção. Veja abaixo

macOS	~/Library/Application Support/Hyper/.hyper_plugins
Janelas	$Env:AppData/Hyper/.hyper_plugins
Linux	>~/.config/Hyper/.hyper_plugins

Nota: plugins em ~/.hyper_plugins ainda são suportados, mas serão ignorados, se plugins no diretório de aplicações presentes. Caso contrário eles serão movidos para o diretório da aplicação na primeira execução.

Note: no processo principal, os plugins são registrados o mais rápido possível (nós disparamos onLoad). No navegador, cabe ao usuário acionar sua carga pressionando comando+R. Nós colocamos o usuário no controle da carga desta forma para evitar que ele perca trabalho crítico por extensões que reinicializam o estado ou não o preservam corretamente.

Decorando componentes

Damos-lhe a capacidade de fornecer um componente de ordem superior para cada peça do Hyper UI.
A estrutura da Its é a seguinte:

<Hyper> <Header> <Tabs> <Tab /> ... </Tabs> </Header> <Terms> <TermGroup> <SplitPane> <TermGroup> <Term /> ... </TermGroup> <TermGroup> <Term /> ... </TermGroup> </SplitPane> </TermGroup> </Terms> <Notifications> <Notification /> ... </Notifications></Hyper>

Todos os métodos decorate* recebem as seguintes referências num objecto passado como segundo parâmetro:

Todos os componentes aceitam as duas propriedades seguintes para estender sua marcação:

O seu componente de pedido superior pode fornecer uma onDecoratedpropriedade ao componente decorado para obter uma referência à sua instância.

Seu componente de ordem superior pode fornecer uma propriedade onCursorMovehandler que será chamada quando o cursor se mover com um parâmetro de objeto representando sua posição relativa à origem do Termo:

Aconselhamo-lo a manter a compatibilidade com outros decoradores. Como muitos podem ser definidos, não assuma que o seu é o único.

Por exemplo, se você está passando crianças, componha valores potenciais existentes:

render () { const customChildren = Array.from(this.props.customChildren) .concat(<p>My new child</p>); return <Tab {...this.props} customChildren={customChildren} />}

Or se você usar onDecorated propriedade

onDecorated (term) { this.term = term; if (this.props.onDecorated) { this.props.onDecorated(term); }}

Ações e Efeitos

Todas as ações Redux estão disponíveis para você lidar através de seu middleware e redutores. Para um exemplo, consulte o plugin de referência Hyperpower.

Efeitos secundários ocorrem em duas formas fundamentais:

• Acções que enviam outras acções com base no estado.
• Algumas ações fazem trabalho assimétrico comunicando-se através do canal RPC para o processo principal

Em todos os casos, o efeito colateral é passado como a chave effect na ação e mais tarde tratado pelo nosso middleware.

Isso significa que você pode sobrepor, compor ou eliminar completamente os efeitos! Em outras palavras, é assim que você pode alterar a funcionalidade ou comportamento padrão do app.

Como exemplo, considere a ação que usamos para aumentar o tamanho da fonte quando você pressiona Command+=:

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 }); } }); };}

O terminal subjacente

Hyper atinge muita da sua velocidade e funcionalidade graças ao poder do xterm.js

As APIs adicionais

O elétron app objetos são estendidos com as seguintes propriedades:

Electron BrowserWindow objetos são estendidos com os seguintes parâmetros:

As janelas do renderizador são estendidas similarmente com:

O objeto rpc é simétrico entre o browser e o processo de renderizador. A API é a mesma do Node.js, com a exceção de que ela admite apenas um único objeto como parâmetro:

window.rpc.emit('hi there', { some: 'payload', any: });

Tema de exemplo: Hyperyellow

A seguinte extensão simplesmente altera a configuração para adicionar CSS e cores amarelas! Aqui está o código.

Temas são simplesmente plugins! Apenas um gancho, decorateConfigé necessário:

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; } ` });}

Eu peguei os nomes das classes inspecionando o termo com Devtools, que você pode acionar a partir de View -> Toggle Developer Tools. Quando o faz, note que algumas classes são automaticamente geradas e seguidas por um nonce aleatório (por exemplo: term_13hv8io). Ignore essas: elas mudam a cada nova janela!

Note a ênfase em jogar bem com outras extensões. Especificamente, nós criamos um novo objeto, estendemos apenas as chaves que nos interessam, e compomos o CSS para preservar a configuração do usuário e a de outros autores’:

return Object.assign({}, config, { css: ` ${config.css || ''} /* your css here */ `});

Example extension: Hyperpower

A seguinte extensão renderiza partículas à medida que o carpete se move:

Vamos através do seu código.
Primeiro, interceptamos a acção Redux SESSION_ADD_DATA. Você pode encontrar a lista completa de ações no repositório.

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); }};

Note que nós não re-dispatchamos a ação, o que significa que nós nunca renderizamos a saída do comando para o terminal. Em vez disso, nós despachamos uma ação nossa, que nós pegamos no mapa uiReducer e mais tarde no mapa:

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 });};

Nós então queremos decorar o componente <Term> para que possamos acessar o caret.

No entanto, <Term> não é um container para o qual nós podemos mapear adereços. Então usamos getTermProps para passar a propriedade mais abaixo:

exports.getTermProps = (uid, parentProps, props) => { return Object.assign(props, { wowMode: parentProps.wowMode });}

A extensão então retorna um componente de ordem superior para embrulhar <Term>. Note que passamos a propriedade onDecoratedproperty para acessar o componente Term base e sua ref DOM, e a propriedade onCursorMove para usar Hyper cursor API:

render () { return React.createElement(Term, Object.assign({}, this.props, { onDecorated: this._onDecorated, onCursorMove: this._onCursorMove }));}