@lessonkit/react 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -250,6 +250,9 @@ function createProgressController() {
     completeLesson: (lessonId, completedAtMs) => {
       if (completedLessonIds.has(lessonId)) return { didComplete: false };
       completedLessonIds = new Set(completedLessonIds).add(lessonId);
+      if (activeLessonId === lessonId) {
+        activeLessonId = void 0;
+      }
       const startedAt = lessonStartTimes.get(lessonId);
       lessonStartTimes.delete(lessonId);
       const durationMs = typeof startedAt === "number" ? Math.max(0, completedAtMs - startedAt) : void 0;
@@ -416,7 +419,9 @@ function LessonkitProvider(props) {
       );
     }
     return () => {
-      disposeTrackingClient(prev);
+      if (prev !== trackingRef.current) {
+        disposeTrackingClient(prev);
+      }
     };
   }, [
     trackingEnabled,
@@ -453,9 +458,15 @@ function LessonkitProvider(props) {
   const prevCourseIdRef = (0, import_react.useRef)(config.courseId);
   (0, import_react.useEffect)(() => {
     if (prevCourseIdRef.current === config.courseId) return;
+    const previousActiveLesson = progressRef.current.getState().activeLessonId;
     prevCourseIdRef.current = config.courseId;
     progressRef.current = createProgressController();
     syncProgress();
+    if (previousActiveLesson) {
+      progressRef.current.setActiveLesson(previousActiveLesson, Date.now());
+      syncProgress();
+      track("lesson_started", { lessonId: previousActiveLesson }, { lessonId: previousActiveLesson });
+    }
     const sessionId = sessionIdRef.current;
     const cid = config.courseId;
     if (!hasCourseStarted(defaultStorage, sessionId, cid)) {
@@ -473,13 +484,7 @@ function LessonkitProvider(props) {
         { lxpackBridge: lxpackBridgeModeRef.current }
       );
     }
-  }, [config.courseId, syncProgress]);
-  (0, import_react.useEffect)(() => {
-    return () => {
-      trackingRef.current?.flush?.();
-      void xapiRef.current?.flush();
-    };
-  }, []);
+  }, [config.courseId, syncProgress, track]);
   const emitLessonCompleted = (0, import_react.useCallback)(
     (lessonId, durationMs) => {
       track("lesson_completed", { lessonId, durationMs }, { lessonId });
@@ -495,9 +500,22 @@ function LessonkitProvider(props) {
       if (!result.didComplete) return;
       syncProgress();
       emitLessonCompleted(lessonId, result.durationMs);
+      void trackingRef.current?.flush?.();
     },
     [syncProgress, emitLessonCompleted]
   );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      const client = trackingRef.current;
+      void xapiRef.current?.flush();
+      setTimeout(() => {
+        client?.flush?.();
+        setTimeout(() => {
+          client?.dispose?.();
+        }, 0);
+      }, 0);
+    };
+  }, []);
   const setActiveLesson = (0, import_react.useCallback)(
     (lessonId) => {
       const current = progressRef.current.getState();
@@ -620,24 +638,21 @@ function Course(props) {
 }
 function Lesson(props) {
   warnInvalidComponentId(props.lessonId, "lessonId");
-  const { setActiveLesson } = useLessonkit();
+  const { setActiveLesson, config } = useLessonkit();
   const { completeLesson } = useCompletion();
   const id = props.lessonId;
-  const pendingCompleteRef = (0, import_react3.useRef)(null);
+  const lessonMountGenerationRef = (0, import_react3.useRef)(0);
   (0, import_react3.useEffect)(() => {
-    if (pendingCompleteRef.current !== null) {
-      clearTimeout(pendingCompleteRef.current);
-      pendingCompleteRef.current = null;
-    }
+    const generation = ++lessonMountGenerationRef.current;
     setActiveLesson(id);
     return () => {
       const lessonId = id;
-      pendingCompleteRef.current = setTimeout(() => {
-        pendingCompleteRef.current = null;
+      queueMicrotask(() => {
+        if (lessonMountGenerationRef.current !== generation) return;
         completeLesson(lessonId);
-      }, 0);
+      });
     };
-  }, [id, setActiveLesson, completeLesson]);
+  }, [id, config.courseId, setActiveLesson, completeLesson]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { "aria-label": props.title, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: props.title }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: props.children })

package/dist/index.js

@@ -211,6 +211,9 @@ function createProgressController() {
     completeLesson: (lessonId, completedAtMs) => {
       if (completedLessonIds.has(lessonId)) return { didComplete: false };
       completedLessonIds = new Set(completedLessonIds).add(lessonId);
+      if (activeLessonId === lessonId) {
+        activeLessonId = void 0;
+      }
       const startedAt = lessonStartTimes.get(lessonId);
       lessonStartTimes.delete(lessonId);
       const durationMs = typeof startedAt === "number" ? Math.max(0, completedAtMs - startedAt) : void 0;
@@ -377,7 +380,9 @@ function LessonkitProvider(props) {
       );
     }
     return () => {
-      disposeTrackingClient(prev);
+      if (prev !== trackingRef.current) {
+        disposeTrackingClient(prev);
+      }
     };
   }, [
     trackingEnabled,
@@ -414,9 +419,15 @@ function LessonkitProvider(props) {
   const prevCourseIdRef = useRef(config.courseId);
   useEffect(() => {
     if (prevCourseIdRef.current === config.courseId) return;
+    const previousActiveLesson = progressRef.current.getState().activeLessonId;
     prevCourseIdRef.current = config.courseId;
     progressRef.current = createProgressController();
     syncProgress();
+    if (previousActiveLesson) {
+      progressRef.current.setActiveLesson(previousActiveLesson, Date.now());
+      syncProgress();
+      track("lesson_started", { lessonId: previousActiveLesson }, { lessonId: previousActiveLesson });
+    }
     const sessionId = sessionIdRef.current;
     const cid = config.courseId;
     if (!hasCourseStarted(defaultStorage, sessionId, cid)) {
@@ -434,13 +445,7 @@ function LessonkitProvider(props) {
         { lxpackBridge: lxpackBridgeModeRef.current }
       );
     }
-  }, [config.courseId, syncProgress]);
-  useEffect(() => {
-    return () => {
-      trackingRef.current?.flush?.();
-      void xapiRef.current?.flush();
-    };
-  }, []);
+  }, [config.courseId, syncProgress, track]);
   const emitLessonCompleted = useCallback(
     (lessonId, durationMs) => {
       track("lesson_completed", { lessonId, durationMs }, { lessonId });
@@ -456,9 +461,22 @@ function LessonkitProvider(props) {
       if (!result.didComplete) return;
       syncProgress();
       emitLessonCompleted(lessonId, result.durationMs);
+      void trackingRef.current?.flush?.();
     },
     [syncProgress, emitLessonCompleted]
   );
+  useEffect(() => {
+    return () => {
+      const client = trackingRef.current;
+      void xapiRef.current?.flush();
+      setTimeout(() => {
+        client?.flush?.();
+        setTimeout(() => {
+          client?.dispose?.();
+        }, 0);
+      }, 0);
+    };
+  }, []);
   const setActiveLesson = useCallback(
     (lessonId) => {
       const current = progressRef.current.getState();
@@ -581,24 +599,21 @@ function Course(props) {
 }
 function Lesson(props) {
   warnInvalidComponentId(props.lessonId, "lessonId");
-  const { setActiveLesson } = useLessonkit();
+  const { setActiveLesson, config } = useLessonkit();
   const { completeLesson } = useCompletion();
   const id = props.lessonId;
-  const pendingCompleteRef = useRef2(null);
+  const lessonMountGenerationRef = useRef2(0);
   useEffect2(() => {
-    if (pendingCompleteRef.current !== null) {
-      clearTimeout(pendingCompleteRef.current);
-      pendingCompleteRef.current = null;
-    }
+    const generation = ++lessonMountGenerationRef.current;
     setActiveLesson(id);
     return () => {
       const lessonId = id;
-      pendingCompleteRef.current = setTimeout(() => {
-        pendingCompleteRef.current = null;
+      queueMicrotask(() => {
+        if (lessonMountGenerationRef.current !== generation) return;
         completeLesson(lessonId);
-      }, 0);
+      });
     };
-  }, [id, setActiveLesson, completeLesson]);
+  }, [id, config.courseId, setActiveLesson, completeLesson]);
   return /* @__PURE__ */ jsxs("article", { "aria-label": props.title, children: [
     /* @__PURE__ */ jsx2("h2", { children: props.title }),
     /* @__PURE__ */ jsx2("div", { children: props.children })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessonkit/react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "description": "React components and hooks for building learning experiences with LessonKit.",
   "license": "Apache-2.0",
@@ -50,11 +50,11 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@lessonkit/accessibility": "0.6.0",
-    "@lessonkit/core": "0.6.0",
-    "@lessonkit/lxpack": "0.6.0",
-    "@lessonkit/themes": "0.6.0",
-    "@lessonkit/xapi": "0.6.0"
+    "@lessonkit/accessibility": "0.7.0",
+    "@lessonkit/core": "0.7.0",
+    "@lessonkit/lxpack": "0.7.0",
+    "@lessonkit/themes": "0.7.0",
+    "@lessonkit/xapi": "0.7.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",