gantry-web 0.3.0 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantry-web",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Frontend half of the Gantry desktop app framework: window chrome, native bridge, Tea runtime, Vite plugin",
   "license": "MIT",
   "repository": {

package/src/app.tsx

@@ -1,14 +1,58 @@
 /// <reference path="../types/index.d.ts" />
 import { StrictMode, useEffect, type FC, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
-import { pages, components as pairedComponents, layouts, appConfig, type GantryPage } from "virtual:gantry-app";
 import { TitleBar, type TitleBarProps } from "./TitleBar";
 import { ResizeFrame } from "./ResizeFrame";
 import { installZoomGuard } from "./zoom";
 import { connect, ready } from "./socket";
 import { useRoute, redirect } from "./router";
 import { setRegistry, type ComponentRegistry, type TeaComponentProps } from "./tea/Runtime";
-import "./styles.css";
+
+/** The shape of a page module (a pages/<name>/<name>.tsx file). */
+export interface GantryPageModule {
+  default: FC;
+  /** export const chrome = false to hide the TitleBar on this page. */
+  chrome?: boolean;
+  /**
+   * Which layouts/ wrap this page: a name ("compact"), several nested
+   * outermost-first (["main", "compact"]), false for none, true to
+   * force "main" even on a chromeless page. Default: "main" if it
+   * exists (chromeless pages default to none).
+   */
+  layout?: boolean | string | string[];
+  /** export const route = "/custom" to override the derived route. */
+  route?: string;
+}
+
+export interface GantryPage {
+  key: string;
+  route: string;
+  mod: GantryPageModule;
+}
+
+/**
+ * The generated virtual:gantry-app module: the page/component/layout
+ * registry the Vite plugin derives from the app's folders. The
+ * synthesized .gantry/main.tsx imports it and hands it to createApp.
+ * gantry-web itself must never import the virtual module: esbuild
+ * cannot resolve virtual ids, so that import would force the package
+ * out of dep prebundling - and serving it as raw node_modules source
+ * lets Vite double-instantiate modules (?v=hash vs bare URLs), which
+ * split the router's subscriber set and broke navigation.
+ */
+export interface GantryAppModule {
+  pages: GantryPage[];
+  components: Record<string, { default: FC }>;
+  /** Layouts by short name: layouts/main/main.tsx -> "main". */
+  layouts: Record<string, { default: FC<{ children?: ReactNode }> }>;
+  /** The root app.tsx module (default export: CreateAppOptions), or null. */
+  appConfig: { default: CreateAppOptions } | null;
+  singlePage?: boolean;
+}
+
+// The registry handed to createApp; module-level so match/layoutsFor
+// read it without threading props.
+let reg: GantryAppModule;
 
 export interface CreateAppOptions {
   /** Title shown in the TitleBar (default: none). */
@@ -40,7 +84,7 @@ function routeOf(p: GantryPage): string {
 
 function match(path: string): GantryPage | undefined {
   const clean = path !== "/" && path.endsWith("/") ? path.slice(0, -1) : path;
-  return pages.find((p) => routeOf(p) === clean) ?? pages.find((p) => routeOf(p) === "/");
+  return reg.pages.find((p) => routeOf(p) === clean) ?? reg.pages.find((p) => routeOf(p) === "/");
 }
 
 function PageHost({ page }: { page: GantryPage }) {
@@ -72,19 +116,19 @@ function layoutsFor(page: GantryPage, chrome: boolean): FC<{ children?: ReactNod
   } else if (Array.isArray(sel)) {
     names = sel;
   } else if (sel === true) {
-    names = layouts.main ? ["main"] : [];
+    names = reg.layouts.main ? ["main"] : [];
   } else {
     // Default: the "main" layout on normal pages; chromeless pages
     // (widgets, popups) are their own surfaces and skip it.
-    names = chrome && layouts.main ? ["main"] : [];
+    names = chrome && reg.layouts.main ? ["main"] : [];
   }
   const out: FC<{ children?: ReactNode }>[] = [];
   for (const n of names) {
-    const mod = layouts[n];
+    const mod = reg.layouts[n];
     if (mod?.default) {
       out.push(mod.default);
     } else {
-      console.warn(`gantry: page ${page.key} wants unknown layout "${n}" (have: ${Object.keys(layouts).join(", ") || "none"})`);
+      console.warn(`gantry: page ${page.key} wants unknown layout "${n}" (have: ${Object.keys(reg.layouts).join(", ") || "none"})`);
     }
   }
   return out;
@@ -124,20 +168,22 @@ function AppRoot({ options }: { options: CreateAppOptions }) {
  * createApp boots a Gantry frontend: zoom guard, websocket, component
  * registry, TitleBar, the root layout (layout.tsx at the app root, if
  * present), and the page router (single-page mode when only pages/index
- * exists). The synthesized .gantry/main.tsx calls this; an app only
- * touches it to pass options.
+ * exists). The synthesized .gantry/main.tsx calls this with the
+ * virtual:gantry-app module (`import * as app from "virtual:gantry-app"`);
+ * an app only touches it to pass options.
  */
-export function createApp(options: CreateAppOptions = {}): void {
+export function createApp(app: GantryAppModule, options: CreateAppOptions = {}): void {
+  reg = app;
   // The optional root app.tsx wins over the synthesized defaults, so
   // apps customize everything without owning the entry file.
-  if (appConfig?.default) {
-    options = { ...options, ...appConfig.default };
+  if (reg.appConfig?.default) {
+    options = { ...options, ...reg.appConfig.default };
   }
   installZoomGuard();
   connect(options.socketURL);
 
   const registry: ComponentRegistry = {};
-  for (const [key, mod] of Object.entries(pairedComponents)) {
+  for (const [key, mod] of Object.entries(reg.components)) {
     if (typeof mod.default === "function") {
       registry[key] = mod.default as FC<TeaComponentProps>;
     }

package/src/index.ts

@@ -8,7 +8,7 @@ export { DragStrip } from "./DragStrip";
 export type { DragStripProps } from "./DragStrip";
 export { ResizeFrame } from "./ResizeFrame";
 export { createApp } from "./app";
-export type { CreateAppOptions } from "./app";
+export type { CreateAppOptions, GantryAppModule, GantryPage, GantryPageModule } from "./app";
 export { navigate, redirect, goBack, goForward, useRoute, isActive, Link, ExternalLink } from "./router";
 export type { LinkProps, ExternalLinkProps } from "./router";
 export { usePaired } from "./paired";

package/src/router.tsx

@@ -9,10 +9,16 @@ import {
 } from "react";
 import { getShell } from "./bridge";
 
-const listeners = new Set<() => void>();
+// Subscriptions go through a window-scoped event, NOT a module-local
+// set: if bundling ever instantiates this module twice (it happened -
+// Vite served excluded node_modules source under ?v=hash and bare URLs
+// at once), a local set splits the subscribers and navigation silently
+// stops re-rendering half the app. The window survives any number of
+// module copies; the route itself already lives in location.pathname.
+const NAV_EVENT = "gantry:navigate";
 
 function notify() {
-  for (const fn of listeners) fn();
+  window.dispatchEvent(new Event(NAV_EVENT));
 }
 
 if (typeof window !== "undefined") {
@@ -47,8 +53,8 @@ export function goForward(): void {
 }
 
 function subscribe(fn: () => void): () => void {
-  listeners.add(fn);
-  return () => listeners.delete(fn);
+  window.addEventListener(NAV_EVENT, fn);
+  return () => window.removeEventListener(NAV_EVENT, fn);
 }
 
 /** useRoute returns the current pathname; re-renders on navigation. */

package/src/vite/index.d.ts

@@ -0,0 +1,11 @@
+import type { Plugin } from "vite";
+
+export interface GantryPluginOptions {
+  /** App root relative to the Vite root (default ".."). */
+  appRoot?: string;
+  /** Go server port for the /api and /gantry/ws proxies (default: gantry.json "port", else 8330). */
+  goPort?: number;
+}
+
+export declare function gantry(opts?: GantryPluginOptions): Plugin;
+export default gantry;

package/src/vite/index.js

@@ -160,11 +160,29 @@ export function gantry(opts = {}) {
       const target = "http://127.0.0.1:" + goPort;
 
       return {
-        // gantry-web ships TypeScript source through an npm file: link;
-        // excluding it from prebundling keeps it in the normal
-        // transform pipeline (plugin-react handles its tsx), and
-        // deduping react avoids a second copy through the symlink.
-        optimizeDeps: { exclude: ["gantry-web"] },
+        // gantry-web MUST stay prebundlable (which is why it never
+        // imports virtual:gantry-app - esbuild cannot resolve virtual
+        // ids). A registry install is bundled into one optimized module;
+        // do NOT add it to optimizeDeps.exclude: served as raw
+        // node_modules source, Vite can reference the same file under
+        // two URLs (?v=hash vs bare) and instantiate the package twice,
+        // splitting the router's subscribers so navigation stops
+        // rendering. An npm file: link (framework development) resolves
+        // outside node_modules and is served as source automatically -
+        // there the force-included deps below matter: the CJS ones
+        // (react-dom/client) otherwise get served raw and lose their
+        // named exports, and lucide-react would waterfall one request
+        // per icon module.
+        optimizeDeps: {
+          include: [
+            "react",
+            "react-dom",
+            "react-dom/client",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime",
+            "lucide-react",
+          ],
+        },
         // dedupe makes imports inside the symlinked gantry-web source
         // resolve from the APP's node_modules (the package itself has
         // none) and guarantees a single React instance.

package/types/index.d.ts

@@ -1,32 +1,15 @@
 // Ambient types for the module the Gantry Vite plugin generates. This
 // file keeps editors happy without the synthesized .gantry/ folder
 // existing - include it via tsconfig "types": ["gantry-web/types"].
+// The module's shape is GantryAppModule (exported by gantry-web); the
+// synthesized .gantry/main.tsx passes the whole module to createApp.
 
 declare module "virtual:gantry-app" {
   import type { FC, ReactNode } from "react";
 
-  export interface GantryPageModule {
-    default: FC;
-    /** export const chrome = false to hide the TitleBar on this page. */
-    chrome?: boolean;
-    /**
-     * Which layouts/ wrap this page: a name ("compact"), several nested
-     * outermost-first (["main", "compact"]), false for none, true to
-     * force "main" even on a chromeless page. Default: "main" if it
-     * exists (chromeless pages default to none).
-     */
-    layout?: boolean | string | string[];
-    /** export const route = "/custom" to override the derived route. */
-    route?: string;
-  }
+  export type { GantryPage, GantryPageModule } from "gantry-web";
 
-  export interface GantryPage {
-    key: string;
-    route: string;
-    mod: GantryPageModule;
-  }
-
-  export const pages: GantryPage[];
+  export const pages: import("gantry-web").GantryPage[];
   export const components: Record<string, { default: FC }>;
   /** Layouts by short name: layouts/main/main.tsx -> "main". */
   export const layouts: Record<string, { default: FC<{ children?: ReactNode }> }>;