Refactor: webview (#1756)

* feat: Worked on the backlinks support

* feat: Added backlinks UI

* feat: Almost done with the backlinks support

* refactor: Removed several unnecessary files

* refactor: refactored some code

* fix: Fixed some crossnote bugs

.eslintrc.js

@@ -0,0 +1,19 @@
+/**@type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/naming-convention': 'warn',
+    '@typescript-eslint/semi': 'warn',
+    'curly': 'warn',
+    'eqeqeq': 'warn',
+    'no-throw-literal': 'warn',
+    'semi': 'off',
+  },
+  ignorePatterns: ['**/*.d.ts'],
+};

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.vscodeignore

@@ -18,3 +18,4 @@ node_modules
 .prettierignore
 build.js
 prettier.config.js
+.eslintrc.js

build.js

@@ -1,6 +1,28 @@
 const { context, build } = require('esbuild');
 const { polyfillNode } = require('esbuild-plugin-polyfill-node');
 
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+  name: 'esbuild-problem-matcher',
+
+  setup(build) {
+    build.onStart(() => {
+      console.log('[watch] build started');
+    });
+    build.onEnd((result) => {
+      if (result.errors.length) {
+        result.errors.forEach((error) =>
+          console.error(
+            `> ${error.location.file}:${error.location.line}:${error.location.column}: error: ${error.text}`,
+          ),
+        );
+      } else console.log('[watch] build finished');
+    });
+  },
+};
+
 /**
  * @type {import('esbuild').BuildOptions}
  */
@@ -61,7 +83,7 @@ const webConfig = {
     // window: 'globalThis',
     // global: 'globalThis',
     // window: "globalThis",
-    window: JSON.stringify(defaultWindow),
+    'window': JSON.stringify(defaultWindow),
     // document: JSON.stringify(defaultDocument),
     'process.env.IS_VSCODE_WEB_EXTENSION': '"true"',
   },
@@ -76,8 +98,7 @@ async function main() {
         ...nativeConfig,
         sourcemap: true,
         minify: false,
-        // bundle: false,
-        // external: undefined,
+        plugins: [esbuildProblemMatcherPlugin, ...(nativeConfig.plugins ?? [])],
       });
 
       // Web
@@ -91,6 +112,7 @@ async function main() {
             'process.env.IS_VSCODE_WEB_EXTENSION_DEV_MODE': '"true"',
           },
         },
+        plugins: [esbuildProblemMatcherPlugin, ...(webConfig.plugins ?? [])],
       });
 
       await Promise.all([nativeContext.watch(), webContext.watch()]);

gulpfile.js

@@ -8,7 +8,15 @@
 const gulp = require('gulp');
 const fs = require('fs');
 
-gulp.task('copy-files', cb => {
+gulp.task('clean-out', (cb) => {
+  // Delete ./out folder
+  if (fs.existsSync('./out')) {
+    fs.rmSync('./out', { recursive: true });
+  }
+  cb();
+});
+
+gulp.task('copy-files', (cb) => {
   // Delete ./crossnote directory
   if (fs.existsSync('./crossnote')) {
     fs.rmSync('./crossnote', { recursive: true });

package.json

@@ -23,19 +23,20 @@
   "main": "./out/native/extension.js",
   "browser": "./out/web/extension.js",
   "scripts": {
-    "build": "yarn copy:files && rm -rf ./out && node build.js",
+    "build": "yarn copy:files && gulp clean-out && node build.js",
     "check:all": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint \"**/*\"",
     "check:prettier": "prettier --check \"**/*.*\"",
     "copy:files": "gulp copy-files",
     "fix:all": "yarn fix:eslint && yarn fix:eslint && yarn fix:prettier",
     "fix:eslint": "eslint --fix \"**/*\"",
     "fix:prettier": "prettier --write \"**/*.*\"",
-    "run-in-browser": "concurrently \"vscode-test-web --browserType=chromium --extensionDevelopmentPath=. .\" \"npx http-server ./crossnote -p 6789 --cors\"",
+    "prepare": "husky install",
+    "run-in-browser": "concurrently \"vscode-test-web --browserType=chromium --extensionDevelopmentPath=. $SERVE_DIR\" \"npx http-server ./crossnote -p 6789 --cors\"",
     "run-in-vscode-dev": "npx serve --cors -l 5000 --ssl-cert $HOME/certs/localhost.pem --ssl-key $HOME/certs/localhost-key.pem",
     "test": "yarn build && node ./node_modules/vscode/bin/test",
     "vscode:prepublish": "yarn install && yarn build",
-    "watch": "yarn copy:files && rm -rf ./out && node build.js --watch"
+    "watch": "yarn copy:files && gulp clean-out && node build.js --watch"
   },
   "contributes": {
     "commands": [
@@ -311,6 +312,7 @@
             "dark.css",
             "funky.css",
             "github.css",
+            "github-dark.css",
             "hopscotch.css",
             "monokai.css",
             "okaidia.css",
@@ -546,6 +548,11 @@
             ".qmd"
           ],
           "type": "array"
+        },
+        "markdown-preview-enhanced.alwaysShowBacklinksInPreview": {
+          "description": "Always show backlinks in preview.",
+          "default": false,
+          "type": "boolean"
         }
       }
     },
@@ -611,8 +618,10 @@
     ]
   },
   "dependencies": {
+    "@types/crypto-js": "^4.1.2",
     "@types/vfile": "^3.0.2",
-    "crossnote": "^0.8.8"
+    "crossnote": "^0.8.10",
+    "crypto-js": "^4.1.1"
   },
   "devDependencies": {
     "@types/cheerio": "0.22.11",
@@ -628,7 +637,7 @@
     "eslint": "^8.48.0",
     "gulp": "^4.0.2",
     "http-server": "^14.1.1",
-    "husky": "^3.0.9",
+    "husky": "^8.0.3",
     "lint-staged": "^9.4.2",
     "mocha": "^6.1.4",
     "prettier": "^1.18.2",

prettier.config.js

@@ -1,6 +1,9 @@
+/**@type {import("prettier").Config} */
 module.exports = {
   arrowParens: 'always',
   endOfLine: 'lf',
   quoteProps: 'consistent',
+  singleQuote: true,
+  tabWidth: 2,
   trailingComma: 'all',
 };

src/backlinks-provider.ts

@@ -0,0 +1 @@
+export class BacklinksProvider {}

src/config.ts

@@ -1,6 +1,7 @@
 import {
   CodeBlockTheme,
   FrontMatterRenderingOption,
+  ImageUploader,
   MathRenderingOption,
   MermaidTheme,
   NotebookConfig,
@@ -46,7 +47,7 @@ export class MarkdownPreviewEnhancedConfig implements NotebookConfig {
   public readonly revealjsTheme: RevealJsTheme;
   public readonly protocolsWhiteList: string;
   public readonly imageFolderPath: string;
-  public readonly imageUploader: string;
+  public readonly imageUploader: ImageUploader;
   public readonly printBackground: boolean;
   public readonly chromePath: string;
   public readonly imageMagickPath: string;
@@ -68,6 +69,7 @@ export class MarkdownPreviewEnhancedConfig implements NotebookConfig {
   public readonly hideDefaultVSCodeMarkdownPreviewButtons: boolean;
   public readonly jsdelivrCdnHost: string;
   public readonly krokiServer: string;
+  public readonly alwaysShowBacklinksInPreview: boolean;
 
   // preview config
   public readonly scrollSync: boolean;
@@ -144,7 +146,7 @@ export class MarkdownPreviewEnhancedConfig implements NotebookConfig {
       defaultConfig.protocolsWhiteList;
     this.imageFolderPath =
       config.get<string>('imageFolderPath') ?? defaultConfig.imageFolderPath;
-    this.imageUploader = config.get<string>('imageUploader') ?? 'imgur';
+    this.imageUploader = config.get<ImageUploader>('imageUploader') ?? 'imgur';
     this.printBackground =
       config.get<boolean>('printBackground') ?? defaultConfig.printBackground;
     this.chromePath =
@@ -208,7 +210,11 @@ export class MarkdownPreviewEnhancedConfig implements NotebookConfig {
       config.get<string>('jsdelivrCdnHost') ?? defaultConfig.jsdelivrCdnHost;
     this.krokiServer =
       config.get<string>('krokiServer') ?? defaultConfig.krokiServer;
+    this.alwaysShowBacklinksInPreview =
+      config.get<boolean>('alwaysShowBacklinksInPreview') ??
+      defaultConfig.alwaysShowBacklinksInPreview;
   }
+
   globalCss: string;
   mermaidConfig;
   mathjaxConfig;