plusui-native 0.2.65 → 0.2.68

package/templates/react/frontend/tsconfig.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
     "moduleResolution": "bundler",
@@ -15,11 +19,14 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "plusui": ["./src/plusui.ts"]
-    }
+    "baseUrl": "."
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/templates/react/frontend/vite.config.ts

@@ -1,13 +1,12 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { fileURLToPath, URL } from 'node:url';
 
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      // `import plusui from 'plusui'` resolves to your local plusui.ts
-      plusui: fileURLToPath(new URL('./src/plusui.ts', import.meta.url)),
+      // `import plusui from 'plusui'` resolves to the installed plusui-native-core package
+      plusui: 'plusui-native-core',
     },
   },
   build: {
@@ -19,3 +18,4 @@ export default defineConfig({
     strictPort: true,
   },
 });
+

package/templates/react/main.cpp.template

@@ -70,6 +70,13 @@ struct WindowConfig {
     
     // --- WebView ---
     bool scrollbars = false;      // Show scrollbars in webview (false = hidden)
+    
+    // --- Routing ---
+    // The frontend route this window opens on.
+    // Use "/" for root, "/settings" for settings page, etc.
+    // Works with any frontend router (React Router, TanStack, Solid Router).
+    std::string route = "/";              // Starting route (e.g. "/", "/settings", "/profile")
+    int devServerPort = 5173;             // Vite dev server port
 } windowConfig;
 
 // ----------------------------------------------------------------------------
@@ -165,12 +172,20 @@ int main() {
     }
     
     // ========================================
-    // NAVIGATION - Load Frontend
+    // NAVIGATION — Load Frontend Route
     // ========================================
+    // The window loads the route from windowConfig.route.
+    // In dev mode: http://localhost:{port}{route}
+    // In production: file://frontend/dist/index.html#{route}
     #ifdef PLUSUI_DEV_MODE
-        mainWindow.navigate("http://localhost:5173");
+        std::string url = "http://localhost:" + std::to_string(windowConfig.devServerPort) + windowConfig.route;
+        mainWindow.navigate(url);
     #else
-        mainWindow.loadFile("frontend/dist/index.html");
+        if (windowConfig.route == "/") {
+            mainWindow.loadFile("frontend/dist/index.html");
+        } else {
+            mainWindow.loadFile("frontend/dist/index.html#" + windowConfig.route);
+        }
     #endif
     
     // ========================================

package/templates/solid/frontend/tsconfig.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
     "moduleResolution": "bundler",
@@ -16,11 +20,14 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "plusui": ["./src/plusui.ts"]
-    }
+    "baseUrl": "."
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

package/templates/solid/frontend/vite.config.ts

@@ -1,13 +1,12 @@
 import { defineConfig } from 'vite';
 import solid from 'vite-plugin-solid';
-import { fileURLToPath, URL } from 'node:url';
 
 export default defineConfig({
   plugins: [solid()],
   resolve: {
     alias: {
-      // `import plusui from 'plusui'` resolves to your local plusui.ts
-      plusui: fileURLToPath(new URL('./src/plusui.ts', import.meta.url)),
+      // `import plusui from 'plusui'` resolves to the installed plusui-native-core package
+      plusui: 'plusui-native-core',
     },
   },
   build: {

package/templates/solid/main.cpp.template

@@ -69,6 +69,13 @@ struct WindowConfig {
     
     // --- WebView ---
     bool scrollbars = false;      // Show scrollbars in webview (false = hidden)
+    
+    // --- Routing ---
+    // The frontend route this window opens on.
+    // Use "/" for root, "/settings" for settings page, etc.
+    // Works with any frontend router (Solid Router, TanStack, etc.).
+    std::string route = "/";              // Starting route (e.g. "/", "/settings", "/profile")
+    int devServerPort = 5173;             // Vite dev server port
 } windowConfig;
 
 // ----------------------------------------------------------------------------
@@ -159,12 +166,20 @@ int main() {
     }
     
     // ========================================
-    // NAVIGATION - Load Frontend
+    // NAVIGATION — Load Frontend Route
     // ========================================
+    // The window loads the route from windowConfig.route.
+    // In dev mode: http://localhost:{port}{route}
+    // In production: file://frontend/dist/index.html#{route}
     #ifdef PLUSUI_DEV_MODE
-        mainWindow.navigate("http://localhost:5173");
+        std::string url = "http://localhost:" + std::to_string(windowConfig.devServerPort) + windowConfig.route;
+        mainWindow.navigate(url);
     #else
-        mainWindow.loadFile("frontend/dist/index.html");
+        if (windowConfig.route == "/") {
+            mainWindow.loadFile("frontend/dist/index.html");
+        } else {
+            mainWindow.loadFile("frontend/dist/index.html#" + windowConfig.route);
+        }
     #endif
     
     // ========================================

package/templates/solid/frontend/src/plusui.ts

@@ -1,402 +0,0 @@
-// ============================================================
-// PlusUI — single import entrypoint
-//
-//   import plusui from 'plusui';
-//
-//   plusui.win.minimize();
-//   plusui.fileDrop.onFilesDropped(...);
-//   plusui.formatFileSize(bytes);
-//
-// For TypeScript types only:
-//   import type { FileInfo } from 'plusui';
-//
-// After running `plusui connect`, custom channel objects are
-// exported from Connections/connections.gen.ts:
-//   import { myChannel } from '../Connections/connections.gen';
-// ============================================================
-
-// ─── Bridge bootstrap ────────────────────────────────────────────────────────
-
-type InvokeFn = (method: string, args?: unknown[]) => Promise<unknown>;
-type PendingMap = Record<string, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>;
-
-type WindowSize = { width: number; height: number };
-type WindowPosition = { x: number; y: number };
-type RouteMap = Record<string, string>;
-
-let _invoke: InvokeFn | null = null;
-let _pending: PendingMap = {};
-let _routes: RouteMap = {};
-
-function initBridge() {
-  if (typeof window === 'undefined') return;
-
-  const w = window as any;
-  if (typeof w.__invoke__ === 'function') {
-    _invoke = w.__invoke__ as InvokeFn;
-    return;
-  }
-
-  _pending = {};
-  w.__pending__ = _pending;
-
-  w.__invoke__ = (method: string, args?: unknown[]): Promise<unknown> => {
-    return new Promise((resolve, reject) => {
-      const id = Math.random().toString(36).slice(2, 11);
-      const request = JSON.stringify({ id, method, params: args ?? [] });
-      _pending[id] = { resolve, reject };
-
-      if (typeof w.__native_invoke__ === 'function') {
-        w.__native_invoke__(request);
-      } else {
-        setTimeout(() => { delete _pending[id]; resolve(null); }, 0);
-      }
-
-      setTimeout(() => {
-        if (_pending[id]) {
-          delete _pending[id];
-          reject(new Error(`${method} timed out`));
-        }
-      }, 30000);
-    });
-  };
-
-  w.__response__ = (id: string, result: unknown) => {
-    const pending = _pending[id];
-    if (pending) { pending.resolve(result); delete _pending[id]; }
-  };
-
-  _invoke = w.__invoke__ as InvokeFn;
-}
-
-async function invoke(method: string, args?: unknown[]) {
-  if (!_invoke) {
-    initBridge();
-    if (!_invoke) throw new Error('PlusUI bridge not initialized');
-  }
-  return _invoke(method, args);
-}
-
-initBridge();
-
-// ─── Connection (on / emit) ───────────────────────────────────────────────────
-//
-// TWO METHODS. FIVE PRIMITIVES. EVERYTHING YOU NEED.
-//
-//   connect.emit('myEvent', { value: 42 });     // TS → C++
-//   connect.on('myEvent', (data) => { ... });   // C++ → TS
-//
-// Built-in features use their feature name as a scope:
-//   clipboard.on('changed', (data) => { ... })  // 'clipboard.changed'
-//   win.on('resized', (data) => { ... })         // 'window.resized'
-//
-// ─────────────────────────────────────────────────────────────────────────────
-
-type MessageCallback = (payload: any) => void;
-
-class ConnectionClient {
-  private pending = new Map<string, { resolve: (v: any) => void; reject: (e: Error) => void }>();
-  private listeners = new Map<string, Set<MessageCallback>>();
-
-  constructor() {
-    const host = globalThis as any;
-    host.__plusuiConnectionMessage = (message: unknown) => this.handleIncoming(message);
-    if (typeof window !== 'undefined') {
-      window.addEventListener('plusui:connection:message', (ev: Event) => {
-        this.handleIncoming((ev as CustomEvent<unknown>).detail);
-      });
-    }
-  }
-
-  private nextId() { return `${Date.now()}-${Math.random().toString(16).slice(2)}`; }
-
-  private async send(env: { kind: string; id?: string; name: string; payload?: unknown }): Promise<any> {
-    const host = globalThis as any;
-    if (typeof host.__invoke__ === 'function') return host.__invoke__('connection.dispatch', env);
-    if (host.ipc?.postMessage) host.ipc.postMessage(JSON.stringify(env));
-    return null;
-  }
-
-  private decode(message: unknown): any | null {
-    if (!message) return null;
-    if (typeof message === 'string') { try { return JSON.parse(message); } catch { return null; } }
-    if (typeof message === 'object') return message;
-    return null;
-  }
-
-  private handleIncoming(message: unknown): void {
-    const env = this.decode(message);
-    if (!env) return;
-    if ((env.kind === 'result' || env.kind === 'error') && env.id) {
-      const entry = this.pending.get(env.id);
-      if (!entry) return;
-      this.pending.delete(env.id);
-      if (env.kind === 'error') entry.reject(new Error(env.error || 'Connection call failed'));
-      else entry.resolve(env.payload);
-      return;
-    }
-    if (env.kind === 'event' || env.kind === 'stream' || env.kind === 'publish') {
-      const handlers = this.listeners.get(env.name);
-      if (handlers) for (const h of handlers) h(env.payload);
-    }
-  }
-
-  async call<TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn): Promise<TOut> {
-    const id = this.nextId();
-    const promise = new Promise<TOut>((resolve, reject) => this.pending.set(id, { resolve, reject }));
-    await this.send({ kind: 'call', id, name, payload });
-    return promise;
-  }
-
-  fire<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
-    void this.send({ kind: 'fire', name, payload });
-  }
-
-  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
-    const set = this.listeners.get(name) ?? new Set<MessageCallback>();
-    set.add(callback as MessageCallback);
-    this.listeners.set(name, set);
-    return () => {
-      const cur = this.listeners.get(name);
-      if (!cur) return;
-      cur.delete(callback as MessageCallback);
-      if (cur.size === 0) this.listeners.delete(name);
-    };
-  }
-
-  stream<TData = unknown>(name: string) {
-    return {
-      subscribe: (cb: (payload: TData) => void): (() => void) => {
-        void this.send({ kind: 'sub', name });
-        const off = this.on<TData>(name, cb);
-        return () => { off(); void this.send({ kind: 'unsub', name }); };
-      },
-    };
-  }
-
-  channel<TData = unknown>(name: string) {
-    return {
-      subscribe: (cb: (payload: TData) => void): (() => void) => {
-        void this.send({ kind: 'sub', name });
-        const off = this.on<TData>(name, cb);
-        return () => { off(); void this.send({ kind: 'unsub', name }); };
-      },
-      publish: (payload: TData): void => { void this.send({ kind: 'publish', name, payload }); },
-    };
-  }
-}
-
-const _client = new ConnectionClient();
-
-// ─── FeatureConnect ───────────────────────────────────────────────────────────
-
-export type FeatureConnect = {
-  on: <TData = unknown>(name: string, cb: (payload: TData) => void) => (() => void);
-  emit: <TIn = Record<string, unknown>>(name: string, payload: TIn) => void;
-  call: <TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn) => Promise<TOut>;
-  stream: <TData = unknown>(name: string) => { subscribe: (cb: (payload: TData) => void) => (() => void) };
-  channel: <TData = unknown>(name: string) => {
-    subscribe: (cb: (payload: TData) => void) => (() => void);
-    publish: (payload: TData) => void;
-  };
-  scoped: (scope: string) => FeatureConnect;
-};
-
-function _scopeName(scope: string, name: string): string {
-  return name.startsWith(`${scope}.`) ? name : `${scope}.${name}`;
-}
-
-async function _invokeScoped(method: string, payload?: unknown): Promise<unknown> {
-  const host = globalThis as any;
-  if (typeof host.__invoke__ !== 'function') return undefined;
-  return host.__invoke__(method, payload === undefined ? [] : [payload]);
-}
-
-export function createFeatureConnect(scope: string): FeatureConnect {
-  return {
-    emit<TIn = Record<string, unknown>>(name: string, payload: TIn) {
-      const s = _scopeName(scope, name);
-      void _invokeScoped(s, payload);
-      _client.fire(s, payload);
-      if (typeof window !== 'undefined') {
-        window.dispatchEvent(new CustomEvent(`plusui:${s}`, { detail: payload }));
-      }
-    },
-    on<TData = unknown>(name: string, cb: (payload: TData) => void): () => void {
-      const s = _scopeName(scope, name);
-      const off = _client.on<TData>(s, cb);
-      if (typeof window === 'undefined') return off;
-      const dom = (e: Event) => cb((e as CustomEvent<TData>).detail);
-      window.addEventListener(`plusui:${s}`, dom as EventListener);
-      return () => { off(); window.removeEventListener(`plusui:${s}`, dom as EventListener); };
-    },
-    call<TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn): Promise<TOut> {
-      const s = _scopeName(scope, name);
-      const host = globalThis as any;
-      if (typeof host.__invoke__ === 'function') return _invokeScoped(s, payload) as Promise<TOut>;
-      return _client.call<TOut, TIn>(s, payload);
-    },
-    stream<TData = unknown>(name: string) { return _client.stream<TData>(_scopeName(scope, name)); },
-    channel<TData = unknown>(name: string) { return _client.channel<TData>(_scopeName(scope, name)); },
-    scoped: (child: string) => createFeatureConnect(_scopeName(scope, child)),
-  };
-}
-
-// ─── connect — custom channels (your app-specific messages) ──────────────────
-export const connect = {
-  /** Send a message to C++ backend */
-  emit<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
-    _client.fire(name, payload);
-  },
-  /** Listen for messages from C++ backend. Returns unsubscribe fn. */
-  on<TData = unknown>(name: string, cb: (payload: TData) => void): () => void {
-    return _client.on<TData>(name, cb);
-  },
-  /** Scoped feature connection (auto-prefixes names) */
-  feature: createFeatureConnect,
-};
-
-/** Advanced: raw connection client — call / stream / channel */
-export const connection = _client;
-
-// ─── win — window management ──────────────────────────────────────────────────
-const _winEvents = createFeatureConnect('window');
-
-export const win = {
-  minimize:       async () => invoke('window.minimize', []),
-  maximize:       async () => invoke('window.maximize', []),
-  show:           async () => invoke('window.show', []),
-  hide:           async () => invoke('window.hide', []),
-  close:          async () => invoke('window.close', []),
-  center:         async () => invoke('window.center', []),
-  setTitle:       async (title: string) => invoke('window.setTitle', [title]),
-  setSize:        async (w: number, h: number) => invoke('window.setSize', [w, h]),
-  setMinSize:     async (w: number, h: number) => invoke('window.setMinSize', [w, h]),
-  setMaxSize:     async (w: number, h: number) => invoke('window.setMaxSize', [w, h]),
-  setPosition:    async (x: number, y: number) => invoke('window.setPosition', [x, y]),
-  setAlwaysOnTop: async (v: boolean) => invoke('window.setAlwaysOnTop', [v]),
-  setFullscreen:  async (v: boolean) => invoke('window.setFullscreen', [v]),
-  setOpacity:     async (v: number) => invoke('window.setOpacity', [v]),
-  getSize:        async (): Promise<WindowSize> => invoke('window.getSize', []) as Promise<WindowSize>,
-  getPosition:    async (): Promise<WindowPosition> => invoke('window.getPosition', []) as Promise<WindowPosition>,
-  isMaximized:    async (): Promise<boolean> => invoke('window.isMaximized', []) as Promise<boolean>,
-  isVisible:      async (): Promise<boolean> => invoke('window.isVisible', []) as Promise<boolean>,
-  on:   _winEvents.on.bind(_winEvents),
-  emit: _winEvents.emit.bind(_winEvents),
-};
-
-// ─── browser ──────────────────────────────────────────────────────────────────
-const _browserEvents = createFeatureConnect('browser');
-
-export const browser = {
-  getUrl:       async (): Promise<string> => invoke('browser.getUrl', []) as Promise<string>,
-  navigate:     async (url: string) => invoke('browser.navigate', [url]),
-  goBack:       async () => invoke('browser.goBack', []),
-  goForward:    async () => invoke('browser.goForward', []),
-  reload:       async () => invoke('browser.reload', []),
-  canGoBack:    async (): Promise<boolean> => invoke('browser.canGoBack', []) as Promise<boolean>,
-  canGoForward: async (): Promise<boolean> => invoke('browser.canGoForward', []) as Promise<boolean>,
-  onNavigate: (handler: (url: string) => void) => {
-    if (typeof window === 'undefined') return () => {};
-    const h = (e: Event) => handler((e as CustomEvent<{ url?: string }>).detail?.url ?? '');
-    window.addEventListener('plusui:navigate', h);
-    return () => window.removeEventListener('plusui:navigate', h);
-  },
-  on:   _browserEvents.on.bind(_browserEvents),
-  emit: _browserEvents.emit.bind(_browserEvents),
-};
-
-// ─── router ───────────────────────────────────────────────────────────────────
-export const router = {
-  setRoutes: (routes: RouteMap) => { _routes = routes; },
-  push: async (path: string) => invoke('browser.navigate', [_routes[path] ?? path]),
-};
-
-// ─── app ──────────────────────────────────────────────────────────────────────
-const _appEvents = createFeatureConnect('app');
-
-export const app = {
-  quit:  async () => invoke('app.quit', []),
-  on:   _appEvents.on.bind(_appEvents),
-  emit: _appEvents.emit.bind(_appEvents),
-};
-
-// ─── clipboard ────────────────────────────────────────────────────────────────
-const _clipboardEvents = createFeatureConnect('clipboard');
-
-export const clipboard = {
-  getText:  async (): Promise<string> => invoke('clipboard.getText', []) as Promise<string>,
-  setText:  async (text: string) => invoke('clipboard.setText', [text]),
-  clear:    async () => invoke('clipboard.clear', []),
-  hasText:  async (): Promise<boolean> => invoke('clipboard.hasText', []) as Promise<boolean>,
-  on:   _clipboardEvents.on.bind(_clipboardEvents),
-  emit: _clipboardEvents.emit.bind(_clipboardEvents),
-};
-
-// ─── fileDrop ─────────────────────────────────────────────────────────────────
-export interface FileInfo { path: string; name: string; type: string; size: number; }
-
-export const fileDrop = {
-  setEnabled: async (enabled: boolean) => invoke('fileDrop.setEnabled', [enabled]),
-  isEnabled:  async (): Promise<boolean> => invoke('fileDrop.isEnabled', []) as Promise<boolean>,
-  onFilesDropped: (handler: (files: FileInfo[]) => void) => {
-    if (typeof window === 'undefined') return () => {};
-    const h = (e: Event) => handler((e as CustomEvent<{ files?: FileInfo[] }>).detail?.files ?? []);
-    window.addEventListener('plusui:fileDrop.filesDropped', h);
-    return () => window.removeEventListener('plusui:fileDrop.filesDropped', h);
-  },
-  onDragEnter: (handler: () => void) => {
-    if (typeof window === 'undefined') return () => {};
-    window.addEventListener('plusui:fileDrop.dragEnter', handler);
-    return () => window.removeEventListener('plusui:fileDrop.dragEnter', handler);
-  },
-  onDragLeave: (handler: () => void) => {
-    if (typeof window === 'undefined') return () => {};
-    window.addEventListener('plusui:fileDrop.dragLeave', handler);
-    return () => window.removeEventListener('plusui:fileDrop.dragLeave', handler);
-  },
-};
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 Bytes';
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-
-export function isImageFile(file: FileInfo): boolean { return file.type.startsWith('image/'); }
-
-// ─── Top-level on / emit ─────────────────────────────────────────────────────
-//
-//   import plusui from 'plusui';
-//
-//   plusui.emit('myEvent', { value: 42 });   // TS → C++
-//   plusui.on('myEvent', (data) => { ... }); // C++ → TS
-//
-//   plusui.win.minimize();
-//   plusui.clipboard.on('changed', (data) => { ... });
-//
-export const on   = connect.on.bind(connect) as typeof connect.on;
-export const emit = connect.emit.bind(connect) as typeof connect.emit;
-
-// ─── Default export — everything under one roof ───────────────────────────────
-const plusui = {
-  /** Create a named custom scope: const search = feature('search'); search.on/emit(...) */
-  feature: createFeatureConnect,
-  connection,
-  win,
-  browser,
-  router,
-  app,
-  clipboard,
-  fileDrop,
-  formatFileSize,
-  isImageFile,
-  on,
-  emit,
-};
-
-export default plusui;
-