Hyper™

Installation

seneste version: 3.0.2

Projektets mål

Målet med projektet er at skabe en smuk og udvidelig oplevelse for brugere af kommandolinjeinterface, bygget på åbne webstandarder. I begyndelsen vil vores fokus primært være omkring hastighed, stabilitet og udvikling af den korrekte API for udvidelsesforfattere.

I fremtiden forventer vi, at fællesskabet vil komme med innovative tilføjelser for at forbedre, hvad der kunne være den enkleste, mest kraftfulde og velafprøvede grænseflade til produktivitet.

Udvidelser

Udvidelser er tilgængelige på npm. Vi opfordrer alle til at inkludere hyper i keywordsfeltet i package.json.

$ npm search hyper

Derpå redigerer du .hyper.js og tilføjer det til plugins

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

Hyper vil vise en meddelelse, når dine moduler er installeret til .hyper_plugins.

Keymaps

Alle kommandonøgler kan ændres. For at ændre dem skal du redigere .hyper.js og tilføje din ønskede ændring til keymaps.

Derefter vil Hyper ændre standarden med din brugerdefinerede ændring.

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

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

Default keymaps:

Konfiguration

Konfigurationssted

Note: config på ~/.hyper.js understøttes stadig, men vil blive ignoreret, hvis config i programmappen er til stede. Ellers vil den blive flyttet til programmappen ved første kørsel.

Det config objekt, der ses ovenfor i .hyper.js, indrømmer følgende

Udvidelses-API

Udvidelser er universelle Node.js-moduler, der indlæses af både Electron og rendererprocessen.

Udvidelsessystemet er designet omkring sammensætning af de API’er, som vi bruger til at bygge terminalen: React komponenter og Redux handlinger.

I stedet for at udsætte en brugerdefineret API-metode eller parameter for hvert muligt tilpasningspunkt, giver vi dig mulighed for at opsnappe og sammensætte hver eneste funktionalitet!

Den eneste viden, der derfor kræves for at udvide Hyper med succes, er den viden om de underliggende open source-biblioteker.

Du kan finde yderligere oplysninger om plugin-udvikling i Hyper-repositoriet.

Dit modul skal eksponere mindst en af disse metoder:

Modulindlæsning

Brugeren kan hot-loade og hot-reloade plugins ved at trykke på Command + R (refresh). Du bedes bestræbe dig på at lave plugins, der ikke kræver en fuldstændig genstart af programmet for at virke.

Mærk

Plugins, der påvirker `BrowserWindow`, vil have effekt på nye vinduer efter hot-reload.

I fremtiden vil vi måske gøre dette automatisk.

Når du udvikler, kan du tilføje dit plugin til .hyper_plugins/local og derefter angive det under localPlugins-arrayet i .hyper.js. Vi indlæser nye plugins:

• Periodisk (med få timers mellemrum)
• Når der foretages ændringer i konfigurationsfilen (plugins eller localPlugins)
• Når brugeren klikker på Plugins > Opdater alle nu

Processen med genindlæsning involverer

• Kørsel af npm prune og npm install i .hyper_plugins.
• Kørsel af require.cache i både electron- og rendererprocessen
• Invocation af on*-metoder på de eksisterende instanser og gengivelse af komponenter med de friske dekorationer på plads.

Plugins placering

Note: plugins på ~/.hyper_plugins understøttes stadig, men vil blive ignoreret, hvis plugins i programmappen er til stede. Ellers vil de blive flyttet til programmappen ved første kørsel.

Note: På hovedprocessen registreres plugins så hurtigt som muligt (vi fyrer onLoad). På browseren er det op til brugeren at udløse deres indlæsning ved at trykke på command+R. Vi giver brugeren kontrol over indlæsningen på denne måde for at forhindre, at de mister kritisk arbejde på grund af udvidelser, der nulstiller tilstanden eller ikke bevarer den korrekt.

Dekorering af komponenter

Vi giver dig mulighed for at levere en komponent af højere orden til hvert stykke af Hyper brugergrænsefladen.
Denne struktur er som følger:

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

Alle decorate*metoder modtager følgende referencer i et objekt, der overgives som den anden parameter:

Alle komponenterne accepterer følgende to egenskaber til at udvide deres markup:

Din komponent af højere orden kan levere en onDecoratedegenskab til den dekorerede komponent for at få en reference til dens instans.

Din Term-komponent af højere orden kan levere en onCursorMovehandler-egenskab, der kaldes, når markøren er flyttet, med en objektparameter, der repræsenterer dens relative position i forhold til Term-oprindelsen:

Vi opfordrer dig til at bevare kompatibiliteten med andre dekoratorer. Da mange kan indstilles, skal du ikke antage, at din er den eneste.

For eksempel, hvis du videregiver børn, skal du sammensætte potentielle eksisterende værdier:

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

Og hvis du bruger onDecorated property

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

Aktioner og effekter

Alle Redux-aktioner er tilgængelige, så du kan håndtere dem via din middleware og reducerer. Du kan finde et eksempel i Hyperpower-referenceplugin’et.

Sideeffekter forekommer i to grundlæggende former:

• Nogle handlinger afsender andre handlinger baseret på tilstand.
• Nogle handlinger udfører asynkront arbejde ved at kommunikere over RPC-kanalen til hovedprocessen

I alle tilfælde overføres sideeffekten som effect-nøglen i handlingen og håndteres senere af vores middleware.

Det betyder, at du kan overstyre, sammensætte eller helt fjerne effekter! Med andre ord er det sådan, du kan ændre appens standardfunktionalitet eller -adfærd.

Som eksempel kan du overveje den handling, vi bruger til at øge skriftstørrelsen, når du trykker på 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 }); } }); };}

Den underliggende terminal

Hyper opnår en stor del af sin hastighed og funktionalitet takket være xterm’s kraft.js

Tilføjede API’er

Electron app-objekterne er udvidet med følgende egenskaber:

Elektron BrowserWindow-objekter udvides med følgende parametre:

Renderer vinduer er på samme måde udvidet med:

Det rpc objekt er symmetrisk mellem browser og rendererproces. API’et er det samme som Node.js, med den undtagelse, at det kun tillader et enkelt objekt som sine parametre kun:

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

Eksempel på tema: Hyperyellow

Den følgende udvidelse ændrer blot konfigurationen for at tilføje CSS og gule farver! Her er koden.

Temaer er simpelthen plugins! Der er kun brug for én hook, 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; } ` });}

Jeg fik fat i klassens navne ved at inspicere udtrykket med Devtools, som du kan udløse fra View -> Toggle Developer Tools. Når du gør det, skal du bemærke, at nogle klasser genereres automatisk og efterfølges af en tilfældig nonce (f.eks.: term_13hv8io). Ignorer dem: de ændres med hvert nyt vindue!

Bemærk, at der lægges vægt på at spille pænt sammen med andre udvidelser. Konkret opretter vi et nyt objekt, udvider kun de nøgler, vi er interesseret i, og vi sammensætter CSS’en for at bevare brugerens indstilling og andre forfatteres indstilling:

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

Eksempel på udvidelse: Hyperpower

Følgende udvidelse renderer partikler, når caretten bevæger sig:

Lad os gå gennem dens kode.
Først opsnapper vi Redux-aktionen SESSION_ADD_DATA. Du kan finde den fulde liste over handlinger i repositoriet.

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

Bemærk, at vi ikke re-dispatcherer handlingen, hvilket betyder, at vi aldrig gengiver kommandosignalet til terminalen. I stedet afsender vi en egen handling, som vi griber i uiReducerog senere mapper:

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

Vi ønsker derefter at dekorere <Term>-komponenten, så vi kan få adgang til den underliggende caret.

Men <Term> er ikke en container, som vi kan mappe rekvisitter til. Så vi bruger getTermProps til at videregive egenskaben længere nede:

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

Udvidelsen returnerer derefter en komponent af højere orden til at indpakke <Term>. Bemærk, at vi videregiver onDecoratedegenskaben for at få adgang til basiskomponenten Term og dens DOM-ref, og onCursorMoveegenskaben for at bruge Hyper cursor API:

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