dsh-calendar 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.8.1（2026-09-19）
+
+- **新增真 DOM 行为测试层**（`test/render.test.mjs`，devDependencies 里加 `react` / `react-dom` / `jsdom`，不进发布包）：用 jsdom + 真 React 渲染周视图，然后真派发 `pointerdown/move/up`、`click`、`keydown`。7 条覆盖：渲染不抛、点事件不会顺手弹「新建」、拖动只提交一次且按视口坐标换算、拖动中 Esc 零请求、卸载后不留监听器且之后的 pointerup 不提交、拖到边缘 rAF 持续滚动、重复日程被面板挡住。
+- **它的第一批产出就是三个真问题**：
+  ① **同一批次内拖动不提交**：提交前的「有没有落点」判断读的是 React state（`ghost`），而 `pointermove` 与 `pointerup` 落在同一批次时 state 还没刷新 → 明明拖了却不落盘。改为在 `dragRef` 上记同步标记。
+  ② `requestAnimationFrame` / `cancelAnimationFrame` 按全局调用：浏览器里有，但模块作用域下应当显式走 `window.*`。
+  ③ 三处 React key 警告（日期头、事件块、幽灵块、日列的子节点用了数组却没给 key）——dev 模式控制台一直在吵。
+
 ## 0.8.0（2026-09-19）
 
 - **新增：周视图拖拽改期**。拖动事件块上下改时间、左右换天（15 分钟吸附）；拖块底部 6px 改时长；拖动中显示幽灵落点，与已有日程重叠时描成黄色（允许重叠，只是提醒）；拖到容器上下边缘自动滚动，长会议不用先滚再拖。

package/README.md

@@ -230,6 +230,8 @@ Nextcloud / 自定义 Basic 服务：检查账号、密码或服务要求的应
 
 ## 开发
 
+- **UI 行为测试**：`test/render.test.mjs` 用 jsdom + 真 React 渲染周视图并派发真实事件（点击 / 拖动 / Esc / 卸载 / 边缘滚动）。改前端交互时它会替你点一遍；`pnpm test` 会一起跑。
+
 ```bash
 pnpm install
 pnpm test   # 构建 + node --test

package/lib/client.js

@@ -834,9 +834,9 @@ function WeekView(props) {
     }
     if (commit !== false && moved === true && canEdit === true) {
       const slot = drag.previewSlot === undefined ? drag.slot : drag.previewSlot;
-      // 没有幽灵块就没有落点：比如纵向拖出本周（跨到下周）时不该盲提交。
-      const visible = days.some((day) => dayKey(day) === slot.dayKey) && ghost !== null;
-      if (visible === true) onReschedule(drag.event, rangeOfSlot(slot), drag.mode);
+      // 没有落点就不提交：比如纵向拖出本周（跨到下周）时幽灵没地方画，这时盲提交会让事件从视图消失。
+      // 用 dragRef 上的同步标记，而不是 React state（见 applyPreviewAt 的注释）。
+      if (drag.previewVisible === true) onReschedule(drag.event, rangeOfSlot(slot), drag.mode);
     }
   };
 
@@ -858,6 +858,9 @@ function WeekView(props) {
       ? resizeSlot(drag.slot, (dy / HOUR_PX) * 60, SNAP_MINUTES)
       : slotFromDrag(drag.slot, { columns, pixelsY: dy, hourPx: HOUR_PX }, SNAP_MINUTES);
     drag.previewSlot = slot;
+    // 可见性判断必须同步落在 dragRef 上：pointermove 与 pointerup 可能在同一批次里，
+    // 此时读 React state（ghost）拿到的是旧值，会导致「拖了却不提交」。
+    drag.previewVisible = days.some((day) => dayKey(day) === slot.dayKey);
     setGhost({ uid: drag.uid, slot, conflicts: conflictsForSlot(events, slot, drag.uid).length });
   };
 
@@ -868,7 +871,7 @@ function WeekView(props) {
    */
   const autoScroll = useRef({ raf: 0, x: 0, y: 0 });
   const stopAutoScroll = () => {
-    if (autoScroll.current.raf !== 0) { cancelAnimationFrame(autoScroll.current.raf); autoScroll.current.raf = 0; }
+    if (autoScroll.current.raf !== 0) { window.cancelAnimationFrame(autoScroll.current.raf); autoScroll.current.raf = 0; }
   };
   const stepAutoScroll = () => {
     autoScroll.current.raf = 0;
@@ -883,7 +886,7 @@ function WeekView(props) {
     if (delta === 0) return;   // 指针离开边缘：循环自然停下，下次移动会再起
     node.scrollTop += delta;
     applyPreviewAt(autoScroll.current.x, y, drag);   // 滚动后重算落点（含滚动补偿）
-    autoScroll.current.raf = requestAnimationFrame(stepAutoScroll);
+    autoScroll.current.raf = window.requestAnimationFrame(stepAutoScroll);
   };
   const ensureAutoScroll = (pointerEvent) => {
     autoScroll.current.x = pointerEvent.clientX;
@@ -892,7 +895,7 @@ function WeekView(props) {
     if (node === null || node === undefined) return;
     const rect = node.getBoundingClientRect();
     const nearEdge = pointerEvent.clientY < rect.top + 40 || pointerEvent.clientY > rect.bottom - 40;
-    if (nearEdge === true && autoScroll.current.raf === 0) autoScroll.current.raf = requestAnimationFrame(stepAutoScroll);
+    if (nearEdge === true && autoScroll.current.raf === 0) autoScroll.current.raf = window.requestAnimationFrame(stepAutoScroll);
   };
 
   const updatePreview = (pointerEvent) => {
@@ -929,7 +932,7 @@ function WeekView(props) {
       window.removeEventListener("pointerup", onUp);
       window.removeEventListener("pointercancel", onCancel);
       window.removeEventListener("keydown", onKey, true);
-      if (autoScroll.current.raf !== 0) { cancelAnimationFrame(autoScroll.current.raf); autoScroll.current.raf = 0; }
+      if (autoScroll.current.raf !== 0) { window.cancelAnimationFrame(autoScroll.current.raf); autoScroll.current.raf = 0; }
       window.removeEventListener("blur", onBlur);
       dragRef.current = null;   // 卸载时不能留着半截拖拽状态
     };
@@ -1009,24 +1012,25 @@ function WeekView(props) {
           if (suppressClick.current === true) { suppressClick.current = false; return; }
           onPick(event);
         }
-      }, [
+      },
         h("div", { className: "dshc-slot-title" }, event.summary),
         h("div", { className: "dshc-slot-time" }, hhmm(from) + "\u2013" + hhmm(to)),
         canEdit === true ? h("div", { className: "dshc-resize", title: t("drag.resizeTitle"), onPointerDown: (e) => { e.stopPropagation(); beginDrag(event, e, "resize"); } }) : null
-      ]);
+      );
     });
     const ghostBlock = ghost !== null && ghost.slot.dayKey === key
       ? h("div", {
           className: "dshc-slot dshc-ghost" + (ghost.conflicts > 0 ? " conflict" : ""),
           style: Object.assign({ top: (ghost.slot.minutes * (HOUR_PX / 60)) + "px", height: Math.max(18, ghost.slot.durationMinutes * (HOUR_PX / 60)) + "px" }, laneStyle(0)),
           key: "__ghost"
-        }, [
+        },
           h("div", { className: "dshc-slot-title" }, ghost.conflicts > 0 ? t("drag.conflict", { n: ghost.conflicts }) + " · " + t("drag.keep") : t("drag.drop")),
           h("div", { className: "dshc-slot-time" }, pad2(Math.floor(ghost.slot.minutes / 60)) + ":" + pad2(ghost.slot.minutes % 60) + " \u2192 " + pad2(Math.floor((ghost.slot.minutes + ghost.slot.durationMinutes) / 60)) + ":" + pad2((ghost.slot.minutes + ghost.slot.durationMinutes) % 60))
-        ])
+        )
       : null;
-    return h("div", { key, style: { minWidth: 0 } }, [
-      h("div", { className: "dshc-dayhead" }, [h("b", null, String(day.getDate())), " ", relativeDay(day)]),
+    // 可变参数：数组子节点要求 key，而这两块在这里各只出现一次。
+    return h("div", { key, style: { minWidth: 0 } },
+      h("div", { className: "dshc-dayhead" }, h("b", null, String(day.getDate())), " ", relativeDay(day)),
       h("div", {
         className: "dshc-daycol" + (key === today ? " today" : ""),
         "data-day": key,
@@ -1039,16 +1043,17 @@ function WeekView(props) {
         },
         title: t("action.new")
       }, blocks.concat(ghostBlock === null ? [] : [ghostBlock]))
-    ]);
+    );
   });
 
-  return h("div", null, [
+  // 可变参数而不是数组：数组子节点要求 key，而这三个都只在 WeekView 里出现一次。
+  return h("div", null,
     allDay.length > 0
       ? h("div", { style: { marginBottom: "8px" } }, allDay.map((event) => h(Row, { key: event.uid, event, onClick: onPick })))
       : null,
     h("div", { className: "dshc-week", ref: scroller }, [hoursColumn].concat(dayColumns)),
     canEdit === true ? h("div", { className: "dshc-draghint" }, t("drag.hint")) : null
-  ]);
+  );
 }
 
 /** 议程视图：从今天起按天分组，最像「接下来要干什么」。 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-calendar",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "DSH 日历插件：CalDAV 日程查询、创建、修改、删除与搜索，支持 Google OAuth2、iCloud、Nextcloud 与自建服务。",
   "type": "module",
   "main": "lib/index.js",
@@ -60,6 +60,9 @@
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
+    "jsdom": "^30.1.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "typescript": "^5.6.0"
   },
   "repository": {