Clean up the term component from readmes (#3398)
Co-authored-by: Tony Murphy <anthonm@microsoft.com>
This commit is contained in:
Tony Murphy
GitHub
Родитель
e3f525e8b3
Коммит
9bcee86b2a
|
|
@ -53,53 +53,6 @@
|
|||
"console": "integratedTerminal",
|
||||
"smartStep": true,
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "Flow-Util Tests",
|
||||
"cwd": "${workspaceFolder}/packages/components/flow-util-lib",
|
||||
"program": "${workspaceFolder}/packages/components/flow-util-lib/node_modules/ts-mocha/bin/ts-mocha",
|
||||
"args": [
|
||||
// Note: 'ignore-styles' must be after 'ts-node', otherwise 'ignore-styles' will intercept
|
||||
// 'index.ts' files if there is an 'index.css' in the same directory.
|
||||
"-r",
|
||||
"ignore-styles",
|
||||
"--no-timeouts",
|
||||
"test/**/*.spec.ts",
|
||||
//"test/**/layout.spec.ts",
|
||||
"--exit"
|
||||
],
|
||||
"env": {
|
||||
// "DEBUG": "flow:*",
|
||||
"TS_NODE_PROJECT": "tsconfig.json",
|
||||
},
|
||||
"console": "integratedTerminal"
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "Table Tests",
|
||||
"cwd": "${workspaceFolder}/components/experimental/table-document",
|
||||
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
|
||||
"args": [
|
||||
"-r",
|
||||
"ts-node/register",
|
||||
"--no-timeouts",
|
||||
"src/test/**/*.spec.ts",
|
||||
// "src/**/table.spec.ts",
|
||||
// "src/**/sparsematrix.spec.ts",
|
||||
"--exit"
|
||||
],
|
||||
"env": {
|
||||
// "DEBUG": "*,-socket.io*,-engine.io*,-follow-redirects",
|
||||
"RUSH_ROOT": "${workspaceFolder}",
|
||||
"TS_NODE_PROJECT": "tsconfig.json"
|
||||
},
|
||||
"console": "integratedTerminal",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**/*.js"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
|
|
@ -141,15 +94,6 @@
|
|||
"protocol": "inspector",
|
||||
"program": "${workspaceFolder}/dist/test/merge-tree/beastTest.js"
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "MathFarm",
|
||||
"sourceMaps": true,
|
||||
"outFiles": [ "${workspaceFolder}/packages/components/math/dist/test/*.js" ],
|
||||
"protocol": "inspector",
|
||||
"program": "${workspaceFolder}/packages/components/math/dist/test/testFarm.js"
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Fluid
|
||||
|
||||
The Fluid Framework is a TypeScript library for building distributed, real-time collaborative web components and
|
||||
The Fluid Framework is a TypeScript library for building distributed, real-time collaborative web
|
||||
applications.
|
||||
|
||||
## Getting started using the Fluid Framework
|
||||
|
|
@ -10,9 +10,9 @@ You may be here because you want to...
|
|||
- Learn more about the Fluid Framework
|
||||
- Build a Fluid object
|
||||
|
||||
Documentation and guides can be found at <https://fluidframework.com/>
|
||||
Hello World Repo can be found at <https://github.com/microsoft/FluidHelloWorld>
|
||||
Core Examples Repo can be found at <https://github.com/microsoft/FluidExamples>
|
||||
Documentation and guides can be found at <https://fluidframework.com/>
|
||||
Hello World Repo can be found at <https://github.com/microsoft/FluidHelloWorld>
|
||||
Core Examples Repo can be found at <https://github.com/microsoft/FluidExamples>
|
||||
|
||||
Got questions? Engage with other Fluid Framework users and developers on [StackOverflow](https://stackoverflow.com/questions/tagged/fluidframework)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,162 +0,0 @@
|
|||
# Package Layers
|
||||
|
||||
[//]: <> (This file is generated, please don't edit it manually!)
|
||||
|
||||
_These are the logical layers into which our packages are grouped.
|
||||
The dependencies between layers are enforced by the layer-check command._
|
||||
|
||||
### Base-Definitions
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/common-definitions](/common/lib/common-definitions)</br>- [@fluidframework/core-interfaces](/packages/loader/core-interfaces)</br>- [@fluidframework/gitresources](/server/routerlicious/packages/gitresources) | </br> </br> |
|
||||
|
||||
### Protocol-Definitions
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/protocol-definitions](/server/routerlicious/packages/protocol-definitions) | - [Base-Definitions](#Base-Definitions) |
|
||||
|
||||
### Driver-Definitions
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/driver-definitions](/packages/loader/driver-definitions)</br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions) |
|
||||
|
||||
### Container-Definitions
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/container-definitions](/packages/loader/container-definitions)</br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions) |
|
||||
|
||||
### Base-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/common-utils](/common/lib/common-utils) | - [Base-Definitions](#Base-Definitions) |
|
||||
|
||||
### Protocol-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/protocol-base](/server/routerlicious/packages/protocol-base)</br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Base-Utils](#Base-Utils) |
|
||||
|
||||
### Framework-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/view-adapters](/packages/framework/view-adapters)</br>- [@fluidframework/view-interfaces](/packages/framework/view-interfaces) | - [Base-Definitions](#Base-Definitions)</br> |
|
||||
|
||||
### Other-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/odsp-utils](/packages/utils/odsp-utils) | |
|
||||
|
||||
### Tool-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/tool-utils](/packages/utils/tool-utils) | - [Other-Utils](#Other-Utils) |
|
||||
|
||||
### Telemetry-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/telemetry-utils](/packages/utils/telemetry-utils)</br> | - [Base-Definitions](#Base-Definitions)</br>- [Base-Utils](#Base-Utils) |
|
||||
|
||||
### Driver-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/driver-utils](/packages/loader/driver-utils)</br> </br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils) |
|
||||
|
||||
### Container-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/container-utils](/packages/loader/container-utils)</br> | - [Container-Definitions](#Container-Definitions)</br>- [Telemetry-Utils](#Telemetry-Utils) |
|
||||
|
||||
### Driver
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/debugger](/packages/drivers/debugger)</br>- [@fluidframework/driver-base](/packages/drivers/driver-base)</br>- [@fluidframework/file-driver](/packages/drivers/file-driver)</br>- [@fluidframework/fluidapp-odsp-urlresolver](/packages/drivers/fluidapp-odsp-urlResolver)</br>- [@fluidframework/iframe-driver](/packages/drivers/iframe-driver)</br>- [@fluidframework/odsp-driver](/packages/drivers/odsp-driver)</br>- [@fluidframework/odsp-urlresolver](/packages/drivers/odsp-urlResolver)</br>- [@fluidframework/replay-driver](/packages/drivers/replay-driver)</br>- [@fluidframework/routerlicious-host](/packages/drivers/routerlicious-host) | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Driver-Utils](#Driver-Utils)</br> </br> |
|
||||
|
||||
### Loader
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/container-loader](/packages/loader/container-loader)</br>- [@fluidframework/execution-context-loader](/packages/loader/execution-context-loader)</br>- [@fluid-internal/test-loader-utils](/packages/loader/test-loader-utils) (private)</br>- [@fluidframework/web-code-loader](/packages/loader/web-code-loader)</br> </br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Driver-Utils](#Driver-Utils)</br>- [Container-Utils](#Container-Utils) |
|
||||
|
||||
### Hosts
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/base-host](/packages/hosts/base-host)</br>- [@fluidframework/host-service-interfaces](/packages/hosts/host-service-interfaces)</br> </br> </br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Loader](#Loader) |
|
||||
|
||||
### Runtime
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/agent-scheduler](/packages/runtime/agent-scheduler)</br>- [@fluidframework/cell](/packages/dds/cell)</br>- [@fluidframework/counter](/packages/dds/counter)</br>- [@fluidframework/ink](/packages/dds/ink)</br>- [@fluidframework/map](/packages/dds/map)</br>- [@fluidframework/matrix](/packages/dds/matrix)</br>- [@fluidframework/merge-tree](/packages/dds/merge-tree)</br>- [@fluidframework/ordered-collection](/packages/dds/ordered-collection)</br>- [@fluidframework/register-collection](/packages/dds/register-collection)</br>- [@fluidframework/sequence](/packages/dds/sequence)</br>- [@fluidframework/shared-object-base](/packages/dds/shared-object-base)</br>- [@fluidframework/shared-summary-block](/packages/dds/shared-summary-block)</br>- [@fluidframework/datastore](/packages/runtime/component-runtime)</br>- [@fluidframework/datastore-definitions](/packages/runtime/datastore-definitions)</br>- [@fluidframework/container-runtime](/packages/runtime/container-runtime)</br>- [@fluidframework/container-runtime-definitions](/packages/runtime/container-runtime-definitions)</br>- [@fluidframework/runtime-definitions](/packages/runtime/runtime-definitions)</br>- [@fluidframework/runtime-utils](/packages/runtime/runtime-utils) | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Driver-Utils](#Driver-Utils)</br>- [Container-Utils](#Container-Utils)</br> </br> </br> </br> </br> </br> </br> </br> </br> |
|
||||
|
||||
### Framework
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluid-internal/client-api](/packages/runtime/client-api)</br>- [@fluidframework/aqueduct](/packages/framework/aqueduct)</br>- [@fluidframework/component-base](/packages/framework/component-base)</br>- [@fluidframework/dds-interceptions](/packages/framework/dds-interceptions)</br>- [@fluidframework/framework-experimental](/packages/framework/framework-experimental)</br>- [@fluidframework/framework-interfaces](/packages/framework/framework-interfaces)</br>- [@fluidframework/last-edited-experimental](/packages/framework/last-edited-experimental)</br>- [@fluidframework/react](/packages/framework/react)</br>- [@fluidframework/request-handler](/packages/framework/request-handler)</br>- [@fluidframework/synthesize](/packages/framework/synthesize)</br>- [@fluidframework/undo-redo](/packages/framework/undo-redo) | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Framework-Utils](#Framework-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Driver-Utils](#Driver-Utils)</br>- [Container-Utils](#Container-Utils)</br>- [Loader](#Loader)</br>- [Runtime](#Runtime) |
|
||||
|
||||
### Component
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluid-example/badge](/components/examples/badge)</br>- [@fluid-example/clicker](/components/examples/clicker)</br>- [@fluid-example/collaborative-textarea](/components/examples/collaborative-textarea)</br>- [@fluid-example/diceroller](/components/examples/diceroller)</br>- [@fluid-example/pond](/components/examples/pond)</br>- [@fluid-example/primitives](/components/examples/primitives)</br>- [@fluid-example/simple-component-embed](/components/examples/simple-component-embed)</br>- [@fluid-example/canvas](/components/experimental/canvas)</br>- [@fluid-example/clicker-context](/components/experimental/clicker-react/clicker-context)</br>- [@fluid-example/clicker-function](/components/experimental/clicker-react/clicker-function)</br>- [@fluid-example/clicker-react](/components/experimental/clicker-react/clicker-react)</br>- [@fluid-example/clicker-reducer](/components/experimental/clicker-react/clicker-reducer)</br>- [@fluid-example/clicker-with-hook](/components/experimental/clicker-react/clicker-with-hook)</br>- [@fluid-example/client-ui-lib](/components/experimental/client-ui-lib)</br>- [@fluid-example/codemirror](/components/experimental/codemirror)</br>- [@fluid-example/draft-js](/components/experimental/draft-js)</br>- [@fluidframework/external-component-loader](/components/experimental/external-component-loader)</br>- [@fluid-example/flow-util-lib](/components/experimental/flow-util-lib)</br>- [@fluid-example/image-collection](/components/experimental/image-collection)</br>- [@fluid-example/image-gallery](/components/experimental/image-gallery)</br>- [@fluid-example/key-value-cache](/components/experimental/key-value-cache)</br>- [@fluid-example/likes-and-comments](/components/experimental/likes-and-comments)</br>- [@fluid-example/math](/components/experimental/math)</br>- [@fluid-example/monaco](/components/experimental/monaco)</br>- [@fluid-example/multiview-container](/components/experimental/multiview/container)</br>- [@fluid-example/multiview-coordinate-interface](/components/experimental/multiview/interface)</br>- [@fluid-example/multiview-coordinate-model](/components/experimental/multiview/model)</br>- [@fluid-example/multiview-plot-coordinate-view](/components/experimental/multiview/plot-coordinate-view)</br>- [@fluid-example/multiview-slider-coordinate-view](/components/experimental/multiview/slider-coordinate-view)</br>- [@fluid-example/multiview-triangle-view](/components/experimental/multiview/triangle-view)</br>- [@fluid-example/musica](/components/experimental/musica)</br>- [@fluid-example/progress-bars](/components/experimental/progress-bars)</br>- [@fluid-example/prosemirror](/components/experimental/prosemirror)</br>- [@fluidframework/react-inputs](/components/experimental/react-inputs)</br>- [@fluid-example/scribe](/components/experimental/scribe)</br>- [@fluid-example/search-menu](/components/experimental/search-menu)</br>- [@fluid-example/shared-text](/components/experimental/shared-text)</br>- [@fluid-example/smde](/components/experimental/smde)</br>- [@fluid-example/spaces](/components/experimental/spaces)</br>- [@fluid-example/sudoku](/components/experimental/sudoku)</br>- [@fluid-example/table-document](/components/experimental/table-document)</br>- [@fluid-example/table-view](/components/experimental/table-view)</br>- [@fluid-example/todo](/components/experimental/todo)</br>- [@fluid-example/video-players](/components/experimental/video-players)</br>- [@fluid-example/vltava](/components/experimental/vltava)</br>- [@fluid-example/webflow](/components/experimental/webflow)</br>- [@fluid-example/intelligence-runner-agent](/packages/agents/intelligence-runner-agent) | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Framework-Utils](#Framework-Utils)</br>- [Loader](#Loader)</br>- [Hosts](#Hosts)</br>- [Runtime](#Runtime)</br>- [Framework](#Framework)</br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> |
|
||||
|
||||
### Build
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/build-common](/common/build/build-common)</br>- [@fluidframework/eslint-config-fluid](/common/build/eslint-config-fluid) | </br> |
|
||||
|
||||
### Server-Shared-Utils
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/server-services-client](/server/routerlicious/packages/services-client)</br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils) |
|
||||
|
||||
### Server-Libs
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/server-kafka-orderer](/server/routerlicious/packages/kafka-orderer)</br>- [@fluidframework/server-lambdas](/server/routerlicious/packages/lambdas)</br>- [@fluidframework/server-lambdas-driver](/server/routerlicious/packages/lambdas-driver)</br>- [@fluidframework/server-local-server](/server/routerlicious/packages/local-server)</br>- [@fluidframework/server-memory-orderer](/server/routerlicious/packages/memory-orderer)</br>- [@fluidframework/server-services](/server/routerlicious/packages/services)</br>- [@fluidframework/server-services-core](/server/routerlicious/packages/services-core)</br>- [@fluidframework/server-services-shared](/server/routerlicious/packages/services-shared)</br>- [@fluidframework/server-services-utils](/server/routerlicious/packages/services-utils)</br>- [@fluidframework/server-test-utils](/server/routerlicious/packages/test-utils) | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Server-Shared-Utils](#Server-Shared-Utils)</br> </br> </br> </br> </br> |
|
||||
|
||||
### Server-Tools
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [tinylicious](/server/tinylicious)</br> </br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Server-Shared-Utils](#Server-Shared-Utils)</br>- [Server-Libs](#Server-Libs) |
|
||||
|
||||
### Routerlicious-Driver
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/routerlicious-driver](/packages/drivers/routerlicious-driver)</br>- [@fluidframework/routerlicious-urlresolver](/packages/drivers/routerlicious-urlResolver)</br> </br> </br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Protocol-Utils](#Protocol-Utils)</br>- [Driver-Utils](#Driver-Utils)</br>- [Driver](#Driver)</br>- [Server-Shared-Utils](#Server-Shared-Utils) |
|
||||
|
||||
### Tools
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluid-internal/fetch-tool](/packages/tools/fetch-tool) (private)</br>- [@fluidframework/get-tinylicious-container](/packages/tools/get-tinylicious-container)</br>- [@fluid-internal/merge-tree-client-replay](/packages/tools/merge-tree-client-replay) (private)</br>- [@fluid-internal/replay-tool](/packages/tools/replay-tool) (private)</br>- [generator-fluid](/tools/generator-fluid)</br> </br> </br> </br> </br> </br> </br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Other-Utils](#Other-Utils)</br>- [Tool-Utils](#Tool-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Driver-Utils](#Driver-Utils)</br>- [Driver](#Driver)</br>- [Loader](#Loader)</br>- [Hosts](#Hosts)</br>- [Runtime](#Runtime)</br>- [Framework](#Framework)</br>- [Routerlicious-Driver](#Routerlicious-Driver) |
|
||||
|
||||
### Test
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/local-web-host](/packages/hosts/local-web-host)</br>- [@fluidframework/local-driver](/packages/drivers/local-driver)</br>- [@fluidframework/test-runtime-utils](/packages/runtime/test-runtime-utils)</br>- [@fluidframework/webpack-fluid-loader](/packages/tools/webpack-fluid-loader)</br>- [@fluid-example/app-integration-container-views](/examples/hosts/app-integration/container-views)</br>- [@fluid-example/app-integration-external-views](/examples/hosts/app-integration/external-views)</br>- [@fluid-internal/hosts-sample](/examples/hosts/hosts-sample) (private)</br>- [@fluid-example/iframe-host](/examples/hosts/iframe-host)</br>- [@fluid-internal/node-host](/examples/hosts/node-host) (private)</br>- [@fluid-internal/end-to-end-tests](/packages/test/end-to-end-tests) (private)</br>- [@fluid-internal/functional-tests](/packages/test/functional-tests) (private)</br>- [@fluid-internal/service-load-test](/packages/test/service-load-test) (private)</br>- [@fluid-internal/test-snapshots](/packages/test/snapshots) (private)</br>- [@fluidframework/test-utils](/packages/test/test-utils)</br>- [@fluid-internal/version-test-1](/packages/test/version-test-1) (private)</br> </br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Framework-Utils](#Framework-Utils)</br>- [Other-Utils](#Other-Utils)</br>- [Tool-Utils](#Tool-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Driver-Utils](#Driver-Utils)</br>- [Driver](#Driver)</br>- [Loader](#Loader)</br>- [Hosts](#Hosts)</br>- [Runtime](#Runtime)</br>- [Framework](#Framework)</br>- [Component](#Component)</br>- [Server-Shared-Utils](#Server-Shared-Utils)</br>- [Server-Libs](#Server-Libs)</br>- [Routerlicious-Driver](#Routerlicious-Driver)</br>- [Tools](#Tools) |
|
||||
|
||||
### Routerlicious-Server
|
||||
|
||||
| Packages | Layer Dependencies |
|
||||
| --- | --- |
|
||||
| - [@fluidframework/server-routerlicious](/server/routerlicious/packages/routerlicious)</br> </br> </br> </br> | - [Base-Definitions](#Base-Definitions)</br>- [Protocol-Definitions](#Protocol-Definitions)</br>- [Base-Utils](#Base-Utils)</br>- [Server-Shared-Utils](#Server-Shared-Utils)</br>- [Server-Libs](#Server-Libs) |
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -67,7 +67,7 @@ Within the Fluid Framework, the runtime consists of a few parts:
|
|||
Fluid will create an instance of the Fluid `ContainerRuntime` by passing it a registry- which instructs how to
|
||||
instantiate data stores; this may be dynamic, or all data store code could bundled with the container runtime.
|
||||
2. The data-store-level runtime code: this corresponds to each loaded data store within a container. The data-store-level
|
||||
runtime code is dictated by the ".component" package information in its attach op. The data-store-level runtime code
|
||||
runtime code is dictated by the package information in its attach op. The data-store-level runtime code
|
||||
and container-level runtime code depend on each other through the APIs defined in runtime-definitions. For reference,
|
||||
this boundary occurs between the `IFluidDataStoreContext`
|
||||
(container-level) and the `IFluidDataStoreRuntime` (data-store-level). Fluid tries to keep the container runtime backwards
|
||||
|
|
|
|||
|
|
@ -80,4 +80,4 @@ the DataObject across Containers and to load it from anywhere, you just have to
|
|||
|
||||
|
||||
[remote handle]:
|
||||
https://github.com/microsoft/FluidFramework/blob/main/packages/runtime/runtime-utils/src/remoteComponentHandle.ts
|
||||
https://github.com/microsoft/FluidFramework/blob/main/packages/runtime/runtime-utils/src/remoteFluidObjectHandle.ts
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ processed chunk op data.
|
|||
graph LR
|
||||
A(["(root)"]) --> B([.protocol])
|
||||
A --> S([_scheduler])
|
||||
A --> C1([Component_1])
|
||||
A --> C2([Component_2])
|
||||
A --> C1([DataStore_1])
|
||||
A --> C2([DataStore_2])
|
||||
A --> CH([.chunks])
|
||||
C1 --> .C([.component])
|
||||
C1 --> D1([DDS_1])
|
||||
C1 --> D2([DDS_2])
|
||||
DS1 --> .DS([.component])
|
||||
DS1 --> D1([DDS_1])
|
||||
DS1 --> D2([DDS_2])
|
||||
D1 --> .D([.attributes])
|
||||
D1 --> SB(["(more blobs)"])
|
||||
D1 --> ST(["(subtrees)"])
|
||||
|
|
@ -39,8 +39,8 @@ attributes: document ID, sequence number, and minimum sequence number at that po
|
|||
graph LR
|
||||
A(["(root)"]) --> B([.protocol])
|
||||
A --> S([_scheduler])
|
||||
A --> C1([Component_1])
|
||||
A --> C2([Component_2])
|
||||
A --> C1([DataStore_1])
|
||||
A --> C2([DataStore_2])
|
||||
A --> CH([.chunks])
|
||||
B --> QM([quorumMembers])
|
||||
B --> QP([quorumProposals])
|
||||
|
|
@ -54,7 +54,7 @@ graph LR
|
|||
|
||||
The second layer consists of a subtree for each Fluid Data Store which has been attached and bound to the container.
|
||||
They must have a unique ID, which is generally decided by the runtime to prevent collisions. This will be a flattened
|
||||
list of all bound data stores. Nested components referenced by handles are irrelevant to the structure of this graph.
|
||||
list of all bound data stores. Nested data stores referenced by handles are irrelevant to the structure of this graph.
|
||||
|
||||
Each Fluid Data Store subtree will have a single metadata blob containing information about how to load its code.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
# How to write a visual component
|
||||
# How to write a visual data store
|
||||
|
||||
## Introducing IComponentHtmlView
|
||||
## Introducing IFluidHtmlView
|
||||
|
||||
All Fluid components expose their capabilities using the `IComponentX` interface pattern. Please see [Feature detection
|
||||
and delegation](./components.md#feature-detection-and-delegation) for more information on this.
|
||||
All Fluid data stores expose their capabilities using the `IFluidX` interface pattern. Please see [Feature detection
|
||||
and delegation](../concepts/feature-detection-iprovide.md) for more information on this.
|
||||
|
||||
As such, any component that provides a view -- that is, a component that is presented to the user visually -- exposes
|
||||
this capability by implementing the `IComponentHTMLView` interface provided by the Fluid Framework. Let's take a look at
|
||||
As such, any data store that provides a view -- that is, a data store that is presented to the user visually -- exposes
|
||||
this capability by implementing the `IFluidHTMLView` interface provided by the Fluid Framework. Let's take a look at
|
||||
what this interface needs:
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* An IComponentHTMLView is a renderable component
|
||||
* An IFluidHTMLView is a renderable data store
|
||||
*/
|
||||
export interface IComponentHTMLView extends IProvideComponentHTMLView {
|
||||
export interface IFluidHTMLView extends IProvideFluidHTMLView {
|
||||
/**
|
||||
* Render the component into an HTML element.
|
||||
* Render the data store into an HTML element.
|
||||
*/
|
||||
render(elm: HTMLElement, options?: IComponentHTMLOptions): void;
|
||||
render(elm: HTMLElement, options?: IFluidHTMLOptions): void;
|
||||
|
||||
/**
|
||||
* Views which need to perform cleanup (e.g. remove event listeners, timers, etc.) when
|
||||
|
|
@ -26,22 +26,22 @@ export interface IComponentHTMLView extends IProvideComponentHTMLView {
|
|||
remove?(): void;
|
||||
}
|
||||
|
||||
export interface IProvideComponentHTMLView {
|
||||
readonly IComponentHTMLView: IComponentHTMLView;
|
||||
export interface IProvideFluidHTMLView {
|
||||
readonly IFluidHTMLView: IFluidHTMLView;
|
||||
}
|
||||
```
|
||||
|
||||
As we can see, the two functions that we must implement are the `IComponentHTMLView` identifier and a `render(elm:
|
||||
As we can see, the two functions that we must implement are the `IFluidHTMLView` identifier and a `render(elm:
|
||||
HTMLElement)` function. `remove()` is not mandatory and only necessary for clean up operations when the view is being
|
||||
removed.
|
||||
|
||||
- `IComponentHTMLView` can simply provide itself as `this` to identify that this component itself is a view provider.
|
||||
With Fluid, each component uses the identifiers to expose their capabilities and are anonymous interfaces otherwise.
|
||||
As such, another component (`componentB`) that does not know if this component (`componentA`) provides a view but can
|
||||
check by seeing if `componentA.IComponentHTMLView` is defined or not. If `componentA.IComponentHTMLView` is defined,
|
||||
it is guaranteed to return a `IComponentHTMLView` object. At this point, it can render `componentA` by calling
|
||||
`componentA.IComponentHTMLView.render()`. This may seem initially confusing but the example below should demonstrate
|
||||
its ease of implementation and you can read [here](../docs/components.md#feature-detection-and-delegation) for more
|
||||
- `IFluidHTMLView` can simply provide itself as `this` to identify that this data store itself is a view provider.
|
||||
With Fluid, each data store uses the identifiers to expose their capabilities and are anonymous interfaces otherwise.
|
||||
As such, another data store (`dataStoreB`) that does not know if this data store (`dataStoreA`) provides a view but can
|
||||
check by seeing if `dataStoreA.IFluidHTMLView` is defined or not. If `dataStoreA.IFluidHTMLView` is defined,
|
||||
it is guaranteed to return a `IFluidHTMLView` object. At this point, it can render `dataStoreA` by calling
|
||||
`dataStoreA.IFluidHTMLView.render()`. This may seem initially confusing but the example below should demonstrate
|
||||
its ease of implementation and you can read [here](../concepts/feature-detection-iprovide.md) for more
|
||||
reference.
|
||||
- `render` is a function that takes in the parent HTML document element and allows children to inject their views into
|
||||
it. The `elm` parameter passed in here can be modified and returned. If you are using React as your view framework,
|
||||
|
|
@ -57,27 +57,27 @@ public render(elm: HTMLElement) {
|
|||
```
|
||||
|
||||
|
||||
To see an example of how a Fluid component can implement this interface, we will be looking at a simple `Clicker`
|
||||
component that consists of a label with a number starting at `0` and a button that increments the displayed number for
|
||||
To see an example of how a Fluid data store can implement this interface, we will be looking at a simple `Clicker`
|
||||
data store that consists of a label with a number starting at `0` and a button that increments the displayed number for
|
||||
all users simultaneously.
|
||||
|
||||
Over the course of this example, we will incrementally build out our entire component in one file. The final two
|
||||
Over the course of this example, we will incrementally build out our entire data store in one file. The final two
|
||||
versions of the code can be found at the bottom of each section. Each of these files define an entire, self-sufficient
|
||||
Fluid component that can be exported in its own package.
|
||||
Fluid data store that can be exported in its own package.
|
||||
|
||||
First, we will look at how `Clicker` is set up such that it defines itself as a Fluid Component and uses a shared state.
|
||||
First, we will look at how `Clicker` is set up such that it defines itself as a Fluid data store and uses a shared state.
|
||||
Then, we will take a look at two different ways of generating a view that responds to changes on that shared state when
|
||||
a user presses a button:
|
||||
|
||||
- Option A: Using a robust, event-driven pattern that can be emulated for different view frameworks.
|
||||
- Option B: Using a React adapter that React developers may find more familiar but uses experimental code that is still being developed.
|
||||
|
||||
## Setting Up the Fluid Component
|
||||
## Setting Up the Fluid Data Store
|
||||
|
||||
Before we do either of the options, we first need to do some common steps to say that `Clicker` is a Fluid component,
|
||||
Before we do either of the options, we first need to do some common steps to say that `Clicker` is a Fluid data store,
|
||||
and bring in the necessary imports. Below is the initial code to get you started; we will incrementally build on this
|
||||
throughout the example. The final result of this file is sufficient to produce a standalone component, and can be
|
||||
supplied as the `main` script in your component `package.json`.
|
||||
throughout the example. The final result of this file is sufficient to produce a standalone data store, and can be
|
||||
supplied as the `main` script in your data store `package.json`.
|
||||
|
||||
Alright, lets take a look at some initial scaffolding.
|
||||
|
||||
|
|
@ -97,7 +97,7 @@ export const ClickerInstantiationFactory = new PrimedComponentFactory(
|
|||
export const fluidExport = ClickerInstantiationFactory;
|
||||
```
|
||||
|
||||
Believe it or not, we are now 90% of the way to having a visual Fluid component! Do not worry if it doesn't compile yet.
|
||||
Believe it or not, we are now 90% of the way to having a visual Fluid data store! Do not worry if it doesn't compile yet.
|
||||
Let's take a quick summary of what we've written though before going the last bit to attain compilation.
|
||||
|
||||
```typescript
|
||||
|
|
@ -108,13 +108,13 @@ By extending the abstract `PrimedComponent` class, we have actually let it do a
|
|||
through its constructor. Specifically, the `PrimedComponent` class gives us access to two items
|
||||
|
||||
- `root`: The `root` is a `SharedDirectory` [object](../docs/SharedDirectory.md) which, as the name implies, is a
|
||||
directory that is shared amongst all users that are rendering this component in the same session. Any items that are
|
||||
directory that is shared amongst all users that are rendering this data store in the same session. Any items that are
|
||||
set here on a key will be accessible to other users using the same key on their respective client's root. The stored
|
||||
values can be primitives or the handles of other `SharedObject` items. If you don't know what handles are, don't
|
||||
worry! We'll take a look at them in the next section.
|
||||
|
||||
- `runtime`: The `runtime` is a `ComponentRuntime` object that manages the Fluid component lifecycle. The key thing to
|
||||
note here is that it will be used for the creation of other Fluid components and DDSes.
|
||||
- `runtime`: The `runtime` is a `ComponentRuntime` object that manages the Fluid data store lifecycle. The key thing to
|
||||
note here is that it will be used for the creation of other Fluid data stores and DDSes.
|
||||
|
||||
```typescript
|
||||
export const ClickerInstantiationFactory = new PrimedComponentFactory(
|
||||
|
|
@ -125,13 +125,13 @@ export const ClickerInstantiationFactory = new PrimedComponentFactory(
|
|||
);
|
||||
export const fluidExport = ClickerInstantiationFactory;
|
||||
```
|
||||
These two lines in combination allow the Clicker component to be consumed as a Fluid component. While the first two
|
||||
These two lines in combination allow the Clicker data store to be consumed as a Fluid data store. While the first two
|
||||
parameters that `PrimedComponentFactory` takes in simply define `Clicker`'s name and pass the class itself, the third
|
||||
parameter is important to keep in mind for later as it will list the Fluid DDSes (Distributed Data Structures) that
|
||||
`Clicker` utilizes.
|
||||
|
||||
Finally, the last line consisting of an exported `fluidExport` variable is what Fluid containers look for in order to
|
||||
instantiate this component using the factory it provides.
|
||||
instantiate this data store using the factory it provides.
|
||||
|
||||
Awesome, now that we're up to speed with our code scaffolding, let's add the actual counter data structure that we will
|
||||
use to keep track of multiple users clicking the button, and a rudimentary render function. Following that, we will link
|
||||
|
|
@ -142,14 +142,14 @@ the two together.
|
|||
```typescript
|
||||
import { PrimedComponent, PrimedComponentFactory } from "@fluidframework/aqueduct";
|
||||
import { SharedCounter } from "@fluidframework/counter";
|
||||
import { IComponentHTMLView } from "@fluidframework/view-interfaces";
|
||||
import { IFluidHTMLView } from "@fluidframework/view-interfaces";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
const ClickerName = "Clicker";
|
||||
|
||||
export class Clicker extends PrimedComponent implements IComponentHTMLView {
|
||||
public get IComponentHTMLView() { return this; }
|
||||
export class Clicker extends PrimedComponent implements IFluidHTMLView {
|
||||
public get IFluidHTMLView() { return this; }
|
||||
|
||||
public render(elm: HTMLElement) {
|
||||
ReactDOM.render(
|
||||
|
|
@ -173,7 +173,7 @@ export const fluidExport = ClickerInstantiationFactory;
|
|||
|
||||
Now, our clicker has a `SharedCounter` available, which is an extension of `SharedObject` and can provide a simple empty
|
||||
view. Although a little light on functionality, by just adding those few lines, our `Clicker` is now a compiling, visual
|
||||
component! We will add in our business logic in a second but first, let's see what these few lines achieved.
|
||||
data store! We will add in our business logic in a second but first, let's see what these few lines achieved.
|
||||
|
||||
As discussed above, the `PrimedComponent` already gives us a `SharedObject` in the form of the `SharedDirectory` root.
|
||||
Any primitive we set to a key of the root, i.e. `root.set("key", 1)`, can be fetched by another user, i.e.
|
||||
|
|
@ -194,14 +194,14 @@ export const ClickerInstantiationFactory = new PrimedComponentFactory(
|
|||
);
|
||||
```
|
||||
|
||||
We will also be displaying our `Clicker` incrementing in a view, so we also need to mark our component as an
|
||||
`IComponentHTMLView` component to say that it provides a render function, as explained at the beginning of this page.
|
||||
This is done by adding the adding the `IComponentHTMLView` interface and implementing the first mandatory function,
|
||||
`IComponentHTMLView`, by returning itself.
|
||||
We will also be displaying our `Clicker` incrementing in a view, so we also need to mark our data store as an
|
||||
`IFluidHTMLView` data store to say that it provides a render function, as explained at the beginning of this page.
|
||||
This is done by adding the adding the `IFluidHTMLView` interface and implementing the first mandatory function,
|
||||
`IFluidHTMLView`, by returning itself.
|
||||
|
||||
```typescript
|
||||
export class Clicker extends PrimedComponent implements IComponentHTMLView {
|
||||
public get IComponentHTMLView() { return this; }
|
||||
export class Clicker extends PrimedComponent implements IFluidHTMLView {
|
||||
public get IFluidHTMLView() { return this; }
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -218,7 +218,7 @@ public render(elm: HTMLElement) {
|
|||
}
|
||||
```
|
||||
|
||||
Now that we can start using the SharedCounter DDS and have labeled this component as one that provides a view, we can
|
||||
Now that we can start using the SharedCounter DDS and have labeled this data store as one that provides a view, we can
|
||||
start filling out the view itself and how it updates to changes in DDSes.
|
||||
|
||||
## Creating the View
|
||||
|
|
@ -230,8 +230,8 @@ to trigger re-renders for any view framework. When using React, instead of needi
|
|||
`setState` with the new value.
|
||||
|
||||
There is a also a new, experimental Fluid React library that React developers may find easier to use since it abstracts
|
||||
much of the event-driven state update logic, but it is a still a WiP for scenarios such as cross-component relationships
|
||||
and may be unstable. However, we can use it for standalone components such as this. It is still recommended to read the
|
||||
much of the event-driven state update logic, but it is a still a WiP for scenarios such as cross-data store relationships
|
||||
and may be unstable. However, we can use it for standalone data stores such as this. It is still recommended to read the
|
||||
event-driven case even if you choose to apply the Fluid React libraries to understand the logic that is happening
|
||||
beneath the abstraction the libraries provide.
|
||||
|
||||
|
|
@ -244,17 +244,17 @@ Now that we have all of our scaffolding ready, we can actually start adding in t
|
|||
|
||||
```typescript
|
||||
import { PrimedComponent, PrimedComponentFactory } from "@fluidframework/aqueduct";
|
||||
import { IComponentHandle } from "@fluidframework/core-interfaces";
|
||||
import { IFluidHandle } from "@fluidframework/core-interfaces";
|
||||
import { SharedCounter } from "@fluidframework/counter";
|
||||
import { IComponentHTMLView } from "@fluidframework/view-interfaces";
|
||||
import { IFluidHTMLView } from "@fluidframework/view-interfaces";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
const ClickerName = "Clicker";
|
||||
const counterKey = "counter";
|
||||
|
||||
export class Clicker extends PrimedComponent implements IComponentHTMLView {
|
||||
public get IComponentHTMLView() { return this; }
|
||||
export class Clicker extends PrimedComponent implements IFluidHTMLView {
|
||||
public get IFluidHTMLView() { return this; }
|
||||
|
||||
private _counter: SharedCounter | undefined;
|
||||
|
||||
|
|
@ -264,7 +264,7 @@ export class Clicker extends PrimedComponent implements IComponentHTMLView {
|
|||
}
|
||||
|
||||
protected async hasInitialized() {
|
||||
const counterHandle = this.root.get<IComponentHandle<SharedCounter>>(counterKey);
|
||||
const counterHandle = this.root.get<IFluidHandle<SharedCounter>>(counterKey);
|
||||
this._counter = await counterHandle.get();
|
||||
}
|
||||
|
||||
|
|
@ -287,15 +287,15 @@ export const ClickerInstantiationFactory = new PrimedComponentFactory(
|
|||
export const fluidExport = ClickerInstantiationFactory;
|
||||
```
|
||||
|
||||
A good way of understanding what is happening here is thinking about the two different scenarios this component will be rendered in.
|
||||
A good way of understanding what is happening here is thinking about the two different scenarios this data store will be rendered in.
|
||||
|
||||
- This is the first time this component is being rendered in this session for any user, i.e. some user opened this
|
||||
- This is the first time this data store is being rendered in this session for any user, i.e. some user opened this
|
||||
`Clicker` session for the first time
|
||||
- This is another user who is joining an existing session and is rendering a component with data that has already been
|
||||
- This is another user who is joining an existing session and is rendering a data store with data that has already been
|
||||
updated, i.e. somebody clicked the `Clicker` a number of times already and now a new user enters to see the already
|
||||
incremented value
|
||||
|
||||
To cater to these two scenarios, the Fluid component lifecycle provides three different functions:
|
||||
To cater to these two scenarios, the Fluid data store lifecycle provides three different functions:
|
||||
|
||||
- `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
|
||||
|
|
@ -315,7 +315,7 @@ protected async initializingFirstTime() {
|
|||
}
|
||||
```
|
||||
|
||||
Since this is the first time this component has been rendered in this session, we need to add a `SharedCounter` to
|
||||
Since this is the first time this data store has been rendered in this session, we need to add a `SharedCounter` to
|
||||
everyone's shared `root` so we can all increment on the same object. We do this using the `SharedCounter.create`
|
||||
function that simply takes in the `runtime` object that we have handy from the `PrimedComponent` class we inherited
|
||||
earlier.
|
||||
|
|
@ -339,7 +339,7 @@ look at how to fetch it.
|
|||
|
||||
```typescript
|
||||
protected async hasInitialized() {
|
||||
const counterHandle = this.root.get<IComponentHandle<SharedCounter>>(counterKey);
|
||||
const counterHandle = this.root.get<IFluidHandle<SharedCounter>>(counterKey);
|
||||
this._counter = await counterHandle.get();
|
||||
}
|
||||
```
|
||||
|
|
@ -359,17 +359,17 @@ Alright, now for the moment you've been waiting for, connecting the counter to t
|
|||
|
||||
```typescript
|
||||
import { PrimedComponent, PrimedComponentFactory } from "@fluidframework/aqueduct";
|
||||
import { IComponentHandle } from "@fluidframework/core-interfaces";
|
||||
import { IFluidHandle } from "@fluidframework/core-interfaces";
|
||||
import { SharedCounter } from "@fluidframework/counter";
|
||||
import { IComponentHTMLView } from "@fluidframework/view-interfaces";
|
||||
import { IFluidHTMLView } from "@fluidframework/view-interfaces";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
const ClickerName = "Clicker";
|
||||
const counterKey = "counter";
|
||||
|
||||
export class Clicker extends PrimedComponent implements IComponentHTMLView {
|
||||
public get IComponentHTMLView() { return this; }
|
||||
export class Clicker extends PrimedComponent implements IFluidHTMLView {
|
||||
public get IFluidHTMLView() { return this; }
|
||||
|
||||
private _counter: SharedCounter | undefined;
|
||||
|
||||
|
|
@ -379,7 +379,7 @@ export class Clicker extends PrimedComponent implements IComponentHTMLView {
|
|||
}
|
||||
|
||||
protected async hasInitialized() {
|
||||
const counterHandle = this.root.get<IComponentHandle<SharedCounter>>(counterKey);
|
||||
const counterHandle = this.root.get<IFluidHandle<SharedCounter>>(counterKey);
|
||||
this._counter = await counterHandle.get();
|
||||
}
|
||||
|
||||
|
|
@ -458,8 +458,8 @@ public render(div: HTMLElement) {
|
|||
|
||||
By the time any client reaches the render function, they should have either created a `SharedCounter` and fetched it
|
||||
from the root, or fetched an existing one from the root. As such, we will error if it's not available. Then we pass the
|
||||
counter as a prop to our new React component `CounterReactView` inside `ReactDOM.render`. This will be your main entry
|
||||
point into the React view lifecycle. Let's take a look at the `CounterReactView` component next.
|
||||
counter as a prop to our new React data store `CounterReactView` inside `ReactDOM.render`. This will be your main entry
|
||||
point into the React view lifecycle. Let's take a look at the `CounterReactView` data store next.
|
||||
|
||||
```typescript
|
||||
interface CounterProps {
|
||||
|
|
@ -550,7 +550,7 @@ import {
|
|||
FluidToViewMap,
|
||||
} from "@fluidframework/react";
|
||||
import { SharedCounter } from "@fluidframework/counter";
|
||||
import { IComponentHTMLView } from "@fluidframework/view-interfaces";
|
||||
import { IFluidHTMLView } from "@fluidframework/view-interfaces";
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
|
||||
|
|
@ -562,8 +562,8 @@ type CounterViewState = IViewState & CounterState;
|
|||
type CounterFluidState = IFluidState & CounterState;
|
||||
|
||||
|
||||
export class Clicker extends PrimedComponent implements IComponentHTMLView {
|
||||
public get IComponentHTMLView() { return this; }
|
||||
export class Clicker extends PrimedComponent implements IFluidHTMLView {
|
||||
public get IFluidHTMLView() { return this; }
|
||||
|
||||
public render(element: HTMLElement) {
|
||||
const fluidToView: FluidToViewMap<CounterViewState, CounterFluidState> = new Map();
|
||||
|
|
@ -615,7 +615,7 @@ export const ClickerInstantiationFactory = new PrimedComponentFactory(
|
|||
export const fluidExport = ClickerInstantiationFactory;
|
||||
```
|
||||
|
||||
Let's take this in parts to understand the link between the Fluid Component and the view that we establish here.
|
||||
Let's take this in parts to understand the link between the Fluid data store and the view that we establish here.
|
||||
|
||||
First, let's just take a look at the interfaces our view will be using.
|
||||
|
||||
|
|
@ -661,9 +661,9 @@ public render(element: HTMLElement) {
|
|||
```
|
||||
|
||||
Here, we construct a `fluidToView` mapping to describe the relationship between `counter` in the view state and
|
||||
`counter` in the Fluid state. If this is the first time this component is being rendered, it will use the callback in
|
||||
`counter` in the Fluid state. If this is the first time this data store is being rendered, it will use the callback in
|
||||
`sharedObjectCreate` to initialize the `SharedCounter` object on the synced state. Any returning clients will
|
||||
automatically fetch this stored value, convert it from a handle to the component itself, and pass it into the view
|
||||
automatically fetch this stored value, convert it from a handle to the data store itself, and pass it into the view
|
||||
state.
|
||||
|
||||
We also pass in the `listenedEvents` parameter to indicate which events on this Fluid state value should trigger a state
|
||||
|
|
@ -672,7 +672,7 @@ update. Here we pass in `"incremented"` as we want the view to refresh when the
|
|||
This also optionally takes in `stateKey`, `viewConverter`, and `rootKey` parameters to handle cases where the view and
|
||||
fluid states do not match, but they are not needed here.
|
||||
|
||||
If you read Option A above, you will notice that we no longer need to set up the `SharedCounter` in the component
|
||||
If you read Option A above, you will notice that we no longer need to set up the `SharedCounter` in the data store
|
||||
lifecycle and that we only have the `render` function now. This is because this initialization is happening within the
|
||||
React lifecycle, and the `SharedCounter` instance will be made available through a state update after it finishes
|
||||
initializing. This is why you see that `CounterState` is defined as `{counter?: SharedCounter}` instead of `{counter:
|
||||
|
|
@ -680,18 +680,18 @@ SharedCounter}`. Prior to initialization, `state.counter` will return undefined.
|
|||
|
||||
Okay, now we have everything necessary to pass in as props to our `CounterReactView`.
|
||||
|
||||
- `syncedStateId` - This should be unique for each component that shares the same root, i.e. if there was another
|
||||
clicker being render alongside this one in this component, it should receive its own ID to prevent one from
|
||||
- `syncedStateId` - This should be unique for each data store that shares the same root, i.e. if there was another
|
||||
clicker being render alongside this one in this data store, it should receive its own ID to prevent one from
|
||||
interfering in the updates of the other
|
||||
- `root` - The same `SharedDirectory` provided by `this.root` from `PrimedComponent`
|
||||
- `dataProps.fluidObjectMap` - This can just take a new `Map` instance for now but will need to be filled when
|
||||
establishing multi-component relationships in more complex cases. This map is where all the DDSes that we use are
|
||||
stored after being fetched from their handles, and it used to make the corresponding component synchronously available
|
||||
establishing multi-data store relationships in more complex cases. This map is where all the DDSes that we use are
|
||||
stored after being fetched from their handles, and it used to make the corresponding data store synchronously available
|
||||
in the view.
|
||||
- `dataProps.runtime` - The same `ComponentRuntime` provided by `this.runtime` from `PrimedComponent`
|
||||
- `fluidToView` - The fluidToView relationship map we set up above.
|
||||
|
||||
We're ready to go through our view, which is now super simple due to the setup we did in the Fluid component itself.
|
||||
We're ready to go through our view, which is now super simple due to the setup we did in the Fluid data store itself.
|
||||
|
||||
```typescript
|
||||
class CounterReactView extends FluidReactView<CounterViewState, CounterFluidState> {
|
||||
|
|
@ -719,7 +719,7 @@ We can see that the state is initially empty as it only consists of the `SharedC
|
|||
The view itself can now directly use the `this.state.counter.value` and we can update it by simply using
|
||||
`this.state.counter.increment(1)`. This will directly update the `this.state.counter.value` without needing any event
|
||||
listeners to be additionally set up. And there you have it, a synced clicker with persistent state without needing to
|
||||
directly use IComponentHandles or set up event listeners!
|
||||
directly use IFluidHandles or set up event listeners!
|
||||
|
||||
We can extend this example to other DDSes by passing in their corresponding `create` functions in and listening to their
|
||||
respective events.
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ The Container provides a `createDataStore` method to create new Data Objects. Th
|
|||
|
||||
The Fluid Container is interacted with through the request paradigm. While aqueduct creates a default request handler that returns the default Data Object, the request paradigm is a powerful pattern that lets developers create custom logic.
|
||||
|
||||
To retrieve the default component, you can perform a request on the container. Similar to the [loaders api](./hosts.md) this will return a status code and the default component.
|
||||
To retrieve the default data store, you can perform a request on the container. Similar to the [loaders api](./hosts.md) this will return a status code and the default data store.
|
||||
|
||||
```
|
||||
container.request({url: "/"})
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ all of the connections so that Fluid client developers can focus on local experi
|
|||
|
||||
It depends. Because the Fluid service is extremely lightweight, even a simple implementation of the service can
|
||||
support 100s of concurrent users. A more sophisticated implementation can distribute the work and support 1000s. The
|
||||
experience on the client will vary depending on the Fluid component and local device. When considering scale for
|
||||
experience on the client will vary depending on the Fluid data store and local device. When considering scale for
|
||||
Fluid solutions, consider how well the client can handle and render changes, not whether the service is able to
|
||||
distribute them efficiently.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Interface `IContainerRuntime` specify the container developer API.
|
|||
|
||||
TODO: The full set of functionality is under review
|
||||
|
||||
- Component creation and retrival API
|
||||
- Data store creation and retrival API
|
||||
- Container info and states (connection state, documentId, quorum, audience, etc.)
|
||||
- Loader
|
||||
- Op/Signal submission
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@ The two major interfaces required to implement a Fliud Handle are `IFluidHandle`
|
|||
## IFluidHandleContext
|
||||
`IFluidHandleContext` describes a routing context (another `IFluidHandleContext`) that has a path to this `IFluidHandleContext`. When creating a Data Store Handle the route context should be the `FluidDataStoreRuntime` which knows how to reach the `FluidDataStore`. Similarly, the `FluidDataStoreRuntime's` route context should be the `ContainerRuntime` which knows how to reach it.
|
||||
|
||||
For more details on Fluid Handles, check this [doc](../../../docs/docs/component-handles.md).
|
||||
For more details on Fluid Handles, check this [doc](../../../content/docs/advanced/handles.md).
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
Contains handshake interfaces for communication between the container runtime layer and the data store runtime layer.
|
||||
|
||||
- `IComponentRuntimeChannel` includes the minimal set of data and functionalities that are needed by the ContainerRuntime to bind and control a ComponentRuntime, including attach, snapshot, op/signal processing, request routes, and connection state notifications.
|
||||
- `IComponentContext` includes data and function provided by the container layer and used by the component layer for information about the container, to send ops and signals, component creation, etc.
|
||||
- Agent/Task related interfaces, since the agent scheduler is included by default by the container layer, and components can make use of it
|
||||
- `IComponentFactory` and `IComponentRegistry` definitions
|
||||
- `IFluidDataStoreRuntimeChannel` includes the minimal set of data and functionalities that are needed by the ContainerRuntime to bind and control a FluidDataStoreRuntime, including attach, snapshot, op/signal processing, request routes, and connection state notifications.
|
||||
- `IFluidDataStoreContext` includes data and function provided by the container layer and used by the data store layer for information about the container, to send ops and signals, data store creation, etc.
|
||||
- Agent/Task related interfaces, since the agent scheduler is included by default by the container layer, and data stores can make use of it
|
||||
- `IFluidDataStoreFactory` and `IFluidDataStoreRegistry` definitions
|
||||
- Common protocol structures that are not related to back-compat between the layer: `IAttachMessage`, `IEnvelop`, `ISignalEnvelop`, `IInboundSignalMessage`.
|
||||
- `IContainerRuntimeBase` is a temporary interface that includes a reduced set of data and functionalities from `IContainerRuntime` that the IComponentRuntimeChannel or component writer will need from `ContainerRuntime`.Eventually, all of the these should be shim by the `IComponentContext`
|
||||
- `IContainerRuntimeBase` is a temporary interface that includes a reduced set of data and functionalities from `IContainerRuntime` that the IFluidDataStoreRuntimeChannel or data store writer will need from `ContainerRuntime`.Eventually, all of the these should be shim by the `IFluidDataStoreContext`
|
||||
|
||||
These interfaces needs to have strong back-compat guaranetee to support dynamic component loading scenario where the ComponentRuntime might be built with different version.
|
||||
These interfaces needs to have strong back-compat guaranetee to support dynamic data store loading scenario where the FluidDataStoreRuntime might be built with different version.
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ Unit tests for DDS fall under three broad categories. The following sections exp
|
|||
|
||||
These are tests that do not require a remote DDS and so doesn't need the DDS to be connected. For example, testing that DDS APIs work correctly, local events are correctly fired, snapshot is generated and loaded correctly, etc.
|
||||
To write a unit test for these scenarios, follow these steps:
|
||||
- Create a `MockComponentRuntime`. The MockComponentRuntime doesn't really do anything and is just used to create the DDS.
|
||||
- Set the `MockComponentRuntime`'s `local` property to `true`. This will make sure that the ops generated by the DDS are not sent out.
|
||||
- Use the `MockComponentRuntime` to create the DDS.
|
||||
- Create a `MockDataStoreRuntime`. The MockDataStoreRuntime doesn't really do anything and is just used to create the DDS.
|
||||
- Set the `MockDataStoreRuntime`'s `local` property to `true`. This will make sure that the ops generated by the DDS are not sent out.
|
||||
- Use the `MockDataStoreRuntime` to create the DDS.
|
||||
|
||||
Examples - [map](..\map\src\test\map.spec.ts), [directory](..\map\src\test\directory.spec.ts), [matrix](..\matrix\test\matrix.spec.ts).
|
||||
|
||||
|
|
@ -20,8 +20,8 @@ Examples - [map](..\map\src\test\map.spec.ts), [directory](..\map\src\test\direc
|
|||
|
||||
These are tests that require a remote DDS and need the DDS to be connected. For example, testing that the op is correctly applied on a remote client, local op is correctly ack'd, remote events are correctly fired, etc.
|
||||
To write a unit test for these scenarios, follow these steps:
|
||||
- Create a `MockComponentRuntime`.
|
||||
- Use the `MockComponentRuntime` to create the DDS.
|
||||
- Create a `MockDataStoreRuntime`.
|
||||
- Use the `MockDataStoreRuntime` to create the DDS.
|
||||
- We need the ability to process messages from multiple DDSes / clients. Create a `MockContainerRuntimeFactory` which stores messages from multiple clients and processes them when required.
|
||||
- Create a `MockContainerRuntime` by calling `createContainerRuntime` on the `MockContainerRuntimeFactory`. `MockContainerRuntime` keeps track of the message and localOpMetadata until it is ack'd.
|
||||
- We need to connect and attach the DDS to an IDeltaConnection so it can submit and process messages. Create a `MockDeltaConnection` by calling `createDeltaConnection` on the `MockContainerRuntime`.
|
||||
|
|
|
|||
|
|
@ -57,11 +57,11 @@ In order to connect to ODSP, the clientID and clientSecret must be set as enviro
|
|||
109 total messages (107 delta storage, 2 initial ws messages, 0 dup)
|
||||
Channel name (Operations only) | Count Bytes
|
||||
----------------------------------------------------------------------------------------------------
|
||||
[defaultComponent]/root (map) | 3 1232
|
||||
[defaultComponent]/0fb26504-369f-4234-ad97-0a303d3ec81f (map) | 0 0
|
||||
[defaultComponent]/74577601-3af5-49a1-9ca5-db5d9ee128a8 (mergeTree) | 20 7450
|
||||
[defaultComponent]/91ac6df2-dda6-409a-b5e3-be84ce9ab138 (map) | 25 11940
|
||||
[defaultComponent]/92ebb388-68a0-4fc2-859e-5c01f12e992d (map) | 0 0
|
||||
[defaultDataStore]/root (map) | 3 1232
|
||||
[defaultDataStore]/0fb26504-369f-4234-ad97-0a303d3ec81f (map) | 0 0
|
||||
[defaultDataStore]/74577601-3af5-49a1-9ca5-db5d9ee128a8 (mergeTree) | 20 7450
|
||||
[defaultDataStore]/91ac6df2-dda6-409a-b5e3-be84ce9ab138 (map) | 25 11940
|
||||
[defaultDataStore]/92ebb388-68a0-4fc2-859e-5c01f12e992d (map) | 0 0
|
||||
----------------------------------------------------------------------------------------------------
|
||||
Total | 48 20622
|
||||
|
||||
|
|
@ -78,18 +78,18 @@ In order to connect to ODSP, the clientID and clientSecret must be set as enviro
|
|||
!CONTAINER!/quorumMembers | 220
|
||||
!CONTAINER!/quorumProposals | 4
|
||||
!CONTAINER!/quorumValues | 184
|
||||
[defaultComponent]/.component | 32
|
||||
[defaultComponent]/0fb26504-369f-4234-ad97-0a303d3ec81f/.attributes | 64
|
||||
[defaultComponent]/0fb26504-369f-4234-ad97-0a303d3ec81f/header | 4
|
||||
[defaultComponent]/74577601-3af5-49a1-9ca5-db5d9ee128a8/.attributes | 72
|
||||
[defaultComponent]/74577601-3af5-49a1-9ca5-db5d9ee128a8/content/header | 448
|
||||
[defaultComponent]/74577601-3af5-49a1-9ca5-db5d9ee128a8/content/catchupOps | 4
|
||||
[defaultComponent]/74577601-3af5-49a1-9ca5-db5d9ee128a8/header | 180
|
||||
[defaultComponent]/91ac6df2-dda6-409a-b5e3-be84ce9ab138/.attributes | 64
|
||||
[defaultComponent]/91ac6df2-dda6-409a-b5e3-be84ce9ab138/header | 168
|
||||
[defaultComponent]/92ebb388-68a0-4fc2-859e-5c01f12e992d/.attributes | 64
|
||||
[defaultComponent]/92ebb388-68a0-4fc2-859e-5c01f12e992d/header | 4
|
||||
[defaultComponent]/root/.attributes | 64
|
||||
[defaultComponent]/root/header | 300
|
||||
[defaultDataStore]/.component | 32
|
||||
[defaultDataStore]/0fb26504-369f-4234-ad97-0a303d3ec81f/.attributes | 64
|
||||
[defaultDataStore]/0fb26504-369f-4234-ad97-0a303d3ec81f/header | 4
|
||||
[defaultDataStore]/74577601-3af5-49a1-9ca5-db5d9ee128a8/.attributes | 72
|
||||
[defaultDataStore]/74577601-3af5-49a1-9ca5-db5d9ee128a8/content/header | 448
|
||||
[defaultDataStore]/74577601-3af5-49a1-9ca5-db5d9ee128a8/content/catchupOps | 4
|
||||
[defaultDataStore]/74577601-3af5-49a1-9ca5-db5d9ee128a8/header | 180
|
||||
[defaultDataStore]/91ac6df2-dda6-409a-b5e3-be84ce9ab138/.attributes | 64
|
||||
[defaultDataStore]/91ac6df2-dda6-409a-b5e3-be84ce9ab138/header | 168
|
||||
[defaultDataStore]/92ebb388-68a0-4fc2-859e-5c01f12e992d/.attributes | 64
|
||||
[defaultDataStore]/92ebb388-68a0-4fc2-859e-5c01f12e992d/header | 4
|
||||
[defaultDataStore]/root/.attributes | 64
|
||||
[defaultDataStore]/root/header | 300
|
||||
----------------------------------------------------------------------------------------------------
|
||||
Total snapshot size | 3048
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@ This directory contains our reference server implementation. [Routerlicious](./r
|
|||
|
||||
[Charts](./charts) Kubernetes charts for some micro-services
|
||||
|
||||
[Gateway](./gateway) Internal landing page for Fluid, hosts Waterpark
|
||||
[Gateway](./gateway) Internal landing page for the Fluid server
|
||||
|
||||
[Gitrest](./gitrest) provides a REST API to a GitHub repository. Its API is based off of GitHub's REST APIs.
|
||||
|
||||
[Gitssh](./gitssh) is a git ssh server client container.
|
||||
|
||||
[Headless-agent](./headless-agent) loads Fluid components on a headless chromium browser.
|
||||
[Headless-agent](./headless-agent) loads Fluid data stores on a headless chromium browser.
|
||||
|
||||
[Historian](./historian) provides a REST API to git repositories. The API is similar to that exposed by GitHub but can be used in local development.
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ For development, you'll also need to give docker access to your drive (Shared Dr
|
|||
* Allocate more RAM
|
||||
|
||||
## Routerlicious for Local Development
|
||||
### With Webpack Dev Server && the Webpack Component Loader (Yo-Fluid Output)
|
||||
### With Webpack Dev Server && the Webpack Fluid Loader (Yo-Fluid Output)
|
||||
|
||||
To use Routerlicious with a Yo-Fluid container, you should start the Routerlicious docker conatiners, and then start the webpack dev server with the docker env command.
|
||||
```
|
||||
|
|
@ -64,5 +64,5 @@ Gateway is an example of a service providing its own Fluid Container host. [Gate
|
|||
|
||||
You can access this loader by using the following URL Schema
|
||||
```
|
||||
https://localhost:3000/loader/fluid/${container-identifier}?chaincode=${component-package-name}@${version}
|
||||
https://localhost:3000/loader/fluid/${container-identifier}?chaincode=${data-store-package-name}@${version}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# headless-agent
|
||||
## Headless Agent
|
||||
|
||||
Loads Fluid components on a headless chromium browser, as opposed to the Node.js runtime.
|
||||
Loads Fluid data stores on a headless chromium browser, as opposed to the Node.js runtime.
|
||||
|
||||
To build
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
# fluid-component-loader
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
Tinylicious is a minimal, self-contained, test implementation of the Fluid Framework service that is much smaller (tinier!) than Routerlicious, our reference implementation of the service.
|
||||
|
||||
## What is this for?
|
||||
Tinylicious includes most of the basic features needed to **test** components and containers. While we use the [Webpack Component Loader](../../packages/tools/webpack-fluid-loader)'s in browser service for our much of our component and container development, Tinylicious offers some advantages because it's a standalone process. For instance, testing a Fluid Container from 2+ simultaneously connected clients can be easier using Tinylicious.
|
||||
Tinylicious includes most of the basic features needed to **test** data stores and containers. While we use the [Webpack Component Loader](../../packages/tools/webpack-fluid-loader)'s in browser service for our much of our data store and container development, Tinylicious offers some advantages because it's a standalone process. For instance, testing a Fluid Container from 2+ simultaneously connected clients can be easier using Tinylicious.
|
||||
|
||||
If you're looking for a reference implementation of the Fluid service, don't look here! Go check out [Routerlicious](../routerlicious).
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче