LoginSignup
13
10

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-20

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/bootstrapapmを使ってモジュールをインストールしている。
その際、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 にコピーして改造。

Screen Shot 2018-11-20 at 20.32.06.png

できた。へー

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

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

一旦おわり。

13
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
10