vue-kaspa-cli 0.1.0

package/bin/index.mjs

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+import { createInterface } from 'node:readline/promises'
+import { stdin as input, stdout as output } from 'node:process'
+import { existsSync, mkdirSync, readdirSync, statSync, readFileSync, writeFileSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const TEMPLATES_DIR = join(__dirname, '..', 'templates')
+
+// npm strips .gitignore and treats package.json as the package manifest,
+// so templates use prefixed names that get renamed on copy.
+const RENAMES = {
+  '_gitignore': '.gitignore',
+  '_package.json': 'package.json',
+}
+
+const rl = createInterface({ input, output })
+
+async function ask(question, fallback) {
+  const answer = (await rl.question(question)).trim()
+  return answer || fallback
+}
+
+async function choose(question, choices) {
+  output.write(`${question}\n${choices.map((c, i) => `  ${i + 1}) ${c}`).join('\n')}\n`)
+  while (true) {
+    const n = parseInt((await rl.question('  Enter number: ')).trim(), 10) - 1
+    if (n >= 0 && n < choices.length) return choices[n]
+    output.write(`  Please enter 1–${choices.length}.\n`)
+  }
+}
+
+function copyDir(src, dest) {
+  mkdirSync(dest, { recursive: true })
+  for (const entry of readdirSync(src)) {
+    const srcPath = join(src, entry)
+    const destPath = join(dest, RENAMES[entry] ?? entry)
+    statSync(srcPath).isDirectory()
+      ? copyDir(srcPath, destPath)
+      : writeFileSync(destPath, readFileSync(srcPath))
+  }
+}
+
+async function main() {
+  output.write('\n  vue-kaspa-cli — scaffold a Kaspa-connected Vue/Nuxt app\n\n')
+
+  const name = await ask('  Project name (kaspa-app): ', 'kaspa-app')
+  const framework = await choose('\n  Framework:', ['Vue', 'Nuxt'])
+  rl.close()
+
+  const targetDir = join(process.cwd(), name)
+
+  if (existsSync(targetDir) && readdirSync(targetDir).length > 0) {
+    output.write(`\n  "${name}" already exists and is not empty.\n\n`)
+    process.exit(1)
+  }
+
+  copyDir(join(TEMPLATES_DIR, framework.toLowerCase()), targetDir)
+
+  const pkgPath = join(targetDir, 'package.json')
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'))
+  pkg.name = name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+
+  output.write(`
+  Done!
+
+  cd ${name}
+  npm install
+  npm run dev
+
+  Edit src/components/KaspaStatus.vue to start building.
+  Docs → https://furatamasensei.github.io/vue-kaspa
+
+`)
+}
+
+main().catch(e => { console.error(e); process.exit(1) })

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "vue-kaspa-cli",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Scaffold a Vue 3 or Nuxt app wired to the Kaspa blockchain",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/furatamasensei/vue-kaspa.git",
+    "directory": "packages/vue-kaspa-cli"
+  },
+  "bin": { "vue-kaspa-cli": "bin/index.mjs" },
+  "files": ["bin", "templates"],
+  "engines": { "node": ">=18.0.0" }
+}

package/templates/nuxt/_gitignore

@@ -0,0 +1,5 @@
+node_modules
+.nuxt
+.output
+dist
+.DS_Store

package/templates/nuxt/_package.json

@@ -0,0 +1,15 @@
+{
+  "name": "my-kaspa-nuxt-app",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@vue-kaspa/kaspa-wasm": "^1.2.0",
+    "nuxt": "^3.17.0",
+    "vue-kaspa": "^0.1.0"
+  }
+}

package/templates/nuxt/components/KaspaStatus.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// useKaspa, useRpc, and computed are auto-imported by Nuxt.
+// The nuxt module's client plugin handles init + connect via autoConnect: true.
+
+const kaspa = useKaspa()
+const rpc = useRpc()
+
+const stateLabel = computed(() => {
+  if (kaspa.wasmStatus.value === 'loading') return 'Loading WASM…'
+  if (kaspa.wasmStatus.value === 'error') return 'WASM Error'
+  return ({
+    disconnected: 'Disconnected',
+    connecting: 'Connecting…',
+    connected: 'Connected',
+    reconnecting: 'Reconnecting…',
+    error: 'Connection Error',
+  } as Record<string, string>)[rpc.connectionState.value] ?? rpc.connectionState.value
+})
+
+const badgeColor = computed(() => {
+  if (kaspa.wasmStatus.value !== 'ready') return '#9ca3af'
+  if (rpc.connectionState.value === 'connected') return '#4caf50'
+  if (rpc.connectionState.value === 'error') return '#f44336'
+  return '#9ca3af'
+})
+
+const daaScore = computed(() =>
+  rpc.virtualDaaScore.value > 0n ? rpc.virtualDaaScore.value.toLocaleString() : '—'
+)
+</script>
+
+<template>
+  <div style="width:100%;max-width:480px;padding:2rem;border:1px solid #e2e8f0;border-radius:10px;background:#f9f9f9;display:flex;flex-direction:column;gap:1.5rem;font-family:Inter,system-ui,sans-serif;">
+    <header style="display:flex;align-items:center;gap:.75rem;">
+      <span style="font-size:1.75rem;color:#49c5a3;line-height:1;">⬡</span>
+      <h1 style="font-size:1.25rem;font-weight:600;color:#1a1a1a;flex:1;margin:0;">vue-kaspa</h1>
+      <span :style="`font-size:.75rem;font-weight:500;padding:.2em .65em;border-radius:999px;border:1px solid ${badgeColor};color:${badgeColor};white-space:nowrap;`">
+        {{ stateLabel }}
+      </span>
+    </header>
+
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+      <div style="display:flex;flex-direction:column;gap:.25rem;">
+        <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Network</span>
+        <span style="font-size:.95rem;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ rpc.networkId.value ?? '—' }}</span>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:.25rem;">
+        <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Server version</span>
+        <span style="font-size:.95rem;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ rpc.serverVersion.value ?? '—' }}</span>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:.25rem;">
+        <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">DAA Score</span>
+        <span style="font-size:.95rem;color:#1a1a1a;font-family:monospace;">{{ daaScore }}</span>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:.25rem;">
+        <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Synced</span>
+        <span :style="`font-size:.95rem;color:${rpc.isConnected.value ? (rpc.isSynced.value ? '#4caf50' : '#1a1a1a') : '#9ca3af'};`">
+          {{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}
+        </span>
+      </div>
+    </div>
+
+    <footer style="display:flex;align-items:center;gap:.5rem;font-size:.85rem;border-top:1px solid #e2e8f0;padding-top:1rem;">
+      <a href="https://furatamasensei.github.io/vue-kaspa" target="_blank" rel="noopener" style="color:#374151;text-decoration:none;">Docs</a>
+      <span>·</span>
+      <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener" style="color:#374151;text-decoration:none;">GitHub</a>
+    </footer>
+  </div>
+</template>

package/templates/nuxt/nuxt.config.ts

@@ -0,0 +1,19 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2025-01-01',
+  modules: ['vue-kaspa/nuxt'],
+  kaspa: {
+    network: 'mainnet',
+    autoConnect: true,
+  },
+  // SharedArrayBuffer requires COOP/COEP headers in both dev and production.
+  nitro: {
+    routeRules: {
+      '/**': {
+        headers: {
+          'Cross-Origin-Embedder-Policy': 'require-corp',
+          'Cross-Origin-Opener-Policy': 'same-origin',
+        },
+      },
+    },
+  },
+})

package/templates/nuxt/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

package/templates/vue/_gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+dist-ssr
+*.local
+.DS_Store

package/templates/vue/_package.json

@@ -0,0 +1,24 @@
+{
+  "name": "my-kaspa-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@vue-kaspa/kaspa-wasm": "^1.2.0",
+    "vue": "^3.5.0",
+    "vue-kaspa": "^0.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.0",
+    "vite-plugin-wasm": "^3.6.0",
+    "vue-tsc": "^2.0.0"
+  }
+}

package/templates/vue/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kaspa App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vue/src/App.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useKaspa, useRpc } from 'vue-kaspa'
+import KaspaStatus from './components/KaspaStatus.vue'
+
+const kaspa = useKaspa()
+const rpc = useRpc()
+
+// KaspaPlugin doesn't call init/connect automatically — we do it here.
+// The promise is not awaited so the app renders immediately while WASM
+// loads and the RPC connection establishes in the background.
+onMounted(() => {
+  kaspa.init().then(() => rpc.connect()).catch(() => {})
+})
+</script>
+
+<template>
+  <main>
+    <KaspaStatus />
+  </main>
+</template>

package/templates/vue/src/components/KaspaStatus.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useKaspa, useRpc } from 'vue-kaspa'
+
+const kaspa = useKaspa()
+const rpc = useRpc()
+
+const stateLabel = computed(() => {
+  if (kaspa.wasmStatus.value === 'loading') return 'Loading WASM…'
+  if (kaspa.wasmStatus.value === 'error') return 'WASM Error'
+  return ({
+    disconnected: 'Disconnected',
+    connecting: 'Connecting…',
+    connected: 'Connected',
+    reconnecting: 'Reconnecting…',
+    error: 'Connection Error',
+  } as Record<string, string>)[rpc.connectionState.value] ?? rpc.connectionState.value
+})
+
+const stateClass = computed(() => {
+  if (kaspa.wasmStatus.value !== 'ready') return 'badge--pending'
+  if (rpc.connectionState.value === 'connected') return 'badge--ok'
+  if (rpc.connectionState.value === 'error') return 'badge--error'
+  return 'badge--pending'
+})
+
+const daaScore = computed(() =>
+  rpc.virtualDaaScore.value > 0n ? rpc.virtualDaaScore.value.toLocaleString() : '—'
+)
+</script>
+
+<template>
+  <div class="card">
+    <header class="card__header">
+      <span class="logo">⬡</span>
+      <h1 class="card__title">vue-kaspa</h1>
+      <span class="badge" :class="stateClass">{{ stateLabel }}</span>
+    </header>
+
+    <div class="grid">
+      <div class="stat">
+        <span class="stat__label">Network</span>
+        <span class="stat__value">{{ rpc.networkId.value ?? '—' }}</span>
+      </div>
+      <div class="stat">
+        <span class="stat__label">Server version</span>
+        <span class="stat__value">{{ rpc.serverVersion.value ?? '—' }}</span>
+      </div>
+      <div class="stat">
+        <span class="stat__label">DAA Score</span>
+        <span class="stat__value mono">{{ daaScore }}</span>
+      </div>
+      <div class="stat">
+        <span class="stat__label">Synced</span>
+        <span class="stat__value" :class="{ ok: rpc.isSynced.value, muted: !rpc.isConnected.value }">
+          {{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}
+        </span>
+      </div>
+    </div>
+
+    <footer class="card__footer">
+      <a href="https://furatamasensei.github.io/vue-kaspa" target="_blank" rel="noopener">Docs</a>
+      <span>·</span>
+      <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener">GitHub</a>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  width: 100%;
+  max-width: 480px;
+  padding: 2rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-background-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.card__header { display: flex; align-items: center; gap: .75rem; }
+.logo { font-size: 1.75rem; color: #49c5a3; line-height: 1; }
+.card__title { font-size: 1.25rem; font-weight: 600; color: var(--color-heading); flex: 1; margin: 0; }
+.badge {
+  font-size: .75rem;
+  font-weight: 500;
+  padding: .2em .65em;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+  white-space: nowrap;
+}
+.badge--ok      { color: #4caf50; }
+.badge--pending { color: var(--color-muted, #888); }
+.badge--error   { color: #f44336; }
+.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.stat { display: flex; flex-direction: column; gap: .25rem; }
+.stat__label {
+  font-size: .7rem;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: var(--color-muted, #888);
+}
+.stat__value {
+  font-size: .95rem;
+  color: var(--color-heading);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stat__value.mono  { font-family: monospace; }
+.stat__value.ok    { color: #4caf50; }
+.stat__value.muted { color: var(--color-muted, #888); }
+.card__footer {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  font-size: .85rem;
+  border-top: 1px solid var(--color-border);
+  padding-top: 1rem;
+}
+.card__footer a { color: var(--color-text); text-decoration: none; }
+.card__footer a:hover { color: var(--color-heading); }
+</style>

package/templates/vue/src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import { KaspaPlugin } from 'vue-kaspa'
+import App from './App.vue'
+import './style.css'
+
+createApp(App)
+  .use(KaspaPlugin, { network: 'mainnet', autoConnect: true })
+  .mount('#app')

package/templates/vue/src/style.css

@@ -0,0 +1,41 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --color-background: #ffffff;
+  --color-background-soft: #f9f9f9;
+  --color-border: #e2e8f0;
+  --color-heading: #1a1a1a;
+  --color-text: #374151;
+  --color-muted: #9ca3af;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: #1a1a1a;
+    --color-background-soft: #242424;
+    --color-border: #2d2d2d;
+    --color-heading: #ffffff;
+    --color-text: #d1d5db;
+    --color-muted: #6b7280;
+  }
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+}
+
+#app {
+  width: 100%;
+  max-width: 600px;
+  padding: 1.5rem;
+}

package/templates/vue/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/vue/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }]
+}

package/templates/vue/vite.config.ts

@@ -0,0 +1,22 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import wasm from 'vite-plugin-wasm'
+
+export default defineConfig({
+  plugins: [vue(), wasm()],
+  optimizeDeps: { exclude: ['@vue-kaspa/kaspa-wasm'] },
+  server: {
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        // kaspa-wasm must live in one chunk — class identity breaks across chunks.
+        manualChunks: id => id.includes('@vue-kaspa/kaspa-wasm') ? 'kaspa-wasm' : undefined,
+      },
+    },
+  },
+})