Hyper™

Instalare

ultima versiune: 3.0.2

Obiectivele proiectului

Obiectivul proiectului este de a crea o experiență frumoasă și extensibilă pentru utilizatorii interfeței de linie de comandă, construită pe standarde web deschise. La început, atenția noastră se va concentra în principal în jurul vitezei, stabilității și dezvoltării API-ului corect pentru autorii de extensii.

În viitor, anticipăm că comunitatea va veni cu adăugiri inovatoare pentru a îmbunătăți ceea ce ar putea fi cea mai simplă, mai puternică și mai bine testată interfață pentru productivitate.

Extensiuni

Extensiunile sunt disponibile pe npm. Încurajăm pe toată lumea să includă hyper în câmpul keywords din package.json.

$ npm search hyper

Apoi editați .hyper.js și adăugați-l la plugins

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

Hyper va afișa o notificare atunci când modulele dvs. sunt instalate în .hyper_plugins.

Keymaps

Toate cheile de comandă pot fi modificate. Pentru a le schimba, editați .hyper.js și adăugați modificarea dorită la keymaps.

Apoi Hyper va schimba valoarea implicită cu modificarea dvs. personalizată.

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

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

Default keymaps:

Configuration

Localizare configurare

Note: configurația de la ~/.hyper.js este încă acceptată, dar va fi ignorată, dacă este prezentă configurația din directorul de aplicații. În caz contrar, aceasta va fi mutată în directorul de aplicații la prima rulare.

Obiectul config văzut mai sus în .hyper.js admite următoarele

Extensiuni API

Extensiunile sunt module universale Node.js încărcate atât de Electron, cât și de procesul de redare.

Sistemul de extensii este conceput în jurul compoziției API-urilor pe care le folosim pentru a construi terminalul: React componente și Redux acțiuni.

În loc să expunem o metodă sau un parametru API personalizat pentru fiecare punct de personalizare posibil, vă permitem să interceptați și să compuneți fiecare bucată de funcționalitate!

Unele cunoștințe care sunt, prin urmare, necesare pentru a extinde cu succes Hyper sunt cele ale bibliotecilor open source care stau la baza sa.

Puteți găsi detalii suplimentare despre dezvoltarea de plugin-uri în depozitul Hyper.

Modul dvs. trebuie să expună cel puțin una dintre aceste metode:

Încărcarea modulelor

Utilizatorul poate încărca și reîncărca la cald modulele prin apăsarea Command + R (refresh). Vă rugăm să vă străduiți să realizați plugin-uri care să nu necesite o repornire completă a aplicației pentru a funcționa.

Atenție

Pluginele care afectează `BrowserWindow` vor avea efect asupra noilor ferestre după reîncărcarea la cald.

În viitor am putea face acest lucru în mod automat.

Când dezvoltați, puteți adăuga plugin-ul dvs. la .hyper_plugins/local și apoi să îl specificați sub matricea localPlugins în .hyper.js. Încărcăm plugin-uri noi:

• Periodic (la câteva ore)
• Când se fac modificări în fișierul de configurare (plugins sau localPlugins)
• Când utilizatorul face clic pe Plugins > Update all now

Procesul de reîncărcare implică

• Executarea npm prune și npm install în .hyper_plugins.
• Executarea require.cache atât în electroni, cât și în procesul de randare
• Invocarea metodelor on* pe instanțele existente și redarea din nou a componentelor cu decorațiile proaspete la locul lor.

Localizarea pluginurilor

Nota: pluginurile de la ~/.hyper_plugins sunt încă acceptate, dar vor fi ignorate, dacă sunt prezente pluginurile din directorul de aplicații. În caz contrar, acestea vor fi mutate în directorul de aplicații la prima rulare.

Nota: pe procesul principal, plugin-urile sunt înregistrate cât mai curând posibil (lansăm onLoad). Pe browser, este la latitudinea utilizatorului să declanșeze încărcarea lor apăsând comanda+R. În acest fel, punem utilizatorul în controlul încărcării pentru a preveni pierderea muncii critice de către extensiile care resetează starea sau nu o păstrează corect.

Decorarea componentelor

Vă oferim posibilitatea de a oferi o componentă de ordin superior pentru fiecare piesă a interfeței Hyper.
Structura sa este următoarea:

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

Toate metodele decorate* primesc următoarele referințe într-un obiect trecut ca al doilea parametru:

Toate componentele acceptă următoarele două proprietăți pentru a-și extinde marcajul:

Componenta de ordin superior poate furniza o onDecoratedproprietate componentei decorate pentru a obține o referință la instanța acesteia.

Componenta dvs. de ordin superior Term poate furniza o proprietate onCursorMovehandler care să fie apelată atunci când cursorul s-a deplasat cu un parametru obiect care reprezintă poziția sa relativă față de originea Term:

Vă încurajăm să mențineți compatibilitatea cu alte decoratoare. Deoarece multe pot fi setate, nu presupuneți că al dvs. este singurul.

De exemplu, dacă treceți copii, compuneți potențialele valori existente:

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

Sau dacă folosiți proprietatea onDecorated

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

Acțiuni și efecte

Toate acțiunile Redux sunt disponibile pentru a fi gestionate prin intermediul middleware-ului și reductoarelor dvs. Pentru un exemplu, consultați pluginul de referință Hyperpower.

Efectele secundare apar în două forme fundamentale:

• Câteva acțiuni expediază alte acțiuni pe baza stării.
• Câteva acțiuni fac muncă asincronă comunicând prin canalul RPC cu procesul principal

În toate cazurile, efectul secundar este trecut ca și cheie effect în acțiune și este gestionat ulterior de către middleware-ul nostru.

Acest lucru înseamnă că puteți suprascrie, compune sau elimina complet efectele! Cu alte cuvinte, acesta este modul în care puteți schimba funcționalitatea sau comportamentul implicit al aplicației.

Ca exemplu, luați în considerare acțiunea pe care o folosim pentru a mări dimensiunea fontului atunci când apăsați 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 }); } }); };}

Terminalul subiacent

HyperTerminalul subiacent

Hyper obține o mare parte din viteza și funcționalitatea sa datorită puterii xterm.js

Additional APIs

Obiectele Electron app sunt extinse cu următoarele proprietăți:

Obiectele BrowserWindowElectron BrowserWindow sunt extinse cu următorii parametri:

Fereastra de redare este extinsă în mod similar cu:

Obiectul rpc este simetric între browser și procesul de randare. API-ul este același ca în Node.js, cu excepția faptului că nu admite decât un singur obiect ca și parametrii săi doar:

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

Exemplu de temă: Hyperyellow

Următoarea extensie modifică pur și simplu configurația pentru a adăuga CSS și culori galbene! Iată codul.

Temele sunt pur și simplu plugin-uri! Este necesar doar un singur cârlig, 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; } ` });}

Am preluat numele claselor inspectând termenul cu Devtools, pe care îl puteți declanșa din View -> Toggle Developer Tools. Când faceți acest lucru, observați că unele clase sunt generate automat și urmate de un nonce aleatoriu (de exemplu: term_13hv8io). Ignorați-le pe acelea: ele se schimbă la fiecare fereastră nouă!

Observați accentul pus pe a juca frumos cu alte extensii. Mai exact, creăm un nou obiect, extindem doar cheile care ne interesează și compunem CSS-ul pentru a păstra setările utilizatorului și ale altor autori:

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

Exemplu de extensie: Hyperpower

Următoarea extensie redă particule pe măsură ce se deplasează cursorul:

Să parcurgem codul său.
În primul rând, interceptăm acțiunea Redux SESSION_ADD_DATA. Puteți găsi lista completă a acțiunilor în depozit.

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

Observați că nu redistribuim acțiunea, ceea ce înseamnă că nu redăm niciodată ieșirea comenzii în terminal. În schimb, dispecerizăm o acțiune proprie, pe care o preluăm în uiReducerși mai târziu o mapăm:

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

Vrem apoi să decorăm componenta <Term> astfel încât să putem accesa caret-ul subiacent.

Dar, <Term>nu este un container în care să putem mapa props. Așa că folosim getTermProps pentru a trece proprietatea mai jos:

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

Extensia returnează apoi o componentă de ordin superior pentru a înveli <Term>. Observați că transmitem proprietatea onDecorated pentru a accesa componenta Term de bază și ref DOM a acesteia, iar proprietatea onCursorMove pentru a utiliza API-ul de cursor Hyper:

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

.