npm - q-koa - Versions diffs - 7.7.2 - Mend

q-koa 7.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/core/app.js +1813 -0
package/core/config.js +124 -0
package/core/file/plugins/administrator/config.js +17 -0
package/core/file/plugins/administrator/controller.js +264 -0
package/core/file/plugins/administrator/model.js +53 -0
package/core/file/plugins/administrator/validate.js +41 -0
package/core/file/plugins/alipay/controller.js +68 -0
package/core/file/plugins/alipay/validate.js +9 -0
package/core/file/plugins/cache/service.js +16 -0
package/core/file/plugins/cloudfunction/config.js +4 -0
package/core/file/plugins/cloudfunction/model.js +15 -0
package/core/file/plugins/common/controller.js +398 -0
package/core/file/plugins/common/validate.js +47 -0
package/core/file/plugins/douyin/config.js +3 -0
package/core/file/plugins/douyin/controller.js +521 -0
package/core/file/plugins/douyin/validate.js +40 -0
package/core/file/plugins/douyin_user/config.js +15 -0
package/core/file/plugins/douyin_user/model.js +72 -0
package/core/file/plugins/good_sku/controller.js +80 -0
package/core/file/plugins/h5_user/config.js +19 -0
package/core/file/plugins/h5_user/model.js +71 -0
package/core/file/plugins/lang/config.js +4 -0
package/core/file/plugins/lang/model.js +15 -0
package/core/file/plugins/language/config.js +5 -0
package/core/file/plugins/language/model.js +54 -0
package/core/file/plugins/log/config.js +25 -0
package/core/file/plugins/log/controller.js +31 -0
package/core/file/plugins/log/model.js +51 -0
package/core/file/plugins/model/config.js +12 -0
package/core/file/plugins/model/controller.js +69 -0
package/core/file/plugins/model/model.js +169 -0
package/core/file/plugins/model/service.js +218 -0
package/core/file/plugins/model/validate.js +42 -0
package/core/file/plugins/model_attributes/config.js +12 -0
package/core/file/plugins/model_attributes/model.js +114 -0
package/core/file/plugins/mp_user/config.js +19 -0
package/core/file/plugins/mp_user/model.js +59 -0
package/core/file/plugins/permission/config.js +15 -0
package/core/file/plugins/permission/model.js +91 -0
package/core/file/plugins/role/config.js +27 -0
package/core/file/plugins/role/controller.js +26 -0
package/core/file/plugins/role/model.js +58 -0
package/core/file/plugins/role_permission/config.js +12 -0
package/core/file/plugins/role_permission/controller.js +27 -0
package/core/file/plugins/role_permission/model.js +24 -0
package/core/file/plugins/routes/config.js +17 -0
package/core/file/plugins/routes/controller.js +153 -0
package/core/file/plugins/routes/model.js +70 -0
package/core/file/plugins/routes/service.js +22 -0
package/core/file/plugins/setting/afterExecute.js +14 -0
package/core/file/plugins/setting/config.js +14 -0
package/core/file/plugins/setting/controller.js +50 -0
package/core/file/plugins/setting/model.js +118 -0
package/core/file/plugins/setting/validate.js +42 -0
package/core/file/plugins/system/controller.js +501 -0
package/core/file/plugins/system/service.js +148 -0
package/core/file/plugins/system/validate.js +40 -0
package/core/file/plugins/todolist/config.js +31 -0
package/core/file/plugins/todolist/model.js +69 -0
package/core/file/plugins/toutiao/controller.js +201 -0
package/core/file/plugins/toutiao_user/config.js +15 -0
package/core/file/plugins/toutiao_user/model.js +66 -0
package/core/file/plugins/user/afterExecute.js +38 -0
package/core/file/plugins/user/config.js +9 -0
package/core/file/plugins/user/controller.js +329 -0
package/core/file/plugins/user/model.js +96 -0
package/core/file/plugins/user/test.js +71 -0
package/core/file/plugins/user/validate.js +44 -0
package/core/file/plugins/video/config.js +3 -0
package/core/file/plugins/video/controller.js +15 -0
package/core/file/plugins/video/validate.js +12 -0
package/core/file/plugins/weixin/config.js +3 -0
package/core/file/plugins/weixin/controller.js +994 -0
package/core/file/plugins/weixin/service.js +105 -0
package/core/file/plugins/weixin/validate.js +111 -0
package/core/file/services/aliSms.js +45 -0
package/core/file/services/alipay.js +123 -0
package/core/file/services/amap.js +95 -0
package/core/file/services/card.js +24 -0
package/core/file/services/config.js +38 -0
package/core/file/services/douyin.js +151 -0
package/core/file/services/email.js +45 -0
package/core/file/services/express.js +37 -0
package/core/file/services/geo.js +71 -0
package/core/file/services/qqVideo.js +64 -0
package/core/file/services/toutiao.js +102 -0
package/core/file/services/weixin.js +79 -0
package/core/file/services/weixinArticle.js +53 -0
package/core/file/services/weixinCrypt.js +34 -0
package/core/file/services/weixinMP.js +435 -0
package/core/file/services/weixinPay.js +35 -0
package/core/file/services/xml.js +33 -0
package/core/file/task/shop/index.js +589 -0
package/core/file/task/shop/static/562e45760a44632de6fa7219bab78cce.png +0 -0
package/core/file/task/shop/static/d7aeaeb6bfd68f71a00a83c0f5548363.png +0 -0
package/core/file/utils/index.js +61 -0
package/core/middlewares.js +120 -0
package/core/restc/.npminstall.done +1 -0
package/core/restc/LICENSE +21 -0
package/core/restc/README.md +48 -0
package/core/restc/faas/index.html +1112 -0
package/core/restc/faas/index.txt +31 -0
package/core/restc/faas/install_production.sh +6 -0
package/core/restc/index.d.ts +7 -0
package/core/restc/index.js +9 -0
package/core/restc/lib/express.js +7 -0
package/core/restc/lib/hapi.js +17 -0
package/core/restc/lib/hapiLegacy.js +15 -0
package/core/restc/lib/index.js +46 -0
package/core/restc/lib/koa.js +9 -0
package/core/restc/lib/koa2.js +9 -0
package/core/restc/lib/utils/gateway.js +51 -0
package/core/restc/package.json +41 -0
package/core/validator.js +15 -0
package/index.js +1 -0
package/package.json +65 -0

package/core/restc/faas/index.html ADDED Viewed

@@ -0,0 +1,1112 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>restc</title>
+  <link rel="stylesheet" href="https://shadow.elemecdn.com/gh/highlightjs/cdn-release@9.8.0/build/styles/default.min.css">
+  <link rel="stylesheet" href="https://shadow.elemecdn.com/gh/codemirror/CodeMirror@5.19.0/lib/codemirror.css"></script>
+  <link rel="stylesheet" href="https://shadow.elemecdn.com/gh/codemirror/CodeMirror@5.19.0/theme/material.css"></script>
+  <script>
+    if (!window.fetch) document.write('<script src="https://shadow.elemecdn.com/gh/github/fetch@v1.0.0/fetch.min.js"><\/script>');
+  </script>
+  <script src="https://shadow.elemecdn.com/npm/jinkela@1.2.18/umd.min.js"></script>
+  <script src="https://shadow.elemecdn.com/gh/highlightjs/cdn-release@9.8.0/build/highlight.min.js"></script>
+  <script src="https://shadow.elemecdn.com/gh/codemirror/CodeMirror@5.19.0/lib/codemirror.min.js"></script>
+  <script src="https://shadow.elemecdn.com/gh/codemirror/CodeMirror@5.19.0/mode/javascript/javascript.min.js"></script>
+  <script src="https://shadow.elemecdn.com/gh/codemirror/CodeMirror@5.19.0/addon/display/autorefresh.min.js"></script>
+  <script src="https://shadow.elemecdn.com/npm/json-format-safely@1.2.2/index.js"></script>
+  <script src="https://shadow.elemecdn.com/npm/content-disposition-attachment@0.1.1/build@module=ContentDispositionAttachment&amp;format=umd!toes5!uglifyjs!index.js"></script>
+  <script extract>
+    class Configuration {
+      static get watchList() {
+        let value = {};
+        Object.defineProperty(this, 'watchList', { value, configurable: true });
+        return value;
+      }
+      static set(key, value) {
+        let oldValue = this.get(key);
+        localStorage.setItem(key, JSON.stringify(value));
+        if (this.watchList.hasOwnProperty(key)) {
+          this.watchList[key].forEach(watcher => watcher.call(this, value, oldValue));
+        }
+      }
+      static get(key, defaultValue = null) {
+        try {
+          let value = JSON.parse(localStorage.getItem(key));
+          if (value === null) value = defaultValue;
+          return value;
+        } catch (error) {
+          return defaultValue;
+        }
+      }
+      static watch(key, callback, callImmediately = true) {
+        (this.watchList.hasOwnProperty(key) ? this.watchList[key] : this.watchList[key] = []).push(callback);
+        if (callImmediately) this.set(key, this.get(key));
+      }
+      static unwatch(key, callback) {
+        if (this.watchList.hasOwnProperty(key)) {
+          this.watchList[key] = this.watchList[key].filter(watcher => watcher !== callback);
+        }
+      }
+    }
+    class StrToJson{
+      static encode(str){
+        let json = eval('(' + str + ')');
+        return JSON.stringify(json).replace('{','{\n').replace('}','\n}')
+      }
+    }
+    class QueryString {
+      static encode(s) {
+        return encodeURIComponent(s).replace(/%20/g, '+');
+      }
+      static decode(s) {
+        return decodeURIComponent(s.replace(/\+/g, '%20'));
+      }
+      static parse(queryString, preserveOrder = false) {
+        let result = queryString.split('&')
+          .filter(entry => entry.length)
+          .map(entry => entry.split('='))
+          .map(([ key, value = '' ]) => ({ key: this.decode(key), value: this.decode(value) }));
+        if (preserveOrder) return result;
+        return result.reduce((result, { key, value }) => Object.assign(result, { [key]: value }), {});
+      }
+      static stringify(parameters) {
+        if (!Array.isArray(parameters)) {
+          parameters = Object.keys(parameters).map(key => ({ key, value: parameters[key] }));
+        }
+        return parameters
+          .map(({ key, value }) => [ this.encode(key), this.encode(value) ].join('='))
+          .join('&');
+      }
+    }
+    const isBodyEnabled = method => ![ 'HEAD', 'GET' ].includes(method);
+    const loader = ({ element }, $promise) => {
+      element.classList.add('loading');
+      let restore = () => { element.classList.remove('loading'); };
+      return $promise.then(data => {
+        restore();
+        return data;
+      }, e => {
+        restore();
+        throw e;
+      });
+    }
+    class Logo extends Jinkela {
+      get template() {
+        return `
+          <a href="https://github.com/ElemeFE/restc" target="_blank"></a>
+        `;
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            margin: 0 -8px;
+            padding: 8px;
+            width: 67px;
+            height: 25px;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAAAyCAYAAACZIqPyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjNDUyZmZhYi1mYzc2LTQ3NzktYWIxNi0yMWIwYzAwNmQ3MzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REU5NDNBN0VBMDIxMTFFNkJFRjI4RDAyMkVFQTk1MEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REU5NDNBN0RBMDIxMTFFNkJFRjI4RDAyMkVFQTk1MEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNDUyZmZhYi1mYzc2LTQ3NzktYWIxNi0yMWIwYzAwNmQ3MzkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6YzQ1MmZmYWItZmM3Ni00Nzc5LWFiMTYtMjFiMGMwMDZkNzM5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3gUV5gAABPZJREFUeNrsXItxozAQlT1pQCmBlIBLwCWQEkgJUAIuwZRglwAlHCVYJYQSOJiTLoqy+gbEx3ozO54xIMTu29WuJDj0fY8ApIPkg8TAsQMK2BrqQRLhv26QYpAKuuBFQopb0OXugQe50t+LePAIXJAHnT0VckoOJTGwZPgI2HfkSHTEgEhR0LziEPKLzeLM2e8MHI9MhhIxQbkEvTqH6CuVNaEZ5K47SUeMNtjXmgxj4j6WeuUg2Ur7qbXrS7DlZHhAIXmrOAZ7BgRiBARiBARiBGyQGFeaofOScsdjLotnopt5xUL2z8sDydd4VEhpFdED8knbzIHksubOkyWemaSfOkT0ng/g+huSzFhOhnERjZOk/45aOG4r1/4nSnos62HcLNvrFe1gTf+iQf70dhjPj+n1de+Gh4PeZMgd7JLr2liiXI2pyCZ+iMR7bpaRIKXXjTN9naTN2qHEjCR9nArQSuhT5BgqUiDAiJgqK574XqXjvEMjIdoUKB1I0eyFGLqFOjKRAfnIkQBenzq2d5/RYaD8alyrekXf16sK2o8WzTQ7vcaqhAjKyhTnvXPKeld4cgaQRYZKMAIzREHb5z2UX5wiFu29GfRxvNcJ/VurEp/rQp/3vNdytaJK4o1LFMpCglHugicXknMTIGrJhrEP4P8LldeZhhEMPGthEA06X8TAHklRUCMQwbidgWdXEg+tJMoShy/sW9EaJEA0rNaUfEaeFGWynB8rDKhKuFqFV+qeK1qoIog95TGm9/9BjMygdJwCrUtnDYlBFEY3IXyN/C+XRw76mSqP40v7H8SQ1fQNWg6qcO8SyToLj7x6nk+IPTmkquS+8c97pAp4AEqoFiZGpCBMr5DMgBjEgBwJ1c0Nzb/PAnsmBjSUxxwXwKqkpUnhB9oXOiD5NTFAir7WYHwRw0cSzErexrRcjam34J0Rg0jmQUy9s0Tr2785RVRObOYx0p0pgUi8cIyOJ4sqIEP7ee+mpCItV8eJojdAOSlawWIOgLGfB0t50wwxbBbRpBqYY7m7M8yvphy6csBJGBf+RwxZWE0W9nKbpHSKTP1Ec6tOo9RsZmLMPYxD77Ge+XzjCFQiPplroyxffWLT9I3jHMsUTjC3Q0a68vWo6eCSCahqBjPxQEpVYmqjF+zwrL5fEyW65LND60Gr6E/q4f6dImpgi6EvcSCG76qwM61K1pRoyqoD3Tg/KvemqTBKR28nlhEjF5LXKxDKdcmhV2yVGAh9vRcaAwYfCVFrKquEKp+9TpgA5VxqQYxOUxr23L1ig+iUG5J/nsiywGZg23ZdN9yq7oV/2WZssMFWhU/g+kSxqTkRzs3o/yPSOTYDb+G9El35aFKaQVHlN1VLKyl3bYYXDFx/l+RT/GsKPY2U6Zz51haIQZB8p7cp4onKwZEQheJY84s+MScgDsTHz0gMpvQTsl/tZXMSFeCdtga4GxDU1LCyrQOd5XO2EzgNiC19BoFFDrbIl0qSOLacrNohxvZwsrYiyfDSUkI0yGy6nFAissQxAvqmW/Jns5BsCCwlz9iiGbdFHITPObI9CLxnnVHA3pALhCtERwovNQdsOscICMQICMQI2Cwxwsdg94n4t8RYfDEnYHKwUt+KGFCtLn5pJmB74KfUa+C40X6M8NHX50NjMpSET0Q/F6DPLIDEGKdr30Pk2D3YJx/ARcG/AgwApoTnnabyZYoAAAAASUVORK5CYII=');
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            background-size: 67px 25px;
+          }
+        `;
+      }
+    }
+    class SideBarToggleButton extends Jinkela {
+      get template() {
+        return `
+          <a href="javascript:" on-click="{click}">Toggle SideBar</a>
+        `;
+      }
+      init() {
+        Configuration.watch('settings.sidebar.collapse', value => {
+          if (value) {
+            this.element.classList.remove('active');
+          } else {
+            this.element.classList.add('active');
+          }
+        });
+      }
+      click() {
+        Configuration.set('settings.sidebar.collapse', !Configuration.get('settings.sidebar.collapse'));
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            margin-left: auto;
+            padding: 4px;
+            width: 24px;
+            height: 24px;
+            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pjxzdmcgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0yMzIuMzY5MjMxIDI4Mi44MTMwNDZoNTU5LjI2MTUzOGEzMS41MDc2OTIgMzEuNTA3NjkyIDAgMCAwIDAtNjMuMDE1Mzg0aC01NTkuMjYxNTM4YTMxLjUwNzY5MiAzMS41MDc2OTIgMCAwIDAgMCA2My4wMTUzODR6TTc5MS42MzA3NjkgNDgwLjQ5MjMwOGgtNTU5LjI2MTUzOGEzMS41MDc2OTIgMzEuNTA3NjkyIDAgMCAwIDAgNjMuMDE1Mzg0aDU1OS4yNjE1MzhhMzEuNTA3NjkyIDMxLjUwNzY5MiAwIDAgMCAwLTYzLjAxNTM4NHpNNzkxLjYzMDc2OSA3NDEuMTg2OTU0aC01NTkuMjYxNTM4YTMxLjUwNzY5MiAzMS41MDc2OTIgMCAwIDAgMCA2My4wMTUzODRoNTU5LjI2MTUzOGEzMS41MDc2OTIgMzEuNTA3NjkyIDAgMCAwIDAtNjMuMDE1Mzg0eiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            border-radius: 4px;
+            text-indent: 10000px;
+            overflow: hidden;
+            &:hover {
+              background-color: #3f4555;
+            }
+            &:active, &.active {
+              background-color: #2d2f3b;
+            }
+          }
+        `;
+      }
+    }
+    class Header extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <jkl-logo></jkl-logo>
+            <jkl-side-bar-toggle-button></jkl-side-bar-toggle-button>
+          </div>
+        `;
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            display: flex;
+            align-items: center;
+            padding: 10px 40px;
+            background: #4c5264;
+          }
+        `;
+      }
+    }
+    class HighlightBlock extends Jinkela {
+      get template() {
+        return `<pre><code class="http" ref="body"></code></pre>`;
+      }
+      update(code, ...elements) {
+        this.body.textContent = code;
+        hljs.highlightBlock(this.body);
+        for (let element of elements) {
+          if (element instanceof Jinkela) element.to(this.body);
+        }
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            font-size: 12px;
+            line-height: 1.5;
+            & > code {
+              margin: 0 8px;
+              padding: 20px 32px;
+              background: transparent;
+              overflow: visible;
+            }
+          }
+        `;
+      }
+    }
+    class RequestView extends Jinkela {
+      constructor(...args) {
+        super(...args);
+      }
+      init() {
+        this.block = new HighlightBlock().to(this);
+      }
+      update({ method, path, queryString, body, headers }) {
+        let uri = path;
+        if (queryString) uri += '?' + queryString;
+        headers = Object.keys(headers)
+          .map(key => ({ key, value: headers[key] }))
+          .map(({ key, value }) => ({ key, values: Array.isArray(value) ? value : [ value ] }))
+          .reduce((result, { key, values }) => [ ...result, ...values.map(value => ({ key, value })) ], []);
+        let request = [
+          [ method, uri, 'HTTP/1.1' ].join(' '),
+          ...headers.map(({ key, value }) => [ key, value ].join(': '))
+        ].join('\n');
+        if (isBodyEnabled(method) && body) request = [ request, body ].join('\n\n');
+        this.block.update(request);
+      }
+    }
+    class ResponseViewDownloadLink extends Jinkela {
+      beforeParse(params) {
+        if (!params.filename) {
+          params.filename = '';
+        }
+      }
+      get template() {
+        return `
+          <a download="{filename}" href="{url}">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1022.955 522.57c0 100.193-81.516 181.699-181.719 181.699H655.6c-11.298 0-20.467-9.169-20.467-20.466 0-11.308 9.17-20.466 20.467-20.466h185.637c77.628 0 140.787-63.148 140.787-140.766 0-77.424-62.841-140.449-140.203-140.766-.42.03-.819.05-1.218.061-5.945.143-11.686-2.292-15.687-6.703a20.455 20.455 0 0 1-5.168-16.25c1.33-10.806 1.944-19.76 1.944-28.192 0-60.764-23.658-117.885-66.617-160.833-42.969-42.968-100.09-66.617-160.843-66.617-47.369 0-92.742 14.45-131.208 41.782-37.617 26.739-65.953 63.7-81.926 106.884a20.5 20.5 0 0 1-14.828 12.894 20.492 20.492 0 0 1-18.86-5.547c-19.289-19.33-44.943-29.972-72.245-29.972-56.323 0-102.146 45.813-102.146 102.126 0 .317.04.982.092 1.627.061.92.122 1.831.153 2.763a20.466 20.466 0 0 1-15.002 20.455c-32.356 8.934-61.541 28.55-82.181 55.218-21.305 27.517-32.572 60.508-32.572 95.413 0 86.244 70.188 156.423 156.443 156.423h169.981c11.298 0 20.466 9.158 20.466 20.466 0 11.297-9.168 20.466-20.466 20.466H199.951c-108.829 0-197.375-88.536-197.375-197.355 0-44.053 14.224-85.712 41.126-120.474 22.81-29.46 53.898-52.086 88.71-64.816 5.066-74.323 67.15-133.245 142.752-133.245 28.386 0 55.504 8.218 78.651 23.526 19.658-39.868 48.843-74.169 85.498-100.212 45.434-32.296 99.004-49.354 154.918-49.354 71.693 0 139.088 27.916 189.782 78.6 50.695 50.695 78.61 118.09 78.61 189.782 0 3.705-.102 7.47-.296 11.37 90.307 10.478 160.628 87.42 160.628 180.48z"/><path d="M629.259 820.711L527.235 922.724c-3.99 4.002-9.23 5.997-14.47 5.997s-10.478-1.995-14.47-5.997L396.273 820.711c-7.992-7.992-7.992-20.947 0-28.94s20.947-8.001 28.94 0l67.087 67.079v-358.7c0-11.297 9.159-20.466 20.466-20.466 11.308 0 20.467 9.169 20.467 20.466v358.7l67.088-67.078c7.992-8.002 20.947-7.992 28.939 0s7.992 20.947 0 28.939z"/></svg>
+            Download <span>{filename}</span>
+          </a>
+        `;
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            --r: 76;
+            --g: 82;
+            --b: 100;
+            --a: .9;
+            background: rgba(var(--r), var(--g), var(--b), var(--a));
+            border-radius: 4px;
+            color: #fff;
+            display: inline-block;
+            fill: #fff;
+            font-family: sans-serif;
+            padding: 10px 15px;
+            text-decoration: none;
+            transition: background .2s ease;
+            white-space: nowrap;
+            > svg {
+              display: inline;
+              vertical-align: middle;
+            }
+            &:hover {
+              --a: .8;
+            }
+            &:active {
+              --a: 1;
+            }
+          }
+        `;
+      }
+    }
+    class ResponseView extends Jinkela {
+      constructor(...args) {
+        super(...args);
+      }
+      init() {
+        this.block = new HighlightBlock().to(this);
+      }
+      update($response) {
+        return Promise.resolve($response).then(response => {
+          let status = [ 'HTTP/1.1', response.status, response.statusText ].join(' ');
+          let headers = [ ...response.headers.entries() ].map(this.stringifyHeader).join('\n');
+          let contentType = response.headers.get('Content-Type');
+          let json = /json/.test(contentType);
+          let javascript = /javascript/.test(contentType);
+          let binary = !(/text/.test(contentType) || json || javascript);
+          let contentDisposition = response.headers.get('Content-Disposition') || '';
+          try {
+            contentDisposition = ContentDispositionAttachment.parse(contentDisposition);
+          } catch (error) {
+            contentDisposition = { attachment: false };
+          }
+          let { attachment, filename } = contentDisposition;
+          let $body;
+          if (binary || attachment) {
+            $body = response.blob().then(URL.createObjectURL).then(url => {
+              return { elements: [ new ResponseViewDownloadLink({ url, filename }) ] };
+            });
+          } else {
+            $body = response.text().then(result => {
+              let body = result;
+              if (json) {
+                try {
+                  body = jsonFormatSafely(body);
+                } catch (e) { /* ignore */ }
+              }
+              return { body };
+            });
+          }
+          $body.then(({ body, elements = [] }) => {
+            this.block.update([ status, headers, '', body ].join('\n'), ...elements);
+          })
+        }).catch(({ message }) => {
+          this.block.update(message);
+        });
+      }
+      stringifyHeader([ key, value ]) {
+        key = key.replace(/(?:^|-)./g, $0 => $0.toUpperCase());
+        return [ key, value ].join(': ');
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            height: 100%;
+            overflow: auto;
+            &.loading {
+              position: relative;
+              &:after {
+                position: absolute;
+                left: 3px;
+                right: 3px;
+                top: 3px;
+                bottom: 3px;
+                content: '';
+                background: rgba(255, 255, 255, 0.8) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPScyNHB4JyBoZWlnaHQ9JzI0cHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSIjN2NjZmFmIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBkdXI9IjJzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZnJvbT0iMCIgdG89IjUwMiI+PC9hbmltYXRlPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE1MC42IDEwMC40OzEgMjUwOzE1MC42IDEwMC40Ij48L2FuaW1hdGU+PC9jaXJjbGU+PC9zdmc+') 50% 50% no-repeat;
+                backdrop-filter: blur(3px);
+                -webkit-backdrop-filter: blur(3px);
+                cursor: progress;
+              }
+            }
+          }
+        `;
+      }
+    }
+    class ResultView extends Jinkela {
+      get padding() { return 40; }
+      get btnWidth() { return 120; }
+      get template() {
+        return `
+          <dl>
+            <dt on-click="{click}">
+              <span ref="underline"></span>
+              <a href="JavaScript:" data-binding="ResponseView" data-nth="0">Response</a>
+              <a href="JavaScript:" data-binding="RequestView" data-nth="1">Request</a>
+            </dt>
+            <dd>
+              <meta ref="list" />
+            </dd>
+          </dl>
+        `;
+      }
+      click({ target }) {
+        let binding = target.dataset.binding;
+        if (!binding) return;
+        this.underline.style.left = this.padding + target.dataset.nth * this.btnWidth + 'px';
+        this.list.forEach(item => {
+          item.element.style.display = item.constructor.name === binding ? 'block' : 'none';
+        });
+      }
+      get requestView() {
+        let value = new RequestView();
+        Object.defineProperty(this, 'requestView', { value, configurable: true });
+        return value;
+      }
+      get responseView() {
+        let value = new ResponseView();
+        Object.defineProperty(this, 'responseView', { value, configurable: true });
+        return value;
+      }
+      init() {
+        this.list = [ this.requestView, this.responseView ];
+        this.element.querySelector('a').click();
+      }
+      set waiting(value) {
+        if (value) {
+          this.element.classList.add('waiting');
+        } else {
+          this.element.classList.remove('waiting');
+        }
+      }
+      get waiting() { return this.element.classList.has('waiting'); }
+      update(request, $response) {
+        this.waiting = false;
+        this.requestView.update(request);
+        return loader(this, this.responseView.update($response));
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            position: relative;
+            height: 100%;
+            box-sizing: border-box;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            > dt {
+              position: relative;
+              border-bottom: 1px solid #e4e4ec;
+              padding: 0 ${this.padding}px;
+              margin: 0;
+              font-size: 0;
+              > a {
+                position: relative;
+                z-index: 1;
+                text-decoration: none;
+                display: inline-block;
+                box-sizing: border-box;
+                padding: .5em 1em;
+                font-size: 16px;
+                width: ${this.btnWidth}px;
+                text-align: center;
+                font-weight: 600;
+                color: #5d6576;
+                &:hover { opacity: .8; }
+              }
+              > span {
+                transition: left 200ms ease, right 200ms ease;
+                position: absolute;
+                top: 0;
+                bottom: -1px;
+                font-size: 16px;
+                width: ${this.btnWidth}px;
+                border-bottom: 2px solid #2d2f3b;
+                background: #f1f1f6;
+              }
+            }
+            > dd {
+              flex: 1;
+              overflow: auto;
+              margin: 0;
+            }
+            &.loading:after {
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              content: '';
+              background: rgba(248, 248, 250, 0.8) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPScyNHB4JyBoZWlnaHQ9JzI0cHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSIjN2NjZmFmIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBkdXI9IjJzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZnJvbT0iMCIgdG89IjUwMiI+PC9hbmltYXRlPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE1MC42IDEwMC40OzEgMjUwOzE1MC42IDEwMC40Ij48L2FuaW1hdGU+PC9jaXJjbGU+PC9zdmc+') 50% 50% no-repeat;
+              cursor: progress;
+              z-index: 1000;
+            }
+            &.waiting:after {
+              position: absolute;
+              left: 0;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              content: 'Click “Send” to send the request';
+              font-weight: 500;
+              font-size: 1.2em;
+              background: rgba(248, 248, 250, 0.8);
+              z-index: 1000;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarInput extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <input ref="input" placeholder="{placeholder}" />
+          </div>
+        `;
+      }
+      get placeholder() { return ''; }
+      set value(value) { this.input.value = value; }
+      get value() { return this.input.value; }
+      select() {
+        this.input.select();
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            padding: 0 1em;
+            display: flex;
+            box-sizing: border-box;
+            color: #dbdfeb;
+            background: #3f4555;
+            line-height: 40px;
+            border: 0 none;
+            border-radius: 8px;
+            > input {
+              margin: 0;
+              padding: 0;
+              flex: 1;
+              border: 0 none;
+              color: inherit;
+              background: transparent;
+              font: inherit;
+              vertical-align: middle;
+              outline: none;
+              &::-webkit-input-placeholder {
+                color: #5d6577;
+              }
+            }
+          }
+        `;
+      }
+    }
+    class SideBarMethodSelect extends Jinkela {
+      get template() {
+        return `
+          <select>
+            <option>POST</option>
+            <option>GET</option>
+          </select>
+        `;
+      }
+      set value(value) {
+        this.element.value = value;
+      }
+      get value() {
+        return this.element.value;
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            padding: 0 1.5em 0 1em;
+            color: #dbdfeb;
+            background: #3f4555;
+            font: inherit;
+            width: 100px;
+            height: 40px;
+            border: 0 none;
+            border-radius: 8px;
+            outline: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAqdJREFUeNpi/P//P8NAAiaGAQajDhh1wKgDGEDlADqGAnYgNoLS5AI2IDaEmYHVLhwOYFVT1/HOLqzdoaKm5Q3ik2E5q5KyumdWQc02dU1dPxAfm11Yo0BJRcPOLzCqUUBASC8gKKZRQUnViURHsIL0BIXGNwoKChv4BUTVAx1jT3QaiIhOy+fh45diZ+dgANEhEclNcgrKDkQ6glVGVsEOqKcBqFcGZAY3L59kREx6PtEOYOdgb2RlY/vKzsHBwAHEfHz8smGRKY1S0nLWQGkWPJazgNSER6c1AfXIg/SCzACa9R1oZhM2DYzYKiNGRkaGrokLLViYWZYxMDJw/P71i+Hnzx8MHz68v7ts4bSaF8+fHAEq+4umjVlMXNIyJiGnTUBQSAXkc6DFwETG8OPP3z8xZfnxx7DZhTMbAjWcYGRijGdiYvrJxsbOADJQQEBQOTIuo1FYWNQCZCGy5cIiYubR8dlNyJYD9f4GmpEIspyscqAwK+ow0AfJQEN+gwxkY2dnACYqtdjk3CaQhVD9TEJCIqYxidlNgkLCGiA1MMtBeoFmHMRnB84oQAYTpi13B0bFrH///rH++vWT4dfPnwxv3766PHdGbw0oeyenF7cICYvqgeIbFFpAy/8ALU8vyIrcjl7mkOUAqCN8gCEx/e/fv8wwR7x7++oC0FF/RUQljEE+B1nOzMz89/+//9lAyzdhK/TIdgDUEYFAR0wCOQKUMH///gVJ+qysyJYXAS1fjavUpcgBUEeEAx3R9+/vP8a//yAZgZmJmYGJmek/0PISoOXL8RX7FDsA7IjpK2KBajpAShFm/68uyIxYQKjeoUptCLRoMdCwemBiAyU4kNENhCynKBfgiY4MUAwAg30qsTUvUQ4YbRGNOmDUAaMOoCcACDAAFHYu4lUVtcQAAAAASUVORK5CYII=');
+            background-position: 90% 50%;
+            background-repeat: no-repeat;
+            background-size: 16px;
+            cursor: pointer;
+            &:hover {
+              color: #fff;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarQueryStringInput extends SideBarInput {
+      get styleSheet() {
+        return `
+          :scope {
+            flex: 1;
+            &:before {
+              margin-right: .2em;
+              content: '?';
+              color: #5d6577;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarSendButton extends Jinkela {
+      get template() { return '<button>Send</button>'; }
+      get styleSheet() {
+        return `
+          :scope {
+            padding: 0 1em;
+            height: 40px;
+            color: #dbdfeb;
+            background: transparent;
+            font: inherit;
+            border: 2px solid #959cad;
+            border-radius: 4px;
+            outline: none;
+            cursor: pointer;
+            transition: .15s background;
+            &:hover {
+              color: #fff;
+              border-color: #fff;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarMethod extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <jkl-side-bar-method-select ref="methodSelect" on-change="{methodChange}"></jkl-side-bar-method-select>
+            <jkl-side-bar-query-string-input
+              ref="queryStringInput"
+              on-input="{queryStringChange}"
+              placeholder="query string"></jkl-side-bar-query-string-input>
+            <jkl-side-bar-send-button></jkl-side-bar-send-button>
+          </div>
+        `;
+      }
+      set method(value) { this.methodSelect.value = value; }
+      get method() { return this.methodSelect.value; }
+      set queryString(value) { this.queryStringInput.value = value; }
+      get queryString() { return this.queryStringInput.value; }
+      methodChange() {
+        this.element.dispatchEvent(new CustomEvent('methodchange', { bubbles: true, detail: this.method }));
+      }
+      queryStringChange() {
+        this.element.dispatchEvent(new CustomEvent('querystringchange', { bubbles: true, detail: this.queryString }));
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            margin: -.25em;
+            display: flex;
+            & > * {
+              margin: .25em;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarKeyValuePairCheckBox extends Jinkela {
+      get template() {
+        return `
+          <input type="checkbox" />
+        `;
+      }
+      set checked(value) {
+        this.element.checked = value;
+      }
+      get checked() {
+        return this.element.checked;
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            margin: 0 8px 0 10px;
+            width: 18px;
+            height: 18px;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background: #2d2f3b;
+            border-radius: 4px;
+            cursor: pointer;
+            outline: none;
+            &:hover {
+              background: #262c39;
+            }
+            &:checked {
+              background-position: center center;
+              background-repeat: no-repeat;
+              background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOCA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xIDIuOTRsMi4wMyAyLjAzTDcgMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
+            }
+          }
+        `;
+      }
+    }
+    class SideBarKeyValuePairInput extends SideBarInput {
+      get styleSheet() {
+        return `
+          :scope {
+            padding: 4px 6px 4px 0;
+            flex: 1;
+            border-radius: 0;
+            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+            line-height: 32px;
+          }
+        `;
+      }
+    }
+    class SideBarKeyValuePair extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <jkl-side-bar-key-value-pair-check-box
+              ref="enabledCheckBox"
+              on-click="{emitChange}">
+            </jkl-side-bar-key-value-pair-check-box>
+            <jkl-side-bar-key-value-pair-input
+              placeholder="key"
+              ref="keyInput"
+              on-input="{emitChange}">
+            </jkl-side-bar-key-value-pair-input>
+            <jkl-side-bar-key-value-pair-input
+              placeholder="value"
+              ref="valueInput"
+              on-input="{emitChange}">
+            </jkl-side-bar-key-value-pair-input>
+          </div>
+        `;
+      }
+      set enabled(value) { this.enabledCheckBox.checked = value; }
+      get enabled() { return this.enabledCheckBox.checked; }
+      set key(value) { this.keyInput.value = value; }
+      get key() { return this.keyInput.value; }
+      set value(value) { this.valueInput.value = value; }
+      get value() { return this.valueInput.value; }
+      select() {
+        this.keyInput.select();
+      }
+      emitChange() {
+        this.element.dispatchEvent(new CustomEvent('pairchange', { bubbles: true }));
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            margin-bottom: 1px;
+            display: flex;
+            align-items: center;
+            background: #3f4555;
+            font-size: 12px;
+          }
+        `;
+      }
+    }
+    class SideBarKeyValueAdd extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <span ref="children"></span>
+          </div>
+        `;
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            padding: 0 11px 0 35px;
+            display: flex;
+            align-items: center;
+            height: 40px;
+            color: #5d6577;
+            background: #3f4555 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHBhdGggZD0iTTUgMTJWN0gwVjVoNVYwaDJ2NWg1djJIN3Y1eiIgZmlsbD0iIzVkNjU3NyIvPjwvc3ZnPg==') 12px 50% no-repeat;
+            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+            font-size: 12px;
+            cursor: pointer;
+            &:hover {
+              color: #fff;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarKeyValueCollection extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <div ref="list"></div>
+            <div>
+              <jkl-side-bar-key-value-add on-click="{add}">{text}</jkl-side-bar-key-value-add>
+            </div>
+          </div>
+        `;
+      }
+      get text() { return 'add'; }
+      fromJSON(json) {
+        while (this.list.firstChild) this.list.firstChild.remove();
+        this.$collection = SideBarKeyValuePair
+          .from(json.map(({ enabled = true, key, value }) => ({ enabled, key, value })))
+          .to(this.list);
+      }
+      toJSON() {
+        return (this.$collection || [])
+          .map(({ enabled, key, value }) => ({ enabled, key, value }));
+      }
+      set collection(value) { this.fromJSON(value); }
+      get collection() {
+        return this.toJSON()
+          .filter(({ enabled }) => enabled)
+          .map(({ key, value }) => ({ key, value }));
+      }
+      add() {
+        let item = new SideBarKeyValuePair({ enabled: true, key: 'new item' }).to(this.list);
+        item.select();
+        (this.$collection || (this.$collection = [])).push(item);
+        this.element.dispatchEvent(new CustomEvent('collectionchange', { bubbles: true }));
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            > * {
+              border-radius: 4px;
+              overflow: hidden;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarBodyEditor extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <h3>Body</h3>
+          </div>
+        `;
+      }
+      init() {
+        this.cm = CodeMirror(this.element, {
+          mode: 'application/json',
+          theme: 'material'
+        });
+        this.cm.setValue('{\n\n}')
+        // console.log(this.cm)
+      }
+      didMount() {
+        this.refresh();
+      }
+      set value(value) { this.cm.setValue(value);}
+      get value() { return this.cm.getValue(); }
+      refresh() {
+        setTimeout(() => this.cm.refresh(), 0);
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            .CodeMirror {
+              padding: 1em;
+              height: 10em;
+              border-radius: 8px;
+              background: #3f4555;
+              font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+              line-height: 1.5;
+            }
+          }
+        `;
+      }
+    }
+    class SideBarHeaderCollection extends SideBarKeyValueCollection {
+      get value() {
+        return this.collection
+          .reduce((result, { key, value }) => {
+            (result[key] || (result[key] = [])).push(value);
+            return result;
+          }, {});
+      }
+    }
+    class SideBar extends Jinkela {
+      get template() {
+        return `
+          <form on-submit="{submit}">
+            <jkl-side-bar-method
+              ref="methodComponent"
+              on-methodchange="{methodChange}"
+              on-querystringchange="{syncQueryParameters}">
+            </jkl-side-bar-method>
+            <h3>Query Parameters</h3>
+            <jkl-side-bar-key-value-collection
+              ref="queryParameterCollection"
+              text="add query parameter"
+              on-collectionchange="{syncQueryString}"
+              on-pairchange="{syncQueryString}">
+            </jkl-side-bar-key-value-collection>
+            <jkl-side-bar-body-editor ref="bodyEditor"></jkl-side-bar-body-editor>
+            <h3>Headers</h3>
+            <jkl-side-bar-header-collection
+              ref="headerCollection"
+              text="add header">
+          </form>
+        `;
+      }
+      set method(value) {
+        this.methodComponent.method = value;
+        this.methodChange();
+      }
+      get method() { return this.methodComponent.method; }
+      set queryString(value) {
+        this.methodComponent.queryString = value;
+        this.syncQueryParameters();
+      }
+      get queryString() { return this.methodComponent.queryString; }
+      set queryParameters(value) {
+        this.queryParameterCollection.collection = value;
+        this.syncQueryString();
+      }
+      get queryParameters() { return this.queryParameterCollection.collection; }
+      set body(value) { return this.bodyEditor.value = value; }
+      get body() {return this.bodyEditor.value; }
+      set headers(value) { this.headerCollection.collection = value; }
+      get headers() { return this.headerCollection.value; }
+      fromJSON(json) {
+        let { method, queryParameters, body, headers } = json;
+        if (method) this.method = method.toUpperCase();
+        if (queryParameters) {
+          this.queryParameters = queryParameters;
+        } else {
+          this.queryString =  location.search.slice(1);
+        }
+        if (body) this.body = body;
+        if (headers) this.headerCollection.fromJSON(headers);
+      }
+      toJSON() {
+        let { method, body } = this;
+        let queryParameters = this.queryParameterCollection.toJSON();
+        let headers = this.headerCollection.toJSON();
+        return { method, queryParameters, body, headers };
+      }
+      set isBodyVisible(value) {
+        if (value) {
+          this.bodyEditor.element.style.display = 'block';
+          this.bodyEditor.refresh();
+        } else {
+          this.bodyEditor.element.style.display = 'none';
+        }
+      }
+      get isBodyVisible() { return this.bodyEditor.element.style.display !== 'none'; }
+      init() {
+        let { method, queryParameters, body, headers = [] } = QueryString.parse(location.hash.replace(/^#!?/, ''));
+        try { headers = JSON.parse(headers); } catch (error) { /* ignore */ }
+        try { queryParameters = JSON.parse(queryParameters); } catch (error) { /* ignore */ }
+        this.fromJSON({ method, queryParameters, body, headers });
+        this.methodChange();
+      }
+      submit(event) {
+        event.preventDefault();
+        let { method, queryParameters, body, headers } = this.toJSON();
+        if (queryParameters) queryParameters = JSON.stringify(queryParameters);
+        if (headers) headers = JSON.stringify(headers);
+        let hash = QueryString.stringify({ method, queryParameters, body, headers });
+        if (hash) hash = '#!' + hash;
+        if (location.hash !== hash) {
+          location.hash = hash;
+        } else {
+          dispatchEvent(new Event('hashchange'));
+        }
+      }
+      methodChange() {
+        this.isBodyVisible = isBodyEnabled(this.method);
+      }
+      syncQueryParameters() {
+        let { queryString } = this;
+        let queryParameters = QueryString.parse(queryString, true);
+        this.queryParameterCollection.collection = queryParameters;
+      }
+      syncQueryString() {
+        let { collection } = this.queryParameterCollection;
+        let queryString = QueryString.stringify(collection);
+        this.methodComponent.queryString = queryString;
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            padding: 40px;
+            box-sizing: border-box;
+            color: #fff;
+            background: #2d2f3b;
+            transition: transform 1s;
+            height: 100%;
+            box-sizing: border-box;
+            overflow: auto;
+            h3 {
+              margin-left: -40px;
+              margin-right: -40px;
+              padding: 20px 40px;
+              border-bottom: 1px solid #373b48;
+              font-size: 17px;
+              font-weight: 600;
+            }
+          }
+        `;
+      }
+    }
+    class Main extends Jinkela {
+      get template() {
+        return `
+          <div>
+            <section>
+              <jkl-result-view ref="resultView"></jkl-result-view>
+            </section>
+            <aside>
+              <jkl-side-bar ref="sideBar"></jkl-side-bar>
+            </aside>
+          </div>
+        `;
+      }
+      init() {
+        if (this.sideBar.method === 'POST' || this.sendByUser) {
+          this.sendRequest();
+        } else {
+          this.resultView.waiting = true;
+        }
+        Configuration.watch('settings.sidebar.collapse', value => {
+          console.log('---?') ;
+          if (value) {
+            this.element.classList.add('sidebar-collapse');
+          } else {
+            this.element.classList.remove('sidebar-collapse');
+          }
+        });
+      }
+      sendRequest() {
+        let path = location.pathname;
+        let { method, queryString, body, headers } = this.sideBar;
+        body = StrToJson.encode(body)
+        let defaultHeaders = {
+          Accept: 'application/json, */*',
+          'Content-Type': 'application/json'
+        };
+        headers = Object.assign({}, defaultHeaders, headers);
+        let uri = `//${location.host}${path}`;
+        if (queryString) uri += '?' + queryString;
+        let options = { method, headers, credentials: 'include' };
+        if (this.sideBar.isBodyVisible) options.body = body;
+        let $response = fetch(uri, options);
+        this.resultView.update({ method, path, queryString, body, headers }, $response);
+        // sync title
+        document.title = [ method, uri ].join(' ');
+      }
+      get styleSheet() {
+        return `
+          :scope {
+            position: relative;
+            flex: 1;
+            width: 100%;
+            min-height: 0;
+            > section, > aside {
+              position: absolute;
+              top: 0;
+              bottom: 0;
+            }
+            > section {
+              left: 0;
+              width: 57%;
+              transition: width .01s .7s;
+            }
+            > aside {
+              left: 57%;
+              right: 0;
+              transition: transform .7s;
+            }
+            &.sidebar-collapse {
+              > section {
+                width: 100%;
+                transition: none;
+              }
+              > aside {
+                transform: translateX(100%);
+              }
+            }
+          }
+        `;
+      }
+    }
+    class Frame extends Jinkela {
+      init() {
+        let { sendByUser } = this;
+        new Header().to(this);
+        new Main({ sendByUser }).to(this);
+      }
+      get styleSheet() {
+        return `
+          html {
+            height: 100%;
+            overflow: hidden;
+          }
+          body {
+            margin: 0;
+            height: 100%;
+            background: #fff;
+            color: #4c555a;
+            font-family:
+              "Alright Sans LP", "Avenir Next", "Helvetica Neue", Helvetica, Arial, "PingFang SC",
+              "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi MicroHei", sans-serif;
+            font-size: 14px;
+            -webkit-font-smoothing: antialiased;
+            line-height: 26px;
+          }
+          pre, code {
+            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+          }
+          :scope {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+          }
+        `;
+      }
+    }
+    let frame = new Frame();
+    addEventListener('hashchange', () => frame = new Frame({ sendByUser: true }).renderWith(frame));
+    addEventListener('DOMContentLoaded', () => frame.to(document.body));
+  </script>
+</head>
+</html>