adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-03 23:43:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Message handler updates

Browse Source
This commit is contained in:
Elio Struyf
2022-05-18 13:20:06 +02:00
parent efdbce2d08
commit 3abfbd5302
18 changed files with 57 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/helpers/MessageHelper.ts
-43
View File
@@ -1,43 +0,0 @@
import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
import { CommandToCode } from "../panelWebView/CommandToCode";
interface ClientVsCode<T> {
getState: () => T;
setState: (data: T) => void;
postMessage: (msg: unknown) => void;
}
declare const acquireVsCodeApi: <T = unknown>() => ClientVsCode<T>;
export class MessageHelper {
private static vscode: ClientVsCode<any>;
public static getVsCodeAPI() {
if (!MessageHelper.vscode) {
MessageHelper.vscode = acquireVsCodeApi();
}
return MessageHelper.vscode;
}
public static sendMessage = (command: CommandToCode | DashboardMessage, data?: any) => {
const vscode = MessageHelper.getVsCodeAPI();
if (data) {
vscode.postMessage({ command, data });
} else {
vscode.postMessage({ command });
}
}
public static getState = () => {
const vscode = MessageHelper.getVsCodeAPI();
return vscode.getState();
}
public static setState = (data: any) => {
const vscode = MessageHelper.getVsCodeAPI();
vscode.setState({
...data
});
}
}
src/panelWebView/components/BaseView.tsx
+6 -6
View File
@@ -1,7 +1,6 @@
import * as React from 'react';
import { CustomScript, FolderInfo, Mode, PanelSettings } from '../../models';
import { CommandToCode } from '../CommandToCode';
import { MessageHelper } from '../../helpers/MessageHelper';
import { Collapsible } from './Collapsible';
import { GlobalSettings } from './GlobalSettings';
import { OtherActions } from './OtherActions';
@@ -10,6 +9,7 @@ import { SponsorMsg } from './SponsorMsg';
import { StartServerButton } from './StartServerButton';
import { FeatureFlag } from '../../components/features/FeatureFlag';
import { FEATURE_FLAG } from '../../constants/Features';
import { Messenger } from '@estruyf/vscode/dist/client';
export interface IBaseViewProps {
settings: PanelSettings | undefined;
@@ -20,23 +20,23 @@ export interface IBaseViewProps {
const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndFiles, mode}: React.PropsWithChildren<IBaseViewProps>) => {
const openDashboard = () => {
MessageHelper.sendMessage(CommandToCode.openDashboard);
Messenger.send(CommandToCode.openDashboard);
};
const initProject = () => {
MessageHelper.sendMessage(CommandToCode.initProject);
Messenger.send(CommandToCode.initProject);
};
const createContent = () => {
MessageHelper.sendMessage(CommandToCode.createContent);
Messenger.send(CommandToCode.createContent);
};
const openPreview = () => {
MessageHelper.sendMessage(CommandToCode.openPreview);
Messenger.send(CommandToCode.openPreview);
};
const runBulkScript = (script: CustomScript) => {
MessageHelper.sendMessage(CommandToCode.runCustomScript, { title: script.title, script });
Messenger.send(CommandToCode.runCustomScript, { title: script.title, script });
};
const customActions: any[] = (settings?.scripts || []).filter(s => s.bulk && (s.type === "content" || !s.type));
src/panelWebView/components/Collapsible.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import * as React from 'react';
import { useEffect } from 'react';
import { MessageHelper } from '../../helpers/MessageHelper';
import { Command } from '../Command';
import { VsCollapsible } from './VscodeComponents';
@@ -16,7 +16,7 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
const collapseKey = `collapse-${id}`;
useEffect(() => {
const prevState = MessageHelper.getState();
const prevState: any = Messenger.getState();
if (!prevState || !prevState[collapseKey] || prevState[collapseKey] === null || prevState[collapseKey] === 'true') {
setIsOpen(true);
updateStorage(true);
@@ -32,8 +32,8 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
}, ['']);
const updateStorage = (value: boolean) => {
const prevState = MessageHelper.getState();
MessageHelper.setState({
const prevState: any = Messenger.getState();
Messenger.setState({
...prevState,
[collapseKey]: value.toString()
});
src/panelWebView/components/ContentType/ContentTypeValidator.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import { VSCodeButton, VSCodeDivider } from '@vscode/webview-ui-toolkit/react';
import * as React from 'react';
import { useMemo } from 'react';
import { MessageHelper } from '../../../helpers/MessageHelper';
import { Field } from '../../../models';
import { CommandToCode } from '../../CommandToCode';
import { IMetadata } from '../Metadata';
@@ -30,15 +30,15 @@ export const ContentTypeValidator: React.FunctionComponent<IContentTypeValidator
const generateContentType = () => {
MessageHelper.sendMessage(CommandToCode.generateContentType);
Messenger.send(CommandToCode.generateContentType);
};
const addMissingFields = () => {
MessageHelper.sendMessage(CommandToCode.addMissingFields);
Messenger.send(CommandToCode.addMissingFields);
};
const setContentType = () => {
MessageHelper.sendMessage(CommandToCode.setContentType);
Messenger.send(CommandToCode.setContentType);
};
src/panelWebView/components/CustomScript.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import { CommandToCode } from '../CommandToCode';
import { MessageHelper } from '../../helpers/MessageHelper';
import { ActionButton } from './ActionButton';
import { Messenger } from '@estruyf/vscode/dist/client';
export interface ICustomScriptProps {
title: string;
@@ -11,7 +11,7 @@ export interface ICustomScriptProps {
const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title, script}: React.PropsWithChildren<ICustomScriptProps>) => {
const runCustomScript = () => {
MessageHelper.sendMessage(CommandToCode.runCustomScript, { title, script });
Messenger.send(CommandToCode.runCustomScript, { title, script });
};
return (
src/panelWebView/components/Fields/FileField.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import { DocumentIcon, PaperClipIcon, TrashIcon } from '@heroicons/react/outline';
import { basename } from 'path';
import * as React from 'react';
import { useCallback, useMemo } from 'react';
import { MessageHelper } from '../../../helpers/MessageHelper';
import { BlockFieldData } from '../../../models';
import { CommandToCode } from '../../CommandToCode';
import { VsLabel } from '../VscodeComponents';
@@ -38,7 +38,7 @@ const File = ({ value, onRemove }: { value: string, onRemove: (value: string) =>
export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, multiple, filePath, fileExtensions, fieldName, value, parents, blockData, onChange }: React.PropsWithChildren<IFileFieldProps>) => {
const selectFile = useCallback(() => {
MessageHelper.sendMessage(CommandToCode.selectFile, {
Messenger.send(CommandToCode.selectFile, {
filePath,
fieldName,
value,
src/panelWebView/components/Fields/PreviewImage.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { MessageHelper } from '../../../helpers/MessageHelper';
import { Command } from '../../Command';
import { CommandToCode } from '../../CommandToCode';
import { ImageFallback } from './ImageFallback';
@@ -29,7 +29,7 @@ export const PreviewImage: React.FunctionComponent<IPreviewImageProps> = ({ valu
if (value?.webviewUrl) {
setImgUrl(value.webviewUrl);
} else {
MessageHelper.sendMessage(CommandToCode.getImageUrl, value)
Messenger.send(CommandToCode.getImageUrl, value)
}
}, [value]);
src/panelWebView/components/Fields/PreviewImageField.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import {PhotographIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { useCallback } from 'react';
import { MessageHelper } from '../../../helpers/MessageHelper';
import { BlockFieldData } from '../../../models';
import { CommandToCode } from '../../CommandToCode';
import { VsLabel } from '../VscodeComponents';
@@ -35,7 +35,7 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
}: React.PropsWithChildren<IPreviewImageFieldProps>) => {
const selectImage = useCallback(() => {
MessageHelper.sendMessage(CommandToCode.selectImage, {
Messenger.send(CommandToCode.selectImage, {
filePath: filePath,
fieldName,
value,
src/panelWebView/components/FileItem.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import * as React from 'react';
import { useMemo } from 'react';
import { DEFAULT_FILE_TYPES } from '../../constants/DefaultFileTypes';
import { MessageHelper } from '../../helpers/MessageHelper';
import { CommandToCode } from '../CommandToCode';
import { FileIcon } from './Icons/FileIcon';
import { MarkdownIcon } from './Icons/MarkdownIcon';
@@ -15,7 +15,7 @@ export interface IFileItemProps {
const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, folderName, path }: React.PropsWithChildren<IFileItemProps>) => {
const openFile = () => {
MessageHelper.sendMessage(CommandToCode.openInEditor, path);
Messenger.send(CommandToCode.openInEditor, path);
};
const itemName = useMemo(() => {
src/panelWebView/components/GlobalSettings.tsx
+5 -5
View File
@@ -1,12 +1,12 @@
import * as React from 'react';
import { PanelSettings } from '../../models';
import { CommandToCode } from '../CommandToCode';
import { MessageHelper } from '../../helpers/MessageHelper';
import { useDebounce } from '../../hooks/useDebounce';
import { Collapsible } from './Collapsible';
import { VsLabel } from './VscodeComponents';
import useStartCommand from '../hooks/useStartCommand';
import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
import { Messenger } from '@estruyf/vscode/dist/client';
export interface IGlobalSettingsProps {
settings: PanelSettings | undefined;
@@ -24,11 +24,11 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings
const debouncePreviewUrl = useDebounce(previewUrl, 1000);
const onDateCheck = () => {
MessageHelper.sendMessage(CommandToCode.updateModifiedUpdating, !modifiedDateUpdate);
Messenger.send(CommandToCode.updateModifiedUpdating, !modifiedDateUpdate);
};
const onHighlightCheck = () => {
MessageHelper.sendMessage(CommandToCode.updateFmHighlight, !fmHighlighting);
Messenger.send(CommandToCode.updateFmHighlight, !fmHighlighting);
};
const previewChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -54,14 +54,14 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings
React.useEffect(() => {
if (isDirty) {
setIsDirty(false);
MessageHelper.sendMessage(CommandToCode.updatePreviewUrl, debouncePreviewUrl);
Messenger.send(CommandToCode.updatePreviewUrl, debouncePreviewUrl);
}
}, [debouncePreviewUrl]);
React.useEffect(() => {
if (isDirty) {
setIsDirty(false);
MessageHelper.sendMessage(CommandToCode.updateStartCommand, debounceStartCommand);
Messenger.send(CommandToCode.updateStartCommand, debounceStartCommand);
}
}, [debounceStartCommand]);
src/panelWebView/components/Metadata.tsx
+2 -2
View File
@@ -1,7 +1,6 @@
import * as React from 'react';
import { BlockFieldData, Field, PanelSettings } from '../../models';
import { CommandToCode } from '../CommandToCode';
import { MessageHelper } from '../../helpers/MessageHelper';
import { TagType } from '../TagType';
import { Collapsible } from './Collapsible';
import "react-datepicker/dist/react-datepicker.css";
@@ -10,6 +9,7 @@ import { WrapperField } from './Fields/WrapperField';
import { ContentTypeValidator } from './ContentType/ContentTypeValidator';
import { FeatureFlag } from '../../components/features/FeatureFlag';
import { FEATURE_FLAG } from '../../constants';
import { Messenger } from '@estruyf/vscode/dist/client';
export interface IMetadata {
[prop: string]: string[] | string | null | IMetadata;
@@ -30,7 +30,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, features,
return;
}
MessageHelper.sendMessage(CommandToCode.updateMetadata, {
Messenger.send(CommandToCode.updateMetadata, {
field,
parents,
value
src/panelWebView/components/OtherActions.tsx
+7 -7
View File
@@ -1,7 +1,6 @@
import * as React from 'react';
import { PanelSettings } from '../../models';
import { CommandToCode } from '../CommandToCode';
import { MessageHelper } from '../../helpers/MessageHelper';
import { Collapsible } from './Collapsible';
import { BugIcon } from './Icons/BugIcon';
import { CenterIcon } from './Icons/CenterIcon';
@@ -12,6 +11,7 @@ import { TemplateIcon } from './Icons/TemplateIcon';
import { WritingIcon } from './Icons/WritingIcon';
import { OtherActionButton } from './OtherActionButton';
import { ISSUE_LINK } from '../../constants/Links';
import { Messenger } from '@estruyf/vscode/dist/client';
export interface IOtherActionsProps {
isFile: boolean;
@@ -22,23 +22,23 @@ export interface IOtherActionsProps {
const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, settings, isBase}: React.PropsWithChildren<IOtherActionsProps>) => {
const openSettings = () => {
MessageHelper.sendMessage(CommandToCode.openSettings);
Messenger.send(CommandToCode.openSettings);
};
const openFile = () => {
MessageHelper.sendMessage(CommandToCode.openFile);
Messenger.send(CommandToCode.openFile);
};
const openProject = () => {
MessageHelper.sendMessage(CommandToCode.openProject);
Messenger.send(CommandToCode.openProject);
};
const createAsTemplate = () => {
MessageHelper.sendMessage(CommandToCode.createTemplate);
Messenger.send(CommandToCode.createTemplate);
};
const toggleWritingSettings = () => {
MessageHelper.sendMessage(CommandToCode.toggleWritingSettings);
Messenger.send(CommandToCode.toggleWritingSettings);
};
return (
@@ -46,7 +46,7 @@ const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, sett
<Collapsible id={`${isBase ? "base_" : ""}other_actions`} title="Other actions" className={`other_actions`}>
<OtherActionButton className={settings?.writingSettingsEnabled ? "active" : ""} onClick={toggleWritingSettings} disabled={typeof settings?.writingSettingsEnabled === "undefined"}><WritingIcon /> <span>{settings?.writingSettingsEnabled ? "Writing settings enabled" : "Enable writing settings"}</span></OtherActionButton>
<OtherActionButton onClick={() => MessageHelper.sendMessage(CommandToCode.toggleCenterMode)}>
<OtherActionButton onClick={() => Messenger.send(CommandToCode.toggleCenterMode)}>
<CenterIcon /> <span>Toggle center mode</span>
</OtherActionButton>
src/panelWebView/components/Preview.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import * as React from 'react';
import { MessageHelper } from '../../helpers/MessageHelper';
import { CommandToCode } from '../CommandToCode';
import { ActionButton } from './ActionButton';
@@ -10,7 +10,7 @@ export interface IPreviewProps {
const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.PropsWithChildren<IPreviewProps>) => {
const open = () => {
MessageHelper.sendMessage(CommandToCode.openPreview);
Messenger.send(CommandToCode.openPreview);
};
if (!slug) {
src/panelWebView/components/PublishAction.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import * as React from 'react';
import { MessageHelper } from '../../helpers/MessageHelper';
import { CommandToCode } from '../CommandToCode';
import { ActionButton } from './ActionButton';
@@ -13,7 +13,7 @@ const PublishAction: React.FunctionComponent<IPublishActionProps> = (props: Reac
const { draft } = props;
const publish = () => {
MessageHelper.sendMessage(CommandToCode.publish);
Messenger.send(CommandToCode.publish);
};
return (
src/panelWebView/components/SlugAction.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import * as React from 'react';
import { MessageHelper } from '../../helpers/MessageHelper';
import { CommandToCode } from '../CommandToCode';
import { ActionButton } from './ActionButton';
@@ -8,7 +8,7 @@ export interface ISlugActionProps {}
const SlugAction: React.FunctionComponent<ISlugActionProps> = ({}: React.PropsWithChildren<ISlugActionProps>) => {
const optimize = () => {
MessageHelper.sendMessage(CommandToCode.updateSlug);
Messenger.send(CommandToCode.updateSlug);
};
return (
src/panelWebView/components/StartServerButton.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import * as React from 'react';
import { FrameworkDetectors } from '../../constants/FrameworkDetectors';
import { MessageHelper } from '../../helpers/MessageHelper';
import { PanelSettings } from '../../models';
import { CommandToCode } from '../CommandToCode';
import useStartCommand from '../hooks/useStartCommand';
@@ -13,7 +12,7 @@ export const StartServerButton: React.FunctionComponent<IStartServerButtonProps>
const { startCommand } = useStartCommand(settings);
const startLocalServer = (command: string) => {
MessageHelper.sendMessage(CommandToCode.frameworkCommand, { command });
Messenger.send(CommandToCode.frameworkCommand, { command });
};
return (
src/panelWebView/components/TagPicker.tsx
+8 -8
View File
@@ -6,9 +6,9 @@ import { TagType } from '../TagType';
import Downshift from 'downshift';
import { AddIcon } from './Icons/AddIcon';
import { VsLabel } from './VscodeComponents';
import { MessageHelper } from '../../helpers/MessageHelper';
import { BlockFieldData, CustomTaxonomyData } from '../../models';
import { useCallback, useMemo } from 'react';
import { Messenger } from '@estruyf/vscode/dist/client';
export interface ITagPickerProps {
type: TagType;
@@ -52,11 +52,11 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
*/
const onCreate = (tag: string) => {
if (type === TagType.tags) {
MessageHelper.sendMessage(CommandToCode.addTagToSettings, tag);
Messenger.send(CommandToCode.addTagToSettings, tag);
} else if (type === TagType.categories) {
MessageHelper.sendMessage(CommandToCode.addCategoryToSettings, tag);
Messenger.send(CommandToCode.addCategoryToSettings, tag);
} else if (type === TagType.custom) {
MessageHelper.sendMessage(CommandToCode.addToCustomTaxonomy, {
Messenger.send(CommandToCode.addToCustomTaxonomy, {
id: taxonomyId,
name: fieldName,
option: tag
@@ -70,26 +70,26 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
*/
const sendUpdate = (values: string[]) => {
if (type === TagType.tags) {
MessageHelper.sendMessage(CommandToCode.updateTags, {
Messenger.send(CommandToCode.updateTags, {
fieldName,
values,
parents,
blockData
});
} else if (type === TagType.categories) {
MessageHelper.sendMessage(CommandToCode.updateCategories, {
Messenger.send(CommandToCode.updateCategories, {
fieldName,
values,
parents,
blockData
});
} else if (type === TagType.keywords) {
MessageHelper.sendMessage(CommandToCode.updateKeywords, {
Messenger.send(CommandToCode.updateKeywords, {
values,
parents
});
} else if (type === TagType.custom) {
MessageHelper.sendMessage(CommandToCode.updateCustomTaxonomy, {
Messenger.send(CommandToCode.updateCustomTaxonomy, {
id: taxonomyId,
name: fieldName,
options: values,
src/panelWebView/hooks/useMessages.tsx
+3 -5
View File
@@ -1,14 +1,12 @@
import { useState, useEffect } from 'react';
import { GeneralCommands } from '../../constants';
import { MessageHelper } from '../../helpers/MessageHelper';
import { Mode } from '../../models/Mode';
import { DashboardData } from '../../models/DashboardData';
import { FolderInfo, PanelSettings } from '../../models/PanelSettings';
import { Command } from '../Command';
import { CommandToCode } from '../CommandToCode';
import { TagType } from '../TagType';
const vscode = MessageHelper.getVsCodeAPI();
import { Messenger } from '@estruyf/vscode/dist/client';
export default function useMessages() {
const [metadata, setMetadata] = useState<any>({});
@@ -68,8 +66,8 @@ export default function useMessages() {
setLoading(false);
}, 5000);
vscode.postMessage({ command: CommandToCode.getData });
vscode.postMessage({ command: CommandToCode.getMode });
Messenger.send(CommandToCode.getData);
Messenger.send(CommandToCode.getMode);
}, []);
return {