✨ Feature(webview): drawerList, upload feature and uploader settings …

…in webview (#107) * 📦 Chore: move ThemeWrapper from pages to components folder, remove react logo * 📦 Chore: update LICENSE, package.json and settings * 🔨 Refactor(pages): reorganize pages to subfolders to contain future redux models * ✨ Feature(webview): setup react-router & finish the upload feature in webview * 🐛 Fix(test): make singleton class constructor private to avoid external new * ✨ Feature: call upload commands in webview * 🐛 Fix: fix globby import * ✨ Feature: migrate to @picgo/store and decouple upload and edit * ✨ Feature(settings): finished settings of uploader * ✨ Feature(sidebar): add uploader items to drawerList, add hook utils * ⬆️ Upgrade(picgo): update picgo core to 1.5.0-alpha.0 * ✅ Test: fix test cases, await write to document
PicGo · Oct 27, 2021 · b786285 · b786285
1 parent f81a1dd
commit b786285
Show file tree

Hide file tree

Showing 55 changed files with 3,309 additions and 2,443 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,25 +9,19 @@ module.exports = {
     project: './tsconfig.json'
   },
   rules: {
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        selector: 'interface',
-        format: ['PascalCase'],
-        custom: {
-          regex: '^I[A-Z]',
-          match: true
-        }
-      }
-    ],
     '@typescript-eslint/explicit-function-return-type': 0,
     '@typescript-eslint/strict-boolean-expressions': 0,
     'no-console': 'warn',
     // https://stackoverflow.com/a/64024916/8242705
     'no-use-before-define': 'off',
     'no-undef': 'off',
     'react/jsx-sort-props': 'error',
-    'react/jsx-boolean-value': 'error'
+    'react/jsx-boolean-value': 'error',
+    'no-void': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/promise-function-async': 'off',
+    // don't need this, because already has @typescript-eslint/no-unused-vars
+    'no-unused-vars': 'off'
   },
   overrides: [
     {
@@ -36,6 +30,22 @@ module.exports = {
         'import/no-anonymous-default-export': 0,
         'filenames/match-exported': 0
       }
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'interface',
+            format: ['PascalCase'],
+            custom: {
+              regex: '^I[A-Z]',
+              match: true
+            }
+          }
+        ]
+      }
     }
   ]
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -12,7 +12,9 @@
       "runtimeExecutable": "${execPath}",
       "args": [
         "--disable-extensions",
-        "--extensionDevelopmentPath=${workspaceFolder}"
+        "--user-data-dir=tmp",
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "${workspaceFolder}/assets"
       ],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"],
       "preLaunchTask": "${defaultBuildTask}"

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -30,14 +30,31 @@
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "editor.tabSize": 2,
   "cSpell.words": [
+    "aliyun",
+    "cjsx",
+    "commitlint",
+    "Dropzone",
     "esbuild",
     "globby",
     "iife",
+    "imgur",
+    "immer",
+    "luozhu",
     "metafile",
     "Mixins",
+    "mjsx",
+    "Molunerfinn",
     "outdir",
     "picgo",
-    "vspicgo"
+    "qiniu",
+    "smms",
+    "tcyun",
+    "uploader",
+    "Uploaders",
+    "upupming",
+    "upyun",
+    "vspicgo",
+    "weibo"
   ],
   "[markdown]": {
     "editor.tabSize": 4

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2019 Molunerfinn & Spades & upupming
+Copyright (c) 2018-2021 Molunerfinn & Spades & upupming
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 > The VSCode extension of [PicGo](https://github.com/PicGo).
 
 [![version](https://img.shields.io/vscode-marketplace/v/Spades.vs-picgo.svg?style=flat-square&label=vscode%20marketplace)](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
+![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/Spades.vs-picgo?style=flat-square)
 [![installs](https://img.shields.io/vscode-marketplace/d/Spades.vs-picgo.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo)
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2FPicGo%2Fvs-picgo%2Fbadge%3Fref%3Ddev&style=flat-square)](https://actions-badge.atrox.dev/PicGo/vs-picgo/goto?ref=dev)
 [![Coveralls github branch](https://img.shields.io/coveralls/github/PicGo/vs-picgo/refs/heads/dev.svg?style=flat-square)](https://coveralls.io/github/PicGo/vs-picgo?branch=refs/heads/dev)

diff --git a/assets/vs-picgo-auto-launch.txt b/assets/vs-picgo-auto-launch.txt
@@ -0,0 +1,3 @@
+This file is just for developers, and it will trigger vs-picgo's
+`workspaceContains` activation events and launch the webview panel
+for quick testing.
diff --git a/esbuild.mjs b/esbuild.mjs
@@ -1,7 +1,5 @@
 /* eslint-disable no-console */
-// We use .mjs because globby package now is pure-esm, and can only be imported in esm mode, because this is a simple build script and we do not want to bother run esm-to-cjs build process, we just change our build script to esm
-// We cannot use "type": "module" in package.json because VSCode supports cjs modules only at the present
-import { globbySync } from 'globby'
+import globby from 'globby'
 import esbuild from 'esbuild'
 import fse from 'fs-extra'
 import minimist from 'minimist'
@@ -34,12 +32,11 @@ const watchPlugin = (type) => ({
         )
       )
       firstBuildFinished.add(type)
+      status(`${type} build finished in ${Date.now() - buildStartTime} ms.`)
       if (firstBuildFinished.size === 2) {
         // esbuild problem matcher extension is listening for this log, once this is logged, it will open the Extension Host
         // So we have to assure only printing this when both extension and webview have been built
         status(`build finished in ${Date.now() - buildStartTime} ms.`)
-      } else {
-        status(`${type} build finished in ${Date.now() - buildStartTime} ms.`)
       }
     })
   }
@@ -61,7 +58,7 @@ fse.rmdirSync(outdir, { recursive: true })
 /** @type {import('esbuild').BuildOptions} */
 const commonOptions = {
   bundle: true,
-  sourcemap: !isProduction,
+  sourcemap: isProduction ? false : 'inline',
   watch: isWatch,
   loader: {
     '.js': 'jsx',
@@ -75,35 +72,34 @@ const commonOptions = {
     'process.env.NODE_ENV': isProduction ? '"production"' : '"development"'
   },
   minify: isProduction
-  // metafile: true,
+  // metafile: true
 }
 
 // build extension (node app)
 esbuild
   .build({
     ...commonOptions,
     outdir,
-    entryPoints: isTest ? globbySync('test/**/*.ts') : ['src/extension.ts'],
-    external: isTest ? ['vscode', 'mocha', 'istanbul'] : ['vscode'],
+    entryPoints: isTest ? globby.sync('test/**/*.ts') : ['src/extension.ts'],
+    external: isTest
+      ? ['vscode', 'mocha', 'istanbul', 'electron']
+      : ['vscode', 'electron'],
     format: 'cjs',
     platform: 'node',
+    mainFields: ['module', 'main'],
     plugins: [watchPlugin('extension'), inlineImportPlugin()]
   })
   .then(resultHandler)
   .catch(() => {
     process.exit(1)
   })
-// copy picgo's clipboard scripts
-fse.copy('node_modules/picgo/dist/src/utils/clipboard', `${outdir}/clipboard`, {
-  overwrite: true
-})
 
 // build webview (web app)
 esbuild
   .build({
     ...commonOptions,
     outdir: `${outdir}/webview`,
-    entryPoints: globbySync('src/webview/pages/index.tsx'),
+    entryPoints: ['src/webview/pages/index.tsx'],
     target: ['chrome58'],
     format: 'esm',
     plugins: [lessLoader(), watchPlugin('webview')]

diff --git a/package.json b/package.json
@@ -2,9 +2,18 @@
   "name": "vs-picgo",
   "displayName": "%ext.displayName%",
   "description": "%ext.description%",
-  "repository": "https://github.com/PicGo/vs-picgo",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PicGo/vs-picgo.git"
+  },
   "issues": "https://github.com/PicGo/vs-picgo/issues",
-  "keywords": "%ext.keywords%",
+  "keywords": [
+    "image",
+    "picture",
+    "upload",
+    "image upload",
+    "picture upload"
+  ],
   "version": "2.1.6",
   "publisher": "Spades",
   "engines": {
@@ -19,7 +28,8 @@
     "onCommand:picgo.uploadImageFromExplorer",
     "onCommand:picgo.uploadImageFromInputBox",
     "onCommand:picgo.webviewDemo",
-    "onCommand:picgo.webviewPicGoControlPanel"
+    "onCommand:picgo.webviewPicGoControlPanel",
+    "workspaceContains:vs-picgo-auto-launch.txt"
   ],
   "main": "./dist/extension",
   "contributes": {
@@ -53,21 +63,18 @@
     "keybindings": [
       {
         "command": "picgo.uploadImageFromClipboard",
-        "key": "ctrl+alt+u",
-        "mac": "cmd+alt+u",
-        "when": "editorTextFocus"
+        "key": "ctrl+alt+U",
+        "mac": "cmd+alt+U"
       },
       {
         "command": "picgo.uploadImageFromExplorer",
-        "key": "ctrl+alt+e",
-        "mac": "cmd+alt+e",
-        "when": "editorTextFocus"
+        "key": "ctrl+alt+E",
+        "mac": "cmd+alt+E"
       },
       {
         "command": "picgo.uploadImageFromInputBox",
-        "key": "ctrl+alt+o",
-        "mac": "cmd+alt+o",
-        "when": "editorTextFocus"
+        "key": "ctrl+alt+O",
+        "mac": "cmd+alt+O"
       }
     ],
     "configuration": {
@@ -350,42 +357,45 @@
     "@types/glob": "^7.1.1",
     "@types/inquirer": "^6.5.0",
     "@types/istanbul": "^0.4.30",
-    "@types/lodash": "4.14.168",
     "@types/mocha": "^7.0.1",
-    "@types/node": "^12.11.7",
+    "@types/node": "16.10.2",
     "@types/react": "17.0.22",
     "@types/react-dom": "17.0.9",
+    "@types/react-router-dom": "5.3.0",
     "@types/request-promise-native": "^1.0.17",
     "@types/vscode": "1.60.0",
     "@types/vscode-webview": "1.57.0",
-    "@typescript-eslint/eslint-plugin": "4.1.0",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
     "cz-conventional-changelog": "^3.1.0",
     "cz-customizable": "6.2.0",
     "decache": "^4.5.1",
-    "esbuild": "0.12.28",
+    "electron": "15.1.0",
+    "esbuild": "0.13.3",
     "esbuild-plugin-inline-import": "1.0.1",
     "esbuild-plugin-less": "1.1.0",
-    "eslint": "7.24.0",
-    "eslint-config-prettier": "8.1.0",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
     "eslint-config-prettier-standard": "4.0.1",
-    "eslint-config-standard-with-typescript": "20.0.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-config-standard-with-typescript": "21.0.1",
+    "eslint-plugin-import": "2.24.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-promise": "5.1.0",
-    "eslint-plugin-react": "7.26.0",
+    "eslint-plugin-react": "7.26.1",
     "eslint-plugin-standard": "5.0.0",
     "fs-extra": "10.0.0",
     "glob": "^7.1.6",
-    "globby": "12.0.2",
+    "globby": "11.0.4",
     "husky": "7.0.2",
     "istanbul": "^0.4.5",
     "lint-staged": "10.5.4",
+    "lodash-es": "4.17.21",
     "minimist": "1.2.5",
     "mocha": "^7.0.1",
     "prettier": "2.2.1",
     "prettier-config-standard": "4.0.0",
     "remap-istanbul": "^0.13.0",
+    "type-fest": "2.3.4",
     "typescript": "4.4.3",
     "vsce": "1.83.0",
     "vscode-test": "^1.3.0",
@@ -394,16 +404,26 @@
   "dependencies": {
     "@emotion/react": "11.4.1",
     "@emotion/styled": "11.3.0",
-    "@luozhu/vscode-channel": "0.7.0",
+    "@luozhu/vscode-channel": "0.8.0",
     "@mui/icons-material": "5.0.1",
     "@mui/material": "5.0.1",
-    "lodash": "^4.17.19",
-    "lodash-id": "^0.14.0",
-    "picgo": "1.4.25",
+    "@picgo/store": "1.0.3",
+    "@rematch/core": "2.1.1",
+    "@rematch/immer": "2.1.2",
+    "@rematch/loading": "2.1.1",
+    "@rematch/select": "3.1.1",
+    "@rematch/updated": "2.1.1",
+    "appdata-path": "1.0.0",
+    "immer": "9.0.6",
+    "picgo": "1.5.0-alpha.0",
     "pupa": "3.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-use": "17.3.1"
+    "react-dropzone": "11.4.2",
+    "react-redux": "7.2.5",
+    "react-router-dom": "5.3.0",
+    "react-use": "17.3.1",
+    "redux": "4.1.1"
   },
   "license": "MIT"
 }
diff --git a/package.nls.json b/package.nls.json
@@ -1,16 +1,9 @@
 {
   "ext.displayName": "PicGo",
   "ext.description": "A fast and powerful image uploading plugin for VSCode based on PicGo. Supports most image types (png, jpg, gif, etc.) and many image hosting services (smms, qiniu, imgur, etc.)!",
-  "ext.keywords": [
-    "image",
-    "picture",
-    "upload",
-    "image upload",
-    "picture upload"
-  ],
-  "command.upload.clipboard.title": "Upload image from clipboard",
-  "command.upload.explorer.title": "Upload image from explorer",
-  "command.upload.inputBox.title": "Upload image from inputBox",
+  "command.upload.clipboard.title": "Upload from clipboard",
+  "command.upload.explorer.title": "Upload from explorer",
+  "command.upload.inputBox.title": "Upload from input box",
   "command.webview.demo.title": "Open demo page",
   "command.webview.picGoControlPanel.title": "Open PicGo Control Panel",
   "config.title": "PicGo",