Open2022/07/27にコメント追加25

Deno + Fresh!!

Deno + FreshでDenoDeployにデプロイするとこまでやってみる

以下も試したい

lint, format
test(コンポーネントのテストとかもいけそう?)
CI周り
VSCode周りのDeno環境の構築(できればリポジトリごとで)

作業ログ

FreshのGetting started
https://fresh.deno.dev/#getting-started

まずDeno CLIをインストールするところから

brewで入れる
brew install deno

https://deno.land/

deno run -A -r https://fresh.deno.dev {project-name}
でよしなにプロジェクト作成してくれる
今回はすでにリポジトリあるんだけどもどうしよかな

deno run -A -r https://fresh.deno.dev {既存のディレクトリパス}
でいけた

twindとVS Code使うか、このパスに上書きしてもええかどうか聞かれた

The target directory is not empty (files could get overwritten). Do you want to continue anyway? [y/N] y
Do you want to use 'twind' (https://twind.dev/) for styling? [y/N] y
Do you use VS Code? [y/N] y

該当のリポジトリだけVSCodeをDenoの設定にしたい

VSCodeの設定
https://deno.land/manual/vscode_deno

拡張はこれ

Freshでプロジェクト作ったときにVSCode使う設定してたら.vscodeが生成される

.vscode/settings.jsonにformatterの設定を追記
"editor.defaultFormatter": "denoland.vscode-deno"

deno task startでlocalサーバーが起動
この時に依存関係があるパッケージもダウンロードしてくれる

❯ deno task start
Warning deno task is unstable and may drastically change in the future
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 3 routes and 1 islands.
Download https://deno.land/x/fresh@1.0.1/server.ts
Download https://esm.sh/twind@0.16.17/sheets
Download https://deno.land/x/fresh@1.0.1/runtime.ts
Download https://esm.sh/twind@0.16.17
Download https://esm.sh/preact@10.8.2
Download https://esm.sh/preact@10.8.2/hooks
Download https://esm.sh/v86/twind@0.16.17/deno/twind.js
Download https://esm.sh/v86/twind@0.16.17/twind.d.ts
Download https://esm.sh/v86/twind@0.16.17/deno/sheets.js
Download https://esm.sh/v86/twind@0.16.17/sheets/sheets.d.ts
Download https://esm.sh/v86/preact@10.8.2/deno/hooks.js
Download https://esm.sh/v86/preact@10.8.2/hooks/src/index.d.ts
Download https://esm.sh/v86/preact@10.8.2/deno/preact.js
Download https://esm.sh/v86/style-vendorizer@2.1.1/deno/style-vendorizer.js
Download https://esm.sh/v86/preact@10.8.2/src/index.d.ts

ディレクトリ構成見てく

main.ts: DenoDeployでのエントリポイント
dev.ts: 開発時のエントリポイント
fresh.gen.ts: routesとislands`に関するマニフェストで自動的に生成される
import_map.json: 依存関係の管理に使用
deno.json: package.jsonから依存関係を抜いたような感じのjson
routes/: ルーティング
islands/: インタラクティブな実装するとこ
static/: 静的ファイル置き場

ルーティング

preactのお作法

/** @jsx h */
import { h } from "preact";

FreshのプロジェクトにStorybook(か、同等のコンポーネント実行環境)を入れられるか

NPMとの互換性
https://deno.land/manual@v1.23.3/node

Deno friendlyなCDN(esm.shとか)経由でnpmパッケージを取得する？

Node compatibility mode

npmやyarnでインストールしたパッケージをdenoのコマンド経由で実行できそう
下記はnpm or yarnでインストールしたeslintを実行する例

$ deno run \
  --compat --unstable \
  --allow-read --allow-write=./ --allow-env \
  node_modules/eslint/bin/eslint.js test.js test.ts

storybookのインストール

$ yarn init
$ yarn
$ npx sb init

yarn.lockがあればyarnを認識してくれる

npx sb initするとプロジェクトに何を使ってるのか認識されなかったのでpreactを選択

 • Detecting project type. ✓
    We couldn't detect your project type. (code: UNDETECTED)
    You can specify a project type explicitly via `sb init --type <type>`, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/react/get-started/install

? Do you want to manually choose a Storybook project type to install? › (y/N)
attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

✔ Do you want to manually choose a Storybook project type to install? … yes
✔ Please choose a project type from the following list: › preact
 • Adding Storybook support to your "Preact" app

start-storybookをDenoコマンド経由で実行する

node_modules/@storybook/preact/package.json

  "bin": {
    "build-storybook": "./bin/build.js",
    "start-storybook": "./bin/index.js",
    "storybook-server": "./bin/index.js"
  },

node_modules/@storybook/preact/bin/index.js

$ deno run \
  --compat --unstable \
  --allow-read --allow-write=./ --allow-env \
  node_modules/@storybook/preact/bin/index.js -p 6006

で動くか

初回チャレンジに失敗

⚠️  ️Deno requests net access to "0.0.0.0:6006". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "storybook.js.org". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6007". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6008". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6009". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6010". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6011". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6012". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6013". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6014". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:6015". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
⚠️  ️Deno requests net access to "0.0.0.0:0". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
✔ Port 6006 is not available. Would you like to run Storybook on port 60356 instead? … yes
info => Loading presets
⚠️  ️Deno requests net access to ":60356". Run again with --allow-net to bypass this prompt.
   Allow? [y/n (y = yes allow, n = no deny)]  y
info Addon-docs: using MDX1
info => Using implicit CSS loaders

info => Ignoring cached manager due to change in manager config
ERR! Error: Cannot find module 'preact/compat/package.json'

ネットワークアクセスを許可したいので--allow-netを追加してみたら最初の確認は無くなった

deno run \
  --compat --unstable \
  --allow-read --allow-write=./ --allow-env --allow-net \
  node_modules/@storybook/preact/bin/index.js -p 6006

エラー内容抜粋
cjs周りが問題なんか？

ERR! Error: Cannot find module 'preact/compat/package.json'
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     'repository-name/node_modules/@storybook/preact/dist/cjs/server/framework-preset-preact.js',
ERR!     'repository-name/node_modules/@storybook/preact/preset.js',
ERR!     'repository-name/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR!     'repository-name/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR!     'repository-name/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     'repository-name/node_modules/@storybook/preact/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     'repository-name/node_modules/@storybook/preact/node_modules/@storybook/core/server.js',
ERR!     'repository-name/node_modules/@storybook/preact/dist/cjs/server/index.js',
ERR!     'repository-name/node_modules/@storybook/preact/bin/index.js'
ERR!   ]

聞いてみた

issueじゃなくてdiscussionsの内容だったので移動

esm.shとかのCDN使って、esm形式の@storybook/preactを使えんかなぁ

discussionsの返事きてた

Freshではシンプルにpreact使ってるだけだから、Storybookを使いたいのであればnpmからやる方が良さそうか〜

リファレンス

preact用のStorybook

Freshでのコンポーネントのテストってどうすんのってissue