@melt-js/libs-core-vue3 0.0.0-stage → 2026.11.14-1

package/README.md

@@ -1,3 +1,21 @@
-# Temporary Holding Version
+# @melt-js/libs-core-vue3
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+vue3 的远程组件 UI 适配。地址协议、缓存、请求串行与加载状态来自 libs-core；本包只负责组件生命周期、props/事件/插槽透传、加载展示和渲染错误兜底。
+
+```js
+import { defineHelComponent, preloadHelLibs } from '@melt-js/libs-core-vue3'
+
+const Chart = defineHelComponent({
+  type: 'github',
+  dep: '@example/comps-charts',
+  exportName: 'Chart',
+})
+```
+
+预加载与懒加载共用 `{ type, base }` 地址协议：unpkg 保留原始包名与 scope；GitHub 从 `@scope` 推导组织域名，无 scope 时需传 `base`。公共库不默认补任何组织名。以上包名用于说明 API；须先部署对应模块。组件挂载时才发起加载。高频模块继续用 preloadHelLibs 后动态导入业务入口；低频模块用 defineHelComponent。
+
+默认展示加载提示；下载失败、导出缺失或子组件渲染错误时展示错误和“重试”按钮。没有自动重试或内置超时。可传 loadingComponent / errorComponent 自定义 UI，错误组件接收 error 与 retry；onError 可报告错误。
+
+有宿主运行时注入步骤时，可用 loader: async () => moduleObject 替代 dep；推荐 loader 内调用核心 loadHelLib，以复用预加载缓存。
+
+包以原生 ESM 和声明文件交付，无构建产物步骤。发布顺序：libs-core → 本适配包 → 消费方；将 workspace:* 换为包含这些 API 的已发布版本即可独立安装。

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@melt-js/libs-core-vue3",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2026.11.14-1",
+  "type": "module",
+  "description": "Melt 远程组件 vue3 UI 薄适配层",
+  "main": "./src/index.mjs",
+  "module": "./src/index.mjs",
+  "types": "./src/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.mts",
+      "import": "./src/index.mjs",
+      "default": "./src/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@melt-js/libs-core": "2026.11.14"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "vue": "3.5.45",
+    "jsdom": "26.1.0",
+    "typescript": "5.9.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org",
+    "tag": "latest"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "node --test tests/*.test.mjs",
+    "publish:stage": "hel-publish-stage"
+  }
 }

package/src/index.d.mts

@@ -0,0 +1,13 @@
+import type { Component, DefineComponent } from 'vue'
+import type { HelComponentOptions } from '@melt-js/libs-core'
+export * from '@melt-js/libs-core'
+
+export type HelErrorProps = { error: unknown; retry: () => void }
+export type DefineHelComponentOptions = HelComponentOptions & {
+  loadingComponent?: Component
+  /** Receives error and retry props. */
+  errorComponent?: Component
+}
+export const HelLoading: Component
+export const HelError: Component<HelErrorProps>
+export function defineHelComponent(options: DefineHelComponentOptions): DefineComponent

package/src/index.mjs

@@ -0,0 +1,39 @@
+import { defineComponent, h, onBeforeUnmount, onErrorCaptured, onMounted, shallowRef } from 'vue'
+import { createHelComponentResource } from '@melt-js/libs-core'
+export * from '@melt-js/libs-core'
+
+export const HelLoading = defineComponent({
+  name: 'HelLoading',
+  setup: () => () => h('p', { role: 'status' }, '正在加载远程组件…'),
+})
+export const HelError = defineComponent({
+  name: 'HelError',
+  props: ['error', 'retry'],
+  setup: props => () => h('div', { role: 'alert' }, [
+    h('p', '远程组件不可用：' + String(props.error)),
+    h('button', { type: 'button', onClick: props.retry }, '重试'),
+  ]),
+})
+
+export function defineHelComponent(options) {
+  return defineComponent({
+    name: 'HelRemote(' + options.exportName + ')',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      const state = shallowRef({ status: 'loading', component: null, error: null })
+      const resource = createHelComponentResource(options, next => { state.value = next })
+      onMounted(resource.load)
+      onBeforeUnmount(resource.dispose)
+      onErrorCaptured(error => {
+        if (state.value.status === 'error') return
+        resource.fail(error)
+        return false
+      })
+      return () => {
+        if (state.value.status === 'error') return h(options.errorComponent || HelError, { error: state.value.error, retry: resource.retry })
+        if (state.value.status !== 'ready') return h(options.loadingComponent || HelLoading)
+        return h(state.value.component, attrs, slots)
+      }
+    },
+  })
+}