Remove presence functionality from external-views example (#26000)

Author: ChumpChief

examples/view-integration/external-views/.eslintrc.cjs

@@ -5,7 +5,7 @@
 
 module.exports = {
 	extends: [
-		require.resolve("@fluidframework/eslint-config-fluid/minimal-deprecated"),
+		require.resolve("@fluidframework/eslint-config-fluid"),
 		"prettier",
 		"../../.eslintrc.cjs",
 	],

examples/view-integration/external-views/package.json

@@ -52,7 +52,6 @@
 		"@fluidframework/datastore-definitions": "workspace:~",
 		"@fluidframework/local-driver": "workspace:~",
 		"@fluidframework/map": "workspace:~",
-		"@fluidframework/presence": "workspace:~",
 		"@fluidframework/runtime-definitions": "workspace:~",
 		"@fluidframework/runtime-utils": "workspace:~",
 		"@fluidframework/server-local-server": "^7.0.0",
@@ -84,7 +83,6 @@
 		"process": "^0.11.10",
 		"puppeteer": "^23.6.0",
 		"rimraf": "^4.4.0",
-		"tinylicious": "^7.0.0",
 		"ts-jest": "^29.1.1",
 		"ts-loader": "^9.5.1",
 		"typescript": "~5.4.5",

examples/view-integration/external-views/src/app.ts

@@ -21,8 +21,7 @@ import { createElement } from "react";
 // eslint-disable-next-line import-x/no-internal-modules
 import { createRoot } from "react-dom/client";
 
-import { DiceRollerContainerRuntimeFactory, type EntryPoint } from "./container/index.js";
-import { renderCursorPresence } from "./cursor.js";
+import { DiceRollerContainerRuntimeFactory, type IDiceRoller } from "./container/index.js";
 import { DiceRollerView } from "./view.js";
 
 const service = getSpecifiedServiceFromWebpack();
@@ -68,7 +67,7 @@ if (location.hash.length === 0) {
 		id = container.resolvedUrl.id;
 	}
 } else {
-	id = location.hash.substring(1);
+	id = location.hash.slice(1);
 	container = await loadExistingContainer({
 		request: await createLoadExistingRequest(id),
 		urlResolver,
@@ -77,16 +76,13 @@ if (location.hash.length === 0) {
 	});
 }
 
-const { diceRoller, presence } = (await container.getEntryPoint()) as EntryPoint;
+const diceRoller = (await container.getEntryPoint()) as IDiceRoller;
 
 // Render view
-const appDiv = document.getElementById("app") as HTMLDivElement;
+const appDiv = document.querySelector("#app") as HTMLDivElement;
 const appRoot = createRoot(appDiv);
 appRoot.render(createElement(DiceRollerView, { diceRoller }));
 
-const cursorContentDiv = document.getElementById("cursor-position") as HTMLDivElement;
-renderCursorPresence(presence, cursorContentDiv);
-
 // Update url and tab title
 location.hash = id;
 document.title = id;

examples/view-integration/external-views/src/container/diceRoller/diceRoller.ts

@@ -12,14 +12,13 @@ import type {
 	IFluidDataStoreRuntime,
 } from "@fluidframework/datastore-definitions/legacy";
 import { MapFactory, type ISharedMap, type IValueChanged } from "@fluidframework/map/legacy";
-import { getPresenceFromDataStoreContext } from "@fluidframework/presence/legacy/alpha";
 import type {
 	IFluidDataStoreChannel,
 	IFluidDataStoreContext,
 	IFluidDataStoreFactory,
 } from "@fluidframework/runtime-definitions/legacy";
 
-import type { EntryPoint, IDiceRoller, IDiceRollerEvents } from "./interface.js";
+import type { IDiceRoller, IDiceRollerEvents } from "./interface.js";
 
 // This key is where we store the value in the ISharedMap.
 const diceValueKey = "dice-value";
@@ -41,13 +40,13 @@ class DiceRoller implements IDiceRoller {
 		});
 	}
 
-	public get value() {
-		const value = this.map.get(diceValueKey);
+	public get value(): number {
+		const value: unknown = this.map.get(diceValueKey);
 		assert(typeof value === "number", "Bad dice value");
 		return value;
 	}
 
-	public readonly roll = () => {
+	public readonly roll = (): void => {
 		const rollValue = Math.floor(Math.random() * 6) + 1;
 		this.map.set(diceValueKey, rollValue);
 	};
@@ -74,12 +73,9 @@ export class DiceRollerFactory implements IFluidDataStoreFactory {
 	): Promise<IFluidDataStoreChannel> {
 		const provideEntryPoint = async (
 			entryPointRuntime: IFluidDataStoreRuntime,
-		): Promise<EntryPoint> => {
+		): Promise<IDiceRoller> => {
 			const map = (await entryPointRuntime.getChannel(mapId)) as ISharedMap;
-			return {
-				diceRoller: new DiceRoller(map),
-				presence: getPresenceFromDataStoreContext(context),
-			};
+			return new DiceRoller(map);
 		};
 
 		const runtime: FluidDataStoreRuntime = new FluidDataStoreRuntime(

examples/view-integration/external-views/src/container/diceRoller/index.ts

@@ -5,7 +5,6 @@
 
 export { DiceRollerFactory } from "./diceRoller.js";
 export type {
-	EntryPoint,
 	IDiceRoller,
 	IDiceRollerEvents,
 } from "./interface.js";

examples/view-integration/external-views/src/container/diceRoller/interface.ts

@@ -4,7 +4,6 @@
  */
 
 import type { IEvent, IEventProvider } from "@fluidframework/core-interfaces";
-import type { Presence } from "@fluidframework/presence/beta";
 
 /**
  * IDiceRollerEvents describes the events for an IDiceRoller.
@@ -32,11 +31,3 @@ export interface IDiceRoller {
 	 */
 	roll: () => void;
 }
-
-/**
- * The entry point interface for the Dice Roller container.
- */
-export interface EntryPoint {
-	readonly diceRoller: IDiceRoller;
-	readonly presence: Presence;
-}

examples/view-integration/external-views/src/container/index.ts

@@ -4,7 +4,6 @@
  */
 
 export type {
-	EntryPoint,
 	IDiceRoller,
 	IDiceRollerEvents,
 } from "./diceRoller/index.js";

examples/view-integration/external-views/src/cursor.ts

@@ -10,6 +10,5 @@
 	</head>
 	<body style="margin: 0; height: 100%">
 		<div id="app" style="min-height: 100%"></div>
-		<div id="cursor-position"></div>
 	</body>
 </html>

examples/view-integration/external-views/src/index.html

@@ -5,7 +5,7 @@
 
 import React, { type FC, useEffect, useState } from "react";
 
-import { IDiceRoller } from "./container/index.js";
+import type { IDiceRoller } from "./container/index.js";
 
 export interface IDiceRollerViewProps {
 	diceRoller: IDiceRoller;
@@ -17,7 +17,7 @@ export const DiceRollerView: FC<IDiceRollerViewProps> = ({
 	const [diceValue, setDiceValue] = useState(diceRoller.value);
 
 	useEffect(() => {
-		const onDiceRolled = () => {
+		const onDiceRolled = (): void => {
 			setDiceValue(diceRoller.value);
 		};
 		diceRoller.events.on("diceRolled", onDiceRolled);