deno+vite+elm (with nix flake)

mkdir deno_elm_vite
cd deno_elm_vite

create-vite-extraのREADMEを参考に：

nix run nixpkgs#deno -- run -A npm:create-vite-extra@latest --template deno-vanilla-ts

そしてひとまず以下のflake.nixを用意する：

{
  inputs = {
    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
  };

  outputs = {nixpkgs, ...}: let
    allSystems = [
      "aarch64-darwin"
      "x86_64-darwin"
      "aarch64-linux"
      "x86_64-linux"
    ];
    forAllSystems = fn: nixpkgs.lib.genAttrs allSystems (system: fn system nixpkgs.legacyPackages.${system});
  in {
    devShell = forAllSystems (
      system: pkgs: let
        elmPkgs = with pkgs.elmPackages; [
          elm
          elm-language-server
        ];
      in
        pkgs.mkShell {
          packages = with pkgs;
            [
              deno
            ]
            ++ elmPkgs;
        }
    );
  };
}

Neo

vite-plugin-elmを使う：

deno install npm:vite-plugin-elm

先ほどのcreate-vite-extraで生成されたvite.config.tsに以下を追記：

vite.config.ts
  import { defineConfig } from "vite";
  import deno from "@deno/vite-plugin";
+ import elmPlugin from "vite-plugin-elm";

  export default defineConfig({
    plugins: [
      deno(),
+     elmPlugin(),
    ],
  });

Neo

elmをinitしておく：

elm init

Neo

src配下にMain.elmを作成：

Main.elm
module Main exposing (main)

import Html

main = Html.text "Hello, World!"

src配下のcounter.tsやらを消去し、main.tsを以下に書き換え：

main.ts
import { Elm } from "./Main.elm";

Elm.Main.init({
  node: document.getElementById("app"),
});

Neo

deno task devでHello World!と表示される。

Neo

Installing Tailwind CSSを参考に、PostCSSを使ってTailwindCSSを入れる。インストール時にnpmからdenoに置き換える：

deno install npm:tailwindcss npm:@tailwindcss/postcss npm:postcss

あとはリンク先に従ってdeno task devで試す。

作成者以外のコメントは許可されていません