Hyper™

Instalace

nejnovější verze: 3.0.2

Cíle projektu

Cílem projektu je vytvořit krásné a rozšiřitelné prostředí pro uživatele rozhraní příkazového řádku, postavené na otevřených webových standardech. Zpočátku se zaměříme především na rychlost, stabilitu a vývoj správného API pro autory rozšíření.

V budoucnu předpokládáme, že komunita přijde s inovativními doplňky, které vylepší to, co by mohlo být nejjednodušším, nejvýkonnějším a nejosvědčenějším rozhraním pro produktivitu.

Rozšíření

Rozšíření jsou k dispozici na npm. Doporučujeme všem, aby do pole keywords v package.json zahrnuli hyper.

$ npm search hyper

Poté upravte .hyper.js a přidejte jej do plugins

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

Hyper zobrazí se oznámení, když se vaše moduly nainstalují do .hyper_plugins.

Klíčové mapy

Všechny příkazové klíče lze změnit. Chcete-li je změnit, upravte .hyper.js a přidejte požadovanou změnu do keymaps.

Pak Hyper změní výchozí s vaší vlastní změnou.

Příklad: 'window:devtools': 'Cmd+Alt+O'

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

Výchozí mapy kláves:

Konfigurace

Umístění konfigurace

Pozn: Konfigurace na ~/.hyper.js je stále podporována, ale bude ignorována, pokud je konfigurace v adresáři aplikace přítomna. V opačném případě bude při prvním spuštění přesunut do adresáře aplikace.

Objekt config viděný výše v .hyper.js přiznává následující

Rozšíření API

Rozšíření jsou univerzální moduly Node.js načítané procesem Electron i vykreslovačem.

Systém rozšíření je navržen na základě kompozice rozhraní API, které používáme k sestavení terminálu: React komponenty a Redux akce.

Místo toho, abychom pro každý možný bod přizpůsobení vystavovali vlastní metodu nebo parametr API, umožňujeme vám zachytit a složit každý kousek funkčnosti!

Jediné znalosti, které jsou proto nutné k úspěšnému rozšíření Hyper, jsou znalosti jeho základních open source knihoven.

Další podrobnosti o vývoji zásuvných modulů najdete v repozitáři Hyper.

Váš modul musí vystavit alespoň jednu z těchto metod:

Načítání modulů

Uživatel může hot-load a hot-reload zásuvných modulů provést stisknutím kombinace Command + R (refresh). Snažte se prosím vytvářet zásuvné moduly, které nevyžadují kompletní restart aplikace, aby fungovaly.

Upozornění

Zásuvné moduly ovlivňující `BrowserWindow` se projeví na nových oknech po hot-reloadu.

V budoucnu bychom to mohli dělat automaticky.

Při vývoji můžete přidat svůj zásuvný modul do .hyper_plugins/local a pak jej zadat v poli localPlugins v .hyper.js. Nové zásuvné moduly načítáme:

• Periodicky (každých několik hodin)
• Při změnách v konfiguračním souboru (plugins nebo localPlugins)
• Když uživatel klikne na Zásuvné moduly > Aktualizovat vše nyní

Proces načítání zahrnuje

• Spuštění npm prune a npm install v .hyper_plugins.
• Spuštění require.cache v procesu elektronu i vykreslovače
• Vyvolání metod on* na stávajících instancích a opětovné vykreslení komponent s čerstvými dekoracemi na místě.

Umístění modulů

Pozn: zásuvné moduly na ~/.hyper_plugins jsou stále podporovány, ale budou ignorovány, pokud jsou zásuvné moduly v adresáři aplikace přítomny. V opačném případě budou při prvním spuštění přesunuty do adresáře aplikace.

Poznámka: v hlavním procesu se zásuvné moduly registrují co nejdříve (vypálíme onLoad). V prohlížeči je na uživateli, aby jejich načítání vyvolal stisknutím kombinace příkazů Command+R. Tímto způsobem dáváme uživateli kontrolu nad načítáním, aby nepřišel o kritickou práci kvůli rozšířením, která resetují stav nebo jej nezachovávají správně.

Dekorace komponent

Dáváme možnost poskytnout komponentu vyššího řádu pro každý kus Hyper uživatelského rozhraní.
Její struktura je následující:

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

Všechny metody decorate* obdrží v objektu předaném jako druhý parametr následující odkazy:

Všechny komponenty akceptují následující dvě vlastnosti, které rozšiřují jejich značení:

Vaše komponenta vyššího řádu může poskytnout vlastnost onDecoratedzdobené komponentě, aby získala odkaz na její instanci.

Vaše komponenta vyššího řádu Term může dodat vlastnost onCursorMovehandler, která se zavolá, když se kurzor přesunul, s parametrem objektu reprezentujícím jeho relativní polohu vůči počátku Term:

Podporujeme zachování kompatibility s ostatními dekorátory. Protože jich lze nastavit mnoho, nepředpokládejte, že ten váš je jediný.

Pokud například předáváte děti, skládejte potenciální existující hodnoty:

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

Nebo pokud používáte onDecorated vlastnost

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

Akce a efekty

Všechny akce Reduxu jsou vám k dispozici pro zpracování prostřednictvím vašeho middlewaru a reduktorů. Příklad najdete v referenčním pluginu Hyperpower.

Vedlejší efekty se vyskytují ve dvou základních podobách:

• Některé akce dispečují jiné akce na základě stavu.
• Některé akce provádějí asynchronní práci tak, že komunikují přes RPC kanál s hlavním procesem

Ve všech případech je vedlejší efekt předán jako klíč effect v akci a později zpracován naším middlewarem.

To znamená, že efekty můžete přepisovat, skládat nebo zcela eliminovat! Jinými slovy, takto můžete měnit výchozí funkčnost nebo chování aplikace.

Jako příklad uveďme akci, kterou používáme pro zvětšení velikosti písma po stisknutí klávesy 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 }); } }); };}

Základní terminál

Hyper dosahuje velké části své rychlosti a funkčnosti díky výkonu xtermu.js

Další API

Objekty Electron app jsou rozšířeny o následující vlastnosti:

Elektronické BrowserWindow objekty jsou rozšířeny o následující parametry:

Renderovací okna jsou podobně rozšířena o:

Objekt rpc je symetrický mezi procesem prohlížeče a vykreslovače. API je stejné jako u Node.js s tím rozdílem, že jako parametry připouští pouze jeden objekt:

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

Příklad tématu: Hyperyellow

Následující rozšíření jednoduše změní konfiguraci tak, aby přidalo CSS a žluté barvy! Zde je kód.

Témata jsou jednoduše zásuvné moduly! Je potřeba pouze jeden háček, 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; } ` });}

Jména tříd jsem zachytil kontrolou termínu pomocí nástroje Devtools, který můžete spustit z View -> Toggle Developer Tools. Když tak učiníte, všimněte si, že některé třídy jsou automaticky vygenerovány a následuje za nimi náhodný nonce (např.: term_13hv8io). Těch si nevšímejte: mění se s každým novým oknem!“

Všimněte si důrazu na pěknou spolupráci s ostatními rozšířeními. Konkrétně vytvoříme nový objekt, rozšíříme pouze klíče, které nás zajímají, a sestavíme CSS tak, aby bylo zachováno nastavení uživatele i ostatních autorů:

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

Příklad rozšíření: Hyperpower

Následující rozšíření vykresluje částice při pohybu caretu:

Projdeme si jeho kód.
Nejprve zachytíme akci Redux SESSION_ADD_DATA. Úplný seznam akcí najdete v repozitáři.

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

Všimněte si, že akci znovu nevysíláme, což znamená, že nikdy nevytváříme výstup příkazu do terminálu. Místo toho dispatchujeme vlastní akci, kterou uchopíme v uiReducera později namapujeme:

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

Poté chceme ozdobit komponentu <Term> tak, abychom měli přístup k základnímu caretu.

Kontejner <Term> však není kontejner, na který bychom mohli mapovat rekvizity. Proto použijeme getTermProps k předání vlastnosti dále dolů:

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

Rozšíření pak vrátí komponentu vyššího řádu, která zabalí <Term>. Všimněte si, že předáváme vlastnost onDecorated pro přístup k základní komponentě Term a jejímu DOM ref a vlastnost onCursorMove pro použití Hyper cursor API:

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

.