Skip to content
This repository was archived by the owner on Oct 18, 2024. It is now read-only.

Implement SSR/SSG build native support #764

Merged
merged 2 commits into from
Sep 10, 2024
Merged

Implement SSR/SSG build native support #764

merged 2 commits into from
Sep 10, 2024

Conversation

carlossantos74
Copy link
Collaborator

@carlossantos74 carlossantos74 commented Sep 8, 2024 •
edited
Loading

Fixes issues related to support for builds that use SSR and SSG. If you want to understand more about the problem, see this issue: #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

@github-actions github-actions bot deleted a comment from SuperViz-Dev Sep 8, 2024
@carlossantos74 carlossantos74 changed the title feat(web-components): only import and create components when it's in the right environment Implement SSR/SSG build native support Sep 8, 2024
@SuperViz-Dev
Copy link
Contributor

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
Copy link
Contributor

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%

@carlossantos74 carlossantos74 self-assigned this Sep 8, 2024
@carlossantos74 carlossantos74 added the bug Something isn't working label Sep 8, 2024
Raspincel
Raspincel approved these changes Sep 10, 2024
View reviewed changes
Copy link
Contributor

@Raspincel Raspincel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job

@carlossantos74 carlossantos74 merged commit 1ff1b5a into lab Sep 10, 2024
4 checks passed
@SuperViz-Dev
Copy link
Contributor

🎉 This PR is included in version 6.6.0-lab.14 🎉

The release is available on:

Your semantic-release bot 📦🚀

@SuperViz-Dev
Copy link
Contributor

🎉 This PR is included in version 6.6.0-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@SuperViz-Dev
Copy link
Contributor

🎉 This PR is included in version 6.6.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Raspincel Raspincel Raspincel approved these changes

@vitorvargasdev vitorvargasdev Awaiting requested review from vitorvargasdev

Assignees

@carlossantos74 carlossantos74

Labels
bug Something isn't working released on @beta released on @lab released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@carlossantos74 @SuperViz-Dev @Raspincel