@vantail/create 0.1.0

package/templates/svelte-ts/src/App.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { app, dialog, filesystem, VantailError } from "@vantail/api";
+
+  let contents = $state<string | null>(null);
+  let path = $state<string | null>(null);
+  let error = $state<string | null>(null);
+
+  const info = app.infoSync();
+
+  async function open() {
+    error = null;
+    try {
+      const picked = await dialog.openFile({ title: "Open a text file" });
+      if (!picked) return;
+
+      // Picking the file in the dialog is what grants access to it - the
+      // config above never mentions this path.
+      path = picked;
+      contents = await filesystem.readText(picked);
+    } catch (cause) {
+      error = VantailError.is(cause) ? `${cause.code}: ${cause.message}` : String(cause);
+    }
+  }
+</script>
+
+<main>
+  <h1>{info?.name ?? "Vantail"}</h1>
+  <p class="meta">v{info?.version}</p>
+
+  <button onclick={() => void open()}>Select file</button>
+
+  {#if error}<p class="error">{error}</p>{/if}
+  {#if path}<p class="meta">{path}</p>{/if}
+  {#if contents !== null}<pre>{contents}</pre>{:else}<p class="meta">No file open.</p>{/if}
+</main>

package/templates/svelte-ts/src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from "svelte";
+
+import App from "./App.svelte";
+import "./style.css";
+
+const target = document.getElementById("app");
+if (!target) throw new Error("index.html is missing #app");
+
+export default mount(App, { target });

package/templates/svelte-ts/src/style.css

@@ -0,0 +1,60 @@
+:root {
+  color-scheme: light dark;
+  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.meta {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.error {
+  margin: 0;
+  color: #d43b3b;
+  font-size: 13px;
+}
+
+button {
+  align-self: flex-start;
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+pre {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border-radius: 8px;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

package/templates/svelte-ts/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+// Where the `*.svelte` module declarations come from. Without this an editor
+// cannot resolve `import App from "./App.svelte"`.
+/// <reference types="svelte" />

package/templates/svelte-ts/svelte.config.js

@@ -0,0 +1,6 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+  // What lets a component write `<script lang="ts">`.
+  preprocess: vitePreprocess(),
+};

package/templates/svelte-ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vantail.config.ts", "vite.config.ts", "svelte.config.js"]
+}

package/templates/svelte-ts/vantail.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig } from "@vantail/cli";
+
+export default defineConfig({
+  app: {
+    name: "__APP_NAME__",
+    identifier: "__APP_IDENTIFIER__",
+    version: "0.1.0",
+    // A square PNG. Every size each platform asks for is scaled down from it.
+    icon: "icon.png",
+  },
+
+  window: {
+    title: "__APP_NAME__",
+    width: 900,
+    height: 640,
+    minWidth: 480,
+    minHeight: 360,
+  },
+
+  // On macOS this is not decoration: without these predefined items in the
+  // menu, Cmd-C, Cmd-V and Cmd-Z do not work anywhere in the application.
+  // Add your own submenus alongside them.
+  menu: [
+    {
+      type: "submenu",
+      label: "__APP_NAME__",
+      items: [
+        { type: "predefined", item: "about" },
+        { type: "separator" },
+        { type: "predefined", item: "hide" },
+        { type: "predefined", item: "quit" },
+      ],
+    },
+    {
+      type: "submenu",
+      label: "Edit",
+      items: [
+        { type: "predefined", item: "undo" },
+        { type: "predefined", item: "redo" },
+        { type: "separator" },
+        { type: "predefined", item: "cut" },
+        { type: "predefined", item: "copy" },
+        { type: "predefined", item: "paste" },
+        { type: "predefined", item: "selectAll" },
+      ],
+    },
+  ],
+
+  // Everything is denied until you ask for it. Start small: `dialog` plus the
+  // default `grantFromDialog` is enough to open any file the user picks,
+  // without granting standing access to their disk.
+  permissions: {
+    dialog: true,
+    clipboard: true,
+    menu: true,
+    filesystem: {
+      write: ["$APPDATA/**"],
+    },
+  },
+});

package/templates/svelte-ts/vite.config.ts

@@ -0,0 +1,8 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from "vite";
+
+// `vantail dev` adds the Vantail plugin itself - this file is only for what
+// your interface needs.
+export default defineConfig({
+  plugins: [svelte()],
+});

package/templates/vanilla-ts/README.md

@@ -0,0 +1,34 @@
+# __APP_NAME__
+
+Built with [Vantail](https://github.com/jeroenvanwissen/vantail).
+
+```bash
+npm install
+npm run dev       # native window against the Vite dev server
+npm run build     # build the web assets
+npm run package   # produce a distributable application
+npm run doctor    # check that everything needed is installed
+```
+
+There is no Node.js in this app. `node:fs` and friends do not exist - use
+`@vantail/api` instead:
+
+```ts
+import { dialog, filesystem } from "@vantail/api";
+
+const path = await dialog.openFile();
+if (path) console.log(await filesystem.readText(path));
+```
+
+Native access is denied by default and granted in `vantail.config.ts`. The same
+file also describes the application menu, and can add a tray icon and a
+self-updater.
+
+More windows are labels, opened at runtime:
+
+```ts
+import { app, createWindow } from "@vantail/api";
+
+const settings = await createWindow("settings", { url: "settings.html" });
+await app.emit("hello", { from: "main" }, { to: "settings" });
+```

package/templates/vanilla-ts/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.vantail/
+build/
+.DS_Store

package/templates/vanilla-ts/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <main>
+      <h1 id="title">__APP_NAME__</h1>
+      <p class="meta" id="version"></p>
+
+      <button id="open">Select file</button>
+
+      <p class="error" id="error" hidden></p>
+      <p class="meta" id="path"></p>
+      <pre id="contents"></pre>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vanilla-ts/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vantail dev",
+    "build": "vantail build",
+    "package": "vantail package",
+    "doctor": "vantail doctor"
+  },
+  "dependencies": {
+    "@vantail/api": "^0.1.0"
+  },
+  "devDependencies": {
+    "@vantail/cli": "^0.1.0",
+    "typescript": "^5.9.0",
+    "vite": "^8.0.0"
+  }
+}

package/templates/vanilla-ts/src/main.ts

@@ -0,0 +1,36 @@
+import { app, dialog, filesystem, VantailError } from "@vantail/api";
+
+import "./style.css";
+
+const openButton = document.querySelector<HTMLButtonElement>("#open")!;
+const errorLine = document.querySelector<HTMLParagraphElement>("#error")!;
+const pathLine = document.querySelector<HTMLParagraphElement>("#path")!;
+const contents = document.querySelector<HTMLPreElement>("#contents")!;
+const version = document.querySelector<HTMLParagraphElement>("#version")!;
+
+// Injected before any script runs, so no await is needed for app identity.
+const info = app.infoSync();
+version.textContent = info ? `v${info.version}` : "";
+
+openButton.addEventListener("click", () => {
+  void open();
+});
+
+async function open(): Promise<void> {
+  errorLine.hidden = true;
+
+  try {
+    const picked = await dialog.openFile({ title: "Open a text file" });
+    if (!picked) return;
+
+    // Picking the file in the dialog is what grants access to it - the
+    // config never mentions this path.
+    pathLine.textContent = picked;
+    contents.textContent = await filesystem.readText(picked);
+  } catch (cause) {
+    errorLine.hidden = false;
+    errorLine.textContent = VantailError.is(cause)
+      ? `${cause.code}: ${cause.message}`
+      : String(cause);
+  }
+}

package/templates/vanilla-ts/src/style.css

@@ -0,0 +1,60 @@
+:root {
+  color-scheme: light dark;
+  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.meta {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.error {
+  margin: 0;
+  color: #d43b3b;
+  font-size: 13px;
+}
+
+button {
+  align-self: flex-start;
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+pre {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border-radius: 8px;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

package/templates/vanilla-ts/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vantail.config.ts"]
+}

package/templates/vanilla-ts/vantail.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig } from "@vantail/cli";
+
+export default defineConfig({
+  app: {
+    name: "__APP_NAME__",
+    identifier: "__APP_IDENTIFIER__",
+    version: "0.1.0",
+    // A square PNG. Every size each platform asks for is scaled down from it.
+    icon: "icon.png",
+  },
+
+  window: {
+    title: "__APP_NAME__",
+    width: 900,
+    height: 640,
+    minWidth: 480,
+    minHeight: 360,
+  },
+
+  // On macOS this is not decoration: without these predefined items in the
+  // menu, Cmd-C, Cmd-V and Cmd-Z do not work anywhere in the application.
+  // Add your own submenus alongside them.
+  menu: [
+    {
+      type: "submenu",
+      label: "__APP_NAME__",
+      items: [
+        { type: "predefined", item: "about" },
+        { type: "separator" },
+        { type: "predefined", item: "hide" },
+        { type: "predefined", item: "quit" },
+      ],
+    },
+    {
+      type: "submenu",
+      label: "Edit",
+      items: [
+        { type: "predefined", item: "undo" },
+        { type: "predefined", item: "redo" },
+        { type: "separator" },
+        { type: "predefined", item: "cut" },
+        { type: "predefined", item: "copy" },
+        { type: "predefined", item: "paste" },
+        { type: "predefined", item: "selectAll" },
+      ],
+    },
+  ],
+
+  // Everything is denied until you ask for it. Start small: `dialog` plus the
+  // default `grantFromDialog` is enough to open any file the user picks,
+  // without granting standing access to their disk.
+  permissions: {
+    dialog: true,
+    clipboard: true,
+    menu: true,
+    filesystem: {
+      write: ["$APPDATA/**"],
+    },
+  },
+});

package/templates/vue-ts/README.md

@@ -0,0 +1,34 @@
+# __APP_NAME__
+
+Built with [Vantail](https://github.com/jeroenvanwissen/vantail).
+
+```bash
+npm install
+npm run dev       # native window against the Vite dev server
+npm run build     # build the web assets
+npm run package   # produce a distributable application
+npm run doctor    # check that everything needed is installed
+```
+
+There is no Node.js in this app. `node:fs` and friends do not exist - use
+`@vantail/api` instead:
+
+```ts
+import { dialog, filesystem } from "@vantail/api";
+
+const path = await dialog.openFile();
+if (path) console.log(await filesystem.readText(path));
+```
+
+Native access is denied by default and granted in `vantail.config.ts`. The same
+file also describes the application menu, and can add a tray icon and a
+self-updater.
+
+More windows are labels, opened at runtime:
+
+```ts
+import { app, createWindow } from "@vantail/api";
+
+const settings = await createWindow("settings", { url: "settings.html" });
+await app.emit("hello", { from: "main" }, { to: "settings" });
+```

package/templates/vue-ts/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.vantail/
+build/
+.DS_Store

package/templates/vue-ts/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>__APP_NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vue-ts/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vantail dev",
+    "build": "vantail build",
+    "package": "vantail package",
+    "doctor": "vantail doctor"
+  },
+  "dependencies": {
+    "@vantail/api": "^0.1.0",
+    "vue": "^3.5.41"
+  },
+  "devDependencies": {
+    "@vantail/cli": "^0.1.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "typescript": "^5.9.0",
+    "vite": "^8.0.0"
+  }
+}

package/templates/vue-ts/src/App.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { app, dialog, filesystem, VantailError } from "@vantail/api";
+
+const contents = ref<string | null>(null);
+const path = ref<string | null>(null);
+const error = ref<string | null>(null);
+
+const info = app.infoSync();
+
+async function open() {
+  error.value = null;
+  try {
+    const picked = await dialog.openFile({ title: "Open a text file" });
+    if (!picked) return;
+
+    // Picking the file in the dialog is what grants access to it - the
+    // config above never mentions this path.
+    path.value = picked;
+    contents.value = await filesystem.readText(picked);
+  } catch (cause) {
+    error.value = VantailError.is(cause) ? `${cause.code}: ${cause.message}` : String(cause);
+  }
+}
+</script>
+
+<template>
+  <main>
+    <h1>{{ info?.name ?? "Vantail" }}</h1>
+    <p class="meta">v{{ info?.version }}</p>
+
+    <button @click="open">Select file</button>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="path" class="meta">{{ path }}</p>
+    <pre v-if="contents !== null">{{ contents }}</pre>
+    <p v-else class="meta">No file open.</p>
+  </main>
+</template>

package/templates/vue-ts/src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+
+import App from "./App.vue";
+import "./style.css";
+
+const target = document.getElementById("app");
+if (!target) throw new Error("index.html is missing #app");
+
+createApp(App).mount(target);

package/templates/vue-ts/src/style.css

@@ -0,0 +1,60 @@
+:root {
+  color-scheme: light dark;
+  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.meta {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.error {
+  margin: 0;
+  color: #d43b3b;
+  font-size: 13px;
+}
+
+button {
+  align-self: flex-start;
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+pre {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border-radius: 8px;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

package/templates/vue-ts/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vantail.config.ts", "vite.config.ts"]
+}