search

SuperViz / sdk

SuperViz provides programmable low-code Collaboration and Communication components for web applications.
https://docs.superviz.com/
BSD 2-Clause "Simplified" License
19 stars 2 forks source link

Implement SSR/SSG build native support #764

Closed carlossantos74 closed 1 month ago

carlossantos74 commented 1 month ago

Fixes issues related to support for builds that use SSR and SSG. If you want to understand more about the problem, see this issue: https://github.com/SuperViz/sdk/issues/762

1. HTMLElement is not defined

Screenshot 2024-09-08 at 19:06:58

To solve this problem, we just create and import the components in the right environment, we replaced the default @ customElement decorator from lit, for a decorator created by myself, the new decorator will ensure two things.

  1. The HTMLElement class and the window object exist;
  2. The custom element hasn't been declared before;

Reference: https://github.com/SuperViz/sdk/pull/764/files#diff-e2bf156b763f590c032bacaa888ce212d62365de9e425e2dd6ec5ad8ac10db21

2. Document is not defined

To solve this problem, we import the components only when the window object is loaded. This ensures that we are in the right environment before trying to create the web components.

Reference: https://github.com/SuperViz/sdk/pull/764/files#diff-0e0953e53dea2fabe1d3f2eb0979c0044e37e2bea1f74c61057201844a9a523a

3. Window is not defined

Screenshot 2024-09-08 at 19 07 14

It's a bit harder because a lot of SuperViz components use window to integrate with the client's application, to solve this we only use window if it is different from undefined.

References:

After the changes, we can now build without using force-dynamic, example:

Screenshot 2024-09-08 at 19 24 06
SuperViz-Dev commented 1 month ago

Total Coverage: 93.40%

Coverage Report
File Branch Funcs Lines Uncovered Lines
src
   shims.d.ts 100% 100% 100%
src/common
src/common/types
   colors.types.ts 100% 100% 100%
   events.types.ts 100% 100% 100%
   meeting-colors.types.ts 100% 100% 100%
   participant.types.ts 100% 100% 100%
   realtime.types.ts 100% 100% 100%
   sdk-options.types.ts 100% 100% 100%
   stores.types.ts 100% 100% 100%
src/common/utils
   do-request.ts 100% 100% 87.50% 20
   index.ts 100% 100% 100%
   logger.ts 100% 100% 100%
   observable.ts 100% 100% 100%
   observer.ts 100% 100% 100%
   sleep.ts 0% 100% 100% 2
   use-store.ts 80% 100% 100% 36
src/components
   index.ts 100% 75% 100%
   types.ts 100% 100% 100%
src/components/base
   index.ts 75% 100% 94% 44, 45, 46, 47, 55
src/components/comments
   index.ts 91.89% 93.33% 96.41% 155, 242, 299, 358, 359, 360, 362, 480, 518, 587, 700, 716
   types.ts 100% 100% 100%
src/components/comments/canvas-pin-adapter
   index.ts 54.55% 85.71% 88.19% 204, 251, 251, 251, 251, 252, 253, 256, 256, 257, 260, 330, 331, 333, 333, 333, 335, 335, 336, 338, 339, 342, 344, 393, 394, 395, 414, 425, 436, 440, 453, 474, 499, 519, 520, 531, 532, 533, 534, 535, 535, 535, 535, 535, 537, 537, 538, 538, 538, 538, 542, 544, 545
src/components/comments/html-pin-adapter
   index.ts 91.59% 96.55% 96.35% 277, 278, 279, 336, 363, 470, 471, 492, 493, 495, 495, 497, 498, 500, 500, 500, 500, 502, 503, 718, 719, 720, 797, 798, 799
src/components/form-elements
   index.ts 98.48% 100% 100% 96
   types.ts 100% 100% 100%
src/components/presence-mouse
   index.ts 50% 50% 90% 10, 11
   types.ts 100% 100% 100%
src/components/presence-mouse/canvas
   index.ts 63.16% 77.27% 87.64% 102, 103, 112, 113, 114, 115, 135, 135, 137, 161, 164, 164, 165, 166, 244, 244, 244, 244, 328, 338, 339, 356, 356, 358, 417, 79, 80, 81, 82, 83, 85, 86, 87, 88, 97, 98
src/components/presence-mouse/html
   index.ts 87.93% 96.97% 99.40% 208, 284, 284, 286, 306, 568, 683, 701, 702
src/components/realtime
   channel.ts 71.43% 80% 88.31% 133, 133, 135, 137, 138, 141, 143, 147, 148, 150, 150, 95, 96
   index.ts 25% 62.50% 68.75% 113, 126, 134, 134, 136, 137, 140, 141, 143, 144, 145, 51, 52, 53, 55, 56, 56, 58, 59, 65, 76, 76, 77, 93, 94, 95
   presence.ts 100% 87.50% 77.78% 35, 36, 37, 38
   types.ts 100% 100% 100%
src/components/video
   index.ts 76.54% 95.16% 89.97% 108, 109, 110, 122, 123, 124, 145, 146, 147, 234, 360, 602, 611, 645, 744, 745, 747, 747, 748, 749, 752, 799, 802, 802, 810, 811, 814, 815, 852, 873, 874, 876, 876, 877, 883, 898, 930, 931, 935, 936, 94, 95, 956, 96, 961, 961, 962, 965, 973
src/components/who-is-online
   index.ts 92.77% 98.04% 97.14% 178, 179, 199, 255, 353, 586, 586, 750, 751, 753, 799, 799, 801, 802
   types.ts 100% 100% 100%
src/core
   index.ts 78.95% 80% 88.06% 113, 114, 115, 135, 136, 156, 184, 184, 185, 193, 197, 197, 198, 198, 199, 199
src/core/launcher
   index.ts 80% 66.67% 84.49% 110, 111, 112, 112, 113, 115, 141, 143, 144, 148, 151, 287, 314, 316, 317, 325, 330, 348, 348, 349, 350, 353, 353, 354, 355, 368, 368, 370, 372, 374, 375, 377, 378, 379
src/services
src/services/api
   index.ts 100% 83.33% 84.38% 102, 103, 105, 111, 112, 113, 114, 30, 31, 32
src/services/auth-service
   index.ts 100% 100% 100%
src/services/browser
   index.ts 100% 100% 100%
src/services/config
   index.ts 100% 100% 100%
src/services/connection-status
   index.ts 100% 100% 100%
src/services/core-bridge
   index.ts 100% 100% 100%
src/services/event-bus
   index.ts 100% 100% 100%
src/services/frame-brick-layer
   index.ts 100% 100% 100%
src/services/io
   index.ts 40% 83.33% 62.07% 39, 39, 40, 44, 49, 51, 54, 54, 55, 56, 57, 60, 61, 71
   types.ts 100% 100% 100%
src/services/limits
   index.ts 75% 100% 100% 11
src/services/message-bridge
   index.ts 93.75% 100% 100% 85
src/services/presence-3d-manager
   index.ts 93.33% 93.10% 97.96% 162, 60, 67
   types.ts 100% 100% 100%
src/services/remote-config-service
   index.ts 100% 80% 92.31% 35
src/services/room-state
   index.ts 82.05% 96.55% 97.86% 135, 162, 248, 258, 380, 380, 382, 383, 60, 72
   type.ts 100% 100% 100%
src/services/slot
   index.ts 24% 58.33% 65.79% 143, 145, 145, 146, 148, 153, 156, 156, 156, 156, 158, 158, 159, 161, 166, 173, 182, 183, 187, 187, 187, 190, 190, 190, 192, 202, 202, 204, 206, 206, 206, 206, 207, 208, 211, 211, 211, 211, 212, 215, 39, 60, 69, 70, 78
src/services/stores
   index.ts 100% 100% 100%
src/services/stores/common
   utils.ts 100% 100% 100%
src/services/stores/core
   index.ts 0% 66.67% 81.25% 13, 14, 21, 22
src/services/stores/global
   index.ts 0% 100% 96.15% 16, 17
src/services/stores/presence3D
   index.ts 0% 66.67% 81.25% 13, 14, 21, 22
src/services/stores/subject
   index.ts 100% 100% 100%
src/services/stores/video
   index.ts 0% 100% 96.97% 20, 21
src/services/stores/who-is-online
   index.ts 0% 100% 97.87% 25, 26
src/services/video-conference-manager
   index.ts 62.22% 84.21% 93.63% 120, 123, 124, 125, 172, 177, 209, 210, 215, 216, 217, 220, 220, 221, 223, 224, 302, 314, 336, 363, 364, 365, 378, 420, 454, 565, 577, 620, 624, 685
   types.ts 100% 100% 100%
SuperViz-Dev commented 1 month ago

Total Coverage: 96.98%

Coverage Report
File Branch Funcs Lines Uncovered Lines
src
src/web-components
src/web-components/base
   index.ts 75% 100% 83.52% 28, 32, 33, 34, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69
src/web-components/base/styles
   icon-button.style.ts 100% 100% 100%
   index.ts 100% 100% 100%
   sv-hr.style.ts 100% 100% 100%
   typography.style.ts 100% 100% 100%
   variables.style.ts 100% 100% 100%
src/web-components/base/utils
   importStyle.ts 66.67% 100% 100% 3
src/web-components/comments
   index.ts 88.24% 76.92% 87.88% 100, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 138, 65, 66, 67, 80, 81, 95, 96, 97, 98, 99
src/web-components/comments/components
   annotation-filter.ts 100% 100% 100%
   annotation-item.ts 100% 96.43% 96.72% 180, 181, 182, 183, 184, 185, 186, 187, 231, 232
   annotation-pin.ts 100% 94.44% 92.25% 100, 101, 102, 103, 104, 119, 124, 125, 126, 127, 184, 185, 186, 75, 76, 77, 78, 79, 97, 98, 99
   annotation-resolved.ts 100% 100% 100%
   comment-input.ts 100% 96.67% 95.45% 138, 139, 140, 141, 144, 145, 153, 154, 155, 156, 157, 238, 239, 240, 243, 244, 272, 273, 373, 374, 388, 389
   comment-item.ts 100% 85.71% 94.50% 100, 101, 102, 103, 104, 105, 106, 107, 108, 280, 281, 90, 91, 92, 93, 96, 97
   content.ts 96.15% 81.82% 89.31% 109, 110, 40, 41, 44, 45, 46, 52, 53, 54, 68, 79, 80, 81, 82
   delete-comment-modal.ts 100% 100% 100%
   float-button.ts 100% 100% 87.72% 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 51, 52, 56, 57, 73, 82
   mention-list.ts 100% 100% 100%
   topbar.ts 100% 100% 100%
   types.ts 100% 100% 100%
src/web-components/comments/css
   annotation-filter.style.ts 100% 100% 100%
   annotation-item.style.ts 100% 100% 100%
   annotation-pin.style.ts 100% 100% 100%
   annotation-resolved.style.ts 100% 100% 100%
   comment-input.style.ts 100% 100% 100%
   comment-item.style.ts 100% 100% 100%
   comments.style.ts 100% 100% 100%
   content.style.ts 100% 100% 100%
   float-button.style.ts 100% 100% 100%
   index.ts 100% 100% 100%
   mention-list.style.ts 100% 100% 100%
   powered-by.style.ts 100% 100% 100%
   topbar.style.ts 100% 100% 100%
src/web-components/comments/utils
   autocomplete-handler.ts 100% 100% 98.29% 25, 26
   mention-handler.ts 100% 100% 100%
   watermark.ts 100% 100% 86.15% 15, 16, 17, 18, 19, 20, 21, 22, 23
src/web-components/dropdown
   index.style.ts 100% 100% 100%
   index.ts 92.31% 100% 97.68% 157, 158, 159, 160, 161, 162, 190, 224, 261, 84, 87
src/web-components/global
src/web-components/global/decorators
   create-element.decorator.ts 66.67% 100% 100% 31
src/web-components/hello-world
   index.ts 100% 100% 100%
src/web-components/icon
   index.ts 100% 100% 100%
   types.ts 100% 100% 100%
src/web-components/modal
   index.ts 100% 100% 100%
   modal-container.ts 100% 100% 100%
   modal.ts 100% 100% 100%
src/web-components/modal/styles
   index.style.ts 100% 100% 100%
src/web-components/tooltip
   index.style.ts 100% 100% 100%
   index.ts 85.19% 100% 95.17% 110, 111, 112, 113, 115, 116, 117, 118, 153, 157, 222, 223, 224, 225, 89, 91, 92, 93, 95, 96, 97
   types.ts 100% 100% 100%
src/web-components/who-is-online
   index.ts 100% 100% 100%
   who-is-online.ts 87.88% 100% 96.94% 101, 248, 249, 267, 268, 269, 281, 282, 283, 295, 296, 297, 325, 326, 327, 70, 71, 76, 77
src/web-components/who-is-online/components
   dropdown.ts 97.37% 94.74% 97.85% 136, 137, 138, 139, 140, 141, 144
   index.ts 100% 100% 100%
   messages.ts 96.67% 80% 97.30% 128, 129, 137, 138, 146, 147, 43
   types.ts 100% 100% 100%
src/web-components/who-is-online/css
   dropdown.style.ts 100% 100% 100%
   index.ts 100% 100% 100%
   messages.style.ts 100% 100% 100%
   who-is-online-style.ts 100% 100% 100%
SuperViz-Dev commented 1 month ago

:tada: This PR is included in version 6.6.0-lab.14 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

SuperViz-Dev commented 1 month ago

:tada: This PR is included in version 6.6.0-beta.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

SuperViz-Dev commented 1 month ago

:tada: This PR is included in version 6.6.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: