Emit missing style warning on VideoConference when in development mode (#720)

lukasIO · web-flow · commit dfdd550bc11a · 2023-12-04T17:57:25.000+01:00
diff --git a/.changeset/slimy-flies-clean.md b/.changeset/slimy-flies-clean.md
@@ -0,0 +1,6 @@
+---
+"@livekit/components-react": patch
+"@livekit/components-styles": patch
+---
+
+Emit missing style warning on VideoConference when in development mode
diff --git a/packages/react/src/hooks/useWarnAboutMissingStyles.ts b/packages/react/src/hooks/useWarnAboutMissingStyles.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { warnAboutMissingStyles } from '../utils';
+
+/**
+ * @internal
+ */
+export function useWarnAboutMissingStyles() {
+  React.useEffect(() => {
+    warnAboutMissingStyles();
+  }, []);
+}
diff --git a/packages/react/src/prefabs/AudioConference.tsx b/packages/react/src/prefabs/AudioConference.tsx
@@ -7,6 +7,7 @@ import type { WidgetState } from '@livekit/components-core';
 import { Chat } from './Chat';
 import { ParticipantLoop } from '../components';
 import { useParticipants } from '../hooks';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 
 /** @public */
 export interface AudioConferenceProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -34,6 +35,8 @@ export function AudioConference({ ...props }: AudioConferenceProps) {
   });
   const participants = useParticipants();
 
+  useWarnAboutMissingStyles();
+
   return (
     <LayoutContextProvider onWidgetChange={setWidgetState}>
       <div className="lk-audio-conference" {...props}>
diff --git a/packages/react/src/prefabs/PreJoin.tsx b/packages/react/src/prefabs/PreJoin.tsx
@@ -19,6 +19,7 @@ import type { LocalUserChoices } from '@livekit/components-core';
 import { log } from '@livekit/components-core';
 import { ParticipantPlaceholder } from '../assets/images';
 import { useMediaDevices, usePersistentUserChoices } from '../hooks';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 
 const DEFAULT_USER_CHOICES: LocalUserChoices = {
   username: '',
@@ -369,6 +370,8 @@ export function PreJoin({
     }
   }
 
+  useWarnAboutMissingStyles();
+
   return (
     <div className="lk-prejoin" {...htmlProps}>
       <div className="lk-video-container">
diff --git a/packages/react/src/prefabs/VideoConference.tsx b/packages/react/src/prefabs/VideoConference.tsx
@@ -22,6 +22,7 @@ import { useCreateLayoutContext } from '../context';
 import { usePinnedTracks, useTracks } from '../hooks';
 import { Chat } from './Chat';
 import { ControlBar } from './ControlBar';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 
 /**
  * @public
@@ -112,6 +113,8 @@ export function VideoConference({
     focusTrack?.publication?.trackSid,
   ]);
 
+  useWarnAboutMissingStyles();
+
   return (
     <div className="lk-video-conference" {...props}>
       {isWeb() && (
diff --git a/packages/react/src/utils.ts b/packages/react/src/utils.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { mergeProps as mergePropsReactAria } from './mergeProps';
+import { log } from '@livekit/components-core';
 
 /** @internal */
 export function isProp<U extends HTMLElement, T extends React.HTMLAttributes<U>>(
@@ -31,3 +32,21 @@ export function cloneSingleChild(
     return child;
   });
 }
+
+/**
+ * @internal
+ */
+export function warnAboutMissingStyles(el?: HTMLElement) {
+  if (
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    (process?.env?.NODE_ENV === 'dev' || process?.env?.NODE_ENV === 'development') &&
+    typeof window !== 'undefined'
+  ) {
+    const target = el ?? document.querySelector('.lk-room-container');
+    if (target && !getComputedStyle(target).getPropertyValue('--lk-has-imported-styles')) {
+      log.warn(
+        "It looks like you're not using the `@livekit/components-styles package`. To render the UI with the default styling, please import it in your layout or page.",
+      );
+    }
+  }
+}
diff --git a/packages/styles/scss/components/_room.scss b/packages/styles/scss/components/_room.scss
@@ -5,6 +5,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  --has-imported-styles: 'true'; // helper var used to warn users if they haven't imported the styles package
 
   *[class^='lk-'],
   *[class*=' lk-'] {

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ import type { LocalUserChoices } from '@livekit/components-core';`
`19`	`19`	`import { log } from '@livekit/components-core';`
`20`	`20`	`import { ParticipantPlaceholder } from '../assets/images';`
`21`	`21`	`import { useMediaDevices, usePersistentUserChoices } from '../hooks';`
	`22`	`+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';`
`22`	`23`
`23`	`24`	`const DEFAULT_USER_CHOICES: LocalUserChoices = {`
`24`	`25`	`username: '',`
`@@ -369,6 +370,8 @@ export function PreJoin({`
`369`	`370`	`}`
`370`	`371`	`}`
`371`	`372`
	`373`	`+ useWarnAboutMissingStyles();`
	`374`	`+`
`372`	`375`	`return (`
`373`	`376`	`<div className="lk-prejoin" {...htmlProps}>`
`374`	`377`	`<div className="lk-video-container">`