create-buntui 0.0.0 → 0.1.0-alpha.2

package/templates/full/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "erasableSyntaxOnly": true,
+    "types": ["bun"],
+    "vueCompilerOptions": {
+      "target": 3.5,
+      "strictTemplates": true
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "node_modules/@buntui/core/dist/global.d.ts"
+  ]
+}

package/templates/sfc/README.md

@@ -0,0 +1,28 @@
+# {{name}}
+
+A terminal UI application built with [buntui](https://github.com/AlphaFoxz/buntui) using SFC (Single File Component) templates.
+
+## Development
+
+```bash
+bun run dev
+```
+
+Hot module replacement (HMR) is enabled. Edit `.vue` files and see changes live.
+
+## Build
+
+```bash
+bun run build
+```
+
+The built output is in `dist/`.
+
+## Project Structure
+
+```
+src/
+  main.ts      Production entry
+  dev.ts       Dev server with HMR
+  App.vue      Root SFC component
+```

package/templates/sfc/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "{{name}}",
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "bun --preload @buntui/compiler/vue-plugin src/dev.ts",
+        "build": "bun run ./scripts/build.ts"
+    },
+    "dependencies": {
+        "@buntui/core": "{{version}}",
+        "@buntui/compiler": "{{version}}",
+        "@buntui/native": "{{version}}",
+        "@buntui/extensions": "{{version}}",
+        "@vue/reactivity": "^3.5.34"
+    },
+    "devDependencies": {
+        "@types/bun": "latest",
+        "vue": "^3.5.34",
+        "vue-tsc": "^3.2.8"
+    }
+}

package/templates/sfc/scripts/build.ts

@@ -0,0 +1,66 @@
+import process from 'node:process';
+import path from 'node:path';
+import fs from 'node:fs';
+import {compile, CORE_REGISTRY} from '@buntui/compiler';
+import {getBinaryPath} from '@buntui/native';
+
+const result = await Bun.build({
+  entrypoints: ['src/main.ts'],
+  outdir: 'dist',
+  target: 'bun',
+  minify: true,
+  plugins: [
+    {
+      name: 'buntui-vue',
+      setup(build) {
+        build.onLoad({filter: /\.vue$/v}, async args => {
+          const source = await Bun.file(args.path).text();
+          const compiled = compile(source, {
+            filename: args.path,
+            registry: CORE_REGISTRY,
+            codegen: {
+              coreModuleId: '@buntui/core',
+              reactivityModuleId: '@vue/reactivity',
+            },
+          });
+          return {contents: compiled.code, loader: 'ts'};
+        });
+      },
+    },
+  ],
+});
+
+if (!result.success) {
+  for (const error of result.logs) {
+    console.error(error);
+  }
+
+  process.exit(1);
+}
+
+for (const output of result.outputs) {
+  console.log(`Built: ${output.path} (${(output.size / 1024).toFixed(1)} KB)`);
+}
+
+function getBinaryExt(): string {
+  if (process.platform === 'win32') return 'dll';
+  if (process.platform === 'darwin') return 'dylib';
+  return 'so';
+}
+
+const binaryName = `buntui.${getBinaryExt()}`;
+const nativePath = getBinaryPath();
+const dllSearchPaths = [
+  ...(nativePath ? [nativePath] : []),
+  path.resolve(import.meta.dir, '..', 'node_modules', '@buntui', 'core', binaryName),
+  path.resolve(import.meta.dir, '..', binaryName),
+];
+
+for (const candidate of dllSearchPaths) {
+  if (fs.existsSync(candidate)) {
+    const dest = path.resolve(import.meta.dir, '..', 'dist', binaryName);
+    fs.copyFileSync(candidate, dest);
+    console.log(`Copied: ${binaryName} -> dist/`);
+    break;
+  }
+}

package/templates/sfc/src/App.vue

@@ -0,0 +1,44 @@
+<template>
+    <Box
+        :x="'20%'"
+        :y="'25%'"
+        :width="'60%'"
+        :height="12"
+        :colorBg="'rgba(30,30,46,1)'"
+        :borderColor="'rgba(137,180,250,1)'"
+        borderStyle="rounded"
+        :direction="'vertical'"
+        :gap="1"
+        :align="'center'"
+        :paddingTop="1"
+        :paddingBottom="1"
+        :paddingLeft="2"
+        :paddingRight="2"
+    >
+        <Text :colorFg="'rgba(137,180,250,1)'" :value="title" styleModifier="bold" />
+        <Text :colorFg="'rgba(166,227,161,1)'" value="SFC template with hot reload" />
+        <Text :colorFg="'rgba(205,214,244,1)'" value="Edit src/App.vue to get started" />
+        <Text :colorFg="'rgba(108,112,134,1)'" :value="clock" />
+        <Box :direction="'horizontal'" :gap="2" :align="'center'">
+            <Button :value="'Count: ' + count" @click="increment" />
+        </Box>
+    </Box>
+</template>
+
+<script setup lang="ts">
+import { onTick } from '@buntui/core'
+import { ref } from '@vue/reactivity'
+
+const title = '{{name}}'
+const clock = ref('')
+const count = ref(0)
+
+onTick(() => {
+    const now = new Date()
+    clock.value = now.toLocaleTimeString()
+})
+
+function increment() {
+    count.value++
+}
+</script>

package/templates/sfc/src/dev.ts

@@ -0,0 +1,40 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import {createDevServer, CORE_REGISTRY, type DevServerOptions} from '@buntui/compiler';
+import {mountHmrErrorOverlay, type HmrErrorOverlayHandle} from '@buntui/extensions/hmr-error-overlay';
+import {ENTRY, run} from './main';
+
+const DEV_DIR = path.join(import.meta.dir, '.dev');
+fs.mkdirSync(DEV_DIR, {recursive: true});
+
+const {scene} = run({logFilePath: DEV_DIR});
+
+const VUE_FILE = path.join(import.meta.dir, ENTRY);
+
+let errorOverlay: HmrErrorOverlayHandle | undefined;
+
+createDevServer({
+  file: VUE_FILE,
+  tempDir: DEV_DIR,
+  compileOptions: {
+    registry: CORE_REGISTRY,
+    codegen: {
+      coreModuleId: '@buntui/core',
+      reactivityModuleId: '@vue/reactivity',
+    },
+  },
+  onClear() {
+    errorOverlay?.dismiss();
+    errorOverlay = undefined;
+    scene.clearWidgets();
+  },
+  onReload(setupFn: (scene: unknown) => void) {
+    errorOverlay?.dismiss();
+    errorOverlay = undefined;
+    setupFn(scene);
+  },
+  onError(error: Error) {
+    errorOverlay?.dismiss();
+    errorOverlay = mountHmrErrorOverlay(scene, error);
+  },
+} satisfies DevServerOptions);

package/templates/sfc/src/main.ts

@@ -0,0 +1,21 @@
+import {createApp} from '@buntui/core';
+import App from './App.vue';
+
+export const ENTRY = 'App.vue';
+
+export function run(devOptions: {logFilePath?: string} = {}) {
+  const app = createApp({
+    logLevel: 'debug',
+    clearLog: true,
+    tickRate: 60,
+    renderRate: 24,
+    ...devOptions,
+  });
+  const scene = app.createScene(App, {bgHexRgb: 0x1A_1B_26, visible: true});
+  app.start();
+  return {app, scene};
+}
+
+if (import.meta.main) {
+  run();
+}

package/templates/sfc/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "erasableSyntaxOnly": true,
+    "types": ["bun"],
+    "vueCompilerOptions": {
+      "target": 3.5,
+      "strictTemplates": true
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "node_modules/@buntui/core/dist/global.d.ts"
+  ]
+}

package/src/index.ts

@@ -1,10 +0,0 @@
-import process from 'node:process';
-import {createApp} from '@buntui/core';
-import {setupUI} from './setup-ui';
-
-const args = process.argv.slice(2);
-const defaultName = args[0];
-
-const app = createApp({logLevel: 'warning', clearLog: true});
-setupUI(app, defaultName);
-app.start();

package/src/scaffold.ts

@@ -1,25 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import {execSync} from 'node:child_process';
-
-const templateDir = path.resolve(import.meta.dir, '..', 'templates', 'basic');
-
-export function scaffold(projectName: string, targetDir: string): void {
-  const outputDir = path.resolve(targetDir, projectName);
-
-  if (fs.existsSync(outputDir)) {
-    throw new Error(`Directory already exists: ${outputDir}`);
-  }
-
-  fs.mkdirSync(outputDir, {recursive: true});
-
-  const files = fs.readdirSync(templateDir);
-  for (const file of files) {
-    const src = path.join(templateDir, file);
-    const content = fs.readFileSync(src, 'utf-8');
-    const rendered = content.replaceAll('{{name}}', projectName);
-    fs.writeFileSync(path.join(outputDir, file), rendered, 'utf-8');
-  }
-
-  execSync('bun install', {cwd: outputDir, stdio: 'inherit'});
-}

package/src/setup-ui.ts

@@ -1,145 +0,0 @@
-#!/usr/bin/env bun
-import process from 'node:process';
-import {
-  createBox,
-  createTextWidget,
-  createInputWidget,
-  createButtonWidget,
-  type createApp,
-} from '@buntui/core';
-import {scaffold} from './scaffold';
-
-type TuiApp = ReturnType<typeof createApp>;
-
-const ACCENT = 'rgb(122, 162, 247)';
-const BG = 'rgb(26, 27, 38)';
-const SURFACE = 'rgb(36, 40, 59)';
-const TEXT = 'rgb(192, 202, 229)';
-const TEXT_DIM = 'rgb(86, 95, 137)';
-
-export function setupUI(app: TuiApp, defaultName?: string): void {
-  const scene = app.createScene({
-    setup() {
-      /* No-op */
-    },
-  }, {bgHexRgb: BG, visible: true});
-
-  // Title bar
-  scene.mount(createTextWidget({
-    x: 0,
-    y: 0,
-    width: '100%',
-    height: 1,
-    value: ' Create Buntui App',
-    colorFg: ACCENT,
-    colorBg: BG,
-  }));
-
-  // Container box
-  const box = createBox({
-    x: '25%',
-    y: '20%',
-    width: '50%',
-    height: 12,
-    colorBg: SURFACE,
-    borderColor: ACCENT,
-    borderStyle: 'solid',
-  });
-  const input = createInputWidget({
-    x: '0%',
-    y: '22%',
-    value: defaultName ?? 'my-buntui-app',
-    colorFg: TEXT,
-    colorBg: BG,
-    borderColorUnfocused: TEXT_DIM,
-    borderColorFocused: ACCENT,
-    borderStyle: 'solid',
-    placeholder: 'Type something...',
-    label: 'Project name',
-  });
-  box.addChild(input);
-  scene.mount(box);
-
-  // Create button
-  const createBtn = createButtonWidget({
-    x: '35%',
-    y: '50%',
-    width: 12,
-    height: 3,
-    value: ' Create ',
-    colorFgNormal: BG,
-    colorBgNormal: ACCENT,
-    borderColorNormal: ACCENT,
-    borderStyleNormal: 'solid',
-    colorFgFocused: BG,
-    colorBgFocused: 'rgb(157, 122, 247)',
-    borderColorFocused: 'rgb(157, 122, 247)',
-    borderStyleFocused: 'solid',
-    colorFgPressed: BG,
-    colorBgPressed: 'rgb(91, 110, 181)',
-    borderColorPressed: 'rgb(91, 110, 181)',
-    borderStylePressed: 'solid',
-  });
-
-  // Cancel button
-  const cancelBtn = createButtonWidget({
-    x: '50%',
-    y: '50%',
-    width: 12,
-    height: 3,
-    value: ' Cancel ',
-    colorFgNormal: TEXT_DIM,
-    colorBgNormal: SURFACE,
-    borderColorNormal: TEXT_DIM,
-    borderStyleNormal: 'solid',
-    colorFgFocused: TEXT,
-    colorBgFocused: 'rgb(59, 66, 91)',
-    borderColorFocused: TEXT,
-    borderStyleFocused: 'solid',
-    colorFgPressed: TEXT_DIM,
-    colorBgPressed: 'rgb(42, 48, 69)',
-    borderColorPressed: 'rgb(42, 48, 69)',
-    borderStylePressed: 'solid',
-  });
-
-  // Status text
-  const status = createTextWidget({
-    x: '27%',
-    y: '60%',
-    width: '46%',
-    height: 1,
-    value: '',
-    colorFg: TEXT_DIM,
-    colorBg: BG,
-  });
-
-  createBtn.on('click', () => {
-    const name = input.value.trim();
-    if (!name) {
-      status.updateValue(' Please enter a project name');
-      return;
-    }
-
-    status.updateValue(' Creating project...');
-    try {
-      scaffold(name, process.cwd());
-      status.updateValue(` Project "${name}" created successfully!`);
-      setTimeout(() => {
-        app.dispose();
-        process.exit(0);
-      }, 1500);
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      status.updateValue(` ${message}`);
-    }
-  });
-
-  cancelBtn.on('click', () => {
-    app.dispose();
-    process.exit(0);
-  });
-
-  scene.mount(createBtn);
-  scene.mount(cancelBtn);
-  scene.mount(status);
-}

package/templates/basic/index.ts

@@ -1,30 +0,0 @@
-import {createApp, createTextWidget, createBox} from 'buntui';
-
-const app = createApp();
-const scene = app.createScene({
-  setup() {},
-}, {bgHexRgb: 0x1A_1B_26, visible: true});
-
-const title = createTextWidget({
-  x: 0,
-  y: 0,
-  width: '100%',
-  height: 1,
-  value: 'Hello from {{name}}!',
-  colorFg: 0x7A_A2_F7,
-  colorBg: 0x1A_1B_26,
-});
-
-const box = createBox({
-  x: '10%',
-  y: '20%',
-  width: '80%',
-  height: '60%',
-  colorBg: 0x24_28_3B,
-  borderColor: 0x7A_A2_F7,
-  borderStyle: 'solid',
-});
-
-scene.mount(box);
-scene.mount(title);
-app.start();