akanjs 3.0.0-beta.20 → 3.0.0-beta.21

package/webkit/useCsrValues.ts

@@ -10,7 +10,6 @@ import {
   getPathInfo,
   type LocationState,
   type NavigationIntent,
-  normalizeDeepLinkHref,
   type PageState,
   type PageTransition,
   type PathRoute,
@@ -21,9 +20,9 @@ import {
   type TransitionType,
   type UseCsrTransition,
 } from "akanjs/client";
-import { loadCapacitorApp } from "akanjs/client/capacitor";
 import { clamp, parseAkanI18nEnv, parseBasePaths } from "akanjs/common";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { NativeNavigation } from "./nativeNavigation";
 import {
   createFrameSnapshot,
   createTransitionPlan,
@@ -1157,8 +1156,6 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     keyboardVisible: keyboardFrame.visible,
     router,
   });
-  const handledDeepLinkRef = useRef<{ href: string; handledAt: number; resetStack: boolean } | null>(null);
-  const didResetDeepLinkStackRef = useRef(false);
 
   useEffect(() => {
     if (pageContentRef.current) pageContentRef.current.scrollTop = getScrollTop(location);
@@ -1175,126 +1172,15 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     };
   }, [keyboardFrame.height, keyboardFrame.visible, resolvedLocation.pathRoute.path, router]);
 
-  useEffect(() => {
-    const isMobileTarget = Boolean(window.__AKAN_MOBILE_TARGET__);
-    if (Device.getDevice().info.platform === "web" && !isMobileTarget) return;
-    let removeListener: (() => void) | undefined;
-    let disposed = false;
-    const mountedAt = Date.now();
-
-    const enterDeepLinkWhenReady = (href: string, resetStack: boolean, attempt = 0) => {
-      if (!clientRouter.isInitialized) {
-        if (attempt < 40) window.setTimeout(() => enterDeepLinkWhenReady(href, resetStack, attempt + 1), 50);
-        else debugFrame("native.deepLink.skipped", { href, reason: "router-not-ready" });
-        return;
-      }
-      clientRouter.enterDeepLink(href, { resetStack, scrollToTop: true });
-    };
-
-    const handleDeepLink = (url: string | null | undefined, resetStack: boolean) => {
-      if (!url) return;
-      const href = normalizeDeepLinkHref(url);
-      const now = Date.now();
-      const lastHandled = handledDeepLinkRef.current;
-      const shouldResetStack = resetStack || (!lastHandled && now - mountedAt < 5000);
-      if (
-        lastHandled?.href === href &&
-        now - lastHandled.handledAt < 1000 &&
-        (!shouldResetStack || lastHandled.resetStack)
-      )
-        return;
-      handledDeepLinkRef.current = { href, handledAt: now, resetStack: shouldResetStack };
-      debugFrame("native.deepLink", {
-        href,
-        resetStack: shouldResetStack,
-        sourceResetStack: resetStack,
-        historyIdx: history.current.idx,
-        mountedForMs: now - mountedAt,
-        routerReady: clientRouter.isInitialized,
-      });
-      if (shouldResetStack) didResetDeepLinkStackRef.current = true;
-      enterDeepLinkWhenReady(href, shouldResetStack);
-    };
-
-    void loadCapacitorApp()
-      .then(({ App }) => {
-        debugFrame("native.deepLink.listener", { platform: Device.getDevice().info.platform, isMobileTarget });
-        const listener = App.addListener("appUrlOpen", (event: unknown) => {
-          handleDeepLink((event as { url?: string | null } | undefined)?.url, false);
-        });
-
-        void Promise.resolve(listener).then((handle) => {
-          const remove =
-            typeof (handle as { remove?: unknown } | undefined)?.remove === "function"
-              ? () => void (handle as { remove: () => Promise<void> | void }).remove()
-              : undefined;
-          if (disposed) remove?.();
-          else removeListener = remove;
-        });
-
-        void App.getLaunchUrl?.()
-          .then((launch) => {
-            debugFrame("native.deepLink.launchUrl", { url: launch?.url ?? null });
-            handleDeepLink(launch?.url, true);
-          })
-          .catch((error) => debugFrame("native.deepLink.launchUrlError", { error: String(error) }));
-      })
-      .catch((error) => debugFrame("native.deepLink.listenerError", { error: String(error) }));
-
-    return () => {
-      disposed = true;
-      removeListener?.();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (Device.getDevice().info.platform === "web") return;
-    let removeListener: (() => void) | undefined;
-    let disposed = false;
-
-    void loadCapacitorApp().then(({ App }) => {
-      const listener = App.addListener("backButton", () => {
-        const nativeBackState = nativeBackStateRef.current;
-        debugFrame("native.backButton", {
-          historyIdx: history.current.idx,
-          path: nativeBackState.path,
-          keyboardHeight: nativeBackState.keyboardHeight,
-        });
-        if (nativeBackState.keyboardVisible) {
-          void prepareForFrameTransition();
-          return;
-        }
-        if (history.current.idx > 0) {
-          nativeBackState.router.back();
-          return;
-        }
-        const fallbackPath = window.__AKAN_MOBILE_TARGET__?.indexPath ?? "/";
-        if (didResetDeepLinkStackRef.current) {
-          void App.exitApp?.();
-          return;
-        }
-        if (nativeBackState.path !== fallbackPath) {
-          clientRouter.backOrFallback(fallbackPath, { scrollToTop: false });
-          return;
-        }
-        void App.exitApp?.();
-      });
-
-      void Promise.resolve(listener).then((handle) => {
-        const remove =
-          typeof (handle as { remove?: unknown } | undefined)?.remove === "function"
-            ? () => void (handle as { remove: () => Promise<void> | void }).remove()
-            : undefined;
-        if (disposed) remove?.();
-        else removeListener = remove;
-      });
-    });
-
-    return () => {
-      disposed = true;
-      removeListener?.();
-    };
-  }, []);
+  useEffect(
+    () =>
+      new NativeNavigation({
+        historyIdx: () => history.current.idx,
+        backState: () => nativeBackStateRef.current,
+        dismissKeyboard: prepareForFrameTransition,
+      }).listen(),
+    [],
+  );
 
   return {
     ...routeState,

package/webkit/useGeoLocation.tsx

@@ -1,23 +1,21 @@
 "use client";
-import { loadCapacitorGeolocation } from "akanjs/client/capacitor";
+import { AkanNativeError, loadGeolocation, opener } from "akanjs/client/native";
 
 /** `getPosition` opens the app settings instead of resolving when location permission is denied. */
 export const useGeoLocation = () => {
-  const checkPermission = async (): Promise<{ geolocation: string; coarseLocation: string }> => {
-    const { Geolocation } = await loadCapacitorGeolocation();
-    const { location: geolocation, coarseLocation } = await Geolocation.requestPermissions();
-    return { geolocation, coarseLocation };
+  const checkPermission = async () => {
+    const { geolocation } = await loadGeolocation();
+    return await geolocation.requestPermission();
   };
 
-  const getPosition = async () => {
-    const { geolocation, coarseLocation } = await checkPermission();
-    if (geolocation === "denied" || coarseLocation === "denied") {
-      location.assign("app-settings:");
-      return;
+  const getPosition = async (options: { enableHighAccuracy?: boolean } = {}) => {
+    const { geolocation } = await loadGeolocation();
+    try {
+      return await geolocation.getCurrentPosition(options);
+    } catch (error) {
+      if (AkanNativeError.from(error).code !== "PERMISSION_DENIED") throw error;
+      await opener.openSettings().catch(() => undefined);
     }
-    const { Geolocation } = await loadCapacitorGeolocation();
-    const coordinates = await Geolocation.getCurrentPosition();
-    return coordinates;
   };
 
   return { checkPermission, getPosition };

package/webkit/usePurchase.tsx

@@ -1,143 +1,88 @@
 "use client";
-import "cordova-plugin-purchase/www/store";
-
-import { loadCapacitorApp } from "akanjs/client/capacitor";
+import { AkanNativeError, type IapProduct, type IapTransaction, loadIap, nativePlatform } from "akanjs/client/native";
 import { useEffect, useRef, useState } from "react";
 
+import { NativePurchase, type NativePurchaseOptions } from "./nativePurchase";
+
+export type {
+  BillingVerification,
+  PurchaseCallback,
+  PurchaseProductInfo,
+  PurchaseProductType,
+} from "./nativePurchase";
+
 export type PlatformType = "android" | "ios" | "all";
-export interface ProductType {
-  id: string;
-  type: keyof typeof CdvPurchase.ProductType;
-}
 
-export type CdvProductType = CdvPurchase.ProductType;
+export type PurchaseResult = "purchased" | "pending" | "cancelled" | "unverified";
 
-/** @deprecated Needs `cordova-plugin-purchase`, a package-wide peer dependency; use `@revenuecat/purchases-capacitor`. */
-export const usePurchase = ({
-  platform,
-  productInfo,
-  url,
-  onPay,
-  onSubscribe,
-}: {
+interface UsePurchaseOptions extends NativePurchaseOptions {
+  /** The stores this app sells in; a native shell on another platform shows no products. */
   platform: PlatformType;
-  productInfo: ProductType[];
-  url: string;
-  onPay?: (transaction: CdvPurchase.Transaction) => void | Promise<void>;
-  onSubscribe?: (transaction: CdvPurchase.Transaction) => void | Promise<void>;
-}) => {
+}
+
+/** In-app purchase on the native iap plugin: StoreKit 2 on iOS, Play Billing on Android. The web sells nothing. */
+export const usePurchase = ({ platform, ...options }: UsePurchaseOptions) => {
   const [isLoading, setIsLoading] = useState(true);
-  const billingRef = useRef<any>(null);
+  const [products, setProducts] = useState<IapProduct[]>([]);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const flow = () => new NativePurchase(optionsRef.current);
+  
+  const settleLater = (transaction: IapTransaction) =>
+    void flow()
+      .settle(transaction)
+      .catch(() => undefined);
 
   useEffect(() => {
-    const init = async () => {
-      if (CdvPurchase.store.isReady) {
-        setIsLoading(false);
-
-        return;
-      }
-      const { App } = await loadCapacitorApp();
-      const app = await App.getInfo();
-      const storePlatforms =
-        platform === "all"
-          ? [CdvPurchase.Platform.GOOGLE_PLAY, CdvPurchase.Platform.APPLE_APPSTORE]
-          : [platform === "android" ? CdvPurchase.Platform.GOOGLE_PLAY : CdvPurchase.Platform.APPLE_APPSTORE];
-      CdvPurchase.store.register(
-        storePlatforms.flatMap((storePlatform) =>
-          productInfo.map((product) => ({
-            id: product.id,
-            platform: storePlatform,
-            type: CdvPurchase.ProductType[product.type],
-          })),
-        ),
-      );
-
-      await CdvPurchase.store.initialize([
-        { platform: CdvPurchase.Platform.APPLE_APPSTORE, options: { needAppReceipt: false } },
-        { platform: CdvPurchase.Platform.GOOGLE_PLAY },
+    const current = nativePlatform();
+    if (!current || (platform !== "all" && platform !== current)) {
+      setIsLoading(false);
+      return;
+    }
+    let active = true;
+    let stop: () => void = () => undefined;
+    void (async () => {
+      const { iap } = await loadIap();
+      if (!active) return;
+      stop = iap.listen("transaction", settleLater);
+      const [{ products }, { transactions }] = await Promise.all([
+        iap.getProducts({ ids: optionsRef.current.productInfo.map(({ id }) => id) }),
+        iap.getUnfinished(),
       ]);
-      await CdvPurchase.store.update();
-      await CdvPurchase.store.restorePurchases();
-      CdvPurchase.store.validator = (async (
-        request: { id: string; transaction: { id: string; purchaseToken: string; appStoreReceipt: string } },
-        callback: (result: {
-          ok: boolean;
-          data: { id: string; latest_receipt: boolean; transaction: CdvPurchase.Transaction };
-        }) => void,
-      ) => {
-        const transactionId = request.transaction.id;
-        const transactions = CdvPurchase.store.localTransactions;
-        const verifingTransaction = transactions.find((transaction) => transaction.transactionId === transactionId);
-
-        if (verifingTransaction?.state !== "approved") return;
-
-        const billing = await fetch(`${url}/billing/verifyBilling`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            data: {
-              platform: verifingTransaction.platform === CdvPurchase.Platform.GOOGLE_PLAY ? "google" : "apple",
-              packageName: app.id,
-              productId: verifingTransaction.products[0].id,
-              receipt:
-                verifingTransaction.platform === CdvPurchase.Platform.GOOGLE_PLAY
-                  ? request.transaction.purchaseToken
-                  : request.transaction.appStoreReceipt,
-              transactionId: verifingTransaction.transactionId,
-            },
-          }),
-        });
-
-        billingRef.current = billing.json();
-
-        callback({
-          ok: !!billing,
-          data: { id: request.id, latest_receipt: true, transaction: request.transaction } as any,
-        });
-      }) as any;
-      CdvPurchase.store.localReceipts.forEach((receipt) => {
-        if (receipt.platform === CdvPurchase.Platform.GOOGLE_PLAY)
-          if (receipt.transactions[0].state === CdvPurchase.TransactionState.APPROVED)
-            void receipt.transactions[0].verify();
-          else void receipt.transactions[0].finish();
+      if (!active) return;
+      setProducts(products);
+      for (const transaction of transactions) settleLater(transaction);
+    })()
+      .catch(() => undefined)
+      .finally(() => {
+        if (active) setIsLoading(false);
       });
-
-      CdvPurchase.store
-        .when()
-        .approved((transaction) => {
-          void transaction.verify();
-        })
-        .verified((receipt) => {
-          void receipt.finish();
-        })
-        .finished((transaction) => {
-          void inAppPurchase(transaction);
-        });
-      setIsLoading(false);
+    return () => {
+      active = false;
+      stop();
     };
-    void init();
   }, []);
-  const purchaseProduct = async (product: CdvPurchase.Product) => {
-    await product.getOffer()?.order();
-  };
 
-  const restorePurchases = async () => {
-    await CdvPurchase.store.restorePurchases();
+  const purchaseProduct = async (product: IapProduct | string, offerToken?: string): Promise<PurchaseResult> => {
+    const { iap } = await loadIap();
+    try {
+      const productId = typeof product === "string" ? product : product.id;
+      const { status, transaction } = await iap.purchase({ productId, ...(offerToken ? { offerToken } : {}) });
+      if (status === "pending" || !transaction) return "pending";
+      const settled = await flow().settle(transaction);
+      return settled === "finished" ? "purchased" : settled === "unverified" ? "unverified" : "pending";
+    } catch (error) {
+      if (AkanNativeError.from(error).code === "CANCELLED") return "cancelled";
+      throw error;
+    }
   };
 
-  const inAppPurchase = async (transaction: CdvPurchase.Transaction) => {
-    const product = CdvPurchase.store.get(transaction.products[0].id);
-    if (product?.type === "consumable") await onPay?.(transaction);
-    else await onSubscribe?.(transaction);
-    await transaction.finish();
+  const restorePurchases = async () => {
+    const { iap } = await loadIap();
+    const { transactions } = await iap.restore();
+    for (const transaction of transactions) if (transaction.acknowledged === false) settleLater(transaction);
+    return transactions;
   };
 
-  return {
-    isLoading,
-    products: CdvPurchase.store.products,
-    purchaseProduct,
-    restorePurchases,
-  };
+  return { isLoading, products, purchaseProduct, restorePurchases };
 };

package/capacitor.base.config.ts

@@ -1,140 +0,0 @@
-import { existsSync, readdirSync, statSync } from "node:fs";
-import os from "node:os";
-import path from "node:path";
-import type { CapacitorConfig } from "@capacitor/cli";
-import type { AkanMobileTargetConfig, AppScanResult } from "akanjs";
-import { parseAkanI18nEnv } from "akanjs/common";
-
-const getLocalIP = () => {
-  const interfaces = os.networkInterfaces();
-  for (const interfaceName in interfaces) {
-    const iface = interfaces[interfaceName];
-    if (!iface) continue;
-    for (const alias of iface) {
-      if (alias.family === "IPv4" && !alias.internal) return alias.address;
-    }
-  }
-  return "127.0.0.1";
-};
-
-const normalizeBasePath = (basePath: string | undefined) => basePath?.replace(/^\/+|\/+$/g, "");
-
-const findAppsDir = (appName: string) => {
-  let dir = process.cwd();
-  while (dir !== path.dirname(dir)) {
-    const appsDir = path.join(dir, "apps");
-    if (existsSync(path.join(appsDir, appName, "akan.config.ts"))) return appsDir;
-    if (path.basename(dir) === appName && existsSync(path.join(dir, "akan.config.ts"))) return path.dirname(dir);
-    dir = path.dirname(dir);
-  }
-};
-
-const getAppNames = (appsDir: string, maxDepth = 3, prefix = ""): string[] => {
-  const appNames: string[] = [];
-  for (const entry of readdirSync(path.join(appsDir, prefix))) {
-    if (["node_modules", "dist", "public", "webkit"].includes(entry)) continue;
-    const entryPath = path.join(appsDir, prefix, entry);
-    if (!statSync(entryPath).isDirectory()) continue;
-    const appName = path.join(prefix, entry).split(path.sep).join("/");
-    if (existsSync(path.join(entryPath, "akan.config.ts"))) appNames.push(appName);
-    if (maxDepth > 0) appNames.push(...getAppNames(appsDir, maxDepth - 1, appName));
-  }
-  return appNames;
-};
-
-const resolveLocalCsrPort = (appInfo: AppScanResult) => {
-  const explicitPort = process.env.AKAN_PUBLIC_CLIENT_PORT ?? process.env.PORT;
-  if (explicitPort) return explicitPort;
-  const appsDir = findAppsDir(appInfo.name);
-  const appNames = appsDir ? getAppNames(appsDir).sort((a, b) => a.localeCompare(b)) : [];
-  const appIndex = Math.max(appNames.indexOf(appInfo.name), 0);
-  const portOffset = Number.parseInt(process.env.PORT_OFFSET ?? "0");
-  return (8282 + appIndex + portOffset).toString();
-};
-
-const routeBasePaths = (appInfo: AppScanResult) =>
-  new Set(
-    appInfo.routes
-      .map((route) => route.replace(/^\.\//, "").split("/")[0])
-      .filter((segment): segment is string => !!segment && !segment.startsWith("_") && !segment.startsWith("(")),
-  );
-
-const resolveTarget = (appInfo: AppScanResult, targetName = process.env.AKAN_MOBILE_TARGET) => {
-  const targets = appInfo.akanConfig.mobile.targets;
-  if (!targets || Object.keys(targets).length === 0) throw new Error("Akan mobile target metadata is missing.");
-  if (targetName) {
-    const target = targets[targetName];
-    if (!target) {
-      const basePath = normalizeBasePath(targetName);
-      const [template] = Object.values(targets);
-      if (basePath && template && routeBasePaths(appInfo).has(basePath))
-        return { ...template, name: basePath, basePath };
-      throw new Error(`Akan mobile target '${targetName}' was not found.`);
-    }
-    return target;
-  }
-  const entries = Object.entries(targets);
-  if (entries.length !== 1) throw new Error("AKAN_MOBILE_TARGET is required when multiple mobile targets exist.");
-  return entries[0]?.[1] as AkanMobileTargetConfig;
-};
-
-const localCsrUrl = (ip: string, target: AkanMobileTargetConfig, appInfo: AppScanResult) => {
-  const basePath = normalizeBasePath(target.basePath);
-  const locale = parseAkanI18nEnv().defaultLocale;
-  const pathname = basePath ? `${locale}/${basePath}` : `${locale}/`;
-  const port = resolveLocalCsrPort(appInfo);
-  const params = new URLSearchParams({ csr: "true", akanMobileTarget: target.name });
-  if (basePath) params.set("akanMobileBasePath", basePath);
-  if (target.indexPath) params.set("akanMobileIndexPath", target.indexPath);
-  return `http://${ip}:${port}/${pathname}?${params}`;
-};
-
-export const withBase = (
-  configImp: (config: CapacitorConfig, target: AkanMobileTargetConfig) => CapacitorConfig = (config) => config,
-  appInfo?: AppScanResult,
-  targetName?: string,
-) => {
-  const ip = getLocalIP();
-  if (!appInfo) throw new Error("withBase requires apps/<app>/akan.app.json metadata.");
-  const target = resolveTarget(appInfo, targetName);
-  const {
-    name: _name,
-    basePath: _basePath,
-    indexPath: _indexPath,
-    version: _version,
-    buildNum: _buildNum,
-    assets: _assets,
-    permissions: _permissions,
-    deepLinks: _deepLinks,
-    files: _files,
-    ...capacitorTarget
-  } = target;
-  const baseConfig: CapacitorConfig = {
-    ...capacitorTarget,
-    appId: target.appId,
-    appName: target.appName,
-    webDir: "dist",
-    server:
-      process.env.APP_OPERATION_MODE !== "release"
-        ? {
-            androidScheme: "http",
-            url: localCsrUrl(ip, target, appInfo),
-            cleartext: true,
-            allowNavigation: [ip, "localhost"],
-          }
-        : {
-            allowNavigation: ["*"],
-          },
-    plugins: {
-      CapacitorCookies: { enabled: true },
-      ...target.plugins,
-    },
-    android: {
-      ...target.android,
-    },
-    ios: {
-      ...target.ios,
-    },
-  };
-  return configImp(baseConfig, target);
-};