Optimizations

This commit is contained in:
Elio Struyf
2020-12-02 20:38:27 +01:00
parent c162f997e7
commit 12002ebea0
14 changed files with 181 additions and 770 deletions
-23
View File
@@ -1,23 +0,0 @@
import * as path from 'path';
import { runTests } from 'vscode-test';
async function main() {
try {
// The folder containing the Extension Manifest package.json
// Passed to `--extensionDevelopmentPath`
const extensionDevelopmentPath = path.resolve(__dirname, '../../');
// The path to test runner
// Passed to --extensionTestsPath
const extensionTestsPath = path.resolve(__dirname, './suite/index');
// Download VS Code, unzip it and run the integration test
await runTests({ extensionDevelopmentPath, extensionTestsPath });
} catch (err) {
console.error('Failed to run tests');
process.exit(1);
}
}
main();
-18
View File
@@ -1,18 +0,0 @@
import * as assert from 'assert';
import { before } from 'mocha';
// You can import and use all API from the 'vscode' module
// as well as import your extension to test it
import * as vscode from 'vscode';
// import * as myExtension from '../extension';
suite('Extension Test Suite', () => {
before(() => {
vscode.window.showInformationMessage('Start all tests.');
});
test('Sample test', () => {
assert.equal(-1, [1, 2, 3].indexOf(5));
assert.equal(-1, [1, 2, 3].indexOf(0));
});
});
-37
View File
@@ -1,37 +0,0 @@
import * as path from 'path';
import * as Mocha from 'mocha';
import * as glob from 'glob';
export function run(): Promise<void> {
// Create the mocha test
const mocha = new Mocha({
ui: 'tdd',
});
mocha.useColors(true);
const testsRoot = path.resolve(__dirname, '..');
return new Promise((c, e) => {
glob('**/**.test.js', { cwd: testsRoot }, (err, files) => {
if (err) {
return e(err);
}
// Add files to the test suite
files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)));
try {
// Run the mocha test
mocha.run(failures => {
if (failures > 0) {
e(new Error(`${failures} tests failed.`));
} else {
c();
}
});
} catch (err) {
e(err);
}
});
});
}
+2 -3
View File
@@ -2,15 +2,14 @@
import * as React from 'react';
import { CommandToCode } from '../CommandToCode';
import useMessages from '../hooks/useMessages';
import { MessageHelper } from '../helper/MessageHelper';
export interface IDateActionProps {}
export const DateAction: React.FunctionComponent<IDateActionProps> = (props: React.PropsWithChildren<IDateActionProps>) => {
const { sendMessage } = useMessages();
const setDate = () => {
sendMessage(CommandToCode.updateDate);
MessageHelper.sendMessage(CommandToCode.updateDate);
};
return (
+2 -3
View File
@@ -2,18 +2,17 @@
import * as React from 'react';
import { CommandToCode } from '../CommandToCode';
import useMessages from '../hooks/useMessages';
import { MessageHelper } from '../helper/MessageHelper';
export interface IPublishActionProps {
draft: boolean;
}
export const PublishAction: React.FunctionComponent<IPublishActionProps> = (props: React.PropsWithChildren<IPublishActionProps>) => {
const { sendMessage } = useMessages();
const { draft } = props;
const publish = () => {
sendMessage(CommandToCode.publish);
MessageHelper.sendMessage(CommandToCode.publish);
};
return (
+2 -3
View File
@@ -2,7 +2,7 @@ import * as React from 'react';
import { SlugHelper } from '../../helpers/SlugHelper';
import { Slug } from '../../models/PanelSettings';
import { CommandToCode } from '../CommandToCode';
import useMessages from '../hooks/useMessages';
import { MessageHelper } from '../helper/MessageHelper';
export interface ISlugActionProps {
value: string;
@@ -12,13 +12,12 @@ export interface ISlugActionProps {
export const SlugAction: React.FunctionComponent<ISlugActionProps> = (props: React.PropsWithChildren<ISlugActionProps>) => {
const { value, crntValue, slugOpts } = props;
const { sendMessage } = useMessages();
let slug = SlugHelper.createSlug(value);
slug = `${slugOpts.prefix}${slug}${slugOpts.suffix}`;
const optimize = () => {
sendMessage(CommandToCode.updateSlug);
MessageHelper.sendMessage(CommandToCode.updateSlug);
};
return (
+4 -29
View File
@@ -1,11 +1,10 @@
import * as React from 'react';
import useAutocomplete from '@material-ui/lab/useAutocomplete';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import { Tags } from './Tags';
import { usePrevious } from '../hooks/usePrevious';
import useMessages from '../hooks/useMessages';
import { CommandToCode } from '../CommandToCode';
import { TagType } from '../TagType';
import { MessageHelper } from '../helper/MessageHelper';
export interface ITagPickerProps {
type: string;
@@ -13,35 +12,11 @@ export interface ITagPickerProps {
options: string[];
}
const useStyles = makeStyles(() =>
createStyles({
label: {
display: 'block',
},
input: {
width: 200,
},
listbox: {
width: 200,
margin: 0,
padding: 0,
zIndex: 1,
position: 'absolute',
listStyle: 'none',
overflow: 'auto',
maxHeight: 200,
border: '1px solid rgba(0,0,0,.8)'
},
}),
);
export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
const { type, crntSelected, options } = props;
const [ selected, setSelected ] = React.useState<string[]>([]);
const prevSelected = usePrevious(crntSelected);
const { sendMessage } = useMessages();
const classes = useStyles();
const { getRootProps, getInputProps, getListboxProps, getOptionProps, groupedOptions } = useAutocomplete({
id: 'use-autocomplete',
options: options,
@@ -64,7 +39,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
const sendUpdate = (values: string[]) => {
const cmdType = type === TagType.tags ? CommandToCode.updateTags : CommandToCode.updateCategories;
sendMessage(cmdType, values);
MessageHelper.sendMessage(cmdType, values);
};
React.useEffect(() => {
@@ -78,12 +53,12 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
<h3>{type}</h3>
<div {...getRootProps()}>
<input className={classes.input} {...getInputProps()} placeholder={`Pick your ${type.toLowerCase()}`}/>
<input {...getInputProps()} placeholder={`Pick your ${type.toLowerCase()}`} />
</div>
{
groupedOptions.length > 0 ? (
<ul className={classes.listbox} {...getListboxProps()}>
<ul className={`article__tags__dropbox`} {...getListboxProps()}>
{groupedOptions.map((option, index) => (
<li key={index} {...getOptionProps({ option, index })}>{option}</li>
))}
+26
View File
@@ -0,0 +1,26 @@
import { CommandToCode } from "../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() {
MessageHelper.vscode = acquireVsCodeApi();
return MessageHelper.vscode;
}
public static sendMessage = (command: CommandToCode, data?: any) => {
if (data) {
MessageHelper.vscode.postMessage({ command, data });
} else {
MessageHelper.vscode.postMessage({ command });
}
}
}
+3 -15
View File
@@ -2,14 +2,9 @@ import { useState, useEffect } from 'react';
import { PanelSettings } from '../../models/PanelSettings';
import { Command } from '../Command';
import { CommandToCode } from '../CommandToCode';
import { MessageHelper } from '../helper/MessageHelper';
declare const acquireVsCodeApi: <T = unknown>() => {
getState: () => T;
setState: (data: T) => void;
postMessage: (msg: unknown) => void;
};
const vscode = acquireVsCodeApi();
const vscode = MessageHelper.getVsCodeAPI();
export default function useMessages() {
const [metadata, setMetadata] = useState<any>({});
@@ -42,13 +37,6 @@ export default function useMessages() {
return {
metadata,
settings,
loading,
sendMessage: (command: CommandToCode, data?: any) => {
if (data) {
vscode.postMessage({ command, data });
} else {
vscode.postMessage({ command });
}
}
loading
};
}
+6
View File
@@ -2,5 +2,11 @@ import * as React from "react";
import { render } from "react-dom";
import { ViewPanel } from "./ViewPanel";
declare const acquireVsCodeApi: <T = unknown>() => {
getState: () => T;
setState: (data: T) => void;
postMessage: (msg: unknown) => void;
};
const elm = document.querySelector("#app");
render(<ViewPanel />, elm);
+1 -3
View File
@@ -8,7 +8,6 @@ import { Article } from '../commands';
import { TagType } from '../viewpanel/TagType';
export class ExplorerView implements WebviewViewProvider, Disposable {
public static readonly viewType = "frontMatter.explorer";
private static instance: ExplorerView;
@@ -66,7 +65,6 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
this.disposable = Disposable.from(
webviewView.onDidDispose(() => { webviewView.webview.html = ""; }, this),
// window.onDidChangeWindowState(() => { console.log(`onDidChangeWindowState visible`, this.visible); }, this)
);
webviewView.webview.onDidReceiveMessage(msg => {
@@ -95,7 +93,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
webviewView.onDidChangeVisibility(() => {
if (this.visible) {
this.getFileData();
// this.getFileData();
}
});