Hyper™

Installatie

laatste versie: 3.0.2

Projectdoelen

Het doel van het project is om een mooie en uitbreidbare ervaring te maken voor gebruikers van de commandoregel interface, gebouwd op open web standaarden. In het begin zal onze focus vooral liggen op snelheid, stabiliteit en de ontwikkeling van de juiste API voor extensie-auteurs.

In de toekomst verwachten we dat de gemeenschap met innovatieve toevoegingen zal komen om te verbeteren wat de eenvoudigste, krachtigste en goed geteste interface voor productiviteit zou kunnen zijn.

Extensies

Extensies zijn beschikbaar op npm. We moedigen iedereen aan om hyper op te nemen in het keywords-veld in package.json.

$ npm search hyper

Daarna bewerkt u .hyper.js en voegt u het toe aan plugins

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

Hyper zal een melding tonen wanneer uw modules zijn geïnstalleerd op .hyper_plugins.

Keymaps

Alle commando toetsen kunnen worden gewijzigd. Om ze te veranderen, bewerkt u .hyper.js en voegt u de gewenste verandering toe aan keymaps.

Dan zal Hyper de standaard veranderen met uw aangepaste verandering.

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

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

Standaard keymaps:

Configuratie

Config-locatie

Note: config op ~/.hyper.js wordt nog steeds ondersteund, maar zal worden genegeerd, indien config in de applicatiedirectory aanwezig is. Anders wordt deze bij de eerste run verplaatst naar de applicatiedirectory.

Het config-object dat hierboven in .hyper.js werd gezien, geeft het volgende toe

Extensions API

Extensions zijn universele Node.js-modules die zowel door Electron als door het renderer-proces worden geladen.

Het extensiesysteem is ontworpen rond de samenstelling van de API’s die we gebruiken om de terminal te bouwen: React componenten en Redux acties.

In plaats van het blootstellen van een aangepaste API-methode of parameter voor elk mogelijk aanpassingspunt, stellen we u in staat om elk beetje functionaliteit te onderscheppen en samen te stellen!

De enige kennis die daarom nodig is om Hyper met succes uit te breiden, is die van de onderliggende open source bibliotheken.

Extra details over plugin-ontwikkeling vindt u in de Hyper repository.

Uw module moet ten minste een van deze methoden blootleggen:

Modules laden

De gebruiker kan plugins hot-loaden en hot-herladen door op Command + R (vernieuwen) te drukken. Probeer plugins te maken die niet een complete herstart van de applicatie vereisen om te werken.

Notice

Plugins die het `BrowserWindow` beinvloeden zullen het effect op nieuwe windows na hot-reload.

In de toekomst zullen we dit misschien automatisch doen.

Wanneer u ontwikkelt, kunt u uw plugin toevoegen aan .hyper_plugins/local en deze dan specificeren onder de localPlugins array in .hyper.js. We laden nieuwe plugins:

• Periodiek (om de paar uur)
• Als er wijzigingen worden aangebracht in het configuratiebestand (plugins of localPlugins)
• Als de gebruiker klikt op Plugins > Nu alles bijwerken

Het proces van herladen omvat

• Het uitvoeren van npm prune en npm install in .hyper_plugins.
• Herlopen van require.cache in zowel het elektron als het renderer proces
• Invoceren van on* methoden op de bestaande instanties en het opnieuw renderen van componenten met de verse versieringen op hun plaats.

Plugins location

Note: plugins op ~/.hyper_plugins worden nog steeds ondersteund, maar worden genegeerd als er plugins in de applicatiedirectory staan. Anders worden ze bij de eerste run verplaatst naar de applicatiedirectory.

Note: op het hoofdproces worden plugins zo snel mogelijk geregistreerd (we vuren onLoad af). Op de browser, is het aan de gebruiker om hun lading te triggeren door op commando+R te drukken. We geven de gebruiker op deze manier de controle over het laden om te voorkomen dat hij kritiek werk verliest door extensies die de status resetten of niet correct bewaren.

Decoreren van componenten

We geven u de mogelijkheid om een hogere orde component te leveren voor elk stuk van de Hyper UI.
De structuur is als volgt:

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

Alle decorate* methoden ontvangen de volgende referenties in een object dat als tweede parameter wordt doorgegeven:

Alle componenten accepteren de volgende twee eigenschappen om hun opmaak uit te breiden:

Uw hogere orde component kan een onDecoratedeigenschap aan de gedecoreerde component leveren om een verwijzing naar zijn instantie te krijgen.

Uw hogere orde Term-component kan een onCursorMovehandler eigenschap leveren die wordt aangeroepen wanneer de cursor is verplaatst met een objectparameter die de relatieve positie ten opzichte van de Term oorsprong weergeeft:

We moedigen u aan om compatibel te blijven met andere decorators. Aangezien er veel kunnen worden ingesteld, moet u er niet van uitgaan dat de uwe de enige is.

Als u bijvoorbeeld kinderen doorgeeft, stel dan mogelijk bestaande waarden samen:

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

Of als u onDecorated property

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

Acties en effecten

Alle Redux-acties zijn beschikbaar voor u om af te handelen via uw middleware en reducers. Voor een voorbeeld, zie de Hyperpower referentie plugin.

Side effects komen voor in twee fundamentele vormen:

• Sommige acties dispatchen andere acties op basis van state.
• Sommige acties doen async werk door te communiceren via het RPC kanaal naar het hoofdproces

In alle gevallen wordt het neveneffect doorgegeven als de effect sleutel in de actie en later afgehandeld door onze middleware.

Dit betekent dat je effecten kunt overriden, samenstellen of volledig elimineren! Met andere woorden, dit is hoe je de standaard functionaliteit of het gedrag van de app kunt veranderen.

Als voorbeeld, beschouw de actie die we gebruiken om de lettergrootte te vergroten wanneer u op Command+= drukt:

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

De onderliggende terminal

Hyper bereikt veel van zijn snelheid en functionaliteit dankzij de kracht van xterm.js

Aanvullende API’s

De Electron app objecten zijn uitgebreid met de volgende eigenschappen:

Electron BrowserWindow objecten worden uitgebreid met de volgende parameters:

Renderer-vensters worden op soortgelijke wijze uitgebreid met:

Het rpc object is symmetrisch tussen browser en renderer proces. De API is hetzelfde als Node.js, met de uitzondering dat het slechts een enkel object toelaat als zijn parameters:

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

Voorbeeld thema: Hyperyellow

De volgende uitbreiding verandert gewoon de config om CSS en gele kleuren toe te voegen! Hier is de code.

Thema’s zijn gewoon plugins! Slechts één haak, decorateConfig is nodig:

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

Ik heb de class namen gepakt door de term te inspecteren met Devtools, die je kunt triggeren vanuit View -> Toggle Developer Tools. Als je dat doet, merk dan op dat sommige klassen automatisch gegenereerd worden en gevolgd worden door een willekeurige nonce (b.v.: term_13hv8io). Negeer deze: ze veranderen met elk nieuw venster!

Merk de nadruk op het aardig spelen met andere extensies op. Om precies te zijn, we maken een nieuw object, breiden alleen de sleutels uit waarin we geïnteresseerd zijn, en we stellen de CSS samen om de instelling van de gebruiker en die van andere auteurs te behouden:

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

Voorbeeld extensie: Hyperpower

De volgende uitbreiding rendert deeltjes als de caret beweegt:

Laten we eens door de code lopen.
Eerst onderscheppen we de Redux actie SESSION_ADD_DATA. U kunt de volledige lijst van acties in de repository vinden.

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

Merk op dat we de actie niet re-dispatchen, wat betekent dat we nooit de uitvoer van het commando naar de terminal renderen. In plaats daarvan sturen we een eigen actie, die we in de uiReducer pakken en later in kaart brengen:

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

We willen vervolgens de <Term> component decoreren, zodat we toegang hebben tot de onderliggende caret.

Hoewel, <Term> geen container is waar we props aan kunnen toewijzen. Dus gebruiken we getTermProps om de eigenschap verder naar beneden door te geven:

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

De extensie geeft dan een hogere orde component om <Term> te omhullen. Merk op dat we de onDecorated eigenschap doorgeven om toegang te krijgen tot de basis Term component en zijn DOM ref, en de onCursorMove eigenschap om de Hyper cursor API te gebruiken:

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