add vue example and cleanup comments (#4607)

* add vue example and cleanup comments

* remove vue dependency

* Update app.ts

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

@@ -6,15 +6,9 @@
 import { getTinyliciousContainer } from "@fluidframework/get-tinylicious-container";
 
 import { IKeyValueDataObject, KeyValueContainerRuntimeFactory } from "./kvpair-dataobject";
-import { renderDiceRoller } from "./view"; // change to reactView to render example using React
+import { renderDiceRoller } from "./view";
+// import { renderDiceRoller } from "./reactView";
 
-// In interacting with the service, we need to be explicit about whether we're creating a new document vs. loading
-// an existing one.  We also need to provide the unique ID for the document we are creating or loading from.
-
-// In this app, we'll choose to create a new document when navigating directly to http://localhost:8080.  For the ID,
-// we'll choose to use the current timestamp.  We'll also choose to interpret the URL hash as an existing document's
-// ID to load from, so the URL for a document load will look something like http://localhost:8080/#1596520748752.
-// These policy choices are arbitrary for demo purposes, and can be changed however you'd like.
 let createNew = false;
 if (location.hash.length === 0) {
     createNew = true;
@@ -24,11 +18,7 @@ const documentId = location.hash.substring(1);
 document.title = documentId;
 
 async function start(): Promise<void> {
-    // The getTinyliciousContainer helper function facilitates loading our container code into a Container and
-    // connecting to a locally-running test service called Tinylicious.  This will look different when moving to a
-    // production service, but ultimately we'll still be getting a reference to a Container object.  The helper
-    // function takes the ID of the document we're creating or loading, the container code to load into it, and a
-    // flag to specify whether we're creating a new document or loading an existing one.
+    // Get Fluid Container (creates if new url)
     const container = await getTinyliciousContainer(documentId, KeyValueContainerRuntimeFactory, createNew);
 
     // Since we're using a ContainerRuntimeFactoryWithDefaultDataStore, our dice roller is available at the URL "/".
@@ -43,11 +33,11 @@ async function start(): Promise<void> {
     }
 
     // In this app, we know our container code provides a default data object that is an IDiceRoller.
-    const DO: IKeyValueDataObject = response.value;
+    const keyValueDataObject: IKeyValueDataObject = response.value;
 
     // Given an IDiceRoller, we can render the value and provide controls for users to roll it.
     const div = document.getElementById("content") as HTMLDivElement;
-    renderDiceRoller(DO, div);
+    renderDiceRoller(keyValueDataObject, div);
 }
 
 start().catch((error) => console.error(error));

examples/hosts/app-integration/external-controller/src/kvpair-dataobject/DataObject.ts

@@ -12,17 +12,17 @@ import { IDirectoryValueChanged, IValueChanged } from "@fluidframework/map";
  */
 export interface IKeyValueDataObject extends EventEmitter {
     /**
-     * Get the dice value as a number.
+     * Get value at Key
      */
     get: (key: string) => any
 
     /**
-     * Roll the dice.  Will cause a "diceRolled" event to be emitted.
+     * Set Value at Key
      */
     set: (key: string, value: any) => void;
 
     /**
-     * The diceRolled event will fire whenever someone rolls the device, either locally or remotely.
+     * Event on value change
      */
     on(event: "changed", listener: (args: IDirectoryValueChanged) => void): this;
 }

examples/hosts/app-integration/external-controller/src/reactView.tsx

@@ -8,12 +8,12 @@ import ReactDOM from "react-dom";
 import { IKeyValueDataObject } from "./kvpair-dataobject";
 
 /**
- * Render an IDiceRoller into a given div as a text character, with a button to roll it.
+ * Render Dice into a given HTMLElement as a text character, with a button to roll it.
  * @param dataObject - The Data Object to be rendered
- * @param div - The div to render into
+ * @param div - The HTMLElement to render into
  */
-export function renderDiceRoller(DO: IKeyValueDataObject, div: HTMLDivElement) {
-    ReactDOM.render(<ReactView dataObject={DO} />, div);
+export function renderDiceRoller(dataObject: IKeyValueDataObject, div: HTMLDivElement) {
+    ReactDOM.render(<ReactView dataObject={dataObject} />, div);
 }
 
 interface IReactViewProps {

examples/hosts/app-integration/external-controller/src/view.ts

@@ -6,14 +6,14 @@
 import { IKeyValueDataObject } from "./kvpair-dataobject";
 
 /**
- * Render an IDiceRoller into a given div as a text character, with a button to roll it.
+ * Render Dice into a given HTMLElement as a text character, with a button to roll it.
  * @param dataObject - The Data Object to be rendered
- * @param div - The div to render into
+ * @param div - The HTMLElement to render into
  */
-export function renderDiceRoller(DO: IKeyValueDataObject, div: HTMLDivElement) {
+export function renderDiceRoller(dataObject: IKeyValueDataObject, div: HTMLDivElement) {
     const dataKey = "dataKey";
     // Set init value for dataKey
-    DO.set(dataKey, 1);
+    dataObject.set(dataKey, 1);
     const wrapperDiv = document.createElement("div");
     wrapperDiv.style.textAlign = "center";
     div.append(wrapperDiv);
@@ -25,18 +25,18 @@ export function renderDiceRoller(DO: IKeyValueDataObject, div: HTMLDivElement) {
     rollButton.style.fontSize = "50px";
     rollButton.textContent = "Roll";
     // Set the value at our dataKey with a random number between 1 and 6.
-    rollButton.addEventListener("click", () => DO.set(dataKey, Math.floor(Math.random() * 6) + 1));
+    rollButton.addEventListener("click", () => dataObject.set(dataKey, Math.floor(Math.random() * 6) + 1));
 
     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 + (DO.get(dataKey) as number));
-        diceCharDiv.style.color = `hsl(${DO.get(dataKey) * 60}, 70%, 50%)`;
+        diceCharDiv.textContent = String.fromCodePoint(0x267F + (dataObject.get(dataKey) as number));
+        diceCharDiv.style.color = `hsl(${dataObject.get(dataKey) * 60}, 70%, 50%)`;
     };
     updateDiceChar();
 
     // Use the changed event to trigger the rerender whenever the value changes.
-    DO.on("changed", updateDiceChar);
+    dataObject.on("changed", updateDiceChar);
 }

examples/hosts/app-integration/external-controller/src/vueView.ts.preview

@@ -0,0 +1,53 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { createApp } from "vue";
+import { IKeyValueDataObject } from "./kvpair-dataobject";
+
+/**
+ * Render Dice into a given HTMLElement as a text character, with a button to roll it.
+ * @param dataObject - The Data Object to be rendered
+ * @param div - The HTMLElement to render into
+ */
+export function renderDiceRoller(dataObject: IKeyValueDataObject, div: HTMLDivElement) {
+    const app = createApp({
+        template: `
+        <div style="text-align: center" >
+            <div v-bind:style="{ fontSize: '200px', color: diceColor }">
+                {{diceCharacter}}
+            </div>
+            <button style="font-size: 50px;" v-on:click="rollDice">
+                Roll
+            </button>
+        </div>`,
+        data: () => (
+            { diceValue: 1 }
+        ),
+        computed:{
+            diceCharacter() {
+                return String.fromCodePoint(0x267F + (this.diceValue as number));
+            },
+            diceColor() {
+                return `hsl(${this.diceValue * 60}, 70%, 50%)`;
+            },
+        },
+        methods: {
+            rollDice() {
+                dataObject.set("dice", Math.floor(Math.random() * 6) + 1);
+            },
+            syncLocalAndFluidState() {
+                this.diceValue = dataObject.get("dice");
+            },
+        },
+        mounted() {
+            dataObject.on("changed", this.syncLocalAndFluidState);
+        },
+        unmounted() {
+            dataObject.off("changed", this.syncLocalAndFluidState);
+        },
+      });
+
+    app.mount(div);
+}

examples/hosts/app-integration/external-controller/webpack.config.js

@@ -17,6 +17,9 @@ module.exports = env => {
         },
         resolve: {
             extensions: [".ts", ".tsx", ".js"],
+            alias: {
+                vue$: "vue/dist/vue.esm-bundler.js",
+            },
         },
         module: {
             rules: [{