@microsoft/live-share-react 2.0.0-internal.2 → 2.0.0-internal.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (252) hide show
  1. package/LICENSE +64 -61
  2. package/README.md +175 -164
  3. package/bin/esm/index.d.ts +7 -0
  4. package/bin/esm/index.d.ts.map +1 -0
  5. package/bin/esm/index.js +7 -0
  6. package/bin/esm/index.js.map +1 -0
  7. package/bin/esm/interfaces/LiveInterfaceExtensions.d.ts.map +1 -0
  8. package/bin/esm/interfaces/LiveInterfaceExtensions.js.map +1 -0
  9. package/bin/esm/interfaces/index.d.ts +2 -0
  10. package/bin/esm/interfaces/index.d.ts.map +1 -0
  11. package/bin/esm/interfaces/index.js +2 -0
  12. package/bin/esm/interfaces/index.js.map +1 -0
  13. package/bin/esm/internal/errors.d.ts.map +1 -0
  14. package/bin/esm/internal/errors.js.map +1 -0
  15. package/bin/esm/internal/index.d.ts +3 -0
  16. package/bin/esm/internal/index.d.ts.map +1 -0
  17. package/bin/esm/internal/index.js +3 -0
  18. package/bin/esm/internal/index.js.map +1 -0
  19. package/bin/{internal → esm/internal}/type-guards.d.ts +1 -1
  20. package/bin/esm/internal/type-guards.d.ts.map +1 -0
  21. package/bin/esm/internal/type-guards.js.map +1 -0
  22. package/bin/esm/live-hooks/index.d.ts +8 -0
  23. package/bin/esm/live-hooks/index.d.ts.map +1 -0
  24. package/bin/esm/live-hooks/index.js +8 -0
  25. package/bin/esm/live-hooks/index.js.map +1 -0
  26. package/bin/esm/live-hooks/useLiveCanvas.d.ts +80 -0
  27. package/bin/esm/live-hooks/useLiveCanvas.d.ts.map +1 -0
  28. package/bin/esm/live-hooks/useLiveCanvas.js +237 -0
  29. package/bin/esm/live-hooks/useLiveCanvas.js.map +1 -0
  30. package/bin/{live-hooks → esm/live-hooks}/useLiveEvent.d.ts +37 -1
  31. package/bin/esm/live-hooks/useLiveEvent.d.ts.map +1 -0
  32. package/bin/{live-hooks → esm/live-hooks}/useLiveEvent.js +45 -18
  33. package/bin/esm/live-hooks/useLiveEvent.js.map +1 -0
  34. package/bin/esm/live-hooks/useLiveFollowMode.d.ts +163 -0
  35. package/bin/esm/live-hooks/useLiveFollowMode.d.ts.map +1 -0
  36. package/bin/{live-hooks → esm/live-hooks}/useLiveFollowMode.js +173 -39
  37. package/bin/esm/live-hooks/useLiveFollowMode.js.map +1 -0
  38. package/bin/esm/live-hooks/useLivePresence.d.ts +76 -0
  39. package/bin/esm/live-hooks/useLivePresence.d.ts.map +1 -0
  40. package/bin/{live-hooks → esm/live-hooks}/useLivePresence.js +74 -25
  41. package/bin/esm/live-hooks/useLivePresence.js.map +1 -0
  42. package/bin/{live-hooks → esm/live-hooks}/useLiveState.d.ts +46 -1
  43. package/bin/esm/live-hooks/useLiveState.d.ts.map +1 -0
  44. package/bin/{live-hooks → esm/live-hooks}/useLiveState.js +58 -18
  45. package/bin/esm/live-hooks/useLiveState.js.map +1 -0
  46. package/bin/{live-hooks → esm/live-hooks}/useLiveTimer.d.ts +56 -1
  47. package/bin/esm/live-hooks/useLiveTimer.d.ts.map +1 -0
  48. package/bin/{live-hooks → esm/live-hooks}/useLiveTimer.js +80 -34
  49. package/bin/esm/live-hooks/useLiveTimer.js.map +1 -0
  50. package/bin/esm/live-hooks/useMediaSynchronizer.d.ts +86 -0
  51. package/bin/esm/live-hooks/useMediaSynchronizer.d.ts.map +1 -0
  52. package/bin/{live-hooks → esm/live-hooks}/useMediaSynchronizer.js +89 -37
  53. package/bin/esm/live-hooks/useMediaSynchronizer.js.map +1 -0
  54. package/bin/{providers → esm/providers}/AzureProvider.d.ts +9 -9
  55. package/bin/esm/providers/AzureProvider.d.ts.map +1 -0
  56. package/bin/{providers → esm/providers}/AzureProvider.js +28 -33
  57. package/bin/esm/providers/AzureProvider.js.map +1 -0
  58. package/bin/{providers → esm/providers}/LiveShareProvider.d.ts +106 -4
  59. package/bin/esm/providers/LiveShareProvider.d.ts.map +1 -0
  60. package/bin/esm/providers/LiveShareProvider.js +196 -0
  61. package/bin/esm/providers/LiveShareProvider.js.map +1 -0
  62. package/bin/esm/providers/index.d.ts +3 -0
  63. package/bin/esm/providers/index.d.ts.map +1 -0
  64. package/bin/esm/providers/index.js +3 -0
  65. package/bin/esm/providers/index.js.map +1 -0
  66. package/bin/esm/shared-hooks/index.d.ts +7 -0
  67. package/bin/esm/shared-hooks/index.d.ts.map +1 -0
  68. package/bin/esm/shared-hooks/index.js +7 -0
  69. package/bin/esm/shared-hooks/index.js.map +1 -0
  70. package/bin/esm/shared-hooks/internals/tree-node-constants.d.ts +3 -0
  71. package/bin/esm/shared-hooks/internals/tree-node-constants.d.ts.map +1 -0
  72. package/bin/esm/shared-hooks/internals/tree-node-constants.js +3 -0
  73. package/bin/esm/shared-hooks/internals/tree-node-constants.js.map +1 -0
  74. package/bin/esm/shared-hooks/internals/tree-node-types.d.ts +10 -0
  75. package/bin/esm/shared-hooks/internals/tree-node-types.d.ts.map +1 -0
  76. package/bin/esm/shared-hooks/internals/tree-node-types.js +18 -0
  77. package/bin/esm/shared-hooks/internals/tree-node-types.js.map +1 -0
  78. package/bin/esm/shared-hooks/internals/tree-node-utils.d.ts +33 -0
  79. package/bin/esm/shared-hooks/internals/tree-node-utils.d.ts.map +1 -0
  80. package/bin/esm/shared-hooks/internals/tree-node-utils.js +186 -0
  81. package/bin/esm/shared-hooks/internals/tree-node-utils.js.map +1 -0
  82. package/bin/{shared-hooks → esm/shared-hooks}/useDynamicDDS.d.ts +4 -4
  83. package/bin/esm/shared-hooks/useDynamicDDS.d.ts.map +1 -0
  84. package/bin/{shared-hooks → esm/shared-hooks}/useDynamicDDS.js +22 -22
  85. package/bin/esm/shared-hooks/useDynamicDDS.js.map +1 -0
  86. package/bin/{shared-hooks → esm/shared-hooks}/useSharedMap.d.ts +4 -2
  87. package/bin/esm/shared-hooks/useSharedMap.d.ts.map +1 -0
  88. package/bin/{shared-hooks → esm/shared-hooks}/useSharedMap.js +28 -14
  89. package/bin/esm/shared-hooks/useSharedMap.js.map +1 -0
  90. package/bin/{shared-hooks → esm/shared-hooks}/useSharedState.d.ts +1 -1
  91. package/bin/esm/shared-hooks/useSharedState.d.ts.map +1 -0
  92. package/bin/{shared-hooks → esm/shared-hooks}/useSharedState.js +2 -2
  93. package/bin/esm/shared-hooks/useSharedState.js.map +1 -0
  94. package/bin/{shared-hooks → esm/shared-hooks}/useSharedStateRegistry.d.ts +1 -1
  95. package/bin/esm/shared-hooks/useSharedStateRegistry.d.ts.map +1 -0
  96. package/bin/{shared-hooks → esm/shared-hooks}/useSharedStateRegistry.js +35 -24
  97. package/bin/esm/shared-hooks/useSharedStateRegistry.js.map +1 -0
  98. package/bin/esm/shared-hooks/useSharedTree.d.ts +57 -0
  99. package/bin/esm/shared-hooks/useSharedTree.d.ts.map +1 -0
  100. package/bin/esm/shared-hooks/useSharedTree.js +117 -0
  101. package/bin/esm/shared-hooks/useSharedTree.js.map +1 -0
  102. package/bin/esm/shared-hooks/useTreeNode.d.ts +96 -0
  103. package/bin/esm/shared-hooks/useTreeNode.d.ts.map +1 -0
  104. package/bin/esm/shared-hooks/useTreeNode.js +132 -0
  105. package/bin/esm/shared-hooks/useTreeNode.js.map +1 -0
  106. package/bin/{types → esm/types}/ActionTypes.d.ts +7 -7
  107. package/bin/esm/types/ActionTypes.d.ts.map +1 -0
  108. package/bin/esm/types/ActionTypes.js.map +1 -0
  109. package/bin/esm/types/FluidMap.d.ts +151 -0
  110. package/bin/esm/types/FluidMap.d.ts.map +1 -0
  111. package/bin/esm/types/FluidMap.js +24 -0
  112. package/bin/esm/types/FluidMap.js.map +1 -0
  113. package/bin/esm/types/PropTypes.d.ts +56 -0
  114. package/bin/esm/types/PropTypes.d.ts.map +1 -0
  115. package/bin/esm/types/PropTypes.js.map +1 -0
  116. package/bin/{types → esm/types}/ResultTypes.d.ts +62 -18
  117. package/bin/esm/types/ResultTypes.d.ts.map +1 -0
  118. package/bin/esm/types/ResultTypes.js.map +1 -0
  119. package/bin/esm/types/index.d.ts +4 -0
  120. package/bin/esm/types/index.d.ts.map +1 -0
  121. package/bin/esm/types/index.js +4 -0
  122. package/bin/esm/types/index.js.map +1 -0
  123. package/bin/esm/utils/index.d.ts +2 -0
  124. package/bin/esm/utils/index.d.ts.map +1 -0
  125. package/bin/esm/utils/index.js +2 -0
  126. package/bin/esm/utils/index.js.map +1 -0
  127. package/bin/esm/utils/type-check.d.ts.map +1 -0
  128. package/bin/{utils → esm/utils}/type-check.js +1 -1
  129. package/bin/esm/utils/type-check.js.map +1 -0
  130. package/package.json +51 -47
  131. package/src/index.ts +6 -6
  132. package/src/interfaces/index.ts +1 -1
  133. package/src/internal/index.ts +2 -2
  134. package/src/internal/type-guards.ts +1 -1
  135. package/src/live-hooks/index.ts +7 -7
  136. package/src/live-hooks/useLiveCanvas.ts +154 -82
  137. package/src/live-hooks/useLiveEvent.ts +43 -7
  138. package/src/live-hooks/useLiveFollowMode.ts +149 -6
  139. package/src/live-hooks/useLivePresence.ts +80 -17
  140. package/src/live-hooks/useLiveState.ts +54 -6
  141. package/src/live-hooks/useLiveTimer.ts +59 -4
  142. package/src/live-hooks/useMediaSynchronizer.ts +71 -6
  143. package/src/providers/AzureProvider.tsx +21 -21
  144. package/src/providers/LiveShareProvider.tsx +115 -13
  145. package/src/providers/index.ts +2 -2
  146. package/src/shared-hooks/index.ts +6 -4
  147. package/src/shared-hooks/internals/tree-node-constants.ts +2 -0
  148. package/src/shared-hooks/internals/tree-node-types.ts +26 -0
  149. package/src/shared-hooks/internals/tree-node-utils.ts +269 -0
  150. package/src/shared-hooks/useDynamicDDS.ts +28 -17
  151. package/src/shared-hooks/useSharedMap.ts +42 -17
  152. package/src/shared-hooks/useSharedState.ts +6 -3
  153. package/src/shared-hooks/useSharedStateRegistry.ts +44 -22
  154. package/src/shared-hooks/useSharedTree.ts +144 -0
  155. package/src/shared-hooks/useTreeNode.ts +147 -0
  156. package/src/types/ActionTypes.ts +13 -9
  157. package/src/types/FluidMap.ts +169 -0
  158. package/src/types/PropTypes.ts +57 -0
  159. package/src/types/ResultTypes.ts +88 -17
  160. package/src/types/index.ts +3 -3
  161. package/src/utils/index.ts +1 -1
  162. package/tsconfig.json +64 -70
  163. package/.nycrc.json +0 -10
  164. package/bin/index.d.ts +0 -7
  165. package/bin/index.d.ts.map +0 -1
  166. package/bin/index.js +0 -7
  167. package/bin/index.js.map +0 -1
  168. package/bin/interfaces/LiveInterfaceExtensions.d.ts.map +0 -1
  169. package/bin/interfaces/LiveInterfaceExtensions.js.map +0 -1
  170. package/bin/interfaces/index.d.ts +0 -2
  171. package/bin/interfaces/index.d.ts.map +0 -1
  172. package/bin/interfaces/index.js +0 -2
  173. package/bin/interfaces/index.js.map +0 -1
  174. package/bin/internal/errors.d.ts.map +0 -1
  175. package/bin/internal/errors.js.map +0 -1
  176. package/bin/internal/index.d.ts +0 -3
  177. package/bin/internal/index.d.ts.map +0 -1
  178. package/bin/internal/index.js +0 -3
  179. package/bin/internal/index.js.map +0 -1
  180. package/bin/internal/type-guards.d.ts.map +0 -1
  181. package/bin/internal/type-guards.js.map +0 -1
  182. package/bin/live-hooks/index.d.ts +0 -8
  183. package/bin/live-hooks/index.d.ts.map +0 -1
  184. package/bin/live-hooks/index.js +0 -8
  185. package/bin/live-hooks/index.js.map +0 -1
  186. package/bin/live-hooks/useLiveCanvas.d.ts +0 -29
  187. package/bin/live-hooks/useLiveCanvas.d.ts.map +0 -1
  188. package/bin/live-hooks/useLiveCanvas.js +0 -160
  189. package/bin/live-hooks/useLiveCanvas.js.map +0 -1
  190. package/bin/live-hooks/useLiveEvent.d.ts.map +0 -1
  191. package/bin/live-hooks/useLiveEvent.js.map +0 -1
  192. package/bin/live-hooks/useLiveFollowMode.d.ts +0 -24
  193. package/bin/live-hooks/useLiveFollowMode.d.ts.map +0 -1
  194. package/bin/live-hooks/useLiveFollowMode.js.map +0 -1
  195. package/bin/live-hooks/useLivePresence.d.ts +0 -26
  196. package/bin/live-hooks/useLivePresence.d.ts.map +0 -1
  197. package/bin/live-hooks/useLivePresence.js.map +0 -1
  198. package/bin/live-hooks/useLiveState.d.ts.map +0 -1
  199. package/bin/live-hooks/useLiveState.js.map +0 -1
  200. package/bin/live-hooks/useLiveTimer.d.ts.map +0 -1
  201. package/bin/live-hooks/useLiveTimer.js.map +0 -1
  202. package/bin/live-hooks/useMediaSynchronizer.d.ts +0 -25
  203. package/bin/live-hooks/useMediaSynchronizer.d.ts.map +0 -1
  204. package/bin/live-hooks/useMediaSynchronizer.js.map +0 -1
  205. package/bin/providers/AzureProvider.d.ts.map +0 -1
  206. package/bin/providers/AzureProvider.js.map +0 -1
  207. package/bin/providers/LiveShareProvider.d.ts.map +0 -1
  208. package/bin/providers/LiveShareProvider.js +0 -95
  209. package/bin/providers/LiveShareProvider.js.map +0 -1
  210. package/bin/providers/index.d.ts +0 -3
  211. package/bin/providers/index.d.ts.map +0 -1
  212. package/bin/providers/index.js +0 -3
  213. package/bin/providers/index.js.map +0 -1
  214. package/bin/shared-hooks/index.d.ts +0 -5
  215. package/bin/shared-hooks/index.d.ts.map +0 -1
  216. package/bin/shared-hooks/index.js +0 -5
  217. package/bin/shared-hooks/index.js.map +0 -1
  218. package/bin/shared-hooks/useDynamicDDS.d.ts.map +0 -1
  219. package/bin/shared-hooks/useDynamicDDS.js.map +0 -1
  220. package/bin/shared-hooks/useSharedMap.d.ts.map +0 -1
  221. package/bin/shared-hooks/useSharedMap.js.map +0 -1
  222. package/bin/shared-hooks/useSharedState.d.ts.map +0 -1
  223. package/bin/shared-hooks/useSharedState.js.map +0 -1
  224. package/bin/shared-hooks/useSharedStateRegistry.d.ts.map +0 -1
  225. package/bin/shared-hooks/useSharedStateRegistry.js.map +0 -1
  226. package/bin/types/ActionTypes.d.ts.map +0 -1
  227. package/bin/types/ActionTypes.js.map +0 -1
  228. package/bin/types/PropTypes.d.ts +0 -8
  229. package/bin/types/PropTypes.d.ts.map +0 -1
  230. package/bin/types/PropTypes.js.map +0 -1
  231. package/bin/types/ResultTypes.d.ts.map +0 -1
  232. package/bin/types/ResultTypes.js.map +0 -1
  233. package/bin/types/index.d.ts +0 -4
  234. package/bin/types/index.d.ts.map +0 -1
  235. package/bin/types/index.js +0 -4
  236. package/bin/types/index.js.map +0 -1
  237. package/bin/utils/index.d.ts +0 -2
  238. package/bin/utils/index.d.ts.map +0 -1
  239. package/bin/utils/index.js +0 -2
  240. package/bin/utils/index.js.map +0 -1
  241. package/bin/utils/type-check.d.ts.map +0 -1
  242. package/bin/utils/type-check.js.map +0 -1
  243. package/tsconfig.build.json +0 -6
  244. /package/bin/{interfaces → esm/interfaces}/LiveInterfaceExtensions.d.ts +0 -0
  245. /package/bin/{interfaces → esm/interfaces}/LiveInterfaceExtensions.js +0 -0
  246. /package/bin/{internal → esm/internal}/errors.d.ts +0 -0
  247. /package/bin/{internal → esm/internal}/errors.js +0 -0
  248. /package/bin/{internal → esm/internal}/type-guards.js +0 -0
  249. /package/bin/{types → esm/types}/ActionTypes.js +0 -0
  250. /package/bin/{types → esm/types}/PropTypes.js +0 -0
  251. /package/bin/{types → esm/types}/ResultTypes.js +0 -0
  252. /package/bin/{utils → esm/utils}/type-check.d.ts +0 -0
package/README.md CHANGED
@@ -14,32 +14,29 @@ import { LiveShareHost } from "@microsoft/teams-js";
14
14
  const host = LiveShareHost.create();
15
15
 
16
16
  export function LiveShareApp() {
17
- // Call app.initialize() from teams-js before rendering LiveShareProvider
17
+ // Call app.initialize() from teams-js before rendering LiveShareProvider
18
18
 
19
- return (
20
- <LiveShareProvider
21
- joinOnLoad={true}
22
- host={host}
23
- >
24
- <SharedCheckbox />
25
- </LiveShareProvider>
26
- );
19
+ return (
20
+ <LiveShareProvider joinOnLoad={true} host={host}>
21
+ <SharedCheckbox />
22
+ </LiveShareProvider>
23
+ );
27
24
  }
28
25
 
29
26
  // SharedCheckbox.jsx
30
27
  import { useSharedState } from "@microsoft/live-share-react";
31
28
 
32
29
  export function SharedCheckbox() {
33
- const [checked, setChecked] = useSharedState("MY-UNIQUE-ID", false);
34
- return (
35
- <input
36
- type="checkbox"
37
- checked={checked}
38
- onChange={() => {
39
- setChecked(!checked);
40
- }}
41
- />
42
- );
30
+ const [checked, setChecked] = useSharedState("MY-UNIQUE-ID", false);
31
+ return (
32
+ <input
33
+ type="checkbox"
34
+ checked={checked}
35
+ onChange={() => {
36
+ setChecked(!checked);
37
+ }}
38
+ />
39
+ );
43
40
  }
44
41
  ```
45
42
 
@@ -102,31 +99,31 @@ The following example shows how `useSharedState` can be used to dynamically crea
102
99
  import { useSharedState } from "@microsoft/live-share-react";
103
100
 
104
101
  export function CounterCard({ card, onDelete }) {
105
- const [count, setCount, disposeCount] = useSharedState(
106
- `card-count:${card.id}`,
107
- 0
108
- );
109
- return (
110
- <div className="card">
111
- <h3>{card.title}</h3>
112
- <button
113
- onClick={() => {
114
- setCount(count + 1);
115
- }}
116
- >
117
- {"+1"}
118
- </button>
119
- <span>{`${count} `}</span>
120
- <button
121
- onClick={() => {
122
- onDelete(card.id);
123
- disposeCount();
124
- }}
125
- >
126
- {"Delete"}
127
- </button>
128
- </div>
129
- );
102
+ const [count, setCount, disposeCount] = useSharedState(
103
+ `card-count:${card.id}`,
104
+ 0
105
+ );
106
+ return (
107
+ <div className="card">
108
+ <h3>{card.title}</h3>
109
+ <button
110
+ onClick={() => {
111
+ setCount(count + 1);
112
+ }}
113
+ >
114
+ {"+1"}
115
+ </button>
116
+ <span>{`${count} `}</span>
117
+ <button
118
+ onClick={() => {
119
+ onDelete(card.id);
120
+ disposeCount();
121
+ }}
122
+ >
123
+ {"Delete"}
124
+ </button>
125
+ </div>
126
+ );
130
127
  }
131
128
  ```
132
129
 
@@ -136,6 +133,12 @@ _NOTE:_ While this hook will get you pretty far on its own, carefully consider w
136
133
 
137
134
  This hook loads a Fluid `SharedMap` corresponding with the key you provide. Compared to `useSharedState`, this hook allows you to render a collection of items with less risk of conflict when multiple users may be writing to the same object simultaneously. For example, rather than storing an entire list of objects in a single key of `useSharedState`, the map allows each item in the list to have its own unique key.
138
135
 
136
+ In TypeScript, `useSharedMap<TData>` preserves `TData` for `sharedMap.get`, `forEach`,
137
+ `values`, and `entries` on both Fluid 2.x and 3.x. Its `delete` method returns a boolean and `set`
138
+ remains chainable. With Fluid 3.x, `sharedMap` is not assignable to a built-in `Map`;
139
+ use `new Map(sharedMap)` once it is defined if you need a local, unsynchronized snapshot.
140
+ Use `setEntry` for writes constrained to `TData`.
141
+
139
142
  While you write to keys individually, the `map` object exposed through the hook uses React state itself. Lets see an example in action:
140
143
 
141
144
  ```javascript
@@ -143,32 +146,32 @@ import { useSharedMap } from "@microsoft/live-share-react";
143
146
  import { v4 as uuid } from "uuid";
144
147
 
145
148
  export function CardList() {
146
- const { map, setEntry, deleteEntry } = useSharedMap("CUSTOM-MAP-ID");
147
- return (
148
- <div>
149
- <h2>{"Cards"}</h2>
150
- <button
151
- onClick={() => {
152
- const id = uuid();
153
- setEntry(id, {
154
- id,
155
- title: "Custom Card",
156
- });
157
- }}
158
- >
159
- {"+ Add card"}
160
- </button>
161
- <div className="flex wrap row hAlign">
162
- {[...map.values()].map((cardValue) => (
163
- <CounterCard
164
- key={cardValue.id}
165
- card={cardValue}
166
- onDelete={deleteEntry}
167
- />
168
- ))}
169
- </div>
170
- </div>
171
- );
149
+ const { map, setEntry, deleteEntry } = useSharedMap("CUSTOM-MAP-ID");
150
+ return (
151
+ <div>
152
+ <h2>{"Cards"}</h2>
153
+ <button
154
+ onClick={() => {
155
+ const id = uuid();
156
+ setEntry(id, {
157
+ id,
158
+ title: "Custom Card",
159
+ });
160
+ }}
161
+ >
162
+ {"+ Add card"}
163
+ </button>
164
+ <div className="flex wrap row hAlign">
165
+ {[...map.values()].map((cardValue) => (
166
+ <CounterCard
167
+ key={cardValue.id}
168
+ card={cardValue}
169
+ onDelete={deleteEntry}
170
+ />
171
+ ))}
172
+ </div>
173
+ </div>
174
+ );
172
175
  }
173
176
  ```
174
177
 
@@ -270,34 +273,34 @@ Here is a simple example:
270
273
  import { useLiveEvent } from "@microsoft/live-share-react";
271
274
 
272
275
  export function Reactions() {
273
- const { latestEvent, sendEvent } = useLiveEvent("EVENT-ID");
276
+ const { latestEvent, sendEvent } = useLiveEvent("EVENT-ID");
274
277
 
275
- return (
276
- <div>
277
- {/* Buttons for sending reactions */}
278
- <button
279
- onClick={() => {
280
- sendEvent({ emoji: "❤️" });
281
- }}
282
- >
283
- {"❤️"}
284
- </button>
285
- <button
286
- onClick={() => {
287
- sendEvent({ emoji: "😂" });
288
- }}
289
- >
290
- {"😂"}
291
- </button>
292
- {/* Show latest reaction */}
293
- {latestEvent?.local === false && (
294
- <div>{`Received: ${latestEvent?.value.emoji}`}</div>
295
- )}
296
- {latestEvent?.local === true && (
297
- <div>{`Sent: ${latestEvent?.value.emoji}`}</div>
298
- )}
299
- </div>
300
- );
278
+ return (
279
+ <div>
280
+ {/* Buttons for sending reactions */}
281
+ <button
282
+ onClick={() => {
283
+ sendEvent({ emoji: "❤️" });
284
+ }}
285
+ >
286
+ {"❤️"}
287
+ </button>
288
+ <button
289
+ onClick={() => {
290
+ sendEvent({ emoji: "😂" });
291
+ }}
292
+ >
293
+ {"😂"}
294
+ </button>
295
+ {/* Show latest reaction */}
296
+ {latestEvent?.local === false && (
297
+ <div>{`Received: ${latestEvent?.value.emoji}`}</div>
298
+ )}
299
+ {latestEvent?.local === true && (
300
+ <div>{`Sent: ${latestEvent?.value.emoji}`}</div>
301
+ )}
302
+ </div>
303
+ );
301
304
  }
302
305
  ```
303
306
 
@@ -311,37 +314,38 @@ Here is a simple example:
311
314
  import { useLiveTimer } from "@microsoft/live-share-react";
312
315
 
313
316
  export function CountdownTimer() {
314
- const { milliRemaining, timerConfig, start, pause, play } = useLiveTimer("TIMER-ID");
317
+ const { milliRemaining, timerConfig, start, pause, play } =
318
+ useLiveTimer("TIMER-ID");
315
319
 
316
- return (
317
- <div>
318
- <button
319
- onClick={() => {
320
- start(60 * 1000);
321
- }}
322
- >
323
- { timerConfig === undefined ? "Start" : "Reset" }
324
- </button>
325
- { timerConfig !== undefined && (
326
- <button
327
- onClick={() => {
328
- if (timerConfig.running) {
329
- pause();
330
- } else {
331
- play();
332
- }
333
- }}
334
- >
335
- {timerConfig.running ? "Pause" : "Play" }
336
- </button>
337
- )}
338
- { milliRemaining !== undefined && (
339
- <p>
340
- { `${Math.round(milliRemaining / 1000)} / ${Math.round(timerConfig.duration) / 1000}` }
341
- </p>
342
- )}
343
- </div>
344
- );
320
+ return (
321
+ <div>
322
+ <button
323
+ onClick={() => {
324
+ start(60 * 1000);
325
+ }}
326
+ >
327
+ {timerConfig === undefined ? "Start" : "Reset"}
328
+ </button>
329
+ {timerConfig !== undefined && (
330
+ <button
331
+ onClick={() => {
332
+ if (timerConfig.running) {
333
+ pause();
334
+ } else {
335
+ play();
336
+ }
337
+ }}
338
+ >
339
+ {timerConfig.running ? "Pause" : "Play"}
340
+ </button>
341
+ )}
342
+ {milliRemaining !== undefined && (
343
+ <p>
344
+ {`${Math.round(milliRemaining / 1000)} / ${Math.round(timerConfig.duration) / 1000}`}
345
+ </p>
346
+ )}
347
+ </div>
348
+ );
345
349
  }
346
350
  ```
347
351
 
@@ -359,24 +363,24 @@ import { useRef } from "react";
359
363
  const ALLOWED_ROLES = [UserMeetingRole.organizer, UserMeetingRole.presenter];
360
364
 
361
365
  const INITIAL_TRACK =
362
- "https://storage.googleapis.com/media-session/big-buck-bunny/trailer.mov";
366
+ "https://storage.googleapis.com/media-session/big-buck-bunny/trailer.mov";
363
367
 
364
368
  export function VideoPlayer() {
365
- const videoRef = useRef(null);
366
- const { play, pause } = useMediaSynchronizer(
367
- "MEDIA-SESSION-ID",
368
- videoRef,
369
- INITIAL_TRACK,
370
- ALLOWED_ROLES
371
- );
369
+ const videoRef = useRef(null);
370
+ const { play, pause } = useMediaSynchronizer(
371
+ "MEDIA-SESSION-ID",
372
+ videoRef,
373
+ INITIAL_TRACK,
374
+ ALLOWED_ROLES
375
+ );
372
376
 
373
- return (
374
- <div>
375
- <video ref={videoRef} />
376
- <button onClick={play}>{"Play"}</button>
377
- <button onClick={pause}>{"Pause"}</button>
378
- </div>
379
- );
377
+ return (
378
+ <div>
379
+ <video ref={videoRef} />
380
+ <button onClick={play}>{"Play"}</button>
381
+ <button onClick={pause}>{"Pause"}</button>
382
+ </div>
383
+ );
380
384
  }
381
385
  ```
382
386
 
@@ -440,10 +444,7 @@ import { useTaskManager } from "@microsoft/live-share-react";
440
444
 
441
445
  export const ExampleTaskManager = () => {
442
446
  const [taskId, setTaskId] = useState(undefined);
443
- const { lockedTask } = useTaskManager(
444
- "CUSTOM-TASK-MANAGER",
445
- taskId,
446
- );
447
+ const { lockedTask } = useTaskManager("CUSTOM-TASK-MANAGER", taskId);
447
448
 
448
449
  const displayText = lockedTask
449
450
  ? "You are assigned the task"
@@ -454,19 +455,19 @@ export const ExampleTaskManager = () => {
454
455
  {!taskId && (
455
456
  <button
456
457
  onClick={() => {
457
- setTaskId("task-id")
458
+ setTaskId("task-id");
458
459
  }}
459
460
  >
460
- {'Join task queue'}
461
+ {"Join task queue"}
461
462
  </button>
462
463
  )}
463
464
  {taskId && (
464
465
  <button
465
466
  onClick={() => {
466
- setTaskId(undefined)
467
+ setTaskId(undefined);
467
468
  }}
468
469
  >
469
- {'Leave task queue'}
470
+ {"Leave task queue"}
470
471
  </button>
471
472
  )}
472
473
  <p>{displayText}</p>
@@ -477,7 +478,7 @@ export const ExampleTaskManager = () => {
477
478
 
478
479
  ### Custom Fluid object hooks
479
480
 
480
- If you want to dynamically load a custom Fluid object in your app, use the `useDynamicDDS` to create a custom hook. This is the same hook that Live Share React uses internally within our custom hooks, such as `useLiveEvent`. If you made a custom data object or are using one of Fluid's experimental data structures, you also must register your Fluid `LoadableObjectClass` with `DynamicObjectRegistry.registerObjectClass` to `@microsoft/live-share`, if it is not already.
481
+ If you want to dynamically load a custom Fluid object in your app, use the `useDynamicDDS` to create a custom hook. This is the same hook that Live Share React uses internally within our custom hooks, such as `useLiveEvent`. If you made a custom data object or are using one of Fluid's experimental data structures, you also must register your Fluid `SharedObjectKind` with `DynamicObjectRegistry.registerObjectClass` to `@microsoft/live-share`, if it is not already.
481
482
 
482
483
  Implementations may vary for each dynamic object & hook. We will try and update this package periodically with new packages released by Fluid Framework and Live Share, as they are published.
483
484
 
@@ -487,19 +488,25 @@ Example:
487
488
  import React from "react";
488
489
  import { useDynamicDDS } from "@microsoft/live-share-react";
489
490
  import { DynamicObjectRegistry } from "@microsoft/live-share";
490
- import { TaskManager } from "@fluid-experimental/task-manager";
491
+ import { TaskManager } from "@fluid-experimental/task-manager";
491
492
 
492
493
  // Register TaskManager as dynamic object
493
- DynamicObjectRegistry.registerObjectClass(TaskManager, TaskManager.getFactory().type);
494
+ DynamicObjectRegistry.registerObjectClass(
495
+ TaskManager,
496
+ TaskManager.getFactory().type
497
+ );
494
498
 
495
499
  /**
496
500
  * A hook for joining a queue to lock tasks for a given id. Guaranteed to have only one user assigned to a task at a time.
497
- *
501
+ *
498
502
  * @param uniqueKey the unique key for the TaskManager DDS
499
503
  * @param taskId the task id to lock
500
504
  * @returns stateful data about the status of the task lock
501
505
  */
502
- export const useTaskManager = (uniqueKey: string, taskId?: string): {
506
+ export const useTaskManager = (
507
+ uniqueKey: string,
508
+ taskId?: string
509
+ ): {
503
510
  lockedTask: boolean;
504
511
  taskManager: TaskManager | undefined;
505
512
  } => {
@@ -515,7 +522,10 @@ export const useTaskManager = (uniqueKey: string, taskId?: string): {
515
522
  /**
516
523
  * User facing: dynamically load the TaskManager DDS for the given unique key.
517
524
  */
518
- const { dds: taskManager } = useDynamicDDS<TaskManager>(uniqueKey, TaskManager);
525
+ const { dds: taskManager } = useDynamicDDS<TaskManager>(
526
+ uniqueKey,
527
+ TaskManager
528
+ );
519
529
 
520
530
  /**
521
531
  * When the task id changes, lock the task. When the task id is undefined, abandon the task.
@@ -541,7 +551,7 @@ export const useTaskManager = (uniqueKey: string, taskId?: string): {
541
551
  currentTaskIdRef.current = undefined;
542
552
  }
543
553
  }
544
- }
554
+ };
545
555
  onLockTask();
546
556
  } else if (!taskId && currentTaskIdRef.current) {
547
557
  taskManager.abandon(currentTaskIdRef.current);
@@ -558,7 +568,7 @@ export const useTaskManager = (uniqueKey: string, taskId?: string): {
558
568
  taskManager?.abandon(currentTaskIdRef.current);
559
569
  }
560
570
  currentTaskIdRef.current = undefined;
561
- }
571
+ };
562
572
  }, [taskManager, taskId]);
563
573
 
564
574
  return {
@@ -570,9 +580,9 @@ export const useTaskManager = (uniqueKey: string, taskId?: string): {
570
580
 
571
581
  ## Code samples
572
582
 
573
- | Sample name | Description | Javascript |
574
- | ----------------- | ----------------------------------------------------------------------- | ----------------------------------------------------- |
575
- | Live Share React | Simple example with each of our custom Live Share React hooks. | [View](../../samples/javascript/04.live-share-react) |
583
+ | Sample name | Description | Javascript |
584
+ | ---------------- | -------------------------------------------------------------- | ---------------------------------------------------- |
585
+ | Live Share React | Simple example with each of our custom Live Share React hooks. | [View](../../samples/javascript/04.live-share-react) |
576
586
 
577
587
  ## React version compatibility
578
588
 
@@ -584,9 +594,10 @@ The Live Share SDK contains dependencies for [@microsoft/teams-js](https://www.n
584
594
 
585
595
  **It is critical that your app use the package dependencies listed in the table below.** Lookup the version of the `@microsoft/live-share` you're using and set any other dependencies in your package.json file to match:
586
596
 
587
- | @microsoft/live-share | @microsoft/teams-js | fluid-framework | @microsoft/live-share-\* | @fluidframework/azure-client | @microsoft/TeamsFx | @microsoft/TeamsFx-react |
588
- | --------------------- | -------------------- | --------------- | -------------------------- | ---------------------------- | ------------------------------- | ------------------------------- |
589
- | ^1.0.0 | ^2.11.0 | ^1.2.3 | ^1.0.0 | ^1.0.0 | ^2.5.0 | ^2.5.0 |
597
+ | @microsoft/live-share | @microsoft/teams-js | fluid-framework | @microsoft/live-share-\* | @fluidframework/azure-client | @microsoft/TeamsFx | @microsoft/TeamsFx-react |
598
+ | --------------------- | ------------------- | --------------- | ------------------------ | ---------------------------- | ------------------ | ------------------------ |
599
+ | ^2.0.0 | ^2.11.0 | ^2.0.0 | ^2.0.0 | ^2.0.0 | ^2.5.0 | ^2.5.0 |
600
+ | ^1.0.0 | ^2.11.0 | ^1.2.3 | ^1.0.0 | ^1.0.0 | ^2.5.0 | ^2.5.0 |
590
601
 
591
602
  ## Contributing
592
603
 
@@ -0,0 +1,7 @@
1
+ export * from "./providers/index.js";
2
+ export * from "./shared-hooks/index.js";
3
+ export * from "./live-hooks/index.js";
4
+ export * from "./types/index.js";
5
+ export * from "./providers/index.js";
6
+ export * from "./interfaces/index.js";
7
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}
@@ -0,0 +1,7 @@
1
+ export * from "./providers/index.js";
2
+ export * from "./shared-hooks/index.js";
3
+ export * from "./live-hooks/index.js";
4
+ export * from "./types/index.js";
5
+ export * from "./providers/index.js";
6
+ export * from "./interfaces/index.js";
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LiveInterfaceExtensions.d.ts","sourceRoot":"","sources":["../../../src/interfaces/LiveInterfaceExtensions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,GAAG;IAC3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACrB"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LiveInterfaceExtensions.js","sourceRoot":"","sources":["../../../src/interfaces/LiveInterfaceExtensions.ts"],"names":[],"mappings":"AAAA;;;GAGG"}
@@ -0,0 +1,2 @@
1
+ export * from "./LiveInterfaceExtensions.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from "./LiveInterfaceExtensions.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../src/internal/errors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAM,4BAA6B,SAAQ,KAAK;gBAChC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;CAIrE;AAED;;GAEG;AACH,qBAAa,6BAA8B,SAAQ,4BAA4B;gBAC/D,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;CAOpD;AAED;;GAEG;AACH,qBAAa,kCAAmC,SAAQ,4BAA4B;gBACpE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;CAQpD;AAED;;GAEG;AACH,qBAAa,oCAAqC,SAAQ,4BAA4B;gBACtE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;CAQpD;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"errors.js","sourceRoot":"","sources":["../../../src/internal/errors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,4BAA6B,SAAQ,KAAK;IAC5C,YAAY,OAAe,EAAE,YAAoB,EAAE,OAAe;QAC9D,MAAM,QAAQ,GAAG,MAAM,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC;QACzD,KAAK,CAAC,GAAG,QAAQ,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC,CAAC;IACrD,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,OAAO,6BAA8B,SAAQ,4BAA4B;IAC3E,YAAY,OAAe,EAAE,YAAoB;QAC7C,KAAK,CACD,OAAO,EACP,YAAY,EACZ,oSAAoS,CACvS,CAAC;IACN,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,OAAO,kCAAmC,SAAQ,4BAA4B;IAChF,YAAY,OAAe,EAAE,YAAoB;QAC7C,MAAM,QAAQ,GAAG,MAAM,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC;QACzD,KAAK,CACD,OAAO,EACP,YAAY,EACZ,GAAG,OAAO,uGAAuG,OAAO,kCAAkC,QAAQ,8CAA8C,CACnN,CAAC;IACN,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,OAAO,oCAAqC,SAAQ,4BAA4B;IAClF,YAAY,OAAe,EAAE,YAAoB;QAC7C,MAAM,QAAQ,GAAG,MAAM,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC;QACzD,KAAK,CACD,OAAO,EACP,YAAY,EACZ,GAAG,OAAO,8DAA8D,OAAO,yDAAyD,QAAQ,mCAAmC,CACtL,CAAC;IACN,CAAC;CACJ;AAkBD;;GAEG;AACH,SAAS,sBAAsB,CAAC,IAAY;IACxC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from "./errors.js";
2
+ export * from "./type-guards.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/internal/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from "./errors.js";
2
+ export * from "./type-guards.js";
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
@@ -1,4 +1,4 @@
1
- import { ITeamsJsSdkError } from "./errors";
1
+ import { ITeamsJsSdkError } from "./errors.js";
2
2
  /**
3
3
  * @hidden
4
4
  * Used for useLiveState and useSharedState for checking if a value is a prevState callback
@@ -0,0 +1 @@
1
+ {"version":3,"file":"type-guards.d.ts","sourceRoot":"","sources":["../../../src/internal/type-guards.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EACtC,KAAK,EAAE,GAAG,GACX,KAAK,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAEpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,gBAAgB,CAKxE"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"type-guards.js","sourceRoot":"","sources":["../../../src/internal/type-guards.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAC/B,KAAU;IAEV,OAAO,OAAO,KAAK,KAAK,UAAU,CAAC;AACvC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAU;IACzC,IAAI,CAAC,KAAK;QAAE,OAAO,KAAK,CAAC;IACzB,IAAI,OAAO,KAAK,CAAC,SAAS,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IACtD,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAC7C,OAAO,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC;AAC7C,CAAC"}
@@ -0,0 +1,8 @@
1
+ export * from "./useLivePresence.js";
2
+ export * from "./useLiveFollowMode.js";
3
+ export * from "./useLiveState.js";
4
+ export * from "./useMediaSynchronizer.js";
5
+ export * from "./useLiveEvent.js";
6
+ export * from "./useLiveCanvas.js";
7
+ export * from "./useLiveTimer.js";
8
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/live-hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}
@@ -0,0 +1,8 @@
1
+ export * from "./useLivePresence.js";
2
+ export * from "./useLiveFollowMode.js";
3
+ export * from "./useLiveState.js";
4
+ export * from "./useMediaSynchronizer.js";
5
+ export * from "./useLiveEvent.js";
6
+ export * from "./useLiveCanvas.js";
7
+ export * from "./useLiveTimer.js";
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/live-hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}