0203

ログ

昨日に続き，riotjs, vite, tailwindcss, typescript でチャットアプリ開発

まだ開発環境の時点でコケている

riot を typescript で書きたいが，.riot ファイルのコンパイルができない

tsconfig.json をちょっといじる

-  "include": ["src"]
+  "include": ["**/*.ts", "src/**/*.riot", "global.d.ts"],
+  "exclude": ["node_modules"]

まだだめ

続いて vite.config.ts をちょっといじる

-  plugins: [
-    riotPlugin(),
-    typescript()
-  ]
+  root: process.cwd(),
+  plugins: [riotPlugin(), typescript()],
+  build: {
+    outDir:
+      "dist" /** https://vitejs.dev/config/build-options.html#build-outdir */,
+    minify:
+      "esbuild" /** https://vitejs.dev/config/build-options.html#build-minify */,
+    target:
+      "esnext" /** https://vitejs.dev/config/build-options.html#build-target */,
+  },

まだあかん
そもそも riot のコンパイルが行われてはいるが，ts のコンパイルがなされていない
これあれか．@riotjs/compiler で明示的に ts のコンパイル関数書かないといけなかったっけ
- pre-processor ってやつ
- そういえば @riotjs/hot-reload 入れてなかった
- なんか typescript の example 見ているが，別に pre-processor 書いてないな
withTypes か？いや違うな
types.ts で型を切り出して書くのが良いのか．何故かうまく行かない．
webpack ならいけるのに vite だと何故かいかない
カスタムプラグインのメソッドを書いて，その中で console.log() 仕込んだが，そもそも流れてこねぇ
改めて chat gpt に投げてみたら vite プラグインのコードが変わった

import ts from "typescript";
import fs from "fs";
import path from "path";

...

const riotPlugin = () => {
  return {
    name: "riot",
    transform(src: string, id: string) {
      if (id.endsWith(".riot")) {
        const { code: riotCompiledCode } = compile(src, { file: id });

        const tempFilePath = path.resolve(
          "./temp",
          path.basename(id) + ".ts"
        );
        if (!fs.existsSync(path.dirname(tempFilePath))) {
          fs.mkdirSync(path.dirname(tempFilePath), { recursive: true });
        }
        fs.writeFileSync(tempFilePath, riotCompiledCode);

        const tsResult = ts.transpileModule(riotCompiledCode, {
          compilerOptions: {
            module: ts.ModuleKind.ESNext,
            target: ts.ScriptTarget.ESNext,
          },
        });

        fs.unlinkSync(tempFilePath);

        return {
          code: tsResult.outputText,
          map: tsResult.sourceMapText
            ? JSON.parse(tsResult.sourceMapText)
            : null,
        };
      }
    },
  };
};

nodejs 標準モジュールをいくつか使うので type 定義もインスコ
- > pnpm install -D @types/node
なんか動いたが，> pnpm dev では typescript の型チェックが動いていない
- > pnpm build で型エラーが出た
- 直して再度実行したら動いたが，意図的に型エラー出るようなコードを書いてもエラーにならなかったので，そもそも動いてなさそう
- うーん，自己満だが VSCode が TS の型チェックしてくれるのでこのまま TS で書いていくことにする
README.md, LICENSE も追加
一旦これはこれでコンポーネントの作成にうつる

その前に，tailwindcss 読み込めていないのでそっちから

// tailwind.config.js
-  content: [],
+  content: ["./src/**/*.{html,js,riot}"],

その他設定は公式サイトのドキュメントそのまんまなので割愛
読み込み

// src/input.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

その他諸々の設定

// package.json
  "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "css": "tailwindcss -i ./src/input.css -o ./output.css",
     "preview": "vite preview"
  },

// index.html

     <title>RiotJS + Vite + TS</title>
+    <link href="/output.css" rel="stylesheet" />
  </head>

// index.html
+ <link href="/output.css" rel="stylesheet" />

一旦 riotjs, vite, tailwindcss, typescript でチャットアプリ開発の方はストップ．正直飽きた．
ちなみに Chat GPT - GPT4 さんにも尋ねてみた．曰く

提供したカスタムプラグインの設定では、.riot ファイル内の TypeScript コードをトランスパイルする際に、TypeScript の型チェックが行われていないことが原因で、意図的に仕込んだ TypeScript のエラーがビルド時に検出されない状況が発生しています。

（中略）

Vite ビルドプロセス中に.riot ファイル内の TypeScript コードに対する型チェックを行うことは、直接的なサポートがないため困難です。
とのこと
これは作らない限りは難しそう…少なくとも今の俺の技術力，typescript 力では分からない
なんとなく d.ts での型定義で行けなくはなさそうだが，ワークアラウンド的な対応になりかねないのでやるなら学んでから

0203

0203

ログ

results matching ""

No results matching ""