@melt-js/demo-vue3 0.0.0-stage → 0.0.2

package/README.md

@@ -1,3 +1,48 @@
-# Temporary Holding Version
+# @melt-js/demo-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.
+Vue 3 + Vite 5 的 hel 宿主（消费方）示例，消费 [`comps-vue3`](../comps-vue3)。
+
+| 项 | 值 |
+| --- | --- |
+| npm 包名 | `@melt-js/demo-vue3` |
+| unpkg 入口 | `https://unpkg.com/@melt-js/demo-vue3/dist/index.html` |
+| 端口 | `30020` |
+| 消费的远程组件 | `comps-vue3`（开发 `http://localhost:20020` / 生产 unpkg） |
+
+## 关键流程
+
+1. `src/main.ts`：`bindVueRuntime({ Vue })` 把宿主 vue 挂到 `window.Vue`，远程组件 external 的 `vue` 会复用这一份（少了这一份会出现双 vue，表现为远程组件点击后视图不更新）；随后在入口处调用 `loadRemoteLib()` 预加载远程组件，就绪后再挂载宿主。
+2. `src/configs/remote.ts`：按 `import.meta.env.PROD` 选择远端地址——生产构建指向 unpkg 上的 `hel-meta.json`，本地开发指向 `http://localhost:20020`，可用 `VITE_REMOTE_HOST` 覆盖。`loadRemoteLib()` 内部调用 `preFetchLib('comps-vue3', { custom: { host } })`：host 为 `hel-meta.json` 时直接取元数据，本地 dev server 没有该文件时解析 `index.html`。
+3. `src/App.vue`：`defineAsyncComponent` 复用入口处已预加载的同一个 Promise，渲染远程组件的 `HelloWorld`。
+
+> `vite build` 的产物会自动从 unpkg 加载已发布的 `comps-vue3`；`vite dev` 仍走本地 20020，无需手动改 `host`。
+
+## 本地开发
+
+```bash
+# 终端 1：起远程组件（20020）
+pnpm comps-vue3:dev
+
+# 终端 2：起宿主（30020）
+pnpm demo-vue3:dev
+```
+
+打开 http://localhost:30020 ，`远程组件内容` 区域会渲染 `comps-vue3` 的 `HelloWorld` 组件。
+
+也可以让宿主指向已构建的远程产物：
+
+```bash
+pnpm comps-vue3:build:local && pnpm comps-vue3:preview   # 20020 上跑 hel_dist
+pnpm demo-vue3:dev
+```
+
+## 构建 / 发布
+
+```bash
+pnpm demo-vue3:build                                  # 产出 dist/
+pnpm --filter @melt-js/demo-vue3 run publish:stage    # build → npm stage 暂存，等待 2FA 审批
+```
+
+- `vite.config.ts` 的 `base` 为 `./`，发布后 unpkg 上的 `dist/index.html` 可直接加载同目录资源。
+- `files` 白名单只发布 `dist/` 与 README。
+- 生产构建自动使用 `https://unpkg.com/@melt-js/comps-vue3/hel_dist/hel-meta.json`，本地开发自动使用 `http://localhost:20020`；也可用 `VITE_REMOTE_HOST` 覆盖。