{"_id":"@achuan9/use-load-deps","_rev":"2-5757974123b7f655c2cd39aed30401ee","name":"@achuan9/use-load-deps","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@achuan9/use-load-deps","version":"1.0.0","keywords":["vue","vue3","composable","dependencies","lazy-loading","external-dependencies","dynamic-import"],"author":{"name":"achuan9"},"license":"MIT","_id":"@achuan9/use-load-deps@1.0.0","maintainers":[{"name":"shengchuang","email":"309522304@qq.com"}],"homepage":"https://github.com/achuan9/use-load-deps#readme","bugs":{"url":"https://github.com/achuan9/use-load-deps/issues"},"dist":{"shasum":"5c562f177298dd06334710171eb6613eb1c2a8b3","tarball":"https://registry.npmjs.org/@achuan9/use-load-deps/-/use-load-deps-1.0.0.tgz","fileCount":9,"integrity":"sha512-7oZD9QmwHg4cDABbBOb1dIAL1Kdof9h5EDSYu6TE7LkEUgzee8cdtqT4mWfq2U/3it9yN0RGiFAk/McrFLXiQw==","signatures":[{"sig":"MEYCIQCxC5r8jSwPlO2BBZw2mNVWjffiSw4whnfrdyRuNNFuUgIhAP/fdPtHsT885fG3eZwiAUuqrzFthPKf/6Hm8+krrzS8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43020},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.mjs","engines":{"node":">=14.0.0"},"exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"ffd22ca42ce1dbcea038fc971f2f5e4b44827db0","scripts":{"dev":"vite build --watch","build":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"shengchuang","email":"309522304@qq.com"},"repository":{"url":"git+https://github.com/achuan9/use-load-deps.git","type":"git"},"_npmVersion":"10.8.2","description":"A Vue 3 composable for loading external dependencies","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.21","vite":"^5.1.4","typescript":"^5.3.3","@types/node":"^20.11.24","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/use-load-deps_1.0.0_1747729980255_0.04228657441247052","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@achuan9/use-load-deps","version":"1.0.2","description":"A Vue 3 composable for loading external dependencies","main":"dist/index.js","module":"dist/index.mjs","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"keywords":["vue","vue3","composable","dependencies","lazy-loading","external-dependencies","dynamic-import"],"author":{"name":"achuan9"},"license":"MIT","repository":{"type":"git","url":"https://github.com/achuan9/achuan9-ecosystem/blob/master/packages/vue-composables/use-load-deps"},"bugs":{"url":"https://github.com/achuan9/achuan9-ecosystem/blob/master/packages/vue-composables/use-load-deps/issues"},"homepage":"https://github.com/achuan9/achuan9-ecosystem/blob/master/packages/vue-composables/use-load-deps#readme","peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@types/node":"^20.11.24","typescript":"^5.3.3","vite":"^5.1.4","vite-plugin-dts":"^4.5.4","vue":"^3.4.21"},"engines":{"node":">=14.0.0"},"publishConfig":{"access":"public"},"scripts":{"dev":"vite build --watch","build":"vite build","typecheck":"tsc --noEmit"},"_id":"@achuan9/use-load-deps@1.0.2","_integrity":"sha512-PwucJHgZccmEFIUofCM+LzkUwk9A2iEo9c0+A+CjQuP+WzK4Lc4Wj9ddJcyQqfcAtCQiVq/CUjYRqAKwHLoS2g==","_resolved":"C:\\Users\\sutpc\\AppData\\Local\\Temp\\a6fceff51a3648e7109e359d71997819\\achuan9-use-load-deps-1.0.2.tgz","_from":"file:achuan9-use-load-deps-1.0.2.tgz","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-PwucJHgZccmEFIUofCM+LzkUwk9A2iEo9c0+A+CjQuP+WzK4Lc4Wj9ddJcyQqfcAtCQiVq/CUjYRqAKwHLoS2g==","shasum":"dca1fe418cfe2ac58b5d0b5ccb02fbbe5d886701","tarball":"https://registry.npmjs.org/@achuan9/use-load-deps/-/use-load-deps-1.0.2.tgz","fileCount":9,"unpackedSize":49085,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDkdfSNcKHjKYG832mdW/u9kNv/ac6lE+naFtxvYUlprAIhAJD6i9LLps5UGxhpkScEUpebC0CG/Bc1/oC97vMDRRxm"}]},"_npmUser":{"name":"shengchuang","email":"309522304@qq.com"},"directories":{},"maintainers":[{"name":"shengchuang","email":"309522304@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-load-deps_1.0.2_1748438347142_0.36325100686379086"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-20T08:33:00.159Z","modified":"2025-05-28T13:19:07.571Z","1.0.0":"2025-05-20T08:33:00.487Z","1.0.2":"2025-05-28T13:19:07.352Z"},"bugs":{"url":"https://github.com/achuan9/achuan9-ecosystem/blob/master/packages/vue-composables/use-load-deps/issues"},"author":{"name":"achuan9"},"license":"MIT","homepage":"https://github.com/achuan9/achuan9-ecosystem/blob/master/packages/vue-composables/use-load-deps#readme","keywords":["vue","vue3","composable","dependencies","lazy-loading","external-dependencies","dynamic-import"],"repository":{"type":"git","url":"https://github.com/achuan9/achuan9-ecosystem/blob/master/packages/vue-composables/use-load-deps"},"description":"A Vue 3 composable for loading external dependencies","maintainers":[{"name":"shengchuang","email":"309522304@qq.com"}],"readme":"# use-load-deps\n\n一个用于管理外部依赖（如JS、CSS文件）加载的Vue 3组合式API工具。\n\n## 特性\n\n- 🚀 支持按需加载外部依赖\n- 🔄 支持并行或串行加载\n- ⏱️ 支持空闲时间加载\n- 🔒 防止重复加载\n- 📊 提供加载状态管理\n- 🎯 支持加载回调函数\n\n## 安装\n\n```bash\n# 使用 pnpm\npnpm add @achuan9/use-load-deps\n\n# 使用 npm\nnpm install @achuan9/use-load-deps\n\n# 使用 yarn\nyarn add @achuan9/use-load-deps\n```\n\n## 使用方法\n\n### 1. 基础用法\n\n首先，在你的应用入口处配置需要加载的依赖：\n\n```typescript\nimport { setDepsConfig } from '@achuan9/use-load-deps'\n\nsetDepsConfig({\n  // 配置依赖\n  flv: {\n    js: ['https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js'],\n    css: ['https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.css'],\n  },\n  echarts: {\n    js: ['https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js'],\n    sequential: true, // 保证js中的依赖数组串行加载\n  },\n})\n```\n\n然后在组件中使用：\n\n```vue\n<template>\n  <div>\n    <div v-if=\"depsStatus.flv === 'loading'\">加载中...</div>\n    <div v-else-if=\"depsStatus.flv === 'unload'\">未加载</div>\n    <div v-else>\n      <!-- 依赖加载完成后的内容 -->\n    </div>\n    <button @click=\"loadDeps('flv')\">加载依赖</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useLoadDeps } from '@achuan9/use-load-deps'\n\nconst { depsStatus, loadDeps, loadDepsOnIdle } = useLoadDeps({\n  onLoading: (dep) => console.log(`Loading ${dep}...`),\n  onLoaded: (dep) => console.log(`${dep} loaded!`),\n  onError: (dep, error) => console.error(`Failed to load ${dep}:`, error),\n})\n</script>\n```\n\n### 2. 路由守卫用法\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport { createRouter } from 'vue-router'\nimport { setDepsConfig } from '@achuan9/use-load-deps'\nimport type { ExternalDependencies } from '@achuan9/use-load-deps'\nimport { setupDepsGuard } from './router/guard'\n\n// 1. 首先配置依赖\nexport const depsConfig: ExternalDependencies = {\n  echarts: {\n    js: ['https://cdn.bootcdn.net/ajax/libs/echarts/5.6.0/echarts.min.js'],\n    css: [],\n    sequential: true\n  },\n  flv: {\n    js: ['https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js'],\n    css: []\n  }\n}\n\n// 2. 设置全局依赖配置（必须在 setupDepsGuard 之前）\nsetDepsConfig(depsConfig)\n\n// 3. 创建路由\nconst router = createRouter({\n  routes: [\n    {\n      path: '/echarts',\n      component: () => import('./views/Echarts.vue'),\n      meta: {\n        deps: ['echarts'] // 指定路由需要的依赖\n      }\n    },\n    {\n      path: '/flv',\n      component: () => import('./views/Flv.vue'),\n      meta: {\n        deps: ['flv']\n      }\n    }\n  ]\n})\n\n// 4. 设置路由守卫\nsetupDepsGuard(router)\n\n// 5. 创建应用\nconst app = createApp(App)\napp.use(router)\napp.mount('#app')\n\n// router/guard.ts\nimport { useLoadDeps } from '@achuan9/use-load-deps'\nimport type { Router, RouteLocationNormalized } from 'vue-router'\n\nexport function setupDepsGuard(router: Router) {\n  const { getUnloadDeps, loadDeps, loadDepsOnIdle } = useLoadDeps({\n    onLoading: (dep) => console.log(`Loading ${dep}...`),\n    onLoaded: (dep) => console.log(`${dep} loaded!`),\n    onError: (dep, error) => console.error(`Failed to load ${dep}:`, error)\n  })\n\n  // 路由进入前加载依赖\n  router.beforeEach(async (to: RouteLocationNormalized) => {\n    const targetDeps = to.meta.deps as string[] || []\n    console.log('目标路由需要的依赖，必须加载完才能进入', targetDeps)\n\n    if (targetDeps.length > 0) {\n      try {\n        await loadDeps(targetDeps)\n      } catch (error) {\n        console.error('Failed to load dependencies:', error)\n      }\n    }\n    return true\n  })\n\n  // 路由进入后，利用空闲时间加载其他依赖\n  router.afterEach(() => {\n    const unloadDeps = getUnloadDeps()\n    console.log('未加载的依赖，利用空闲时间加载', unloadDeps)\n    if (unloadDeps.length > 0) {\n      loadDepsOnIdle(unloadDeps)\n    }\n  })\n}\n\n// views/Echarts.vue\n<template>\n  <div class=\"echarts-demo\">\n    <h2>Echarts 示例 -- 确定加载完成才进入页面</h2>\n    <div v-if=\"depsStatus.echarts === 'loading'\">加载中...</div>\n    <div v-else-if=\"depsStatus.echarts === 'unload'\">未加载</div>\n    <div v-else>加载完成</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue'\nimport { useLoadDeps } from '@achuan9/use-load-deps'\n\nconst chartRef = ref<HTMLElement>()\nconst { depsStatus } = useLoadDeps({\n  onLoading: (dep) => console.log(`echarts: Loading ${dep}...`),\n  onLoaded: (dep) => console.log(`echarts: ${dep} loaded!`),\n  onError: (dep, error) => console.error(`echarts: Failed to load ${dep}:`, error)\n})\n\nonMounted(() => {\n  if (chartRef.value) {\n    echarts.init(chartRef.value)\n    // 创建地图\n  }\n})\n</script>\n```\n\n## API\n\n### setDepsConfig\n\n配置需要加载的依赖。\n\n```typescript\nsetDepsConfig(config: ExternalDependencies)\n```\n\n#### 参数\n\n- `config`: 依赖配置对象\n  ```typescript\n  interface ExternalDependencies {\n    [key: string]: {\n      js?: string[] // JS文件URL数组\n      css?: string[] // CSS文件URL数组\n      sequential?: boolean // 是否串行加载JS文件\n    }\n  }\n  ```\n\n### useLoadDeps\n\n返回依赖加载相关的状态和方法。\n\n```typescript\nconst { depsStatus, loadDeps, loadDepsOnIdle, getUnloadDeps } = useLoadDeps(callbacks?)\n```\n\n#### 参数\n\n- `callbacks`: 可选的回调函数对象\n  ```typescript\n  interface LazyDepsCallbacks {\n    onLoading?: (dep: string) => void // 开始加载时触发\n    onLoaded?: (dep: string) => void // 加载完成时触发\n    onError?: (dep: string, error: Error) => void // 加载失败时触发\n  }\n  ```\n\n#### 返回值\n\n- `depsStatus`: 响应式的依赖状态对象\n  ```typescript\n  {\n    [key: string]: 'unload' | 'loading' | 'loaded'\n  }\n  ```\n- `loadDeps`: 加载依赖的方法\n  ```typescript\n  ;(deps: string | string[]) => Promise<ExternalDependencyStatus>\n  ```\n- `loadDepsOnIdle`: 在空闲时间加载依赖的方法\n  ```typescript\n  ;(deps: string | string[]) => Promise<ExternalDependencyStatus>\n  ```\n- `getUnloadDeps`: 获取未加载的依赖列表\n  ```typescript\n  () => string[]\n  ```\n\n## 依赖状态\n\n依赖有三种状态：\n\n- `unload`: 未加载\n- `loading`: 加载中\n- `loaded`: 已加载\n\n## 特性说明\n\n1. **防止重复加载**：\n\n   - 如果依赖正在加载中，会复用现有的加载Promise\n   - 如果依赖已加载完成，不会重复加载\n\n2. **并行/串行加载**：\n\n   - 默认并行加载所有JS文件\n   - 设置`sequential: true`可以串行加载JS文件\n   - CSS文件始终并行加载\n\n3. **空闲时间加载**：\n\n   - 使用`requestIdleCallback`在浏览器空闲时加载依赖\n   - 如果浏览器不支持`requestIdleCallback`，会立即加载\n\n4. **状态管理**：\n   - 提供响应式的依赖状态\n   - 支持加载状态的回调函数\n   - 支持错误处理\n\n## 许可证\n\nMIT\n","readmeFilename":"README.zh-CN.md"}