Updates for Webpack 5 support + HMR during dev

This commit is contained in:
Elio Struyf
2021-12-16 13:31:30 +01:00
parent 41cbcc4c46
commit 2d85b0a554
35 changed files with 4863 additions and 6894 deletions
+4659 -6775
View File
File diff suppressed because it is too large Load Diff
+15 -5
View File
@@ -1140,9 +1140,15 @@
]
},
"scripts": {
"vscode:prepublish": "npm run clean && webpack --mode production",
"build:ext": "npm run clean && webpack --mode development",
"dev:ext": "npm run clean && webpack --mode development --watch",
"dev:ext": "npm run clean && npm-run-all --parallel watch:*",
"vscode:prepublish": "npm run clean && npm-run-all --parallel prod:*",
"build:ext": "npm run clean && npm-run-all --parallel dev:build:*",
"watch:ext": "webpack --mode development --watch --config ./webpack/extension.config.js",
"watch:dashboard": "webpack serve --mode development --config ./webpack/dashboard.config.js",
"dev:build:ext": "webpack --mode development --config ./webpack/extension.config.js",
"dev:build:dashboard": "webpack --mode development --config ./webpack/dashboard.config.js",
"prod:ext": "webpack --mode production --config ./webpack/extension.config.js",
"prod:dashboard": "webpack --mode production --config ./webpack/dashboard.config.js",
"test-compile": "tsc -p ./",
"clean": "rimraf dist",
"start:site": "cd ./docs && npm run dev"
@@ -1167,6 +1173,7 @@
"@types/vscode": "^1.63.0",
"@vscode/codicons": "0.0.20",
"@vscode/webview-ui-toolkit": "^0.8.1",
"@webpack-cli/serve": "^1.6.0",
"autoprefixer": "^10.3.2",
"css-loader": "5.2.7",
"date-fns": "2.23.0",
@@ -1181,6 +1188,8 @@
"lodash.uniqby": "4.7.0",
"mdast-util-from-markdown": "1.0.0",
"node-json-db": "^1.3.0",
"npm-run-all": "^4.1.5",
"path-browserify": "^1.0.1",
"postcss": "^8.3.6",
"postcss-loader": "4.3.0",
"react": "17.0.1",
@@ -1196,8 +1205,9 @@
"typescript": "4.0.2",
"url-join-ts": "^1.0.5",
"wc-react": "github:estruyf/wc-react",
"webpack": "4.44.2",
"webpack": "^5.65.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "3.3.12"
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}
}
+22 -4
View File
@@ -174,7 +174,16 @@ export class Dashboard {
* @param webView
*/
private static getWebviewContent(webView: Webview, extensionPath: Uri): string {
const scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', 'pages.js'));
const dashboardFile = "dashboardWebView.js";
const localServerUrl = "http://localhost:9000";
let scriptUri = "";
const isProd = Extension.getInstance().isProductionMode;
if (isProd) {
scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', dashboardFile)).toString();
} else {
scriptUri = `${localServerUrl}/${dashboardFile}`;
}
const nonce = WebviewHelper.getNonce();
@@ -182,21 +191,30 @@ export class Dashboard {
const version = ext.getVersion();
const isBeta = ext.isBetaVersion();
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"}`,
`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"}`
];
return `
<!DOCTYPE html>
<html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
<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">
<title>Front Matter Dashboard</title>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
<div id="app" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${version.usedVersion ? "" : `data-showWelcome="true"`}></div>
<div id="app" data-isProd="${isProd}" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${version.usedVersion ? "" : `data-showWelcome="true"`}></div>
<img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
<script nonce="${nonce}" src="${scriptUri}"></script>
<script ${isProd ? `nonce="${nonce}"` : ""} src="${scriptUri}"></script>
</body>
</html>
`;
@@ -1,5 +1,5 @@
import { Menu } from '@headlessui/react';
import ChevronDownIcon from '@heroicons/react/outline/ChevronDownIcon';
import {ChevronDownIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { MenuItem, MenuItems } from './Menu';
@@ -1,5 +1,5 @@
import { Disclosure } from '@headlessui/react';
import ChevronRightIcon from '@heroicons/react/solid/ChevronRightIcon';
import {ChevronRightIcon} from '@heroicons/react/solid';
import * as React from 'react';
import { useRecoilValue } from 'recoil';
import { groupBy } from '../../../helpers/GroupBy';
@@ -1,4 +1,4 @@
import CollectionIcon from '@heroicons/react/outline/CollectionIcon';
import {CollectionIcon} from '@heroicons/react/outline';
import { basename, join } from 'path';
import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
@@ -1,4 +1,4 @@
import XCircleIcon from '@heroicons/react/solid/XCircleIcon';
import {XCircleIcon} from '@heroicons/react/solid';
import * as React from 'react';
import { useRecoilValue, useResetRecoilState } from 'recoil';
import { FolderSelector, TagSelector, CategorySelector, SortingAtom, FolderAtom, DEFAULT_FOLDER_STATE, TagAtom, CategoryAtom, DEFAULT_TAG_STATE, DEFAULT_CATEGORY_STATE } from '../../state';
@@ -1,5 +1,5 @@
import { Menu } from '@headlessui/react';
import FilterIcon from '@heroicons/react/solid/FilterIcon';
import {FilterIcon} from '@heroicons/react/solid';
import * as React from 'react';
import { MenuButton, MenuItem, MenuItems } from '../Menu';
@@ -14,7 +14,7 @@ import { CategoryAtom, DashboardViewAtom, SortingAtom, TagAtom } from '../../sta
import { Messenger } from '@estruyf/vscode/dist/client';
import { ClearFilters } from './ClearFilters';
import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
import PhotographIcon from '@heroicons/react/outline/PhotographIcon';
import {PhotographIcon} from '@heroicons/react/outline';
import { Pagination } from '../Media/Pagination';
import { ChoiceButton } from '../ChoiceButton';
import { Breadcrumb } from './Breadcrumb';
@@ -1,4 +1,4 @@
import SearchIcon from '@heroicons/react/solid/SearchIcon';
import {SearchIcon} from '@heroicons/react/solid';
import * as React from 'react';
import { useRecoilState } from 'recoil';
import { useDebounce } from '../../../hooks/useDebounce';
@@ -1,8 +1,7 @@
import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { ViewAtom, SettingsSelector } from '../../state';
import ViewListIcon from '@heroicons/react/solid/ViewListIcon';
import ViewGridIcon from '@heroicons/react/solid/ViewGridIcon';
import {ViewListIcon, ViewGridIcon} from '@heroicons/react/solid';
import { Messenger } from '@estruyf/vscode/dist/client';
import { DashboardMessage } from '../../DashboardMessage';
import { DashboardViewType } from '../../models';
@@ -1,5 +1,5 @@
import * as React from 'react';
import FolderAddIcon from '@heroicons/react/outline/FolderAddIcon';
import {FolderAddIcon} from '@heroicons/react/outline';
import { useRecoilValue } from 'recoil';
import { DashboardMessage } from '../../DashboardMessage';
import { SelectedMediaFolderAtom, SettingsSelector } from '../../state';
@@ -1,4 +1,4 @@
import FolderIcon from '@heroicons/react/solid/FolderIcon';
import {FolderIcon} from '@heroicons/react/solid';
import { basename } from 'path';
import * as React from 'react';
import { useRecoilState } from 'recoil';
@@ -1,6 +1,6 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import { Menu } from '@headlessui/react';
import PhotographIcon from '@heroicons/react/outline/PhotographIcon';
import {PhotographIcon} from '@heroicons/react/outline';
import { basename, dirname } from 'path';
import * as React from 'react';
import { useEffect } from 'react';
@@ -1,6 +1,6 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import { EventData } from '@estruyf/vscode/dist/models';
import UploadIcon from '@heroicons/react/outline/UploadIcon';
import {UploadIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { MediaInfo, MediaPaths } from '../../../models/MediaPaths';
@@ -1,5 +1,5 @@
import { Menu } from '@headlessui/react';
import DotsVerticalIcon from '@heroicons/react/outline/DotsVerticalIcon';
import {DotsVerticalIcon} from '@heroicons/react/outline';
import * as React from 'react';
export interface IMenuButtonProps {
@@ -1,6 +1,6 @@
import { EventData } from '@estruyf/vscode';
import { Messenger } from '@estruyf/vscode/dist/client';
import RefreshIcon from '@heroicons/react/outline/RefreshIcon';
import {RefreshIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useDebounce } from '../../../hooks/useDebounce';
@@ -1,5 +1,5 @@
import { Menu } from '@headlessui/react';
import ChevronDownIcon from '@heroicons/react/solid/ChevronDownIcon';
import {ChevronDownIcon} from '@heroicons/react/solid';
import * as React from 'react';
export interface IMenuButtonProps {
@@ -1,5 +1,5 @@
import { Dialog, Transition, } from '@headlessui/react';
import ExclamationIcon from '@heroicons/react/outline/ExclamationIcon';
import {ExclamationIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { Fragment, useRef } from 'react';
@@ -1,5 +1,4 @@
import HeartIcon from '@heroicons/react/outline/HeartIcon';
import StarIcon from '@heroicons/react/outline/StarIcon';
import { HeartIcon, StarIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { REVIEW_LINK, SPONSOR_LINK } from '../../constants';
import { VersionInfo } from '../../models';
@@ -1,4 +1,4 @@
import CheckIcon from '@heroicons/react/outline/CheckIcon';
import {CheckIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { Status } from '../../models/Status';
@@ -8,7 +8,7 @@ import { useState } from 'react';
import { Menu } from '@headlessui/react';
import { MenuItem } from '../Menu';
import { Framework } from '../../../models';
import ChevronDownIcon from '@heroicons/react/outline/ChevronDownIcon';
import {ChevronDownIcon} from '@heroicons/react/outline';
import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
export interface IStepsToGetStartedProps {
@@ -1,5 +1,4 @@
import HeartIcon from '@heroicons/react/outline/HeartIcon';
import StarIcon from '@heroicons/react/outline/StarIcon';
import {HeartIcon, StarIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants';
import { Messenger } from '@estruyf/vscode/dist/client';
+23 -14
View File
@@ -7,22 +7,31 @@ import { Integrations } from "@sentry/tracing";
import { SENTRY_LINK } from "../constants";
import './styles.css';
const elm = document.querySelector("#app");
const welcome = elm?.getAttribute("data-showWelcome");
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 || ""
});
declare const acquireVsCodeApi: <T = unknown>() => {
getState: () => T;
setState: (data: T) => void;
postMessage: (msg: unknown) => void;
};
render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);
const elm = document.querySelector("#app");
if (elm) {
const welcome = elm?.getAttribute("data-showWelcome");
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 || ""
});
}
render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);
}
// Webpack HMR
if ((module as any).hot) (module as any).hot.accept();
+1 -1
View File
@@ -695,7 +695,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
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', 'viewpanel.js'));
const scriptUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'dist', 'panelWebView.js'));
const nonce = WebviewHelper.getNonce();
@@ -1,4 +1,4 @@
import XIcon from '@heroicons/react/outline/XIcon';
import {XIcon} from '@heroicons/react/outline';
import * as React from 'react';
export interface IChoiceButtonProps {
@@ -1,5 +1,4 @@
import CheckIcon from '@heroicons/react/outline/CheckIcon';
import ChevronDownIcon from '@heroicons/react/outline/ChevronDownIcon';
import {CheckIcon, ChevronDownIcon} from '@heroicons/react/outline';
import Downshift from 'downshift';
import * as React from 'react';
import { useEffect } from 'react';
@@ -1,6 +1,6 @@
import * as React from 'react';
import { VsLabel } from '../VscodeComponents';
import ClockIcon from '@heroicons/react/outline/ClockIcon';
import {ClockIcon} from '@heroicons/react/outline';
import DatePicker from 'react-datepicker';
import { forwardRef } from 'react';
import { DateHelper } from '../../../helpers/DateHelper';
@@ -1,4 +1,4 @@
import XCircleIcon from '@heroicons/react/solid/XCircleIcon';
import {XCircleIcon} from '@heroicons/react/solid';
import * as React from 'react';
export interface IImageFallbackProps {
@@ -1,4 +1,4 @@
import CalculatorIcon from '@heroicons/react/outline/CalculatorIcon';
import {CalculatorIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { useEffect } from 'react';
import { VsLabel } from '../VscodeComponents';
@@ -1,4 +1,4 @@
import PhotographIcon from '@heroicons/react/outline/PhotographIcon';
import {PhotographIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { MessageHelper } from '../../../helpers/MessageHelper';
import { CommandToCode } from '../../CommandToCode';
@@ -1,4 +1,4 @@
import PencilIcon from '@heroicons/react/outline/PencilIcon';
import {PencilIcon} from '@heroicons/react/outline';
import * as React from 'react';
import { VsLabel } from '../VscodeComponents';
+9 -9
View File
@@ -6,15 +6,15 @@ import { Integrations } from "@sentry/tracing";
import { SENTRY_LINK } from "../constants";
// require('@vscode/codicons/dist/codicon.css');
import '@bendera/vscode-webview-elements/dist/vscode-table';
import '@bendera/vscode-webview-elements/dist/vscode-table-header';
import '@bendera/vscode-webview-elements/dist/vscode-table-header-cell';
import '@bendera/vscode-webview-elements/dist/vscode-table-body';
import '@bendera/vscode-webview-elements/dist/vscode-table-row';
import '@bendera/vscode-webview-elements/dist/vscode-table-cell';
import '@bendera/vscode-webview-elements/dist/vscode-collapsible';
import '@bendera/vscode-webview-elements/dist/vscode-label';
import '@bendera/vscode-webview-elements/dist/vscode-checkbox';
import '@bendera/vscode-webview-elements/dist/vscode-table.js';
import '@bendera/vscode-webview-elements/dist/vscode-table-header.js';
import '@bendera/vscode-webview-elements/dist/vscode-table-header-cell.js';
import '@bendera/vscode-webview-elements/dist/vscode-table-body.js';
import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
import '@bendera/vscode-webview-elements/dist/vscode-label.js';
import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
// import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
+66
View File
@@ -0,0 +1,66 @@
//@ts-check
'use strict';
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const config = [
{
name: 'dashboard',
target: 'web',
entry: './src/dashboardWebView/index.tsx',
output: {
filename: 'dashboardWebView.js',
path: path.resolve(__dirname, '../dist')
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.js', '.tsx', '.jsx'],
fallback: { "path": require.resolve("path-browserify") }
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [{
loader: 'ts-loader'
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
},
performance: {
maxEntrypointSize: 400000,
maxAssetSize: 400000
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: "dashboard.html",
openAnalyzer: false
})
],
devServer: {
compress: true,
port: 9000,
hot: true,
allowedHosts: "all",
headers: {
"Access-Control-Allow-Origin": "*",
}
}
}
];
module.exports = (env, argv) => {
for (const configItem of config) {
configItem.mode = argv.mode;
}
return config;
};
@@ -11,12 +11,12 @@ const config = [
target: 'node',
entry: './src/extension.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
path: path.resolve(__dirname, '../dist'),
libraryTarget: 'commonjs2',
filename: 'extension.js',
devtoolModuleFilenameTemplate: '../[resource-path]'
},
devtool: 'source-map',
devtool: 'nosources-source-map',
externals: {
vscode: 'commonjs vscode'
},
@@ -30,6 +30,12 @@ const config = [
use: [{
loader: 'ts-loader'
}]
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}]
},
performance: {
@@ -38,7 +44,16 @@ const config = [
},
optimization: {
splitChunks: {
chunks: 'all'
cacheGroups: {
vendors: {
test: /node_modules/,
chunks: 'initial',
filename: 'vendors.[contenthash].js',
priority: 1,
maxInitialRequests: 2, // create only one vendor file
minChunks: 1,
}
}
}
},
plugins: [
@@ -54,8 +69,8 @@ const config = [
target: 'web',
entry: './src/panelWebView/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'viewpanel.js'
filename: 'panelWebView.js',
path: path.resolve(__dirname, '../dist')
},
devtool: 'source-map',
resolve: {
@@ -73,6 +88,12 @@ const config = [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
@@ -80,11 +101,20 @@ const config = [
maxEntrypointSize: 400000,
maxAssetSize: 400000
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
// optimization: {
// splitChunks: {
// cacheGroups: {
// vendors: {
// test: /node_modules/,
// chunks: 'initial',
// filename: 'vendors.[contenthash].js',
// priority: 1,
// maxInitialRequests: 2, // create only one vendor file
// minChunks: 1,
// }
// }
// }
// },
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
@@ -92,50 +122,6 @@ const config = [
openAnalyzer: false
})
]
},
{
name: 'dashboardWebView',
target: 'web',
entry: './src/dashboardWebView/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'pages.js'
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.js', '.tsx', '.jsx']
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [{
loader: 'ts-loader'
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
},
performance: {
maxEntrypointSize: 400000,
maxAssetSize: 400000
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: "dashboard.html",
openAnalyzer: false
})
]
}
];