Atomコード再利用に向けた最新版の仕様調査

8955 ワード
Electron ATOM ATOM テキストリンク

Inkdropはプラグイン機構やキーカスタマイズ機構などの実現のために、Atomのソースコードを一部流用している。

新バージョンを開発するにあたり、前回の調査から二年ぐらい経つので改めて調査
使えるところは使っていく。

ライセンス

MITのまま。ありがたや

とりあえずビルド

> script/build
Node:   v11.1.0
Npm:    v6.2.0
Installing script dependencies
Installing apm
apm  2.1.3
npm  6.2.0
node 8.9.3 x64
atom unknown
python 2.7.13
git 2.17.2
Installing modules ✓
Wrote Dependencies Fingerprint: /Users/***/inkdrop/atom/node_modules/.dependencies-fingerprint 1a7626f47939d86d09695ab33831091b020a7347
Copying assets to /Users/***/inkdrop/atom/out/app
Transpiling packages with custom transpiler configurations in /Users/***/inkdrop/atom/out/app
 transpiling for package github
Installing modules ✓
Transpiling Babel paths in /Users/***/inkdrop/atom/out/app
Transpiling CoffeeScript paths in /Users/***/inkdrop/atom/out/app
Transpiling CSON paths in /Users/***/inkdrop/atom/out/app
Transpiling PEG.js paths in /Users/***/inkdrop/atom/out/app
Generating module cache for /Users/***/inkdrop/atom/out/app
Generating pre-built less cache in /Users/***/inkdrop/atom/out/app/less-compile-cache
Generating metadata for /Users/***/inkdrop/atom/out/app/package.json
Generating API docs at /Users/***/inkdrop/atom/docs/output/atom-api.json
Dumping symbols in /Users/***/inkdrop/atom/out/symbols
Running electron-packager on /Users/***/inkdrop/atom/out/app with app name "Atom Dev"
Downloading electron-v2.0.12-darwin-x64.zip
[============================================>] 100.0% of 48.75 MB (7.5 MB/s)
Packaging app for platform darwin x64 using electron v2.0.12
Setting Atom Helper Version for /Users/***/inkdrop/atom/out/Atom Dev.app/Contents/Frameworks/Atom Helper.app/Contents/Info.plist
Copying non-ASAR resources to /Users/***/inkdrop/atom/out/Atom Dev.app/Contents/Resources
Writing LICENSE.md to /Users/***/inkdrop/atom/out/Atom Dev.app/Contents/Resources
Application bundle created at /Users/***/inkdrop/atom/out/Atom Dev.app
Generating snapshot script at "/Users/***/inkdrop/atom/out/startup.js" (3834)
Minifying startup script
Verifying if snapshot can be executed via `mksnapshot`
Generating startup blob at "/Users/***/inkdrop/atom/out/snapshot_blob.bin"
Moving generated startup blob into "/Users/***/inkdrop/atom/out/Atom Dev.app/Contents/Frameworks/Electron Framework.framework/Resources/snapshot_blob.bin"
Skipping code-signing. Specify the --code-sign option to perform code-signing
Skipping artifacts compression. Specify the --compress-artifacts option to compress Atom binaries (and symbols on macOS)
Skipping installation. Specify the --install option to install Atom

開発手順

これ https://flight-manual.atom.io/hacking-atom/sections/hacking-on-atom-core/#platform-mac

snapshot

v8 snapshot作ってる・・！！起動めっちゃ速い。真似したい。

apmで依存モジュールを全てインストールしている

自分で npm install するとnodeのバージョンが合わなくてエラーになる。
script/bootstrapはapmを使ってモジュールをインストールしている。
その際、Electronのバージョンと合わせてくれるようになっている。
だから最初にapmをインストールしているようだ。すごいな・・

babelの設定

atom専用のtranspilerを用意している
babel-preset-reactが入っているので、packageでは何も気にせずjsxシンタックスで書ける。

fluxアーキテクチャ導入をどうするか

exports/ ディレクトリにreduxなどを放り込めばいけそう。たぶん

メインプロセスのログを取得する

$ atom --dev --foreground

開発モード時のメインプロセスの読み込み手順

atom --dev にて /Applications/Atom.app が開発モードで起動される。
src/main-process/main.js にて、メインプロセスが最初にrequireするアプリのコードのパスを開発ディレクトリに切り替える。

60 const start = require(path.join(resourcePath, 'src', 'main-process', 'start'))

よって <開発パス>/src/main-process/start.js が実行される。

ウインドウを作ってるところ

src/main-process/atom-window.js:33

普通にBrowserWindow使っているのでフレームレスにしたりいじれる。

PouchDBを読み込ませてみる

追加：

--- a/package.json
+++ b/package.json
@@ -137,6 +137,7 @@
     "pathwatcher": "8.0.1",
     "postcss": "5.2.4",
     "postcss-selector-parser": "2.2.1",
+    "pouchdb": "7.0.0",
     "property-accessors": "^1.1.3",
     "random-words": "0.0.1",
     "resolve": "^1.1.6",

インストール：

> script/bootstrap

起動しなかったのでたぶんネイティブモジュールがアカンからrebuild：

> npm install -g electron-rebuild
> electron-rebuild -v 2.0.12

無事起動した！main-processからも読み込めたのでイケそうだ。

サイドバーを追加してみる

ノートブック一覧とかを表示するためのサイドバーを追加してみる。
tree-view パッケージを packages/side-bar/package.json にコピーして改造。

できた。へー

reactではなくetchでレンダリングしている

welcomeのようなパッケージでJSXの書式を見かけたがこれは厳密にはreactではないらしい。
どうやらetchというatom独自の技術。
だからpackageでreactが使えない。なんということだ。
そうなると、viewに関しては完全に書き換える必要がある。
しかしatomのエディタが使いたいので、共存はできないだろうか。

一旦おわり。