feat(web-components): only import and create components when it's in the right environment

Author: carlossantos74

src/components/comments/index.ts

@@ -5,7 +5,7 @@ import { Logger } from '../../common/utils';
 import ApiService from '../../services/api';
 import config from '../../services/config';
 import subject from '../../services/stores/subject';
-import type { Comments as CommentElement } from '../../web-components';
+import type { Comments as CommentElement } from '../../web-components/comments';
 import { CommentsFloatButton } from '../../web-components/comments/components/float-button';
 import { BaseComponent } from '../base';
 import { ComponentNames } from '../types';

src/components/who-is-online/index.ts

@@ -5,7 +5,7 @@ import { Participant, Avatar } from '../../common/types/participant.types';
 import { StoreType } from '../../common/types/stores.types';
 import { Logger } from '../../common/utils';
 import { Following } from '../../services/stores/who-is-online/types';
-import { WhoIsOnline as WhoIsOnlineElement } from '../../web-components';
+import type { WhoIsOnline as WhoIsOnlineElement } from '../../web-components/who-is-online';
 import { DropdownOption } from '../../web-components/dropdown/types';
 import { BaseComponent } from '../base';
 import { ComponentNames } from '../types';

src/web-components/comments/comments.test.ts

@@ -1,7 +1,7 @@
 import { MOCK_ANNOTATION } from '../../../../__mocks__/comments.mock';
 import sleep from '../../../common/utils/sleep';
 
-import '.';
+import './annotation-filter';
 import { AnnotationFilter } from './types';
 
 let element: HTMLElement;

src/web-components/comments/comments.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, LitElement, PropertyValueMap, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { WebComponentsBase } from '../../base';
@@ -8,6 +7,7 @@ import { DropdownOption } from '../../dropdown/types';
 import { annotationFilterStyle } from '../css';
 
 import { AnnotationFilter } from './types';
+import { CreateElement } from '../../global/decorators/create-element.decorator';
 
 const WebComponentsBaseElement = WebComponentsBase(LitElement);
 const styles: CSSResultGroup[] = [WebComponentsBaseElement.styles, annotationFilterStyle];
@@ -21,7 +21,7 @@ const options: DropdownOption[] = [
   },
 ];
 
-@customElement('superviz-comments-annotation-filter')
+@CreateElement('superviz-comments-annotation-filter')
 export class CommentsAnnotationFilter extends WebComponentsBaseElement {
   constructor() {
     super();

src/web-components/comments/components/annotation-filter.test.ts

@@ -1,7 +1,7 @@
 import { MOCK_ANNOTATION } from '../../../../__mocks__/comments.mock';
 import sleep from '../../../common/utils/sleep';
 
-import '.';
+import './annotation-item';
 import { AnnotationFilter } from './types';
 
 let element: HTMLElement;

src/web-components/comments/components/annotation-filter.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValueMap, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+
 import { classMap } from 'lit/directives/class-map.js';
 
 import { ParticipantByGroupApi } from '../../../common/types/participant.types';
@@ -9,11 +9,12 @@ import importStyle from '../../base/utils/importStyle';
 import { annotationItemStyle } from '../css';
 
 import { AnnotationFilter } from './types';
+import { CreateElement } from '../../global/decorators/create-element.decorator';
 
 const WebComponentsBaseElement = WebComponentsBase(LitElement);
 const styles: CSSResultGroup[] = [WebComponentsBaseElement.styles, annotationItemStyle];
 
-@customElement('superviz-comments-annotation-item')
+@CreateElement('superviz-comments-annotation-item')
 export class CommentsAnnotationItem extends WebComponentsBaseElement {
   static styles = styles;
 

src/web-components/comments/components/annotation-item.test.ts

@@ -6,7 +6,7 @@ import { useGlobalStore } from '../../../services/stores';
 import type { CommentsAnnotationPin } from './annotation-pin';
 import { PinMode } from './types';
 
-import '.';
+import './annotation-pin';
 import '../../icon';
 
 interface CreateAnnotationPinOptions {

src/web-components/comments/components/annotation-item.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValueMap, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+
 import { classMap } from 'lit/directives/class-map.js';
 
 import { Participant, ParticipantByGroupApi } from '../../../common/types/participant.types';
@@ -10,11 +10,12 @@ import importStyle from '../../base/utils/importStyle';
 import { annotationPinStyles } from '../css';
 
 import { PinMode, HorizontalSide, Sides } from './types';
+import { CreateElement } from '../../global/decorators/create-element.decorator';
 
 const WebComponentsBaseElement = WebComponentsBase(LitElement);
 const styles: CSSResultGroup[] = [WebComponentsBaseElement.styles, annotationPinStyles];
 
-@customElement('superviz-comments-annotation-pin')
+@CreateElement('superviz-comments-annotation-pin')
 export class CommentsAnnotationPin extends WebComponentsBaseElement {
   declare type: PinMode;
   declare active: boolean;