Non-React view option for external-views

examples/hosts/app-integration/external-views/package.json

@@ -34,9 +34,7 @@
     "@fluidframework/aqueduct": "^0.25.0",
     "@fluidframework/container-loader": "^0.25.0",
     "@fluidframework/get-tinylicious-container": "^0.25.0",
-    "@fluidframework/map": "^0.25.0",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
+    "@fluidframework/map": "^0.25.0"
   },
   "devDependencies": {
     "@fluidframework/build-common": "^0.18.0",
@@ -47,8 +45,6 @@
     "@types/jest-environment-puppeteer": "2.2.0",
     "@types/node": "^10.17.24",
     "@types/puppeteer": "1.3.0",
-    "@types/react": "^16.9.15",
-    "@types/react-dom": "^16.9.4",
     "@typescript-eslint/eslint-plugin": "~2.17.0",
     "@typescript-eslint/parser": "~2.17.0",
     "clean-webpack-plugin": "^3.0.0",

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

@@ -5,11 +5,9 @@
 
 import { Container } from "@fluidframework/container-loader";
 import { getTinyliciousContainer } from "@fluidframework/get-tinylicious-container";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { IDiceRoller } from "../component";
 import { DiceRollerContainerRuntimeFactory } from "../container";
-import { PrettyDiceRollerView } from "./views";
+import { renderDiceRoller } from "./views";
 
 // I'm choosing to put the docId in the hash just for my own convenience, so the URL will end up looking something
 // like http://localhost:8080/#1596520748752.  This is not crucial to the scenario -- there should be no requirements
@@ -41,18 +39,16 @@ async function getDiceRollerFromContainer(container: Container): Promise<IDiceRo
     return response.value;
 }
 
-// Given an IDiceRoller, we can render its data using the PrettyDiceRollerView we've created in our app.
-async function renderPrettyDiceRoller(diceRoller: IDiceRoller) {
-    const div = document.getElementById("content") as HTMLDivElement;
-    ReactDOM.render(React.createElement(PrettyDiceRollerView, { model: diceRoller }), div);
-}
-
 // Just a helper function to kick things off.  Making it async allows us to use await.
 async function start(): Promise<void> {
     // Get the container to use.  Associate the data with the provided documentId, and run the provided code within.
     const container = await getTinyliciousContainer(documentId, DiceRollerContainerRuntimeFactory, createNew);
     const diceRoller = await getDiceRollerFromContainer(container);
-    await renderPrettyDiceRoller(diceRoller);
+
+    // Given an IDiceRoller, we can render its data using the view we've created in our app.
+    const div = document.getElementById("content") as HTMLDivElement;
+    renderDiceRoller(diceRoller, div);
+
     // Setting "fluidStarted" is just for our test automation
     // eslint-disable-next-line dot-notation
     window["fluidStarted"] = true;

examples/hosts/app-integration/external-views/src/app/views/index.ts

@@ -3,4 +3,4 @@
  * Licensed under the MIT License.
  */
 
-export * from "./PrettyDiceRollerView";
+export * from "./renderDiceRoller";

examples/hosts/app-integration/external-views/src/app/views/renderDiceRoller.ts

@@ -0,0 +1,39 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { IDiceRoller } from "../../component";
+
+/**
+ * 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) {
+    const wrapperDiv = document.createElement("div");
+    wrapperDiv.style.textAlign = "center";
+    div.append(wrapperDiv);
+
+    const diceCharDiv = document.createElement("div");
+    diceCharDiv.style.fontSize = "200px";
+
+    const rollButton = document.createElement("button");
+    rollButton.style.fontSize = "50px";
+    rollButton.textContent = "Roll";
+    // Call the roll method to modify the shared data when the button is clicked
+    rollButton.addEventListener("click", diceRoller.roll);
+
+    wrapperDiv.append(diceCharDiv, rollButton);
+
+    // Get the current value of the shared data to update the view whenever it changes.
+    const updateDiceChar = () => {
+        // 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();
+
+    // Use the diceRolled event to trigger the rerender whenever the value changes.
+    diceRoller.on("diceRolled", updateDiceChar);
+}