Squint を触ってみる

TL;DR

• Squint のプロジェクトを pnpm で作り、.cljs ファイルを squint-cljs run で実行できた。
• Vite と組み合わせ、React の Hello, World を表示するところまで試した。続きは Squint + React + Vite のプロジェクトを作成する にまとめた。

背景

Clojure まわりのツールである Squint を触ってみたかった。題材として、React のチュートリアルを Squint と Vite でやってみることにした。

検証

プロジェクトをセットアップする

$ pnpm init
$ pnpm i squint-cljs@latest

サンプルコードを実行する

次のコードを example.cljs に書いた。

(ns example
  (:require ["fs" :as fs]
            ["url" :refer [fileURLToPath]]))
 
(println (fs/existsSync (fileURLToPath js/import.meta.url)))
 
(defn foo [{:keys [a b c]}]
  (+ a b c))
 
(println (foo {:a 1 :b 2 :c 3}))

$ pnpm dlx squint-cljs run example.cljs

Squint と Vite で React を動かす

Vite でプロジェクトを作り、依存関係に squint-cljs を追加した。

$ pnpm create vite my-vue-app --template vue
$ pnpm i squint-cljs@latest

動作確認のため、JSX のファイルをすべて削除し、次の src/main.cljs を追加した。

(ns main
  (:require ["react-dom/client" :refer [createRoot]]))
 
(def root (createRoot (js/document.getElementById "root")))
 
(.render root #jsx [:h1 "Hello, World!"])

index.html を public に移動し、<body> 内を書き換えた。

<body>
  <div id="root"></div>
  <!-- ここを以下に置き換え-->
  <script type="module" src="./js/main.jsx"></script>
</body>

Squint の README に従い、設定ファイル squint.edn を作った。

{:paths ["src"]
 :output-dir "public/js"
 :extension "jsx"}

最後に、Squint の監視と Vite の開発サーバを立ち上げた。

$ pnpm dlx squint-cljs watch
$ pnpm dlx vite --config=vite.config.js public

結果

サンプルコードを実行すると、次のように出力された。

[squint] Running example.cljs
true
6

キーワード

• Squint
• Clojure
• ClojureScript
• React
• JSX

参考

• squint-cljs/squint
• チュートリアル：三目並べ - React