Hyper™

Instalación

última versión: 3.0.2

Objetivos del proyecto

El objetivo del proyecto es crear una experiencia hermosa y extensible para los usuarios de la interfaz de línea de comandos, construida sobre estándares web abiertos. Al principio, nuestro enfoque será principalmente en torno a la velocidad, la estabilidad y el desarrollo de la API correcta para los autores de extensiones.

En el futuro, anticipamos que la comunidad vendrá con adiciones innovadoras para mejorar lo que podría ser la interfaz más simple, más potente y bien probada para la productividad.

Extensiones

Las extensiones están disponibles en npm. Animamos a todos a incluir hyper en el campo keywordsen package.json.

$ npm search hyper

Entonces edite .hyper.js y añádalo a plugins

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

Hypermostrará una notificación cuando sus módulos sean instalados a .hyper_plugins.

Keymaps

Todas las claves de comando pueden ser cambiadas. Para cambiarlas, edite .hyper.js y añada el cambio que desee a keymaps.

Entonces Hyper cambiará el valor por defecto con su cambio personalizado.

Ejemplo: 'window:devtools': 'Cmd+Alt+O'

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

Mapas de teclado por defecto:

Configuración

Localización de la configuración

Nota: config en ~/.hyper.js todavía se admite, pero será ignorado, si config en el directorio de la aplicación presente. De lo contrario, se moverá al directorio de la aplicación en la primera ejecución.

El objeto config visto arriba en .hyper.js admite lo siguiente

API de extensiones

Las extensiones son módulos universales de Node.js cargados tanto por Electron como por el proceso de renderizado.

El sistema de extensiones está diseñado en torno a la composición de las APIs que utilizamos para construir el terminal: React componentes y Redux acciones.

En lugar de exponer un método o parámetro personalizado de la API para cada punto de personalización posible, ¡permitimos interceptar y componer cada trozo de funcionalidad!

El único conocimiento que se requiere, por tanto, para extender con éxito Hyper es el de sus bibliotecas de código abierto subyacentes.

Puede encontrar detalles adicionales sobre el desarrollo de plugins en el repositorio Hyper.

Su módulo tiene que exponer al menos uno de estos métodos:

Carga de módulos

El usuario puede cargar y recargar plugins en caliente pulsando Comando + R (refrescar). Por favor, esfuércese por hacer plugins que no requieran un reinicio completo de la aplicación para que funcionen.

Observación

Los plugins que afecten a la `BrowserWindow` tendrán el efecto en las nuevas ventanas después de la recarga en caliente.

En el futuro podríamos hacer esto automáticamente.

Cuando desarrolle, puede añadir su plugin a .hyper_plugins/local y luego especificarlo bajo la matriz localPlugins en .hyper.js. Cargamos nuevos plugins:

• Periódicamente (cada pocas horas)
• Cuando se realizan cambios en el archivo de configuración (plugins o localPlugins)
• Cuando el usuario hace clic en Plugins > Actualizar todo ahora

El proceso de recarga implica

• Ejecutar npm prune y npm install en .hyper_plugins.
• Ejecutar el require.cache tanto en electron como en el proceso de renderizado
• Invocar métodos on* en las instancias existentes y volver a renderizar los componentes con las decoraciones frescas en su lugar.

Localización de los plugins

Nota: plugins en ~/.hyper_plugins todavía se admite, pero será ignorado, si los plugins en el directorio de la aplicación presente. De lo contrario, se moverán al directorio de la aplicación en la primera ejecución.

Nota: en el proceso principal, los plugins se registran tan pronto como sea posible (disparamos onLoad). En el navegador, es el usuario el que desencadena su carga pulsando comando+R. Ponemos al usuario en control de la carga de esta manera para evitar que pierdan trabajo crítico por extensiones que resetean el estado o no lo preservan correctamente.

Decoración de componentes

Le damos la capacidad de proporcionar un componente de orden superior para cada pieza de la HyperUI.
Su estructura es la siguiente:

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

Todos los métodos decorate*reciben las siguientes referencias en un objeto pasado como segundo parámetro:

Todos los componentes aceptan las siguientes dos propiedades para ampliar su marcado:

Su componente de orden superior puede suministrar una propiedad onDecoratedal componente decorado para obtener una referencia a su instancia.

Su componente de orden superior Term puede suministrar una propiedad onCursorMovehandler que se llama cuando el cursor se ha movido con un parámetro de objeto que representa su posición relativa al origen Term:

Le animamos a mantener la compatibilidad con otros decoradores. Ya que se pueden establecer muchos, no asumas que el tuyo es el único.

Por ejemplo, si estás pasando hijos, compón los posibles valores existentes:

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

O si usas la propiedad onDecorated

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

Acciones y Efectos

Todas las acciones de Redux están disponibles para que las manejes a través de tus middleware y reductores. Para un ejemplo, consulte el plugin de referencia Hyperpower.

Los efectos secundarios ocurren en dos formas fundamentales:

• Algunas acciones despachan otras acciones basadas en el estado.
• Algunas acciones realizan un trabajo asíncrono comunicándose a través del canal RPC con el proceso principal

En todos los casos, el efecto secundario se pasa como la clave effect en la acción y posteriormente es manejado por nuestro middleware.

¡Esto significa que puedes anular, componer o eliminar completamente los efectos! En otras palabras, así es como puedes cambiar la funcionalidad o el comportamiento por defecto de la app.

Como ejemplo, considera la acción que utilizamos para aumentar el tamaño de la letra cuando pulsas 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 }); } }); };}

La terminal subyacente

Hyperconsigue gran parte de su velocidad y funcionalidad gracias a la potencia de xterm.js

Apis adicionales

Los objetos Electron appse extienden con las siguientes propiedades:

Los objetos Electron BrowserWindow se extienden con los siguientes parámetros:

Las ventanas del renderizador se extienden de forma similar con:

El objeto rpc es simétrico entre el navegador y el proceso de renderizado. La API es la misma que la de Node.js, con la excepción de que sólo admite un único objeto como sus parámetros:

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

Tema de ejemplo: Hyperyellow

¡La siguiente extensión simplemente altera la configuración para añadir CSS y colores amarillos! Aquí está el código.

¡Los temas son simplemente plugins! Sólo se necesita un gancho, decorateConfig:

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

Agarré los nombres de las clases inspeccionando el término con Devtools, que puedes activar desde View -> Toggle Developer Tools. Cuando lo hagas, observa que algunas clases se generan automáticamente y van seguidas de un nonce aleatorio (por ejemplo: term_13hv8io). Ignóralos: ¡cambian con cada nueva ventana!

Nota el énfasis en jugar bien con otras extensiones. En concreto, creamos un nuevo objeto, extendemos sólo las claves que nos interesan, y componemos el CSS para preservar la configuración del usuario y la de otros autores:

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

Extensión de ejemplo: Hyperpower

La siguiente extensión renderiza partículas a medida que el caret se mueve:

Vamos a recorrer su código.
Primero, interceptamos la acción Redux SESSION_ADD_DATA. Puedes encontrar la lista completa de acciones en el repositorio.

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

Nota que no re-despachamos la acción, lo que significa que nunca renderizamos la salida del comando a la terminal. En su lugar, despachamos una acción propia, que agarramos en el uiReducery luego mapeamos:

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

Entonces queremos decorar el componente <Term> para poder acceder al caret subyacente.

Sin embargo, <Term> no es un contenedor al que podamos mapear props. Así que usamos getTermProps para pasar la propiedad más abajo:

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

La extensión devuelve entonces un componente de orden superior para envolver <Term>. Fíjate en que pasamos la propiedad onDecorated para acceder al componente base de Term y su ref. DOM, y la propiedad onCursorMove para usar la API de Hyper cursor:

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