Gyazzみたいなエディタ作りでReact.jsを学ぶ
inajob.icon
reactの習作を作り始めた
なるべくシンプルに作る
react-scripts でビルドなしでreactを使えようにした
gh-pages で簡単にGitHub pages用のブランチを作成
古い書き方やおかしなとところがあれば教えてください
そしてVite化した
実装中の機能
他のプロジェクトで組み込んでみる
他のReact.jsを使ったプログラムから、このプロジェクトで作成したAppとかEditorを利用したい
ここが分からなくて詰まっている
このプロジェクトはreact-scriptsで何やらうまいことやってReact.jsを動かしているが、これを他のリポジトリから扱う方法がよくわからない
例えば npm run build(呼び出されるのは react-scripts build) とかすると何やらJavaScriptのファイルが生成されるが、これをどうにかすれば良い？
react-scriptsもこの流れで使うべきではないものになっているのかな・・
ここで紹介されているケースだったか？
This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder.
まだ状況が整理できていない・・、うまくいったり行かなかったり、要因がわからない
時は流れて色々実装が出来てきた・・（裏でやってた）
引用記法
キーワード補完
日本語入力との相性問題修正
ポップアップメニューの機能をプラグインっぽくする
インターフェースを決めねば
ポップアップメニューから何をやりたい？
行選択
選択部分の文字列を変更する
選択部分を上下に移動させる
選択部分を切り出す
Editorの外で行の内容のstateを作成してEditorにそのstateと編集用の関数を渡せば、Editorの外から行を操作できる
これでいいのかな？
文字列選択
選択部分の文字列を変更する
編集後文字を返すような関数を用意する
選択部分から検索する
検索はEditorの内部を知らなくてもできそう
ブロック記法をプラグインっぽくする
インライン記法をプラグインっぽくする
まだインライン記法がないような・・？
URLを自動でリンクにする仕組みがある
あとやることリスト
行引用記法
ブラケットの入力補完
レスポンシブに対応する
他のプロジェクトで組み込んでみる
観客席
なにやってるのかぜんぜんわからねぇ…エディタづくりってすごいなあyosider.iconcFQ2f7LRuLYP.iconwogikaze.icon 既存のエディタコンポーネントはいろいろあるのですが、コードリーディングしても全然わからんので、作ってみる方向で学習中ですinajob.icon テキストエディタの文字を打ち込んで表示する部分を指している（と思う）
https://gyazo.com/c0972dfea2440e5c052c3f5fd56f5305
テキストボックス的なやつかyosider.icon
ですね、単純なtextareaだと書式をつけたり文字列補完機能をつけたりできないので、そのあたりに独自で作るモチベーションがありますinajob.icon
実装方法がいろいろあります
エディタづくりというと何か違う印象があるな、、inajob.icon
一般的にエディタづくりというとブラウザ上ではなく、普通のアプリとして作ることをさす事が多そう
どっちも固有の難しさがありそう
観客席ができてる。なんかワロタtakker.icon 既存のエディタコンポーネントで、WYSIWYMをインラインで書式付きで編集できる物を知らないのだが、流石にどこかにある気がする、誰か知らない？inajob.icon デモがないだけでカスタマイズすればできるのかな？
色をつけるのはよくあるけどフォントサイズを変えたりするのは仕組み上できないものが多いように見える
いきなり見つけた、これこれ
SimpleMDEの派生
今使うならこれっぽい
Reactのファイルサイズでかいなーtakker.icon
bundleされたmain.jsをformatし直したら、9000行以上に膨れ上がった
Preactだとfmtして400行くらいにしかならないから、どれだけ大きいかがわかる
数千行も使って一体Reactは裏で何をしているんだ……
Svelteに書き換えるのって大変ですかね？ こっちの方が小さくなりそうinajob.icon 言語が変わるので大変そうに思いますtakker.icon
reactはTS(X)だけど、vueやsvelteはtsではない
専用のcompilerを通す必要がある
jsxはtypescriptも大抵のcompilerも対応している
まあNodeで開発する場合は、どのframeworkを使うにしろいろいろ設定が必要だから大して違いがないかも
DenoだとJSXなら設定なしに実行できる
esbuild、あと確かrollupも設定なしにJSXをtranspileできたはず
miyamonz.iconはReactには慣れてるのでReactでサクサクUIは作れるので楽なのですが、React慣れてない方が書くという観点だと、サクッととにかく動くものを作るには、割と調べることがありそうで大変そうですね。
皆さんはこういう作業は同じ感じでやってるのかな？ TIPSとかあれば知りたい
こっちと違って人に見せるつもりで書いてないのでより意味不明なメモになっている
cFQ2f7LRuLYP.iconがやっていたやつと違ってすごく見やすい
こうなれるようがんばろう
これは実はリファクタリングなので、試行錯誤は終わってるというのが大きいですねinajob.icon そうなんですね～cFQ2f7LRuLYP.icon
ぐちゃぐちゃの実装のログのリファクタリングも要るのかもしれない
この時点の自分は何がわかってなくて、何が惜しかったのか
Summer498.icon
react のことはちょっとしか触れてないからよう知らんけど、
ありがたいですinajob.icon
他のリポジトリから扱う方法に関しては
まず、外部化したいライブラリだけ別プロジェクト扱いにする
つまり、今そのライブラリを使ってるプロジェクトからも後述する外部プロジェクトからの import をする
可能であればライブラリプロジェクトは CJS と ESM の両方でビルドする
片方のみしか無理なら ESM の方でビルドしたほうが安定する印象がある
自分が何使ってるかを意識していたらこんな心配は要らんかもしらんけど→→→Summer498.icon
外部プロジェクトからの import 方法
npm link で外部プロジェクトからライブラリプロジェクトに対してシンボリックリンクを張れる
devDependencies に直接追加するという手もあるらしい
やっぱDenoのほうが便利そうtakker.iconDeno信者がやってきたぞっアカリがやってきたぞっ.iconSummer498.icon URLがあればなんでもimportできる
cjsのことを考えなくていい
ESMだけ使っていればここはそんなに差がないと思ふSummer498.icon
cjs onlyでesmで読み込めない地雷packageがあったりするtakker.icon
今回は大丈夫そう
inajob.icon
（あとでこの辺の発言は別ページにまとめよう）
なにかの自分の知らない機能があるらしく、推論を妨げている
例えばlib側に別の試行錯誤でビルドしたjsが存在すると、これを勝手にロードしているっぽい
package.jsonの"main"に書いてあるのだけ見てるんじゃないのか
一度"main"に書いていないものを使い始めると、どこかで何かがキャッシュしているのか、その後色々変更しても、意図しないファイルを参照し続けている？
おせっかいをしているのはreact-scriptsの中のなにか？
リセット方法を知らないと試行錯誤できない
ライブラリ側のpackage.jsonを意図的に変更して、また戻すとリセットできてる気がする
アプリケーション側がライブラリ側のpackage.jsonの何かをキャッシュしている？
このキャッシュを直接消す方法がわからないので、ライブラリ側のpackage.jsonを変更することでこれがリセットできる（と思う）
React/Node.jsに詳しい人に応援頼みたいtakker.icon