plusui-native 0.2.4 → 0.2.5

package/templates/base/README.md.template

@@ -142,20 +142,18 @@ just help         # Show all commands
 
 ## Calling C++ from TypeScript
 
-Use the `plusui-native-core` SDK to interact with the native backend:
+Use the local `frontend/src/plusui.ts` bridge to interact with the native backend:
 
 ```tsx
-import { createPlusUI } from 'plusui-native-core';
-
-const plusui = createPlusUI();
+import { win } from './plusui';
 
 // Window controls
-await plusui.window.minimize();
-await plusui.window.maximize();
-await plusui.window.close();
+await win.minimize();
+await win.maximize();
+await win.close();
 
 // Get window info
-const size = await plusui.window.getSize();
+const size = await win.getSize();
 console.log(`Window size: ${size.width}x${size.height}`);
 ```
 
@@ -164,5 +162,5 @@ console.log(`Window size: ${size.width}x${size.height}`);
 - [PlusUI Documentation](https://github.com/yourorg/plusui)
 - [React Documentation](https://react.dev/)
 - [Vite Documentation](https://vitejs.dev/)
-
-
+
+

package/templates/manager.js

@@ -1,217 +1,173 @@
-import { mkdir, readdir, readFile, writeFile, copyFile, stat } from 'fs/promises';
-import { join, dirname, resolve } from 'path';
-import { existsSync } from 'fs';
-import { fileURLToPath } from 'url';
-import { EnvironmentDoctor } from '../src/doctor/index.js';
-import chalk from 'chalk';
-import { execSync, spawn } from 'child_process';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export class TemplateManager {
-  constructor() {
-    this.templatesDir = __dirname;
-  }
-
-  async create(projectName, options = {}) {
-    const template = options.template || 'react';
-    const templatePath = join(this.templatesDir, template);
-
-    console.log(chalk.bold(`\nCreating PlusUI project: ${projectName}\n`));
-
-    // 1. Check environment first
-    console.log(chalk.blue('Checking environment...'));
-    const doctor = new EnvironmentDoctor();
-    const quickCheck = await doctor.quickCheck();
-
-    if (!quickCheck.ready) {
-      console.log(chalk.red('\n✗ Environment not ready!\n'));
-      console.log(chalk.yellow('Run: plusui doctor --fix\n'));
-      throw new Error('Environment check failed');
-    }
-
-    console.log(chalk.green('✓ Environment ready\n'));
-
-    // 2. Create project directory
-    console.log(chalk.blue('Creating project structure...'));
-    const projectPath = resolve(projectName);
-
-    if (existsSync(projectPath)) {
-      throw new Error(`Directory ${projectName} already exists`);
-    }
-
-    await mkdir(projectPath, { recursive: true });
-
-    // 3. Prepare template variables
-    const variables = {
-      PROJECT_NAME: projectName,
-      PROJECT_NAME_LOWER: projectName.toLowerCase(),
-      PROJECT_VERSION: '0.1.0',
-      PLUSUI_CORE_PATH: this.resolvePlusUIPath()
-    };
-
-    // 4. Copy template files
-    await this.copyTemplate(templatePath, projectPath, variables);
-
-    // 5. Copy base files
-    const basePath = join(this.templatesDir, 'base');
-    await this.copyTemplate(basePath, projectPath, variables, true);
-
-    console.log(chalk.green('✓ Project structure created\n'));
-
-    // 6. Install npm dependencies
-    console.log(chalk.blue('Installing dependencies...'));
-    await this.runNpmInstall(projectPath);
-    console.log(chalk.green('✓ Dependencies installed\n'));
-
-    // 7. Print success message
-    this.printSuccessMessage(projectName);
-
-    return { success: true, path: projectPath };
-  }
-
-  async copyTemplate(templatePath, destPath, variables, skipSubdirs = false) {
-    if (!existsSync(templatePath)) {
-      return;
-    }
-
-    const entries = await readdir(templatePath, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const srcPath = join(templatePath, entry.name);
-      const destName = entry.name.replace('.template', '');
-      const destFilePath = join(destPath, destName);
-
-      if (entry.isDirectory()) {
-        if (!skipSubdirs) {
-          await mkdir(destFilePath, { recursive: true });
-          await this.copyTemplate(srcPath, destFilePath, variables, false);
-        }
-      } else {
-        // Ensure parent directory exists
-        await mkdir(dirname(destFilePath), { recursive: true });
-
-        // Read file content
-        let content = await readFile(srcPath, 'utf8');
-
-        // Replace variables
-        content = this.replaceVariables(content, variables);
-
-        // Write to destination
-        await writeFile(destFilePath, content, 'utf8');
-      }
-    }
-  }
-
-  replaceVariables(content, variables) {
-    let result = content;
-
-    for (const [key, value] of Object.entries(variables)) {
-      const placeholder = `{{${key}}}`;
-      result = result.split(placeholder).join(value);
-    }
-
-    return result;
-  }
-
-  resolvePlusUIPath() {
-    // Strategy:
-    // 1. Check for global plusui-native-core installation
-    // 2. Check for local development version
-    // 3. Fall back to npm registry
-
-    try {
-      // Check if running in development (from PlusUI repo)
-      const localCorePath = resolve(__dirname, '../../plusui-sdk/packages/core');
-      if (existsSync(localCorePath)) {
-        // Convert Windows backslashes to forward slashes for JSON compatibility
-        return `file:${localCorePath.replace(/\\/g, '/')}`;
-      }
-
-      // Check global installation
-      const globalPath = this.resolveGlobalPackage('plusui-native-core');
-      if (globalPath) {
-        return globalPath;
-      }
-    } catch (e) {
-      // Ignore errors, fall back to npm
-    }
-
-    // Fall back to npm registry (when published)
-    return '^0.1.0';
-  }
-
-  resolveGlobalPackage(packageName) {
-    try {
-      const result = execSync(`npm root -g`, { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] });
-      const globalRoot = result.trim();
-      const packagePath = join(globalRoot, packageName);
-
-      if (existsSync(packagePath)) {
-        return packagePath;
-      }
-    } catch (e) {
-      // npm not available or package not found
-    }
-
-    return null;
-  }
-
-  async runNpmInstall(projectPath) {
-    return new Promise((resolve, reject) => {
-      const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
-      
-      // Install root dependencies
-      const rootProc = spawn(npm, ['install'], {
-        cwd: projectPath,
-        stdio: 'inherit',
-        shell: true
-      });
-
-      rootProc.on('close', (code) => {
-        if (code !== 0) {
-          reject(new Error(`npm install failed with code ${code}`));
-          return;
-        }
-
-        // Install frontend dependencies
-        const frontendPath = join(projectPath, 'frontend');
-        if (existsSync(join(frontendPath, 'package.json'))) {
-          const frontendProc = spawn(npm, ['install'], {
-            cwd: frontendPath,
-            stdio: 'inherit',
-            shell: true
-          });
-
-          frontendProc.on('close', (feCode) => {
-            if (feCode === 0) {
-              resolve();
-            } else {
-              reject(new Error(`frontend npm install failed with code ${feCode}`));
-            }
-          });
-
-          frontendProc.on('error', reject);
-        } else {
-          resolve();
-        }
-      });
-
-      rootProc.on('error', reject);
-    });
-  }
-
-  printSuccessMessage(projectName) {
-    console.log(chalk.green.bold('\n✓ Project created successfully!\n'));
-    console.log(chalk.bold('Next steps:\n'));
-    console.log(chalk.cyan(`  cd ${projectName}`));
-    console.log(chalk.cyan(`  npm run dev`));
-    console.log();
-    console.log(chalk.gray('This will start the development server with hot reload.'));
-    console.log(chalk.gray('Edit frontend/src/App.tsx and main.cpp to get started!'));
-    console.log();
-  }
-}
-
-
+import { mkdir, readdir, readFile, writeFile, copyFile, stat } from 'fs/promises';
+import { join, dirname, resolve } from 'path';
+import { existsSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { EnvironmentDoctor } from '../src/doctor/index.js';
+import chalk from 'chalk';
+import { spawn } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export class TemplateManager {
+  constructor() {
+    this.templatesDir = __dirname;
+  }
+
+  async create(projectName, options = {}) {
+    const template = options.template || 'react';
+    const templatePath = join(this.templatesDir, template);
+
+    console.log(chalk.bold(`\nCreating PlusUI project: ${projectName}\n`));
+
+    // 1. Check environment first
+    console.log(chalk.blue('Checking environment...'));
+    const doctor = new EnvironmentDoctor();
+    const quickCheck = await doctor.quickCheck();
+
+    if (!quickCheck.ready) {
+      console.log(chalk.red('\n✗ Environment not ready!\n'));
+      console.log(chalk.yellow('Run: plusui doctor --fix\n'));
+      throw new Error('Environment check failed');
+    }
+
+    console.log(chalk.green('✓ Environment ready\n'));
+
+    // 2. Create project directory
+    console.log(chalk.blue('Creating project structure...'));
+    const projectPath = resolve(projectName);
+
+    if (existsSync(projectPath)) {
+      throw new Error(`Directory ${projectName} already exists`);
+    }
+
+    await mkdir(projectPath, { recursive: true });
+
+    // 3. Prepare template variables
+    const variables = {
+      PROJECT_NAME: projectName,
+      PROJECT_NAME_LOWER: projectName.toLowerCase(),
+      PROJECT_VERSION: '0.1.0'
+    };
+
+    // 4. Copy template files
+    await this.copyTemplate(templatePath, projectPath, variables);
+
+    // 5. Copy base files
+    const basePath = join(this.templatesDir, 'base');
+    await this.copyTemplate(basePath, projectPath, variables, true);
+
+    console.log(chalk.green('✓ Project structure created\n'));
+
+    // 6. Install npm dependencies
+    console.log(chalk.blue('Installing dependencies...'));
+    await this.runNpmInstall(projectPath);
+    console.log(chalk.green('✓ Dependencies installed\n'));
+
+    // 7. Print success message
+    this.printSuccessMessage(projectName);
+
+    return { success: true, path: projectPath };
+  }
+
+  async copyTemplate(templatePath, destPath, variables, skipSubdirs = false) {
+    if (!existsSync(templatePath)) {
+      return;
+    }
+
+    const entries = await readdir(templatePath, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(templatePath, entry.name);
+      const destName = entry.name.replace('.template', '');
+      const destFilePath = join(destPath, destName);
+
+      if (entry.isDirectory()) {
+        if (!skipSubdirs) {
+          await mkdir(destFilePath, { recursive: true });
+          await this.copyTemplate(srcPath, destFilePath, variables, false);
+        }
+      } else {
+        // Ensure parent directory exists
+        await mkdir(dirname(destFilePath), { recursive: true });
+
+        // Read file content
+        let content = await readFile(srcPath, 'utf8');
+
+        // Replace variables
+        content = this.replaceVariables(content, variables);
+
+        // Write to destination
+        await writeFile(destFilePath, content, 'utf8');
+      }
+    }
+  }
+
+  replaceVariables(content, variables) {
+    let result = content;
+
+    for (const [key, value] of Object.entries(variables)) {
+      const placeholder = `{{${key}}}`;
+      result = result.split(placeholder).join(value);
+    }
+
+    return result;
+  }
+
+  async runNpmInstall(projectPath) {
+    return new Promise((resolve, reject) => {
+      const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+      
+      // Install root dependencies
+      const rootProc = spawn(npm, ['install'], {
+        cwd: projectPath,
+        stdio: 'inherit',
+        shell: true
+      });
+
+      rootProc.on('close', (code) => {
+        if (code !== 0) {
+          reject(new Error(`npm install failed with code ${code}`));
+          return;
+        }
+
+        // Install frontend dependencies
+        const frontendPath = join(projectPath, 'frontend');
+        if (existsSync(join(frontendPath, 'package.json'))) {
+          const frontendProc = spawn(npm, ['install'], {
+            cwd: frontendPath,
+            stdio: 'inherit',
+            shell: true
+          });
+
+          frontendProc.on('close', (feCode) => {
+            if (feCode === 0) {
+              resolve();
+            } else {
+              reject(new Error(`frontend npm install failed with code ${feCode}`));
+            }
+          });
+
+          frontendProc.on('error', reject);
+        } else {
+          resolve();
+        }
+      });
+
+      rootProc.on('error', reject);
+    });
+  }
+
+  printSuccessMessage(projectName) {
+    console.log(chalk.green.bold('\n✓ Project created successfully!\n'));
+    console.log(chalk.bold('Next steps:\n'));
+    console.log(chalk.cyan(`  cd ${projectName}`));
+    console.log(chalk.cyan(`  npm run dev`));
+    console.log();
+    console.log(chalk.gray('This will start the development server with hot reload.'));
+    console.log(chalk.gray('Edit frontend/src/App.tsx and main.cpp to get started!'));
+    console.log();
+  }
+}
+
+

package/templates/react/CMakeLists.txt.template

@@ -24,7 +24,15 @@ endif()
 # Strategy: Check multiple locations for the Core library
 set(PLUSUI_FOUND FALSE)
 
-# Location 1: Local development (sibling to project inside PlusUI repo)
+# Location 1: Project-local Core directory
+set(PLUSUI_CORE_LOCAL "${CMAKE_SOURCE_DIR}/Core")
+if(EXISTS "${PLUSUI_CORE_LOCAL}/CMakeLists.txt")
+    message(STATUS "Found PlusUI Core at: ${PLUSUI_CORE_LOCAL}")
+    add_subdirectory("${PLUSUI_CORE_LOCAL}" "${CMAKE_BINARY_DIR}/plusui-core")
+    set(PLUSUI_FOUND TRUE)
+endif()
+
+# Location 2: Local development (sibling to project inside PlusUI repo)
 set(PLUSUI_CORE_DEV "${CMAKE_SOURCE_DIR}/../Core")
 if(EXISTS "${PLUSUI_CORE_DEV}/CMakeLists.txt")
     message(STATUS "Found PlusUI Core at: ${PLUSUI_CORE_DEV}")
@@ -32,17 +40,23 @@ if(EXISTS "${PLUSUI_CORE_DEV}/CMakeLists.txt")
     set(PLUSUI_FOUND TRUE)
 endif()
 
-# Location 2: Installed via npm (node_modules)
+# Location 3: Installed via npm (separate core package)
 if(NOT PLUSUI_FOUND)
-    set(PLUSUI_CORE_NPM "${CMAKE_SOURCE_DIR}/node_modules/plusui-native-core/Core")
+    set(PLUSUI_CORE_NPM "${CMAKE_SOURCE_DIR}/node_modules/plusui-native-core")
+    set(PLUSUI_CORE_NPM_LEGACY "${CMAKE_SOURCE_DIR}/node_modules/plusui-native-core/Core")
+
     if(EXISTS "${PLUSUI_CORE_NPM}/CMakeLists.txt")
         message(STATUS "Found PlusUI Core in node_modules: ${PLUSUI_CORE_NPM}")
         add_subdirectory("${PLUSUI_CORE_NPM}" "${CMAKE_BINARY_DIR}/plusui-core")
         set(PLUSUI_FOUND TRUE)
+    elseif(EXISTS "${PLUSUI_CORE_NPM_LEGACY}/CMakeLists.txt")
+        message(STATUS "Found PlusUI Core in node_modules (legacy): ${PLUSUI_CORE_NPM_LEGACY}")
+        add_subdirectory("${PLUSUI_CORE_NPM_LEGACY}" "${CMAKE_BINARY_DIR}/plusui-core")
+        set(PLUSUI_FOUND TRUE)
     endif()
 endif()
 
-# Location 3: Parent directory development structure
+# Location 4: Parent directory development structure
 if(NOT PLUSUI_FOUND)
     set(PLUSUI_CORE_PARENT "${CMAKE_SOURCE_DIR}/../../Core")
     if(EXISTS "${PLUSUI_CORE_PARENT}/CMakeLists.txt")
@@ -56,11 +70,13 @@ if(NOT PLUSUI_FOUND)
     message(FATAL_ERROR "
     PlusUI Core not found!
 
-    Make sure you have run 'npm install' or that this project is inside the PlusUI repository.
+                Install dependencies (npm install) or add a Core folder in this project root.
 
     Searched locations:
+            - ${PLUSUI_CORE_LOCAL}
       - ${PLUSUI_CORE_DEV}
-      - ${PLUSUI_CORE_NPM}
+            - ${PLUSUI_CORE_NPM}
+            - ${PLUSUI_CORE_NPM_LEGACY}
       - ${PLUSUI_CORE_PARENT}
     ")
 endif()
@@ -147,5 +163,5 @@ endif()
 set(CMAKE_RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/bin")
 set(CMAKE_LIBRARY_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
 set(CMAKE_ARCHIVE_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
-
-
+
+

package/templates/react/frontend/package.json.template

@@ -10,8 +10,7 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "plusui-native-core": "{{PLUSUI_CORE_PATH}}"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -20,5 +19,5 @@
     "typescript": "^5.3.0",
     "vite": "^5.0.0"
   }
-}
-
+}
+

package/templates/react/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { win, browser, router, app } from 'plusui-native-core';
+import { win, browser, router, app } from './plusui';
 
 // Define routes for your app (optional - for SPA routing)
 const routes = {
@@ -130,5 +130,5 @@ function App() {
   );
 }
 
-export default App;
-
+export default App;
+

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

@@ -0,0 +1,117 @@
+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();
+
+export const win = {
+  minimize: async () => invoke('window.minimize', []),
+  maximize: async () => invoke('window.maximize', []),
+  close: async () => invoke('window.close', []),
+  setPosition: async (x: number, y: number) => invoke('window.setPosition', [x, y]),
+  getSize: async (): Promise<WindowSize> => invoke('window.getSize', []) as Promise<WindowSize>,
+  getPosition: async (): Promise<WindowPosition> => invoke('window.getPosition', []) as Promise<WindowPosition>,
+};
+
+export const browser = {
+  getUrl: async (): Promise<string> => invoke('browser.getUrl', []) as Promise<string>,
+  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 eventHandler = (event: Event) => {
+      const custom = event as CustomEvent<{ url?: string }>;
+      const nextUrl = custom.detail?.url ?? '';
+      handler(nextUrl);
+    };
+
+    window.addEventListener('plusui:navigate', eventHandler);
+    return () => window.removeEventListener('plusui:navigate', eventHandler);
+  },
+};
+
+export const router = {
+  setRoutes: (routes: RouteMap) => {
+    _routes = routes;
+  },
+  push: async (path: string) => {
+    const target = _routes[path] ?? path;
+    return invoke('browser.navigate', [target]);
+  },
+};
+
+export const app = {
+  quit: async () => invoke('app.quit', []),
+};

package/templates/react/main.cpp.template

@@ -181,7 +181,7 @@ int main() {
 // ============================================================================
 // FRONTEND API REFERENCE
 // ============================================================================
-// import { win, browser, router, app, display, clipboard } from 'plusui-native-core';
+// import { win, browser, router, app } from './frontend/src/plusui';
 //
 // WINDOW: win.minimize(), win.maximize(), win.close(), win.center(),
 //         win.setSize(w, h), win.setPosition(x, y), win.setTitle(str),
@@ -197,5 +197,5 @@ int main() {
 //
 // DISPLAY: display.getAll(), display.getPrimary(), display.getCurrent()
 //
-// CLIPBOARD: clipboard.writeText(str), clipboard.readText(), clipboard.clear()
-
+// CLIPBOARD: clipboard.writeText(str), clipboard.readText(), clipboard.clear()
+