From d36178c44f61e57b0318c8aa3824a90bfd4d7efe Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 19 Oct 2021 14:46:47 +0200
Subject: [PATCH] Added component display names for better error reporting

---
 src/panelWebView/components/ActionButton.tsx  |  7 ++-
 src/panelWebView/components/Actions.tsx       |  7 ++-
 .../components/ArticleDetails.tsx             |  7 ++-
 src/panelWebView/components/BaseView.tsx      |  7 ++-
 src/panelWebView/components/Collapsible.tsx   |  7 ++-
 src/panelWebView/components/CustomScript.tsx  |  7 ++-
 .../components/Fields/TextField.tsx           |  2 -
 src/panelWebView/components/FileItem.tsx      |  7 ++-
 src/panelWebView/components/FileList.tsx      |  7 ++-
 .../components/FolderAndFiles.tsx             |  7 ++-
 .../components/GlobalSettings.tsx             |  7 ++-
 src/panelWebView/components/Icon.tsx          |  7 ++-
 src/panelWebView/components/Metadata.tsx      |  7 ++-
 .../components/OtherActionButton.tsx          |  7 ++-
 src/panelWebView/components/OtherActions.tsx  |  7 ++-
 src/panelWebView/components/Preview.tsx       |  7 ++-
 src/panelWebView/components/PublishAction.tsx |  7 ++-
 src/panelWebView/components/SeoDetails.tsx    |  7 ++-
 src/panelWebView/components/SeoFieldInfo.tsx  |  7 ++-
 .../components/SeoKeywordInfo.tsx             |  7 ++-
 src/panelWebView/components/SeoKeywords.tsx   |  9 ++--
 src/panelWebView/components/SeoStatus.tsx     | 44 ++++++++++++-------
 src/panelWebView/components/SlugAction.tsx    |  7 ++-
 src/panelWebView/components/Spinner.tsx       |  7 ++-
 src/panelWebView/components/SponsorMsg.tsx    |  7 ++-
 src/panelWebView/components/Tag.tsx           |  7 ++-
 src/panelWebView/components/TagPicker.tsx     |  7 ++-
 src/panelWebView/components/Tags.tsx          |  7 ++-
 src/panelWebView/components/ValidInfo.tsx     |  7 ++-
 29 files changed, 162 insertions(+), 75 deletions(-)

diff --git a/src/panelWebView/components/ActionButton.tsx b/src/panelWebView/components/ActionButton.tsx
index 799a88d4..b96a76ab 100644
--- a/src/panelWebView/components/ActionButton.tsx
+++ b/src/panelWebView/components/ActionButton.tsx
@@ -7,10 +7,13 @@ export interface IActionButtonProps {
   onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
 }
 
-export const ActionButton: React.FunctionComponent<IActionButtonProps> = ({className, onClick, disabled,title}: React.PropsWithChildren<IActionButtonProps>) => {
+const ActionButton: React.FunctionComponent<IActionButtonProps> = ({className, onClick, disabled,title}: React.PropsWithChildren<IActionButtonProps>) => {
   return (
     <div className={`article__action`}>
       <button onClick={onClick} className={className || ""} disabled={disabled}>{title}</button>
     </div>
   );
-};
\ No newline at end of file
+};
+
+ActionButton.displayName = 'ActionButton';
+export { ActionButton };
\ No newline at end of file
diff --git a/src/panelWebView/components/Actions.tsx b/src/panelWebView/components/Actions.tsx
index 1d0d511e..b07ffcc7 100644
--- a/src/panelWebView/components/Actions.tsx
+++ b/src/panelWebView/components/Actions.tsx
@@ -10,7 +10,7 @@ export interface IActionsProps {
   settings: PanelSettings;
 }
 
-export const Actions: React.FunctionComponent<IActionsProps> = (props: React.PropsWithChildren<IActionsProps>) => {
+const Actions: React.FunctionComponent<IActionsProps> = (props: React.PropsWithChildren<IActionsProps>) => {
   const { metadata, settings } = props;
 
   if (!metadata || Object.keys(metadata).length === 0 || !settings) {
@@ -35,4 +35,7 @@ export const Actions: React.FunctionComponent<IActionsProps> = (props: React.Pro
       </div>
     </Collapsible>
   );
-};
\ No newline at end of file
+};
+
+Actions.displayName = 'Actions';
+export { Actions };
\ No newline at end of file
diff --git a/src/panelWebView/components/ArticleDetails.tsx b/src/panelWebView/components/ArticleDetails.tsx
index a0ba922f..3969cc69 100644
--- a/src/panelWebView/components/ArticleDetails.tsx
+++ b/src/panelWebView/components/ArticleDetails.tsx
@@ -9,7 +9,7 @@ export interface IArticleDetailsProps {
   }
 }
 
-export const ArticleDetails: React.FunctionComponent<IArticleDetailsProps> = ({details}: React.PropsWithChildren<IArticleDetailsProps>) => {
+const ArticleDetails: React.FunctionComponent<IArticleDetailsProps> = ({details}: React.PropsWithChildren<IArticleDetailsProps>) => {
   
   if (!details || (details.headings === undefined && details.paragraphs === undefined)) {
     return null;
@@ -46,4 +46,7 @@ export const ArticleDetails: React.FunctionComponent<IArticleDetailsProps> = ({d
       </VsTable>
     </div>
   );
-};
\ No newline at end of file
+};
+
+ArticleDetails.displayName = 'ArticleDetails';
+export { ArticleDetails };
\ No newline at end of file
diff --git a/src/panelWebView/components/BaseView.tsx b/src/panelWebView/components/BaseView.tsx
index 40ea7009..e036d2b0 100644
--- a/src/panelWebView/components/BaseView.tsx
+++ b/src/panelWebView/components/BaseView.tsx
@@ -13,7 +13,7 @@ export interface IBaseViewProps {
   folderAndFiles: FolderInfo[] | undefined;
 }
 
-export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndFiles}: React.PropsWithChildren<IBaseViewProps>) => {
+const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndFiles}: React.PropsWithChildren<IBaseViewProps>) => {
   
   const openDashboard = () => {
     MessageHelper.sendMessage(CommandToCode.openDashboard);
@@ -48,4 +48,7 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, fol
       <SponsorMsg />
     </div>
   );
-};
\ No newline at end of file
+};
+
+BaseView.displayName = 'BaseView';
+export { BaseView };
\ No newline at end of file
diff --git a/src/panelWebView/components/Collapsible.tsx b/src/panelWebView/components/Collapsible.tsx
index c1a07107..93f6598d 100644
--- a/src/panelWebView/components/Collapsible.tsx
+++ b/src/panelWebView/components/Collapsible.tsx
@@ -10,7 +10,7 @@ export interface ICollapsibleProps {
   sendUpdate?: (open: boolean) => void;
 }
 
-export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
+const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
   const [ isOpen, setIsOpen ] = React.useState(false);
   const collapseKey = `collapse-${id}`;
 
@@ -55,4 +55,7 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, chi
       </div>
     </VsCollapsible>
   );
-};
\ No newline at end of file
+};
+
+Collapsible.displayName = 'Collapsible';
+export { Collapsible };
\ No newline at end of file
diff --git a/src/panelWebView/components/CustomScript.tsx b/src/panelWebView/components/CustomScript.tsx
index 76991086..d39eb2ea 100644
--- a/src/panelWebView/components/CustomScript.tsx
+++ b/src/panelWebView/components/CustomScript.tsx
@@ -8,7 +8,7 @@ export interface ICustomScriptProps {
   script: string;
 }
 
-export const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title, script}: React.PropsWithChildren<ICustomScriptProps>) => {
+const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title, script}: React.PropsWithChildren<ICustomScriptProps>) => {
 
   const runCustomScript = () => {
     MessageHelper.sendMessage(CommandToCode.runCustomScript, { title, script });
@@ -17,4 +17,7 @@ export const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title
   return (
     <ActionButton onClick={runCustomScript} title={title} />
   );
-};
\ No newline at end of file
+};
+
+CustomScript.displayName = 'CustomScript';
+export { CustomScript };
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/TextField.tsx b/src/panelWebView/components/Fields/TextField.tsx
index 4a8c66c5..41623872 100644
--- a/src/panelWebView/components/Fields/TextField.tsx
+++ b/src/panelWebView/components/Fields/TextField.tsx
@@ -59,8 +59,6 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine,
         )
       }
 
-      
-
       {
         limit && limit > 0 && (text || "").length > limit && (
           <div className={`metadata_field__limit`}>
diff --git a/src/panelWebView/components/FileItem.tsx b/src/panelWebView/components/FileItem.tsx
index f75fbf94..1d2db400 100644
--- a/src/panelWebView/components/FileItem.tsx
+++ b/src/panelWebView/components/FileItem.tsx
@@ -9,7 +9,7 @@ export interface IFileItemProps {
   path: string;
 }
 
-export const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React.PropsWithChildren<IFileItemProps>) => {
+const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React.PropsWithChildren<IFileItemProps>) => {
   
   const openFile = () => {
     MessageHelper.sendMessage(CommandToCode.openInEditor, path);
@@ -29,4 +29,7 @@ export const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }
       <span>{name}</span>
     </li>
   );
-};
\ No newline at end of file
+};
+
+FileItem.displayName = 'FileItem';
+export { FileItem };
\ No newline at end of file
diff --git a/src/panelWebView/components/FileList.tsx b/src/panelWebView/components/FileList.tsx
index 857d6373..85b8d9e3 100644
--- a/src/panelWebView/components/FileList.tsx
+++ b/src/panelWebView/components/FileList.tsx
@@ -9,7 +9,7 @@ export interface IFileListProps {
   totalFiles: number;
 }
 
-export const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, totalFiles}: React.PropsWithChildren<IFileListProps>) => {
+const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, totalFiles}: React.PropsWithChildren<IFileListProps>) => {
 
   if (!files || files.length === 0) {
     return null;
@@ -28,4 +28,7 @@ export const FileList: React.FunctionComponent<IFileListProps> = ({files, folder
       </ul>
     </div>
   );
-};
\ No newline at end of file
+};
+
+FileList.displayName = 'FileList';
+export { FileList };
\ No newline at end of file
diff --git a/src/panelWebView/components/FolderAndFiles.tsx b/src/panelWebView/components/FolderAndFiles.tsx
index 9cfba778..93610cf3 100644
--- a/src/panelWebView/components/FolderAndFiles.tsx
+++ b/src/panelWebView/components/FolderAndFiles.tsx
@@ -9,7 +9,7 @@ export interface IFolderAndFilesProps {
   isBase?: boolean;
 }
 
-export const FolderAndFiles: React.FunctionComponent<IFolderAndFilesProps> = ({data, isBase}: React.PropsWithChildren<IFolderAndFilesProps>) => {
+const FolderAndFiles: React.FunctionComponent<IFolderAndFilesProps> = ({data, isBase}: React.PropsWithChildren<IFolderAndFilesProps>) => {
 
   if (!data) {
     return null;
@@ -42,4 +42,7 @@ export const FolderAndFiles: React.FunctionComponent<IFolderAndFilesProps> = ({d
       }
     </>
   );
-};
\ No newline at end of file
+};
+
+FolderAndFiles.displayName = 'FolderAndFiles';
+export { FolderAndFiles };
\ No newline at end of file
diff --git a/src/panelWebView/components/GlobalSettings.tsx b/src/panelWebView/components/GlobalSettings.tsx
index 85fd8446..fe503b15 100644
--- a/src/panelWebView/components/GlobalSettings.tsx
+++ b/src/panelWebView/components/GlobalSettings.tsx
@@ -11,7 +11,7 @@ export interface IGlobalSettingsProps {
   isBase?: boolean;
 }
 
-export const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings, isBase}: React.PropsWithChildren<IGlobalSettingsProps>) => {
+const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings, isBase}: React.PropsWithChildren<IGlobalSettingsProps>) => {
   const { modifiedDateUpdate, fmHighlighting } = settings || {};
   const [ previewUrl, setPreviewUrl ] = React.useState<string>("");
   const [ isDirty, setIsDirty ] = React.useState<boolean>(false);
@@ -65,4 +65,7 @@ export const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({s
       </Collapsible>
     </>
   );
-};
\ No newline at end of file
+};
+
+GlobalSettings.displayName = 'GlobalSettings';
+export { GlobalSettings };
\ No newline at end of file
diff --git a/src/panelWebView/components/Icon.tsx b/src/panelWebView/components/Icon.tsx
index 81848dd3..96cc048b 100644
--- a/src/panelWebView/components/Icon.tsx
+++ b/src/panelWebView/components/Icon.tsx
@@ -4,7 +4,10 @@ export interface IIconProps {
   name: string;
 }
 
-export const Icon: React.FunctionComponent<IIconProps> = ({ name }: React.PropsWithChildren<IIconProps>) => {
+const Icon: React.FunctionComponent<IIconProps> = ({ name }: React.PropsWithChildren<IIconProps>) => {
   
   return (<i className={`codicon codicon-${name}`}></i>);
-};
\ No newline at end of file
+};
+
+Icon.displayName = 'Icon';
+export { Icon };
\ No newline at end of file
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index dc42d039..eff704c1 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -26,7 +26,7 @@ export interface IMetadataProps {
   unsetFocus: () => void;
 }
 
-export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata, focusElm, unsetFocus}: React.PropsWithChildren<IMetadataProps>) => {
+const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata, focusElm, unsetFocus}: React.PropsWithChildren<IMetadataProps>) => {
   const contentType = useContentType(settings, metadata);
 
   const sendUpdate = (field: string | undefined, value: any) => {
@@ -200,4 +200,7 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
       }
     </Collapsible>
   );
-};
\ No newline at end of file
+};
+
+Metadata.displayName = 'Metadata';
+export { Metadata };
\ No newline at end of file
diff --git a/src/panelWebView/components/OtherActionButton.tsx b/src/panelWebView/components/OtherActionButton.tsx
index a9641fea..308c9071 100644
--- a/src/panelWebView/components/OtherActionButton.tsx
+++ b/src/panelWebView/components/OtherActionButton.tsx
@@ -6,10 +6,13 @@ export interface IOtherActionButtonProps {
   onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
 }
 
-export const OtherActionButton: React.FunctionComponent<IOtherActionButtonProps> = ({ className, disabled, onClick, children}: React.PropsWithChildren<IOtherActionButtonProps>) => {
+const OtherActionButton: React.FunctionComponent<IOtherActionButtonProps> = ({ className, disabled, onClick, children}: React.PropsWithChildren<IOtherActionButtonProps>) => {
   return (
     <div className={`ext_link_block`}>
       <button onClick={onClick} className={className || ""} disabled={disabled}>{children}</button>
     </div>
   );
-};
\ No newline at end of file
+};
+
+OtherActionButton.displayName = 'OtherActionButton';
+export { OtherActionButton };
\ No newline at end of file
diff --git a/src/panelWebView/components/OtherActions.tsx b/src/panelWebView/components/OtherActions.tsx
index 6603fce3..a3362fe1 100644
--- a/src/panelWebView/components/OtherActions.tsx
+++ b/src/panelWebView/components/OtherActions.tsx
@@ -19,7 +19,7 @@ export interface IOtherActionsProps {
   isBase?: boolean;
 }
 
-export const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, settings, isBase}: React.PropsWithChildren<IOtherActionsProps>) => {
+const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, settings, isBase}: React.PropsWithChildren<IOtherActionsProps>) => {
 
   const openSettings = () => {
     MessageHelper.sendMessage(CommandToCode.openSettings);
@@ -64,4 +64,7 @@ export const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFil
       </Collapsible>
     </>
   );
-};
\ No newline at end of file
+};
+
+OtherActions.displayName = 'OtherActions';
+export { OtherActions };
\ No newline at end of file
diff --git a/src/panelWebView/components/Preview.tsx b/src/panelWebView/components/Preview.tsx
index 5f0d063c..738cc3be 100644
--- a/src/panelWebView/components/Preview.tsx
+++ b/src/panelWebView/components/Preview.tsx
@@ -7,7 +7,7 @@ export interface IPreviewProps {
   slug: string;
 }
 
-export const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.PropsWithChildren<IPreviewProps>) => {
+const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.PropsWithChildren<IPreviewProps>) => {
 
   const open = () => {
     MessageHelper.sendMessage(CommandToCode.openPreview);
@@ -20,4 +20,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.Pr
   return (
     <ActionButton onClick={open} title={`Open preview`} />
   );
-};
\ No newline at end of file
+};
+
+Preview.displayName = 'Preview';
+export { Preview };
\ No newline at end of file
diff --git a/src/panelWebView/components/PublishAction.tsx b/src/panelWebView/components/PublishAction.tsx
index 55d98941..e9012c02 100644
--- a/src/panelWebView/components/PublishAction.tsx
+++ b/src/panelWebView/components/PublishAction.tsx
@@ -9,7 +9,7 @@ export interface IPublishActionProps {
   draft: boolean;
 }
 
-export const PublishAction: React.FunctionComponent<IPublishActionProps> = (props: React.PropsWithChildren<IPublishActionProps>) => {
+const PublishAction: React.FunctionComponent<IPublishActionProps> = (props: React.PropsWithChildren<IPublishActionProps>) => {
   const { draft } = props;
 
   const publish = () => {
@@ -19,4 +19,7 @@ export const PublishAction: React.FunctionComponent<IPublishActionProps> = (prop
   return (
     <ActionButton onClick={publish} className={`${draft ? "" : "secondary"}`} title={draft ? "Publish" : "Revert to draft"} />
   );
-};
\ No newline at end of file
+};
+
+PublishAction.displayName = 'PublishAction';
+export { PublishAction };
\ No newline at end of file
diff --git a/src/panelWebView/components/SeoDetails.tsx b/src/panelWebView/components/SeoDetails.tsx
index 27c91680..52e44d7c 100644
--- a/src/panelWebView/components/SeoDetails.tsx
+++ b/src/panelWebView/components/SeoDetails.tsx
@@ -9,7 +9,7 @@ export interface ISeoDetailsProps {
   noValidation?: boolean;
 }
 
-export const SeoDetails: React.FunctionComponent<ISeoDetailsProps> = (props: React.PropsWithChildren<ISeoDetailsProps>) => {
+const SeoDetails: React.FunctionComponent<ISeoDetailsProps> = (props: React.PropsWithChildren<ISeoDetailsProps>) => {
   const { allowedLength, title, value, valueTitle, noValidation } = props;
 
   const validate = () => {
@@ -38,4 +38,7 @@ export const SeoDetails: React.FunctionComponent<ISeoDetailsProps> = (props: Rea
       </VsTable>
     </div>
   );
-};
\ No newline at end of file
+};
+
+SeoDetails.displayName = 'SeoDetails';
+export { SeoDetails };
\ No newline at end of file
diff --git a/src/panelWebView/components/SeoFieldInfo.tsx b/src/panelWebView/components/SeoFieldInfo.tsx
index 2b13dd05..d61cf4f5 100644
--- a/src/panelWebView/components/SeoFieldInfo.tsx
+++ b/src/panelWebView/components/SeoFieldInfo.tsx
@@ -9,7 +9,7 @@ export interface ISeoFieldInfoProps {
   isValid?: boolean;
 }
 
-export const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ title, value, recommendation, isValid }: React.PropsWithChildren<ISeoFieldInfoProps>) => {
+const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ title, value, recommendation, isValid }: React.PropsWithChildren<ISeoFieldInfoProps>) => {
   return (
     <VsTableRow>
       <VsTableCell className={`table__cell table__title`}>{title}</VsTableCell>
@@ -19,4 +19,7 @@ export const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ titl
       </VsTableCell>
     </VsTableRow>
   );
-};
\ No newline at end of file
+};
+
+SeoFieldInfo.displayName = 'SeoFieldInfo';
+export { SeoFieldInfo };
\ No newline at end of file
diff --git a/src/panelWebView/components/SeoKeywordInfo.tsx b/src/panelWebView/components/SeoKeywordInfo.tsx
index 4f2dd8d8..bdf0b451 100644
--- a/src/panelWebView/components/SeoKeywordInfo.tsx
+++ b/src/panelWebView/components/SeoKeywordInfo.tsx
@@ -10,7 +10,7 @@ export interface ISeoKeywordInfoProps {
   content: string;
 }
 
-export const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({keyword, title, description, slug, content}: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
+const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({keyword, title, description, slug, content}: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
 
   if (!keyword) {
     return null;
@@ -33,4 +33,7 @@ export const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({k
       </VsTableCell>
     </VsTableRow>
   );
-};
\ No newline at end of file
+};
+
+SeoKeywordInfo.displayName = 'SeoKeywordInfo';
+export { SeoKeywordInfo };
\ No newline at end of file
diff --git a/src/panelWebView/components/SeoKeywords.tsx b/src/panelWebView/components/SeoKeywords.tsx
index 46af35d9..177804d5 100644
--- a/src/panelWebView/components/SeoKeywords.tsx
+++ b/src/panelWebView/components/SeoKeywords.tsx
@@ -11,7 +11,7 @@ export interface ISeoKeywordsProps {
   content: string;
 }
 
-export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keywords, ...data}: React.PropsWithChildren<ISeoKeywordsProps>) => {
+const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keywords, ...data}: React.PropsWithChildren<ISeoKeywordsProps>) => {
 
   const validateKeywords = () => {
     if (!keywords) {
@@ -55,8 +55,9 @@ export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keyword
           }
         </VsTableBody>
       </VsTable>
-      
-      
     </div>
   );
-};
\ No newline at end of file
+};
+
+SeoKeywords.displayName = 'SeoKeywords';
+export { SeoKeywords };
\ No newline at end of file
diff --git a/src/panelWebView/components/SeoStatus.tsx b/src/panelWebView/components/SeoStatus.tsx
index 407b562c..357a8568 100644
--- a/src/panelWebView/components/SeoStatus.tsx
+++ b/src/panelWebView/components/SeoStatus.tsx
@@ -11,14 +11,34 @@ export interface ISeoStatusProps {
   data: any;
 }
 
-export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React.PropsWithChildren<ISeoStatusProps>) => {
+const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React.PropsWithChildren<ISeoStatusProps>) => {
   const { data, seo } = props;
   const { title } = data;
   const [ isOpen, setIsOpen ] = React.useState(true);
   const tableRef = React.useRef<HTMLElement>();
+  const pushUpdate = React.useRef((value: boolean) => {
+    setTimeout(() => {
+      setIsOpen(value);
+    }, 10);
+  }).current;
 
   const { descriptionField } = seo;
 
+  // Workaround for lit components not updating render
+  React.useEffect(() => {
+    setTimeout(() => {
+      let height = 0;
+
+      tableRef.current?.childNodes.forEach((elm: any) => {
+        height += elm.clientHeight;
+      });
+
+      if (height > 0 && tableRef.current) {
+        tableRef.current.style.height = `${height}px`;
+      }
+    }, 10);
+  }, [title, data[descriptionField], data?.articleDetails?.wordCount]);
+
   if (!title && !data[descriptionField]) {
     return null;
   }
@@ -72,24 +92,14 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
     );
   };
 
-  // Workaround for lit components not updating render
-  React.useEffect(() => {
-    setTimeout(() => {
-      let height = 0;
-
-      tableRef.current?.childNodes.forEach((elm: any) => {
-        height += elm.clientHeight;
-      });
-
-      if (height > 0 && tableRef.current) {
-        tableRef.current.style.height = `${height}px`;
-      }
-    }, 10);
-  }, [title, data[descriptionField], data?.articleDetails?.wordCount]);
+  
 
   return (
-    <Collapsible id={`seo`} title="SEO Status" sendUpdate={(value) => setIsOpen(value)}>
+    <Collapsible id={`seo`} title="SEO Status" sendUpdate={pushUpdate}>
       { renderContent() }
     </Collapsible>
   );
-};
\ No newline at end of file
+};
+
+SeoStatus.displayName = 'SeoStatus';
+export { SeoStatus };
\ No newline at end of file
diff --git a/src/panelWebView/components/SlugAction.tsx b/src/panelWebView/components/SlugAction.tsx
index 85f57809..15967aad 100644
--- a/src/panelWebView/components/SlugAction.tsx
+++ b/src/panelWebView/components/SlugAction.tsx
@@ -11,7 +11,7 @@ export interface ISlugActionProps {
   slugOpts: Slug;
 }
 
-export const SlugAction: React.FunctionComponent<ISlugActionProps> = (props: React.PropsWithChildren<ISlugActionProps>) => {
+const SlugAction: React.FunctionComponent<ISlugActionProps> = (props: React.PropsWithChildren<ISlugActionProps>) => {
   const { value, crntValue, slugOpts } = props;
 
   let slug = SlugHelper.createSlug(value);
@@ -24,4 +24,7 @@ export const SlugAction: React.FunctionComponent<ISlugActionProps> = (props: Rea
   return (
     <ActionButton onClick={optimize} disabled={crntValue === slug} title={`Optimize slug`} />
   );
-};
\ No newline at end of file
+};
+
+SlugAction.displayName = 'SlugAction';
+export { SlugAction };
\ No newline at end of file
diff --git a/src/panelWebView/components/Spinner.tsx b/src/panelWebView/components/Spinner.tsx
index 4b0d34ac..ebb4d187 100644
--- a/src/panelWebView/components/Spinner.tsx
+++ b/src/panelWebView/components/Spinner.tsx
@@ -2,8 +2,11 @@ import * as React from 'react';
 
 export interface ISpinnerProps {}
 
-export const Spinner: React.FunctionComponent<ISpinnerProps> = (props: React.PropsWithChildren<ISpinnerProps>) => {
+const Spinner: React.FunctionComponent<ISpinnerProps> = (props: React.PropsWithChildren<ISpinnerProps>) => {
   return (
     <div className="spinner">Loading...</div>
   );
-};
\ No newline at end of file
+};
+
+Spinner.displayName = 'Spinner';
+export { Spinner };
\ No newline at end of file
diff --git a/src/panelWebView/components/SponsorMsg.tsx b/src/panelWebView/components/SponsorMsg.tsx
index c0c92b48..e1c6c6bd 100644
--- a/src/panelWebView/components/SponsorMsg.tsx
+++ b/src/panelWebView/components/SponsorMsg.tsx
@@ -4,7 +4,7 @@ import { HeartIcon } from './Icons/HeartIcon';
 
 export interface ISponsorMsgProps {}
 
-export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = (props: React.PropsWithChildren<ISponsorMsgProps>) => {
+const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = (props: React.PropsWithChildren<ISponsorMsgProps>) => {
   return (
     <p className={`sponsor`}>
       <a href={SPONSOR_LINK} title="Sponsor Front Matter">
@@ -12,4 +12,7 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = (props: Rea
       </a>
     </p>
   );
-};
\ No newline at end of file
+};
+
+SponsorMsg.displayName = 'SponsorMsg';
+export { SponsorMsg };
\ No newline at end of file
diff --git a/src/panelWebView/components/Tag.tsx b/src/panelWebView/components/Tag.tsx
index 03f900e5..23527b0f 100644
--- a/src/panelWebView/components/Tag.tsx
+++ b/src/panelWebView/components/Tag.tsx
@@ -13,7 +13,7 @@ export interface ITagProps {
   onRemove: (tags: string) => void;
 }
 
-export const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithChildren<ITagProps>) => {
+const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithChildren<ITagProps>) => {
   const { value, className, title, onRemove, onCreate, disableConfigurable } = props;
 
   return (
@@ -25,4 +25,7 @@ export const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithCh
       <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <span><ArchiveIcon /></span></button>
     </div>
   );
-};
\ No newline at end of file
+};
+
+Tag.displayName = 'Tag';
+export { Tag };
\ No newline at end of file
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 9be777ef..e25fc294 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -20,7 +20,7 @@ export interface ITagPickerProps {
   disableConfigurable?: boolean;
 }
 
-export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
+const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
   const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable } = props;
   const [ selected, setSelected ] = React.useState<string[]>([]);
   const [ inputValue, setInputValue ] = React.useState<string>("");
@@ -194,4 +194,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
         disableConfigurable={!!disableConfigurable} />
     </div>
   );
-};
\ No newline at end of file
+};
+
+TagPicker.displayName = 'TagPicker';
+export { TagPicker };
\ No newline at end of file
diff --git a/src/panelWebView/components/Tags.tsx b/src/panelWebView/components/Tags.tsx
index 9a5091a3..a7f2cead 100644
--- a/src/panelWebView/components/Tags.tsx
+++ b/src/panelWebView/components/Tags.tsx
@@ -11,7 +11,7 @@ export interface ITagsProps {
   onRemove: (tags: string) => void;
 }
 
-export const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWithChildren<ITagsProps>) => {
+const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWithChildren<ITagsProps>) => {
   const { values, options, onCreate, onRemove, disableConfigurable } = props;
 
   const knownTags = values.filter(v => options.includes(v));
@@ -38,4 +38,7 @@ export const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWith
       }
     </div>
   );
-};
\ No newline at end of file
+};
+
+Tags.displayName = 'Tags';
+export { Tags };
\ No newline at end of file
diff --git a/src/panelWebView/components/ValidInfo.tsx b/src/panelWebView/components/ValidInfo.tsx
index 9936018a..431f923a 100644
--- a/src/panelWebView/components/ValidInfo.tsx
+++ b/src/panelWebView/components/ValidInfo.tsx
@@ -6,7 +6,7 @@ export interface IValidInfoProps {
   isValid: boolean;
 }
 
-export const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({isValid}: React.PropsWithChildren<IValidInfoProps>) => {
+const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({isValid}: React.PropsWithChildren<IValidInfoProps>) => {
   return (
     <>
       {
@@ -18,4 +18,7 @@ export const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({isValid}: R
       }
     </>
   );
-};
\ No newline at end of file
+};
+
+ValidInfo.displayName = 'ValidInfo';
+export { ValidInfo };
\ No newline at end of file