fix(version-migration-separate-container): Fix component unmounting and migrationTool updating (#23163)

examples/version-migration/separate-container/src/start.ts

@@ -49,12 +49,18 @@ const renderModel = (model: IVersionedModel, migrationTool: IMigrationTool): voi
 	// view code loader to pull in the view dynamically based on the version we discover.
 	if (isIInventoryListAppModel(model)) {
 		const appDiv = document.querySelector("#app") as HTMLDivElement;
-		appRoot ??= createRoot(appDiv);
+		if (appRoot !== undefined) {
+			appRoot.unmount();
+		}
+		appRoot = createRoot(appDiv);
 		appRoot.render(createElement(InventoryListAppView, { model, migrationTool }));
 
 		// The DebugView is just for demo purposes, to manually control code proposal and inspect the state.
 		const debugDiv = document.querySelector("#debug") as HTMLDivElement;
-		debugRoot ??= createRoot(debugDiv);
+		if (debugRoot !== undefined) {
+			debugRoot.unmount();
+		}
+		debugRoot = createRoot(debugDiv);
 		debugRoot.render(
 			createElement(DebugView, {
 				model,

examples/version-migration/separate-container/tests/index.tsx

@@ -12,7 +12,7 @@ import {
 } from "@fluid-example/migration-tools/internal";
 
 import { createElement } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot, type Root } from "react-dom/client";
 
 import { inventoryListDataTransformationCallback } from "../src/dataTransform.js";
 import { DemoCodeLoader } from "../src/demoCodeLoader.js";
@@ -72,17 +72,25 @@ export async function createContainerAndRenderInElement(element: HTMLDivElement)
 	const appDiv = document.createElement("div");
 	const debugDiv = document.createElement("div");
 
-	const appRoot = createRoot(appDiv);
-	const debugRoot = createRoot(debugDiv);
+	let appRoot: Root | undefined;
+	let debugRoot: Root | undefined;
 
 	const render = (model: IVersionedModel, migrationTool: IMigrationTool) => {
 		// This demo uses the same view for both versions 1 & 2 - if we wanted to use different views for different model
 		// versions, we could check its version here and select the appropriate view.  Or we could even write ourselves a
 		// view code loader to pull in the view dynamically based on the version we discover.
 		if (isIInventoryListAppModel(model)) {
+			if (appRoot !== undefined) {
+				appRoot.unmount();
+			}
+			appRoot = createRoot(appDiv);
 			appRoot.render(createElement(InventoryListAppView, { model, migrationTool }));
 
 			// The DebugView is just for demo purposes, to manually control code proposal and inspect the state.
+			if (debugRoot !== undefined) {
+				debugRoot.unmount();
+			}
+			debugRoot = createRoot(debugDiv);
 			debugRoot.render(
 				createElement(DebugView, {
 					model,
@@ -104,9 +112,10 @@ export async function createContainerAndRenderInElement(element: HTMLDivElement)
 	);
 	migrator.events.on("migrated", () => {
 		model.dispose();
-		render(migrator.currentModel, migrationTool);
-		updateTabForId(migrator.currentModelId);
 		model = migrator.currentModel;
+		migrationTool = migrator.currentMigrationTool;
+		render(model, migrationTool);
+		updateTabForId(migrator.currentModelId);
 	});
 
 	// eslint-disable-next-line @typescript-eslint/dot-notation