{"_id":"@composy/feature-flag-vue","name":"@composy/feature-flag-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/feature-flag-vue","version":"0.0.1","description":"Vue 3 bindings for @composy/feature-flag-core","keywords":["feature-flag","flags","ldesign","vue","vue3"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":["*.vue","*.tsx","*.jsx","dist/*","es/**/style/**","esm/**/style/**"],"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./context/*":{"types":"./es/context/*.d.ts","import":"./es/context/*.js","require":"./lib/context/*.cjs","default":"./es/context/*.js"},"./directives/*":{"types":"./es/directives/*.d.ts","import":"./es/directives/*.js","require":"./lib/directives/*.cjs","default":"./es/directives/*.js"},"./plugin":{"types":"./es/plugin/index.d.ts","import":"./es/plugin/index.js","require":"./lib/plugin/index.cjs","default":"./es/plugin/index.js"},"./plugin/*":{"types":"./es/plugin/*.d.ts","import":"./es/plugin/*.js","require":"./lib/plugin/*.cjs","default":"./es/plugin/*.js"},"./runtime/*":{"types":"./es/runtime/*.d.ts","import":"./es/runtime/*.js","require":"./lib/runtime/*.cjs","default":"./es/runtime/*.js"},"./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build","clean":"rimraf dist es esm lib","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard","typecheck":"tsc --noEmit -p tsconfig.json","postbuild":"node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd .. --target vue"},"dependencies":{"@composy/feature-flag-core":"^0.0.1"},"peerDependencies":{"vue":"^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","eslint":"10.7.0","rimraf":"^6.1.3","typescript":"5.9.3","vue":"3.5.39"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/feature-flag-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-J8b8auepUg1pSMkBvvT4NVOdte+CkVysOqYTt2X70zk5vit81TLzOns+UDYzp6rL3G9FQ/8rgruNimhCw8gSlQ==","shasum":"f34a2f41001e35120c6da436f227c7f498dbfcca","tarball":"https://registry.npmjs.org/@composy/feature-flag-vue/-/feature-flag-vue-0.0.1.tgz","fileCount":126,"unpackedSize":404712,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDEv5HNh0qqwfF1W8TiuXOf8FP8EOl5mFg1RE9dc5v7lQIhAP+GXMmbVS8ih9TtctsXIblcNBiBuXNgMMAY75/M3O9b"}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/feature-flag-vue_0.0.1_1786948849376_0.321884345972804"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:40:49.224Z","0.0.1":"2026-08-17T06:40:49.529Z","modified":"2026-08-17T06:40:49.760Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 bindings for @composy/feature-flag-core","keywords":["feature-flag","flags","ldesign","vue","vue3"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/feature-flag-vue\n\n`@composy/feature-flag-vue` 是 `@composy/feature-flag-core` 的 Vue 3 适配层。它不重新实现开关评估、Provider、Engine 状态同步等核心逻辑，只负责 Vue App 注入、组合式 API、指令和 Vue Engine 挂载。\n\n## 导出能力\n\n- `createFeatureFlagPlugin`：统一创建 Vue / Engine 插件。\n- `createFeatureFlagVuePlugin`：`createFeatureFlagPlugin` 的语义别名。\n- `createFeatureFlagEnginePlugin`：`createFeatureFlagPlugin` 的 Engine 语义别名。\n- `useFeatureFlag(name, defaultValue?)`：读取单个开关。\n- `useFeatureFlags(names)`：批量读取布尔开关。\n- `createFeatureDirective(manager)`：创建 `v-feature` 指令。\n- `FEATURE_FLAG_*` 常量：与 core engine state/event key 保持一致。\n\n## Vue App 用法\n\n```ts\nimport {\n  createFeatureFlagPlugin,\n  LocalProvider,\n} from '@composy/feature-flag-vue'\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(createFeatureFlagPlugin({\n  provider: new LocalProvider({\n    'new-dashboard': true,\n    'export-pdf': false,\n  }),\n}))\n\napp.mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { useFeatureFlag } from '@composy/feature-flag-vue'\n\nconst { enabled, value } = useFeatureFlag('new-dashboard')\n</script>\n\n<template>\n  <NewDashboard v-if=\"enabled\" />\n  <LegacyDashboard v-else />\n  <pre>{{ value }}</pre>\n</template>\n```\n\n## Engine 用法\n\n```ts\nimport { createVueEngine } from '@composy/engine-vue'\nimport {\n  createFeatureFlagEnginePlugin,\n  RemoteProvider,\n} from '@composy/feature-flag-vue'\n\ncreateVueEngine({\n  plugins: [\n    createFeatureFlagEnginePlugin({\n      provider: new RemoteProvider('/api/feature-flags'),\n      autoLoad: true,\n    }),\n  ],\n})\n```\n\n安装到 Engine 时，Vue 适配层会：\n\n- 优先把 `FlagManager` 交给 core engine plugin 注册 state、API 和事件。\n- 如果 Vue App 已存在，立即安装 provide 和 `v-feature` 指令。\n- 如果 Vue App 尚未创建，监听 `app:created` 后再安装 Vue 能力。\n\n## 指令\n\n```vue\n<template>\n  <ExportButton v-feature=\"'export-pdf'\" />\n  <LegacyPanel v-feature:hide=\"'new-dashboard'\" />\n</template>\n```\n\n- `v-feature=\"'flagName'\"`：开关开启时显示元素。\n- `v-feature:hide=\"'flagName'\"`：开关开启时隐藏元素。\n\n## 组合式 API\n\n### `useFeatureFlag(name, defaultValue?)`\n\n返回：\n\n- `enabled`：基于开关值转成布尔值的 `ComputedRef<boolean>`。\n- `value`：原始开关值的 `ComputedRef<FlagValue>`。\n\n### `useFeatureFlags(names)`\n\n返回：\n\n- `flags`：`Record<string, boolean>` 形式的批量布尔快照。\n\n组合式 API 通过共享 runtime 订阅 `FlagManager`，避免每个组件直接注册一组独立 manager 监听。\n\n## 复用 core 的 Provider\n\nVue 包会重新导出 core 的常用能力：\n\n```ts\nimport {\n  FlagManager,\n  LocalProvider,\n  RemoteProvider,\n  StorageProvider,\n} from '@composy/feature-flag-vue'\n\nconst manager = new FlagManager({\n  provider: new LocalProvider({\n    dashboard: true,\n  }),\n})\nconst remoteProvider = new RemoteProvider('/api/feature-flags')\nconst storageProvider = new StorageProvider()\n\nawait manager.load()\nawait remoteProvider.load()\nstorageProvider.save(manager.getAll())\n```\n\n如果需要自定义开关评估、远程转换或缓存策略，应优先在 core 层扩展，再由 Vue 包复用。\n\n## 构建产物\n\n执行：\n\n```bash\npnpm --filter @composy/feature-flag-vue build\n```\n\n产物目录：\n\n- `dist`：UMD / 浏览器构建。\n- `es`：ESM preserve modules 构建和类型声明。\n- `esm`：兼容 ESM 消费的 preserve modules 构建。\n- `lib`：CommonJS 构建和 `lib/package.json`。\n\n## 维护约定\n\n- Vue 适配层只处理 Vue 生命周期、注入、指令和组合式 API。\n- Engine 状态和 API 注册必须复用 core 的 `createFeatureFlagEnginePlugin`。\n- 新增 Vue 行为需要补充 `src/__tests__` 下的运行时测试。\n- 不要把 `.d.ts` 生成物提交到 `src`，类型声明由构建产物生成。\n","readmeFilename":"README.md","_rev":"1-2563c4159e303b931ee281840f7621de"}