Dev: Object abstract function order

I am working with an Arabic site. By default, `direction` is `ltr`, however, if `body` is `rtl`, children inherit and become `rtl`. Putting this style will force eruda to be always ltr.

README.md

@@ -1,15 +1,18 @@
-<a href="http://liriliri.github.io/eruda/" target="_blank">
+<a href="http://eruda.liriliri.io/" target="_blank">
     <img src="http://7xn2zy.com1.z0.glb.clouddn.com/github_eruda2.jpg">
 </a>
 
-[中文](doc/README_CH.md)
+[中文](doc/README_CN.md)
 
 # Eruda
 
+[![Join the chat at https://gitter.im/liriliri/eruda][gitter-image]][gitter-url]
 [![NPM version][npm-image]][npm-url]
 [![Build status][travis-image]][travis-url]
 [![License][license-image]][npm-url]
 
+[gitter-image]: https://badges.gitter.im/liriliri/eruda.svg
+[gitter-url]: https://gitter.im/liriliri/eruda?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
 [npm-image]: https://img.shields.io/npm/v/eruda.svg
 [npm-url]: https://npmjs.org/package/eruda
 [travis-image]: https://img.shields.io/travis/liriliri/eruda.svg
@@ -29,14 +32,14 @@ is a similar one on mobile side, which leads to the creation of Eruda.
 
 ## Demo
 
-![Demo](http://7xn2zy.com1.z0.glb.clouddn.com/eruda_qrcode2.png)
+![Demo](http://7xn2zy.com1.z0.glb.clouddn.com/eruda_qrcode3.png)
 
-Browse it on your phone: [http://liriliri.github.io/eruda/](http://liriliri.github.io/eruda/)
+Browse it on your phone: [http://eruda.liriliri.io/](http://eruda.liriliri.io/)
 
 In order to try it for different sites, execute the script below on browser address bar.
 
 ```javascript
-javascript:(function () { var script = document.createElement('script'); script.src="//liriliri.github.io/eruda/eruda.min.js"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
+javascript:(function () { var script = document.createElement('script'); script.src="http://eruda.liriliri.io/eruda.min.js"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
 ```
 
 ## Features
@@ -68,7 +71,7 @@ Add this script to your page.
 It's also available on [jsDelivr](http://www.jsdelivr.com/projects/eruda) and [cdnjs](https://cdnjs.com/libraries/eruda).
 
 ```html
-<script src="//cdn.jsdelivr.net/eruda/1.2.0/eruda.min.js"></script>
+<script src="//cdn.jsdelivr.net/eruda/1.2.2/eruda.min.js"></script>
 <script>eruda.init();</script>
 ```
 

doc/README_CN.md

@@ -1,13 +1,16 @@
-<a href="http://liriliri.github.io/eruda/" target="_blank">
+<a href="http://eruda.liriliri.io/" target="_blank">
     <img src="http://7xn2zy.com1.z0.glb.clouddn.com/github_eruda2.jpg">
 </a>
 
 # Eruda
 
+[![Join the chat at https://gitter.im/liriliri/eruda][gitter-image]][gitter-url]
 [![NPM version][npm-image]][npm-url]
 [![Build status][travis-image]][travis-url]
 [![License][license-image]][npm-url]
 
+[gitter-image]: https://badges.gitter.im/liriliri/eruda.svg
+[gitter-url]: https://gitter.im/liriliri/eruda?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
 [npm-image]: https://img.shields.io/npm/v/eruda.svg
 [npm-url]: https://npmjs.org/package/eruda
 [travis-image]: https://img.shields.io/travis/liriliri/eruda.svg
@@ -82,12 +85,12 @@ eruda.init({
 
 ## Demo
 
-![Demo](http://7xn2zy.com1.z0.glb.clouddn.com/eruda_qrcode2.png)
+![Demo](http://7xn2zy.com1.z0.glb.clouddn.com/eruda_qrcode3.png)
 
-请扫描二维码或在手机上直接访问：[http://liriliri.github.io/eruda/](http://liriliri.github.io/eruda/)
+请扫描二维码或在手机上直接访问：[http://eruda.liriliri.io/](http://eruda.liriliri.io/)
 
 如果想在其它页面尝试，请在浏览器地址栏上输入以下代码。
 
 ```javascript
-javascript:(function () { var script = document.createElement('script'); script.src="//liriliri.github.io/eruda/eruda.min.js"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
+javascript:(function () { var script = document.createElement('script'); script.src="http://eruda.liriliri.io/eruda.min.js"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "scripts": {
@@ -35,10 +35,10 @@
   "devDependencies": {
     "autoprefixer": "^6.3.3",
     "babel-core": "^6.6.5",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^7.0.0",
     "babel-plugin-transform-runtime": "^6.8.0",
     "babel-preset-es2015": "^6.6.0",
-    "css-loader": "^0.26.2",
+    "css-loader": "^0.28.0",
     "draggabilly": "^2.1.0",
     "handlebars": "^4.0.5",
     "handlebars-loader": "^1.1.4",

src/Console/Console.hbs

@@ -1,18 +1,18 @@
 <div class="eruda-control">
-    <span class="eruda-icon-ban clear-console" ontouchstart></span>
+    <span class="eruda-icon-ban clear-console"></span>
     <span class="eruda-filter filter eruda-active" data-filter="all">All</span>
     <span class="eruda-filter filter" data-filter="error">Error</span>
     <span class="eruda-filter filter" data-filter="warn">Warning</span>
     <span class="eruda-filter filter" data-filter="info">Info</span>
     <span class="eruda-filter filter" data-filter="log">Log</span>
     <span class="eruda-filter filter" data-filter="debug">Debug</span>
-    <span class="eruda-icon-info-circle help" ontouchstart></span>
+    <span class="eruda-icon-info-circle help"></span>
 </div>
 <ul class="eruda-logs"></ul>
 <div class="eruda-js-input">
     <div class="eruda-buttons">
-        <div class="eruda-button cancel" ontouchstart>Cancel</div>
-        <div class="eruda-button execute" ontouchstart>Execute</div>
+        <div class="eruda-button cancel">Cancel</div>
+        <div class="eruda-button execute">Execute</div>
     </div>
     <textarea placeholder="Type JavaScript here"></textarea>
 </div>

src/Console/Console.scss

@@ -93,7 +93,8 @@
                 width: 100%;
                 height: 100%;
                 user-select: text;
+                resize: none;
             }
         }
     }
-} }
+} }

src/DevTools/NavBar.es6

@@ -22,7 +22,7 @@ export default class NavBar extends util.Emitter
         let $bottomBar = this._$bottomBar;
 
         this._len++;
-        this._$ul.prepend(`<li class="${name}" ontouchstart>${name}</li>`);
+        this._$ul.prepend(`<li class="${name}">${name}</li>`);
         $bottomBar.css('left', util.pxToNum($bottomBar.css('left')) + ITEM_WIDTH);
         this._resetStyle();
     }

src/Elements/BottomBar.hbs

@@ -1,14 +1,14 @@
 <div class="eruda-bottom-bar">
-    <div class="eruda-btn eruda-select" ontouchstart>
+    <div class="eruda-btn eruda-select">
         <span class="eruda-icon eruda-icon-hand-pointer-o"></span>
     </div>
-    <div class="eruda-btn eruda-refresh" ontouchstart>
+    <div class="eruda-btn eruda-refresh">
         <span class="eruda-icon eruda-icon-repeat"></span>
     </div>
-    <div class="eruda-btn eruda-highlight" ontouchstart>
+    <div class="eruda-btn eruda-highlight">
         <span class="eruda-icon eruda-icon-eye"></span>
     </div>
-    <div class="eruda-btn eruda-reset" ontouchstart>
+    <div class="eruda-btn eruda-reset">
         <span class="eruda-icon eruda-icon-rotate-left"></span>
     </div>
 </div>

src/Elements/Elements.hbs

@@ -14,7 +14,7 @@
 {{#if children}}
     <ul class="eruda-children">
         {{#each children}}
-            <li class="eruda-child {{#if isCmt}}eruda-green{{/if}} {{#if isEl}}eruda-active-effect{{/if}}" data-idx="{{idx}}" ontouchstart>{{{text}}}</li>
+            <li class="eruda-child {{#if isCmt}}eruda-green{{/if}} {{#if isEl}}eruda-active-effect{{/if}}" data-idx="{{idx}}">{{{text}}}</li>
         {{/each}}
     </ul>
 {{/if}}
@@ -41,7 +41,7 @@
 </div>
 {{#if computedStyle}}
     <div class="eruda-computed-style eruda-section">
-        <h2 class="toggle-all-computed-style eruda-active-effect" ontouchstart>Computed Style</h2>
+        <h2 class="toggle-all-computed-style eruda-active-effect">Computed Style</h2>
         <div class="eruda-table-wrapper">
             <table>
                 <tbody>

src/EntryBtn/EntryBtn.es6

@@ -18,18 +18,18 @@ export default class EntryBtn extends util.Emitter
     }
     _appendTpl()
     {
-        var $parent = this._$parent;
+        let $parent = this._$parent;
 
         $parent.append(require('./EntryBtn.hbs')());
         this._$el = $parent.find('.eruda-entry-btn');
     }
     _setPos(orientationChanged)
     {
-        var cfg = this.config,
+        let cfg = this.config,
             pos = cfg.get('pos'),
             defPos = getDefPos();
 
-        var outOfRange = pos.x > defPos.x + 10 ||
+        let outOfRange = pos.x > defPos.x + 10 ||
                          pos.x < 0 ||
                          pos.y < 0 ||
                          pos.y > defPos.y + 10;
@@ -47,7 +47,7 @@ export default class EntryBtn extends util.Emitter
     }
     _bindEvent()
     {
-        var draggabilly = this._draggabilly,
+        let draggabilly = this._draggabilly,
             $el = this._$el;
 
         draggabilly.on('staticClick', () => this.emit('click'))
@@ -55,7 +55,7 @@ export default class EntryBtn extends util.Emitter
 
         draggabilly.on('dragEnd', () =>
         {
-            var cfg = this.config;
+            let cfg = this.config;
 
             if (cfg.get('rememberPos'))
             {
@@ -69,6 +69,7 @@ export default class EntryBtn extends util.Emitter
         });
 
         util.orientation.on('change', () => this._setPos(true));
+        window.addEventListener('resize', () => this._setPos());
     }
     _makeDraggable()
     {
@@ -76,7 +77,7 @@ export default class EntryBtn extends util.Emitter
     }
     _initCfg()
     {
-        var cfg = this.config = util.createCfg('home-button');
+        let cfg = this.config = util.createCfg('home-button');
 
         cfg.set(util.defaults(cfg.get(), {
             rememberPos: true,
@@ -85,7 +86,7 @@ export default class EntryBtn extends util.Emitter
     }
 }
 
-var getDefPos = () =>
+let getDefPos = () =>
 {
     return {
         x: window.innerWidth - 50,

src/EntryBtn/EntryBtn.hbs

@@ -1,3 +1,3 @@
-<div class="eruda-entry-btn" ontouchstart>
+<div class="eruda-entry-btn">
     <span class="eruda-icon-cog"></span>
 </div>

src/Features/Features.hbs

@@ -1,10 +1,10 @@
 <ul>
     {{#each features}}
         <li>
-            <a href="http://caniuse.com/#search={{@key}}" target="_blank" class="eruda-inner-wrapper {{#if this}}eruda-ok{{/if}}" ontouchstart>
+            <a href="http://caniuse.com/#search={{@key}}" target="_blank" class="eruda-inner-wrapper {{#if this}}eruda-ok{{/if}}">
                 {{@key}}
             </a>
         </li>
     {{/each}}
 </ul>
-<a class="eruda-html5test" target="_blank" href="http://html5test.com" ontouchstart>Go to HTML5 Test</a>
+<a class="eruda-html5test" target="_blank" href="http://html5test.com">Go to HTML5 Test</a>

src/Features/build.js

@@ -7,6 +7,7 @@ modernizr.build(featureList, function (result)
 {
     result = result.replace(';(function(window, document, undefined){', '')
                    .replace('window.Modernizr = Modernizr;', '')
+                   .replace('\'enableClasses\': true', '\'enableClasses\': false')
                    .replace('testRunner();', 'Modernizr.testRunner = testRunner;')
                    .replace('})(window, document);', '');
     result += '\nmodule.exports = Modernizr;';

src/Features/modernizr.js

@@ -42,7 +42,7 @@
     // can go in here as configuration.
     _config: {
       'classPrefix': '',
-      'enableClasses': true,
+      'enableClasses': false,
       'enableJSClass': true,
       'usePrefixes': true
     },

src/Network/Network.hbs

@@ -46,7 +46,7 @@
 {{#if displayReq}}
     <div class="eruda-title">
         XMLHttpRequest
-        <div class="eruda-btn eruda-clear-xhr" ontouchstart>
+        <div class="eruda-btn eruda-clear-xhr">
             <span class="eruda-icon-ban"></span>
         </div>
     </div>

src/Resources/Resources.hbs

@@ -1,10 +1,10 @@
 <div class="eruda-section">
     <h2 class="eruda-title">
         Local Storage
-        <div class="eruda-btn refresh-local-storage" ontouchstart>
+        <div class="eruda-btn refresh-local-storage">
             <span class="eruda-icon-repeat"></span>
         </div>
-        <div class="eruda-btn eruda-clear-storage" data-type="local" ontouchstart>
+        <div class="eruda-btn eruda-clear-storage" data-type="local">
             <span class="eruda-icon-ban"></span>
         </div>
     </h2>
@@ -16,7 +16,7 @@
                         <td class="eruda-key">{{key}}</td>
                         <td class="eruda-storage-val" data-key="{{key}}" data-type="local">{{val}}</td>
                         <td class="eruda-control">
-                            <span class="eruda-icon-trash delete-storage" data-key="{{key}}" data-type="local" ontouchstart></span>
+                            <span class="eruda-icon-trash delete-storage" data-key="{{key}}" data-type="local"></span>
                         </td>
                     </tr>
                 {{/each}}
@@ -31,10 +31,10 @@
 <div class="eruda-section">
     <h2 class="eruda-title">
         Session Storage
-        <div class="eruda-btn refresh-session-storage" ontouchstart>
+        <div class="eruda-btn refresh-session-storage">
             <span class="eruda-icon-repeat"></span>
         </div>
-        <div class="eruda-btn eruda-clear-storage" data-type="session" ontouchstart>
+        <div class="eruda-btn eruda-clear-storage" data-type="session">
             <span class="eruda-icon-ban"></span>
         </div>
     </h2>
@@ -46,7 +46,7 @@
                     <td class="eruda-key">{{key}}</td>
                     <td class="eruda-storage-val" data-key="{{key}}" data-type="session">{{val}}</td>
                     <td class="eruda-control">
-                        <span class="eruda-icon-trash delete-storage" data-key="{{key}}" data-type="session" ontouchstart></span>
+                        <span class="eruda-icon-trash delete-storage" data-key="{{key}}" data-type="session"></span>
                     </td>
                 </tr>
             {{/each}}
@@ -61,10 +61,10 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{cookieState}}">
         Cookie
-        <div class="eruda-btn refresh-cookie" ontouchstart>
+        <div class="eruda-btn refresh-cookie">
             <span class="eruda-icon-repeat"></span>
         </div>
-        <div class="eruda-btn eruda-clear-cookie" ontouchstart>
+        <div class="eruda-btn eruda-clear-cookie">
             <span class="eruda-icon-ban"></span>
         </div>
     </h2>
@@ -76,7 +76,7 @@
                         <td class="eruda-key">{{key}}</td>
                         <td>{{val}}</td>
                         <td class="eruda-control">
-                            <span class="eruda-icon-trash delete-cookie" data-key="{{key}}" ontouchstart></span>
+                            <span class="eruda-icon-trash delete-cookie" data-key="{{key}}"></span>
                         </td>
                     </tr>
                 {{/each}}
@@ -91,7 +91,7 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{scriptState}}">
         Script
-        <div class="eruda-btn refresh-script" ontouchstart>
+        <div class="eruda-btn refresh-script">
             <span class="eruda-icon-repeat"></span>
         </div>
     </h2>
@@ -110,7 +110,7 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{stylesheetState}}">
         Stylesheet
-        <div class="eruda-btn refresh-stylesheet" ontouchstart>
+        <div class="eruda-btn refresh-stylesheet">
             <span class="eruda-icon-repeat"></span>
         </div>
     </h2>
@@ -129,7 +129,7 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{imageState}}">
         Image
-        <div class="eruda-btn refresh-image" ontouchstart>
+        <div class="eruda-btn refresh-image">
             <span class="eruda-icon-repeat"></span>
         </div>
     </h2>

src/Settings/select.hbs

@@ -1,11 +1,11 @@
 <div class="eruda-select">
-    <div class="eruda-head" ontouchstart>
+    <div class="eruda-head">
         {{desc}}
         <span class="eruda-val">{{val}}</span>
     </div>
     <ul data-idx="{{idx}}">
        {{#each selections}}
-           <li ontouchstart>{{.}}</li>
+           <li>{{.}}</li>
        {{/each}}
     </ul>
 </div>

src/Snippets/Snippets.hbs

@@ -4,6 +4,6 @@
         <div class="eruda-description">
             {{desc}}
         </div>
-        <div class="eruda-btn run" data-idx="{{@index}}" ontouchstart>Run</div>
+        <div class="eruda-btn run" data-idx="{{@index}}">Run</div>
     </div>
 {{/each}}

src/Snippets/defSnippets.es6

@@ -43,6 +43,7 @@ export default [
 ];
 
 var borderCss = '',
+    styleName = util.has(document.documentElement.style, 'outline') ? 'outline' : 'border',
     selector = 'html',
     colors = ['f5f5f5', 'dabb3a', 'abc1c7', '472936', 'c84941', '296dd1', '67adb4', '1ea061'];
 
@@ -50,7 +51,7 @@ util.each(colors, (color, idx) =>
 {
     selector += (idx === 0) ? '>*:not([class^="eruda-"])' : '>*';
 
-    borderCss += selector + `{border: 2px solid #${color} !important}`;
+    borderCss += selector + `{${styleName}: 2px solid #${color} !important}`;
 });
 
 function search(text)

src/index.es6

@@ -67,6 +67,9 @@ module.exports = {
             contentEditable: false
         });
 
+        // http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
+        el.setAttribute('ontouchstart', '');
+
         this._$el = util.$(el);
     },
     _initDevTools()

src/lib/getAbstract.es6

@@ -7,7 +7,7 @@ export default function getAbstract(obj, {
     level = 0,
     getterVal = false,
     unenumerable = true
-    } = {})
+} = {})
 {
     let json = '',
         type = '',
@@ -71,7 +71,6 @@ export default function getAbstract(obj, {
                 return;
             }
         }
-        if (typeof topObj[name] === 'function') return;
         parts.push(`${key}: ${getAbstract(topObj[name], passOpts)}`);
         i++;
     }
@@ -89,6 +88,7 @@ export default function getAbstract(obj, {
         isNum = (type == '[object Number]'),
         isRegExp = (type == '[object RegExp]'),
         isSymbol = (type == '[object Symbol]'),
+        isFn = (type == '[object Function]'),
         isBool = (type == '[object Boolean]');
 
     if (circular)
@@ -100,6 +100,9 @@ export default function getAbstract(obj, {
     } else if (isRegExp)
     {
         json = wrapRegExp(util.escapeJsonStr(obj.toString()));
+    } else if (isFn) 
+    {
+        json = wrapStr('function');
     } else if (isArr)
     {
         if (doStringify)
@@ -124,7 +127,7 @@ export default function getAbstract(obj, {
             i = 1;
             json = '{ ';
             util.each(names, objIteratee);
-            json += parts.join(', ') + objEllipsis + ' }';
+            json += moveFnToTail(parts).join(', ') + objEllipsis + ' }';
         } else
         {
             json = util.getObjType(obj);
@@ -165,7 +168,7 @@ export default function getAbstract(obj, {
                 json = '{ ';
                 names = unenumerable ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
                 util.each(names, objIteratee);
-                json += parts.join(', ') + objEllipsis + ' }';
+                json += moveFnToTail(parts).join(', ') + objEllipsis + ' }';
             } else
             {
                 json = util.getObjType(obj);
@@ -179,7 +182,7 @@ export default function getAbstract(obj, {
     return json;
 }
 
-const SPECIAL_VAL = ['(...)', 'undefined', 'Symbol', 'Object'];
+const SPECIAL_VAL = ['(...)', 'undefined', 'Symbol', 'Object', 'function'];
 
 function canBeProto(obj)
 {
@@ -188,3 +191,16 @@ function canBeProto(obj)
 
     return emptyObj && proto && proto !== Object.prototype;
 }
+
+function moveFnToTail(parts) 
+{
+    var front = [],
+        tail = [];
+
+    util.each(parts, val => 
+    {
+        val.indexOf('function') > -1 ? tail.push(val) : front.push(val);
+    });
+
+    return front.concat(tail);
+}

src/lib/stringify.es6

@@ -8,7 +8,7 @@ export default function stringify(obj, {
     circularMarker = false,
     getterVal = false,
     unenumerable = true
-    } = {})
+} = {})
 {
     let json = '',
         type,
@@ -56,16 +56,17 @@ export default function stringify(obj, {
             id = visitor.visit(obj);
         }
 
-        allKeys = Object.getOwnPropertyNames(obj);
-        keys = Object.keys(obj);
+        names = getKeys(obj);
+        keys = names.keys;
+        allKeys = names.allKeys;
         names = unenumerable ? allKeys : keys;
+        
         proto = Object.getPrototypeOf(obj);
         if (circularMarker && proto === Object.prototype) proto = null;
         if (proto)
         {
             proto = `${wrapKey('erudaProto')}: ${stringify(proto, passProtoOpts)}`;
         }
-        names.sort(sortObjName);
         if (isFn)
         {
             // We don't need these properties to display for functions.
@@ -125,9 +126,12 @@ export default function stringify(obj, {
             });
             parts.push(`${wrapKey('erudaObjAbstract')}: ${wrapStr(objAbstract)}`);
             if (!circularMarker) parts.push(`"erudaId": "${id}"`);
-            allKeys = Object.getOwnPropertyNames(obj);
-            keys = Object.keys(obj);
+
+            names = getKeys(obj);
+            keys = names.keys;
+            allKeys = names.allKeys;
             names = unenumerable ? allKeys : keys;
+
             proto = Object.getPrototypeOf(obj);
             if (circularMarker && proto === Object.prototype) proto = null;
             if (proto)
@@ -140,7 +144,6 @@ export default function stringify(obj, {
                     proto = `${wrapKey('erudaProto')}: ${wrapStr(e.message)}`;
                 }
             }
-            names.sort(sortObjName);
             util.each(names, objIteratee);
             if (proto) parts.push(proto);
             json += parts.join(', ') + ' }';
@@ -185,8 +188,18 @@ export default function stringify(obj, {
     return json;
 }
 
+function getKeys(obj) 
+{
+    let allKeys = Object.getOwnPropertyNames(obj),
+        keys = Object.keys(obj).sort(sortObjName);
+
+    allKeys = keys.concat(util.filter(allKeys, val => !util.contain(keys, val)).sort(sortObjName));
+
+    return {keys, allKeys};
+}
+
 // $, upperCase, lowerCase, _
-var sortObjName = (a, b) =>
+function sortObjName(a, b)
 {
     let lenA = a.length,
         lenB = b.length,
@@ -203,8 +216,9 @@ var sortObjName = (a, b) =>
 
     if (lenA > lenB) return 1;
     if (lenA < lenB) return -1;
+    
     return 0;
-};
+}
 
 function cmpCode(a, b)
 {
@@ -218,7 +232,8 @@ function cmpCode(a, b)
 
 function transCode(code)
 {
-    if (code === 95) return 91;
+    // _ should be placed after lowercase chars.
+    if (code === 95) return 123;
     return code;
 }
 

src/style/style.scss

@@ -14,6 +14,7 @@
     transform: translateZ(0);
     font-family: $font-family;
     font-size: $font-size;
+    direction: ltr;
     * {
         box-sizing: border-box;
         pointer-events: all;