Skip to content

docs: fix runnable recipes and tutorial examples #266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dajiaohuang wants to merge 3 commits into
base: main
Choose a base branch
from
Open

docs: fix runnable recipes and tutorial examples #266

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3cc6b3f
docs: fix runnable recipes and tutorial examples
dajiaohuang Oct 15, 2026
a6f388f
docs: preserve multiline recipe examples
dajiaohuang Oct 16, 2026
2b9f2db
docs: keep multiline recipe examples with prettier-ignore
dajiaohuang Oct 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,14 +225,14 @@ The [examples](examples) folder contains working examples.
You can run one of them with

```bash
PORT=8080 pnpm run examples:01_minimal
PORT=8080 pnpm run examples:01_counter
```

and open <http://localhost:8080> in your web browser.

You can also try them directly:
[01](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/01_minimal)
[02](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/02_typescript)
[01](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/01_counter)
[02](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/02_person)
[03](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/03_usestate)
[04](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/04_selector)
[05](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/05_container)
Expand Down
17 changes: 5 additions & 12 deletions website/docs/recipes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,10 @@ const {
Provider,
useTracked,
// ...
} = createContainer(({ initialState }) => useState(initialState);

} = createContainer(({ initialState }) => useState(initialState));

const App = ({ initialState }) => (
<Provider initialState={initialState}>
...
</Provider>
<Provider initialState={initialState}>...</Provider>
);
```

Expand All @@ -90,13 +87,9 @@ const {
Provider,
useTracked,
// ...
} = createContainer(() => useState({});
} = createContainer(() => useState({}));

const App = () => (
<Provider>
...
</Provider>
);
const App = () => <Provider>...</Provider>;

@dai-shi dai-shi Oct 16, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we keep the multiline style?

@dajiaohuang dajiaohuang Oct 16, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Restored the original multiline style in both affected Provider examples in a6f388f, keeping the syntax and import fixes unchanged. This follow-up only changes documentation formatting; checked the exact diff and whitespace, without rerunning the earlier React/site tests.

@dai-shi dai-shi Oct 17, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you check CI error? it's probably complaining because the syntax is correct now. ... might need to be {/* ... */} or something.

@dajiaohuang dajiaohuang Oct 18, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked the failing job (run 38861492502, job 117242550207). The failure is not a JSX syntax error: pnpm test runs test:format, test:lint, test:types and test:spec together, and it stopped at test:format, which reported a Prettier code-style issue on website/docs/recipes.md and exited 1. The spec suite never started, so the ... lines were not the reported error, and no library code is involved.

The format step fails because Prettier reflows the two multiline Provider/App examples back onto a single line, i.e. it would undo the layout you asked to keep in #266 (comment). The minimal fix is to keep the multiline layout and mark those two declarations, so the pushed commit 2b9f2db only adds // prettier-ignore above each const App = ... in that file — two added comment lines, no other change.

Verified locally against this PR head: using the repo's own pinned Prettier 3.4.2 from pnpm-lock.yaml with the package.json prettier config, prettier --check website/docs/recipes.md fails on the previous head (a6f388f) and passes on 2b9f2db. I did not re-run the rest of the suite or trigger a new workflow run, so the other steps are still unverified by me.

```

### useReducer (with persistence)
Expand Down Expand Up @@ -288,7 +281,7 @@ Updating a property deep in a state object is troublesome.
Here's a custom hook to use [immer](https://github.com/immerjs/immer) for setState.

```javascript
import produce from 'immer';
import { produce } from 'immer';

const useTrackedWithImmer = () => {
const [state, setState] = useTracked();
Expand Down
4 changes: 2 additions & 2 deletions website/docs/tutorial-01.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ This component is to edit person object.
```typescript ts2js
import React, { useState } from 'react';

import { useDispatch, useTrackedState } from './store';
import { useTrackedState } from './store';
import { useFlasher } from './utils';

const ShowPerson = () => {
Expand Down Expand Up @@ -128,7 +128,7 @@ It shows only first name or full name.
import { useRef, useEffect } from 'react';

export const useFlasher = () => {
const ref = useRef<HTMLLIElement>(null);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!ref.current) return;
ref.current.setAttribute(
Expand Down
2 changes: 1 addition & 1 deletion website/docs/tutorial-03.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ It wraps TodoList with Provider.
```typescript ts2js
import { useState, useCallback } from 'react';
import { createContainer } from 'react-tracked';
import produce, { Draft } from 'immer';
import { produce, Draft } from 'immer';

type TodoType = {
id: number;
Expand Down