electronでshadcnを使えるようにしてみる

electronにはビルドツールが色々ある。
Electron Forge: https://www.electronforge.io/
Electron Builder: https://www.electron.build/
Electron Vite: https://electron-vite.github.io/
Builderが一番GitHubのスター数多いけど、一番公式っぽい(リポジトリが electron配下にある) Forgeを使う。
Forgeはelectron公式の機能を1つのパイプラインとして使えるようにする、感じの思想っぽい。なので公式で追加された機能が素早く取り込める...とかそういう感じらしい。正直細かくは分からないけど、使ってみて困る部分は今の所特に無かった

https://www.electronforge.io/core-concepts/why-electron-forge

masaoblue

Vite + Typescriptで初期化できるのでとりあえずこれ

masaoblue

React導入もさくっとできる

masaoblue

標準だと

const root = createRoot(document.body);

になっているけど、なんとなくbody直は嫌なのでindex.htmlにid付きdivを定義して使う(metaタグ、linkタグはshadcn適用する時にあった方が良かったので入っている)

<!DOCTYPE html>
<html class="dark">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
    <link rel="stylesheet" href="/src/global.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/renderer.ts"></script>
  </body>
</html>

app.tsx


const root = createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(<Main />);

masaoblue

shadcnを入れる。

Vite環境に導入する手順を使ってみたら
npx tailwindcss init -p
でエラーが出て、マニュアルインストールしてねと言われたので以下を実施
https://ui.shadcn.com/docs/installation/manual
components.jsonも手動定義してねと言われるので以下をそのまま使った。

(なお、↓のプロジェクトをcloneして動かせばshadcn動く環境が手に入るけど、vite.config周りに今は不要になってそうな設定などが色々入っていそう & 手動構成を把握しておきたかったので今回の手順で1から入れてみている)
https://github.com/LuanRoger/electron-shadcn/blob/9c7db19/components.json

masaoblue

あと、shadcnのページに書いてあるtailwind.config.jsのパスが app/xxx みたいになっててうまく認識してくれなかったのでsrc配下を見るよう変更した

- content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+ content: ["src/**/*.{ts,tsx}", "src/components/**/*.{ts,tsx}"],

masaoblue

あとは npx shadcn@latest add button とかで適宜コンポーネントを導入して配置すればOKだった。

ただ、index.htmlのhtmlタグに class="dark" を付けてもdark modeにならなかった。今回はdarkにする必要がないのでとりあえず良しとする。