Skip to content

Commit

Permalink
docs: prettier mdx (#1181)
Browse files Browse the repository at this point in the history
  • Loading branch information
@holic
holic authored Jul 19, 2023
1 parent 4bb7e8c commit df85e0c
Show file tree
Hide file tree
Showing 5 changed files with 261 additions and 276 deletions.
295 changes: 145 additions & 150 deletions docs/pages/tutorials/minimal/add_system.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ uint32 counter = Counter.get();

Get the counter value.


```solidity
Counter.set(newValue);
```
Expand All @@ -52,188 +51,184 @@ Set the counter to a new value.

</details>


## Add `decrement` to the application

Having a system be able to do something doesn't help anybody unless it is called from somewhere.
In this case, the vanilla getting started front end.

1. Edit `packages/client/src/mud/createSystemCalls.ts` to include `decrement`.
1. Edit `packages/client/src/mud/createSystemCalls.ts` to include `decrement`.
This is the file after the changes:
```typescript
import { ClientComponents } from "./createClientComponents";
import { SetupNetworkResult } from "./setupNetwork";

export type SystemCalls = ReturnType<typeof createSystemCalls>;

export function createSystemCalls(
{ worldSend, txReduced$, singletonEntity }: SetupNetworkResult,
{ Counter }: ClientComponents
) {
const increment = async () => {

```typescript
import { ClientComponents } from "./createClientComponents";
import { SetupNetworkResult } from "./setupNetwork";

export type SystemCalls = ReturnType<typeof createSystemCalls>;

export function createSystemCalls(
{ worldSend, txReduced$, singletonEntity }: SetupNetworkResult,
{ Counter }: ClientComponents
) {
const increment = async () => {
const tx = await worldSend("increment", []);
await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
return getComponentValue(Counter, singletonEntity);
};
};

const decrement = async () => {
const tx = await worldSend("decrement", []);
await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
return getComponentValue(Counter, singletonEntity);
};

return {
increment,
decrement,
};
}
```

<details>

<summary>Explanation</summary>

{" "}
<p></p>

The new function is `decrement`.

```typescript
const decrement = async () => {
const tx = await worldSend("decrement", [])
await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash)
```
This function involves sending a transaction, which is a slow process, so it needs to be [asynchronous](https://www.w3schools.com/js/js_async.asp).
```typescript
const tx = await worldSend("decrement", []);
```
This is the way we call functions in top-level systems in a world.
The second parameter, the list, is for the function parameters.
In this case there aren't any, so it is empty.
```typescript
await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
```
Await until we receive confirmation that the transaction has been added to a block.
```typescript
return getComponentValue(Counter, singletonEntity)
};
```

Get the value of `Counter` to return it.
It should already be the updated value.

```typescript
return {
increment,
decrement,
increment,
decrement,
};
}
```

<details>
<summary>
Explanation
</summary>
```

<p></p>
Of course, we also need to return `decrement` so it can be used elsewhere.

The new function is `decrement`.
</details>

```typescript
const decrement = async () => {
```
1. Update `packages/client/src/index.ts` to include `decrement`.
This is the file after the changes:

This function involves sending a transaction, which is a slow process, so it needs to be [asynchronous](https://www.w3schools.com/js/js_async.asp).
```typescript
import { mount as mountDevTools } from "@latticexyz/dev-tools";
import { setup } from "./mud/setup";

const {
components,
systemCalls: { decrement, increment },
} = await setup();

// Components expose a stream that triggers when the component is updated.
components.Counter.update$.subscribe((update) => {
const [nextValue, prevValue] = update.value;
console.log("Counter updated", update, { nextValue, prevValue });
document.getElementById("counter")!.innerHTML = String(nextValue?.value ?? "unset");
});

// Just for demonstration purposes: we create a global function that can be
// called to invoke the Increment system contract via the world. (See IncrementSystem.sol.)
(window as any).increment = async () => {
console.log("new counter value:", await increment());
};

```typescript
const tx = await worldSend("decrement", [])
```
(window as any).decrement = async () => {
console.log("new counter value:", await decrement());
};

This is the way we call functions in top-level systems in a world.
The second parameter, the list, is for the function parameters.
In this case there aren't any, so it is empty.
mountDevTools();
```

```typescript
await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash)
```
<details>

Await until we receive confirmation that the transaction has been added to a block.
<summary>Explanation</summary>

```typescript
return getComponentValue(Counter, singletonEntity)
};
```
{" "}
<p></p>

Get the value of `Counter` to return it.
It should already be the updated value.
```typescript
const {
components,
systemCalls: { decrement, increment },
} = await setup();
```

```typescript
return {
increment,
decrement,
};
```
This syntax means the we call [`setup()`](https://github.com/latticexyz/mud/blob/main/examples/minimal/packages/client-vanilla/src/mud/setup.ts), and then set `components`, `systemCalls.increment`, and `systemCalls.decrement` to the values provided in the hash returned by this function.
`systemCalls` comes from `createSystemCalls()`, which we modified in the previous step.

Of course, we also need to return `decrement` so it can be used elsewhere.
```typescript
(window as any).decrement = async () => {
console.log("new counter value:", await decrement());
};
```

</details>
We need to make `decrement` available to our application code.
Most frameworks have a standard mechanism to do this, but we are using `vanilla`, which doesn't - so we add it to `window` which is a global variable.

1. Update `packages/client/src/index.ts` to include `decrement`.
This is the file after the changes:
</details>

```typescript
import { mount as mountDevTools } from "@latticexyz/dev-tools";
import { setup } from "./mud/setup";
1. Modify `packages/client/index.html` to add a decrement button.
This is the file after the changes:

const {
components,
systemCalls: {
decrement,
increment
},
} = await setup();

// Components expose a stream that triggers when the component is updated.
components.Counter.update$.subscribe((update) => {
const [nextValue, prevValue] = update.value;
console.log("Counter updated", update, { nextValue, prevValue });
document.getElementById("counter")!.innerHTML = String(nextValue?.value ?? "unset");
});

// Just for demonstration purposes: we create a global function that can be
// called to invoke the Increment system contract via the world. (See IncrementSystem.sol.)
(window as any).increment = async () => {
console.log("new counter value:", await increment());
};

(window as any).decrement = async () => {
console.log("new counter value:", await decrement());
};

mountDevTools();
```

<details>
<summary>Explanation</summary>

<p></p>

```typescript
const {
components,
systemCalls: {
decrement,
increment
},
} = await setup();
```

This syntax means the we call [`setup()`](https://github.com/latticexyz/mud/blob/main/examples/minimal/packages/client-vanilla/src/mud/setup.ts), and then set `components`, `systemCalls.increment`, and `systemCalls.decrement` to the values provided in the hash returned by this function.
`systemCalls` comes from `createSystemCalls()`, which we modified in the previous step.

```typescript
(window as any).decrement = async () => {
console.log("new counter value:", await decrement());
};
```

We need to make `decrement` available to our application code.
Most frameworks have a standard mechanism to do this, but we are using `vanilla`, which doesn't - so we add it to `window` which is a global variable.

</details>


1. Modify `packages/client/index.html` to add a decrement button.
This is the file after the changes:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a minimal MUD client</title>
</head>
<body>
<script type="module" src="/src/index.ts"></script>
<div>Counter: <span id="counter">0</span></div>
<button onclick="window.increment()">Increment</button>
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a minimal MUD client</title>
</head>
<body>
<script type="module" src="/src/index.ts"></script>
<div>Counter: <span id="counter">0</span></div>
<button onclick="window.increment()">Increment</button>
<button onclick="window.decrement()">Decrement</button>
</body>
</html>
```

<details>

<summary>Explanation</summary>

{" "}
<p></p>

```html
<button onclick="window.decrement()">Decrement</button>
</body>
</html>
```

<details>
<summary>Explanation</summary>

<p></p>

```html
<button onclick="window.decrement()">Decrement</button>
```
```

Create a [`button`](https://www.w3schools.com/tags/tag_button.asp) with an [`onClick`](https://www.w3schools.com/tags/ev_onclick.asp) property.
Create a [`button`](https://www.w3schools.com/tags/tag_button.asp) with an [`onClick`](https://www.w3schools.com/tags/ev_onclick.asp) property.

</details>
</details>

1. Reload the application to see that there is a decrement button and that you can use it.
1. Reload the application to see that there is a decrement button and that you can use it.
2 changes: 1 addition & 1 deletion docs/pages/tutorials/walkthrough.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

These tutorials are deep dives into various sections of code.

1. [Onchain parts of the getting started](walkthrough/minimal-onchain)
1. [Onchain parts of the getting started](walkthrough/minimal-onchain)
Loading

0 comments on commit df85e0c

Please sign in to comment.