feat: default settings #141

doc/API.md

@@ -12,16 +12,30 @@ Initialize eruda.
 |tool             |string array|Choose which default tools you want, by default all will be added                        |
 |autoScale=true   |boolean     |Auto scale eruda for different viewport settings                                         |
 |useShadowDom=true|boolean     |Use shadow dom for css encapsulation                                                     |
+|defaults         |object      |Default settings                                                                         |
+
+Available default settings:
+
+|Name        |Type  |Desc                                         |
+|------------|------|---------------------------------------------|
+|transparency|number|Transparency, 0 to 1                         |
+|displaySize |number|Display size, 0 to 100                       |
+|theme       |string|Theme, defaults to Light or Dark in dark mode|
 
 ```javascript
-let el = document.createElement('div');
+const el = document.createElement('div');
 document.body.appendChild(el);
 
 eruda.init({
     container: el,
     tool: ['console', 'elements'],
     useShadowDom: true,
-    autoScale: true
+    autoScale: true,
+    defaults: {
+        displaySize: 50,
+        transparency: 0.9,
+        theme: 'Monokai Pro'
+    }
 });
 ```
 

src/DevTools/DevTools.js

@@ -12,15 +12,25 @@ import {
   isNum,
   $,
   throttle,
-  isDarkMode
+  isDarkMode,
+  extend
 } from '../lib/util'
 import evalCss from '../lib/evalCss'
 import LunaNotification from 'luna-notification'
 
 export default class DevTools extends Emitter {
-  constructor($container) {
+  constructor($container, { defaults = {} } = {}) {
     super()
 
+    this._defCfg = extend(
+      {
+        transparency: 1,
+        displaySize: 80,
+        theme: isDarkMode() ? 'Dark' : 'Light'
+      },
+      defaults
+    )
+
     this._style = evalCss(require('./DevTools.scss'))
 
     this.$container = $container
@@ -142,11 +152,7 @@ export default class DevTools extends Emitter {
     return this
   }
   initCfg(settings) {
-    const cfg = (this.config = Settings.createCfg('dev-tools', {
-      transparency: 1,
-      displaySize: 80,
-      theme: isDarkMode() ? 'Dark' : 'Light'
-    }))
+    const cfg = (this.config = Settings.createCfg('dev-tools', this._defCfg))
 
     this._setTransparency(cfg.get('transparency'))
     this._setDisplaySize(cfg.get('displaySize'))

src/eruda.js

@@ -28,7 +28,7 @@ import {
 import evalCss from './lib/evalCss'
 
 export default {
-  init({ container, tool, autoScale = true, useShadowDom = true } = {}) {
+  init({ container, tool, autoScale = true, useShadowDom = true, defaults = {} } = {}) {
     if (this._isInit) return
 
     this._isInit = true
@@ -36,7 +36,7 @@ export default {
 
     this._initContainer(container, useShadowDom)
     this._initStyle()
-    this._initDevTools()
+    this._initDevTools(defaults)
     this._initEntryBtn()
     this._initSettings()
     this._initTools(tool)
@@ -182,8 +182,10 @@ export default {
 
     this._$el = $(el)
   },
-  _initDevTools() {
-    this._devTools = new DevTools(this._$el)
+  _initDevTools(defaults) {
+    this._devTools = new DevTools(this._$el, {
+      defaults
+    })
   },
   _initStyle() {
     const className = 'eruda-style-container'

test/boot.js

@@ -2,7 +2,12 @@ function boot(name, cb) {
   // Need a little delay to make sure width and height of webpack dev server iframe are initialized.
   setTimeout(function() {
     let options = {
-      useShadowDom: false
+      useShadowDom: false,
+      defaults: {
+        displaySize: 50,
+        transparency: 0.9,
+        theme: 'Monokai Pro'
+      }
     }
     if (name) {
       options.tool = name === 'settings' ? [] : name
@@ -13,10 +18,7 @@ function boot(name, cb) {
     } catch (e) {
       alert(e)
     }
-    eruda
-      .show()
-      .get()
-      .config.set('displaySize', 50)
+    eruda.show()
 
     cb && cb()
 

test/index.html

@@ -54,7 +54,12 @@
           try {
             eruda.init({
               container: el,
-              useShadowDom: false
+              useShadowDom: false,
+              defaults: {
+                displaySize: 50,
+                transparency: 0.9,
+                theme: 'Monokai Pro'
+              }
             })
           } catch (e) {
             alert(e)