Split code into plugin & webview, convert webview to TS and build wit…

…h webpack

package.json

@@ -2,7 +2,7 @@
   "name": "joplin-plugin-resource-search",
   "version": "1.0.0",
   "scripts": {
-    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config webview && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist"
   },
   "license": "MIT",

src/index.ts → src/plugin/index.ts

@@ -1,7 +1,7 @@
 import joplin from 'api';
 import JoplinData from 'api/JoplinData';
-import { MenuItemLocation, ViewHandle } from 'api/types';
-import { pdfToText} from './index/pdf';
+import { MenuItemLocation } from 'api/types';
+import { pdfToText} from '../index/pdf';
 import { addToIndex, initDb, query } from './database';
 import { Database } from 'sqlite3';
 
@@ -84,9 +84,9 @@ joplin.plugins.register({
 
 		await joplin.commands.register({
 			name: 'searchAttachments',
-			label: 'Search in Attachments',
+			label: 'Search in attachments',
 			execute: async () => {
-				joplin.views.dialogs.open(resourceSearch);
+				await joplin.views.dialogs.open(resourceSearch);
 			},
 		})
 		await joplin.views.menuItems.create('Search in attachments', 'searchAttachments', MenuItemLocation.Edit);

src/resource-search-view.js → src/webview/index.ts

@@ -5,6 +5,9 @@ function debounce(func, timeout = 300) {
         timer = setTimeout(() => { func.apply(this, args); }, timeout);
     };
 }
+
+declare const webviewApi: any;
+
 const getResources = debounce(async query => {
     const results = await webviewApi.postMessage({
         type: 'search',
@@ -42,7 +45,7 @@ const getResources = debounce(async query => {
     }
 });
 
-const queryInput = document.getElementById('query-input');
+const queryInput = document.getElementById('query-input') as HTMLInputElement;
 queryInput.addEventListener('input', e => {
     e.preventDefault();
     console.log(JSON.stringify(e));

webpack.config.js

@@ -134,7 +134,7 @@ const baseConfig = {
 };
 
 const pluginConfig = Object.assign({}, baseConfig, {
-	entry: './src/index.ts',
+	entry: './src/plugin/index.ts',
 	resolve: {
 		alias: {
 			api: path.resolve(__dirname, 'api'),
@@ -158,6 +158,7 @@ const pluginConfig = Object.assign({}, baseConfig, {
 							// already copied into /dist so we don't copy them.
 							'**/*.ts',
 							'**/*.tsx',
+							'**/webview/**',
 						],
 					},
 				},
@@ -227,6 +228,37 @@ function buildExtraScriptConfigs(userConfig) {
 	return output;
 }
 
+const webviewConfig = Object.assign({}, baseConfig, {
+	entry: './src/webview/index.ts',
+	target: 'web',
+	output: {
+		filename: 'resource-search-view.js',
+		path: distDir,
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts', '.js'],
+	},
+	plugins: [
+		new CopyPlugin({
+			patterns: [
+				{
+					from: '**/*',
+					context: path.resolve(__dirname, 'src/webview'),
+					to: path.resolve(__dirname, 'dist'),
+					globOptions: {
+						ignore: [
+							// All TypeScript files are compiled to JS and
+							// already copied into /dist so we don't copy them.
+							'**/*.ts',
+							'**/*.tsx',
+						],
+					},
+				},
+			],
+		}),
+	]
+});
+
 function main(processArgv) {
 	const yargs = require('yargs/yargs');
 	const argv = yargs(processArgv).argv;
@@ -256,6 +288,8 @@ function main(processArgv) {
 		// exist and output in the publish dir. Then the plugin will delete this
 		// temporary file before packaging the plugin.
 		createArchive: [createArchiveConfig],
+
+		webview: [webviewConfig],
 	};
 
 	// If we are running the first config step, we clean up and create the build