@kennofizet/apphub-frontend 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennofizet/apphub-frontend",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "App Hub Vue 3 UI — Windows-style desktop shell and modular apps (App Store default).",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/src/composables/useAppHubHostApi.js

@@ -6,19 +6,34 @@ export function resolveRootApp(instance = getCurrentInstance()) {
   return instance.appContext?.app ?? instance.app ?? null
 }
 
+export function resolveHostApp(app) {
+  if (app != null) return app
+  const instance = getCurrentInstance()
+  if (!instance) return null
+  return instance.appContext?.app ?? instance.app ?? null
+}
+
+export function getAppHubStoreForApp(app) {
+  const resolved = resolveHostApp(app)
+  return resolved != null ? getAppHubStore(resolved) : null
+}
+
 export function getHostApiForApp(app) {
-  return getAppHubStore(app)?.facade ?? null
+  return getAppHubStoreForApp(app)?.facade ?? null
 }
 
 export function isBackendReadyForApp(app) {
-  const store = getAppHubStore(app)
+  const store = getAppHubStoreForApp(app)
   return !!(store?.credentials?.backendUrl && store?.credentials?.token)
 }
 
 export function isHostApiReadyForApp(app) {
-  const store = getAppHubStore(app)
+  const store = getAppHubStoreForApp(app)
   if (!store?.credentials?.backendUrl || !store?.credentials?.token) return false
-  return store.facade?.hasImpl?.() === true
+  if (typeof store.facade?.hasImpl === 'function') {
+    return store.facade.hasImpl()
+  }
+  return !!store.facade
 }
 
 /**

package/src/index.js

@@ -208,8 +208,6 @@ function reconcileOriginSafety(store) {
 
   if (store.options.originBlocked && !wasBlocked) {
     disableModuleServices(store)
-  } else if (!store.options.originBlocked && (wasBlocked || wasLoading)) {
-    enableModuleApi(store)
   }
 }
 
@@ -294,6 +292,7 @@ function applyModuleOptions(store, options = {}) {
     enforceDevFriendlyOrigins: nextPublic.enforceDevFriendlyOrigins,
   })
   Object.assign(store.credentials, buildCredentials(options))
+  store._zonesSyncKey = null
   applyOriginSafety(store.options, options)
   if (store.credentials.backendUrl && store.credentials.token) {
     void startBootstrapSession(store)
@@ -332,11 +331,29 @@ function ensureZoneContext(app, store) {
   app.provide(APPHUB_ZONE_CONTEXT_KEY, store.zoneContext)
 }
 
-function syncZoneContext(store) {
+function zoneSyncKey(store) {
+  const { coreUrl, token } = store.credentials
+  return `${coreUrl}::${token}`
+}
+
+function syncZoneContext(store, { force = false } = {}) {
   syncCoreApi(store)
-  if (store.zoneContext) {
-    store.zoneContext.refresh({ skipBootstrap: true })
+  if (!store.zoneContext || !store.coreApi) return
+
+  const key = zoneSyncKey(store)
+  if (!force && store._zonesSyncKey === key && store.zoneContext.state.zones.length > 0) {
+    return store._zonesRefreshInflight ?? undefined
+  }
+  if (store._zonesRefreshInflight) {
+    return store._zonesRefreshInflight
   }
+
+  store._zonesSyncKey = key
+  store._zonesRefreshInflight = store.zoneContext.refresh({ skipBootstrap: true })
+    .finally(() => {
+      store._zonesRefreshInflight = null
+    })
+  return store._zonesRefreshInflight
 }
 
 function ensureModuleState(app, store) {
@@ -358,11 +375,14 @@ export function installAppHubModule(vueApp, options = {}) {
   let store = getAppHubStore(vueApp)
 
   if (store) {
+    vueApp.provide('apphubHostApp', vueApp)
     applyModuleOptions(store, options)
     ensureModuleInfrastructure(vueApp, store)
-    if (store.options.originBootstrapLoading || store.options.originBlocked) {
+    // While bootstrap is in flight, leave API state to startBootstrapSession — do not
+    // disable again (hub-host-starter may re-apply config when parent re-sends postMessage).
+    if (store.options.originBlocked) {
       disableModuleServices(store)
-    } else {
+    } else if (!store.options.originBootstrapLoading) {
       enableModuleApi(store)
     }
     return store.facade
@@ -385,16 +405,13 @@ export function installAppHubModule(vueApp, options = {}) {
   }
   registerAppHubStore(vueApp, store)
 
+  vueApp.provide('apphubHostApp', vueApp)
   vueApp.provide('apphubOptions', moduleOptions)
   vueApp.component('AppHubDesktop', AppHubDesktop)
   vueApp.component('AppHubRunner', AppHubRunner)
 
   ensureModuleInfrastructure(vueApp, store)
-  void startBootstrapSession(store).then(() => {
-    if (!store.options.originBlocked) {
-      enableModuleApi(store)
-    }
-  })
+  void startBootstrapSession(store)
 
   return facade
 }

package/src/modules/app-store/components/AppHubAppStoreApp.vue

@@ -122,7 +122,7 @@ const props = defineProps({
 const settingsOpen = ref(false)
 const appStore = useAppStore()
 const catalog = appStore.catalogs.store
-const rootApp = resolveRootApp(getCurrentInstance())
+const rootApp = inject('apphubHostApp', null) ?? resolveRootApp(getCurrentInstance())
 const zone = useAppHubZoneContext()
 const moduleOptions = inject('apphubOptions', {})
 const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
@@ -210,21 +210,21 @@ watch(
 )
 
 watch(
-  () => [
-    moduleOptions?.originBootstrapLoading,
-    moduleOptions?.originBlocked,
-    isHostApiReadyForApp(rootApp),
-  ],
-  () => {
-    if (!canLoadCatalog()) return
-    if (!catalog.loaded || catalog.error === 'no_api') reloadCatalog()
+  () => moduleOptions?.originBootstrapLoading,
+  (loading, prevLoading) => {
+    if (prevLoading && !loading && canLoadCatalog()) {
+      reloadCatalog()
+    }
   },
 )
 
 watch(
   () => [zone?.state?.selectedZoneId, zone?.state?.viewAllZones],
-  () => {
-    if (canLoadCatalog()) reloadCatalog()
+  (current, previous) => {
+    if (!previous) return
+    if (current[0] === previous[0] && current[1] === previous[1]) return
+    if (!canLoadCatalog() || !catalog.loaded) return
+    reloadCatalog()
   },
 )
 </script>

package/src/modules/app-store/components/AppHubDraftStoreApp.vue

@@ -83,7 +83,7 @@ const props = defineProps({
 
 const appStore = useAppStore()
 const catalog = appStore.catalogs.draft
-const rootApp = resolveRootApp(getCurrentInstance())
+const rootApp = inject('apphubHostApp', null) ?? resolveRootApp(getCurrentInstance())
 const zone = useAppHubZoneContext()
 const moduleOptions = inject('apphubOptions', {})
 const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
@@ -184,21 +184,21 @@ watch(
 )
 
 watch(
-  () => [
-    moduleOptions?.originBootstrapLoading,
-    moduleOptions?.originBlocked,
-    isHostApiReadyForApp(rootApp),
-  ],
-  () => {
-    if (!canLoadCatalog()) return
-    if (!catalog.loaded || catalog.error === 'no_api') reloadCatalog()
+  () => moduleOptions?.originBootstrapLoading,
+  (loading, prevLoading) => {
+    if (prevLoading && !loading && canLoadCatalog()) {
+      reloadCatalog()
+    }
   },
 )
 
 watch(
   () => [zone?.state?.selectedZoneId, zone?.state?.viewAllZones],
-  () => {
-    if (canLoadCatalog()) reloadCatalog()
+  (current, previous) => {
+    if (!previous) return
+    if (current[0] === previous[0] && current[1] === previous[1]) return
+    if (!canLoadCatalog() || !catalog.loaded) return
+    reloadCatalog()
   },
 )
 </script>

package/src/modules/app-store/composables/useAppStore.js

@@ -102,7 +102,10 @@ export function createAppStoreState(options = {}) {
     const append = options.append === true
     const backendReady = options.backendReady !== false
 
-    if (!backendReady || !hostApi?.hasImpl?.()) {
+    const facadeReady = hostApi && (
+      typeof hostApi.hasImpl === 'function' ? hostApi.hasImpl() : true
+    )
+    if (!backendReady || !facadeReady) {
       if (!append) {
         bucket.items = []
         bucket.error = 'no_api'