@gtkx/cli 0.9.3 → 0.10.0

package/dist/dev-server.d.ts

@@ -1,15 +1,37 @@
 import { type InlineConfig, type ViteDevServer } from "vite";
 /**
- * Options for creating a GTKX development server.
+ * Options for the GTKX development server.
  */
 export type DevServerOptions = {
-    /** Path to the app entry file (e.g., "./src/app.tsx"). */
+    /** Path to the entry file (e.g., "src/dev.tsx") */
     entry: string;
-    /** Vite configuration overrides for customizing the dev server. */
+    /** Additional Vite configuration */
     vite?: InlineConfig;
 };
 /**
- * Creates and starts a GTKX development server with HMR support.
+ * Creates a Vite-based development server with hot module replacement.
+ *
+ * Provides fast refresh for React components and full reload for other changes.
+ * The server watches for file changes and automatically updates the running
+ * GTK application.
+ *
+ * @param options - Server configuration including entry point and Vite options
+ * @returns A Vite development server instance
+ *
+ * @example
+ * ```tsx
+ * import { createDevServer } from "@gtkx/cli";
+ * import { render } from "@gtkx/react";
+ *
+ * const server = await createDevServer({
+ *   entry: "./src/dev.tsx",
+ * });
+ *
+ * const mod = await server.ssrLoadModule("./src/dev.tsx");
+ * render(<mod.default />, mod.appId);
+ * ```
+ *
+ * @see {@link DevServerOptions} for configuration options
  */
 export declare const createDevServer: (options: DevServerOptions) => Promise<ViteDevServer>;
 export type { ViteDevServer };

package/dist/dev-server.js

@@ -1,18 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { events } from "@gtkx/ffi";
-import { update } from "@gtkx/react";
-import react from "@vitejs/plugin-react";
+import { setHotReloading, update } from "@gtkx/react";
 import { createServer } from "vite";
+import { isReactRefreshBoundary, performRefresh } from "./refresh-runtime.js";
+import { gtkxRefresh } from "./vite-plugin-gtkx-refresh.js";
+import { swcSsrRefresh } from "./vite-plugin-swc-ssr-refresh.js";
 /**
- * Creates and starts a GTKX development server with HMR support.
+ * Creates a Vite-based development server with hot module replacement.
+ *
+ * Provides fast refresh for React components and full reload for other changes.
+ * The server watches for file changes and automatically updates the running
+ * GTK application.
+ *
+ * @param options - Server configuration including entry point and Vite options
+ * @returns A Vite development server instance
+ *
+ * @example
+ * ```tsx
+ * import { createDevServer } from "@gtkx/cli";
+ * import { render } from "@gtkx/react";
+ *
+ * const server = await createDevServer({
+ *   entry: "./src/dev.tsx",
+ * });
+ *
+ * const mod = await server.ssrLoadModule("./src/dev.tsx");
+ * render(<mod.default />, mod.appId);
+ * ```
+ *
+ * @see {@link DevServerOptions} for configuration options
  */
 export const createDevServer = async (options) => {
     const { entry, vite: viteConfig } = options;
+    const moduleExports = new Map();
     const server = await createServer({
         ...viteConfig,
         appType: "custom",
         plugins: [
-            react(),
+            swcSsrRefresh(),
+            gtkxRefresh(),
             {
                 name: "gtkx:remove-react-dom-optimized",
                 enforce: "post",
@@ -37,29 +63,58 @@ export const createDevServer = async (options) => {
         },
     });
     const loadModule = async () => {
-        return server.ssrLoadModule(entry);
+        const mod = (await server.ssrLoadModule(entry));
+        moduleExports.set(entry, { ...mod });
+        return mod;
     };
     const invalidateAllModules = () => {
         for (const module of server.moduleGraph.idToModuleMap.values()) {
             server.moduleGraph.invalidateModule(module);
         }
     };
+    const invalidateModuleAndImporters = (filePath) => {
+        const module = server.moduleGraph.getModuleById(filePath);
+        if (module) {
+            server.moduleGraph.invalidateModule(module);
+            for (const importer of module.importers) {
+                server.moduleGraph.invalidateModule(importer);
+            }
+        }
+    };
     events.on("stop", () => {
         server.close();
     });
     server.watcher.on("change", async (changedPath) => {
         console.log(`[gtkx] File changed: ${changedPath}`);
-        invalidateAllModules();
         try {
+            const module = server.moduleGraph.getModuleById(changedPath);
+            if (module) {
+                invalidateModuleAndImporters(changedPath);
+                const newMod = (await server.ssrLoadModule(changedPath));
+                moduleExports.set(changedPath, { ...newMod });
+                if (isReactRefreshBoundary(newMod)) {
+                    console.log("[gtkx] Fast refreshing...");
+                    performRefresh();
+                    console.log("[gtkx] Fast refresh complete");
+                    return;
+                }
+            }
+            console.log("[gtkx] Full reload...");
+            invalidateAllModules();
             const mod = await loadModule();
             const App = mod.default;
             if (typeof App !== "function") {
                 console.error("[gtkx] Entry file must export a default function component");
                 return;
             }
-            console.log("[gtkx] Hot reloading...");
-            update(_jsx(App, {}));
-            console.log("[gtkx] Hot reload complete");
+            setHotReloading(true);
+            try {
+                await update(_jsx(App, {}));
+            }
+            finally {
+                setHotReloading(false);
+            }
+            console.log("[gtkx] Full reload complete");
         }
         catch (error) {
             console.error("[gtkx] Hot reload failed:", error);

package/dist/refresh-runtime.d.ts

@@ -0,0 +1,9 @@
+import RefreshRuntime from "react-refresh/runtime";
+type ComponentType = (...args: unknown[]) => unknown;
+export declare function createModuleRegistration(moduleId: string): {
+    $RefreshReg$: (type: ComponentType, id: string) => void;
+    $RefreshSig$: typeof RefreshRuntime.createSignatureFunctionForTransform;
+};
+export declare function isReactRefreshBoundary(moduleExports: Record<string, unknown>): boolean;
+export declare function performRefresh(): void;
+export {};

package/dist/refresh-runtime.js

@@ -0,0 +1,44 @@
+import RefreshRuntime from "react-refresh/runtime";
+RefreshRuntime.injectIntoGlobalHook(globalThis);
+globalThis.$RefreshReg$ = () => { };
+globalThis.$RefreshSig$ = () => (type) => type;
+export function createModuleRegistration(moduleId) {
+    return {
+        $RefreshReg$: (type, id) => {
+            RefreshRuntime.register(type, `${moduleId} ${id}`);
+        },
+        $RefreshSig$: RefreshRuntime.createSignatureFunctionForTransform,
+    };
+}
+function isLikelyComponentType(value) {
+    if (typeof value !== "function") {
+        return false;
+    }
+    const func = value;
+    if (func.$$typeof === Symbol.for("react.memo") || func.$$typeof === Symbol.for("react.forward_ref")) {
+        return true;
+    }
+    const name = value.name;
+    if (typeof name === "string" && /^[A-Z]/.test(name)) {
+        return true;
+    }
+    return false;
+}
+export function isReactRefreshBoundary(moduleExports) {
+    if (RefreshRuntime.isLikelyComponentType(moduleExports)) {
+        return true;
+    }
+    for (const key in moduleExports) {
+        if (key === "__esModule") {
+            continue;
+        }
+        const value = moduleExports[key];
+        if (!isLikelyComponentType(value)) {
+            return false;
+        }
+    }
+    return Object.keys(moduleExports).filter((k) => k !== "__esModule").length > 0;
+}
+export function performRefresh() {
+    RefreshRuntime.performReactRefresh();
+}

package/dist/templates.d.ts

@@ -0,0 +1,8 @@
+import type { TestingFramework } from "./create.js";
+export interface TemplateContext {
+    name: string;
+    appId: string;
+    title: string;
+    testing: TestingFramework;
+}
+export declare const renderFile: (templateName: string, context: TemplateContext) => string;

package/dist/templates.js

@@ -0,0 +1,18 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import ejs from "ejs";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const getTemplatesDir = () => {
+    return join(__dirname, "..", "templates");
+};
+const renderTemplate = (templatePath, context) => {
+    const templateContent = readFileSync(templatePath, "utf-8");
+    return ejs.render(templateContent, context);
+};
+export const renderFile = (templateName, context) => {
+    const templatesDir = getTemplatesDir();
+    const templatePath = join(templatesDir, templateName);
+    return renderTemplate(templatePath, context);
+};

package/dist/vite-plugin-gtkx-refresh.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from "vite";
+type GtkxRefreshOptions = {
+    include?: RegExp;
+    exclude?: RegExp;
+};
+export declare function gtkxRefresh(options?: GtkxRefreshOptions): Plugin;
+export {};

package/dist/vite-plugin-gtkx-refresh.js

@@ -0,0 +1,36 @@
+const defaultInclude = /\.[tj]sx?$/;
+const defaultExclude = /node_modules/;
+const refreshRuntimePath = "@gtkx/cli/refresh-runtime";
+export function gtkxRefresh(options = {}) {
+    const include = options.include ?? defaultInclude;
+    const exclude = options.exclude ?? defaultExclude;
+    return {
+        name: "gtkx:refresh",
+        enforce: "post",
+        transform(code, id, transformOptions) {
+            if (!transformOptions?.ssr) {
+                return;
+            }
+            if (!include.test(id)) {
+                return;
+            }
+            if (exclude.test(id)) {
+                return;
+            }
+            const hasRefreshReg = code.includes("$RefreshReg$");
+            const hasRefreshSig = code.includes("$RefreshSig$");
+            if (!hasRefreshReg && !hasRefreshSig) {
+                return;
+            }
+            const moduleIdJson = JSON.stringify(id);
+            const header = `
+import { createModuleRegistration as __createModuleRegistration__ } from "${refreshRuntimePath}";
+const { $RefreshReg$, $RefreshSig$ } = __createModuleRegistration__(${moduleIdJson});
+`;
+            return {
+                code: header + code,
+                map: null,
+            };
+        },
+    };
+}

package/dist/vite-plugin-swc-ssr-refresh.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from "vite";
+type SwcSsrRefreshOptions = {
+    include?: RegExp;
+    exclude?: RegExp;
+};
+export declare function swcSsrRefresh(options?: SwcSsrRefreshOptions): Plugin;
+export {};

package/dist/vite-plugin-swc-ssr-refresh.js

@@ -0,0 +1,45 @@
+import { transform } from "@swc/core";
+const defaultInclude = /\.[tj]sx?$/;
+const defaultExclude = /node_modules/;
+export function swcSsrRefresh(options = {}) {
+    const include = options.include ?? defaultInclude;
+    const exclude = options.exclude ?? defaultExclude;
+    return {
+        name: "gtkx:swc-ssr-refresh",
+        enforce: "pre",
+        async transform(code, id, transformOptions) {
+            if (!transformOptions?.ssr) {
+                return;
+            }
+            if (!include.test(id)) {
+                return;
+            }
+            if (exclude.test(id)) {
+                return;
+            }
+            const isTsx = id.endsWith(".tsx");
+            const isTs = id.endsWith(".ts") || isTsx;
+            const swcOptions = {
+                filename: id,
+                sourceFileName: id,
+                sourceMaps: true,
+                jsc: {
+                    parser: isTs ? { syntax: "typescript", tsx: isTsx } : { syntax: "ecmascript", jsx: true },
+                    transform: {
+                        react: {
+                            runtime: "automatic",
+                            development: true,
+                            refresh: true,
+                        },
+                    },
+                    target: "es2022",
+                },
+            };
+            const result = await transform(code, swcOptions);
+            return {
+                code: result.code,
+                map: result.map,
+            };
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/cli",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "CLI for GTKX - create and develop GTK4 React applications",
   "keywords": [
     "gtk",
@@ -33,24 +33,33 @@
     "./dev-server": {
       "types": "./dist/dev-server.d.ts",
       "default": "./dist/dev-server.js"
+    },
+    "./refresh-runtime": {
+      "types": "./dist/refresh-runtime.d.ts",
+      "default": "./dist/refresh-runtime.js"
     }
   },
   "bin": {
-    "gtkx": "dist/cli.js"
+    "gtkx": "bin/gtkx.js"
   },
   "files": [
+    "bin",
     "dist",
     "templates"
   ],
   "dependencies": {
     "@clack/prompts": "^0.11.0",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@swc/core": "^1.15.7",
     "citty": "^0.1.6",
+    "ejs": "^3.1.10",
+    "react-refresh": "^0.18.0",
     "vite": "^7.3.0",
-    "@gtkx/ffi": "0.9.3",
-    "@gtkx/react": "0.9.3"
+    "@gtkx/ffi": "0.10.0",
+    "@gtkx/react": "0.10.0"
   },
   "devDependencies": {
+    "@types/ejs": "^3.1.5",
+    "@types/react-refresh": "^0.14.7",
     "memfs": "^4.51.1"
   },
   "peerDependencies": {