Cleans up tsconfig/eslintrc w/ webviews

.eslintrc.json

@@ -20,7 +20,7 @@
 		"ecmaFeatures": {
 			"impliedStrict": true
 		},
-		"project": "tsconfig.eslint.json"
+		"project": "tsconfig.json"
 	},
 	"plugins": ["import", "@typescript-eslint"],
 	"reportUnusedDisableDirectives": true,

package.json

@@ -6176,17 +6176,20 @@
 		"analyze:bundle": "webpack --env.analyzeBundle",
 		"analyze:deps": "webpack --env.analyzeDeps",
 		"build": "webpack --mode development",
+		"build:extension": "webpack --mode development --config-name extension",
+		"build:webviews": "webpack --mode development --config-name webviews",
 		"bundle": "webpack --mode production",
 		"clean": "git clean -Xdf -e !node_modules -e !node_modules/**/*",
 		"lint": "eslint src/**/*.ts --fix --cache",
+		"optimize:webviews": "webpack --config-name webviews --env.optimizeImages",
 		"pack": "vsce package --yarn",
 		"pretty": "prettier --config .prettierrc --loglevel warn --write .",
 		"pub": "vsce publish --yarn",
 		"rebuild": "yarn run reset && yarn run build",
 		"reset": "yarn run clean && yarn --frozen-lockfile",
 		"watch": "webpack --watch --mode development --info-verbosity verbose",
-		"webviews:optimize": "webpack --config-name webviews --env.optimizeImages",
-		"webviews:watch": "webpack --watch --config-name webviews --mode development --info-verbosity verbose",
+		"watch:extension": "webpack --watch --mode development --config-name extension --info-verbosity verbose",
+		"watch:webviews": "webpack --watch --mode development --config-name webviews --info-verbosity verbose",
 		"update:emoji": "pushd emoji && node ./shortcodeToEmoji.js && popd",
 		"vscode:prepublish": "yarn run bundle"
 	},

src/webviews/apps/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+	"extends": ["../../../.eslintrc.json"],
+	"parserOptions": {
+		"project": "src/webviews/apps/tsconfig.json"
+	}
+}

src/webviews/apps/shared/appWithConfigBase.ts

@@ -7,11 +7,11 @@ import {
 	onIpcNotification,
 	UpdateConfigurationCommandType,
 } from '../../protocol';
-import { DOM } from './dom';
 import { App } from './appBase';
-import { Dates } from '../../../system/date';
+import { DOM } from './dom';
+import { getDateFormatter } from '../shared/date';
 
-const dateFormatter = Dates.getFormatter(new Date('Wed Jul 25 2018 19:18:00 GMT-0400'));
+const dateFormatter = getDateFormatter(new Date('Wed Jul 25 2018 19:18:00 GMT-0400'));
 
 export abstract class AppWithConfig<TState extends AppStateWithConfig> extends App<TState> {
 	private _changes = Object.create(null) as Record<string, any>;

src/webviews/apps/shared/date.ts

@@ -0,0 +1,16 @@
+'use strict';
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(advancedFormat);
+dayjs.extend(relativeTime);
+
+export interface DateFormatter {
+	fromNow(): string;
+	format(format: string): string;
+}
+
+export function getDateFormatter(date: Date): DateFormatter {
+	return dayjs(date);
+}

src/webviews/apps/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../../tsconfig.json",
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"lib": ["dom", "dom.iterable", "es2019"],
+		"outDir": "dist/webviews"
+	},
+	"include": ["../../config.ts", "../protocol.ts", "**/*"],
+	"exclude": ["node_modules", "test"]
+}

tsconfig.eslint.json

@@ -1,7 +0,0 @@
-{
-	"extends": "./tsconfig.json",
-	"compilerOptions": {
-		"lib": ["dom", "dom.iterable", "es2018"]
-	},
-	"exclude": ["node_modules", "test"]
-}

tsconfig.webviews.json

@@ -1,9 +0,0 @@
-{
-	"extends": "./tsconfig.json",
-	"compilerOptions": {
-		"lib": ["dom", "dom.iterable", "es2019"],
-		"outDir": "dist/webviews"
-	},
-	"include": ["src/config.ts", "src/webviews/protocol.ts", "src/webviews/apps/**/*"],
-	"exclude": ["node_modules", "test"]
-}

webpack.config.js

@@ -85,7 +85,7 @@ module.exports =
 
 		if (env.analyzeBundle || env.analyzeDeps) {
 			env.optimizeImages = false;
-		} else if (!env.optimizeImages && !fs.existsSync(path.resolve(__dirname, 'images/settings'))) {
+		} else if (!env.optimizeImages && !fs.existsSync(path.join(__dirname, 'images/settings'))) {
 			env.optimizeImages = true;
 		}
 
@@ -171,7 +171,7 @@ function getExtensionConfig(mode, env) {
 			rules: [
 				{
 					exclude: /\.d\.ts$/,
-					include: path.resolve(__dirname, 'src'),
+					include: path.join(__dirname, 'src'),
 					test: /\.tsx?$/,
 					use: {
 						loader: 'ts-loader',
@@ -185,7 +185,7 @@ function getExtensionConfig(mode, env) {
 		},
 		resolve: {
 			alias: {
-				'universal-user-agent': path.resolve(__dirname, 'node_modules/universal-user-agent/dist-node/index.js'),
+				'universal-user-agent': path.join(__dirname, 'node_modules/universal-user-agent/dist-node/index.js'),
 			},
 			extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
 			symlinks: false,
@@ -209,10 +209,12 @@ function getExtensionConfig(mode, env) {
  * @returns { WebpackConfig }
  */
 function getWebviewsConfig(mode, env) {
+	const basePath = path.join(__dirname, 'src/webviews/apps');
+
 	const clean = ['**/*'];
 	if (env.optimizeImages) {
 		console.log('Optimizing images (src/webviews/apps/images/settings/*.png)...');
-		clean.push(path.resolve(__dirname, 'images/settings/*'));
+		clean.push(path.join(__dirname, 'images/settings/*'));
 	}
 
 	const cspPolicy = {
@@ -235,12 +237,12 @@ function getWebviewsConfig(mode, env) {
 			async: false,
 			eslint: {
 				enabled: true,
-				files: path.resolve(__dirname, 'src/webviews/apps/**/*.ts'),
+				files: path.join(basePath, '**/*.ts'),
 				options: { cache: true },
 			},
 			formatter: 'basic',
 			typescript: {
-				configFile: path.resolve(__dirname, 'tsconfig.webviews.json'),
+				configFile: path.join(basePath, 'tsconfig.json'),
 			},
 		}),
 		new MiniCssExtractPlugin({
@@ -250,7 +252,7 @@ function getWebviewsConfig(mode, env) {
 			template: 'rebase/rebase.html',
 			chunks: ['rebase', 'rebase-styles'],
 			excludeAssets: [/.+-styles\.js/],
-			filename: path.resolve(__dirname, 'dist/webviews/rebase.html'),
+			filename: path.join(__dirname, 'dist/webviews/rebase.html'),
 			inject: true,
 			inlineSource: mode === 'production' ? '.css$' : undefined,
 			cspPlugin: {
@@ -279,7 +281,7 @@ function getWebviewsConfig(mode, env) {
 			template: 'settings/settings.html',
 			chunks: ['settings', 'settings-styles'],
 			excludeAssets: [/.+-styles\.js/],
-			filename: path.resolve(__dirname, 'dist/webviews/settings.html'),
+			filename: path.join(__dirname, 'dist/webviews/settings.html'),
 			inject: true,
 			cspPlugin: {
 				enabled: true,
@@ -307,7 +309,7 @@ function getWebviewsConfig(mode, env) {
 			template: 'welcome/welcome.html',
 			chunks: ['welcome', 'welcome-styles'],
 			excludeAssets: [/.+-styles\.js/],
-			filename: path.resolve(__dirname, 'dist/webviews/welcome.html'),
+			filename: path.join(__dirname, 'dist/webviews/welcome.html'),
 			inject: true,
 			cspPlugin: {
 				enabled: true,
@@ -336,11 +338,11 @@ function getWebviewsConfig(mode, env) {
 		new ImageminPlugin({
 			disable: !env.optimizeImages,
 			externalImages: {
-				context: path.resolve(__dirname, 'src/webviews/apps/images'),
-				sources: glob.sync('src/webviews/apps/images/settings/*.png'),
-				destination: path.resolve(__dirname, 'images'),
+				context: path.join(basePath, 'images'),
+				sources: glob.sync(path.join(basePath, 'images/settings/*.png')),
+				destination: path.join(__dirname, 'images'),
 			},
-			cacheFolder: path.resolve(__dirname, 'node_modules', '.cache', 'imagemin-webpack-plugin'),
+			cacheFolder: path.join(__dirname, 'node_modules', '.cache', 'imagemin-webpack-plugin'),
 			gifsicle: null,
 			jpegtran: null,
 			optipng: null,
@@ -355,7 +357,7 @@ function getWebviewsConfig(mode, env) {
 
 	return {
 		name: 'webviews',
-		context: path.resolve(__dirname, 'src/webviews/apps'),
+		context: basePath,
 		entry: {
 			rebase: ['./rebase/rebase.ts'],
 			'rebase-styles': ['./scss/rebase.scss'],
@@ -369,19 +371,19 @@ function getWebviewsConfig(mode, env) {
 		devtool: mode === 'production' ? undefined : 'eval-source-map',
 		output: {
 			filename: '[name].js',
-			path: path.resolve(__dirname, 'dist/webviews'),
+			path: path.join(__dirname, 'dist/webviews'),
 			publicPath: '#{root}/dist/webviews/',
 		},
 		module: {
 			rules: [
 				{
 					exclude: /\.d\.ts$/,
-					include: path.resolve(__dirname, 'src'),
+					include: path.join(__dirname, 'src'),
 					test: /\.tsx?$/,
 					use: {
 						loader: 'ts-loader',
 						options: {
-							configFile: 'tsconfig.webviews.json',
+							configFile: path.join(basePath, 'tsconfig.json'),
 							experimentalWatchApi: true,
 							transpileOnly: true,
 						},
@@ -413,7 +415,7 @@ function getWebviewsConfig(mode, env) {
 		},
 		resolve: {
 			extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-			modules: [path.resolve(__dirname, 'src/webviews/apps'), 'node_modules'],
+			modules: [basePath, 'node_modules'],
 			symlinks: false,
 		},
 		plugins: plugins,