@windwalker-io/core 4.0.8 → 4.0.9

package/fusionfile.mjs

@@ -5,27 +5,43 @@
  * @license    MIT
  */
 
-import fusion, { watch, parallel, src, dest } from '@windwalker-io/fusion';
+import fusion, { watch, parallel, src, dest, wait } from '@windwalker-io/fusion';
 import { babelBasicOptions } from '@windwalker-io/fusion/src/utilities/babel.js';
 import postcss from 'gulp-postcss';
+import path from 'path';
 import tailwindcss from 'tailwindcss';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
 export async function debuggers() {
   // Watch start
   watch(['src/debugger/**/*.{js,vue}', 'scss/**/*.scss']);
   // Watch end
 
-  fusion.vue(
-    'src/debugger/debugger.js',
-    'dist/debugger/',
-    {
-      override: (config) => {
-        // @see https://webpack.js.org/guides/public-path/#automatic-publicpath
-        config.output.publicPath = "auto";
+  return wait(
+    fusion.vue(
+      'src/debugger/debugger.js',
+      'dist/debugger/',
+      {
+        override: (config) => {
+          config.resolve.alias = {
+            '@': path.resolve(path.resolve(), './src/debugger/') // Will be overwrite when compile
+          }
+
+          // @see https://webpack.js.org/guides/public-path/#automatic-publicpath
+          config.output.publicPath = "auto";
+
+          config.output.chunkFilename = process.env.NODE_ENV === 'production'
+            ? 'chunk-vendor-[id].js'
+            : 'dev/chunk-vendor-[id].js';
+
+          // config.plugins.push(
+          //   new BundleAnalyzerPlugin()
+          // );
+        }
       }
-    }
+    ),
+    fusion.copy('images/**/*', 'dist/images/')
   );
-  fusion.copy('images/**/*', 'dist/images/');
 }
 
 export async function console() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windwalker-io/core",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "type": "module",
   "description": "Windwalker Core JS package",
   "scripts": {
@@ -15,26 +15,32 @@
   "author": "Simon Asika",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.21.1"
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
+    "axios": "^0.21.1",
+    "dayjs": "^1.11.5"
   },
   "devDependencies": {
     "@tailwindcss/custom-forms": "^0.2.1",
     "@tailwindcss/ui": "^0.7.2",
     "@windwalker-io/fusion": "^1.0",
-    "bootstrap": "^5.0",
     "autoprefixer": "^10.2.6",
     "axios": "^0.21.1",
+    "bootstrap": "^5.0",
     "gulp": "^4.0.2",
     "gulp-postcss": "^9.0.0",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^4.0.0",
     "postcss-nested": "^5.0.5",
     "regenerator-runtime": "^0.13.7",
-    "sql-formatter": "^4.0.2",
+    "sql-formatter": "^10.6.0",
     "tailwindcss": "^2.1.4",
     "vue": "^3.0.11",
+    "vuedraggable": "^3.0||^4.0.3",
     "vue-router": "^4.0.8",
-    "webpack": "^5.0"
+    "webpack": "^5.0",
+    "webpack-bundle-analyzer": "^4.6.1"
   },
   "windwalker": {
     "vendors": [

package/scss/_variables.scss

@@ -5,3 +5,4 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
+@import "bootstrap/scss/maps";

package/scss/base/_typography.scss

@@ -0,0 +1,9 @@
+// Part of earth file.
+
+pre {
+  margin-bottom: 0;
+}
+
+code {
+  color: $dark;
+}

package/scss/debugger.scss

@@ -1,7 +1,53 @@
 // Part of starter file.
 
 @import "variables";
-@import "bootstrap/scss/bootstrap";
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+//@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+//@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+//@import "bootstrap/scss/accordion";
+//@import "bootstrap/scss/breadcrumb";
+//@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+//@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+//@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+//@import "bootstrap/scss/popover";
+//@import "bootstrap/scss/carousel";
+//@import "bootstrap/scss/spinners";
+//@import "bootstrap/scss/offcanvas";
+//@import "bootstrap/scss/placeholders";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
+@import "base/typography";
 
 @import "layout/layout";
 @import "layout/sidebar";

package/src/debugger/App.vue

@@ -1,46 +1,70 @@
 <template>
   <div class="c-main-wrapper">
-    <div class="navbar navbar-expand-lg navbar-dark bg-dark"
+    <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"
       style="height: 60px">
-      <!-- Logo -->
-      <div class="h-w-sidebar">
-        <img src="assets/vendor/@windwalker-io/core/dist/images/windwalker-logo-h-w.svg" alt="logo"
-          style="height: 30px">
-      </div>
+      <div class="container-fluid">
+        <!-- Logo -->
+        <div class="navbar-brand">
+          <img src="assets/vendor/@windwalker-io/core/dist/images/windwalker-logo-h-w.svg" alt="logo"
+            style="height: 30px">
+        </div>
 
-      <!-- Header  -->
-      <div class="">
+        <!-- Header  -->
+        <div class="">
 
+        </div>
       </div>
     </div>
 
     <!-- Body -->
-    <div class="row gx-0 flex-wrap flex-md-nowrap">
+    <div class="d-flex flex-column flex-md-row" style="margin-top: 60px;">
       <!-- Sidebar -->
-      <div class="h-w-sidebar col-md-2">
-        <div class="nav flex-column bg-light h-100">
-          <div class="nav-item">
+      <div class="h-w-sidebar bg-light">
+        <div class="nav flex-column bg-light position-sticky"
+          style="min-width: 200px; top: 60px">
+          <div class="nav-item nav-item--dashboard">
             <router-link to="/"
               class="c-sidebar-menu-item nav-link"
               :class="{ active: currentRoute === 'dashboard' }">
               Dashboard
             </router-link>
           </div>
-          <div class="nav-item">
+          <div class="nav-item nav-item--system">
             <router-link to="/system"
               class="c-sidebar-menu-item nav-link"
               :class="{ active: currentRoute === 'system' }">
               System
             </router-link>
           </div>
-          <div class="nav-item">
+          <div class="nav-item nav-item--request">
             <router-link to="/request"
               class="c-sidebar-menu-item nav-link"
               :class="{ active: currentRoute === 'request' }">
               Request
             </router-link>
           </div>
-          <div class="nav-item">
+          <div class="nav-item nav-item--routing">
+            <router-link to="/routing"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'routing' }">
+              Routing
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--timeline">
+            <router-link to="/timeline"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'timeline' }">
+              Timeline
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--timeline">
+            <router-link to="/events"
+              class="c-sidebar-menu-item nav-link"
+              :class="{ active: currentRoute === 'events' }">
+              Events
+            </router-link>
+          </div>
+          <div class="nav-item nav-item--db">
             <router-link to="/db"
               class="c-sidebar-menu-item nav-link"
               :class="{ active: currentRoute === 'db' }">
@@ -51,7 +75,7 @@
       </div>
 
       <!-- Content Body -->
-      <div class="col-md-10">
+      <div class="flex-grow-1">
         <router-view></router-view>
       </div>
     </div>

package/src/debugger/Store.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { currentId } from './services/store.js';
+import { currentId } from '@/services/store.js';
 
 export default {
   name: 'Store',

package/src/debugger/components/BsModal.vue

@@ -0,0 +1,128 @@
+<template>
+  <teleport to="body">
+    <div ref="modal" class="modal fade" :id="idName"
+      v-bind="$attrs"
+      tabindex="-1"
+      role="dialog"
+      :aria-labelledby="idName + '-label'"
+      :aria-hidden="visible ? 'true' : 'false'"
+      :data-bs-backdrop="backdrop"
+    >
+      <div class="modal-dialog"
+        role="document"
+        :class="size ? 'modal-' + size : null">
+        <div class="modal-content">
+          <template v-if="visible">
+            <template v-if="hasSlots('header-element')">
+              <slot name="header-element"></slot>
+            </template>
+            <div v-else class="modal-header">
+              <slot name="header">
+                <div class="modal-title" :id="idName + '-label'">
+                    <h4>{{ title }}</h4>
+                </div>
+              </slot>
+              <button type="button" class="close btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true" class="visually-hidden">&times;</span>
+              </button>
+            </div>
+          </template>
+          <div v-if="visible" class="modal-body">
+            <slot></slot>
+          </div>
+          <div v-if="visible && hasSlots('footer')" class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script>
+import Modal from 'bootstrap/js/src/modal.js';
+import { onMounted, reactive, ref, toRefs, watch } from 'vue';
+
+export default {
+  name: 'BsModal',
+  inheritAttrs: false,
+  props: {
+    id: String,
+    open: {
+      type: Boolean,
+      default: false
+    },
+    size: String,
+    title: String,
+    backdrop: {
+      type: [ String, Boolean ],
+      default: true
+    }
+  },
+  emits: [
+    'show',
+    'shown',
+    'hide',
+    'hidden'
+  ],
+  setup(props, { emit, slots }) {
+    const modal = ref(null);
+    const state = reactive({
+      idName: props.id || 'modal-' + (Math.random() + 1).toString(36).substring(7),
+      visible: props.open,
+    });
+
+    watch(() => state.visible, (v, oldV) => {
+      if (!oldV && v) {
+        getModalInstance().show();
+      }
+      if (oldV && !v) {
+        getModalInstance().hide();
+      }
+    });
+
+    watch(() => props.open, (v) => {
+      state.visible = v
+    });
+
+    watch(() => props.id, (idName) => {
+      state.idName = idName;
+    });
+
+    onMounted(() => {
+      modal.value.addEventListener('show.bs.modal', (e) => {
+        emit('show', e);
+      });
+
+      modal.value.addEventListener('shown.bs.modal', (e) => {
+        emit('shown', e);
+      });
+      modal.value.addEventListener('hide.bs.modal', (e) => {
+        emit('hide', e);
+      });
+
+      modal.value.addEventListener('hidden.bs.modal', (e) => {
+        emit('hidden', e);
+      });
+    });
+
+    function getModalInstance() {
+      return Modal.getOrCreateInstance(modal.value);
+    }
+
+    function hasSlots(name) {
+      return slots[name] !== undefined;
+    }
+
+    return {
+      ...toRefs(state),
+      modal,
+      hasSlots
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/debugger/components/KeyValueTable.vue

@@ -0,0 +1,51 @@
+<template>
+  <table class="table table-bordered">
+    <thead>
+    <tr>
+      <th class="" style="width: 20%; min-width: 150px;" >
+        Key
+      </th>
+      <th>
+        Value
+      </th>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr v-for="(value, key) of data" :key="key">
+      <td style="width: 20%; word-break: break-all">
+        {{ key }}
+      </td>
+      <td style="width: 80%; max-width: 800px">
+        <pre style="word-break: break-all" class="m-0">{{ displayData(value) }}</pre>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'KeyValueTable',
+  props: {
+    data: Object
+  },
+  setup() {
+    function displayData(v) {
+      if (typeof v === 'object' || Array.isArray(v)) {
+        return JSON.stringify(v, null, 2);
+      }
+
+      return v;
+    }
+
+    return {
+      displayData
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/debugger/components/db/{query-info.vue → QueryInfo.vue}

@@ -1,13 +1,11 @@
 <template>
-  <!-- component -->
-  <div :id="`query-${i}`" class="card rounded-3 border-0 shadow overflow-hidden mx-auto">
-    <div class="card-body">
-      <div class="d-flex align-items-center justify-content-between mb-4">
-        <div>
-          <h2 class="text-gray-700 font-semibold text-2xl tracking-wide mb-2">
-            Query: {{ i }}
-          </h2>
-        </div>
+  <div :id="`query-${i}`" class="card rounded-3 border border-1 border-primary">
+    <div class="card-header d-flex justify-content-between">
+      <h4 class="m-0">
+        Query: {{ i }}
+      </h4>
+
+      <div class="d-flex align-items-center justify-content-between">
         <div class="text-muted">
           <button
             type="button"
@@ -32,25 +30,37 @@
           </button>
         </div>
       </div>
+    </div>
+    <div class="card-body">
+
       <div class="">
         <pre style="word-break: break-all; white-space: pre-wrap;"
           class="bg-light p-4"
-          v-html="item.debug_query"
+          v-html="formatQuery(item.debug_query)"
           ></pre>
       </div>
-      <div class="py-4">
-        Query Time:
-        <span class="badge bg-secondary">
-          {{ round(item.time * 1000) }}ms
-        </span>
-        Memory:
-        <span class="badge bg-secondary">
-          {{ round(item.memory / 1024 / 1024) }}MB
-        </span>
-        Return Rows
-        <span class="badge bg-secondary rounded-pill">
-          {{ item.count }}
-        </span>
+      <div class="py-4 d-flex justify-content-between">
+        <div>
+          Query Time:
+          <span class="badge" :class="`bg-${stateColor(item.time * 1000, 15)}`">
+            {{ round(item.time * 1000) }}ms
+          </span>
+          Memory:
+          <span class="badge" :class="`bg-${stateColor(item.memory / 1024 / 1024, 0.05)}`">
+            {{ round(item.memory / 1024 / 1024) }}MB
+          </span>
+          Return Rows
+          <span class="badge bg-info rounded-pill">
+            {{ item.count }}
+          </span>
+        </div>
+
+        <div>
+          <button class="btn btn-primary" @click="openBacktrace(item.backtrace, i)">
+            <svg style="height: 14px; fill: white;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"/></svg>
+            Backtrace
+          </button>
+        </div>
       </div>
     </div>
 
@@ -133,30 +143,48 @@
 
 <script>
 import { format } from 'sql-formatter';
+import { stateColor } from '../../services/utilities.js';
 import { goToLast } from '../../services/nav.js';
 
 export default {
   name: 'query-info',
   props: {
     i: Number,
-    item: Object
+    item: Object,
+    totalCount: Number,
+    totalTime: Number,
+    totalMemory: Number,
   },
-  setup(props) {
+  setup(props, { emit }) {
     function copy() {
       navigator.clipboard.writeText(props.item.debug_query);
     }
 
+    function openBacktrace(backtrace) {
+      emit('open-backtrace', backtrace, props.i);
+    }
+
     return {
       formatQuery,
       round,
       goToLast,
-      copy
+      copy,
+      stateColor,
+      openBacktrace
     };
   }
 };
 
 function formatQuery(query) {
-  return format(query).replace(/\n/, '<br>');
+  try {
+    return format(query, {
+      keywordCase: 'upper',
+      
+    }).replace(/\n/, '<br>');
+  } catch (e) {
+    console.error(e);
+    return query;
+  }
 }
 
 function round(num) {

package/src/debugger/components/events/EventListenersTable.vue

@@ -0,0 +1,75 @@
+<template>
+<table class="table table-bordered">
+  <thead>
+  <tr>
+    <th>
+      Event Name
+    </th>
+    <th>
+      Times
+    </th>
+    <th>
+      Listener
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  <template v-for="(listeners, event) of events" :key="event">
+    <template v-if="Object.keys(listeners).length > 0">
+      <tr v-for="(count, listener) of listeners">
+        <td v-if="isFirstRow(event)" :rowspan="Object.keys(listeners).length">
+          <pre>{{ event }}</pre>
+        </td>
+        <td>
+          {{ count }}
+        </td>
+        <td>
+          <pre>{{ listener }}</pre>
+        </td>
+      </tr>
+    </template>
+    <template v-else>
+      <tr>
+        <td>
+          <pre>{{ event }}</pre>
+        </td>
+        <td>
+          -
+        </td>
+        <td>
+          -
+        </td>
+      </tr>
+    </template>
+  </template>
+  </tbody>
+</table>
+</template>
+
+<script>
+export default {
+  name: 'EventListenersTable',
+  props: {
+    events: Object,
+  },
+  setup() {
+    let lastEvent = null;
+
+    function isFirstRow(event) {
+      const isFirst = event !== lastEvent;
+
+      lastEvent = event;
+
+      return isFirst;
+    }
+
+    return {
+      isFirstRow,
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>