@peers-app/peers-ui 0.7.40 → 0.8.1

package/src/tabs-layout/tabs-state.ts

@@ -1,4 +1,4 @@
-import { groupDeviceVar, groupUserVar, IAppNav, IPackage, newid } from "@peers-app/peers-sdk";
+import { groupDeviceVar, groupUserVar, IAppNav, IPackage, newid, observable, Observable } from "@peers-app/peers-sdk";
 import { _mainContentPath } from "../globals";
 import { systemPackage } from "../system-apps";
 import { allPackages } from "../ui-router/routes-loader";
@@ -19,19 +19,68 @@ export const launcherApp: TabState = {
   iconClassName: 'bi-grid-3x3-gap',
 };
 
-// Global persistent variables for tab state
-export const activeTabs = groupDeviceVar<TabState[]>('activeTabs', {
+// Persistent vars for storage (write-only, no subscription to avoid oscillation)
+const _persistentActiveTabs = groupDeviceVar<TabState[]>('activeTabs', {
   defaultValue: [launcherApp],
 });
 
-export const activeTabId = groupDeviceVar<string>('activeTabId', {
+const _persistentActiveTabId = groupDeviceVar<string>('activeTabId', {
   defaultValue: 'launcher',
 });
 
-export const recentlyUsedApps = groupUserVar<string[]>('recentlyUsedApps', {
+const _persistentRecentlyUsedApps = groupUserVar<string[]>('recentlyUsedApps', {
   defaultValue: [],
 });
 
+// In-memory observables for UI state (loaded once, then write-through to persistent vars)
+export const activeTabs: Observable<TabState[]> & { loadingPromise: Promise<void> } = (() => {
+  const obs = observable<TabState[]>([launcherApp]);
+  
+  // Write-through to persistent var on change
+  obs.subscribe(value => {
+    _persistentActiveTabs(value);
+  });
+  
+  // Load initial value once
+  const loadingPromise = _persistentActiveTabs.loadingPromise.then(() => {
+    obs(_persistentActiveTabs());
+  });
+  
+  return Object.assign(obs, { loadingPromise });
+})();
+
+export const activeTabId: Observable<string> & { loadingPromise: Promise<void> } = (() => {
+  const obs = observable<string>('launcher');
+  
+  // Write-through to persistent var on change
+  obs.subscribe(value => {
+    _persistentActiveTabId(value);
+  });
+  
+  // Load initial value once
+  const loadingPromise = _persistentActiveTabId.loadingPromise.then(() => {
+    obs(_persistentActiveTabId());
+  });
+  
+  return Object.assign(obs, { loadingPromise });
+})();
+
+export const recentlyUsedApps: Observable<string[]> & { loadingPromise: Promise<void> } = (() => {
+  const obs = observable<string[]>([]);
+  
+  // Write-through to persistent var on change
+  obs.subscribe(value => {
+    _persistentRecentlyUsedApps(value);
+  });
+  
+  // Load initial value once
+  const loadingPromise = _persistentRecentlyUsedApps.loadingPromise.then(() => {
+    obs(_persistentRecentlyUsedApps());
+  });
+  
+  return Object.assign(obs, { loadingPromise });
+})();
+
 export const initializedTabs = new Set<string>();
 
 export function goToTabPath(path: string) {

package/src/ui-router/ui-loader.tsx

@@ -221,26 +221,65 @@ const UILoader = (args: { peersUIId: string, props: Record<string, any> }) => {
 }
 
 const uiLoadingPromises: Record<string, Promise<any>> = {};
+
+// Check if we're running in a React Native WebView (has injectUIBundle available)
+const isReactNativeWebView = typeof (window as any).ReactNativeWebView !== 'undefined';
+
 function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
   // Dynamically import the bundle
   let importPromise: Promise<any> = uiLoadingPromises[pkg.packageId];
   if (!importPromise || forceRefresh) {
+    const sTime = Date.now();
     console.log(`loading ui bundle for ${pkg.name}`);
     importPromise = new Promise<void>(async (resolve, reject) => {
       try {
-        let bundleCode = '';
-        if (pkg.uiBundleFileId) {
-          bundleCode = await rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+        if (!pkg.uiBundleFileId) {
+          resolve();
+          return;
         }
-        if (bundleCode) {
-          const exportUIs = (peerUIs: IPeersPackageUIs) => {
-            // TODO maybe add packageId that this came from
-            peerUIs?.uis?.forEach(ui => {
-              peersUIs[ui.peersUIId] = ui;
-            });
+
+        // Use fast injection path for React Native WebView
+        if (isReactNativeWebView && rpcServerCalls.injectUIBundle) {
+          // Set up listeners for bundle load completion
+          const _window = window as any;
+          _window.__peersUIs = _window.__peersUIs || {};
+          
+          const loadPromise = new Promise<void>((resolveLoad, rejectLoad) => {
+            const fileId = pkg.uiBundleFileId!;
+            
+            _window.__peersUIBundleLoaded = (loadedFileId: string) => {
+              if (loadedFileId === fileId) {
+                // Copy loaded UIs to our local registry
+                Object.keys(_window.__peersUIs || {}).forEach(peersUIId => {
+                  peersUIs[peersUIId] = _window.__peersUIs[peersUIId];
+                });
+                resolveLoad();
+              }
+            };
+            
+            _window.__peersUIBundleError = (errorFileId: string, errorMsg: string) => {
+              if (errorFileId === fileId) {
+                rejectLoad(new Error(errorMsg));
+              }
+            };
+          });
+
+          await rpcServerCalls.injectUIBundle(pkg.uiBundleFileId);
+          await loadPromise;
+          console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`);
+        } else {
+          // Fallback: use postMessage-based getFileContents (slower for large bundles)
+          let bundleCode = await rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+          if (bundleCode) {
+            const exportUIs = (peerUIs: IPeersPackageUIs) => {
+              peerUIs?.uis?.forEach(ui => {
+                peersUIs[ui.peersUIId] = ui;
+              });
+            }
+            const bundleFunction = new Function('exportUIs', bundleCode);
+            await bundleFunction(exportUIs);          
           }
-          const bundleFunction = new Function('exportUIs', bundleCode);
-          await bundleFunction(exportUIs);          
+          console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${(bundleCode.length/1000).toFixed(0)} KB`);
         }
         resolve();
       } catch (err) {