diff --git a/azure/packages/azure-client/src/test/types/validateAzureClientPrevious.generated.ts b/azure/packages/azure-client/src/test/types/validateAzureClientPrevious.generated.ts index 4f719856445f..45d895437473 100644 --- a/azure/packages/azure-client/src/test/types/validateAzureClientPrevious.generated.ts +++ b/azure/packages/azure-client/src/test/types/validateAzureClientPrevious.generated.ts @@ -421,54 +421,6 @@ declare function use_old_InterfaceDeclaration_ITokenClaims( use_old_InterfaceDeclaration_ITokenClaims( get_current_InterfaceDeclaration_ITokenClaims()); -/* -* Validate forward compat by using old type in place of current type -* If breaking change required, add in package.json under typeValidation.broken: -* "InterfaceDeclaration_ITokenProvider": {"forwardCompat": false} -*/ -declare function get_old_InterfaceDeclaration_ITokenProvider(): - TypeOnly; -declare function use_current_InterfaceDeclaration_ITokenProvider( - use: TypeOnly); -use_current_InterfaceDeclaration_ITokenProvider( - get_old_InterfaceDeclaration_ITokenProvider()); - -/* -* Validate back compat by using current type in place of old type -* If breaking change required, add in package.json under typeValidation.broken: -* "InterfaceDeclaration_ITokenProvider": {"backCompat": false} -*/ -declare function get_current_InterfaceDeclaration_ITokenProvider(): - TypeOnly; -declare function use_old_InterfaceDeclaration_ITokenProvider( - use: TypeOnly); -use_old_InterfaceDeclaration_ITokenProvider( - get_current_InterfaceDeclaration_ITokenProvider()); - -/* -* Validate forward compat by using old type in place of current type -* If breaking change required, add in package.json under typeValidation.broken: -* "InterfaceDeclaration_ITokenResponse": {"forwardCompat": false} -*/ -declare function get_old_InterfaceDeclaration_ITokenResponse(): - TypeOnly; -declare function use_current_InterfaceDeclaration_ITokenResponse( - use: TypeOnly); -use_current_InterfaceDeclaration_ITokenResponse( - get_old_InterfaceDeclaration_ITokenResponse()); - -/* -* Validate back compat by using current type in place of old type -* If breaking change required, add in package.json under typeValidation.broken: -* "InterfaceDeclaration_ITokenResponse": {"backCompat": false} -*/ -declare function get_current_InterfaceDeclaration_ITokenResponse(): - TypeOnly; -declare function use_old_InterfaceDeclaration_ITokenResponse( - use: TypeOnly); -use_old_InterfaceDeclaration_ITokenResponse( - get_current_InterfaceDeclaration_ITokenResponse()); - /* * Validate forward compat by using old type in place of current type * If breaking change required, add in package.json under typeValidation.broken: diff --git a/examples/data-objects/shared-tree-demo/package.json b/examples/data-objects/shared-tree-demo/package.json index cdb5d52ea5e0..c85f849ddffb 100644 --- a/examples/data-objects/shared-tree-demo/package.json +++ b/examples/data-objects/shared-tree-demo/package.json @@ -16,19 +16,20 @@ }, "dependencies": { "@fluidframework/telemetry-utils": "workspace:~", - "@fluid-experimental/data-objects": "2.0.0-dev.4.4.0.161322", - "@fluid-experimental/tree-react-api": "2.0.0-dev.4.4.0.161322", - "@fluid-experimental/tree2": "2.0.0-dev.4.4.0.161322", - "@fluidframework/azure-client": "2.0.0-dev.4.4.0.161322", - "@fluidframework/counter": "2.0.0-dev.4.4.0.161322", - "@fluidframework/test-client-utils": "2.0.0-dev.4.4.0.161322", + "@fluid-experimental/data-objects": "workspace:~", + "@fluid-experimental/tree-react-api": "workspace:~", + "@fluid-experimental/tree2": "workspace:~", + "@fluidframework/azure-client": "workspace:~", + "@fluidframework/counter": "workspace:~", + "@fluidframework/test-client-utils": "workspace:~", "@mdi/font": "^6.9.96", "@mdi/js": "^6.9.96", "@mdi/react": "^1.6.1", "@types/react": "^17.0.50", "@types/react-dom": "^17.0.17", + "axios": "^1.4.0", "dotenv": "^16.0.2", - "fluid-framework": "2.0.0-dev.4.4.0.161322", + "fluid-framework": "workspace:~", "guid-typescript": "^1.0.9", "hashids": "^2.2.10", "randomcolor": "^0.6.2", @@ -37,6 +38,7 @@ }, "devDependencies": { "@fluidframework/telemetry-utils": "workspace:~", + "@fluid-experimental/devtools": "workspace:~", "@types/debug": "^4.1.7", "@types/node": "^17.0.45", "@types/randomcolor": "^0.5.6", diff --git a/examples/data-objects/shared-tree-demo/src/fluid.ts b/examples/data-objects/shared-tree-demo/src/fluid.ts index 777654e24572..06942b6c289e 100644 --- a/examples/data-objects/shared-tree-demo/src/fluid.ts +++ b/examples/data-objects/shared-tree-demo/src/fluid.ts @@ -6,7 +6,7 @@ import { AzureClientProps, AzureMember, ITokenProvider, - ITokenResponse + ITokenResponse, } from '@fluidframework/azure-client'; import { generateTestUser, @@ -17,9 +17,9 @@ import { Signaler } from '@fluid-experimental/data-objects'; import { SharedCounter } from '@fluidframework/counter'; import { SharedTreeFactory } from '@fluid-experimental/tree2'; -import axios from "axios"; -// import { DevtoolsLogger, initializeDevtools } from "@fluid-experimental/devtools"; -// import { TelemetryNullLogger } from "@fluidframework/telemetry-utils"; +import axios from 'axios'; +import { DevtoolsLogger, initializeDevtools } from '@fluid-experimental/devtools'; +import { TelemetryNullLogger } from '@fluidframework/telemetry-utils'; /** * Token Provider implementation for connecting to an Azure Function endpoint for @@ -33,22 +33,34 @@ export class AzureFunctionTokenProvider implements ITokenProvider { */ constructor( private readonly azFunctionUrl: string, - private readonly user?: Pick, - ) { } - - public async fetchOrdererToken(tenantId: string, documentId?: string): Promise { + private readonly user?: Pick< + AzureMember, + 'userId' | 'userName' | 'additionalDetails' + > + ) {} + + public async fetchOrdererToken( + tenantId: string, + documentId?: string + ): Promise { return { jwt: await this.getToken(tenantId, documentId), }; } - public async fetchStorageToken(tenantId: string, documentId: string): Promise { + public async fetchStorageToken( + tenantId: string, + documentId: string + ): Promise { return { jwt: await this.getToken(tenantId, documentId), }; } - private async getToken(tenantId: string, documentId: string | undefined): Promise { + private async getToken( + tenantId: string, + documentId: string | undefined + ): Promise { const response = await axios.get(this.azFunctionUrl, { params: { tenantId, @@ -97,18 +109,17 @@ const localConnectionConfig: AzureLocalConnectionConfig = { endpoint: 'http://localhost:7070', }; -const connectionConfig: AzureRemoteConnectionConfig | AzureLocalConnectionConfig = useAzure - ? remoteConnectionConfig - : localConnectionConfig; +const connectionConfig: AzureRemoteConnectionConfig | AzureLocalConnectionConfig = + useAzure ? remoteConnectionConfig : localConnectionConfig; -// const baseLogger = new TelemetryNullLogger(); +const baseLogger = new TelemetryNullLogger(); // Wrap telemetry logger for use with Devtools -// const devtoolsLogger = new DevtoolsLogger(baseLogger); +const devtoolsLogger = new DevtoolsLogger(baseLogger); const clientProps: AzureClientProps = { connection: connectionConfig, - // logger: devtoolsLogger + logger: devtoolsLogger, }; const client = new AzureClient(clientProps); @@ -120,7 +131,7 @@ const containerSchema: ContainerSchema = { initialObjects: { signalManager: Signaler, maxZOrder: SharedCounter, - tree: MySharedTree + tree: MySharedTree, }, }; @@ -165,6 +176,16 @@ export const loadFluidData = async (): Promise<{ ({ container, services } = await client.getContainer(id, containerSchema)); } + initializeDevtools({ + logger: devtoolsLogger, + initialContainers: [ + { + container, + containerId: id, + containerNickname: 'Shared Tree Demo Container', + }, + ], + }); + return { container, services }; }; - \ No newline at end of file diff --git a/examples/data-objects/shared-tree-demo/src/index.css b/examples/data-objects/shared-tree-demo/src/index.css index b3d26d83d400..19b395ea93d1 100644 --- a/examples/data-objects/shared-tree-demo/src/index.css +++ b/examples/data-objects/shared-tree-demo/src/index.css @@ -1,24 +1,23 @@ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - } - - code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; - } - - div#main { +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} + +div#main { display: flex; flex-direction: column; height: 100vh; - } - - .pile { +} + +.pile { display: flex; flex-direction: column; width: 300px; @@ -26,29 +25,29 @@ body { border-radius: 4px; margin: 10px; background-color: #fcffccb8; - } - - .pileTitle { +} + +.pileTitle { padding: 10px; background-color: #dfe3e6; border-bottom: 1px solid #c1c7cd; border-radius: 4px 4px 0 0; - } - - .pileTitle:focus { +} + +.pileTitle:focus { outline: none; cursor: auto; - } - - .card { +} + +.card { background-color: #ffffff; padding: 10px; margin-bottom: 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } - - button#addPile { +} + +button#addPile { display: inline-block; padding: 12px 24px; font-size: 16px; @@ -56,7 +55,7 @@ body { text-align: center; text-decoration: none; border-radius: 4px; - background-color: #4CAF50; + background-color: #4caf50; color: #ffffff; border: none; transition: background-color 0.3s ease; @@ -64,36 +63,36 @@ body { width: 150px; height: 50px; margin-top: 10px; - } - - button:hover#addPile { +} + +button:hover#addPile { background-color: #45a049; - } - - button:active#addPile { +} + +button:active#addPile { background-color: #3e8e41; - } - - button:focus#addPile { +} + +button:focus#addPile { outline: none; - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4CAF50; - } - - div#piles { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4caf50; +} + +div#piles { display: flex; flex-direction: row; flex-wrap: wrap; grid-gap: 10px; - } - - .fab { +} + +.fab { position: fixed; bottom: 20px; right: 20px; z-index: 999; - } - - .fab-icon { +} + +.fab-icon { display: inline-block; width: 50px; height: 50px; @@ -105,42 +104,42 @@ body { font-size: 24px; text-decoration: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); - } - - .fab-icon:hover { +} + +.fab-icon:hover { background-color: #45b409; - } - - .note { +} + +.note { max-width: 300px; align-self: center; height: auto; padding: 10px; margin: 10px; - background-color: #FFFFCC; - border: 1px solid #FFCC66; + background-color: #ffffcc; + border: 1px solid #ffcc66; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); - } - - .note textarea { +} + +.note textarea { border: none; margin-bottom: 10px; font-size: 16px; padding: 5px; outline: none; resize: none; - } - - .note button { - background-color: #FF0000; +} + +.note button { + background-color: #ff0000; color: white; border: none; font-size: 14px; padding: 5px 10px; cursor: pointer; margin-bottom: 10px; - } - - .note button:focus { +} + +.note button:focus { outline: none; - } \ No newline at end of file +} diff --git a/examples/data-objects/shared-tree-demo/src/index.tsx b/examples/data-objects/shared-tree-demo/src/index.tsx index f502516fa134..8286f3e19613 100644 --- a/examples/data-objects/shared-tree-demo/src/index.tsx +++ b/examples/data-objects/shared-tree-demo/src/index.tsx @@ -5,7 +5,6 @@ import { ISharedTree } from '@fluid-experimental/tree2'; import { App } from './ux'; async function main() { - // create the root element for React const root = document.createElement('div'); root.id = 'root'; diff --git a/examples/data-objects/shared-tree-demo/src/schema.ts b/examples/data-objects/shared-tree-demo/src/schema.ts index 903e42016b26..18d237dcbebe 100644 --- a/examples/data-objects/shared-tree-demo/src/schema.ts +++ b/examples/data-objects/shared-tree-demo/src/schema.ts @@ -1,31 +1,36 @@ -import { FieldKinds, SchemaAware, SchemaBuilder, ValueSchema } from "@fluid-experimental/tree2"; +import { + FieldKinds, + SchemaAware, + SchemaBuilder, + ValueSchema, +} from '@fluid-experimental/tree2'; -const builder = new SchemaBuilder("Demo App"); +const builder = new SchemaBuilder('Demo App'); -export const float64 = builder.primitive("number", ValueSchema.Number); -export const string = builder.primitive("string", ValueSchema.String); -export const boolean = builder.primitive("boolean", ValueSchema.Boolean); +export const float64 = builder.primitive('number', ValueSchema.Number); +export const string = builder.primitive('string', ValueSchema.String); +export const boolean = builder.primitive('boolean', ValueSchema.Boolean); -export const noteSchema = builder.object("demo:note", { - local: { - text: SchemaBuilder.field(FieldKinds.value, string), - author: SchemaBuilder.field(FieldKinds.optional, string), - users: SchemaBuilder.field(FieldKinds.sequence, string) - }, +export const noteSchema = builder.object('demo:note', { + local: { + text: SchemaBuilder.field(FieldKinds.value, string), + author: SchemaBuilder.field(FieldKinds.optional, string), + users: SchemaBuilder.field(FieldKinds.sequence, string), + }, }); -export const pileSchema = builder.object("demo:pile", { - local: { - name: SchemaBuilder.field(FieldKinds.value, string), - notes: SchemaBuilder.field(FieldKinds.sequence, noteSchema) - }, +export const pileSchema = builder.object('demo:pile', { + local: { + name: SchemaBuilder.field(FieldKinds.value, string), + notes: SchemaBuilder.field(FieldKinds.sequence, noteSchema), + }, }); -export const appSchema = builder.object("demo:app", { - local: { - piles: SchemaBuilder.field(FieldKinds.sequence, pileSchema) - } -}) +export const appSchema = builder.object('demo:app', { + local: { + piles: SchemaBuilder.field(FieldKinds.sequence, pileSchema), + }, +}); export const rootField = SchemaBuilder.field(FieldKinds.value, appSchema); export const schema = builder.intoDocumentSchema(rootField); diff --git a/examples/data-objects/shared-tree-demo/src/ux.tsx b/examples/data-objects/shared-tree-demo/src/ux.tsx index 573c4e2fc975..12b0dbefbe81 100644 --- a/examples/data-objects/shared-tree-demo/src/ux.tsx +++ b/examples/data-objects/shared-tree-demo/src/ux.tsx @@ -1,5 +1,9 @@ import React from 'react'; -import { AllowedUpdateType, ISharedTree, cursorForTypedTreeData } from '@fluid-experimental/tree2'; +import { + AllowedUpdateType, + ISharedTree, + cursorForTypedTreeData, +} from '@fluid-experimental/tree2'; import { useTree } from '@fluid-experimental/tree-react-api'; import { App, Pile, Note, schema, noteSchema, pileSchema } from './schema'; import './index.css'; @@ -9,17 +13,15 @@ const schemaPolicy = { initialTree: { piles: [ { - name: "default", - notes: [{ text: "some text", author: "some author", users: [] }] - } - ] + name: 'default', + notes: [{ text: 'some text', author: 'some author', users: [] }], + }, + ], }, allowedSchemaModifications: AllowedUpdateType.SchemaCompatible, }; -export function App(props: { - tree: ISharedTree -}): JSX.Element { +export function App(props: { tree: ISharedTree }): JSX.Element { const data = useTree(props.tree, schemaPolicy); const root = data[0] as App; @@ -33,15 +35,17 @@ export function App(props: {
{pilesArray} - +
); function addPile() { const pile = { - name: "New Pile", - notes: [] + name: 'New Pile', + notes: [], }; const cursor = cursorForTypedTreeData(schema, pileSchema, pile); @@ -49,30 +53,22 @@ export function App(props: { } } -function Pile(props: { - pile: Pile -}): JSX.Element { - +function Pile(props: { pile: Pile }): JSX.Element { return ( - -
props.pile.name = event.target.value} + onChange={(event) => (props.pile.name = event.target.value)} />
- ) + ); } -function Notes(props: { - pile: Pile; -}): JSX.Element { - +function Notes(props: { pile: Pile }): JSX.Element { const notes = props.pile.notes; let index = 0; @@ -81,44 +77,32 @@ function Notes(props: { notesArray.push(); } - return ( -
- {notesArray} -
- ) + return
{notesArray}
; } -function Note(props: { - note: Note -}): JSX.Element { - +function Note(props: { note: Note }): JSX.Element { return (