Todo is a more advanced example that covers more complicated scenarios. The Todo app uses React as its view rendering platform.
You can run this example using the following steps:
- Enable corepack by running
corepack enable. - Run
pnpm installandpnpm run build:fast --nolintfrom theFluidFrameworkroot directory.- For an even faster build, you can add the package name to the build command, like this:
pnpm run build:fast --nolint @fluid-example/todo
- For an even faster build, you can add the package name to the build command, like this:
- Run
pnpm startfrom this directory and open http://localhost:8080 in a web browser to see the app running.
There are two Fluid objects that make up the Todo application:
A Todo is the top level Fluid object. It can create, delete, and provides access to TodoItems. It also has an editable title (using a SharedString).
A Todo Item is a singular todo entry. It has editable text as well as editable detail text (also using a SharedString). It also stores a boolean for the checkbox.
The default view is a TodoView mapping to a Todo. It uses the CollaborativeInput control from the @fluid-example/example-utils package to display its title, and TodoItemViews to display the data from its TodoItems. It also provides a text field and button for creating new TodoItems, and buttons for each TodoItem to delete or open directly.
The TodoItemView uses the CollaborativeInput as well as a CollaborativeTextArea to display its string contents, and uses a plain HTML checkbox for the checked state.
The container code includes a request handler that provides views to the data stored within. For a default (empty) request, it provides a TodoView in response. The container code's request handler can also provide back a TodoItemView directly when a direct link is used.
There are many ways to contribute to Fluid.
- Participate in Q&A in our GitHub Discussions.
- Submit bugs and help us verify fixes as they are checked in.
- Review the source code changes.
- Contribute bug fixes.
Detailed instructions for working in the repo can be found in the Wiki.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.
This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
Not finding what you're looking for in this README? Check out fluidframework.com.
Still not finding what you're looking for? Please file an issue.
Thank you!
This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.
Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.
Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.