Hyper™

Telepítés

legújabb verzió: 3.0.2

Projekt céljai

A projekt célja egy szép és bővíthető, nyílt webes szabványokra épülő felhasználói élmény létrehozása a parancssori felület felhasználói számára. Kezdetben elsősorban a sebességre, a stabilitásra és a megfelelő API fejlesztésére összpontosítunk a kiterjesztések szerzői számára.

A jövőben arra számítunk, hogy a közösség innovatív kiegészítésekkel fog előállni, hogy továbbfejlesszük a termelékenység talán legegyszerűbb, legerősebb és legjobban tesztelt felületét.

Kiterjesztések

A kiterjesztések elérhetőek az npm-en. Mindenkit arra bátorítunk, hogy a keywordsmezőbe a package.json-ben írja be a hyper-öt.

$ npm search hyper

Az .hyper.js szerkesztése és a plugins

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

Hyper hozzáadása után a .hyper_plugins-ban megjelenik egy értesítés, amikor a modulok telepítése megtörténik.

Keymaps

Minden parancskulcs módosítható. A módosításukhoz szerkessze a .hyper.js és adja hozzá a kívánt módosítást a keymaps.

Ezután a Hyper megváltoztatja az alapértelmezettet az egyéni módosítással.

Példa: 'window:devtools': 'Cmd+Alt+O'

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

Alapértelmezett billentyűkártyák:

Konfiguráció

Konfiguráció helye

Figyelem! A ~/.hyper.js alatti config továbbra is támogatott, de figyelmen kívül marad, ha a config az alkalmazáskönyvtárban van. Ellenkező esetben az első futtatáskor átkerül az alkalmazáskönyvtárba.

A fentebb .hyper.js-ban látható config objektum a következőket ismeri el

Bővítmények API

A bővítmények univerzális Node.js modulok, amelyeket az Electron és a renderelő folyamat egyaránt betölt.

A bővítményrendszer a terminál felépítéséhez használt API-k kompozíciójára épül: React komponensek és Redux akciók.

Ahelyett, hogy minden lehetséges testreszabási ponthoz egyéni API-metódust vagy paramétert tárnánk fel, lehetővé tesszük, hogy a funkcionalitás minden egyes bitjét elfogjuk és összeállítsuk!

Az egyetlen tudás, ami ezért szükséges a Hyper sikeres bővítéséhez, az a mögöttes nyílt forráskódú könyvtárak ismerete.

A Hyper adattárban további részleteket talál a bővítményfejlesztésről.

A modulodnak legalább egy ilyen metódust ki kell tennie:

Modulok betöltése

A felhasználó a Command + R (frissítés) billentyűkombináció megnyomásával tudja a bővítményeket gyors- és visszatölteni. Kérjük, törekedjen arra, hogy olyan pluginokat készítsen, amelyek működéséhez nem szükséges az alkalmazás teljes újraindítása.

Figyelem

A `BrowserWindow`-t érintő pluginok a hot-reload után az új ablakokra is hatással lesznek.

A jövőben ezt talán automatikusan megtesszük.

A fejlesztés során a pluginját hozzáadhatja a .hyper_plugins/local-hoz, majd a localPlugins tömb alatt a .hyper.js-ban megadhatja. Új bővítményeket töltünk be:

• Periódikusan (néhány óránként)
• Amikor a konfigurációs fájlban (plugins vagy localPlugins)
• Amikor a felhasználó a Plugins > Update all now

Az újratöltés folyamata magában foglalja

• A npm prune és npm install futtatását a .hyper_plugins-ban.
• A require.cache futtatása mind az elektronban, mind a renderelési folyamatban
• A on* metódusok meghívása a meglévő példányokon és a komponensek újrarendezése a friss díszítésekkel a helyükön.

Plugins helye

Figyelem! A ~/.hyper_plugins alatti pluginek továbbra is támogatottak, de figyelmen kívül maradnak, ha az alkalmazáskönyvtárban lévő pluginek jelen vannak. Ellenkező esetben az első futtatáskor átkerülnek az alkalmazáskönyvtárba.

Megjegyzés: a főfolyamaton a pluginek a lehető leghamarabb regisztrálásra kerülnek (onLoad tüzelünk). A böngészőn a felhasználó feladata, hogy a command+R billentyűkombináció megnyomásával indítsa el a betöltésüket. Azért adjuk ily módon a felhasználó kezébe a betöltés irányítását, hogy megakadályozzuk, hogy kritikus munkát veszítsen az állapotot visszaállító vagy azt nem megfelelően megőrző bővítmények miatt.

Komponensek díszítése

Megadjuk a lehetőséget, hogy a Hyper felhasználói felület minden darabjához egy magasabb rendű komponenst adjunk.
Szerkezete a következő:

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

Minden decorate* metódus a következő hivatkozásokat kapja a második paraméterként átadott objektumban:

Minden komponens elfogadja a következő két tulajdonságot a jelölésük bővítéséhez:

A magasabb rendű komponens megadhat egy onDecoratedtulajdonságot a díszített komponensnek, hogy hivatkozást kapjon a példányára.

A Term magasabb rendű komponensed megadhat egy onCursorMovehandler tulajdonságot, amelyet akkor kell meghívni, amikor a kurzor elmozdult egy objektumparaméterrel, amely a Term origóhoz viszonyított relatív pozícióját mutatja:

Az egyéb dekorátorokkal való kompatibilitás fenntartását javasoljuk. Mivel sokan beállíthatók, ne feltételezd, hogy a tiéd az egyetlen.

Ha például gyerekeket adsz át, állítsd össze a lehetséges meglévő értékeket:

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

Vagy ha a onDecorated tulajdonságot

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

Actions and Effects

A Redux összes akciója elérhető számodra, hogy a middleware-en és a reduktorokon keresztül kezeld. Egy példát a Hyperpower referencia pluginban találsz.

A mellékhatások két alapvető formában fordulnak elő:

• Egyik akció az állapot alapján más akciókat küld el.
• Egyes akciók aszinkron munkát végeznek az RPC csatornán keresztül kommunikálva a főfolyamat felé

Minden esetben a mellékhatás effect kulcsként kerül átadásra az akcióban, és később a middleware-ünk kezeli.

Ez azt jelenti, hogy felülbírálhatjuk, összeállíthatjuk vagy teljesen kiiktathatjuk a hatásokat! Más szóval, így változtathatjuk meg az alkalmazás alapértelmezett funkcionalitását vagy viselkedését.

Egy példaként nézzük meg azt az akciót, amellyel a Command+= megnyomásakor növeljük a betűméretet:

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

A mögöttes terminál

Hyper sebességének és funkcionalitásának nagy részét az xterm erejének köszönhetően éri el.js

Kiegészítő API-k

Az Electron app objektumok a következő tulajdonságokkal bővülnek:

Az BrowserWindowElektron BrowserWindow objektumok a következő paraméterekkel bővülnek:

A renderelő ablakok hasonlóan bővülnek:

A rpc objektum szimmetrikus a böngésző és a renderelő folyamat között. Az API ugyanaz, mint a Node.js, azzal a különbséggel, hogy paraméterként csak egyetlen objektumot fogad be:

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

Példatéma: Hyperyellow

A következő kiterjesztés egyszerűen módosítja a configot, hogy CSS-t és sárga színeket adjon hozzá! Itt a kód.

A témák egyszerűen bővítmények! Csak egy kampó, a decorateConfigszükséges:

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

Az osztályneveket a Devtools segítségével a kifejezés vizsgálatával szereztem meg, amit a View -> Toggle Developer Tools-ről indíthatsz. Ha ezt megteszed, vedd észre, hogy néhány osztály automatikusan generálódik, és egy véletlenszerű nonce követi (pl.: term_13hv8io). Ne törődj ezekkel: minden új ablakkal változnak!

Észrevehető, hogy a hangsúly a más kiterjesztésekkel való jó együttműködésen van. Pontosabban, létrehozunk egy új objektumot, csak a minket érdeklő kulcsokat bővítjük, és úgy állítjuk össze a CSS-t, hogy megmaradjon a felhasználó és más szerzők beállítása:

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

Példa bővítmény: Hyperpower

A következő kiterjesztés a caret mozgása közben rendereli a részecskéket:

Sétáljunk végig a kódján.
Először is, elfogjuk a Redux SESSION_ADD_DATA műveletét. Az akciók teljes listáját megtalálod az adattárban.

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

Figyeljük meg, hogy nem küldjük vissza az akciót, ami azt jelenti, hogy soha nem adjuk vissza a parancs kimenetét a terminálra. Ehelyett egy saját akciót küldünk el, amelyet a uiReducer-ben ragadunk meg, és később leképezünk:

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

Ezután a <Term> komponenst akarjuk díszíteni, hogy hozzáférhessünk a mögöttes carethez.

A <Term> azonban nem egy konténer, amelyhez leképezhetjük a kellékeket. Ezért a getTermProps segítségével továbbítjuk a tulajdonságot tovább:

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

A kiterjesztés ezután egy magasabb rendű komponenst ad vissza a <Term> csomagolására. Vegyük észre, hogy átadjuk a onDecoratedtulajdonságot az alap Term komponens és annak DOM ref eléréséhez, és a onCursorMove tulajdonságot a Hyper cursor API használatához:

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