refactor(task-selection): Promote eslint config and fix linter violations (microsoft#25994)

Promotes the eslint config from `minimal-deprecated` to `recommended`
and fixes resulting linter violations

Author: Josmithr

examples/apps/task-selection/.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/apps/task-selection/src/app.ts

@@ -6,7 +6,7 @@
 import { StaticCodeLoader, TinyliciousModelLoader } from "@fluid-example/example-utils";
 
 import {
-	ITaskSelectionAppModel,
+	type ITaskSelectionAppModel,
 	TaskSelectionContainerRuntimeFactory,
 } from "./containerCode.js";
 import { renderDiceRoller } from "./view.js";
@@ -16,7 +16,7 @@ import { renderDiceRoller } from "./view.js";
  *
  * @remarks We wrap this in an async function so we can await Fluid's async calls.
  */
-async function start() {
+async function start(): Promise<void> {
 	const tinyliciousModelLoader = new TinyliciousModelLoader<ITaskSelectionAppModel>(
 		new StaticCodeLoader(new TaskSelectionContainerRuntimeFactory()),
 	);
@@ -32,11 +32,12 @@ async function start() {
 		model = createResponse.model;
 		id = await createResponse.attach();
 	} else {
-		id = location.hash.substring(1);
+		id = location.hash.slice(1);
 		model = await tinyliciousModelLoader.loadExisting(id);
 	}
 
 	// update the browser URL and the window title with the actual container ID
+	// eslint-disable-next-line require-atomic-updates
 	location.hash = id;
 	document.title = id;
 
@@ -62,8 +63,12 @@ async function start() {
 	renderDiceRoller(model.oldestClientDiceRoller, oldestClientViewDiv);
 	oldestClientDiv.append(oldestClientHeaderDiv, oldestClientViewDiv);
 
-	const div = document.getElementById("content") as HTMLDivElement;
+	const div = document.querySelector("#content") as HTMLDivElement;
 	div.append(taskManagerDiv, divider, oldestClientDiv);
 }
 
-start().catch((error) => console.error(error));
+try {
+	await start();
+} catch (error) {
+	console.error(error);
+}

examples/apps/task-selection/src/containerCode.ts

@@ -7,10 +7,10 @@ import {
 	ModelContainerRuntimeFactory,
 	getDataStoreEntryPoint,
 } from "@fluid-example/example-utils";
-import { IContainer } from "@fluidframework/container-definitions/legacy";
-import { IContainerRuntime } from "@fluidframework/container-runtime-definitions/legacy";
+import type { IContainer } from "@fluidframework/container-definitions/legacy";
+import type { IContainerRuntime } from "@fluidframework/container-runtime-definitions/legacy";
 
-import { IDiceRoller } from "./interface.js";
+import type { IDiceRoller } from "./interface.js";
 import { OldestClientDiceRollerInstantiationFactory } from "./oldestClientDiceRoller.js";
 import { TaskManagerDiceRollerInstantiationFactory } from "./taskManagerDiceRoller.js";
 
@@ -51,7 +51,7 @@ export class TaskSelectionContainerRuntimeFactory extends ModelContainerRuntimeF
 	/**
 	 * {@inheritDoc ModelContainerRuntimeFactory.containerInitializingFirstTime}
 	 */
-	protected async containerInitializingFirstTime(runtime: IContainerRuntime) {
+	protected async containerInitializingFirstTime(runtime: IContainerRuntime): Promise<void> {
 		const taskManagerDiceRoller = await runtime.createDataStore(
 			TaskManagerDiceRollerInstantiationFactory.type,
 		);
@@ -65,7 +65,10 @@ export class TaskSelectionContainerRuntimeFactory extends ModelContainerRuntimeF
 	/**
 	 * {@inheritDoc ModelContainerRuntimeFactory.createModel}
 	 */
-	protected async createModel(runtime: IContainerRuntime, container: IContainer) {
+	protected async createModel(
+		runtime: IContainerRuntime,
+		container: IContainer,
+	): Promise<ITaskSelectionAppModel> {
 		return new TaskSelectionAppModel(
 			await getDataStoreEntryPoint<IDiceRoller>(runtime, taskManagerDiceId),
 			await getDataStoreEntryPoint<IDiceRoller>(runtime, oldestClientDiceId),

examples/apps/task-selection/src/oldestClientDiceRoller.ts

@@ -8,7 +8,7 @@ import { OldestClientObserver } from "@fluid-experimental/oldest-client-observer
 import { DataObject, DataObjectFactory } from "@fluidframework/aqueduct/legacy";
 import { assert } from "@fluidframework/core-utils/legacy";
 
-import { IDiceRoller } from "./interface.js";
+import type { IDiceRoller } from "./interface.js";
 
 // The root is map-like, so we'll use this key for storing the value.
 const diceValueKey = "diceValue";
@@ -24,15 +24,15 @@ export class OldestClientDiceRoller extends DataObject implements IDiceRoller {
 	 * initializingFirstTime is run only once by the first client to create the DataObject.  Here we use it to
 	 * initialize the state of the DataObject.
 	 */
-	protected async initializingFirstTime() {
+	protected async initializingFirstTime(): Promise<void> {
 		this.root.set(diceValueKey, 1);
 	}
 
 	/**
 	 * hasInitialized is run by each client as they load the DataObject.  Here we use it to set up usage of the
 	 * DataObject, by registering an event listener for dice rolls.
 	 */
-	protected async hasInitialized() {
+	protected async hasInitialized(): Promise<void> {
 		this.root.on("valueChanged", (changed) => {
 			if (changed.key === diceValueKey) {
 				// When we see the dice value change, we'll emit the diceRolled event we specified in our interface.
@@ -46,23 +46,23 @@ export class OldestClientDiceRoller extends DataObject implements IDiceRoller {
 		this.volunteerForAutoRoll();
 	}
 
-	private get oldestClientObserver() {
+	private get oldestClientObserver(): OldestClientObserver {
 		assert(this._oldestClientObserver !== undefined, "OldestClientObserver not initialized");
 		return this._oldestClientObserver;
 	}
 
-	public get value() {
+	public get value(): number {
 		const value = this.root.get<number>(diceValueKey);
 		assert(value !== undefined, "Dice value not initialized");
 		return value;
 	}
 
-	public readonly roll = () => {
+	public readonly roll = (): void => {
 		const rollValue = Math.floor(Math.random() * 6) + 1;
 		this.root.set(diceValueKey, rollValue);
 	};
 
-	public volunteerForAutoRoll() {
+	public volunteerForAutoRoll(): void {
 		if (this.oldestClientObserver.isOldest()) {
 			// If we're oldest, start the autoroll and watch for loss of oldest.
 			this.oldestClientObserver.once("lostOldest", () => {
@@ -80,7 +80,7 @@ export class OldestClientDiceRoller extends DataObject implements IDiceRoller {
 		}
 	}
 
-	private startAutoRollTask() {
+	private startAutoRollTask(): void {
 		console.log("Starting autoroll from OldestClientDiceRoller");
 		if (this.autoRollInterval === undefined) {
 			this.autoRollInterval = setInterval(() => {
@@ -89,15 +89,15 @@ export class OldestClientDiceRoller extends DataObject implements IDiceRoller {
 		}
 	}
 
-	private endAutoRollTask() {
+	private endAutoRollTask(): void {
 		console.log("Ending autoroll from OldestClientDiceRoller");
 		if (this.autoRollInterval !== undefined) {
 			clearInterval(this.autoRollInterval);
 			this.autoRollInterval = undefined;
 		}
 	}
 
-	public hasTask() {
+	public hasTask(): boolean {
 		return this.oldestClientObserver.isOldest();
 	}
 }

examples/apps/task-selection/src/taskManagerDiceRoller.ts

@@ -4,11 +4,11 @@
  */
 
 import { DataObject, DataObjectFactory } from "@fluidframework/aqueduct/legacy";
-import { IFluidHandle } from "@fluidframework/core-interfaces";
+import type { IFluidHandle } from "@fluidframework/core-interfaces";
 import { assert } from "@fluidframework/core-utils/legacy";
 import { TaskManager } from "@fluidframework/task-manager/legacy";
 
-import { IDiceRoller } from "./interface.js";
+import type { IDiceRoller } from "./interface.js";
 
 const taskManagerKey = "taskManager";
 // The root is map-like, so we'll use this key for storing the value.
@@ -26,7 +26,7 @@ export class TaskManagerDiceRoller extends DataObject implements IDiceRoller {
 	 * initializingFirstTime is run only once by the first client to create the DataObject.  Here we use it to
 	 * initialize the state of the DataObject.
 	 */
-	protected async initializingFirstTime() {
+	protected async initializingFirstTime(): Promise<void> {
 		this.root.set(diceValueKey, 1);
 
 		// We create a TaskManager just like any other DDS.
@@ -38,7 +38,7 @@ export class TaskManagerDiceRoller extends DataObject implements IDiceRoller {
 	 * hasInitialized is run by each client as they load the DataObject.  Here we use it to set up usage of the
 	 * DataObject, by registering an event listener for dice rolls.
 	 */
-	protected async hasInitialized() {
+	protected async hasInitialized(): Promise<void> {
 		this.root.on("valueChanged", (changed) => {
 			if (changed.key === diceValueKey) {
 				// When we see the dice value change, we'll emit the diceRolled event we specified in our interface.
@@ -52,23 +52,23 @@ export class TaskManagerDiceRoller extends DataObject implements IDiceRoller {
 		this.subscribeToAutoRoll();
 	}
 
-	private get taskManager() {
+	private get taskManager(): TaskManager {
 		assert(this._taskManager !== undefined, "TaskManager not initialized");
 		return this._taskManager;
 	}
 
-	public get value() {
+	public get value(): number {
 		const value = this.root.get<number>(diceValueKey);
 		assert(value !== undefined, "Dice value not initialized");
 		return value;
 	}
 
-	public readonly roll = () => {
+	public readonly roll = (): void => {
 		const rollValue = Math.floor(Math.random() * 6) + 1;
 		this.root.set(diceValueKey, rollValue);
 	};
 
-	public subscribeToAutoRoll() {
+	public subscribeToAutoRoll(): void {
 		// Subscribe to the auto roll task. This will constantly keep us in queue for the task until we get it. If we
 		// lose the task assignment we will automatically re-enter queue.
 
@@ -89,7 +89,7 @@ export class TaskManagerDiceRoller extends DataObject implements IDiceRoller {
 		this.taskManager.subscribeToTask(autoRollTaskId);
 	}
 
-	private startAutoRollTask() {
+	private startAutoRollTask(): void {
 		console.log("Starting autoroll from TaskManagerDiceRoller");
 		if (this.autoRollInterval === undefined) {
 			this.autoRollInterval = setInterval(() => {
@@ -98,15 +98,15 @@ export class TaskManagerDiceRoller extends DataObject implements IDiceRoller {
 		}
 	}
 
-	private endAutoRollTask() {
+	private endAutoRollTask(): void {
 		console.log("Ending autoroll from TaskManagerDiceRoller");
 		if (this.autoRollInterval !== undefined) {
 			clearInterval(this.autoRollInterval);
 			this.autoRollInterval = undefined;
 		}
 	}
 
-	public hasTask() {
+	public hasTask(): boolean {
 		return this.taskManager.assigned(autoRollTaskId);
 	}
 }

examples/apps/task-selection/src/view.ts

@@ -3,14 +3,14 @@
  * Licensed under the MIT License.
  */
 
-import { IDiceRoller } from "./interface.js";
+import type { IDiceRoller } from "./interface.js";
 
 /**
  * Render an IDiceRoller into a given div as a text character, with a button to roll it.
  * @param diceRoller - The Data Object to be rendered
  * @param div - The div to render into
  */
-export function renderDiceRoller(diceRoller: IDiceRoller, div: HTMLDivElement) {
+export function renderDiceRoller(diceRoller: IDiceRoller, div: HTMLDivElement): void {
 	const wrapperDiv = document.createElement("div");
 	wrapperDiv.style.textAlign = "center";
 	div.append(wrapperDiv);
@@ -30,15 +30,15 @@ export function renderDiceRoller(diceRoller: IDiceRoller, div: HTMLDivElement) {
 	wrapperDiv.append(diceCharDiv, rollButton, taskOwnerDiv);
 
 	// Get the current value of the shared data to update the view whenever it changes.
-	const updateDiceChar = () => {
+	const updateDiceChar = (): void => {
 		// Unicode 0x2680-0x2685 are the sides of a dice (⚀⚁⚂⚃⚄⚅)
 		diceCharDiv.textContent = String.fromCodePoint(0x267f + diceRoller.value);
 		diceCharDiv.style.color = `hsl(${diceRoller.value * 60}, 70%, 50%)`;
 	};
 	updateDiceChar();
 
 	// Just showing visually whether we're the task owner or not.
-	const updateTaskOwner = () => {
+	const updateTaskOwner = (): void => {
 		taskOwnerDiv.textContent = diceRoller.hasTask() ? "Task owner" : "Not task owner";
 	};
 	updateTaskOwner();