プログラミング/svelte のバックアップソース(No.5)
更新- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- バックアップ を表示
- プログラミング/svelte へ行く。
[[公開メモ]]
* svelte や svelte kit を使いこなしたい [#o86663ca]
#contents
** いまのところ情報収集中 [#o6d339e1]
- SvelteKit+Superforms+Prisma+Luciaでログイン機能を爆速で実装する~
https://zenn.dev/gawarago/articles/f75f5113a3803d
- SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた~
https://zenn.dev/kosei28/articles/d965f221a656fd
- Vitest / Playwrightを使ってSvelteのコンポーネントをテストする~
https://qiita.com/oekazuma/items/925ddbf48870fb999c19#vitest%E3%81%A8%E3%81%AF
* VS Code + Git Bash + nvm のインストール [#d5c705f1]
https://blog.css-net.co.jp/entry/dev-environment-windows#2-2-Git-for-Windows
に従った。
** VS Code 上の GitBash で nvm が動かない [#tdc757ef]
VS Code を起動中に nvm をインストールすると、
LANG: console
$ nvm
bash: nvm: command not found
とか、
LANG: console
$ nvm install lts
ERROR open \settings.txt: The system cannot find the file specified.
となる。
これは環境変数の更新が VS Code に認識されていないためなので、
VS Code を一旦落として立ち上げなおすと動くようになる。
LANG: console
$ node
bash: node: command not found
$ nvm list
18.16.0
のような場合は、
LANG: console
$ nvm use 18.16.0
Now using node v18.16.0 (64-bit)
$ nvm list
* 18.16.0 (Currently using 64-bit executable)
$ node
Welcome to Node.js v18.16.0.
のように nvm use する。
** pnpm を入れる [#dd20e999]
良いうわさを聞くので。
LANG: console
$ 'npm' install -g pnpm
added 1 package in 6s
そして ~/.bashrc に、
alias npm=pnpm
としてしまう。
** VS Code 設定 [#u7dae213]
- フォント Myrica~
https://www.sejuku.net/blog/60345 を参考にした
- テーマファイルについて~
https://coliss.com/articles/build-websites/operation/work/best-of-visual-studio-code-themes.html
- アドオン
-- Japanese Language Pack for Visual Studio Code~
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
-- Keyboard Macro Beta~
https://marketplace.visualstudio.com/items?itemName=tshino.kb-macro
-- macro-commander (Command Runner)~
https://marketplace.visualstudio.com/items?itemName=jeff-hykin.macro-commander
-- GLSL Lint (WebGL をやる場合)~
https://marketplace.visualstudio.com/items?itemName=dtoplak.vscode-glsllint
-- Shader languages support for VS Code (WebGL をやる場合)~
https://marketplace.visualstudio.com/items?itemName=slevesque.shader
-- ESLint~
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
-- GitLens — Git supercharged~
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
-- npm Intellisense~
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
-- Playwright Test for VSCode~
https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
-- Prettier - Code formatter~
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
-- Pretty TypeScript Errors~
https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
-- Prisma~
https://marketplace.visualstudio.com/items?itemName=Prisma.prisma
-- Svelte for VS Code~
https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode
* テスト環境の確認 [#f1f86045]
https://qiita.com/oekazuma/items/925ddbf48870fb999c19#vitest%E3%81%A8%E3%81%AF
LANG: console
$ pnpm create svelte@latest testenv
.../Local/pnpm/store/v3/tmp/dlx-41072 | +6 +
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: C:\Users\osamu\AppData\Local\pnpm\store\v3
Virtual store is at: ../../Users/osamu/AppData/Local/pnpm/store/v3/tmp/dlx-41072/node_modules/.pnpm
.../Local/pnpm/store/v3/tmp/dlx-41072 | Progress: resolved 6, reused 0, downloaded 6, added 6, done
create-svelte version 4.2.0
┌ Welcome to SvelteKit!
│
◇ Which Svelte app template?
│ Skeleton project
│
◇ Add type checking with TypeScript?
│ Yes, using TypeScript syntax
│
◇ Select additional options (use arrow keys/space bar)
│ Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└ Your project is ready!
✔ Typescript
Inside Svelte components, use <script lang="ts">
✔ ESLint
https://github.com/sveltejs/eslint-plugin-svelte
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
https://playwright.dev
✔ Vitest
https://vitest.dev
Install community-maintained integrations:
https://github.com/svelte-add/svelte-add
Next steps:
1: cd testenv
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
$ cd testenv
$ pnpm install
$ git init && git add -A && git commit -m "Initial commit"
$ pnpm run dev
> testenv@0.0.1 dev (home)\svelte\testenv
> vite dev
Forced re-optimization of dependencies
VITE v4.3.9 ready in 1901 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Shortcuts
press r to restart the server
press u to show server url
press o to open in browser
press c to clear console
press q to quit
ここで o を押すとブラウザが立ち上がって Welcome to SvelteKit が表示された。
&ref(vite-dev.png);
^C で抜けて、
LANG: console
$ cat package.json
{
"name": "testenv",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.26.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.3.0",
"vitest": "^0.25.3"
},
"type": "module"
}
** vitest [#seaa70b8]
LANG: console
$ pnpm run test:unit
> testenv@0.0.1 test:unit (home)\svelte\testenv
> vitest
DEV v0.25.8 ~/svelte/testenv
✓ src/index.test.ts (1)
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 12:11:24
Duration 2.21s (transform 720ms, setup 0ms, collect 77ms, tests 6ms)
PASS Waiting for file changes...
press h to show help, press q to quit
Watch Usage
press a to rerun all tests
press f to rerun only failed tests
press u to update snapshot
press p to filter by a filename
press t to filter by a test name regex pattern
press q to quit
別の terminal から、
LANG: console
$ touch src/index.test.ts
すると、再度テストが実行される。
LANG: console
$ cat vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
export default defineConfig({
plugins: [sveltekit()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
});
となっているので、src/ の下のすべての .test.ts および .spec.ts がテストの対象になる。
** PlayWright [#n96c68b1]
LANG: console
$ pnpm run test
> testenv@0.0.1 test (home)\svelte\testenv
> playwright test
Running 1 test using 1 worker
[WebServer]
[WebServer]
[WebServer]
✘ 1 test.ts:3:1 › index page has expected h1 (58ms)
1) test.ts:3:1 › index page has expected h1 ──────────────────────────────────────────────────────
Error: browserType.launch: Executable doesn't exist at C:\Users\osamu\AppData\Local\ms-playwright\chromium-1064\chrome-win\chrome.exe
╔═════════════════════════════════════════════════════════════════════════╗
║ Looks like Playwright Test or Playwright was just installed or updated. ║
║ Please run the following command to download new browsers: ║
║ ║
║ npx playwright install ║
║ ║
║ <3 Playwright Team ║
╚═════════════════════════════════════════════════════════════════════════╝
1 failed
test.ts:3:1 › index page has expected h1
───────────────────────────────────────────────────────
ELIFECYCLE Test failed. See above for more details.
ふむ。言われた通りにしよう。
LANG: console
$ npx playwright install
Downloading Chromium 114.0.5735.35 (playwright build v1064) from https://playwright.azureedge.net/builds/chromium/1064/chromium-win64.zip
113.5 Mb [====================] 100% 0.0s
Chromium 114.0.5735.35 (playwright build v1064) downloaded to C:\Users\osamu\AppData\Local\ms-playwright\chromium-1064
Downloading FFMPEG playwright build v1009 from https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-win64.zip
1.4 Mb [====================] 100% 0.0s
FFMPEG playwright build v1009 downloaded to C:\Users\osamu\AppData\Local\ms-playwright\ffmpeg-1009
Downloading Firefox 113.0 (playwright build v1408) from https://playwright.azureedge.net/builds/firefox/1408/firefox-win64.zip79.7 Mb [====================] 100% 0.0s
Firefox 113.0 (playwright build v1408) downloaded to C:\Users\osamu\AppData\Local\ms-playwright\firefox-1408
Downloading Webkit 16.4 (playwright build v1848) from https://playwright.azureedge.net/builds/webkit/1848/webkit-win64.zip
45.2 Mb [====================] 100% 0.0s
Webkit 16.4 (playwright build v1848) downloaded to C:\Users\osamu\AppData\Local\ms-playwright\webkit-1848
$ pnpm run test
> testenv@0.0.1 test (home)\svelte\testenv
> playwright test
Running 1 test using 1 worker
[WebServer]
[WebServer]
[WebServer]
✓ 1 test.ts:3:1 › index page has expected h1 (967ms)
1 passed (4.0s)
$ ls -a test-results/
./ ../
かなり時間がかかるけど、ちゃんと動いたと言っている。
test-results/ には何も入っていない。
上では 4.0s かかったと言っているけど実際にはテストが走り始めるまでに
20秒近くかかっていて、そっちの方がずっと長い。
LANG: console
$ time node_modules/.bin/playwright test
Running 1 test using 1 worker
[WebServer]
[WebServer]
[WebServer]
✓ 1 test.ts:3:1 › index page has expected h1 (473ms)
1 passed (3.0s)
real 0m22.550s
user 0m0.076s
sys 0m0.247s
gui を使うことにして立ち上げっぱなしにすると、起動にかかる時間を待たずに済む。
LANG: console
$ node_modules/.bin/playwright test --ui
&ref(playwright-gui.png,,50%);
うまく行きそうだ。
LANG: console
$ cat playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
testDir: 'tests',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
};
tests/ フォルダの *.test.ts のようなファイルがテスト対象になる。
あーと、これを見ると ファイルを更新した場合には npm run build をし直さなければならないっぽいのでその点には注意が必要だ。
LANG: console
$ git status
On branch master
Untracked files:
(use "git add <file>..." to include in what will be committed)
test-results/
nothing added to commit but untracked files present (use "git add" to track)
となってしまうので、.gitignore に /test-results を追加することも必要。
LANG: console
$ echo /test-results >> .gitignore
$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: .gitignore
no changes added to commit (use "git add" and/or "git commit -a")
$ git commit -a -m "add /test-results to .gitignore"
何にしても、ユニットテストばかりでなく E2E テストまで Out of the box で簡単に行えるのはすごい。~
apache2 や nginx どころか WSL すらセットアップの必要がないとは。。。
* Prisma と Lucia を使った認証システム [#a42dca10]
SvelteKit+Superforms+Prisma+Luciaでログイン機能を爆速で実装する~
https://zenn.dev/gawarago/articles/f75f5113a3803d
を参考に。
合わせて読みたい記事：
- TypeScript 4.9のas const satisfiesが便利。型チェックとwidening防止を同時に行う~
https://zenn.dev/moneyforward/articles/typescript-as-const-satisfies
https://zenn.dev/moneyforward/articles/typescript-as-const-satisfies
Counter: 1184 (from 2010/06/03),
today: 1,
yesterday: 4