diff --git a/examples/version-migration/separate-container/.eslintrc.cjs b/examples/version-migration/separate-container/.eslintrc.cjs index 69dd265570ae..484c63b7e874 100644 --- a/examples/version-migration/separate-container/.eslintrc.cjs +++ b/examples/version-migration/separate-container/.eslintrc.cjs @@ -5,9 +5,5 @@ module.exports = { extends: [require.resolve("@fluidframework/eslint-config-fluid"), "prettier"], - rules: { - // TODO: AB#18875 - Re-enable react/no-deprecated once we replace uses of the deprecated ReactDOM.render() - // with the new React 18 createRoot(). - "react/no-deprecated": "off", - }, + rules: {}, }; diff --git a/examples/version-migration/separate-container/src/dataTransform.ts b/examples/version-migration/separate-container/src/dataTransform.ts index f08fb8ceb45e..61e4935b7f2e 100644 --- a/examples/version-migration/separate-container/src/dataTransform.ts +++ b/examples/version-migration/separate-container/src/dataTransform.ts @@ -3,7 +3,6 @@ * Licensed under the MIT License. */ -// eslint-disable-next-line import/no-internal-modules import type { DataTransformationCallback } from "@fluid-example/migration-tools/internal"; export interface IParsedInventoryItemData { diff --git a/examples/version-migration/separate-container/src/modelVersion1/appModel.ts b/examples/version-migration/separate-container/src/modelVersion1/appModel.ts index efceedc02c57..a29d58058cea 100644 --- a/examples/version-migration/separate-container/src/modelVersion1/appModel.ts +++ b/examples/version-migration/separate-container/src/modelVersion1/appModel.ts @@ -3,7 +3,6 @@ * Licensed under the MIT License. */ -// eslint-disable-next-line import/no-internal-modules import type { IMigratableModel } from "@fluid-example/migration-tools/internal"; import { AttachState } from "@fluidframework/container-definitions"; import { IContainer } from "@fluidframework/container-definitions/internal"; diff --git a/examples/version-migration/separate-container/src/modelVersion1/containerCode.ts b/examples/version-migration/separate-container/src/modelVersion1/containerCode.ts index a0ab620be2e6..f00e2c4ef5a9 100644 --- a/examples/version-migration/separate-container/src/modelVersion1/containerCode.ts +++ b/examples/version-migration/separate-container/src/modelVersion1/containerCode.ts @@ -7,7 +7,6 @@ import { getDataStoreEntryPoint } from "@fluid-example/example-utils"; import { type IMigratableModel, instantiateMigratableRuntime, - // eslint-disable-next-line import/no-internal-modules } from "@fluid-example/migration-tools/internal"; import type { IContainer, diff --git a/examples/version-migration/separate-container/src/modelVersion2/appModel.ts b/examples/version-migration/separate-container/src/modelVersion2/appModel.ts index d38e63928096..83384aced95c 100644 --- a/examples/version-migration/separate-container/src/modelVersion2/appModel.ts +++ b/examples/version-migration/separate-container/src/modelVersion2/appModel.ts @@ -3,7 +3,6 @@ * Licensed under the MIT License. */ -// eslint-disable-next-line import/no-internal-modules import type { IMigratableModel } from "@fluid-example/migration-tools/internal"; import { AttachState } from "@fluidframework/container-definitions"; import { IContainer } from "@fluidframework/container-definitions/internal"; diff --git a/examples/version-migration/separate-container/src/modelVersion2/containerCode.ts b/examples/version-migration/separate-container/src/modelVersion2/containerCode.ts index a0ab620be2e6..f00e2c4ef5a9 100644 --- a/examples/version-migration/separate-container/src/modelVersion2/containerCode.ts +++ b/examples/version-migration/separate-container/src/modelVersion2/containerCode.ts @@ -7,7 +7,6 @@ import { getDataStoreEntryPoint } from "@fluid-example/example-utils"; import { type IMigratableModel, instantiateMigratableRuntime, - // eslint-disable-next-line import/no-internal-modules } from "@fluid-example/migration-tools/internal"; import type { IContainer, diff --git a/examples/version-migration/separate-container/src/start.ts b/examples/version-migration/separate-container/src/start.ts index d1ea14bfaf03..e346e638cece 100644 --- a/examples/version-migration/separate-container/src/start.ts +++ b/examples/version-migration/separate-container/src/start.ts @@ -7,9 +7,7 @@ import type { IMigratableModel, IMigrationTool, IVersionedModel, - // eslint-disable-next-line import/no-internal-modules } from "@fluid-example/migration-tools/internal"; -// eslint-disable-next-line import/no-internal-modules import { MigratableModelLoader, Migrator } from "@fluid-example/migration-tools/internal"; import { RouterliciousDocumentServiceFactory } from "@fluidframework/routerlicious-driver/internal"; import { @@ -18,8 +16,8 @@ import { createTinyliciousCreateNewRequest, } from "@fluidframework/tinylicious-driver/internal"; import { createElement } from "react"; -// eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs -import { render, unmountComponentAtNode } from "react-dom"; +// eslint-disable-next-line import/no-internal-modules +import { createRoot, type Root } from "react-dom/client"; import { inventoryListDataTransformationCallback } from "./dataTransform.js"; import { DemoCodeLoader } from "./demoCodeLoader.js"; @@ -42,29 +40,27 @@ const isIInventoryListAppModel = ( const getUrlForContainerId = (containerId: string): string => `/#${containerId}`; +let appRoot: Root | undefined; +let debugRoot: Root | undefined; + const renderModel = (model: IVersionedModel, migrationTool: IMigrationTool): void => { - const appDiv = document.querySelector("#app") as HTMLDivElement; - // eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs - unmountComponentAtNode(appDiv); // 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)) { - // eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs - render(createElement(InventoryListAppView, { model, migrationTool }), appDiv); + const appDiv = document.querySelector("#app") as HTMLDivElement; + 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; - // eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs - unmountComponentAtNode(debugDiv); - // eslint-disable-next-line import/no-deprecated -- TODO: AB#18875, migrate to React 18 APIs - render( + debugRoot ??= createRoot(debugDiv); + debugRoot.render( createElement(DebugView, { model, migrationTool, getUrlForContainerId, }), - debugDiv, ); } else { throw new Error(`Don't know how to render version ${model.version}`); diff --git a/examples/version-migration/separate-container/src/view/appView.tsx b/examples/version-migration/separate-container/src/view/appView.tsx index 451c0285827e..7dd433d8c260 100644 --- a/examples/version-migration/separate-container/src/view/appView.tsx +++ b/examples/version-migration/separate-container/src/view/appView.tsx @@ -3,7 +3,6 @@ * Licensed under the MIT License. */ -// eslint-disable-next-line import/no-internal-modules import type { IMigrationTool } from "@fluid-example/migration-tools/internal"; import React, { useEffect, useState } from "react"; diff --git a/examples/version-migration/separate-container/src/view/debugView.tsx b/examples/version-migration/separate-container/src/view/debugView.tsx index 0d0c3f48b393..8619c90b1ea6 100644 --- a/examples/version-migration/separate-container/src/view/debugView.tsx +++ b/examples/version-migration/separate-container/src/view/debugView.tsx @@ -7,7 +7,6 @@ import type { IMigratableModel, IMigrationTool, MigrationState, - // eslint-disable-next-line import/no-internal-modules } from "@fluid-example/migration-tools/internal"; import React, { useEffect, useState } from "react";