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

Optimizations

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
assets/media/styles.css
+13
View File
@@ -89,6 +89,18 @@
margin-bottom: 1rem;
}
.article__tags__dropbox {
width: 90%;
margin: 0;
padding: 0;
z-index: 1;
position: absolute;
list-style: none;
overflow: auto;
max-height: 200px;
border: 1px solid rgba(0, 0, 0, .9);
}
.article__tags ul {
color: var(--vscode-dropdown-foreground);
background-color: var(--vscode-dropdown-background);
@@ -96,6 +108,7 @@
.article__tags li {
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
cursor: pointer;
}
.article__tags li:active {
package-lock.json
Generated
+115 -626
View File
File diff suppressed because it is too large Load Diff
package.json
+7 -10
View File
@@ -217,31 +217,28 @@
"test-compile": "tsc -p ./"
},
"devDependencies": {
"@types/glob": "^7.1.1",
"@types/glob": "7.1.3",
"@types/js-yaml": "3.12.1",
"@types/mocha": "^5.2.6",
"@types/node": "^10.12.21",
"@types/node": "10.17.48",
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0",
"@types/vscode": "1.51.0",
"date-fns": "2.0.1",
"glob": "^7.1.4",
"glob": "7.1.6",
"gray-matter": "4.0.2",
"html-loader": "1.3.2",
"html-webpack-plugin": "4.5.0",
"mocha": "^6.1.4",
"ts-loader": "8.0.3",
"tslint": "^5.12.1",
"tslint": "6.1.3",
"typescript": "4.0.2",
"vscode-test": "^1.0.2",
"webpack": "4.44.2",
"webpack-cli": "3.3.12"
},
"dependencies": {
"webpack-cli": "3.3.12",
"@iarna/toml": "2.2.3",
"@material-ui/core": "4.11.1",
"@material-ui/lab": "4.0.0-alpha.56",
"react": "17.0.1",
"react-dom": "17.0.1"
}
},
"dependencies": {}
}
src/test/runTest.ts
-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();
src/test/suite/extension.test.ts
-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));
});
});
src/test/suite/index.ts
-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);
}
});
});
}
src/viewpanel/components/DateAction.tsx
+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 (
src/viewpanel/components/PublishAction.tsx
+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 (
src/viewpanel/components/SlugAction.tsx
+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 (
src/viewpanel/components/TagPicker.tsx
+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>
))}
src/viewpanel/helper/MessageHelper.ts
+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 });
}
}
}
src/viewpanel/hooks/useMessages.tsx
+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
};
}
src/viewpanel/index.tsx
+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);
src/webview/ExplorerView.ts
+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();
}
});