vite-plugin-debugger 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 金华青鸟
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,209 @@
+
+
+# vite-plugin-debugger
+
+A vite plugin provide the debugger tools for mobile devices.
+
+**English** | [中文](./README.zh_CN.md)
+
+## Install
+
+**node version:** >=14.0.0
+
+**vite version:** >=2.0.0
+
+
+```bash
+pnpm add vite-plugin-debugger -D
+# or
+yarn add vite-plugin-debugger -D
+# or
+npm i vite-plugin-debugger -D
+```
+
+## Usage
+
+### For [eruda](https://github.com/liriliri/eruda)
+
+we use eruda with CDN by default since it's unpacked size is 2.38 MB.
+
+```typescript
+import { fileURLToPath } from 'url'
+import vDebugger from 'vite-plugin-debugger'
+
+const resolve = (dir: string) => fileURLToPath(new URL(dir, import.meta.url))
+
+export default defineConfig(({ command, mode }) => ({
+  plugins: [
+    vDebugger({
+      debug: mode !== 'production',
+   // cdn: 'jsdelivr', // 'jsdelivr' | 'unpkg' | 'cdnjs'
+   // src: 'custom CDN URL',
+      eruda: {
+        options: {
+          tool: ['console', 'elements'],
+          useShadowDom: true,
+          autoScale: true,
+          defaults: {
+            displaySize: 50,
+            transparency: 0.8,
+            theme: 'Dark',
+          },
+        },
+        plugins: [
+          'fps',
+          'features',
+          'timing',
+          'memory',
+          'code',
+          'benchmark',
+          'dom',
+          'orientation',
+          'touches',
+          // 'geolocation',
+        ],
+      },
+    })
+  ]
+})
+```
+
+
+
+⚠ cdnjs don't provide eruda related plugins so you can specify every plugin's CDN source like:
+
+```
+        plugins: [
+          {
+            name: 'fps',
+            src: 'https://cdn.jsdelivr.net/npm/eruda-fps',
+          },
+       // ...
+        ],
+```
+
+
+
+For more details about eruda options, please check out [eruda API](https://github.com/liriliri/eruda/blob/master/doc/API.md).
+
+If you prefer use eruda locally, you should install eruda and it's plugins first.
+
+```typescript
+pnpm add eruda -D
+# or
+yarn add eruda -D
+# or
+npm i eruda -D
+
+# And some optional plugins
+pnpm[yarn|npm] add eruda-fps eruda-features eruda-timing eruda-memory eruda-code eruda-benchmark eruda-dom eruda-orientation eruda-touches eruda-geolocation -D
+```
+
+```typescript
+import { fileURLToPath } from 'url'
+import vDebugger from 'vite-plugin-debugger'
+
+const resolve = (dir: string) => fileURLToPath(new URL(dir, import.meta.url))
+
+export default defineConfig(({ command, mode })=>({
+  plugins:[
+    vDebugger({
+      debug: mode !== 'production',
+      local: true,
+      entry: resolve('src/main.ts'),// vue or src/main.tsx for react
+      eruda: {
+        options: {
+          tool: ['console', 'elements'],
+          useShadowDom: true,
+          autoScale: true,
+          defaults: {
+            displaySize: 50,
+            transparency: 0.8,
+            theme: 'Dark',
+          },
+        },
+        plugins: [
+          'fps',
+          'features',
+          'timing',
+          'memory',
+          'code',
+          'benchmark',
+          'dom',
+          'orientation',
+          'touches',
+          // 'geolocation',
+        ],
+    })
+  ]
+})
+```
+
+### For [vConsole](https://github.com/Tencent/vConsole)
+
+we use vConsole with CDN by default since it's unpacked size is 344 kB.
+
+```typescript
+import { fileURLToPath } from 'url'
+import vDebugger from 'vite-plugin-debugger'
+
+const resolve = (dir: string) => fileURLToPath(new URL(dir, import.meta.url))
+
+export default defineConfig(({ command, mode })=>({
+  plugins:[
+    vDebugger({
+      debug: mode !== 'production',
+      vConsole: {
+        options: {
+          theme: 'dark',
+        },
+      },
+    })
+  ]
+})
+```
+
+
+
+For more details about vConsole options, please check out [vConsole API](https://github.com/Tencent/vConsole/blob/dev/doc/public_properties_methods.md).
+
+If you prefer use vConsole locally, you should install vConsole first.
+
+```bash
+pnpm add vconsole -D
+# or
+yarn add vconsole -D
+# or
+npm i vconsole -D
+```
+
+
+
+```typescript
+import { fileURLToPath } from 'url'
+import vDebugger from 'vite-plugin-debugger'
+
+const resolve = (dir: string) => fileURLToPath(new URL(dir, import.meta.url))
+
+export default defineConfig(({ command, mode })=>({
+  plugins:[
+    vDebugger({
+      debug: mode !== 'production',
+      local: true,
+      entry: resolve('src/main.ts'),// vue or src/main.tsx for react
+      vConsole: {
+        options: {
+          theme: 'dark',
+        },
+      },
+    })
+  ]
+})
+```
+
+
+
+
+## License
+
+[MIT](LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import { Plugin } from 'vite';
+import { InitOptions } from 'eruda';
+import { VConsoleOptions } from 'core/options.interface';
+
+declare type ErudaPlugin = 'fps' | 'features' | 'timing' | 'memory' | 'code' | 'benchmark' | 'geolocation' | 'dom' | 'orientation' | 'touches';
+interface ErudaOptions extends CommonOptions {
+    /**
+     * eruda options
+     * see also https://github.com/liriliri/eruda/blob/master/doc/API.md
+     */
+    options?: InitOptions;
+    /**
+     * eruda plugins
+     * see also https://github.com/liriliri/eruda#plugins
+     */
+    plugins?: ErudaPlugin[] | {
+        name: ErudaPlugin;
+        src: string;
+    }[];
+}
+
+interface vConsoleOptions extends CommonOptions {
+    options?: VConsoleOptions;
+}
+
+declare type CDN = 'jsdelivr' | 'unpkg' | 'cdnjs';
+
+interface CommonOptions {
+    /**
+     * cdn services
+     */
+    cdn?: CDN;
+    /**
+     * custom cdn url
+     */
+    src?: string;
+}
+interface DebuggerOptions {
+    /**
+     * debug or not
+     */
+    debug?: boolean;
+    /**
+     * use node_modules
+     */
+    local?: boolean;
+    /**
+     * if local is true, use this to specify the path
+     */
+    entry?: string | string[];
+    /**
+     * eruda options
+     */
+    eruda?: ErudaOptions;
+    /**
+     * vConsole options
+     */
+    vConsole?: vConsoleOptions;
+}
+declare const _default: (options: DebuggerOptions) => Plugin;
+
+export { CommonOptions, DebuggerOptions, _default as default };

package/dist/index.js

@@ -0,0 +1,213 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// node_modules/.pnpm/slash@4.0.0/node_modules/slash/index.js
+function slash(path) {
+  const isExtendedLengthPath = /^\\\\\?\\/.test(path);
+  const hasNonAscii = /[^\u0000-\u0080]+/.test(path);
+  if (isExtendedLengthPath || hasNonAscii) {
+    return path;
+  }
+  return path.replace(/\\/g, "/");
+}
+
+// src/helpers/index.ts
+var capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+var transformCDN = (pkg, cdn) => {
+  if (cdn === "jsdelivr") {
+    if (Array.isArray(pkg)) {
+      return `https://cdn.jsdelivr.net/combine/${pkg.map((p) => `npm/${p}`).join(",")}`;
+    }
+    return `https://cdn.jsdelivr.net/npm/${pkg}`;
+  }
+  if (cdn === "unpkg") {
+    return `https://unpkg.com/${pkg}`;
+  }
+  if (cdn === "cdnjs") {
+    if (!Array.isArray(pkg)) {
+      if (pkg === "eruda") {
+        return "https://cdnjs.cloudflare.com/ajax/libs/eruda/2.4.1/eruda.min.js";
+      }
+      throw new Error(`[vite-plugin-debugger]: ${cdn} only support eruda without its plugins.`);
+    }
+    return `https://cdnjs.cloudflare.com/ajax/libs/${pkg}`;
+  }
+  return "";
+};
+
+// src/plugins/eruda.ts
+var transformErudaOptions = (html, opts) => {
+  const { debug } = opts;
+  const { options, plugins, cdn = "jsdelivr", src } = opts.eruda;
+  const tags = [];
+  tags.push({
+    tag: "script",
+    attrs: {
+      src: src || transformCDN("eruda", cdn)
+    },
+    injectTo: "head"
+  });
+  let erudaScript = `eruda.init(${JSON.stringify(options)});
+`;
+  if (plugins.length > 0) {
+    if (cdn === "jsdelivr") {
+      tags.push({
+        tag: "script",
+        attrs: {
+          src: transformCDN(plugins.map((plugin) => `eruda-${plugin}`))
+        },
+        injectTo: "head"
+      });
+    } else {
+      plugins.forEach((plugin) => {
+        tags.push({
+          tag: "script",
+          attrs: {
+            src: typeof plugin === "string" ? transformCDN(`eruda-${plugin}`, cdn) : plugin.src
+          },
+          injectTo: "head"
+        });
+      });
+    }
+    plugins.forEach((plugin) => {
+      erudaScript += `eruda.add(eruda${capitalize(typeof plugin === "string" ? plugin : plugin.name)});
+`;
+    });
+  }
+  tags.push({
+    tag: "script",
+    children: erudaScript,
+    injectTo: "head"
+  });
+  if (debug === true) {
+    return {
+      html,
+      tags
+    };
+  }
+  if (debug === false) {
+    return html;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    return {
+      html,
+      tags
+    };
+  }
+};
+var transformErudaImport = (code, opts) => {
+  const { debug } = opts;
+  const { options = {}, plugins } = opts.eruda;
+  let importCode = "import eruda from 'eruda';";
+  let erudaScript = `eruda.init(${JSON.stringify(options)});`;
+  if (plugins && plugins.length > 0) {
+    plugins.forEach((plugin) => {
+      importCode += `import eruda${capitalize(typeof plugin === "string" ? plugin : plugin.name)} from 'eruda-${typeof plugin === "string" ? plugin : plugin.name}';`;
+      erudaScript += `eruda.add(eruda${capitalize(typeof plugin === "string" ? plugin : plugin.name)});`;
+    });
+  }
+  return {
+    code: debug ? `/* eslint-disable */;${importCode}${erudaScript}/* eslint-enable */${code}` : code,
+    map: null
+  };
+};
+
+// src/plugins/vConsole.ts
+var transformVConsoleOptions = (html, opts) => {
+  const { debug } = opts;
+  const { options, cdn = "jsdelivr", src } = opts.vConsole;
+  const tags = [];
+  tags.push({
+    tag: "script",
+    attrs: {
+      src: src || transformCDN("vconsole", cdn)
+    },
+    injectTo: "head"
+  });
+  tags.push({
+    tag: "script",
+    children: `var vConsole = new VConsole(${JSON.stringify(options)});`,
+    injectTo: "head"
+  });
+  if (debug === true) {
+    return {
+      html,
+      tags
+    };
+  }
+  if (debug === false) {
+    return html;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    return {
+      html,
+      tags
+    };
+  }
+};
+var transformVConsoleImport = (code, opts) => {
+  const { debug } = opts;
+  const { options = {} } = opts.vConsole;
+  return {
+    code: debug ? `/* eslint-disable */;import VConsole from 'vconsole';new VConsole(${JSON.stringify(options)});/* eslint-enable */${code}` : code,
+    map: null
+  };
+};
+
+// src/index.ts
+var src_default = (options) => {
+  const { eruda, vConsole, local, entry } = options;
+  const entryPath = (Array.isArray(entry) ? entry : [entry]).map((path) => slash(path));
+  if (eruda && vConsole) {
+    throw new Error("[vite-plugin-debugger]: You'd better use only one debugger tool at a time.");
+  }
+  return {
+    name: "vite-plugin-debugger",
+    transformIndexHtml(html) {
+      if (!local) {
+        if (eruda) {
+          return transformErudaOptions(html, options);
+        }
+        if (vConsole) {
+          return transformVConsoleOptions(html, options);
+        }
+      }
+      return html;
+    },
+    transform(code, id) {
+      if (local) {
+        if (eruda && entryPath.includes(id)) {
+          return transformErudaImport(code, options);
+        }
+        if (vConsole && entryPath.includes(id)) {
+          return transformVConsoleImport(code, options);
+        }
+      }
+      return { code, map: null };
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "vite-plugin-debugger",
+  "version": "0.0.1",
+  "description": "A vite plugin provide the debugger tools for mobile devices.",
+  "author": "jade-gjz",
+  "license": "MIT",
+  "keywords": [
+    "vite",
+    "debugger",
+    "plugin",
+    "eruda",
+    "vConsole",
+    "mobile"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "eruda": "^2.0.0",
+    "vconsole": "^3.0.0",
+    "vite": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "eruda": {
+      "optional": true
+    },
+    "vconsole": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@jhqn/eslint-config-ts": "^0.0.30",
+    "bumpp": "^8.2.1",
+    "conventional-changelog-cli": "^2.2.2",
+    "eruda": "https://github.com/liriliri/eruda.git",
+    "eslint": "^8.19.0",
+    "slash": "^4.0.0",
+    "tsup": "^6.1.3",
+    "typescript": "^4.7.4",
+    "vconsole": "^3.14.6",
+    "vite": "^2.9.13"
+  },
+  "scripts": {
+    "dev": "tsup src/index.ts --dts --watch",
+    "build": "tsup src/index.ts --dts",
+    "prepublish": "pnpm build",
+    "lint": "eslint . --fix",
+    "release": "bumpp package.json --commit --push --tag && pnpm publish --access public"
+  }
+}