概要

deno_webview を使ってデスクトップアプリ(のような何か)を作る際の雛形のまとめ

Starter: Minimum
Starter: Use Components

以下のスクリプトが全ての基本になっていて、

const script = " ... "の中身を記述するために使用するフレームワークの違い
const script = " ... "の中身を複数のファイルに分けて記述するかどうか

の2つの要素によって必要な処理が変わってくるという仕組み。

/** @jsx h */
import { Webview, SizeHint } from "https://deno.land/x/webview@0.7.4/mod.ts";
import { h, type VNode } from "https://esm.sh/preact@10.10.6"
import { renderToString　} from "https://esm.sh/preact-render-to-string@5.2.2"

const script = " ... "

function View(){
  return (
    <html>
      <head>
        <script dangerouslySetInnerHTML={{__html: script}}></script>
      </head>
      <body>
      </body>
    </html>
  )
}

const webview = new Webview(true)
webview.navigate(`data: text/html; charset=utf-8, ${encodeURIComponent( renderToString(View()) )}`)
webview.title = "deno app"

webview.run()

nikogoli

それぞれの形式の性質：ざっくり

preact

✅ JSX + typescript で記述できる
✅ import が通常通り利用できる = 型の情報を自動的に読み込んでくれる
❌ hydration のためにClient.jsx とそのバンドル処理が必要
❌❌ fresh で良くない？と思ってしまう

solidJS

✅✅✅ deno で solidJS が利用できる
🆗 JSX で記述できるが、処理不可能な型エラーのための@ts-ignoreが多め
❌ import が通常通り利用できない = 型の情報を自分で書く必要がある
❌ .jsx を .js に変換する処理が必要

solidJS の tagged template literals

✅✅✅ deno で solidJS が利用できる
🆗 JSX では記述できないが、基本的には全ての型エラーに@ts-ignoreなしで対処できる
❌ import が通常通り利用できない = 型の情報を自分で書く必要がある
❌ HTML 部分に補完・チェックが効かない。あと、記法の癖がわりと強い。

nikogoli

サンプルとして作った時計 (JSX版 solidJS)

nikogoli

Starter：Minimum 🔝

最もシンプルな形式のファイル構成。基本的には、以下の2つのみで動く。

main.tsx：webview を起動するスクリプト。deno run -A --unstable main.tsx する。
App.tsx / .jsx / .js：HTML の中身を構築する preact / solidJS のスクリプト。

deno task startすると、以下のようなウィンドウが起動する。

nikogoli

preact 版 🔝

main.tsx, App.tsx, Client.tsxの3点セット + deno task用のdeno.json + Icon の tsx^[1]。

main.tsx

App.tsxはそのまま読み込み、<body><App /></body>として挿入する (42行)
Client.tsxは deno_emit.bundle() ^[2]し、dangerouslySetInnerHTMLする (26,39行)

コード

App.tsx：いつもの preact

コード

Client.tsx：よくある Client.tsx。スタイルの都合上、<App>ではなく<body> が起点

コード

脚注

Icon の tsx ファイルをリモートから import すると renderToString がエラーを出すのでローカルに置いている。エラーになるようなものを使うなって話だが、solid 側と揃えたいので... ↩︎
Deno 1.22 で削除されたDeno.emit() をモジュールとして分離したもの。ネットに転がっている情報はこの変更に未対応なものが多いので注意 ↩︎

nikogoli

solidJS (JSX) 版 🔝

main.tsx, App.jsx の2点セット + Compile.ts + deno task用のdeno.json。

main.tsx

App.jsxは読み込み+ js への変換を行い、dangerouslySetInnerHTMLする (6,12,28,44行)

コード

App.jsx

エディタ上での jsx の処理には preact の h を使う^[1]
@deno-types=で solidJS の型情報を読み込むと色々と楽になる (11,13行)
solidJS 用のコンポーネントが h.JSX.Elementを返さないエラーは@ts-ignoreで無視(31行)
solidJS の関数に h.JSX.Elementが渡されるエラーは@ts-ignoreで無視(末尾)

コード

Compile.ts

基本的にはDeno.readTextFile() → Babel.transform(text, {presets: ["solid"]})するだけ
ブラウザで動くよう、Babel が加える import 文を URL からの import に変える(24行)

コード

脚注

React を使っても solid との噛み合わせの悪さは解消されず、むしろエラーが増えた。 ↩︎

nikogoli

solidJS (tagged template literals) 版 🔝

main.tsx, App.js の2点セット + deno task用のdeno.json。

main.tsx

App.jsは読み込んでそのまま、dangerouslySetInnerHTMLする (25,38行)

コード

App.js

HTML 部分以外の記述は JSX 版と全く同じものが利用できる^[1]
HTML 部分の記法については公式に簡単な説明がある
@deno-types=で solidJS の型情報を読み込むと色々と楽になる (7,9,11行)

コード

脚注

ただし、any による型エラーを消そうとすると、色々と追加で定義することになる。 ↩︎

nikogoli

Starter: Use Components 🔝

自作コンポーネントをローカルの別ファイルから読み込んで使う形式。

main.tsx：webview を起動するスクリプト。deno run -A --unstable main.tsx する。
App.tsx / .jsx / .js：HTML の中身を構築する preact / solidJS のスクリプト。
Components.tsx / .jsx / .js: コンポーネントを定義し、export するスクリプト。

deno task startすると、以下のようなウィンドウが起動する。

nikogoli

preact 版 🔝

main.tsx, App.tsx, Client.tsx の3点セット + Components.tsx + deno task用のdeno.json + Icon の tsx。

main.tsx：Minimum の場合と同じ

App.tsx：普通に import して使う (13,40-41行)

コード

Client.tsx：Minimum の場合と同じ

Components.tsx: いつもの preact

コード

nikogoli

solidJS (JSX) 版 🔝

main.tsx, App.jsx の2点セット + Components.jsx + Compile.ts + deno task用のdeno.json。

main.tsx

App.jsxの扱いは Minimum と同じ
Components.jsxは読み込み+ js へ変換+ base64 encode で data URL にする(39-45行)
さらにwebview.bind()を使ってこの URL をApp.jsx内で呼び出す関数を用意する (70行)

コード

App.jsx

bind された関数から得た data URL をimport()で読み込み、普通に使う (18-23,50行)
bind された関数は App.jsx内では未定義なので、エラーを @ts-ignoreする (21行)
その他は Minimum と同じ。コンポーネントの型を書いておけばエラーは出ない^[1]

コード

Compile.ts：Minimum の場合と同じ

Components.jsx：普通の solidJS。半分くらい JSDoc の記述が占める

コード

脚注

もちろん、返り値の型としてh.JSX.Elementという嘘を記述しておかなければエラーになる ↩︎

nikogoli

solidJS (tagged template literals) 版 🔝

main.tsx, App.js の2点セット + Components.js + deno task用のdeno.json。

main.tsx

App.jsの扱いは Minimum と同じ
Components.jsxは読み込み+ base64 encode して data URL を作る(30-31行)
さらにwebview.bind()を使ってこの URL をApp.jsx内で呼び出す関数を用意する (56行)

コード

App.js

bind された関数を使って data URL を得て、import()を使って読み込む (24-29行)
bind された関数は App.jsx内では未定義なので、エラーを@ts-ignoreする (27行)
コンポーネントへ props を渡す際には、無名関数でラップするのがおすすめ^[1] (55行)

コード

Components.js: 普通の tagged template literals

コード

脚注

詳しくは調査したスクラップを参照 ↩︎