container-views

@fluid-example/app-integration-container-views

The container-views example has a dice and a button. Clicking the button re-rolls the dice and persists the value in a SharedMap.

This example demonstrates the container-views pattern. In this pattern, the container code (src/container/index.ts) establishes not only the model and controller logic (the DiceRoller, diceRoller.ts) but also the view code (view.tsx) and its binding to the model/controller. The container's entry point uses ContainerViewRuntimeFactory to provide an IFluidMountableViewEntryPoint (a mountable view with mount/unmount methods), so the consumer of the container (app.ts) simply mounts it into a DOM element without needing to know about the view implementation.

This is distinct from the external-views pattern, where the container only provides the data model and the consumer is responsible for creating and binding the view. The container-views pattern can be convenient when the container wants to control its own rendering, but may result in less view flexibility and larger-than-necessary bundle size (especially for headless usage). The external-views pattern is therefore recommended over the container-views pattern for general use.

Getting Started

You can run this example using the following steps:

1. Enable corepack by running corepack enable.
2. Run pnpm install and pnpm run build:fast --nolint from the FluidFramework root 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/app-integration-container-views
3. In a separate terminal, start a Tinylicious server by running pnpm tinylicious in this directory.
4. If using codespaces in a browser, set tinylicious (port 7070) visibility to "public". "Private to Organization" will not work. See sharing a port for how to do this.
5. Run pnpm start from this directory and open http://localhost:8080 in a web browser to see the app running.
6. If you want to run the app against SharePoint, follow the instructions in webpack-fluid-loader to get auth credentials. Then run pnpm start:spo or pnpm start:spo-df and open http://localhost:8080 like above.

Testing

    npm run test:jest

For in browser testing update ./jest-puppeteer.config.js to:

  launch: {
    dumpio: true, // output browser console to cmd line
    slowMo: 500,
    headless: false,
  },

Data model

DiceRoller uses the following distributed data structures:

• SharedMap

Contribution Guidelines

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 opencode@microsoft.com 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.

Help

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!

Trademark

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.