Vltava: remove references to component (#3283)

* remove references to component

* fix export

* fixed line length

examples/data-objects/vltava/src/fluidObjects/anchor/anchor.ts

@@ -0,0 +1,66 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { IFluidHandle } from "@fluidframework/core-interfaces";
+import { DataObject, DataObjectFactory } from "@fluidframework/aqueduct";
+import {
+    IFluidLastEditedTracker,
+    IProvideFluidLastEditedTracker,
+    LastEditedTrackerDataObject,
+} from "@fluidframework/last-edited-experimental";
+import { IFluidHTMLView, IProvideFluidHTMLView } from "@fluidframework/view-interfaces";
+import { Vltava } from "../vltava";
+
+/**
+ * Anchor is a Data Object responsible for managing creation and the default Fluid Object
+ */
+export class Anchor extends DataObject implements IProvideFluidHTMLView, IProvideFluidLastEditedTracker {
+    private readonly defaultFluidObjectId = "default-fluid-object-id";
+    private defaultFluidObjectInternal: IFluidHTMLView | undefined;
+    private readonly lastEditedFluidObjectId = "last-edited-fluid-object-id";
+    private lastEditedFluidObject: IFluidLastEditedTracker | undefined;
+
+    private get defaultFluidObject() {
+        if (!this.defaultFluidObjectInternal) {
+            throw new Error("Default FluidObject was not initialized properly");
+        }
+
+        return this.defaultFluidObjectInternal;
+    }
+
+    private static readonly factory = new DataObjectFactory("anchor", Anchor, [], {});
+
+    public static getFactory() {
+        return Anchor.factory;
+    }
+
+    public get IFluidHTMLView() { return this.defaultFluidObject; }
+
+    public get IFluidLastEditedTracker() {
+        if (!this.lastEditedFluidObject) {
+            throw new Error("LastEditedTrackerDataObject was not initialized properly");
+        }
+
+        return this.lastEditedFluidObject;
+    }
+
+    protected async initializingFirstTime() {
+        const defaultFluidObject = await Vltava.getFactory().createInstance(this.context);
+        this.root.set(this.defaultFluidObjectId, defaultFluidObject.handle);
+
+        const lastEditedFluidObject = await LastEditedTrackerDataObject.getFactory().createInstance(this.context);
+        this.root.set(this.lastEditedFluidObjectId, lastEditedFluidObject.handle);
+    }
+
+    protected async hasInitialized() {
+        this.defaultFluidObjectInternal =
+            (await this.root.get<IFluidHandle>(this.defaultFluidObjectId).get())
+                .IFluidHTMLView;
+
+        this.lastEditedFluidObject =
+            (await this.root.get<IFluidHandle>(this.lastEditedFluidObjectId).get())
+                .IFluidLastEditedTracker;
+    }
+}

examples/data-objects/vltava/src/components/library/embeddedComponent.tsx → examples/data-objects/vltava/src/fluidObjects/library/embeddedFluidObject.tsx

@@ -8,33 +8,33 @@ import { IFluidObject } from "@fluidframework/core-interfaces";
 
 import React from "react";
 
-interface IEmbeddedComponentWrapperProps {
+interface IEmbeddedFluidObjectWrapperProps {
     id: string;
     requestFluidObject(id: string): Promise<IFluidObject | undefined>;
 }
 
-interface IEmbeddedComponentWrapperState {
+interface IEmbeddedFluidObjectWrapperState {
     element: JSX.Element;
 }
 
 /**
- * This wrapper handles the async-ness of loading a component.
+ * This wrapper handles the async-ness of loading a Fluid object.
  * This ideally shouldn't be here but is here for now to unblock me not knowing how to use ReactViewAdapter.
  */
-export class EmbeddedComponentWrapper
-    extends React.Component<IEmbeddedComponentWrapperProps, IEmbeddedComponentWrapperState>
+export class EmbeddedFluidObjectWrapper
+    extends React.Component<IEmbeddedFluidObjectWrapperProps, IEmbeddedFluidObjectWrapperState>
 {
-    constructor(props: IEmbeddedComponentWrapperProps) {
+    constructor(props: IEmbeddedFluidObjectWrapperProps) {
         super(props);
         this.state = {
             element: <span></span>,
         };
     }
 
     async componentDidMount() {
-        const component = await this.props.requestFluidObject(this.props.id);
-        if (component) {
-            const element = <ReactViewAdapter view={component} />;
+        const fluidObject = await this.props.requestFluidObject(this.props.id);
+        if (fluidObject) {
+            const element = <ReactViewAdapter view={fluidObject} />;
             this.setState({ element });
         }
     }

examples/data-objects/vltava/src/components/library/index.ts → examples/data-objects/vltava/src/fluidObjects/library/index.ts

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

examples/data-objects/vltava/src/components/tabs/dataModel.ts → examples/data-objects/vltava/src/fluidObjects/tabs/dataModel.ts

@@ -17,7 +17,7 @@ import {
 
 import { v4 as uuid } from "uuid";
 
-import { IComponentInternalRegistry } from "../../interfaces";
+import { IFluidObjectInternalRegistry } from "../../interfaces";
 
 export interface ITabsTypes {
     type: string;
@@ -31,7 +31,7 @@ export interface ITabsModel {
 }
 
 export interface ITabsDataModel extends EventEmitter {
-    getComponentTab(id: string): Promise<IFluidObject | undefined>;
+    getFluidObjectTab(id: string): Promise<IFluidObject | undefined>;
     getTabIds(): string[];
     createTab(type: string): Promise<string>;
     getNewTabTypes(): ITabsTypes[];
@@ -42,7 +42,7 @@ export class TabsDataModel extends EventEmitter implements ITabsDataModel {
 
     constructor(
         public root: ISharedDirectory,
-        private readonly internalRegistry: IComponentInternalRegistry,
+        private readonly internalRegistry: IFluidObjectInternalRegistry,
         private readonly createFluidObject: <T extends IFluidObject & IFluidLoadable>
             (pkg: string) => Promise<T>,
         private readonly getFluidObjectFromDirectory: <T extends IFluidObject & IFluidLoadable>(
@@ -75,10 +75,10 @@ export class TabsDataModel extends EventEmitter implements ITabsDataModel {
 
     public async createTab(type: string): Promise<string> {
         const newKey = uuid();
-        const component = await this.createFluidObject<IFluidObject & IFluidLoadable>(type);
+        const fluidObject = await this.createFluidObject<IFluidObject & IFluidLoadable>(type);
         this.tabs.set(newKey, {
             type,
-            handleOrId: component.handle,
+            handleOrId: fluidObject.handle,
         });
 
         this.emit("newTab", true);
@@ -90,7 +90,7 @@ export class TabsDataModel extends EventEmitter implements ITabsDataModel {
         return data?.handleOrId;
     }
 
-    public async getComponentTab(id: string): Promise<IFluidObject | undefined> {
+    public async getFluidObjectTab(id: string): Promise<IFluidObject | undefined> {
         this.tabs = this.root.getSubDirectory("tab-ids");
         return this.getFluidObjectFromDirectory(id, this.tabs, this.getObjectFromDirectory);
     }

examples/data-objects/vltava/src/components/tabs/newTabButton.tsx → examples/data-objects/vltava/src/fluidObjects/tabs/newTabButton.tsx

@@ -25,7 +25,7 @@ export interface IButtonExampleProps {
     disabled?: boolean;
     checked?: boolean;
     createTab: (type: string) => void;
-    components: ITabsTypes[];
+    fluidObjects: ITabsTypes[];
 }
 
 const customSplitButtonStyles: IButtonStyles = {
@@ -41,18 +41,18 @@ const customSplitButtonStyles: IButtonStyles = {
 
 const addIcon: IIconProps = { iconName: "Add" };
 
-export const NewTabButton: React.FunctionComponent<IButtonExampleProps> =
+export const NewTabButton: React.FC<IButtonExampleProps> =
     (props: IButtonExampleProps) => {
         const { disabled, checked } = props;
         const items: IContextualMenuItem[] = [];
-        props.components.forEach((component) => {
+        props.fluidObjects.forEach((fluidObject) => {
             items.push(
                 {
-                    key: component.type,
-                    text: component.friendlyName,
-                    iconProps: { iconName: component.fabricIconName },
+                    key: fluidObject.type,
+                    text: fluidObject.friendlyName,
+                    iconProps: { iconName: fluidObject.fabricIconName },
                     onClick: () => {
-                        props.createTab(component.type);
+                        props.createTab(fluidObject.type);
                     },
                 },
             );

examples/data-objects/vltava/src/components/tabs/tabs.tsx → examples/data-objects/vltava/src/fluidObjects/tabs/tabs.tsx

@@ -15,13 +15,13 @@ import { TabsView } from "./view";
 
 export const TabsName = "tabs";
 
-export class TabsComponent extends DataObject implements IFluidHTMLView {
+export class TabsFluidObject extends DataObject implements IFluidHTMLView {
     private dataModelInternal: ITabsDataModel | undefined;
 
-    private static readonly factory = new DataObjectFactory(TabsName, TabsComponent, [], {});
+    private static readonly factory = new DataObjectFactory(TabsName, TabsFluidObject, [], {});
 
     public static getFactory() {
-        return TabsComponent.factory;
+        return TabsFluidObject.factory;
     }
 
     private get dataModel(): ITabsDataModel {
@@ -42,7 +42,7 @@ export class TabsComponent extends DataObject implements IFluidHTMLView {
     protected async hasInitialized() {
         const registry = await this.context.containerRuntime.IFluidDataStoreRegistry.get("");
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const registryDetails = (registry as IFluidObject).IComponentInternalRegistry!;
+        const registryDetails = (registry as IFluidObject).IFluidObjectInternalRegistry!;
         this.dataModelInternal =
             new TabsDataModel(
                 this.root,

examples/data-objects/vltava/src/components/tabs/view.tsx → examples/data-objects/vltava/src/fluidObjects/tabs/view.tsx

@@ -11,7 +11,7 @@
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import React from "react";
 
-import { EmbeddedComponentWrapper } from "../library";
+import { EmbeddedFluidObjectWrapper } from "../library";
 import { ITabsDataModel } from "./dataModel";
 import { NewTabButton } from "./newTabButton";
 
@@ -62,9 +62,9 @@ export class TabsView extends React.Component<ITabsViewProps, ITabsViewState> {
                 </Tab>);
             tabPanel.push(
                 <TabPanel key={id}  >
-                    <EmbeddedComponentWrapper
+                    <EmbeddedFluidObjectWrapper
                         id={id}
-                        requestFluidObject={async (compId: string) => this.props.dataModel.getComponentTab(compId)}
+                        requestFluidObject={async (compId: string) => this.props.dataModel.getFluidObjectTab(compId)}
                     />
                 </TabPanel>);
         });
@@ -79,7 +79,7 @@ export class TabsView extends React.Component<ITabsViewProps, ITabsViewState> {
                     <li className="react-tabs__tab">
                         <NewTabButton
                             createTab={this.createNewTab}
-                            components={this.props.dataModel.getNewTabTypes()} />
+                            fluidObjects={this.props.dataModel.getNewTabTypes()} />
                     </li>
                 </TabList>
                 <div style={{ position: "relative" }}>

examples/data-objects/vltava/src/components/vltava/dataModel.ts → examples/data-objects/vltava/src/fluidObjects/vltava/dataModel.ts

@@ -25,7 +25,7 @@ export interface IVltavaLastEditedState {
 }
 
 export interface IVltavaDataModel extends EventEmitter {
-    getDefaultComponent(): Promise<IFluidObject>;
+    getDefaultFluidObject(): Promise<IFluidObject>;
     getTitle(): string;
     getUsers(): IVltavaUserDetails[];
     getLastEditedState(): Promise<IVltavaLastEditedState | undefined>;
@@ -59,8 +59,8 @@ export class VltavaDataModel extends EventEmitter implements IVltavaDataModel {
         });
     }
 
-    public async getDefaultComponent(): Promise<IFluidObject> {
-        return this.root.get<IFluidHandle>("tabs-component-id").get();
+    public async getDefaultFluidObject(): Promise<IFluidObject> {
+        return this.root.get<IFluidHandle>("tabs-id").get();
     }
 
     public getTitle(): string {

examples/data-objects/vltava/src/components/vltava/view.tsx → examples/data-objects/vltava/src/fluidObjects/vltava/view.tsx

@@ -55,9 +55,9 @@ export class VltavaView extends React.Component<IVltavaViewProps, IVltavaViewSta
     }
 
     async componentDidMount() {
-        const component = await this.props.dataModel.getDefaultComponent();
+        const fluidObject = await this.props.dataModel.getDefaultFluidObject();
         this.setState({
-            view: <ReactViewAdapter view={component} />,
+            view: <ReactViewAdapter view={fluidObject} />,
         });
     }
 

examples/data-objects/vltava/src/components/vltava/vltava.tsx → examples/data-objects/vltava/src/fluidObjects/vltava/vltava.tsx

@@ -35,8 +35,8 @@ export class Vltava extends DataObject implements IFluidHTMLView {
     public get IFluidHTMLView() { return this; }
 
     protected async initializingFirstTime() {
-        const tabsComponent = await this.createFluidObject("tabs");
-        this.root.set("tabs-component-id", tabsComponent.handle);
+        const tabsFluidObject = await this.createFluidObject("tabs");
+        this.root.set("tabs-id", tabsFluidObject.handle);
     }
 
     protected async hasInitialized() {