fix(dom-to-code): 修复 pnpm 项目的文件路径挂载 bug

README.md

@@ -6,7 +6,7 @@
 
 # Dom To Code
 
-  <p>屎山救星，点击 dom 直接跳到编辑器对应代码。支持 vite/webpack、vue2/vue3/react</p>
+  <p>开发效率神器，点击 dom 直接跳到编辑器对应代码。支持 vite/webpack、vue2/vue3/react</p>
 
   </div>
 
@@ -22,9 +22,9 @@
 
 ## ✨ 介绍
 
-受够了翔一般的代码，每次想改一下接手的项目都得各种搜索代码来改，于是就有了这个屎山救星。
+接手一个项目开发网页时要修改某部分，要么靠搜索，要么靠记忆找到对应代码，过程极为浪费时间。
 
-引入插件到项目后，ctrl + 按下鼠标滚轮，就会在编辑器打开鼠标下的界面元素源码。
+在项目里用了 dom-to-code 插件后，对准想要修改的 dom 部分 ctrl + 按下鼠标滚轮，就会在编辑器打开对应的 dom 元素源码。支持 vite/webpack、vue2/vue3/react
 
 别人搜索你直接跳，别人加班你摸鱼。
 

package.json

@@ -77,7 +77,16 @@
       "source-map-resolve": "*",
       "source-map-url": "*",
       "resolve-url": "*",
-      "urix": "*"
+      "urix": "*",
+      "html-webpack-plugin": "*",
+      "@hapi/joi": "*",
+      "request": "*",
+      "@hapi/topo": "*",
+      "@hapi/bournes": "*",
+      "@hapi/address": "*",
+      "@hapi/hoek": "*",
+      "har-validator": "*",
+      "svgo": "*"
     },
     "packageExtensions": {
       "vue-template-compiler": {

packages/dom-to-code/package.json

@@ -13,7 +13,10 @@
     "vue",
     "react"
   ],
-  "author": "tuocangyu <https://github.com/better-tcy>",
+  "contributors": [
+    "tuocangyu <https://github.com/better-tcy>",
+    "yangjinming <https://github.com/2214962083>"
+  ],
   "funding": "https://github.com/sponsors/better-tcy",
   "license": "MIT",
   "private": false,

packages/dom-to-code/src/client/index.ts

@@ -46,6 +46,8 @@ export function initDomToCode(): void {
   document.addEventListener('mousedown', (e) => {
     if (e.button === 1 && (keyCode === 'Control' || keyCode === 'Meta')) {
       e.stopImmediatePropagation()
+      e.preventDefault()
+      e.stopPropagation()
       console.log('dom-to-code: open editor.')
       const filePath = getFilePath(e.target as HTMLElement)
       filePath && requestService(filePath)

packages/dom-to-code/src/webpack-loader.ts

@@ -10,9 +10,7 @@ export default async function (this: LoaderContext<Options>, source: string) {
   const { resourcePath } = this
   // webpack 5 用 this.getOptions()， webpack 4 用 getOptions(this)
   const options = typeof this.getOptions === 'function' ? this.getOptions() : getOptions(this as any)
-  const pathBefore = __dirname.substring(0, __dirname.search('node_modules'))
-  const filePath = resourcePath.substring(pathBefore.length)
 
-  const result = await transform(source, filePath, options)
+  const result = await transform(source, resourcePath, options)
   return typeof result === 'string' ? result : ((result as any)?.code || '')
 }

playgrounds/webpack4-vue2/package.json

@@ -11,15 +11,15 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "dom-to-code": "workspace:*",
-    "vue": "^2.6.14"
+    "vue": "2.6.14"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-typescript": "4.4.6",
     "@vue/cli-service": "4.4.6",
     "typescript": "3.9.3",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "2.6.14"
   },
   "browserslist": [
     "> 1%",