feat: theme

.eslintrc.json

@@ -6,6 +6,7 @@
     "commonjs": true
   },
   "parserOptions": {
+    "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "extends": "eslint:recommended",

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+ko_fi: surunzi
+open_collective: eruda

.github/workflows/main.yml

@@ -0,0 +1,31 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'src/**/*'
+
+jobs:
+  ci:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: |
+        npm install -g @liriliri/lsla
+        npm install -g yarn
+        npm run init
+        npm run init:front
+        npm run ci

.github/workflows/publish.yml

@@ -0,0 +1,31 @@
+name: Publish to NPM
+
+on:
+  workflow_dispatch:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Build eruda-features
+        run: |
+          npm install -g @liriliri/lsla
+          npm install -g yarn
+          npm run init
+          npm run init:front
+          npm run build
+      - name: Publish package on NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,5 +1,5 @@
 node_modules/
-src/devtools.js
+src/devtools.txt
 eruda-vue.js
 eruda-vue.js.map
 package-lock.json

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present liriliri
+
+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.

README.md

@@ -1,11 +1,21 @@
 # eruda-vue
 
-Eruda plugin for vue.
+[![NPM version][npm-image]][npm-url]
+[![Build status][ci-image]][ci-url]
+[![License][license-image]][npm-url]
+
+[npm-image]: https://img.shields.io/npm/v/eruda-vue.svg
+[npm-url]: https://npmjs.org/package/eruda-vue
+[ci-image]: https://img.shields.io/github/actions/workflow/status/liriliri/eruda-vue/main.yml?branch=master&style=flat-square
+[ci-url]: https://github.com/liriliri/eruda-vue/actions/workflows/main.yml 
+[license-image]: https://img.shields.io/npm/l/eruda-vue.svg
+
+Eruda plugin for Vue.
 
 ## Demo
 
 Browse it on your phone: 
-[https://eruda.liriliri.io/](https://eruda.liriliri.io/)
+[https://eruda.liriliri.io/?plugin=vue](https://eruda.liriliri.io/?plugin=vue)
 
 ## Install
 

package.json

@@ -2,6 +2,7 @@
   "name": "eruda-vue",
   "version": "1.0.0",
   "main": "eruda-vue.js",
+  "description": "Eruda plugin for Vue",
   "files": [
     "eruda-vue.js",
     "eruda-vue.js.map"
@@ -10,7 +11,7 @@
     "init": "git submodule init && git submodule update && npm install --force && cd vue-devtools && yarn && npm run build",
     "init:front": "npm run build:front && npm run copy:front",
     "build:front": "cd vue-devtools/packages/shell-eruda && npm run build",
-    "copy:front": "lsla shx cp -r vue-devtools/packages/shell-eruda/build/devtools.js src/devtools.js",
+    "copy:front": "lsla shx cp -r vue-devtools/packages/shell-eruda/build/devtools.js src/devtools.txt",
     "dev": "webpack-dev-server --host 0.0.0.0 --mode development",
     "build": "webpack --mode production",
     "ci": "npm run lint && npm run build",
@@ -19,9 +20,15 @@
   },
   "keywords": [
     "eruda",
+    "vue",
     "plugin"
   ],
-  "author": "",
+  "author": "redhoodsu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liriliri/eruda-vue/issues"
+  },
+  "homepage": "https://github.com/liriliri/eruda-vue#readme",
   "devDependencies": {
     "@babel/core": "^7.21.3",
     "@babel/plugin-transform-runtime": "^7.21.0",

src/back.js

@@ -1,8 +1,9 @@
 import { installHook } from '@back/hook'
 import { initBackend } from '@back'
 import { Bridge } from '@utils/bridge'
+import { SharedData } from '@utils/shared-data'
 import createUrl from 'licia/createUrl'
-import devtools from 'raw-loader!./devtools.js'
+import devtools from 'raw-loader!./devtools.txt'
 
 installHook(window)
 
@@ -17,6 +18,8 @@ export function initDevtools(iframe) {
   })
   initBackend(bridge)
 
+  const devtoolsSrc = createUrl(devtools, { type: 'application/javascript' })
+
   const devtoolsUrl = createUrl(
     `<!DOCTYPE html>
     <html>
@@ -26,7 +29,7 @@ export function initDevtools(iframe) {
       </head>
       <body>
         <div id="app"></div>
-        <script>${devtools}</script>
+        <script src="${devtoolsSrc}"></script>
       </body>
     </html>`,
     {
@@ -37,3 +40,7 @@ export function initDevtools(iframe) {
   iframe.__vdevtools__injected = true
   iframe.src = devtoolsUrl
 }
+
+export function setTheme(value) {
+  SharedData.theme = value
+}

src/index.js

@@ -1,4 +1,4 @@
-const { initDevtools } = require('./back')
+const { initDevtools, setTheme } = require('./back')
 
 module.exports = function (eruda) {
   let { evalCss } = eruda.util
@@ -15,6 +15,9 @@ module.exports = function (eruda) {
       const iframe = $el.find('.eruda-vue-devtools').get(0)
 
       initDevtools(iframe)
+
+      setTheme(this._getTheme())
+      eruda.get().config.on('change', this._onThemeChange)
     }
     show() {
       super.show()
@@ -26,6 +29,14 @@ module.exports = function (eruda) {
       super.destroy()
       evalCss.remove(this._style)
     }
+    _getTheme() {
+      return eruda.util.isDarkTheme() ? 'dark' : 'light'
+    }
+    _onThemeChange = (name) => {
+      if (name === 'theme') {
+        setTheme(this._getTheme())
+      }
+    }
   }
 
   return new Vue()