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

vscode helper integration

Browse Source
This commit is contained in:
Elio Struyf
2021-09-06 10:33:40 +02:00
parent 7e705ccfd8
commit 2d7c9cfc05
17 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+15
View File
@@ -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",
package.json
+1
View File
@@ -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",
src/commands/Dashboard.ts
+2 -2
View File
@@ -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();
src/pagesView/components/Header/Filter.tsx
+8 -1
View File
@@ -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<IFilterProps> = ({label, activeItem
return (
<div className="flex items-center">
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={label} title={activeItem || DEFAULT_VALUE} />
<MenuButton
label={(
<>
<FilterIcon className={`inline-block w-5 h-5 mr-1`} /><span>{label}</span>
</>
)}
title={activeItem || DEFAULT_VALUE} />
<MenuItems>
<MenuItem
src/pagesView/components/Header/ViewSwitch.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { ViewAtom, ViewType, SettingsSelector } from '../../state';
import { ViewGridIcon, ViewListIcon } from '@heroicons/react/solid';
import { MessageHelper } from '../../../helpers/MessageHelper';
import { Messenger } from '@estruyf/vscode/dist/client';
import { DashboardMessage } from '../../DashboardMessage';
export interface IViewSwitchProps {}
@@ -14,7 +14,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (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(() => {
src/pagesView/components/Item.tsx
+2 -2
View File
@@ -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<IItemProps> = ({ fmFilePath, date, ti
const view = useRecoilValue(ViewSelector);
const openFile = () => {
MessageHelper.sendMessage(DashboardMessage.openFile, fmFilePath);
Messenger.send(DashboardMessage.openFile, fmFilePath);
};
if (view === ViewType.Grid) {
src/pagesView/components/Menu/MenuButton.tsx
+3 -2
View File
@@ -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<IMenuButtonProps> = ({label, title, disabled}: React.PropsWithChildren<IMenuButtonProps>) => {
return (
<div className={`${disabled ? 'opacity-50' : ''}`}>
<div className={`inline-flex items-center ${disabled ? 'opacity-50' : ''}`}>
<span className={`text-gray-500 dark:text-whisper-700 mr-2 font-medium`}>{label}:</span>
<Menu.Button disabled={disabled} className="group inline-flex justify-center text-sm font-medium text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600">
{title}
<ChevronDownIcon
src/pagesView/components/Startup.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { SETTINGS_DASHBOARD_OPENONSTART } from '../../constants';
import { MessageHelper } from '../../helpers/MessageHelper';
import { Messenger } from '@estruyf/vscode/dist/client';
import { DashboardMessage } from '../DashboardMessage';
import { Settings } from '../models/Settings';
@@ -13,7 +13,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({settings}: Reac
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
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(() => {
src/pagesView/components/Steps/StepsToGetStarted.tsx
+3 -3
View File
@@ -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<IStepsToGetStartedProps>
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. <b>Start by clicking on this action</b>.',
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<IStepsToGetStartedProps>
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
}
];
src/pagesView/components/WelcomeScreen.tsx
+2 -2
View File
@@ -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<IWelcomeScreenProps> = ({set
React.useEffect(() => {
return () => {
MessageHelper.sendMessage(DashboardMessage.reload)
Messenger.send(DashboardMessage.reload)
};
}, ['']);
src/pagesView/hooks/useMessages.tsx
+5 -8
View File
@@ -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<boolean>(false);
const [pages, setPages] = useState<Page[]>([]);
const [settings, setSettings] = useRecoilState(SettingsAtom);
window.addEventListener('message', event => {
const message = event.data;
Messenger.listen((message: EventData<any>) => {
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 {
src/pagesView/state/atom/CategoryAtom.ts
+3 -1
View File
@@ -1,6 +1,8 @@
import { atom } from 'recoil';
export const DEFAULT_CATEGORY_STATE = "";
export const CategoryAtom = atom<string | null>({
key: 'CategoryAtom',
default: ""
default: DEFAULT_CATEGORY_STATE
});
src/pagesView/state/atom/FolderAtom.ts
+3 -1
View File
@@ -1,6 +1,8 @@
import { atom } from 'recoil';
export const DEFAULT_FOLDER_STATE = null;
export const FolderAtom = atom<string | null>({
key: 'FolderAtom',
default: null
default: DEFAULT_FOLDER_STATE
});
src/pagesView/state/atom/SortingAtom.ts
+3 -1
View File
@@ -1,7 +1,9 @@
import { atom } from 'recoil';
import { SortOption } from '../../constants/SortOption';
export const DEFAULT_SORTING_OPTION = SortOption.LastModified;
export const SortingAtom = atom<SortOption>({
key: 'SortingAtom',
default: SortOption.LastModified
default: DEFAULT_SORTING_OPTION
});
src/pagesView/state/atom/TagAtom.ts
+3 -1
View File
@@ -1,6 +1,8 @@
import { atom } from 'recoil';
export const DEFAULT_TAG_STATE = "";
export const TagAtom = atom<string | null>({
key: 'TagAtom',
default: ""
default: DEFAULT_TAG_STATE
});
src/viewpanel/components/FolderAndFiles.tsx
+5 -5
View File
@@ -22,18 +22,18 @@ export const FolderAndFiles: React.FunctionComponent<IFolderAndFilesProps> = ({d
<Collapsible id={`${isBase ? "base_" : ""}content`} title="Recently modified">
<div className="information">
{
data.map((folder: FolderInfo) => (
<>
data.map((folder: FolderInfo, idx) => (
<div key={`container-${folder.title}-${idx}`}>
{folder.lastModified ? (
<div key={folder.title}>
<div key={`${folder.title}-${idx}`}>
<FileList folderName={folder.title} totalFiles={folder.files} files={folder.lastModified} />
</div>
) : (
isBase ? (
<VsLabel>{folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''}</VsLabel>
<VsLabel key={`${folder.title}-${idx}`}>{folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''}</VsLabel>
) : null
)}
</>
</div>
))
}
</div>
src/webview/ExplorerView.ts
+2 -2
View File
@@ -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 `
<!DOCTYPE html>