@windwalker-io/core 4.0.9 → 4.1.0

package/src/debugger/layouts/DefaultLayout.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-if="currentData">
-  <div class="p-3" style="background-color: var(--bs-gray-200);">
+  <div class="p-3 mt-3 mx-4 rounded-3" style="background-color: var(--bs-gray-800);">
     <h1 class="text-xl font-bold text-gray-800">
       <slot name="title"></slot>
     </h1>
@@ -21,25 +21,12 @@
 </div>
 </template>
 
-<script>
+<script setup>
 import { useRoute } from 'vue-router';
-import { goToLast } from '../services/nav.js';
-import { currentData, currentId } from '../services/store.js';
+import { goToLast } from '../services/nav';
+import { currentData, currentId } from '../services/store';
 
-export default {
-  name: 'DefaultLayout',
-  setup() {
-    const route = useRoute();
-    
-    return {
-      currentId,
-      currentData,
-      route,
-
-      goToLast
-    };
-  }
-};
+const route = useRoute();
 </script>
 
 <style scoped>

package/src/debugger/routes.js

@@ -1,9 +1,4 @@
-/**
- * Part of starter project.
- *
- * @copyright  Copyright (C) 2021 __ORGANIZATION__.
- * @license    __LICENSE__
- */
+
 
 import { createRouter, createWebHashHistory } from 'vue-router';
 import $http from './services/http.js';

package/src/debugger/services/http.js

@@ -1,9 +1,4 @@
-/**
- * Part of starter project.
- *
- * @copyright  Copyright (C) 2021 __ORGANIZATION__.
- * @license    __LICENSE__
- */
+
 
 import axios, { AxiosError } from 'axios';
 import { currentId } from './store.js';

package/src/debugger/services/nav.js

@@ -1,19 +1,14 @@
-/**
- * Part of starter project.
- *
- * @copyright  Copyright (C) 2021 __ORGANIZATION__.
- * @license    __LICENSE__
- */
+
 
 import router from '../routes.js';
 import $http from './http.js';
 
-export async function goToLast(currentRoute = null) {
+export async function goToLast(currentRoute = undefined) {
   const res = await $http.get('ajax/last');
   let route = '';
 
   if (currentRoute) {
-    route = currentRoute += '/' + res.data.data;
+    route = currentRoute + '/' + res.data.data;
   } else {
     route = '/system/' + res.data.data;
   }

package/src/debugger/services/store.js

@@ -1,11 +1,4 @@
-/**
- * Part of starter project.
- *
- * @copyright  Copyright (C) 2021 __ORGANIZATION__.
- * @license    __LICENSE__
- */
-
 import { ref } from 'vue';
 
-export const currentId = ref(null);
-export const currentData = ref(null);
+export const currentId = ref();
+export const currentData = ref();

package/src/debugger/services/utilities.js

@@ -1,9 +1,4 @@
-/**
- * Part of earth project.
- *
- * @copyright  Copyright (C) 2022 __ORGANIZATION__.
- * @license    __LICENSE__
- */
+
 
 export function stateColor(value, avg) {
   if (value > (avg * 2)) {
@@ -16,3 +11,19 @@ export function stateColor(value, avg) {
     return 'info';
   }
 }
+
+export function httpStatusColor(status) {
+  if (status >= 300 && status < 400) {
+    return 'info';
+  }
+
+  if (status >= 400 && status < 500) {
+    return 'warning';
+  }
+
+  if (status >= 200 && status < 300) {
+    return 'success';
+  }
+
+  return 'danger';
+}

package/src/debugger/types/global.d.js

@@ -0,0 +1,2 @@
+declare module '*.jpg';
+declare module '*.svg';

package/src/debugger/views/Dashboard.vue

@@ -30,7 +30,7 @@
       <tbody>
       <tr v-for="item of items">
         <td>
-          <a href="#" @click.prevent="selectId(item.id)" class="link-secondary">
+          <a href="#" @click.prevent="selectId(item.id)" class="">
             {{ item.id }}
           </a>
         </td>
@@ -45,9 +45,16 @@
           {{ item.ip }}
         </td>
         <td>
-          {{ item.method }}
+          <div>
+            {{ item.method }}
+          </div>
+          <div>
+            <span v-if="item.ajax" class="badge bg-danger">
+              AJAX | API
+            </span>
+          </div>
         </td>
-        <td>
+        <td style="word-break: break-all">
           <a :href="item.url"
             target="_blank"
             class="link-secondary">
@@ -59,7 +66,9 @@
           {{ dateFormat(item.time) }}
         </td>
         <td>
-          {{ item.response?.status }}
+          <span class="badge" :class="`bg-${httpStatusColor(item.response?.status || 0)}`">
+            {{ item.response?.status }}
+          </span>
         </td>
       </tr>
       </tbody>
@@ -67,43 +76,33 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import * as dayjs from 'dayjs';
-import { onMounted, reactive, toRefs } from 'vue';
-import router from '@/routes.js';
-import $http from '@/services/http.js';
-import { currentId } from '@/services/store.js';
-
-export default {
-  name: 'Dashboard',
-  setup() {
-    const state = reactive({
-      items: [],
-    });
+import { onMounted, reactive, ref, toRefs } from 'vue';
+import router from '../routes.js';
+import $http from '../services/http.js';
+import { currentId } from '../services/store.js';
+import { httpStatusColor } from '../services/utilities.js';
 
-    onMounted(async () => {
-      const res = await $http.get('ajax/history');
+const state = reactive({
+  items: [],
+});
 
-      state.items = res.data.data;
-    });
+const items = ref([]);
 
-    function selectId(id) {
-        currentId.value = id;
+onMounted(async () => {
+  const res = await $http.get('ajax/history');
 
-        router.push('/system/' + id);
-    }
+  items.value = res.data.data;
+});
 
-    function dateFormat(ts) {
-      return dayjs.unix(ts).format('YYYY-MM-DD HH:mm:ssZ');
-    }
+function selectId(id) {
+  router.push('/system/' + id);
+}
 
-    return {
-      ...toRefs(state),
-      selectId,
-      dateFormat,
-    };
-  }
-};
+function dateFormat(ts) {
+  return dayjs.unix(ts).format('YYYY-MM-DD HH:mm:ssZ');
+}
 </script>
 
 <style scoped>

package/src/debugger/views/Database.vue

@@ -35,12 +35,14 @@
               Count: <span class="badge bg-info">{{ data?.queries[instance]?.length || 0 }}</span>
               -
               Time:
-              <span class="badge" :class="`bg-${stateColor(totalTime(instance), 15 * (data?.queries[instance]?.length || 0))}`">
+              <span class="badge"
+                :class="`bg-${stateColor(totalTime(instance), 15 * (data?.queries[instance]?.length || 0))}`">
             {{ round(totalTime(instance)) }}ms
           </span>
               -
               Memory:
-              <span class="badge" :class="`bg-${stateColor(totalMemory(instance), 0.05 * (data?.queries[instance]?.length || 0))}`">
+              <span class="badge"
+                :class="`bg-${stateColor(totalMemory(instance), 0.05 * (data?.queries[instance]?.length || 0))}`">
             {{ round(totalMemory(instance)) }}MB
           </span>
             </div>
@@ -81,87 +83,61 @@
   </defaultLayout>
 </template>
 
-<script>
+<script setup>
 import { computed, ref } from 'vue';
-import BsModal from '@/components/BsModal.vue';
-import QueryInfo from '@/components/db/QueryInfo.vue';
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import $http from '@/services/http.js';
+import BsModal from '../components/BsModal.vue';
+import QueryInfo from '../components/db/QueryInfo.vue';
+import DefaultLayout from '../layouts/DefaultLayout.vue';
+import $http from '../services/http.js';
 import { stateColor } from '../services/utilities.js';
 
-export default {
-  name: 'Database',
-  components: { BsModal, QueryInfo, DefaultLayout },
-  async beforeRouteEnter(to, from ,next) {
-    next(async (vm) => {
-      const res = await $http.get('ajax/data?path=db');
-      vm.data = res.data.data;
-    });
-  },
-  async beforeRouteUpdate(to, from ,next) {
-    const res = await $http.get('ajax/data?path=db');
-    this.data = res.data.data;
-  },
-  setup() {
-    const data = ref(null);
-
-    function totalTime(instance) {
-      return data.value?.queries[instance]?.reduce((sum, query) => {
-        return sum + query.time;
-      }, 0) * 1000;
-    }
-
-    function totalMemory(instance) {
-      return data.value?.queries[instance]?.reduce((sum, query) => {
-        return sum + query.memory;
-      }, 0) / 1024 / 1024;
-    }
-
-    const showBacktraceModal = ref(false);
-    const backtrace = ref([]);
-    const backtraceIndex = ref(0);
-
-    function openBacktrace(trace, i) {
-      backtrace.value = trace;
-      backtraceIndex.value = i;
-      showBacktraceModal.value = true;
-    }
-
-    const editor = document.__data.editor;
-    const sysPath = document.__data.systemPath;
-
-    function getEditorLink(trace) {
-      return `${editor}://open?file=${trace.pathname}&line=${trace.line}`;
-    }
-
-    function replaceRoot(path) {
-      return path.replace(sysPath, 'ROOT');
-    }
-
-    const instances = computed(() => data.value.connections.map((conn) => conn.name));
-
-    return {
-      data,
-      totalTime,
-      totalMemory,
-      showBacktraceModal,
-      backtrace,
-      backtraceIndex,
-      instances,
-
-      openBacktrace,
-      getEditorLink,
-
-      stateColor,
-      round,
-      replaceRoot,
-    }
-  }
-};
+const data = ref(null);
+
+async function updateData() {
+  const res = await $http.get('ajax/data?path=db');
+  data.value = res.data.data;
+}
+
+function totalTime(instance) {
+  return data.value?.queries[instance]?.reduce((sum, query) => {
+    return sum + query.time;
+  }, 0) * 1000;
+}
+
+function totalMemory(instance) {
+  return data.value?.queries[instance]?.reduce((sum, query) => {
+    return sum + query.memory;
+  }, 0) / 1024 / 1024;
+}
+
+const showBacktraceModal = ref(false);
+const backtrace = ref([]);
+const backtraceIndex = ref(0);
+
+function openBacktrace(trace, i) {
+  backtrace.value = trace;
+  backtraceIndex.value = i;
+  showBacktraceModal.value = true;
+}
+
+const editor = document.__data.editor;
+const sysPath = document.__data.systemPath;
+
+function getEditorLink(trace) {
+  return `${editor}://open?file=${trace.pathname}&line=${trace.line}`;
+}
+
+function replaceRoot(path) {
+  return path.replace(sysPath, 'ROOT');
+}
+
+const instances = computed(() => data.value.connections.map((conn) => conn.name));
 
 function round(num) {
   return Math.round(num * 100) / 100;
 }
+
+await updateData();
 </script>
 
 <style scoped>

package/src/debugger/views/Events.vue

@@ -22,90 +22,17 @@
 </DefaultLayout>
 </template>
 
-<script>
+<script setup>
 import { computed, ref } from 'vue';
 import EventListenersTable from '../components/events/EventListenersTable.vue';
 import DefaultLayout from '../layouts/DefaultLayout.vue';
 import $http from '../services/http.js';
-export default {
-  name: 'Events',
-  components: { EventListenersTable, DefaultLayout },
-  async beforeRouteEnter(to, from ,next) {
-    next(async (vm) => {
-      const res = await $http.get('ajax/data?path=events');
-      vm.data = res.data.data;
-    });
-  },
-  async beforeRouteUpdate(to, from ,next) {
-    const res = await $http.get('ajax/data?path=events');
-    this.data = res.data.data;
-  },
-  setup() {
-    const data = ref(null);
 
-    // const events = computed(() => {
-    //   const items = [];
-    //
-    //   for (const eventName in data.value) {
-    //     const listeners = data.value[eventName] || {};
-    //
-    //     for (const listenerName in listeners) {
-    //       const count = listeners[listenerName] || 0;
-    //
-    //       items.push({
-    //         event: eventName,
-    //         listener: listenerName,
-    //         count
-    //       });
-    //     }
-    //   }
-    //
-    //   return items;
-    // });
+const data = ref(null);
 
-    // const triggeredEvents = computed(() => {
-    //   const items = {};
-    //
-    //   for (const eventName in data.value) {
-    //     const listeners = data.value[eventName] || {};
-    //
-    //     for (const listenerName in listeners) {
-    //       const count = listeners[listenerName] || 0;
-    //
-    //       if (count > 0) {
-    //         items[eventName] = items[eventName] || {};
-    //         items[eventName][listenerName] = count;
-    //       }
-    //     }
-    //   }
-    //
-    //   return items;
-    // });
-    //
-    // const untriggeredEvents = computed(() => {
-    //   const items = {};
-    //
-    //   for (const eventName in data.value) {
-    //     const listeners = data.value[eventName] || {};
-    //
-    //     for (const listenerName in listeners) {
-    //       const count = listeners[listenerName] || 0;
-    //
-    //       if (count <= 0) {
-    //         items[eventName] = items[eventName] || {};
-    //         items[eventName][listenerName] = count;
-    //       }
-    //     }
-    //   }
-    //
-    //   return items;
-    // });
+const res = await $http.get('ajax/data?path=events');
+data.value = res.data.data;
 
-    return {
-      data,
-    };
-  }
-};
 </script>
 
 <style scoped>

package/src/debugger/views/Routing.vue

@@ -90,7 +90,7 @@
     <section class="l-section l-section--routes mt-5">
       <h3 class="mb-3">Routes</h3>
 
-      <table class="table table-bordered">
+      <table class="table table-dark table-bordered">
         <thead>
           <tr>
             <th>
@@ -113,7 +113,7 @@
 
         <tbody>
         <tr v-for="(route, name) of data.routing.routes"
-          :class="{ 'table-success': data.routing.matched?.name === route.name }">
+          :class="{ 'table-primary': data.routing.matched?.name === route.name }">
           <td>
             <code>{{ route.name }}</code>
           </td>

package/src/debugger/views/System.vue

@@ -54,7 +54,7 @@
       <div class="mt-5">
         <h4>Config</h4>
 
-        <pre class="bg-light p-3"><code>{{ JSON.stringify(data.config, null, 2) }}</code></pre>
+        <pre class="border rounded p-3"><code>{{ JSON.stringify(data.config, null, 2) }}</code></pre>
       </div>
     </div>
   </DefaultLayout>

package/src/install-vendors.mjs

@@ -1,9 +1,4 @@
-/**
- * Part of starter project.
- *
- * @copyright  Copyright (C) 2021 __ORGANIZATION__.
- * @license    __LICENSE__
- */
+
 
 import { src, symlink, copy } from '@windwalker-io/fusion';
 import { extractDest } from '@windwalker-io/fusion/src/utilities/utilities.js';
@@ -11,7 +6,7 @@ import { loadJson } from './utils.mjs';
 import path from 'path';
 import fs from 'fs';
 
-export async function installVendors(npmVendors, composerVendors = [], to = 'www/assets/vendor') {
+export async function installVendors(npmVendors = [], composerVendors = [], to = 'www/assets/vendor') {
   const root = to;
   let vendors = npmVendors;
   const action = process.env.INSTALL_VENDOR === 'hard' ? 'Copy' : 'Link';
@@ -30,7 +25,13 @@ export async function installVendors(npmVendors, composerVendors = [], to = 'www
     deleteExists(dir);
   });
 
-  vendors = findVendors(composerVendors).concat(vendors);
+  const composerJsons = getInstalledComposerVendors(composerVendors)
+    .map((cv) => `vendor/${cv}/composer.json`)
+    .map((file) => loadJson(file))
+    .filter((composerJson) => composerJson?.extra?.windwalker != null);
+
+  // Install npm vendors
+  vendors = findNpmVendors(composerJsons).concat(vendors);
   vendors = [...new Set(vendors)];
 
   vendors.forEach((vendor) => {
@@ -40,13 +41,27 @@ export async function installVendors(npmVendors, composerVendors = [], to = 'www
     }
   });
 
-  composerVendors.forEach((vendor) => {
-    if (fs.existsSync(`vendor/${vendor}/assets`)) {
-      console.log(`[${action} Composer] vendor/${vendor}/assets => ${root}/${vendor}/`);
-      doInstall(`vendor/${vendor}/assets/`, `${root}/${vendor}/`);
+  // Install composer packages assets
+  composerJsons.forEach((composerJson) => {
+    const vendorName = composerJson.name;
+
+    let assets = composerJson?.extra?.windwalker?.assets?.link;
+
+    if (!assets) {
+      return;
+    }
+
+    if (!assets.endsWith('/')) {
+      assets += '/';
+    }
+
+    if (fs.existsSync(`vendor/${vendorName}/${assets}`)) {
+      console.log(`[${action} Composer] vendor/${vendorName}/${assets} => ${root}/${vendorName}/`);
+      doInstall(`vendor/${vendorName}/${assets}`, `${root}/${vendorName}/`);
     }
   });
 
+  // Install local saved vendors
   console.log(`[${action} Local] resources/assets/vendor/**/* => ${root}/`);
   doInstall('resources/assets/vendor/*', `${root}/`);
 }
@@ -59,27 +74,41 @@ function doInstall(source, dest) {
   }
 }
 
-function findVendors(composerVendors = []) {
+function findNpmVendors(composerJsons = []) {
   const pkg = path.resolve(process.cwd(), 'package.json');
-
   const pkgJson = loadJson(pkg);
 
   let vendors = Object.keys(pkgJson.devDependencies || {})
     .concat(Object.keys(pkgJson.dependencies || {}))
     .map(id => `node_modules/${id}/package.json`)
     .map((file) => loadJson(file))
-    .filter(pkgJson => pkgJson.windwalker != null)
-    .map(pkgJson => pkgJson.windwalker.vendors || [])
+    .filter(pkgJson => pkgJson?.windwalker != null)
+    .map(pkgJson => pkgJson?.windwalker.vendors || [])
     .flat();
 
-  composerVendors.forEach((cv) => {
-    const composerManifest = `vendor/${cv}/composer.json`;
-    const composerJson = loadJson(composerManifest);
+  const vendorsFromComposer = composerJsons
+    .map((composerJson) => composerJson?.extra?.windwalker?.assets?.vendors || {})
+    .map((vendors) => Object.keys(vendors))
+    .flat();
 
-    vendors = vendors.concat(composerJson?.windwalker?.asset_vendors || []);
-  });
+  return [ ...new Set(vendors.concat(vendorsFromComposer)) ];
+}
+
+function injectNpmPackages(composerVendors = []) {
+
+}
 
-  return [ ...new Set(vendors) ];
+function getInstalledComposerVendors(composerVendors = []) {
+  const composerFile = path.resolve(process.cwd(), 'composer.json');
+  const composerJson = loadJson(composerFile);
+  
+  return [
+    ...new Set(
+      Object.keys(composerJson['require'] || {})
+        .concat(Object.keys(composerJson['require-dev'] || {}))
+        .concat(composerVendors)
+    )
+  ];
 }
 
 function deleteExists(dir) {

package/tsconfig.js.json

@@ -0,0 +1,15 @@
+{
+    "include": [
+        "types/index.d.ts"
+    ],
+    "exclude": [
+        "node_modules/**/*"
+    ],
+    "compilerOptions": {
+        "allowJs": true,
+        "module": "system",
+        "moduleResolution": "node",
+        "target": "es2020",
+        "skipLibCheck": true
+    }
+}

package/types/global.d.ts

@@ -0,0 +1,12 @@
+import '@windwalker-io/unicorn';
+import 'systemjs';
+import 'jquery';
+import 'axios';
+import boostrap from 'bootstrap';
+import * as vue from 'vue';
+
+declare global {
+  var S:  typeof System;
+  var bootstrap: typeof boostrap;
+  var Vue: typeof vue;
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+
+import './global';
+import './shims-sweetalert';
+import './unicorn';
+import './vendor';