Dart VM 拡張開発

dartVmDevTool 拡張ポイントを提供する FlutterX バージョン向け

FlutterX の Dart VM ToolWindow は shop.itbug.FlutterCheckVersionX.dartVmDevTool 拡張ポイントで tab 機能を公開しています。組み込みの Vm、Memory、Http Monitor、Logging、Provider、Shared Preferences、Hive CE、Drift DB も同じ拡張ポイントで登録されており、サードパーティプラグインも同じ仕組みで独自の Dart VM DevTools を追加できます。

登録方法

サードパーティプラグインは FlutterX に依存し、FlutterX の名前空間で dartVmDevTool を登録します。

<depends>shop.itbug.FlutterCheckVersionX</depends>

<extensions defaultExtensionNs="shop.itbug.FlutterCheckVersionX">
    <dartVmDevTool
        id="myTool"
        implementation="com.example.MyDartVmDevTool"
        descriptionKey="my.tool.description"
        order="after hive"/>
</extensions>

属性

属性	必須	説明
`id`	はい	安定した tab ID。FlutterX は非表示設定をこの値で保存するため、公開後は変更しないでください。
`implementation`	はい	`shop.itbug.flutterx.api.vm.DartVmDevToolExtension` を実装するクラス。
`descriptionKey`	いいえ	コントリビュート元プラグインの resource bundle から解決され、Dart VM 設定ページに表示される i18n key。
`order`	いいえ	IntelliJ の拡張順序。例: `first`、`last`、`after hive`、`before drift`。

descriptionKey を省略した場合、または key を解決できない場合、説明文は表示されません。

拡張クラスの実装

拡張クラスはステートレスに保ち、コンストラクタで重い処理を行わないでください。UI 作成や Dart VM Service へのアクセスは、createComponent が作成するコンポーネントのライフサイクル内で行います。

package com.example

import com.intellij.openapi.project.Project
import shop.itbug.flutterx.api.vm.DartVmDevToolContext
import shop.itbug.flutterx.api.vm.DartVmDevToolExtension
import java.awt.BorderLayout
import javax.swing.JComponent
import javax.swing.JLabel
import javax.swing.JPanel

class MyDartVmDevTool : DartVmDevToolExtension {
    override fun getTabTitle(project: Project): String = "My Tool"

    override fun isAvailable(context: DartVmDevToolContext): Boolean {
        return true
    }

    override fun createComponent(context: DartVmDevToolContext): JComponent {
        return JPanel(BorderLayout()).apply {
            add(JLabel("My FlutterX Dart VM tool"), BorderLayout.CENTER)
        }
    }
}

createComponent は Swing の JComponent を返します。FlutterX は Compose や Jewel の型を公開 API に含めないため、サードパーティプラグインは Kotlin、Compose、Jewel のバージョン差分の影響を受けにくくなります。

実行中の Flutter アプリを読む

DartVmDevToolContext は現在の project、ToolWindow、実行中の Flutter アプリ一覧を公開します。

interface DartVmDevToolContext {
    val project: Project
    val toolWindow: ToolWindow
    val runningApps: StateFlow<List<DartVmApp>>
}

runningApps は動的な状態です。ユーザーが先に FlutterX Dart VM ToolWindow を開き、その後 Flutter アプリを起動する場合、拡張コンポーネントは context.runningApps を購読して更新を受け取る必要があります。

interface DartVmApp {
    val appId: String
    val vmUrl: String
    val deviceId: String
    val mode: String
    val vmService: VmService
}

DartVmApp.vmService から Dart VM Service RPC を呼び出せます。VM 呼び出しは遅延または失敗する可能性があるため、EDT をブロックしないでください。

多言語説明

Dart VM 設定ページに説明を表示したい場合は、descriptionKey を設定し、自分のプラグインの resource bundle に文言を追加します。

<idea-plugin>
    <resource-bundle>messages.MyPluginBundle</resource-bundle>

    <depends>shop.itbug.FlutterCheckVersionX</depends>

    <extensions defaultExtensionNs="shop.itbug.FlutterCheckVersionX">
        <dartVmDevTool
            id="myTool"
            implementation="com.example.MyDartVmDevTool"
            descriptionKey="my.tool.description"
            order="after hive"/>
    </extensions>
</idea-plugin>

my.tool.description=Shows custom diagnostics collected from Dart VM Service.

tab の表示と非表示

FlutterX は登録された Dart VM tab を Dart VM 設定ページに自動で表示します。サードパーティ tab も対象です。tab はデフォルトで表示され、ユーザーがチェックを外すと非表示になります。

非表示設定は拡張の id で保存されます。公開済みの id を変更するとユーザーの表示設定がリセットされるため、変更しないでください。

注意事項

v1 では、サードパーティプラグインのインストールまたはアンインストール後に、開いている Dart VM tab を即時更新しません。ToolWindow を開き直すか IDE を再起動してください。
ある拡張がコンポーネント作成に失敗しても、FlutterX はその tab をスキップし、他の tab の読み込みを続けます。
特定の project、依存関係、実行状態でのみ表示したい場合は isAvailable を使います。
コンポーネントは listener、coroutine、VM Service subscription を自分で解放してください。

検証

サードパーティ拡張では、次の確認を推奨します。

./gradlew compileKotlin が成功する。
./gradlew verifyPluginStructure が成功する。
FlutterX Dart VM にサードパーティ tab が表示される。
order="after hive" などの順序指定が反映される。
ToolWindow を先に開いてから Flutter アプリを起動しても、runningApps を購読した UI が更新される。
Dart VM 設定で tab を非表示にすると消え、再度表示すると復元される。