0202

ログ

riotjs, vite, typescript, tailwindcss でチャットアプリをデモ的に

以下，作業ログ

> mkdir my-chat-app
> cd my-chat-app
> npm create vite@latest . -- --template vanilla-ts

# 俺は pnpm を使う
> pnpm install riot
> pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest
> npx tailwindcss init -p

# このタイミングで入れるのはアホだが
# リモートリポジトリはとりあえず後で
> git init

# 続いて typescript の設定
> pnpm install @riotjs/compiler @types/riot

現時点の package.json に書かれている各モジュールのバージョン

"devDependencies": {
  "@rollup/plugin-typescript": "^11.1.6",
  "autoprefixer": "^10.4.17",
  "postcss": "^8.4.33",
  "tailwindcss": "^3.4.1",
  "typescript": "^5.2.2",
  "vite": "^5.0.8"
},
"dependencies": {
  "@riotjs/compiler": "^9.0.7",
  "@types/riot": "^4.1.0",
  "riot": "^9.1.2"
}

続いて vite.config.ts を作成後，以下を追記

import { defineConfig } from "vite";
import riot from "@riotjs/compiler";
import typescript from "@rollup/plugin-typescript";

// Riot.js 用のカスタムプラグイン
const riotPlugin = () => {
  return {
    name: "riot",
    transform(code, id) {
      if (id.endsWith(".riot")) {
        const { code: compiledCode } = riot.compile(code, { file: id });
        return {
          code: compiledCode,
          map: null, // ソースマップはこの例では省略
        };
      }
    },
  };
};

export default defineConfig({
  plugins: [riotPlugin(), typescript()],
});

実行 → エラー
- Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@rollup/plugin-typescript'
- そうやろな
- > pnpm install @rollup/plugin-typescript
- 再実行，よし

そしたら，riot のコンポーネントを作ってみる

src/app.riot

<app>
  <p>{ props.message }</p>
</app>

src/main.ts

import './style.css'
- import typescriptLogo from './typescript.svg'
- import viteLogo from '/vite.svg'
- import { setupCounter } from './counter.ts'

+ import * as riot from 'riot'

- document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-   <div>
-     <a href="https://vitejs.dev" target="_blank">
-       <img src="${viteLogo}" class="logo" alt="Vite logo" />
-     </a>
-     <a href="https://www.typescriptlang.org/" target="_blank">
-       <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-     </a>
-     <h1>Vite + TypeScript</h1>
-     <div class="card">
-       <button id="counter" type="button"></button>
-     </div>
-     <p class="read-the-docs">
-       Click on the Vite and TypeScript logos to learn more
-     </p>
-   </div>
- `

+ import App from './app.riot'

- setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+ const mountApp = riot.component(App)
+ const app = mountApp(
+   document.getElementById('root'),
+   { message: 'Hello World', items: [] }
+ )

再実行，よし Hello World 出た

続いて global.d.ts を作成（ドキュメントルート）し以下を追記

declare module "*.riot" {
  import { RiotComponentWrapper } from "riot";
  const component: RiotComponentWrapper;
  export default component;
}

tsconfig.json を変更

     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },

     /* Bundler mode */
     "moduleResolution": "bundler",
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src/**/*", "global.d.ts"]
 }

今日はここで時間切れ

results matching ""

No results matching ""