janela 0.18.0 → 0.19.0

package/templates/main.ts

@@ -9,8 +9,27 @@
 // against it; see `janela init --template vue`.
 
 import type { JanelaApp } from "janela/host";
+import { menuItem, menuSeparator, submenu, predefined } from "janela/host";
 
 export function setup(app: JanelaApp): void {
+  // A menu bar. Items carry their own handlers — there are no ids to declare
+  // or match — and `predefined` is the platform's own behaviour, callable like
+  // any other function.
+  //
+  // On macOS the standard submenus (App, Edit, View, Window) are kept around
+  // whatever you declare here, so this adds File without costing the app ⌘Q or
+  // ⌘V. Windows and Linux need no such floor: their editing keys belong to the
+  // webview, and Alt+F4 to the window manager.
+  app.setMenu([
+    submenu("File", [
+      menuItem("Say hello", "CmdOrCtrl+G", () => {
+        console.log("[host] hello from the menu");
+      }),
+      menuSeparator(),
+      menuItem("Close", "CmdOrCtrl+W", () => predefined.close()),
+    ]),
+  ]);
+
   app.command("greet", (args) => {
     const a = args as { name: string };
     return "Hello, " + a.name + "! You've been greeted from a native TypeScript binary.";

package/templates/react/files/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+//
+// Declares the modules Vite lets you import that TypeScript otherwise knows
+// nothing about — `./styles.css` most immediately, plus `import.meta.env` and
+// asset imports. Without it a side-effect CSS import is an error in any editor
+// running `noUncheckedSideEffectImports` (TypeScript 5.6+), which is exactly
+// what a red squiggle on line 1 of main.ts turns out to be.

package/templates/react/files/src-host/main.ts

@@ -10,6 +10,7 @@
 // returns `null`; every command answers the page's promise with a value.
 
 import type { JanelaApp } from "janela/host";
+import { menuItem, menuSeparator, submenu, predefined } from "janela/host";
 
 /** Every command this app answers. Declared once; the page checks against it. */
 export type AppCommands = {
@@ -30,6 +31,24 @@ export type App = JanelaApp<AppCommands, AppEvents>;
 // name must be one of the declared ones, `args` is inferred from it, and the
 // return value has to match.
 export function setup(app: App): void {
+  // A menu bar. Items carry their own handlers — there are no ids to declare
+  // or match — and `predefined` is the platform's own behaviour, callable like
+  // any other function.
+  //
+  // On macOS the standard submenus (App, Edit, View, Window) are kept around
+  // whatever you declare here, so this adds File without costing the app ⌘Q or
+  // ⌘V. Windows and Linux need no such floor: their editing keys belong to the
+  // webview, and Alt+F4 to the window manager.
+  app.setMenu([
+    submenu("File", [
+      menuItem("Say hello", "CmdOrCtrl+G", () => {
+        console.log("[host] hello from the menu");
+      }),
+      menuSeparator(),
+      menuItem("Close", "CmdOrCtrl+W", () => predefined.close()),
+    ]),
+  ]);
+
   app.command("greet", (args) => {
     return "Hello, " + args.name + "! You've been greeted from a native TypeScript binary.";
   });

package/templates/react/files/tsconfig.json

@@ -18,6 +18,7 @@
     "verbatimModuleSyntax": true
   },
   "include": [
+    "src/**/*.d.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
     "src-host/**/*.ts"

package/templates/solid/files/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+//
+// Declares the modules Vite lets you import that TypeScript otherwise knows
+// nothing about — `./styles.css` most immediately, plus `import.meta.env` and
+// asset imports. Without it a side-effect CSS import is an error in any editor
+// running `noUncheckedSideEffectImports` (TypeScript 5.6+), which is exactly
+// what a red squiggle on line 1 of main.ts turns out to be.

package/templates/solid/files/src-host/main.ts

@@ -10,6 +10,7 @@
 // returns `null`; every command answers the page's promise with a value.
 
 import type { JanelaApp } from "janela/host";
+import { menuItem, menuSeparator, submenu, predefined } from "janela/host";
 
 /** Every command this app answers. Declared once; the page checks against it. */
 export type AppCommands = {
@@ -30,6 +31,24 @@ export type App = JanelaApp<AppCommands, AppEvents>;
 // name must be one of the declared ones, `args` is inferred from it, and the
 // return value has to match.
 export function setup(app: App): void {
+  // A menu bar. Items carry their own handlers — there are no ids to declare
+  // or match — and `predefined` is the platform's own behaviour, callable like
+  // any other function.
+  //
+  // On macOS the standard submenus (App, Edit, View, Window) are kept around
+  // whatever you declare here, so this adds File without costing the app ⌘Q or
+  // ⌘V. Windows and Linux need no such floor: their editing keys belong to the
+  // webview, and Alt+F4 to the window manager.
+  app.setMenu([
+    submenu("File", [
+      menuItem("Say hello", "CmdOrCtrl+G", () => {
+        console.log("[host] hello from the menu");
+      }),
+      menuSeparator(),
+      menuItem("Close", "CmdOrCtrl+W", () => predefined.close()),
+    ]),
+  ]);
+
   app.command("greet", (args) => {
     return "Hello, " + args.name + "! You've been greeted from a native TypeScript binary.";
   });

package/templates/solid/files/tsconfig.json

@@ -19,6 +19,7 @@
     "verbatimModuleSyntax": true
   },
   "include": [
+    "src/**/*.d.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
     "src-host/**/*.ts"

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

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+//
+// Declares the modules Vite lets you import that TypeScript otherwise knows
+// nothing about — `./styles.css` most immediately, plus `import.meta.env` and
+// asset imports. Without it a side-effect CSS import is an error in any editor
+// running `noUncheckedSideEffectImports` (TypeScript 5.6+), which is exactly
+// what a red squiggle on line 1 of main.ts turns out to be.

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

@@ -10,6 +10,7 @@
 // returns `null`; every command answers the page's promise with a value.
 
 import type { JanelaApp } from "janela/host";
+import { menuItem, menuSeparator, submenu, predefined } from "janela/host";
 
 /** Every command this app answers. Declared once; the page checks against it. */
 export type AppCommands = {
@@ -30,6 +31,24 @@ export type App = JanelaApp<AppCommands, AppEvents>;
 // name must be one of the declared ones, `args` is inferred from it, and the
 // return value has to match.
 export function setup(app: App): void {
+  // A menu bar. Items carry their own handlers — there are no ids to declare
+  // or match — and `predefined` is the platform's own behaviour, callable like
+  // any other function.
+  //
+  // On macOS the standard submenus (App, Edit, View, Window) are kept around
+  // whatever you declare here, so this adds File without costing the app ⌘Q or
+  // ⌘V. Windows and Linux need no such floor: their editing keys belong to the
+  // webview, and Alt+F4 to the window manager.
+  app.setMenu([
+    submenu("File", [
+      menuItem("Say hello", "CmdOrCtrl+G", () => {
+        console.log("[host] hello from the menu");
+      }),
+      menuSeparator(),
+      menuItem("Close", "CmdOrCtrl+W", () => predefined.close()),
+    ]),
+  ]);
+
   app.command("greet", (args) => {
     return "Hello, " + args.name + "! You've been greeted from a native TypeScript binary.";
   });

package/templates/svelte/files/tsconfig.json

@@ -16,6 +16,7 @@
     "verbatimModuleSyntax": true
   },
   "include": [
+    "src/**/*.d.ts",
     "src/**/*.ts",
     "src/**/*.svelte",
     "src-host/**/*.ts"

package/templates/vue/files/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+//
+// Declares the modules Vite lets you import that TypeScript otherwise knows
+// nothing about — `./styles.css` most immediately, plus `import.meta.env` and
+// asset imports. Without it a side-effect CSS import is an error in any editor
+// running `noUncheckedSideEffectImports` (TypeScript 5.6+), which is exactly
+// what a red squiggle on line 1 of main.ts turns out to be.

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

@@ -10,6 +10,7 @@
 // returns `null`; every command answers the page's promise with a value.
 
 import type { JanelaApp } from "janela/host";
+import { menuItem, menuSeparator, submenu, predefined } from "janela/host";
 
 /** Every command this app answers. Declared once; the page checks against it. */
 export type AppCommands = {
@@ -30,6 +31,24 @@ export type App = JanelaApp<AppCommands, AppEvents>;
 // name must be one of the declared ones, `args` is inferred from it, and the
 // return value has to match.
 export function setup(app: App): void {
+  // A menu bar. Items carry their own handlers — there are no ids to declare
+  // or match — and `predefined` is the platform's own behaviour, callable like
+  // any other function.
+  //
+  // On macOS the standard submenus (App, Edit, View, Window) are kept around
+  // whatever you declare here, so this adds File without costing the app ⌘Q or
+  // ⌘V. Windows and Linux need no such floor: their editing keys belong to the
+  // webview, and Alt+F4 to the window manager.
+  app.setMenu([
+    submenu("File", [
+      menuItem("Say hello", "CmdOrCtrl+G", () => {
+        console.log("[host] hello from the menu");
+      }),
+      menuSeparator(),
+      menuItem("Close", "CmdOrCtrl+W", () => predefined.close()),
+    ]),
+  ]);
+
   app.command("greet", (args) => {
     return "Hello, " + args.name + "! You've been greeted from a native TypeScript binary.";
   });

package/templates/vue/files/tsconfig.json

@@ -16,6 +16,7 @@
     "verbatimModuleSyntax": true
   },
   "include": [
+    "src/**/*.d.ts",
     "src/**/*.ts",
     "src/**/*.vue",
     "src-host/**/*.ts"