Vltava - Data Binding using MatchMaker

examples/components/spaces/src/components/button.tsx

@@ -34,8 +34,6 @@ const textStyle: React.CSSProperties = {
     cursor: "pointer",
 };
 
-export const ButtonName = "button";
-
 /**
  * Clicker example using view interfaces and stock component classes.
  */

examples/components/vltava/src/components/button/button.tsx

@@ -0,0 +1,105 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import {
+    PrimedComponent,
+    PrimedComponentFactory,
+} from "@microsoft/fluid-aqueduct";
+import {
+    IComponent,
+    IComponentHTMLVisual,
+} from "@microsoft/fluid-component-core-interfaces";
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { IComponentDiscoverableInterfaces } from "@microsoft/fluid-framework-interfaces";
+import { IComponentClicks } from "../../interfaces/clicker";
+
+const buttonStyle: React.CSSProperties = {
+    WebkitUserSelect: "none", // Chrome-Safari
+    MozUserSelect: "none", // Firefox
+    msUserSelect: "none", //IE10+
+    textAlign:"center",
+    width: "100%",
+    height:"100%",
+    boxSizing: "border-box",
+    border:"1px solid black",
+    cursor: "pointer",
+};
+
+const textStyle: React.CSSProperties = {
+    WebkitUserSelect: "none", // Chrome-Safari
+    MozUserSelect: "none", // Firefox
+    msUserSelect: "none", //IE10+
+    display:"inline-block",
+    cursor: "pointer",
+};
+
+interface IButton {
+    click();
+}
+
+/**
+ * Button is a simple component that is just a button. It registers with the matchMaker so
+ * when the button is pressed Components that consume clicks can do work
+ */
+export class Button extends PrimedComponent
+    implements
+        IButton,
+        IComponentHTMLVisual,
+        IComponentDiscoverableInterfaces,
+        IComponentClicks
+{
+    private readonly registeredCallbacks: (() => void)[] = [];
+
+    private static readonly factory = new PrimedComponentFactory(Button, []);
+
+    public static getFactory() {
+        return Button.factory;
+    }
+
+    public get IComponentHTMLVisual() { return this; }
+
+    public get IComponentDiscoverableInterfaces() { return this; }
+
+    public get IComponentClicks() { return this; }
+
+    public get discoverableInterfaces(): (keyof IComponent)[] {
+        return [
+            "IComponentClicks",
+        ];
+    }
+
+    public onClick(fn: () => void) {
+        this.registeredCallbacks.push(fn);
+    }
+
+    public click() {
+        this.registeredCallbacks.forEach((fn) => {
+            fn();
+        });
+    }
+
+    protected async componentHasInitialized() {
+        const matchMaker = await this.getService<IComponent>("matchMaker");
+        const interfaceRegistry = matchMaker.IComponentInterfacesRegistry;
+        if (interfaceRegistry) {
+            interfaceRegistry.registerComponentInterfaces(this);
+        }
+    }
+
+    /**
+     * If someone just calls render they are not providing a scope and we just pass
+     * undefined in.
+     */
+    public render(div: HTMLElement) {
+        ReactDOM.render(
+            <div style={buttonStyle} onClick={this.click.bind(this)}>
+                <h1 style={textStyle}>+</h1>
+            </div>,
+            div);
+    }
+
+}

examples/components/vltava/src/components/button/index.ts

@@ -0,0 +1,6 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+export * from "./button";

examples/components/vltava/src/components/index.ts

@@ -4,5 +4,7 @@
  */
 
 export * from "./anchor";
+export * from "./button";
+export * from "./number";
 export * from "./tabs";
 export * from "./vltava";

examples/components/vltava/src/components/number/index.ts

@@ -0,0 +1,6 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+export * from "./number";

examples/components/vltava/src/components/number/number.tsx

@@ -0,0 +1,154 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { EventEmitter } from "events";
+
+import {
+    PrimedComponent,
+    PrimedComponentFactory,
+} from "@microsoft/fluid-aqueduct";
+import {
+    IComponent,
+    IComponentHTMLVisual,
+} from "@microsoft/fluid-component-core-interfaces";
+import { CounterValueType, Counter } from "@microsoft/fluid-map";
+import { IComponentDiscoverInterfaces } from "@microsoft/fluid-framework-interfaces";
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export const NumberName = "number";
+
+const numberStyle: React.CSSProperties = {
+    textAlign:"center",
+    width: "100%",
+    height:"100%",
+    boxSizing: "border-box",
+    border:"1px solid black",
+};
+
+interface INumber extends EventEmitter {
+    value: number;
+    on(event: "incremented", listener: (value: number) => void): this;
+}
+
+/**
+ * Number clicker example using view interfaces and stock component classes.
+ */
+export class Number extends PrimedComponent
+    implements
+        IComponentHTMLVisual,
+        INumber,
+        IComponentDiscoverInterfaces
+{
+    private counter: Counter;
+
+    public get IComponentHTMLVisual() { return this; }
+
+    public get IComponentDiscoverInterfaces() { return this; }
+
+    public get value() {
+        return this.counter.value;
+    }
+
+    public get interfacesToDiscover(): (keyof IComponent)[] {
+        return [
+            "IComponentClicks",
+        ];
+    }
+
+    private static readonly factory = new PrimedComponentFactory(Number, []);
+
+    public static getFactory() {
+        return Number.factory;
+    }
+
+    public increment() {
+        this.counter.increment(1);
+    }
+
+    public notifyComponentsDiscovered(interfaceName: keyof IComponent, components: readonly IComponent[]): void {
+        components.forEach((component) => {
+            if (!component[interfaceName]) {
+                console.log(`component doesn't support interface ${interfaceName}`);
+            }
+
+            switch(interfaceName) {
+                case "IComponentClicks": {
+                    const clicks = component.IComponentClicks;
+                    if (clicks) {
+                        clicks.onClick(this.increment.bind(this));
+                    }
+                }
+                default:
+            }
+        });
+    }
+
+    public on(event: "incremented", listener: (value: number) => void): this;
+    public on(event: string | symbol, listener: (...args: any[]) => void): this {
+        return super.on(event, listener);
+    }
+
+    protected async componentInitializingFirstTime(){
+        this.root.createValueType("clicker-count", CounterValueType.Name, 0);
+    }
+
+    protected async componentHasInitialized() {
+        this.counter = this.root.get<Counter>("clicker-count");
+
+        this.counter.on("incremented", (_, currentValue: number) => {
+            this.emit("incremented", currentValue);
+        });
+
+        const matchMaker = await this.getService<IComponent>("matchMaker");
+        const interfaceRegistry = matchMaker.IComponentInterfacesRegistry;
+        if (interfaceRegistry) {
+            interfaceRegistry.registerComponentInterfaces(this);
+        }
+    }
+
+    /**
+     * Will return a new Clicker view
+     */
+    public render(div: HTMLElement) {
+        ReactDOM.render(
+            <NumberView dataModel={this}/>,
+            div,
+        );
+    }
+}
+
+interface INumberViewProps {
+    dataModel: INumber;
+}
+
+interface INumberViewState {
+    value: number;
+}
+
+class NumberView extends React.Component<INumberViewProps, INumberViewState>{
+    constructor(props: INumberViewProps){
+        super(props);
+
+        this.state = {
+            value: this.props.dataModel.value,
+        };
+    }
+
+    componentDidMount() {
+        this.props.dataModel.on("incremented", (currentValue: number) =>{
+            this.setState({value:currentValue});
+        });
+    }
+
+    render(){
+        return (
+            <div style={numberStyle}>
+                <h1 style={{display:"inline-block"}}>{this.state.value}</h1>
+            </div>
+        );
+    }
+}

examples/components/vltava/src/components/tabs/dataModel.ts

@@ -28,12 +28,19 @@ export interface ITabsDataModel extends EventEmitter{
     getTabIds(): string[];
     createTab(type: string): Promise<string>;
     getNewTabTypes(): ITabsTypes[];
+
+    on(event: "newTab", listener: (local: boolean) => void): this;
 }
 
 export class TabsDataModel extends EventEmitter implements ITabsDataModel {
 
     private readonly tabs: IDirectory;
 
+    public on(event: "newTab", listener: (local: boolean) => void): this;
+    public on(event: string | symbol, listener: (...args: any[]) => void): this {
+        return super.on(event, listener);
+    }
+
     constructor(
         root: ISharedDirectory,
         private readonly internalRegistry: IComponentRegistryDetails,

examples/components/vltava/src/components/vltava/dataModel.ts

@@ -13,19 +13,20 @@ import {
 import { ISharedDirectory } from "@microsoft/fluid-map";
 import {
     IQuorum,
-    ISequencedClient,
 } from "@microsoft/fluid-protocol-definitions";
 
 export interface IVltavaDataModel extends EventEmitter {
     getDefaultComponent(): Promise<IComponent>;
     getTitle(): string;
     getUsers(): string[];
+
+    on(event: "membersChanged", listener: (users: string[]) => void): this;
 }
 
 export class VltavaDataModel extends EventEmitter implements IVltavaDataModel {
     private readonly quorum: IQuorum;
 
-    public on(event: "membersChanged", listener: (users: Map<string, ISequencedClient>) => void): this;
+    public on(event: "membersChanged", listener: (users: string[]) => void): this;
     public on(event: string | symbol, listener: (...args: any[]) => void): this {
         return super.on(event, listener);
     }