@windwalker-io/core 4.0.8 → 4.0.9

package/src/debugger/views/Request.vue

@@ -1,10 +1,142 @@
 <template>
+  <DefaultLayout>
+    <template #title>
+      Request
+    </template>
 
+    <div ref="root" class="p-4" v-if="data">
+      <section class="l-section l-section--get mt-5">
+        <h3>GET Variables</h3>
+
+        <KeyValueTable :data="data.request.query" />
+
+      </section>
+
+      <section class="l-section l-section--body mt-5">
+        <h3>Body Variables</h3>
+
+        <KeyValueTable :data="data.request.body" />
+
+      </section>
+
+      <section class="l-section l-section--files mt-5">
+        <h3>FILES Variables</h3>
+
+        <KeyValueTable :data="data.request.files" />
+
+      </section>
+
+      <section class="l-section l-section--session mt-5">
+        <h3>Session Variables</h3>
+
+        <KeyValueTable :data="data.session" />
+
+      </section>
+
+      <section class="l-section l-section--cookies mt-5">
+        <h3>Cookies Variables</h3>
+
+        <KeyValueTable :data="data.cookies || data.request.cookies" />
+
+      </section>
+
+      <section class="l-section l-section--server mt-5">
+        <h3>SERVER Variables</h3>
+
+        <KeyValueTable :data="data.request.server" />
+
+      </section>
+
+      <section class="l-section l-section--env mt-5">
+        <h3>ENV Variables</h3>
+
+        <KeyValueTable :data="data.request.env" />
+
+      </section>
+    </div>
+
+    <teleport to=".nav-item--request">
+      <ul class="nav flex-column ps-4 small">
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('get')">
+            GET Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('body')">
+            Body Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('files')">
+            Files Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('session')">
+            Session Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('cookies')">
+            Cookies Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('server')">
+            SERVER Variables
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link" @click.prevent="goto('env')">
+            ENV Variables
+          </a>
+        </li>
+      </ul>
+    </teleport>
+  </DefaultLayout>
 </template>
 
 <script>
+import { ref } from 'vue';
+import KeyValueTable from '../components/KeyValueTable.vue';
+import DefaultLayout from '../layouts/DefaultLayout.vue';
+import $http from '../services/http.js';
+
 export default {
-  name: 'Request'
+  name: 'Request',
+  components: { KeyValueTable, DefaultLayout },
+  async beforeRouteEnter(to, from ,next) {
+    next(async (vm) => {
+      const res = await $http.get('ajax/data?path=http');
+      vm.data = res.data.data;
+    });
+  },
+  async beforeRouteUpdate(to, from ,next) {
+    const res = await $http.get('ajax/data?path=http');
+    this.data = res.data.data;
+  },
+  setup() {
+    const data = ref(null);
+    const root = ref(null);
+
+    function goto(section) {
+      const sec = root.value.querySelector(`.l-section--${section}`);
+
+      if (sec) {
+        window.scrollTo({
+          top: sec.offsetTop - 100,
+          behavior: 'smooth'
+        });
+      }
+    }
+
+    return {
+      data,
+      root,
+      goto,
+    }
+  }
 };
 </script>
 

package/src/debugger/views/Routing.vue

@@ -0,0 +1,210 @@
+<template>
+<DefaultLayout>
+  <template #title>
+    Routing
+  </template>
+
+  <div class="p-4" v-if="data">
+
+    <section class="l-section l-section--info">
+      <h3 class="mb-3">Route Information</h3>
+
+      <table class="table table-bordered">
+        <tbody>
+        <!-- Method -->
+        <tr>
+          <th style="width: 20%">
+            Request Method
+          </th>
+          <td>
+            {{ data.request.method }}
+          </td>
+        </tr>
+
+        <!-- Routes -->
+        <tr>
+          <th>
+            Total Routes
+          </th>
+          <td>
+            {{ Object.keys(data.routing.routes).length }}
+          </td>
+        </tr>
+
+        <!-- Matched -->
+        <tr>
+          <th>
+            Matched Route
+          </th>
+          <td>
+            <pre class="m-0">{{ data.routing.matched?.name }}</pre>
+          </td>
+        </tr>
+
+        <!-- Controller -->
+        <tr>
+          <th>
+            Controller / View
+          </th>
+          <td>
+            <pre class="m-0">{{ data.routing.controller }}</pre>
+
+            <div v-if="data.routing.matched?.options?.vars?.view"
+              class="ps-3 mt-2">
+              <pre class="m-0"><strong>View:</strong> {{ data.routing.matched?.options?.vars?.view }}</pre>
+            </div>
+          </td>
+        </tr>
+
+        <!-- Handler -->
+        <tr>
+          <th>
+            Handler
+          </th>
+          <td>
+            <pre class="m-0">{{ JSON.stringify(data.routing.matched?.options?.handlers, null, 2) }}</pre>
+          </td>
+        </tr>
+
+        <!-- Middlewares -->
+        <tr>
+          <th>
+            Middlewares
+          </th>
+          <td>
+            <div v-for="middleware of data.routing?.matched?.options?.middlewares">
+              <pre class="mb-1">{{ middleware }}</pre>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="l-section l-section--uri mt-5">
+      <h3 class="mb-3">Uri Information</h3>
+
+      <KeyValueTable :data="data.uri" />
+    </section>
+
+    <section class="l-section l-section--routes mt-5">
+      <h3 class="mb-3">Routes</h3>
+
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>
+              Route Name
+            </th>
+            <th>
+              Pattern
+            </th>
+            <th>
+              Methods
+            </th>
+            <th>
+              Controller / View
+            </th>
+            <!--<th>-->
+            <!--  Detail-->
+            <!--</th>-->
+          </tr>
+        </thead>
+
+        <tbody>
+        <tr v-for="(route, name) of data.routing.routes"
+          :class="{ 'table-success': data.routing.matched?.name === route.name }">
+          <td>
+            <code>{{ route.name }}</code>
+          </td>
+          <td>
+            <code>{{ route.options.pattern }}</code>
+          </td>
+          <td>
+            {{ route.options?.method?.join('|') || 'Any' }}
+          </td>
+          <td style="max-width: 400px">
+            <div style="overflow-x: auto">
+              <div v-if="route?.options?.vars?.view"
+                class="">
+                <pre class="m-0">{{ route?.options?.vars?.view }}</pre>
+              </div>
+              <div v-else>
+                <pre>{{ getHandler(route.options.handlers || {}) }}</pre>
+              </div>
+            </div>
+          </td>
+          <!--<td></td>-->
+        </tr>
+        </tbody>
+      </table>
+
+    </section>
+
+  </div>
+</DefaultLayout>
+</template>
+
+<script>
+import { ref } from 'vue';
+import KeyValueTable from '../components/KeyValueTable.vue';
+import DefaultLayout from '../layouts/DefaultLayout.vue';
+import $http from '../services/http.js';
+export default {
+  name: 'Routing',
+  components: { KeyValueTable, DefaultLayout },
+  async beforeRouteEnter(to, from ,next) {
+    next(async (vm) => {
+      const params = new URLSearchParams();
+      params.set('path[request]', 'http::request');
+      params.set('path[uri]', 'http::systemUri');
+      params.set('path[routing]', 'routing');
+
+      const res = await $http.get('ajax/data?' + params.toString());
+      vm.data = res.data.data;
+    });
+  },
+  async beforeRouteUpdate(to, from ,next) {
+    const params = new URLSearchParams();
+    params.set('path[request]', 'http::request');
+    params.set('path[uri]', 'http::systemUri');
+    params.set('path[routing]', 'routing');
+
+    const res = await $http.get('ajax/data?' + params.toString());
+    vm.data = res.data.data;
+  },
+  setup() {
+    const data = ref(null);
+
+    function getHandler(handlers) {
+      if (handlers['*']) {
+        return getCallable(handlers['*']);
+      }
+
+      return getCallable(Object.values(handlers)[0]);
+    }
+
+    function getCallable(callable) {
+      if (!callable) {
+        return '-';
+      }
+
+      if (typeof callable === 'string') {
+        return callable;
+      }
+
+      return callable.join('::') + '()';
+    }
+
+    return {
+      data,
+
+      getHandler
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/debugger/views/System.vue

@@ -1,5 +1,5 @@
 <template>
-  <default-layout>
+  <DefaultLayout>
     <template #title>
       System
     </template>
@@ -8,31 +8,56 @@
       <div>
         <h4>Windwalker</h4>
 
-        <table class="table w-full border">
+        <table class="table table-bordered">
+          <tbody>
           <tr>
-            <th style="width: 25%" class="border-right">Framework Version</th>
+            <th style="width: 25%" class="">Framework Version</th>
             <td>{{ data.framework_version }}</td>
           </tr>
           <tr>
-            <th class="border-right">Core Version</th>
+            <th class="">Core Version</th>
             <td>{{ data.core_version }}</td>
           </tr>
           <tr>
             <th class="border-right">PHP Version</th>
             <td>{{ data.php_version }}</td>
           </tr>
+          </tbody>
         </table>
       </div>
 
-      <hr />
+      <div class="mt-5">
+        <h4>Debug Messages</h4>
 
-      <div class="mt-4">
+        <table class="table table-bordered">
+          <thead>
+          <tr>
+            <th>Type</th>
+            <th>Message</th>
+          </tr>
+          </thead>
+          <tbody>
+          <template v-for="(msgs, type) of data.messages" :key="msgs">
+            <tr v-for="msg of msgs" :key="msg">
+              <td style="width: 20%;" class="text-nowrap">
+                {{ type }}
+              </td>
+              <td>
+                {{ msg }}
+              </td>
+            </tr>
+          </template>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="mt-5">
         <h4>Config</h4>
 
-        <pre class="bg-gray-200 p-3 rounded-sm text-sm">{{ JSON.stringify(data.config, null, 2) }}</pre>
+        <pre class="bg-light p-3"><code>{{ JSON.stringify(data.config, null, 2) }}</code></pre>
       </div>
     </div>
-  </default-layout>
+  </DefaultLayout>
 </template>
 
 <script>
@@ -50,6 +75,10 @@ export default {
       vm.data = res.data.data;
     });
   },
+  async beforeRouteUpdate(to, from ,next) {
+    const res = await $http.get('ajax/data?path=system');
+    this.data = res.data.data;
+  },
   setup() {
     const data = ref({});
 

package/src/debugger/views/Timeline.vue

@@ -0,0 +1,92 @@
+<template>
+<DefaultLayout>
+  <template #title>
+    Timeline
+  </template>
+
+  <div class="p-4" v-if="data">
+
+    <section class="l-section l-section--system">
+      <h3>System Timeline</h3>
+
+      <TimelineTable :items="systemItems" />
+    </section>
+
+    <section class="l-section l-section--profilers mt-5">
+
+      <ul class="nav nav-pills" id="profilers-tab" role="tablist">
+        <li class="nav-item" role="presentation"
+          v-for="(instance, i) of instances">
+          <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
+            :data-bs-target="`tab-${instance}`"
+            type="button"
+            role="tab"
+            aria-selected="true">
+            {{ instance }}
+          </button>
+        </li>
+      </ul>
+      <div class="tab-content mt-4" id="myTabContent">
+        <div class="tab-pane fade "
+          v-for="(instance, i) of instances"
+          :class="[ i === 0 ? 'show active' : '' ]"
+          :id="`tab-${instance}`"
+          role="tabpanel"
+          tabindex="0">
+          <div class="">
+            <TimelineTable :items="data[instance].items" />
+          </div>
+        </div>
+      </div>
+
+    </section>
+  </div>
+</DefaultLayout>
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+import TimelineTable from '../components/timeline/TimelineTable.vue';
+import DefaultLayout from '../layouts/DefaultLayout.vue';
+import $http from '../services/http.js';
+export default {
+  name: 'Timeline',
+  components: { TimelineTable, DefaultLayout },
+  async beforeRouteEnter(to, from ,next) {
+    next(async (vm) => {
+      const res = await $http.get('ajax/data?path=profiler');
+      vm.data = res.data.data;
+    });
+  },
+  async beforeRouteUpdate(to, from ,next) {
+    const res = await $http.get('ajax/data?path=profiler');
+    this.data = res.data.data;
+  },
+  setup() {
+    const data = ref(null);
+
+    const instances = computed(() => Object.keys(data.value));
+    const systemItems = computed(() => {
+      if (!data.value) {
+        return [];
+      }
+
+      return data.value.main.items.filter((item) => {
+        const tags = item.tags || [];
+
+        return tags.indexOf('system') !== -1;
+      }) || [];
+    });
+
+    return {
+      data,
+      instances,
+      systemItems,
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/{webpack.config.js → debugger/webpack.config.js}

@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = {
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, '/debugger'),
+      '@': path.resolve(__dirname),
     }
   }
 };

package/src/index.mjs

@@ -1,9 +1,9 @@
-/**
- * Part of funclass project.
- *
- * @copyright  Copyright (C) 2021 LYRASOFT.
- * @license    __LICENSE__
- */
-
-export * from './asset-sync.mjs';
-export * from './install-vendors.mjs';
+/**
+ * Part of funclass project.
+ *
+ * @copyright  Copyright (C) 2021 LYRASOFT.
+ * @license    __LICENSE__
+ */
+
+export * from './asset-sync.mjs';
+export * from './install-vendors.mjs';

package/src/install-vendors.mjs

@@ -30,7 +30,7 @@ export async function installVendors(npmVendors, composerVendors = [], to = 'www
     deleteExists(dir);
   });
 
-  vendors = findVendors().concat(vendors);
+  vendors = findVendors(composerVendors).concat(vendors);
   vendors = [...new Set(vendors)];
 
   vendors.forEach((vendor) => {
@@ -59,12 +59,12 @@ function doInstall(source, dest) {
   }
 }
 
-function findVendors() {
+function findVendors(composerVendors = []) {
   const pkg = path.resolve(process.cwd(), 'package.json');
 
   const pkgJson = loadJson(pkg);
 
-  const vendors = Object.keys(pkgJson.devDependencies || {})
+  let vendors = Object.keys(pkgJson.devDependencies || {})
     .concat(Object.keys(pkgJson.dependencies || {}))
     .map(id => `node_modules/${id}/package.json`)
     .map((file) => loadJson(file))
@@ -72,6 +72,13 @@ function findVendors() {
     .map(pkgJson => pkgJson.windwalker.vendors || [])
     .flat();
 
+  composerVendors.forEach((cv) => {
+    const composerManifest = `vendor/${cv}/composer.json`;
+    const composerJson = loadJson(composerManifest);
+
+    vendors = vendors.concat(composerJson?.windwalker?.asset_vendors || []);
+  });
+
   return [ ...new Set(vendors) ];
 }
 

package/src/utils.mjs

@@ -1,5 +1,3 @@
-import fs from 'fs';
-
 /**
  * Part of earth project.
  *
@@ -7,6 +5,7 @@ import fs from 'fs';
  * @license    __LICENSE__
  */
 
+import fs from 'fs';
 
 export function loadJson(file) {
   if (!fs.existsSync(file)) {