From 2d7c9cfc05018cf639bbcf4354d1bb8e80ac93bf Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Mon, 6 Sep 2021 10:33:40 +0200 Subject: [PATCH] vscode helper integration --- package-lock.json | 15 +++++++++++++++ package.json | 1 + src/commands/Dashboard.ts | 4 ++-- src/pagesView/components/Header/Filter.tsx | 9 ++++++++- src/pagesView/components/Header/ViewSwitch.tsx | 4 ++-- src/pagesView/components/Item.tsx | 4 ++-- src/pagesView/components/Menu/MenuButton.tsx | 5 +++-- src/pagesView/components/Startup.tsx | 4 ++-- .../components/Steps/StepsToGetStarted.tsx | 6 +++--- src/pagesView/components/WelcomeScreen.tsx | 4 ++-- src/pagesView/hooks/useMessages.tsx | 13 +++++-------- src/pagesView/state/atom/CategoryAtom.ts | 4 +++- src/pagesView/state/atom/FolderAtom.ts | 4 +++- src/pagesView/state/atom/SortingAtom.ts | 4 +++- src/pagesView/state/atom/TagAtom.ts | 4 +++- src/viewpanel/components/FolderAndFiles.tsx | 10 +++++----- src/webview/ExplorerView.ts | 4 ++-- 17 files changed, 64 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index b46b0fb3..29437c74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -209,6 +209,15 @@ "algoliasearch": "^4.0.0" } }, + "@estruyf/vscode": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@estruyf/vscode/-/vscode-0.0.1.tgz", + "integrity": "sha512-YsSstrShDca/7gc5rXnF/VYjvxPVEb9EX7dK2do7s2V1gfXN+cEp7aQf0h313n+5KO4mu11sagMHQXkWsX9L6Q==", + "dev": true, + "requires": { + "@types/vscode-webview": "1.57.0" + } + }, "@headlessui/react": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz", @@ -407,6 +416,12 @@ "integrity": "sha512-C/jZ35OT5k/rsJyAK8mS1kM++vMcm89oSWegkzxRCvHllIq0cToZAkIDs6eCY4SKrvik3nrhELizyLcM0onbQA==", "dev": true }, + "@types/vscode-webview": { + "version": "1.57.0", + "resolved": "https://registry.npmjs.org/@types/vscode-webview/-/vscode-webview-1.57.0.tgz", + "integrity": "sha512-x3Cb/SMa1IwRHfSvKaZDZOTh4cNoG505c3NjTqGlMC082m++x/ETUmtYniDsw6SSmYzZXO8KBNhYxR0+VqymqA==", + "dev": true + }, "@types/webpack": { "version": "4.41.25", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.25.tgz", diff --git a/package.json b/package.json index 5b62eeeb..2dc7b340 100644 --- a/package.json +++ b/package.json @@ -391,6 +391,7 @@ }, "devDependencies": { "@bendera/vscode-webview-elements": "0.6.2", + "@estruyf/vscode": "0.0.1", "@headlessui/react": "1.4.0", "@heroicons/react": "1.0.4", "@iarna/toml": "2.2.3", diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 6ebda4df..9ad90629 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -5,7 +5,6 @@ import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace } f import { SettingsHelper } from '../helpers'; import { TaxonomyType } from '../models'; import { Folders } from './Folders'; -import { getNonce } from '../helpers/getNonce'; import { DashboardCommand } from '../pagesView/DashboardCommand'; import { DashboardMessage } from '../pagesView/DashboardMessage'; import { Page } from '../pagesView/models/Page'; @@ -17,6 +16,7 @@ import { Settings } from '../pagesView/models/Settings'; import { Extension } from '../helpers/Extension'; import { parseJSON } from 'date-fns'; import { ViewType } from '../pagesView/state'; +import { WebviewHelper } from '@estruyf/vscode'; export class Dashboard { @@ -238,7 +238,7 @@ export class Dashboard { private static getWebviewContent(webView: Webview, extensionPath: Uri): string { const scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', 'pages.js')); - const nonce = getNonce(); + const nonce = WebviewHelper.getNonce(); const version = Extension.getInstance().getVersion(); diff --git a/src/pagesView/components/Header/Filter.tsx b/src/pagesView/components/Header/Filter.tsx index ab4d2268..15e985a2 100644 --- a/src/pagesView/components/Header/Filter.tsx +++ b/src/pagesView/components/Header/Filter.tsx @@ -1,4 +1,5 @@ import { Menu } from '@headlessui/react'; +import { FilterIcon } from '@heroicons/react/solid'; import * as React from 'react'; import { MenuButton, MenuItem, MenuItems } from '../Menu'; @@ -20,7 +21,13 @@ export const Filter: React.FunctionComponent = ({label, activeItem return (
- + + {label} + + )} + title={activeItem || DEFAULT_VALUE} /> = (props: Rea const toggleView = () => { const newView = view === ViewType.Grid ? ViewType.List : ViewType.Grid; setView(newView); - MessageHelper.sendMessage(DashboardMessage.setPageViewType, newView); + Messenger.send(DashboardMessage.setPageViewType, newView); }; React.useEffect(() => { diff --git a/src/pagesView/components/Item.tsx b/src/pagesView/components/Item.tsx index f1c4c4b9..8180d3f5 100644 --- a/src/pagesView/components/Item.tsx +++ b/src/pagesView/components/Item.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { useRecoilValue } from 'recoil'; -import { MessageHelper } from '../../helpers/MessageHelper'; import { MarkdownIcon } from '../../viewpanel/components/Icons/MarkdownIcon'; import { DashboardMessage } from '../DashboardMessage'; import { Page } from '../models/Page'; import { ViewSelector, ViewType } from '../state'; import { DateField } from './DateField'; import { Status } from './Status'; +import { Messenger } from '@estruyf/vscode/dist/client'; export interface IItemProps extends Page {} @@ -14,7 +14,7 @@ export const Item: React.FunctionComponent = ({ fmFilePath, date, ti const view = useRecoilValue(ViewSelector); const openFile = () => { - MessageHelper.sendMessage(DashboardMessage.openFile, fmFilePath); + Messenger.send(DashboardMessage.openFile, fmFilePath); }; if (view === ViewType.Grid) { diff --git a/src/pagesView/components/Menu/MenuButton.tsx b/src/pagesView/components/Menu/MenuButton.tsx index adf96521..52aa95d6 100644 --- a/src/pagesView/components/Menu/MenuButton.tsx +++ b/src/pagesView/components/Menu/MenuButton.tsx @@ -3,15 +3,16 @@ import { ChevronDownIcon } from '@heroicons/react/solid'; import * as React from 'react'; export interface IMenuButtonProps { - label: string; + label: string | JSX.Element; title: string; disabled?: boolean; } export const MenuButton: React.FunctionComponent = ({label, title, disabled}: React.PropsWithChildren) => { return ( -
+
{label}: + {title} = ({settings}: Reac const onChange = (e: React.ChangeEvent) => { setIsChecked(e.target.checked); - MessageHelper.sendMessage(DashboardMessage.updateSetting, { name: SETTINGS_DASHBOARD_OPENONSTART, value: e.target.checked }); + Messenger.send(DashboardMessage.updateSetting, { name: SETTINGS_DASHBOARD_OPENONSTART, value: e.target.checked }); }; React.useEffect(() => { diff --git a/src/pagesView/components/Steps/StepsToGetStarted.tsx b/src/pagesView/components/Steps/StepsToGetStarted.tsx index 49bd0394..9318752e 100644 --- a/src/pagesView/components/Steps/StepsToGetStarted.tsx +++ b/src/pagesView/components/Steps/StepsToGetStarted.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { MessageHelper } from '../../../helpers/MessageHelper'; +import { Messenger } from '@estruyf/vscode/dist/client'; import { DashboardMessage } from '../../DashboardMessage'; import { Settings } from '../../models/Settings'; import { Status } from '../../models/Status'; @@ -16,7 +16,7 @@ export const StepsToGetStarted: React.FunctionComponent name: 'Initialize project', description: 'Initialize the project with a template folder and sample markdown file. The template folder can be used to define your own templates. Start by clicking on this action.', status: settings.initialized ? Status.Completed : Status.NotStarted, - onClick: settings.initialized ? undefined : () => { MessageHelper.sendMessage(DashboardMessage.initializeProject); } + onClick: settings.initialized ? undefined : () => { Messenger.send(DashboardMessage.initializeProject); } }, { name: 'Register content folders (manual action)', @@ -27,7 +27,7 @@ export const StepsToGetStarted: React.FunctionComponent name: 'Show the dashboard', description: 'Once both actions are completed, click on this action to load the dashboard.', status: (settings.initialized && settings.folders && settings.folders.length > 0) ? Status.Active : Status.NotStarted, - onClick: (settings.initialized && settings.folders && settings.folders.length > 0) ? () => { MessageHelper.sendMessage(DashboardMessage.reload); } : undefined + onClick: (settings.initialized && settings.folders && settings.folders.length > 0) ? () => { Messenger.send(DashboardMessage.reload); } : undefined } ]; diff --git a/src/pagesView/components/WelcomeScreen.tsx b/src/pagesView/components/WelcomeScreen.tsx index e2569d28..aecb321c 100644 --- a/src/pagesView/components/WelcomeScreen.tsx +++ b/src/pagesView/components/WelcomeScreen.tsx @@ -1,7 +1,7 @@ import { HeartIcon, StarIcon } from '@heroicons/react/outline'; import * as React from 'react'; import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants/Links'; -import { MessageHelper } from '../../helpers/MessageHelper'; +import { Messenger } from '@estruyf/vscode/dist/client'; import { FrontMatterIcon } from '../../viewpanel/components/Icons/FrontMatterIcon'; import { GitHubIcon } from '../../viewpanel/components/Icons/GitHubIcon'; import { DashboardMessage } from '../DashboardMessage'; @@ -16,7 +16,7 @@ export const WelcomeScreen: React.FunctionComponent = ({set React.useEffect(() => { return () => { - MessageHelper.sendMessage(DashboardMessage.reload) + Messenger.send(DashboardMessage.reload) }; }, ['']); diff --git a/src/pagesView/hooks/useMessages.tsx b/src/pagesView/hooks/useMessages.tsx index b09ecf0d..99c43247 100644 --- a/src/pagesView/hooks/useMessages.tsx +++ b/src/pagesView/hooks/useMessages.tsx @@ -1,21 +1,18 @@ import { useState, useEffect } from 'react'; import { useRecoilState } from 'recoil'; -import { MessageHelper } from '../../helpers/MessageHelper'; import { DashboardCommand } from '../DashboardCommand'; import { DashboardMessage } from '../DashboardMessage'; import { Page } from '../models/Page'; import { SettingsAtom } from '../state'; - -const vscode = MessageHelper.getVsCodeAPI(); +import { Messenger } from '@estruyf/vscode/dist/client'; +import { EventData } from '@estruyf/vscode/dist/models'; export default function useMessages() { const [loading, setLoading] = useState(false); const [pages, setPages] = useState([]); const [settings, setSettings] = useRecoilState(SettingsAtom); - window.addEventListener('message', event => { - const message = event.data; - + Messenger.listen((message: EventData) => { switch (message.command) { case DashboardCommand.loading: setLoading(message.data); @@ -32,8 +29,8 @@ export default function useMessages() { useEffect(() => { setLoading(true); - vscode.postMessage({ command: DashboardMessage.getTheme }); - vscode.postMessage({ command: DashboardMessage.getData }); + Messenger.send(DashboardMessage.getTheme); + Messenger.send(DashboardMessage.getData); }, ['']); return { diff --git a/src/pagesView/state/atom/CategoryAtom.ts b/src/pagesView/state/atom/CategoryAtom.ts index 122c4ed4..318c94f2 100644 --- a/src/pagesView/state/atom/CategoryAtom.ts +++ b/src/pagesView/state/atom/CategoryAtom.ts @@ -1,6 +1,8 @@ import { atom } from 'recoil'; +export const DEFAULT_CATEGORY_STATE = ""; + export const CategoryAtom = atom({ key: 'CategoryAtom', - default: "" + default: DEFAULT_CATEGORY_STATE }); \ No newline at end of file diff --git a/src/pagesView/state/atom/FolderAtom.ts b/src/pagesView/state/atom/FolderAtom.ts index 5ecdee45..001f505d 100644 --- a/src/pagesView/state/atom/FolderAtom.ts +++ b/src/pagesView/state/atom/FolderAtom.ts @@ -1,6 +1,8 @@ import { atom } from 'recoil'; +export const DEFAULT_FOLDER_STATE = null; + export const FolderAtom = atom({ key: 'FolderAtom', - default: null + default: DEFAULT_FOLDER_STATE }); \ No newline at end of file diff --git a/src/pagesView/state/atom/SortingAtom.ts b/src/pagesView/state/atom/SortingAtom.ts index 51dd5aad..4f09461b 100644 --- a/src/pagesView/state/atom/SortingAtom.ts +++ b/src/pagesView/state/atom/SortingAtom.ts @@ -1,7 +1,9 @@ import { atom } from 'recoil'; import { SortOption } from '../../constants/SortOption'; +export const DEFAULT_SORTING_OPTION = SortOption.LastModified; + export const SortingAtom = atom({ key: 'SortingAtom', - default: SortOption.LastModified + default: DEFAULT_SORTING_OPTION }); \ No newline at end of file diff --git a/src/pagesView/state/atom/TagAtom.ts b/src/pagesView/state/atom/TagAtom.ts index 42849fa8..70938c08 100644 --- a/src/pagesView/state/atom/TagAtom.ts +++ b/src/pagesView/state/atom/TagAtom.ts @@ -1,6 +1,8 @@ import { atom } from 'recoil'; +export const DEFAULT_TAG_STATE = ""; + export const TagAtom = atom({ key: 'TagAtom', - default: "" + default: DEFAULT_TAG_STATE }); \ No newline at end of file diff --git a/src/viewpanel/components/FolderAndFiles.tsx b/src/viewpanel/components/FolderAndFiles.tsx index 5ba1b602..9cfba778 100644 --- a/src/viewpanel/components/FolderAndFiles.tsx +++ b/src/viewpanel/components/FolderAndFiles.tsx @@ -22,18 +22,18 @@ export const FolderAndFiles: React.FunctionComponent = ({d
{ - data.map((folder: FolderInfo) => ( - <> + data.map((folder: FolderInfo, idx) => ( +
{folder.lastModified ? ( -
+
) : ( isBase ? ( - {folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''} + {folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''} ) : null )} - +
)) }
diff --git a/src/webview/ExplorerView.ts b/src/webview/ExplorerView.ts index f127124e..7c670540 100644 --- a/src/webview/ExplorerView.ts +++ b/src/webview/ExplorerView.ts @@ -18,8 +18,8 @@ import { Notifications } from '../helpers/Notifications'; import { COMMAND_NAME } from '../constants/Extension'; import { Folders } from '../commands/Folders'; import { Preview } from '../commands/Preview'; -import { getNonce } from '../helpers/getNonce'; import { openFileInEditor } from '../helpers/openFileInEditor'; +import { WebviewHelper } from '@estruyf/vscode'; const FILE_LIMIT = 10; @@ -532,7 +532,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable { const stylesUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'styles.css')); const scriptUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'dist', 'viewpanel.js')); - const nonce = getNonce(); + const nonce = WebviewHelper.getNonce(); return `