feat: add basic-jsx and basic-template examples

- basic-jsx: Counter + Clock with defineComponent() + JSX - basic-template: Counter + Clock with .vue SFC + <template> - Both demonstrate HMR via vue-tui dev - Fix vite-plugin: strip build.lib and external config for bundledDev, add node builtins resolveId to prevent browser-external shimming - Remove old hmr-demo example (superseded by basic-template) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-24 21:21:08 +08:00
parent e8ef31814a
commit 020fd0d85a
22 changed files with 333 additions and 92 deletions
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head></head>
+  <body>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,21 @@
+{
+  "name": "@vue-tui/example-basic-jsx",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vue-tui dev",
+    "build": "vite build",
+    "start": "vite build && node dist/game.mjs"
+  },
+  "dependencies": {
+    "@vue-tui/cli": "workspace:*",
+    "@vue-tui/runtime": "workspace:*",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@vitejs/plugin-vue-jsx": "^5",
+    "vite": "catalog:"
+  }
+}
@@ -0,0 +1,26 @@
+import { shallowRef, defineComponent } from "vue";
+import { Box, Text, useInput } from "@vue-tui/runtime";
+import Counter from "./Counter";
+import Clock from "./Clock";
+
+export default defineComponent(() => {
+  const showClock = shallowRef(true);
+
+  useInput((input) => {
+    if (input === "c") showClock.value = !showClock.value;
+    if (input === "q") process.exit(0);
+  });
+
+  return () => (
+    <Box flexDirection="column" paddingX={1}>
+      <Text bold color="cyan">
+        vue-tui basic (JSX)
+      </Text>
+      <Text dimColor>Try editing Counter.tsx or App.tsx</Text>
+      <Text dimColor>Press c=toggle clock, q=quit</Text>
+      <Text> </Text>
+      <Counter />
+      {showClock.value && <Clock />}
+    </Box>
+  );
+});
@@ -0,0 +1,26 @@
+import { shallowRef, onMounted, onUnmounted, defineComponent } from "vue";
+import { Box, Text } from "@vue-tui/runtime";
+
+export default defineComponent(() => {
+  const time = shallowRef(new Date().toLocaleTimeString());
+  let timer: ReturnType<typeof setInterval>;
+
+  onMounted(() => {
+    timer = setInterval(() => {
+      time.value = new Date().toLocaleTimeString();
+    }, 1000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(timer);
+  });
+
+  return () => (
+    <Box>
+      <Text>Clock: </Text>
+      <Text bold color="yellow">
+        {time.value}
+      </Text>
+    </Box>
+  );
+});
@@ -0,0 +1,21 @@
+import { shallowRef, defineComponent } from "vue";
+import { Box, Text, useInput } from "@vue-tui/runtime";
+
+export default defineComponent(() => {
+  const count = shallowRef(0);
+
+  useInput((input) => {
+    if (input === "+") count.value++;
+    if (input === "-") count.value--;
+  });
+
+  return () => (
+    <Box>
+      <Text>Count: </Text>
+      <Text bold color="green">
+        {count.value}
+      </Text>
+      <Text dimColor> (+/- to change)</Text>
+    </Box>
+  );
+});
@@ -0,0 +1,4 @@
+import { createApp } from "@vue-tui/runtime";
+import App from "./App";
+
+createApp(App).mount();
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { fileURLToPath } from "node:url";
+
+const here = fileURLToPath(new URL(".", import.meta.url));
+
+export default defineConfig({
+  plugins: [vueJsx()],
+  build: {
+    target: "node22",
+    outDir: "dist",
+    emptyOutDir: true,
+    minify: false,
+    lib: {
+      entry: `${here}src/main.tsx`,
+      formats: ["es"],
+      fileName: () => "game.mjs",
+    },
+    rollupOptions: {
+      external: (id) => !id.startsWith(".") && !id.startsWith("/") && !id.startsWith("\0"),
+    },
+  },
+});