vue.js手習い

環境

Bundler: bun
- https://bun.sh
Store管理: pinia
- https://pinia.vuejs.org/
フレームワーク: vue3
- https://ja.vuejs.org/

手抜きするため、viteテンプレートを使用してプロジェクトを作成する。

# プロジェクトの作成
bun create vite counter-pinia
# piniaの追加
bun add pinia
# 依存パッケージのインストール
bun install
# dev環境の起動
bunx --bun vite

https://reffect.co.jp/vue/vue-pinia

piniaを使用するStep By Stepガイドとしてわかりよい。
piniaの有効化(use)はガイドの通りメソッドチェインを使用しないこと。
- ~~メソッドチェインで記述すると、Vue DevTollsに表示されなかった。~~
  - なんか表示された。よぐわがんにゃい。
- see Why can't I see Pinia in Vue devtools?
bunx経由でdev環境を起動した場合、Dev Toolsのpiniaの状態までは追従してくれない。
- r + enterでのリロードが必要。
- そもそもnpx vite devでも追従してくれんかったわw
- issue報告もないから、環境依存ってことで諦める

ktz_alias

piniaのstoreをcomposition APIで構成する場合、非同期(asyncにしてはいけない

/* これはダメ */
const useSomeStore = defineStore('some', async () => { ... })

初期値が非同期的に決定される場合は、非同期のアクションを公開し、UI (*.vue)側で、onMountでフックする。

const useSomeStore = defineStore('some', async () => {
    /* 非同期の関数を用意してーの */
    const foo = async () => { ... }
})

<script setup lang="ts">
    /* onMountでフックしてーの */
    onMound(async () => {
        await foo()
    })
</script>

ただし、Suspense使う場合、同期コンポーネントとみなされるため、fallbackが機能しなくなる

他に非同期呼び出しがあれば問題なし

ktz_alias

フォーム入力でdebounceしたい

https://www.npmjs.com/package/vue-debounce
- vueに組み込んであげると、フォームの入力アクションを遅延してくれるっぽい

ktz_alias

生テキストのインポート

viteを経由している場合、?rawをつけると読んでくれるっぽい？
- https://vitejs.dev/guide/assets#importing-asset-as-string
vite-plugin-plain-textだとなぜかパスが得られるだけだった
- https://www.npmjs.com/package/vite-plugin-plain-text

bunのバンドラで処理してくれるかどうかは未確認

そもそもbunのバンドラはvue3対応してなさそう（中途半端なファイルしか作らなかった）
vite build (bun run build)経由であれば問題なく作成された
vite preview (bun run preview)経由での実行も問題なし

ktz_alias

bunのvueテンプレートを使用してのプロジェクト作成も行える。

viteテンプレートの時よりも対話内容は多いが、バンドル前の型チェックも行われており気が利いているのも特徴。

bun create vue@latest

ktz_alias

ユニットテスト

Cypress

vueテンプレートで選択できるcypress良さそう

https://www.cypress.io/

ただストアのテスト書くには一工夫必要

アイデア
- https://qiita.com/ktz_alias/items/b1e4bd2d6eaabefac8c3
cypressはドキュメントルートを移動させるのか、duckdb内からのファイルアクセスでパスエラーとなってしまう。

Vistst

node.jsからの実行になるが、cypress同様のテスト仕様を記述できる。

duckdbのbrowser variantモジュールをテストすることはできない
- blocking variantであればテスト可能

ktz_alias

Composition APIでwatchを使う

ドキュメントではRefが使えるとあるが、以下のように記述しても通知されない

const foo = ref('')
whtch(foo, async () { ... })

変更されるのは、foo自身ではなく参照先の値のため。
以下のように記述すればOK

const foo = ref('')
whtch(foo.value, async () { ... })

ktz_alias

Github Actionsでのビルド

vite + vue3構成で、Ubuntu 22.04下でGithub Actionsを回してビルドした際に、エラーが発生した。

/home/runner/work/rust_api-rev_ref-vue/rust_api-rev_ref-vue/node_modules/rollup/dist/native.js:59
		throw new Error(
		      ^

Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828).

(snip)

以下のページに示されてるように、optionalDependenciesを追加したらビルドは通るようになった。

ktz_alias

 Content Security Policy (CSP)について当初、index.htmlに
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'unsafe-eval' 'self'; style-src 'unsafe-inline'; style-src-elem 'self'">
を記述していた。
https://cdn.jsdelivr.netからリソースを取得するようにしたところ、たくさんのCSPエラーがでるようになった。
最終的に、
<meta http-equiv="content-security-policy" content="default-src 'self'; connect-src 'self' https://cdn.jsdelivr.net https://extensions.duckdb.org/ blob:; script-src 'unsafe-eval' 'self' https://cdn.jsdelivr.net blob:; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; worker-src 'self' blob:;">
でおさまった。
変更内容についてのChatGPTによる解説

 connect-src意味: ページが外部リソースと通信する際の許可リストを定義
変更前: connect-src は指定されていません。
変更後: connect-src 'self' https://cdn.jsdelivr.net https://extensions.duckdb.org/ blob:;
以下の通信を許可
'self': 自サイトとの通信を許可します。

https://cdn.jsdelivr.net: JS/CSSのCDNリソースの読み込みを許可。

https://extensions.duckdb.org/: DuckDB拡張のWASMファイルの読み込みを許可。
blob:: blob: URLスキームを使用した通信を許可。
Web Workersやインライン生成されたリソースを利用する際に必要。


 script-src意味: ページがどのスクリプトを実行できるかを定義
変更前: script-src 'unsafe-eval' 'self';
変更後: script-src 'unsafe-eval' 'self' https://cdn.jsdelivr.net blob:;
以下のスクリプトを許可
'unsafe-eval': eval()の使用を許可しますが、セキュリティリスクが高まります。
'self': 自サイトにホストされているスクリプトを許可。

https://cdn.jsdelivr.net: CDNからのスクリプトの読み込みを許可。
blob:: blob: URLスキームからのスクリプト実行を許可。
これがないと、blob: URLで生成されたスクリプト（例: Web Workers）を実行できない。


 style-src意味: ページのスタイルのソースを定義
変更前: style-src 'unsafe-inline';
変更後: style-src 'self' 'unsafe-inline';
以下のスタイルソースを許可
'self': 自サイトにホストされているスタイルを許可します。
'unsafe-inline': インラインスタイルを許可しますが、セキュリティリスクが高まります。

 style-src-elem意味: style 要素に適用されるスタイルソースを定義
変更前: style-src-elem 'self';
変更後: style-src-elem 'self' 'unsafe-inline';
以下の要素を許可
'self': 自サイトにホストされているスタイル要素を許可します。
'unsafe-inline': インラインスタイルの適用を許可します。

 worker-src意味: Web Workersのスクリプトのソースを定義
変更前: なし
変更後: worker-src 'self' blob:;
以下のソースを許可
'self': 自サイトにホストされているWorkerスクリプトを許可します。
blob:: blob: URLで生成されたWorkerスクリプトを許可します。