create-tauri-ui 0.3.3 → 1.0.0

package/README.md

@@ -1,97 +1,188 @@
-![tauri-ui](https://github.com/agmmnn/tauri-ui/assets/16024979/c4c62dad-4ea7-4874-9ef4-b5d0b6ec10a1)
-
-# Tauri UI
-
-Create modern Tauri desktop apps in just a few simple steps. Tauri UI Templates is a starting point for building modern desktop applications with web technologies with using [shadcn/ui](https://github.com/shadcn/ui), [Tauri](https://github.com/tauri-apps/tauri).
-
-> _You can download pre-built final bundles from the [Releases](https://github.com/agmmnn/tauri-ui/releases) section._
-
-## Getting Started
-
-Use [create-tauri-ui](https://npmjs.com/package/create-tauri-ui) to quickly scaffold a Tauri UI project.
-
-```bash
-pnpm create tauri-ui
-```
-
-<details>
-
-```bash
-npx create-tauri-ui@latest
-pnpm create tauri-ui
-npm create tauri-ui@latest
-yarn create tauri-ui
-```
-
-Then follow the prompts!
-
-You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Tauri-UI project, run:
-
-```bash
-# npm 7+, extra double-dash is needed:
-npm create tauri-ui@latest my-tauri-app -- --template vite
-
-# yarn
-yarn create tauri-ui my-tauri-app --template next
-
-# pnpm
-pnpm create tauri-ui my-tauri-app --template sveltekit
-```
-
-</details>
-
-![cli](https://github.com/agmmnn/tauri-ui/assets/16024979/86bf3b81-8671-4de3-bb48-7fb24fe48802)
-You can use `.` for the project name to scaffold in the current directory.
-
-<details>
-
-<summary>
-Or clone the repository
-</summary>
-
-```bash
-gh repo clone agmmnn/tauri-ui
-cd tauri-ui/templates/<template>
-
-pnpm i
-pnpm tauri dev
-pnpm tauri build
-```
-
-</details>
-
-## Features
-
-- Components-based UI design with [shadcn/ui](https://ui.shadcn.com/). [Radix UI](https://www.radix-ui.com/) for UI primitives.
-- Native-looking window controls with [tauri-controls](https://github.com/agmmnn/tauri-controls).
-- Support for dark and light modes.
-- [Lucide Icons](https://lucide.dev/), [Radix Icons](https://icons.radix-ui.com/).
-- [Bundle size optimized](https://github.com/johnthagen/min-sized-rust) [`Cargo.toml`](/src-tauri/Cargo.toml) (.msi 2.5mb, .dmg 1.9mb, .deb 2mb)
-- [Tauri GitHub Action](https://github.com/tauri-apps/tauri-action), Cross-platform releases.
-
-![tauri-ui](https://user-images.githubusercontent.com/16024979/232823230-19d22434-8e28-43c2-bb70-e45a2fc2da88.gif)
-
-## Update Components
-
-### shadcn/ui
-
-Update all components:
-
-```bash
-npx shadcn-ui@latest add --overwrite
-# press "a" to select all components
-```
-
-Update a specific component:
-
-```bash
-npx shadcn-ui@latest add dialog --overwrite
-```
-
-## Acknowledgements
-
-This project utilizes code from the following repository:
-
-- [vitejs/create-vite](https://github.com/vitejs/vite/blob/main/packages/create-vite) - Used in _[create-tauri-ui](https://www.npmjs.com/package/create-tauri-ui)_
-- [shadcn/ui](https://github.com/shadcn/ui/tree/main/apps/www) - Used in _[Next.js](https://github.com/vercel/next.js/)_ and _[Vite](https://github.com/vitejs/vite)_ templates
-- [huntabyte/shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) - Used in _[SvelteKit](https://github.com/sveltejs/svelte)_ template
+# create-tauri-ui
+
+Create modern Tauri desktop apps with `shadcn/ui` in a few steps.
+
+This package scaffolds a frontend with the upstream `shadcn` CLI, generates a native shell with `create-tauri-app`, and merges the result into a Tauri-ready project. It is designed to avoid maintaining a large local template directory.
+
+## Quick Start
+
+Primary commands:
+
+```bash
+npm create tauri-ui@latest my-app
+```
+
+```bash
+bun create tauri-ui my-app
+```
+
+Equivalent direct binary commands:
+
+```bash
+npx create-tauri-ui@latest my-app
+```
+
+```bash
+bunx create-tauri-ui@latest my-app
+```
+
+## Supported Templates
+
+- `vite`
+- `next`
+- `start`
+- `react-router`
+- `astro`
+
+## Batteries Included
+
+Every generated project gets:
+
+- a Tauri `src-tauri` native layer
+- a frontend scaffold generated by the upstream `shadcn` CLI
+- template adapters for `vite`, `next`, `start`, `react-router`, and `astro`
+- Tauri config patches for desktop dev/build output
+- centered desktop window defaults with a `1400x918` main window
+- startup flash prevention by hiding the main window until the first page load finishes
+- external link guarding so internal links stay in-app and external links open in the system browser
+- a dev-only debug panel with Tauri runtime info, tracked invokes, runtime events, and log stream wiring
+- desktop scroll-container defaults that disable overscroll and rubber-band scrolling
+- desktop selection defaults with global `select-none`, an intrinsic selectable allowlist, and a `.ui-selectable` utility
+- a branded `app-icon.png` source asset
+
+Optional batteries:
+
+- a starter dashboard based on `dashboard-01`
+- a small Rust invoke example
+- a GitHub release workflow
+
+## Example Commands
+
+Generate a Vite app with defaults:
+
+```bash
+npm create tauri-ui@latest my-app -- --template vite --yes
+```
+
+Generate a Next.js app without the starter dashboard or workflow:
+
+```bash
+npm create tauri-ui@latest my-app -- --template next --yes --no-starter --no-workflow
+```
+
+Generate an Astro app with a custom identifier:
+
+```bash
+bun create tauri-ui my-app --template astro --identifier com.example.astroapp --yes
+```
+
+## CLI Options
+
+```text
+Usage: create-tauri-ui [target-dir] [options]
+
+Options:
+  -t, --template <name>         vite | next | start | react-router | astro
+      --identifier <value>      set the Tauri app identifier
+      --preset <value>          set the shadcn preset (default: b0)
+      --starter                 include the starter dashboard
+      --no-starter              skip the starter dashboard
+      --invoke-example          include the Rust invoke example
+      --no-invoke-example       skip the Rust invoke example
+      --workflow                include the GitHub release workflow
+      --no-workflow             skip the GitHub release workflow
+  -f, --force                   overwrite an existing target directory
+  -y, --yes                     accept defaults
+  -h, --help                    display help
+```
+
+## After Generation
+
+In the generated project:
+
+```bash
+cd my-app
+bun install
+bun run build
+bun run tauri dev
+```
+
+To generate the Tauri icon set from the included source image:
+
+```bash
+bunx tauri icon app-icon.png
+```
+
+## How It Works
+
+```text
+prompts -> shadcn init -> create-tauri-app (temp) -> merge src-tauri -> apply framework patches -> add batteries
+```
+
+The package keeps only a small local asset surface:
+
+- `assets/app-icon.png`
+- `assets/release.yml.tmpl`
+
+It does not ship full frontend templates.
+
+## Development
+
+Run these from the monorepo root:
+
+```bash
+bun run --cwd packages/create-tauri-ui check-types
+bun run --cwd packages/create-tauri-ui build
+```
+
+Run the local CLI build:
+
+```bash
+bun run --cwd packages/create-tauri-ui start -- --help
+```
+
+## Testing
+
+Quick validation:
+
+```bash
+bun run --cwd packages/create-tauri-ui check-types
+bun run --cwd packages/create-tauri-ui build
+```
+
+End-to-end smoke test from the monorepo root:
+
+```bash
+rm -rf /tmp/ctui-vite
+node packages/create-tauri-ui/index.js /tmp/ctui-vite --template vite --yes --no-workflow
+cd /tmp/ctui-vite
+bun install
+bun run build
+```
+
+Smoke test all templates:
+
+```bash
+for template in vite next start react-router astro; do
+  dir="/tmp/create-tauri-ui-$template"
+  rm -rf "$dir"
+  node packages/create-tauri-ui/index.js "$dir" --template "$template" --yes --no-workflow
+  (
+    cd "$dir" &&
+    bun install &&
+    bun run build
+  ) || exit 1
+done
+```
+
+## Current Notes
+
+- Bun is required in generated projects.
+- Scaffolding into `.` is not supported yet.
+- Vite has already been smoke-tested end to end.
+- The other adapters are implemented, but they still need broader end-to-end verification coverage.
+- `TanStack Start` is the highest-risk adapter and should be validated carefully after changes.
+
+## License
+
+MIT

package/assets/debug-panel/debug-events.ts.tmpl

@@ -0,0 +1,97 @@
+export const DEBUG_EVENT_NAME = "ctui:debug"
+
+type SerializedError = {
+  name: string
+  message: string
+  stack?: string
+}
+
+export type ExternalLinkDebugEvent = {
+  id: string
+  kind: "external-link"
+  href: string
+  timestamp: string
+}
+
+export type InvokeDebugEvent = {
+  id: string
+  kind: "invoke"
+  command: string
+  args: unknown
+  durationMs: number
+  status: "success" | "error"
+  result?: unknown
+  error?: SerializedError
+  timestamp: string
+}
+
+export type RuntimeEventDebugEvent = {
+  id: string
+  kind: "runtime-event"
+  name: string
+  source: "window" | "tauri-event"
+  payload?: unknown
+  timestamp: string
+}
+
+export type LogDebugEvent = {
+  id: string
+  kind: "log"
+  level: "log" | "info" | "warn" | "error" | "debug"
+  message: string
+  timestamp: string
+}
+
+export type DebugEvent =
+  | ExternalLinkDebugEvent
+  | InvokeDebugEvent
+  | RuntimeEventDebugEvent
+  | LogDebugEvent
+
+export function serializeError(error: unknown): SerializedError {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message,
+      stack: error.stack,
+    }
+  }
+
+  return {
+    name: "Error",
+    message: typeof error === "string" ? error : JSON.stringify(error),
+  }
+}
+
+export function serializeDebugValue(value: unknown): unknown {
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value === "boolean" ||
+    typeof value === "number"
+  ) {
+    return value ?? null
+  }
+
+  if (typeof value === "string") {
+    return value.length > 500 ? `${value.slice(0, 500)}…` : value
+  }
+
+  if (value instanceof Error) {
+    return serializeError(value)
+  }
+
+  try {
+    return JSON.parse(JSON.stringify(value))
+  } catch {
+    return String(value)
+  }
+}
+
+export function emitDebugEvent(detail: DebugEvent) {
+  if (typeof window === "undefined") {
+    return
+  }
+
+  window.dispatchEvent(new CustomEvent<DebugEvent>(DEBUG_EVENT_NAME, { detail }))
+}