インストール

最新バージョン: 3.0.2

プロジェクトの目標

プロジェクトの目標はコマンドラインのインターフェイスユーザー向けに美しく伸縮性の高い経験をオープン Web 標準に構築することです。 当初は、主に速度、安定性、および拡張機能作者のための正しい API の開発に注力します。

将来的には、生産性のための最もシンプルで強力かつ十分にテストされたインターフェイスとなり得るものを強化するために、コミュニティが革新的な追加機能を考え出すと予想しています。 package.json.

$ npm search hyper

Then edit .hyper.js and add it to plugins

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

Hyper will show a notification when your modules are installed to .hyper_plugins.

キーマップ

すべてのコマンドキーを変更できるようになりました。 変更するには、.hyper.js を編集し、keymaps に変更したい内容を追加します。

そうすると、Hyper はデフォルトを変更した内容に変更します。 'window:devtools': 'Cmd+Alt+O'

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

デフォルトのキーマップ。

Configuration

Config location

Note: ~/.hyper.js での設定はまだサポートされていますが、アプリケーション ディレクトリに設定がある場合は無視されます。 そうでない場合は、最初の実行時にアプリケーション ディレクトリに移動されます。

.hyper.js で見た config オブジェクトは、次のように承認されます

Extensions API

拡張機能は Electron とレンダラー プロセスの両方で読み込まれる汎用 Node.js モジュールです。 React コンポーネントと Redux アクション。

可能なカスタマイズ ポイントごとにカスタム API メソッドまたはパラメーターを公開する代わりに、機能のあらゆるビットを傍受して合成することができます。

プラグイン開発に関するさらなる詳細は、Hyper リポジトリで見つけることができます。

あなたのモジュールは、これらのメソッドの少なくとも 1 つを公開する必要があります。

Module loading

ユーザーは Command + R (refresh) でプラグインのホットロードおよびホットリロードが可能です。 733>

Notice

`BrowserWindow` に影響を与えるプラグインは、ホットロード後に新しいウィンドウで効果を発揮します。

将来的には、自動的にこれを行うかもしれません。 新しいプラグインをロードする:

• 定期的に（数時間おき）
• 設定ファイルに変更があったとき（plugins または localPlugins）
• ユーザーがプラグイン > Update all now

再ロードするプロセスでは .hyper_plugins で npm prune と npm install を走らせることになります。

エレクトロンとレンダラーの両方のプロセスで require.cache を実行

既存のインスタンスで on* メソッドを呼び出し、新しい装飾が配置されたコンポーネントを再レンダリングします。

Plugins location

Note: のプラグインはまだサポートされていますが、アプリケーション ディレクトリにプラグインがある場合は無視されます。

注意: メイン プロセスでは、プラグインはできるだけ早く登録されます (私たちは onLoad を起動します)。 ブラウザ上では、command+R を押すことによってロードをトリガーするのはユーザー次第です。 状態をリセットしたり、正しく保存しない拡張機能によって重要な作業が失われるのを防ぐために、この方法でユーザーにロードの制御をさせます。

Decorating components

UI のすべてのピースに高次コンポーネントを提供する機能を提供します。
その構造は次のとおりです:

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

すべての decorate* メソッドは、第2パラメーターとして渡されるオブジェクトで次の参照を受け取ります:

すべてのコンポーネントは、そのマークアップを拡張するために次の 2 つのプロパティを受け入れます:

高次コンポーネントは、装飾されたコンポーネントに onDecorated プロパティを供給して、そのインスタンスへの参照を取得することができます。

Term 高次コンポーネントは、カーソルが移動したときに呼び出される onCursorMovehandler プロパティを、Term の原点に対する相対位置を表すオブジェクト パラメータで提供することができます。

他のデコレーターと互換性を保つようお勧めします。 733>

For example, if you’re passing children, compose potential existing values:

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

or if you use onDecorated property

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

Actions and Effects

All the Redux actions are available to you to handle through your middleware and reducers.The Reduxアクションは、あなたのミドルウェアとリデューサーを通して処理することができます。 733>

Side effects は 2 つの基本的な形式で発生します。

• 一部のアクションは、状態に基づいて他のアクションをディスパッチします。
• RPC チャネルを介してメイン プロセスと通信することにより、非同期処理を行うアクションもある

いずれの場合も、副作用はアクションの effect キーとして渡され、後に当社のミドルウェアによって処理される

つまり、効果を上書き、合成、完全に排除できるのです! 言い換えると、このようにしてアプリのデフォルトの機能や動作を変更することができます。

例として、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 }); } }); };}

The underlying terminal

Hyper has a lot of its speed and functionality thanks of the power of xterm.js

追加 API

Electron app オブジェクトは以下のプロパティで拡張されています：

電子BrowserWindowオブジェクトは次のパラメータで拡張されます:

Renderer ウィンドウも同様に:

ブラウザとレンダリングプロセスで対称的なrpcオブジェクトです。 API は Node.js と同じですが、パラメータとして単一のオブジェクトしか認めない点が異なります。

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

Example theme: Hyperyellow

以下の拡張機能は、CSS と黄色を追加するように設定を変更するだけです! 以下はそのコードです。

テーマは単なるプラグインです! 必要なフックは 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; } ` });}

Devtools で用語を検査することにより、クラス名を取得しました。 その際、いくつかのクラスは自動的に生成され、ランダムな nonce が続くことに注意してください (例: term_13hv8io)。 それらは無視してください: それらはすべての新しいウィンドウで変わります!

他の拡張機能とうまくやることに重点を置いていることに注目してください。 具体的には、新しいオブジェクトを作成し、関心のあるキーのみを拡張し、ユーザーの設定と他の作者の設定を維持するために CSS を構成します：

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

Example extension: Hyperpower

The following extension renders particles as the caret moves:

Let’s walk through its code.
First, we intercept the Redux action SESSION_ADD_DATA.この拡張機能では、パーティクルを移動して表示します。

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

アクションを再派遣しない、つまり、コマンドの出力をターミナルにレンダリングしないことに注意してください。 その代わりに、uiReducer で取得し、後でマップする独自のアクションをディスパッチします。

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

次に、基礎となるキャレットにアクセスできるように <Term> コンポーネントを装飾します。

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

次に、拡張機能は <Term> をラップする高次のコンポーネントを返します。 ベースとなる Term コンポーネントとその DOM 参照にアクセスするために onDecorated プロパティを渡し、Hyper カーソル API を使用するために onCursorMove プロパティを渡していることに注意してください:

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