Skip to content

Commit

Permalink
Fix DataObject method renames
Browse files Browse the repository at this point in the history
  • Loading branch information
vladsud committed Aug 7, 2020
1 parent 544fd5c commit bb3a7a6
Show file tree
Hide file tree
Showing 11 changed files with 53 additions and 53 deletions.
2 changes: 1 addition & 1 deletion BREAKING.md
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ getAbsoluteUrl on the container runtime and component context now returns `strin
import { waitForAttach } from "@fluidframework/aqueduct";


protected async componentHasInitialized() {
protected async hasInitialized() {
waitForAttach(this.runtime)
.then(async () => {
const url = await this.context.getAbsoluteUrl(this.url);
Expand Down
12 changes: 6 additions & 6 deletions docs/docs/aqueduct.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,20 @@ structures:
/**
* Called the first time the component is initialized.
*/
protected async componentInitializingFirstTime(): Promise<void> { }
protected async initializingFirstTime(): Promise<void> { }

/**
* Called every time *except* first time the component is initialized.
*/
protected async componentInitializingFromExisting(): Promise<void> { }
protected async initializingFromExisting(): Promise<void> { }

/**
* Called every time the component is initialized after create or existing.
*/
protected async componentHasInitialized(): Promise<void> { }
protected async hasInitialized(): Promise<void> { }
```

#### componentInitializingFirstTime
#### initializingFirstTime

ComponentInitializingFirstTime is called only once. It is executed only by the _first_ client to open the component and
all work will resolve before the component is presented to any user. You should overload this method to perform
Expand All @@ -74,7 +74,7 @@ The `root` SharedDirectory can be used in this method.
The following is an example from the Badge component.

```ts{5,10,19}
protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
// Create a cell to represent the Badge's current state
const current = SharedCell.create(this.runtime);
current.set(this.defaultOptions[0]);
Expand Down Expand Up @@ -106,7 +106,7 @@ SharedDirectory.

:::

#### componentInitializingFromExisting
#### initializingFromExisting

::: danger TODO

Expand Down
4 changes: 2 additions & 2 deletions docs/docs/fluid-handles.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ creates `Clicker` which is a SharedComponent during first time initialization an
Any remote client can retrieve the `handle` from the `root` DDS and get `Clicker` by calling `get()` on the handle:

```typescript
protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
// The first client creates `Clicker` and stores the handle in the `root` DDS.
const clickerComponent = await Clicker.getFactory().createComponent(this.context);
this.root.set(Clicker.ComponentName, clickerComponent.handle);
}

protected async componentHasInitialized() {
protected async hasInitialized() {
// The remote clients retrieve the handle from the `root` DDS and get the `Clicker`.
const clicker = await this.root.get<IComponentHandle>(Clicker.ComponentName).get();
this.clickerView = new HTMLViewAdapter(clicker);
Expand Down
6 changes: 3 additions & 3 deletions docs/docs/hello-world.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,17 +148,17 @@ use the `root` `SharedDirectory`.
```typescript
/**
* componentInitializingFirstTime is called only once, it is executed only by the first client to open the
* initializingFirstTime is called only once, it is executed only by the first client to open the
* component and all work will resolve before the view is presented to any user.
*
* This method is used to perform component setup, which can include setting an initial schema or initial values.
*/
protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
this.root.set(diceValueKey, 1);
}
```
The `componentInitializingFirstTime` function is an override lifecycle method that is called the first time the
The `initializingFirstTime` function is an override lifecycle method that is called the first time the
component instance is ever created. This is our opportunity to perform setup work that will only ever be run
once.
Expand Down
20 changes: 10 additions & 10 deletions docs/docs/visual-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,12 +258,12 @@ export class Clicker extends PrimedComponent implements IComponentHTMLView {

private _counter: SharedCounter | undefined;

protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
const counter = SharedCounter.create(this.runtime);
this.root.set(counterKey, counter.handle);
}

protected async componentHasInitialized() {
protected async hasInitialized() {
const counterHandle = this.root.get<IComponentHandle<SharedCounter>>(counterKey);
this._counter = await counterHandle.get();
}
Expand Down Expand Up @@ -297,9 +297,9 @@ A good way of understanding what is happening here is thinking about the two dif

To cater to these two scenarios, the Fluid component lifecycle provides three different functions:

- `componentInitializingFirstTime` - This code will be run by clients in the first, new session scenario
- `componentInitializingFromExisting` - This code will be run by clients in the second, existing session scenario
- `componentHasInitialized` - This code will be run by clients in both the new and existing session scenarios
- `initializingFirstTime` - This code will be run by clients in the first, new session scenario
- `initializingFromExisting` - This code will be run by clients in the second, existing session scenario
- `hasInitialized` - This code will be run by clients in both the new and existing session scenarios

These all run prior to the first time `render` is called and can be async. As such, this is the perfect place to do any
setup work, such as assembling any DDS' you will need.
Expand All @@ -309,7 +309,7 @@ With this knowledge, let's examine what Clicker is doing with these functions.
```typescript
private _counter: SharedCounter | undefined;

protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
const counter = SharedCounter.create(this.runtime);
this.root.set(counterKey, counter.handle);
}
Expand Down Expand Up @@ -338,15 +338,15 @@ So, this will ensure that there is always a `Counter` handle available in the ro
look at how to fetch it.

```typescript
protected async componentHasInitialized() {
protected async hasInitialized() {
const counterHandle = this.root.get<IComponentHandle<SharedCounter>>(counterKey);
this._counter = await counterHandle.get();
}
```

As we can see here, every client, whether its the first one or one joining an existing session will try to fetch a
handle from the `root` by looking under the `counterKey` key. Simply calling `await counterHandle.get()` now will give
us an instance of the same `SharedCounter` we had set in `componentInitializingFirstTime`.
us an instance of the same `SharedCounter` we had set in `initializingFirstTime`.

In a nutshell, this means that `this._counter` is the same instance of `SharedCounter` for all of the clients that share
the same `root`.
Expand All @@ -373,12 +373,12 @@ export class Clicker extends PrimedComponent implements IComponentHTMLView {

private _counter: SharedCounter | undefined;

protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
const counter = SharedCounter.create(this.runtime);
this.root.set(counterKey, counter.handle);
}

protected async componentHasInitialized() {
protected async hasInitialized() {
const counterHandle = this.root.get<IComponentHandle<SharedCounter>>(counterKey);
this._counter = await counterHandle.get();
}
Expand Down
8 changes: 4 additions & 4 deletions docs/tutorials/dice-roller-comments.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,19 @@ export class DiceRoller extends PrimedComponent implements IDiceRoller, IFluidHT
);

/**
* componentInitializingFirstTime is called only once, it is executed only by the first client to open the
* initializingFirstTime is called only once, it is executed only by the first client to open the
* component and all work will resolve before the view is presented to any user.
*
* This method is used to perform component setup, which can include setting an initial schema or initial values.
*/
protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
this.root.set(diceValueKey, 1);
}

/**
* componentHasInitialized runs every time the component is initialized including the first time.
* hasInitialized runs every time the component is initialized including the first time.
*/
protected async componentHasInitialized() {
protected async hasInitialized() {
this.root.on("valueChanged", (changed: IValueChanged) => {
if (changed.key === diceValueKey) {
this.emit("diceRolled");
Expand Down
10 changes: 5 additions & 5 deletions docs/tutorials/dice-roller.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ behavior as well as additional helpers to make component development easier.
2. Provide `this.createAndAttachComponent(...)` and `this.getComponent(...)` functions for easier creation and access
to other components.
3. Provide the following setup overrides
- `componentInitializingFirstTime()` - only called the first time a component is initialized
- `initializingFirstTime()` - only called the first time a component is initialized
- `existing()` - called every time except the first time a component is initialized
- `opened()` - called every time a component is initialized. After `create` and `existing`.

Expand Down Expand Up @@ -103,14 +103,14 @@ our component can discover that we implement `IComponentHTMLView`.
public get IComponentHTMLView() { return this; }
```

### `componentInitializingFirstTime()`
### `initializingFirstTime()`

`componentInitializingFirstTime()` will be called only the first time a client opens the component. In here we perform
`initializingFirstTime()` will be called only the first time a client opens the component. In here we perform
setup operations that we only want to happen once. Since we are using a `PrimedComponent`, we have a `root`
SharedDirectory we can use to store data. We set our initial `diceValue` on our root directory like so:

```typescript
protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
this.root.set("diceValue", 1);
}
```
Expand All @@ -130,7 +130,7 @@ This is the point where React and VanillaJS differ.
::: tab React
We create a `rerender` function that will display our content into the provided `HTMLElement`.
To get the dice value we use the `get` method on the root, using the same key (`diceValue`) that
we created in `componentInitializingFirstTime()`. Because we are using React we will call
we created in `initializingFirstTime()`. Because we are using React we will call
`ReactDOM.render(...)` with a span displaying our dice value as a Unicode character and a button
that rolls the dice when clicked. Finally we pass the provided `HTMLElement` (`div`) into our
`ReactDOM.render(...)` to tell React what to render in.
Expand Down
4 changes: 2 additions & 2 deletions docs/tutorials/dice-roller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ export class HelloWorld extends PrimedComponent implements IFluidHTMLView {
);

/**
* componentInitializingFirstTime is called only once, it is executed only by the first client to open the
* initializingFirstTime is called only once, it is executed only by the first client to open the
* component and all work will resolve before the view is presented to any user.
*
* This method is used to perform component setup, which can include setting an initial schema or initial values.
*/
protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
this.root.set(diceValueKey, 1);
}

Expand Down
24 changes: 12 additions & 12 deletions docs/tutorials/sudoku.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,13 @@ component as props.

How does the `puzzle` property get populated? How are distributed data structures created and used?

To answer that question, look at the `componentInitializingFirstTime` method in the `FluidSudoku` class:
To answer that question, look at the `initializingFirstTime` method in the `FluidSudoku` class:

```typescript
private sudokuMapKey = "sudoku-map";
private puzzle: ISharedMap;

protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
// Create a new map for our Sudoku data
const map = SharedMap.create(this.runtime);

Expand All @@ -189,21 +189,21 @@ to store all Fluid data used by your component.
Notice that we provide a string key, `this.sudokuMapKey`, when we store the `SharedMap`. This is how we will retrieve
the data structure from the root SharedDirectory later.

`componentInitializingFirstTime` is only called the _first time_ the component is created. This is exactly what we want
`initializingFirstTime` is only called the _first time_ the component is created. This is exactly what we want
in order to create the distributed data structures. We don't want to create new SharedMaps every time a client loads the
component! However, we do need to _load_ the distributed data structures each time the component is loaded.

Distributed data structures are initialized asynchronously, so we need to retrieve them from within an asynchronous
method. We do that by overloading the `componentHasInitialized` method, then store a local reference to the object
method. We do that by overloading the `hasInitialized` method, then store a local reference to the object
(`this.puzzle`) so we can easily use it in synchronous code.

```typescript
protected async componentHasInitialized() {
protected async hasInitialized() {
this.puzzle = await this.root.get<IComponentHandle>(this.sudokuMapKey).get<ISharedMap>();
}
```

The `componentHasInitialized` method is called once after the component has completed initialization, be it the first
The `hasInitialized` method is called once after the component has completed initialization, be it the first
time or subsequent times.

##### A note about component handles
Expand All @@ -222,7 +222,7 @@ await this.root.get<IComponentHandle>(this.sudokuMapKey).get<ISharedMap>();

#### Handling events from distributed data structures

Distributed data structures can be changed by both local code and remote clients. In the `componentHasInitialized`
Distributed data structures can be changed by both local code and remote clients. In the `hasInitialized`
method, we also connect a method to be called each time the Sudoku data - the [SharedMap][] - is changed. In our case we
simply call `render` again. This ensures that our UI updates whenever a remote client changes the Sudoku data.

Expand Down Expand Up @@ -317,7 +317,7 @@ First, you need to create a `SharedMap` for your presence data.
private clientPresence: ISharedMap | undefined;
```

1. Inside the `componentInitializingFirstTime` method, add the following code to the bottom of the method to create and
1. Inside the `initializingFirstTime` method, add the following code to the bottom of the method to create and
register a second `SharedMap`:

```ts
Expand All @@ -328,7 +328,7 @@ First, you need to create a `SharedMap` for your presence data.

Notice that the Fluid runtime is exposed via the `this.runtime` property provided by [PrimedComponent][].

1. Inside the `componentHasInitialized` method, add the following code to the bottom of the method to retrieve the
1. Inside the `hasInitialized` method, add the following code to the bottom of the method to retrieve the
presence map when the component initializes:

```ts
Expand All @@ -337,8 +337,8 @@ First, you need to create a `SharedMap` for your presence data.
.get<ISharedMap>();
```

You now have a `SharedMap` to store presence data. When the component is first created, `componentInitializingFirstTime`
will be called and the presence map will be created. When the component is loaded, `componentHasInitialized` will be
You now have a `SharedMap` to store presence data. When the component is first created, `initializingFirstTime`
will be called and the presence map will be created. When the component is loaded, `hasInitialized` will be
called, which retrieves the `SharedMap` instance.

### Rendering presence
Expand Down Expand Up @@ -412,7 +412,7 @@ for storing the presence data, and a function to update the map with presence da

### Listening to distributed data structure events

1. Still in `src/fluidSudoku.tsx`, add the following code to the bottom of the `componentHasInitialized` method to call
1. Still in `src/fluidSudoku.tsx`, add the following code to the bottom of the `hasInitialized` method to call
render whenever a remote change is made to the presence map:

```ts
Expand Down
12 changes: 6 additions & 6 deletions packages/framework/aqueduct/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ The [`SharedComponent`](./src/components/sharedComponent.ts) provides the follow

- Basic set of interface implementations to be loadable in a Fluid Container.
- Functions for managing component lifecycle.
- `componentInitializingFirstTime(props: S)` - called only the first time a component is initialized
- `componentInitializingFromExisting()` - called every time except the first time a component is initialized
- `componentHasInitialized()` - called every time after `componentInitializingFirstTime` or `componentInitializingFromExisting` executes
- `initializingFirstTime(props: S)` - called only the first time a component is initialized
- `initializingFromExisting()` - called every time except the first time a component is initialized
- `hasInitialized()` - called every time after `initializingFirstTime` or `initializingFromExisting` executes
- Helper functions for creating and getting other Component Objects in the same Container.

> Note: You probably don't want to inherit from this component directly unless you are creating another base component class. If you have a component that doesn't use Distributed Data Structures you should use Container Services to manage your object.
Expand All @@ -47,12 +47,12 @@ export class Clicker extends PrimedComponent implements IComponentHTMLView {

private _counter: SharedCounter | undefined;

protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
const counter = SharedCounter.create(this.runtime);
this.root.set("clicks", counter.handle);
}

protected async componentHasInitialized() {
protected async hasInitialized() {
const counterHandle = this.root.get<IComponentHandle<SharedCounter>>("clicks");
this._counter = await counterHandle.get();
}
Expand Down Expand Up @@ -120,7 +120,7 @@ On our example we want to declare that we want the `IComponentUserInfo` Provider

```typescript
export class MyExample extends PrimedComponent<IComponentUserInfo> {
protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
const userInfo = await this.providers.IComponentUserInfo;
if(userInfo) {
console.log(userInfo.userCount);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ export class LastEditedTrackerComponent extends DataObject

public get IFluidLastEditedTracker() { return this.lastEditedTracker; }

protected async componentInitializingFirstTime() {
protected async initializingFirstTime() {
const sharedSummaryBlock = SharedSummaryBlock.create(this.runtime);
this.root.set(this.sharedSummaryBlockId, sharedSummaryBlock.handle);
}

protected async componentHasInitialized() {
protected async hasInitialized() { // hasInitialized
const sharedSummaryBlock =
await this.root.get<IFluidHandle<SharedSummaryBlock>>(this.sharedSummaryBlockId).get();
this._lastEditedTracker = new LastEditedTracker(sharedSummaryBlock);
Expand Down

0 comments on commit bb3a7a6

Please sign in to comment.