ScrapBubble設計やり直し
一度ここで設計を見直そうと思う
変更点
実装
JSXを使う
TypeScriptを使う
web componentsを使わない
設計
./ (root directory)
App.tsx
entry points
mount()をexportする
components/
PageBubble.tsx
TextBubbleからPageBubbleに名前を変えてみた
textよりpageのほうがpageをpreviewしていることがはっきりする
useCacheからデータを読み込む
複数のprojectで同一タイトルのページが見つかったら、セレクトボタンか何かで切り替えて表示できるようにする
Page.tsx
一つ一つのページ？
PageBubble.tsxから分離しようかと思っている
利点
pagenationがしやすくなる？
別プロジェクトの同名ページを切り替え表示できる
これなにげにほしい機能だtakker.icon
ただ、欠点もある
特定projectの一つのページに情報をまとめるインセンティブが減る
一長一短だな……
こういうときは、目的に沿った機能かどうかを考えるべきだな
renderingした複数のページを破棄せずに保持して置くこともできる
ページ内容のrendering部分と、ページ操作部分(元ページへのリンク表示、読込中表示、閉じるボタン)とを分離できる？
リンク、キーワード、行IDを指定することで、予めその行までscrollさせることができるようにする
より情報を探しやすくなる
CardBubble.tsx
Card.tsx
一つ一つのページカード
useCacheからデータを読み込む
hooks/
useCards.ts
カードの表示制御を行う
カードの表示・非表示切り替え
表示する際に、表示位置を指定する
カードの追加と削除
追加・削除する際に、同階層以下に表示されているカードはすべて非表示となる
useEventListener.ts
useProjectTheme.ts
useCache.ts
前処理済みのサムネイルデータと本文データをcacheしておくhooks
保持するデータ
project
title
(optional)サムネイル画像
parse済みサムネイルデータ
parse済み本文データ
逆リンク先の{project, title}のリスト
更新日時 (unix time)
cacheの取得日時 (unix time)
{project, title}をキーにする
やめた
objectは参照で比較されるので、同じpropertiesを持っていても別のキーとして解釈されてしまう
代わりに\`[- ${project}-${title}\]`を使う
配列にする
titleが同じすべてのページを取得したいこともあるので
有効期限を指定できるようにする
これが切れたらcacheを更新する
networkから新たに取ってきたデータとcacheとの比較には更新日時を使う
透過的に扱うprojectのリストも指定する
componentではこのデータを愚直にrenderingsすればいいだけにする
web workerに処理を委託する事もできるな
他の機能とは分離されているので、勝手に委託しても外部に影響は出ない
deps/
外部scriptを読み込む
utils/
その他の函数
scripts/
App.tsxのbuild用script
このscript単体で使いたいとき向け
cli.ts
これをterminalで実行してscrapbox json dataを生成する
bundle.ts
bundleを実行するファイル