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

HMR support for panel development

Browse Source
This commit is contained in:
Elio Struyf
2022-01-12 14:09:59 +01:00
parent dee30923ff
commit b83c565e29
11 changed files with 151 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/commands/Dashboard.ts
+5 -4
View File
@@ -175,14 +175,15 @@ export class Dashboard {
*/
private static getWebviewContent(webView: Webview, extensionPath: Uri): string {
const dashboardFile = "dashboardWebView.js";
const localServerUrl = "http://localhost:9000";
const localPort = `9000`;
const localServerUrl = `localhost:${localPort}`;
let scriptUri = "";
const isProd = Extension.getInstance().isProductionMode;
if (isProd) {
scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', dashboardFile)).toString();
} else {
scriptUri = `${localServerUrl}/${dashboardFile}`;
scriptUri = `http://${localServerUrl}/${dashboardFile}`;
}
const nonce = WebviewHelper.getNonce();
@@ -194,10 +195,10 @@ export class Dashboard {
const csp = [
`default-src 'none';`,
`img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'`,
`script-src ${isProd ? `'nonce-${nonce}'` : "http://localhost:9000 http://0.0.0.0:9000"}`,
`script-src ${isProd ? `'nonce-${nonce}'` : `http://${localServerUrl} http://0.0.0.0:${localPort}`}`,
`style-src ${webView.cspSource} 'self' 'unsafe-inline'`,
`font-src ${webView.cspSource}`,
`connect-src https://o1022172.ingest.sentry.io ${isProd ? `` : "ws://localhost:9000 ws://0.0.0.0:9000 http://localhost:9000 http://0.0.0.0:9000"}`
`connect-src https://o1022172.ingest.sentry.io ${isProd ? `` : `ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`}`
];
return `
src/dashboardWebView/components/Media/Item.tsx
-2
View File
@@ -194,8 +194,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
const extension = fileInfo?.pop();
const name = fileInfo?.join('.');
console.log(viewData?.data)
return (
<>
<li className="group relative bg-gray-50 dark:bg-vulcan-200 hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-100 dark:border-vulcan-50">
src/explorerView/ExplorerView.ts
+28 -7
View File
@@ -9,7 +9,7 @@ import { Command } from "../panelWebView/Command";
import { CommandToCode } from '../panelWebView/CommandToCode';
import { Article } from '../commands';
import { TagType } from '../panelWebView/TagType';
import { ContentType, CustomTaxonomyData, DraftField, Field, ScriptType, TaxonomyType } from '../models';
import { CustomTaxonomyData, DraftField, Field, ScriptType, TaxonomyType } from '../models';
import { exec } from 'child_process';
import { fromMarkdown } from 'mdast-util-from-markdown';
import { Content } from 'mdast';
@@ -737,35 +737,56 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
* @param webView
*/
private getWebviewContent(webView: Webview): string {
const ext = Extension.getInstance();
const dashboardFile = "panelWebView.js";
const localPort = `9001`;
const localServerUrl = `localhost:${localPort}`;
const extensionPath = ext.extensionPath;
const styleVSCodeUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'vscode.css'));
const styleResetUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'reset.css'));
const stylesUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'styles.css'));
const scriptUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'dist', 'panelWebView.js'));
const nonce = WebviewHelper.getNonce();
const ext = Extension.getInstance();
const version = ext.getVersion();
const isBeta = ext.isBetaVersion();
let scriptUri = "";
const isProd = Extension.getInstance().isProductionMode;
if (isProd) {
scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', dashboardFile)).toString();
} else {
scriptUri = `http://${localServerUrl}/${dashboardFile}`;
}
const csp = [
`default-src 'none';`,
`img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'`,
`script-src ${isProd ? `'nonce-${nonce}'` : `http://${localServerUrl} http://0.0.0.0:${localPort}`}`,
`style-src ${webView.cspSource} 'self' 'unsafe-inline'`,
`font-src ${webView.cspSource}`,
`connect-src https://o1022172.ingest.sentry.io ${isProd ? `` : `ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`}`
];
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'; script-src 'nonce-${nonce}'; style-src ${webView.cspSource} 'self' 'unsafe-inline'; font-src ${webView.cspSource}; connect-src https://o1022172.ingest.sentry.io">
<meta http-equiv="Content-Security-Policy" content="${csp.join('; ')}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${styleResetUri}" rel="stylesheet">
<link href="${styleVSCodeUri}" rel="stylesheet">
<link href="${stylesUri}" rel="stylesheet">
<title>Front Matter</title>
<title>Front Matter Panel</title>
</head>
<body>
<div id="app" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" ></div>
<div id="app" data-isProd="${isProd}" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" ></div>
<img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`panel-${version.installedVersion}`}" alt="Daily usage" />
<script nonce="${nonce}" src="${scriptUri}"></script>
<script ${isProd ? `nonce="${nonce}"` : ""} src="${scriptUri}"></script>
</body>
</html>
`;
src/panelWebView/components/Fields/PreviewImageField.tsx
-2
View File
@@ -38,8 +38,6 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
onChange(newValue);
}
console.log(fieldName, value, filePath, parents)
return (
<div className={`metadata_field`}>
<VsLabel>
src/panelWebView/components/Metadata.tsx
+1 -1
View File
@@ -243,7 +243,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
return (
<Collapsible id={`tags`} title="Metadata" className={`inherit z-20`}>
{
renderFields(contentType?.fields, metadata)
}
src/panelWebView/index.tsx
+23 -14
View File
@@ -18,23 +18,32 @@ import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
// import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
const elm = document.querySelector("#app");
const version = elm?.getAttribute("data-version");
const environment = elm?.getAttribute("data-environment");
Sentry.init({
dsn: SENTRY_LINK,
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 0, // No performance tracing required
release: version || "",
environment: environment || "",
ignoreErrors: ['ResizeObserver loop limit exceeded']
});
declare const acquireVsCodeApi: <T = unknown>() => {
getState: () => T;
setState: (data: T) => void;
postMessage: (msg: unknown) => void;
};
render(<ViewPanel />, elm);
const elm = document.querySelector("#app");
if (elm) {
const version = elm?.getAttribute("data-version");
const environment = elm?.getAttribute("data-environment");
const isProd = elm?.getAttribute("data-isProd");
if (isProd === "true") {
Sentry.init({
dsn: SENTRY_LINK,
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 0, // No performance tracing required
release: version || "",
environment: environment || "",
ignoreErrors: ['ResizeObserver loop limit exceeded']
});
}
render(<ViewPanel />, elm);
}
// Webpack HMR
if ((module as any).hot) (module as any).hot.accept();