@appaflytech/wappa-mobile-ui

Wappa mobil UI bileşenleri + sunucu-güdümlü (server-driven) render motoru. wappa-mobile ve wappa-lisans/mobile-app projeleri bu paketi paylaşır.

Neden source-only?

Bu paket derlenmez (build yok), kaynak .tsx dosyaları olduğu gibi yayınlanır. Bileşenler NativeWind (className) ve Reanimated worklet kullandığı için, tüketen uygulamanın metro + babel zincirinin bu dosyaları işlemesi gerekir. Önceden derlenmiş bir bundle NativeWind className→style dönüşümünü ve worklet'leri kırar.

İçerik (pakette OLAN)

| Subpath | Açıklama | | --- | --- | | @appaflytech/wappa-mobile-ui | Barrel — getComponent, registerComponents, render, navigation, buses, setWappaStore, useWappaConfig | | .../components | getComponent registry (52 UI bileşeni) + registerComponents/getRegistry | | .../components/navigation/* | DynamicNavigation, DrawerNav, TabBarNav | | .../core/render | server-driven render motoru | | .../core/* | wrappers, overlay, smart-overlays, data-bus, form-bus | | .../core/runtime | setWappaStore / getWappaStore (host store injection) | | .../core/wappa-config | useWappaConfig (cdn/api/key/env injection) |

App tarafında OLAN (pakette DEĞİL)

WapScreen, veri servisleri (contextService/pushService), uygulama state'i (useAppStore ve app-özel store'lar), utils ve özel bileşenler her app'in içinde durur. Paket bunları injection ile alır:

// app/store/store.ts — store'u tanımla ve motora ver
import { setWappaStore } from "@appaflytech/wappa-mobile-ui/core/runtime";
export const useAppStore = create<AppState>(/* ... */);
setWappaStore(useAppStore); // bir kez, modül yüklenirken

// kendi bileşenlerini kaydet (opsiyonel)
import { registerComponents } from "@appaflytech/wappa-mobile-ui";
registerComponents({ "my-widget": MyWidget });

// WapScreen app'te; motoru paketten kullanır
import { render } from "@appaflytech/wappa-mobile-ui/core/render";

Host store'un (en az) page?: { path?: string } ve wapNavigate?: (path) => void alanlarını sağlaması beklenir.

Kurulum (her iki uygulamada)

1. Bağımlılık

// package.json
"dependencies": {
  "@appaflytech/wappa-mobile-ui": "^0.0.1"
}

Yayınlamadan önce yerel test için sibling klasörden link:

npm install ../wappa-mobile-ui   # "@appaflytech/wappa-mobile-ui": "file:../wappa-mobile-ui"

2. Tailwind — paketi content'e ekle (ZORUNLU)

NativeWind paketin className'lerini ancak content globlarında görürse işler:

// tailwind.config.js
content: [
  "./app/**/*.{ts,tsx}",
  "./src/**/*.{ts,tsx}",
  "./node_modules/@appaflytech/wappa-mobile-ui/**/*.{ts,tsx}", // <-- ekle
],

İsteğe bağlı: ortak tema/safelist tek kaynaktan gelsin diye preset kullan:

presets: [require("@appaflytech/wappa-mobile-ui/tailwind.preset")],

3. Metro (ZORUNLU — paket proje kökü dışında)

Paket sibling klasörde olduğu ve file: ile kurulduğu için metro'yu ayarla:

// metro.config.js
const path = require("path");
const wappaUiDir = path.resolve(__dirname, "../wappa-mobile-ui"); // mobile-app: ../../wappa-mobile-ui
config.watchFolders = [...(config.watchFolders ?? []), wappaUiDir];
config.resolver.nodeModulesPaths = [path.resolve(__dirname, "node_modules")];
config.resolver.extraNodeModules = {
  ...(config.resolver.extraNodeModules ?? {}),
  "@appaflytech/wappa-mobile-ui": wappaUiDir, // kaynaktan çöz → canlı düzenleme
};

npm file: bağımlılığını node_modules'a kopyalar (symlink değil). extraNodeModules ile kaynağa yönlendirince düzenlemeler reinstall gerektirmeden yansır. Değişiklik sonrası metro'yu -c ile yeniden başlat.

4. Eksik native peer'ler

Registry tüm bileşenleri statik import ettiği için kullanılmasa bile tüm peer'ler kurulu olmalı. wappa-mobile için eksik olanlar (mobile-app baz alındığından): expo-audio, react-i18next, i18next.

npx expo install expo-audio react-i18next i18next

5. İçe aktarma

import WapScreen from "@appaflytech/wappa-mobile-ui/components/WapScreen";
import { render, dataBus, useAppStore } from "@appaflytech/wappa-mobile-ui";

Runtime config injection (useWappaConfig)

Paket, app-özel config kaynaklarından bağımsızdır. Bileşenler (image/video/lottie/wrappers) ve veri servisleri (contextService/createContextService) cdn/api/key/env değerlerini core/wappa-config store'undan okur. Varsayılanlar EXPO_PUBLIC_WAP_* env değişkenlerinden gelir.

• wappa-mobile: ek bir şey yapmaz — varsayılanlar (env) yeterli.
• mobile-app: Studio (QR) config'ini pakete köprüler. src/store/store.ts içinde:

import { useWappaConfig } from "@appaflytech/wappa-mobile-ui/core/wappa-config";

useStudioStore.subscribe((state) => {
  const c = state.config;
  useWappaConfig.getState().setConfig(
    c ? { key: c.siteKey, api: c.api, cdn: c.cdn, env: c.env } : null,
  );
});

App-özel store'lar (useAuthStore, useStudioStore, StudioFloat/StudioMenu) pakette değil, app tarafında kalır.

Web stub'ları

react-native-maps ve react-native-image-crop-picker web'de native API kullanır. Web build için metro resolveRequest ile bu paketteki stub'lara yönlendir:

const pkg = path.dirname(require.resolve("@appaflytech/wappa-mobile-ui/package.json"));
const WEB_STUBS = {
  "react-native-maps": path.join(pkg, "utils/mocks/react-native-maps.web.ts"),
  "react-native-image-crop-picker": path.join(pkg, "utils/mocks/react-native-image-crop-picker.web.ts"),
};

Yayınlama

npm publish --access public