├── .gitignore ├── bin └── eruda-plugin.js ├── simple ├── plugin.gitignore ├── .eslintrc.json ├── README.md ├── index.html ├── package.json └── eruda-plugin.js ├── .prettierrc.json ├── webpack ├── plugin.gitignore ├── src │ ├── style.scss │ └── index.js ├── .eslintrc.json ├── README.md ├── index.html ├── package.json └── webpack.config.js ├── CHANGELOG.md ├── README.md ├── package.json ├── LICENSE └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /eruda-test/ 3 | package-lock.json -------------------------------------------------------------------------------- /bin/eruda-plugin.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require('../index'); -------------------------------------------------------------------------------- /simple/plugin.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | eruda-plugin.min.js 3 | package-lock.json -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "tabWidth": 2, 4 | "semi": false 5 | } 6 | -------------------------------------------------------------------------------- /webpack/plugin.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | eruda-plugin.js 3 | eruda-plugin.js.map 4 | package-lock.json -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## v1.4.0 (20 Jul 2024) 2 | 3 | * feat: update template 4 | 5 | ## v1.2.1 (15 Oct 2019) 6 | 7 | * fix: eruda js path -------------------------------------------------------------------------------- /webpack/src/style.scss: -------------------------------------------------------------------------------- 1 | .plugin { 2 | padding: 10px; 3 | .tip { 4 | padding: 10px; 5 | background: #fff; 6 | color: #263238; 7 | } 8 | } -------------------------------------------------------------------------------- /simple/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "amd": true, 6 | "commonjs": true 7 | }, 8 | "extends": "eslint:recommended", 9 | "rules": { 10 | "indent": ["error", 2], 11 | "quotes": ["error", "single"], 12 | "no-extra-semi": "off" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /webpack/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "amd": true, 6 | "commonjs": true 7 | }, 8 | "extends": "eslint:recommended", 9 | "rules": { 10 | "indent": ["error", 2], 11 | "quotes": ["error", "single"], 12 | "no-extra-semi": "off" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /simple/README.md: -------------------------------------------------------------------------------- 1 | # eruda-plugin 2 | 3 | Eruda plugin for xxx. 4 | 5 | ## Demo 6 | 7 | Browse it on your phone: 8 | [https://eruda.liriliri.io/](https://eruda.liriliri.io/) 9 | 10 | ## Install 11 | 12 | ```bash 13 | npm install eruda-plugin --save 14 | ``` 15 | 16 | ```javascript 17 | eruda.add(erudaPlugin); 18 | ``` 19 | 20 | Make sure Eruda is loaded before this plugin, otherwise won't work. -------------------------------------------------------------------------------- /webpack/README.md: -------------------------------------------------------------------------------- 1 | # eruda-plugin 2 | 3 | Eruda plugin for xxx. 4 | 5 | ## Demo 6 | 7 | Browse it on your phone: 8 | [https://eruda.liriliri.io/](https://eruda.liriliri.io/) 9 | 10 | ## Install 11 | 12 | ```bash 13 | npm install eruda-plugin --save 14 | ``` 15 | 16 | ```javascript 17 | eruda.add(erudaPlugin); 18 | ``` 19 | 20 | Make sure Eruda is loaded before this plugin, otherwise won't work. -------------------------------------------------------------------------------- /webpack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Eruda-plugin 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Eruda-plugin 7 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eruda-plugin", 3 | "version": "1.0.0", 4 | "main": "eruda-plugin.js", 5 | "files": [ 6 | "eruda-plugin.js", 7 | "eruda-plugin.min.js" 8 | ], 9 | "scripts": { 10 | "build": "uglifyjs eruda-plugin.js -o eruda-plugin.min.js --mangle", 11 | "lint": "eslint eruda-plugin.js", 12 | "ci": "npm run lint && npm run build", 13 | "dev": "http-server" 14 | }, 15 | "keywords": [ 16 | "eruda", 17 | "plugin" 18 | ], 19 | "author": "", 20 | "devDependencies": { 21 | "eruda": "^3.2.0", 22 | "eslint": "^8.36.0", 23 | "http-server": "^14.1.1", 24 | "uglify-js": "^3.19.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /webpack/src/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function (eruda) { 2 | let { evalCss } = eruda.util 3 | 4 | class Plugin extends eruda.Tool { 5 | constructor() { 6 | super() 7 | this.name = 'plugin' 8 | this._style = evalCss(require('./style.scss')) 9 | } 10 | init($el, container) { 11 | super.init($el, container) 12 | $el.html('
Put whatever you want here:)
') 13 | } 14 | show() { 15 | super.show() 16 | } 17 | hide() { 18 | super.hide() 19 | } 20 | destroy() { 21 | super.destroy() 22 | evalCss.remove(this._style) 23 | } 24 | } 25 | 26 | return new Plugin() 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # eruda-plugin 2 | 3 | [![NPM version][npm-image]][npm-url] 4 | [![License][license-image]][npm-url] 5 | 6 | [npm-image]: https://img.shields.io/npm/v/eruda-plugin.svg 7 | [npm-url]: https://npmjs.org/package/eruda-plugin 8 | [license-image]: https://img.shields.io/npm/l/eruda-plugin.svg 9 | 10 | Eruda plugin template. 11 | 12 | ## Install 13 | 14 | ```bash 15 | npm install -g eruda-plugin 16 | ``` 17 | 18 | ## Usage 19 | 20 | ```bash 21 | eruda-plugin 22 | ``` 23 | 24 | Choose which templates you want and then enter the name of your eruda plugin. 25 | 26 | Currently there are two types of templates: 27 | 28 | * Simple: Simple plugin with only one source file. 29 | * Webpack: Complex plugin with es6 and scss support. 30 | 31 | ## Commonly used NPM scripts 32 | 33 | ```bash 34 | # watch and auto re-build. 35 | npm run dev 36 | # build dist files. 37 | npm run build 38 | # lint source files. 39 | npm run lint 40 | ``` 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eruda-plugin", 3 | "version": "1.4.0", 4 | "description": "Eruda plugin template", 5 | "main": "index.js", 6 | "files": [ 7 | "index.js", 8 | "webpack", 9 | "simple", 10 | "bin" 11 | ], 12 | "scripts": { 13 | "format": "lsla prettier \"index.js\" \"simple/*.{js,json}\" \"webpack/**/*.{js,json}\" --write" 14 | }, 15 | "bin": { 16 | "eruda-plugin": "./bin/eruda-plugin.js" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/liriliri/eruda-plugin.git" 21 | }, 22 | "keywords": [ 23 | "eruda", 24 | "plugin", 25 | "template" 26 | ], 27 | "author": "redhoodsu", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/liriliri/eruda-plugin/issues" 31 | }, 32 | "engines": { 33 | "node": ">=8" 34 | }, 35 | "homepage": "https://github.com/liriliri/eruda-plugin#readme", 36 | "dependencies": { 37 | "fs-extra": "^11.2.0", 38 | "glob": "^10.4.5", 39 | "inquirer": "^10.0.2", 40 | "licia": "^1.41.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eruda-plugin", 3 | "version": "1.0.0", 4 | "main": "eruda-plugin.js", 5 | "files": [ 6 | "eruda-plugin.js", 7 | "eruda-plugin.js.map" 8 | ], 9 | "scripts": { 10 | "dev": "webpack-dev-server --host 0.0.0.0 --mode development", 11 | "build": "webpack --mode production", 12 | "ci": "npm run lint && npm run build", 13 | "lint": "eslint src/**/*.js" 14 | }, 15 | "keywords": [ 16 | "eruda", 17 | "plugin" 18 | ], 19 | "author": "", 20 | "devDependencies": { 21 | "autoprefixer": "^10.4.14", 22 | "@babel/core": "^7.21.3", 23 | "babel-loader": "^9.1.2", 24 | "@babel/plugin-transform-runtime": "^7.21.0", 25 | "@babel/preset-env": "^7.20.2", 26 | "css-loader": "^3.4.2", 27 | "eruda": "^3.2.0", 28 | "postcss": "^8.4.21", 29 | "postcss-class-prefix": "^0.3.0", 30 | "postcss-loader": "^7.0.2", 31 | "sass": "^1.77.8", 32 | "sass-loader": "^14.2.1", 33 | "webpack": "^5.93.0", 34 | "webpack-cli": "^5.1.4", 35 | "webpack-dev-server": "^4.12.0", 36 | "eslint": "^8.57.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 liriliri 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /simple/eruda-plugin.js: -------------------------------------------------------------------------------- 1 | ;(function (root, factory) { 2 | if (typeof define === 'function' && define.amd) { 3 | define([], factory) 4 | } else if (typeof module === 'object' && module.exports) { 5 | module.exports = factory() 6 | } else { 7 | root.erudaPlugin = factory() 8 | } 9 | })(this, function () { 10 | return function (eruda) { 11 | var Tool = eruda.Tool, 12 | util = eruda.util 13 | 14 | var Plugin = Tool.extend({ 15 | name: 'plugin', 16 | init: function ($el) { 17 | this.callSuper(Tool, 'init', arguments) 18 | this._style = util.evalCss( 19 | [ 20 | '.eruda-dev-tools .eruda-tools .eruda-plugin {padding: 10px;}', 21 | '.eruda-tip {padding: 10px; background: #fff; color: #263238;}', 22 | ].join('.eruda-dev-tools .eruda-tools .eruda-plugin ') 23 | ) 24 | $el.html('
Put whatever you want here:)
') 25 | }, 26 | show: function () { 27 | this.callSuper(Tool, 'show', arguments) 28 | }, 29 | hide: function () { 30 | this.callSuper(Tool, 'hide', arguments) 31 | }, 32 | destroy: function () { 33 | this.callSuper(Tool, 'destroy', arguments) 34 | util.evalCss.remove(this._style) 35 | }, 36 | }) 37 | 38 | return new Plugin() 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const inquirer = require('inquirer').default 2 | const path = require('path') 3 | const fs = require('fs-extra') 4 | const { glob } = require('glob') 5 | const trim = require('licia/trim') 6 | const concat = require('licia/concat') 7 | const upperFirst = require('licia/upperFirst') 8 | 9 | const prompt = async (questions) => inquirer.prompt(questions) 10 | const ensureDir = async (dir) => fs.ensureDir(dir) 11 | const readdir = async (dir) => 12 | await glob('**/*', { cwd: dir, dot: true, nodir: true }) 13 | const readFile = async (path) => fs.readFile(path, 'utf-8') 14 | const writeFile = async (path, data) => fs.writeFile(path, data, 'utf-8') 15 | ;(async () => { 16 | let answers = await prompt([ 17 | { 18 | type: 'list', 19 | name: 'type', 20 | message: 'Which template?', 21 | choices: ['simple', 'webpack'], 22 | }, 23 | { 24 | name: 'name', 25 | message: 'Plugin name:', 26 | }, 27 | ]) 28 | 29 | let { type, name } = answers 30 | 31 | if (name.trim() === '') return console.log('Please enter a plugin name!') 32 | name = name.toLowerCase() 33 | 34 | let dist = path.resolve(process.cwd(), `./eruda-${name}`), 35 | src = path.resolve(__dirname, `./${type}`) 36 | 37 | await ensureDir(dist) 38 | 39 | let ignoreList = await readFile(path.resolve(src, './plugin.gitignore')) 40 | ignoreList = ignoreList 41 | .split(/\n/g) 42 | .map((p) => trim(p.trim(), '/').replace(/\//g, path.sep)) 43 | .filter((p) => p !== '' && p !== 'node_modules') 44 | 45 | let files = await readdir(src) 46 | 47 | for (let i = 0, len = files.length; i < len; i++) { 48 | let file = files[i] 49 | let srcPath = path.resolve(src, file) 50 | 51 | // Make sure gitignore and npmignore aren't taking effect when published. 52 | file = file 53 | .replace('plugin.gitignore', '.gitignore') 54 | .replace('plugin.npmignore', '.npmignore') 55 | let distPath = path.resolve(dist, file.replace('plugin', name)) 56 | 57 | for (let ignorePath of ignoreList) { 58 | if (srcPath.indexOf(ignorePath) > -1) return 59 | } 60 | 61 | let data = await readFile(srcPath) 62 | data = data 63 | .replace(/(eruda-)plugin/gi, `$1${name}`) 64 | .replace(/\bPlugin\b/g, upperFirst(name)) 65 | .replace(/erudaPlugin/g, `eruda${upperFirst(name)}`) 66 | .replace(/'plugin'/g, `'${name}'`) 67 | .replace(/\.plugin {/g, `.${name} {`) 68 | 69 | await ensureDir(path.dirname(distPath)) 70 | await writeFile(distPath, data) 71 | } 72 | 73 | console.log(`cd eruda-${name} && npm i;`) 74 | })() 75 | -------------------------------------------------------------------------------- /webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer') 2 | const postcss = require('postcss') 3 | const webpack = require('webpack') 4 | const path = require('path') 5 | const pkg = require('./package.json') 6 | const classPrefix = require('postcss-class-prefix') 7 | const TerserPlugin = require('terser-webpack-plugin') 8 | 9 | const banner = pkg.name + ' v' + pkg.version + ' ' + pkg.homepage 10 | 11 | module.exports = (env, argv) => { 12 | const config = { 13 | devtool: 'source-map', 14 | entry: './src/index.js', 15 | devServer: { 16 | static: { 17 | directory: path.join(__dirname, './'), 18 | }, 19 | port: 8080, 20 | }, 21 | output: { 22 | path: __dirname, 23 | filename: 'eruda-plugin.js', 24 | publicPath: '/assets/', 25 | library: ['erudaPlugin'], 26 | libraryTarget: 'umd', 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.js$/, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: 'babel-loader', 35 | options: { 36 | sourceType: 'unambiguous', 37 | presets: ['@babel/preset-env'], 38 | plugins: ['@babel/plugin-transform-runtime'], 39 | }, 40 | }, 41 | }, 42 | { 43 | test: /\.scss$/, 44 | use: [ 45 | 'css-loader', 46 | { 47 | loader: 'postcss-loader', 48 | options: { 49 | postcssOptions: { 50 | plugins: [ 51 | postcss.plugin('postcss-namespace', function () { 52 | // Add '.dev-tools .tools ' to every selector. 53 | return function (root) { 54 | root.walkRules(function (rule) { 55 | if (!rule.selectors) return rule 56 | 57 | rule.selectors = rule.selectors.map(function ( 58 | selector 59 | ) { 60 | return '.dev-tools .tools ' + selector 61 | }) 62 | }) 63 | } 64 | }), 65 | classPrefix('eruda-'), 66 | autoprefixer, 67 | ], 68 | }, 69 | }, 70 | }, 71 | 'sass-loader', 72 | ], 73 | }, 74 | ], 75 | }, 76 | plugins: [new webpack.BannerPlugin(banner)], 77 | } 78 | 79 | if (argv.mode === 'production') { 80 | config.optimization = { 81 | minimize: true, 82 | minimizer: [ 83 | new TerserPlugin({ 84 | terserOptions: { 85 | format: { 86 | comments: false, 87 | }, 88 | }, 89 | extractComments: false, 90 | }), 91 | ], 92 | } 93 | } 94 | 95 | return config 96 | } 97 | --------------------------------------------------------------------------------