Hyper™

Asennus

uusin versio: 3.0.2

Projektin tavoitteet

Projektin tavoitteena on luoda komentorivin käyttöliittymäkäyttäjiä varten avointen web-standardien varaan rakentuva kaunis ja laajennettavissa oleva käyttökokemus. Alussa keskitymme ensisijaisesti nopeuteen, vakauteen ja oikean API:n kehittämiseen laajennusten tekijöille.

Tulevaisuudessa odotamme yhteisön keksivän innovatiivisia lisäyksiä, jotka parantavat sitä, mikä voisi olla yksinkertaisin, tehokkain ja testatuin tuottavuuden käyttöliittymä.

Laajennukset

Laajennukset ovat saatavilla npm:ssä. Kannustamme kaikkia sisällyttämään hyper keywords-kenttään package.json.

$ npm search hyper

Muokkaa sitten .hyper.js ja lisää se plugins

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

Hypernäyttää ilmoituksen, kun moduulisi asennetaan .hyper_plugins.

Keymaps

Kaikki komentoavainten avaimet voidaan muuttaa. Jos haluat muuttaa niitä, muokkaa .hyper.js ja lisää haluamasi muutos kohtaan keymaps.

Sitten Hyper muuttaa oletusarvon mukautetulla muutoksellasi.

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

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

Oletusnäppäinkartat:

Konfiguraatio

Konfiguraation sijainti

Huom: config osoitteessa ~/.hyper.js tuetaan edelleen, mutta se jätetään huomiotta, jos config on sovellushakemistossa. Muussa tapauksessa se siirretään sovellushakemistoon ensimmäisellä ajokerralla.

Yllä .hyper.js nähty config-objekti myöntää seuraavaa

Laajennusten API

Laajennukset ovat universaaleja Node.js-moduuleja, joita sekä Electron että renderöintiprosessi lataavat.

Laajennusten järjestelmä perustuu päätelaitteen rakentamiseen käyttämiemme API-rajapintojen koostamiseen: React-komponentit ja Redux-toiminnot.

Sen sijaan, että paljastaisimme mukautetun API-metodin tai -parametrin jokaiselle mahdolliselle muokkauskohdalle, annamme sinulle mahdollisuuden siepata ja koota jokaisen toiminnallisuuden palan!

Ainut tietämys, jota siis vaaditaan menestyksekkäästi laajentaaksesi Hyper:tä, on sen perustana olevien avoimeen lähdekoodiin perustuvien kirjastojen tuntemus.

Lisätietoja laajennuskehityksestä löydät Hyper-tietovarastosta.

Moduulisi on paljastettava ainakin yksi näistä metodeista:

Moduulien lataaminen

Käyttäjä voi hot-loadata ja hot-reloadata liitännäisiä painamalla komento + R (refresh). Pyydämme sinua pyrkimään tekemään liitännäisiä, jotka eivät vaadi sovelluksen täydellistä uudelleenkäynnistystä toimiakseen.

Huomautus

Liitännäiset, jotka vaikuttavat `BrowserWindow` -ikkunaan, vaikuttavat uusiin ikkunoihin hot-reloadin jälkeen.

Tulevaisuudessa saatamme tehdä tämän automaattisesti.

Kehittäessäsi liitännäisesi voit lisätä liitännäisesi .hyper_plugins/local:een ja määritellä sen sitten localPlugins-massan alle .hyper.js:ssa. Latailemme uusia lisäosia:

• Jaksoittain (muutaman tunnin välein)
• Kun konfiguraatiotiedostoon tehdään muutoksia (plugins tai localPlugins)
• Kun käyttäjä klikkaa Plugins > Update all now

Latausprosessi käsittää

• Käynnistyksen npm prune ja npm install kohdassa .hyper_plugins.
• Ajetaan require.cache sekä elektronissa että renderöintiprosessissa
• Kutsutaan on*-metodeja olemassa oleviin instansseihin ja renderöidään komponentit uudelleen tuoreilla koristeilla paikoilleen.

Pluginien sijainti

Huom: ~/.hyper_plugins liitännäisiä tuetaan edelleen, mutta ne jätetään huomiotta, jos liitännäisiä on sovellushakemistossa. Muussa tapauksessa ne siirretään sovellushakemistoon ensimmäisellä ajokerralla.

Huomautus: pääprosessissa liitännäiset rekisteröidään mahdollisimman pian (laukaisemme onLoad). Selaimessa käyttäjän tehtävänä on käynnistää niiden lataus painamalla komento+R. Laitamme käyttäjän hallitsemaan latausta tällä tavalla, jotta hän ei menetä kriittistä työtä laajennuksilla, jotka nollaavat tilan tai eivät säilytä sitä oikein.

Komponenttien koristelu

Tarjoamme sinulle mahdollisuuden tarjota korkeamman asteen komponentti jokaiselle Hyper käyttöliittymän osalle.
Sen rakenne on seuraava:

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

Kaikki decorate*metodit saavat toisena parametrina välitettävässä objektissa seuraavat viittaukset:

Kaikki komponentit hyväksyvät seuraavat kaksi ominaisuutta, joilla niiden merkintää voidaan laajentaa:

Ylemmän asteinen komponentti voi toimittaa onDecoratedominaisuuden koristellulle komponentille saadakseen viittauksen sen instanssiin.

Term ylemmän asteen komponenttisi voi toimittaa onCursorMovehandler-ominaisuuden, jota kutsutaan, kun kursori on siirtynyt objektin parametrilla, joka edustaa sen suhteellista sijaintia Term-alkuperään nähden:

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

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

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

Electron BrowserWindow -objekteja laajennetaan seuraavilla parametreilla:

Renderöinti-ikkunoita laajennetaan vastaavalla tavalla:

Objekti rpc on symmetrinen selaimen ja renderöintiprosessin välillä. API on sama kuin Node.js:ssä, sillä erotuksella, että se sallii vain yhden objektin vain parametreina:

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

Esimerkkiteema: Hyperyellow

Seuraava laajennus yksinkertaisesti muuttaa konfiguraatiota lisäämällä CSS:n ja keltaiset värit! Tässä on koodi.

Teemat ovat yksinkertaisesti lisäosia! Tarvitaan vain yksi koukku, 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; } ` });}

Nappasin luokkien nimet tarkastelemalla termiä Devtoolsilla, jonka voit käynnistää View -> Toggle Developer Tools. Kun teet niin, huomaa, että jotkut luokat luodaan automaattisesti ja niitä seuraa satunnainen nonce (esim.: term_13hv8io). Jätä ne huomiotta: ne muuttuvat jokaisen uuden ikkunan myötä!

Huomaa, että korostetaan mukavuutta muiden laajennusten kanssa. Tarkemmin sanottuna luomme uuden objektin, laajennamme vain ne avaimet, joista olemme kiinnostuneita, ja koostamme CSS:n niin, että käyttäjän ja muiden tekijöiden asetukset säilyvät:

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

Esimerkki laajennuksesta: Hyperpower

Seuraava laajennus renderöi hiukkasia, kun caret liikkuu:

Kävellään sen koodi läpi.
Aluksi sieppaamme Redux-toiminnon SESSION_ADD_DATA. Löydät koko listan actioneista arkistosta.

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

Huomaa, että emme lähetä actionia uudelleen, mikä tarkoittaa, ettemme koskaan renderöi komennon tulosta terminaaliin. Sen sijaan lähetämme oman actionin, jonka nappaamme uiReducerja myöhemmin kartoitamme:

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

Tahdomme sitten koristella <Term>-komponentin niin, että pääsemme käsiksi taustalla olevaan caretiin.

Mutta <Term> ei ole kontti, johon voimme kartoittaa propsit. Niinpä käytämme getTermProps:tä siirtääksemme ominaisuuden edelleen:

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

Laajennus palauttaa sitten korkeamman asteen komponentin, joka kietoo <Term>. Huomaa, että välitämme onDecoratedominaisuuden päästäksemme käsiksi Term-peruskomponenttiin ja sen DOM-referenssiin sekä onCursorMove-ominaisuuden käyttääksemme Hyper cursor API:

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

.