@composy/offline-vue

@composy/offline-vue

@composy/offline-vue 是 @composy/offline-core 的 Vue 3 适配层。它不复制离线队列、缓存、同步或 engine 状态逻辑，只负责把 core runtime 接入 Vue app、provide/inject 和组合式函数。

安装

pnpm add @composy/offline-vue vue

Vue Plugin

import { createOfflinePlugin } from '@composy/offline-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(
  createOfflinePlugin({
    globalProperties: true,
    offline: {
      syncHandler: async action => {
        await fetch(`/api/offline/${action.type}`, {
          body: JSON.stringify(action.data),
          method: 'POST',
        })
      },
    },
  })
)

app.mount('#app')

插件会自动调用 runtime.start()，并在 app.unmount() 时销毁当前 app 持有的 runtime。

useOffline

import { useOffline } from '@composy/offline-vue'

const { clearQueue, isOnline, isSyncing, pendingActions, pendingCount, queueAction, sync } =
  useOffline()

queueAction('submit-order', { orderId: 'A-001' })
await sync()

console.info(isOnline.value)
console.info(isSyncing.value)
console.info(pendingCount.value)
console.info(pendingActions.value)
clearQueue()

如果当前组件树已经安装 plugin，useOffline() 会优先复用注入的 runtime。未安装 plugin 时默认复用包内共享 runtime，也可以传入 { shared: false } 创建组件私有 runtime。

useNetworkStatus

import { useNetworkStatus } from '@composy/offline-vue'

const { downlink, effectiveType, getInfo, isOnline, rtt } = useNetworkStatus()

console.info(isOnline.value)
console.info(effectiveType.value)
console.info(downlink.value)
console.info(rtt.value)
console.info(getInfo())

useCacheStrategy

import { useCacheStrategy } from '@composy/offline-vue'

const cache = useCacheStrategy({
  defaultTTL: 300_000,
  maxEntries: 200,
})

await cache.fetch('settings', loadSettings, 'network-first')
cache.set('draft', { title: 'offline' })
console.info(cache.stats.value.entries)

Engine Plugin

import { createOfflineEnginePlugin } from '@composy/offline-vue/plugins'

await engine.use(
  createOfflineEnginePlugin({
    offline: {
      syncHandler: async action => {
        await syncAction(action)
      },
    },
  })
)

Vue engine plugin 复用 @composy/offline-core/engine 的状态同步和 API 注册逻辑。它只额外处理 Vue app 创建后的 installOfflineRuntime(app, runtime)。

主要导出

• createOfflinePlugin
• createNativeOfflinePlugin
• LDesignOfflinePlugin
• createOfflineVueRuntime
• installOfflineRuntime
• useOffline
• useNetworkStatus
• useCacheStrategy
• createOfflineEnginePlugin
• offlineStateKeys
• offlineEventKeys

构建产物

构建后必须包含：

• dist/index.js 与 dist/index.min.js
• es/**/*.js 与 es/**/*.d.ts
• esm/**/*.js 与 esm/**/*.d.ts
• lib/**/*.cjs 与 lib/**/*.d.ts

工程配置

• 此包是 @composy/offline-core 的 Vue 3 适配层，构建通过 @composy/builder 与 rolldown 完成。
• builder、TypeScript 与 ESLint 权威配置位于 .ldesign/；包根的 tsconfig.json 与 eslint.config.js 是兼容入口。
• 构建会生成 dist/index.min.js，并在结束时校验 exports、声明文件和 CJS/ESM 入口；可用 pnpm --filter @composy/offline-vue outputs:check 单独重跑产物契约检查。

维护约定

• 核心算法、队列、缓存、同步和 engine 通用逻辑必须放在 @composy/offline-core。
• Vue 包只保留 Vue 注入、响应式状态、生命周期桥接和组合式函数。
• 新增组合式函数时优先消费已有 core runtime API，不复制状态机。