Hyper™

Installation

senaste versionen: 3.0.2

Projektets mål

Projektets mål är att skapa en vacker och utbyggbar upplevelse för användare av kommandoradsgränssnittet, byggd på öppna webbstandarder. I början kommer vårt fokus främst att ligga på snabbhet, stabilitet och utveckling av rätt API för tilläggsförfattare.

I framtiden räknar vi med att gemenskapen kommer att komma med innovativa tillägg för att förbättra vad som kan vara det enklaste, mest kraftfulla och välbeprövade gränssnittet för produktivitet.

Utvidgningar

Utvidgningar är tillgängliga på npm. Vi uppmuntrar alla att inkludera hyper i keywordsfältet i package.json.

$ npm search hyper

Därefter redigerar du .hyper.js och lägger till den i plugins

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

Hyper kommer att visa en avisering när dina moduler installeras i .hyper_plugins.

Nyckelknapparna

Alla kommandotangenter kan ändras. För att ändra dem redigerar du .hyper.js och lägger till den önskade ändringen i keymaps.

Sedan ändrar Hyper standardinställningen med din anpassade ändring.

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

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

Default keymaps:

Configuration

Config location

Note: config på ~/.hyper.js stöds fortfarande, men kommer att ignoreras om config finns i programkatalogen. I annat fall kommer den att flyttas till programkatalogen vid första körningen.

Objektet config som ses ovan i .hyper.js medger följande

Extensions API

Extensions är universella Node.js-moduler som laddas av både Electron och renderprocessen.

Utvidgningssystemet är utformat kring kompositionen av de API:er vi använder för att bygga terminalen: React komponenter och Redux åtgärder.

Istället för att exponera en anpassad API-metod eller parameter för varje möjlig anpassningspunkt låter vi dig fånga upp och komponera varje bit av funktionalitet!

Den enda kunskap som därför krävs för att framgångsrikt utöka Hyper är den om dess underliggande open source-bibliotek.

Du kan hitta ytterligare information om utveckling av insticksprogram i Hyper repository.

Din modul måste exponera minst en av dessa metoder:

Modulladdning

Användaren kan varmladda och varmladda insticksmoduler genom att trycka på Command + R (uppdatera). Sträva efter att göra plugins som inte kräver en fullständig omstart av programmet för att fungera.

Meddelande

Plugins som påverkar `BrowserWindow` kommer att ha effekt på nya fönster efter hot-reload.

I framtiden kommer vi kanske att göra det här automatiskt.

När du utvecklar kan du lägga till ditt plugin i .hyper_plugins/local och sedan specificera det under arrayen localPlugins i .hyper.js. Vi laddar nya insticksprogram:

• Periodiskt (med några timmars mellanrum)
• När ändringar görs i konfigurationsfilen (plugins eller localPlugins)
• När användaren klickar på Insticksprogram > Uppdatera alla nu

Processen för omladdning involverar

• Körning av npm prune och npm install i .hyper_plugins.
• Körning av require.cache i både elektron- och renderingsprocessen
• Invokering av on*-metoder på de befintliga instanserna och återgivning av komponenterna med de färska dekorationerna på plats.

Plugins location

Note: plugins på ~/.hyper_plugins stöds fortfarande, men kommer att ignoreras om plugins finns i programkatalogen. I annat fall kommer de att flyttas till programkatalogen vid första körningen.

Anmärkning: På huvudprocessen registreras plugins så snart som möjligt (vi avfyrar onLoad). På webbläsaren är det upp till användaren att utlösa deras laddning genom att trycka på command+R. Vi ger användaren kontroll över laddningen på detta sätt för att förhindra att de förlorar kritiskt arbete genom tillägg som återställer tillståndet eller inte bevarar det korrekt.

Dekorera komponenter

Vi ger dig möjlighet att tillhandahålla en komponent av högre ordning för varje del av Hyper användargränssnittet.
Dess struktur är följande:

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

Alla decorate*metoder tar emot följande referenser i ett objekt som överlämnats som andra parameter:

Alla komponenter accepterar följande två egenskaper för att utöka deras markeringar:

Din högre ordningskomponent kan tillhandahålla en onDecoratedegenskap till den dekorerade komponenten för att få en referens till dess instans.

Din högre komponent Term kan tillhandahålla en onCursorMovehandleregenskap som anropas när markören har flyttats med en objektparameter som representerar dess relativa position i förhållande till Term-ursprunget:

Vi uppmuntrar dig att upprätthålla kompatibilitet med andra dekoratorer. Eftersom många kan ställas in ska du inte anta att din är den enda.

Till exempel, om du lämnar över barn, komponera potentiella befintliga värden:

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

Och om du använder onDecorated property

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

Actions and Effects

Alla Redux-åtgärder finns tillgängliga för dig att hantera via dina middleware och reducers. Ett exempel finns i referenspluginet Hyperpower.

Sidoeffekter förekommer i två grundläggande former:

• Vissa åtgärder skickar andra åtgärder baserat på tillstånd.
• Vissa åtgärder utför asynkront arbete genom att kommunicera över RPC-kanalen till huvudprocessen

I alla fall överförs sidoeffekten som effect-nyckel i åtgärden och hanteras senare av vår middleware.

Detta innebär att du kan åsidosätta, komponera eller helt eliminera effekter! Med andra ord är det så här du kan ändra appens standardfunktionalitet eller beteende.

Som exempel kan du tänka på den åtgärd vi använder för att öka teckensnittsstorleken när du trycker 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 underliggande terminalen

Hyper uppnår en stor del av sin snabbhet och funktionalitet tack vare kraften i xterm.js

Tillkommande API:er

Electron app-objekten utökas med följande egenskaper:

Electron BrowserWindow-objekt utökas med följande parametrar:

Rendererfönster utökas på liknande sätt med:

Det rpc objektet är symmetriskt mellan webbläsare och renderprocess. API:et är detsamma som i Node.js, med undantag för att det bara tillåter ett enda objekt som parametrar:

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

Exempel på tema: Hyperyellow

Följande tillägg ändrar helt enkelt konfigurationen för att lägga till CSS och gula färger! Här är koden.

Teman är helt enkelt plugins! Endast en hook, decorateConfig, behövs:

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

Jag tog klassnamnen genom att inspektera termen med Devtools, som du kan utlösa från View -> Toggle Developer Tools. När du gör det, lägg märke till att vissa klasser genereras automatiskt och följs av en slumpmässig nonce (t.ex.: term_13hv8io). Ignorera dessa: de ändras med varje nytt fönster!

Märk betoningen på att spela trevligt med andra tillägg. Vi skapar ett nytt objekt, utökar endast de nycklar som vi är intresserade av och komponerar CSS för att bevara användarens och andra författares inställningar:

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

Exempel på ett tillägg: Hyperpower

Följande tillägg renderar partiklar när careten rör sig:

Vi går igenom koden.
Först avlyssnar vi Redux-åtgärden SESSION_ADD_DATA. Du kan hitta en fullständig lista över åtgärder i repository.

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 att vi inte återdistribuerar åtgärden, vilket innebär att vi aldrig återger kommandots utdata till terminalen. Istället skickar vi en egen åtgärd som vi hämtar i uiReduceroch senare mappar:

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 vill sedan dekorera <Term>-komponenten så att vi kan få tillgång till den underliggande careten.

Hur som helst är <Term> inte en container som vi kan mappa rekvisita till. Så vi använder getTermProps för att skicka egenskapen längre ner:

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

Utvidgningen returnerar sedan en komponent av högre ordning för att omsluta <Term>. Observera att vi skickar onDecoratedegenskapen för att få tillgång till baskomponenten Term och dess DOM-ref, och onCursorMoveegenskapen för att använda Hyper cursor API:

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

.