app-devtools 0.14.0 → 0.17.0

package/dist/main.js

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import { dequal } from 'dequal';
+import { produce as produce$1 } from 'immer';
 import { nanoid } from 'nanoid';
 import { parse } from 'regexparam';
 import * as diff from 'diff';
@@ -1445,7 +1446,7 @@ const colors = createThemeColors({
   black: "#000"
 });
 const fonts = {
-  primary: "Work Sans, sans-serif",
+  primary: '"Work Sans", sans-serif',
   decorative: '"Fira Code", monospaced'
 };
 
@@ -1481,8 +1482,11 @@ function createSignalRef(initialValue) {
     set value(newValue) {
       setValue(() => newValue);
     },
-    set(newValue) {
-      setValue(() => newValue);
+    produce(recipe) {
+      setValue((val) => produce$1(val, recipe));
+    },
+    peek() {
+      return untrack(value);
     }
   };
 }
@@ -1875,6 +1879,49 @@ function addCall(request) {
   };
 }
 
+const normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
+
+function searchQueryMatch(query, string) {
+  const queryIndex = normalizeString(String(string)).indexOf(
+    normalizeString(String(query))
+  );
+  return {
+    matched: queryIndex !== -1,
+    matchedIndex: queryIndex
+  };
+}
+
+function sortBy(arr, getPriority, { lowerFirst } = {}) {
+  return [...arr].sort((a, b) => {
+    const aPriority = getPriority(a);
+    const bPriority = getPriority(b);
+    if (aPriority < bPriority) {
+      return lowerFirst ? -1 : 1;
+    }
+    if (aPriority > bPriority) {
+      return lowerFirst ? 1 : -1;
+    }
+    return 0;
+  });
+}
+
+function searchItems({
+  items,
+  searchQuery,
+  getStringToMatch
+}) {
+  const searchedItems = [];
+  for (const item of items) {
+    const search = searchQueryMatch(searchQuery, getStringToMatch(item));
+    if (search.matched) {
+      searchedItems.push({ item, matchedIndex: search.matchedIndex });
+    }
+  }
+  return sortBy(searchedItems, (item) => item.matchedIndex, {
+    lowerFirst: true
+  }).map(({ item }) => item);
+}
+
 const _tmpl$$8 = /*#__PURE__*/template(`<div><h1>API EXPLORER</h1><label><input type="text" placeholder="Search"></label><div></div></div>`);
 const containerStyle$8 = u`
   &&& {
@@ -1933,12 +1980,10 @@ const searchStyle = u`
 const ApiExplorerMenu = () => {
   const search = createSignalRef('');
   const menuItems = createReconciledArray(() => {
+    const [callSearch = '', requestSearch = ''] = search.value.split('>');
     const callsEntries = Object.entries(callsStore.calls);
     const filtered = [];
     for (const [key, value] of callsEntries.reverse()) {
-      if (search.value.trim() && !value.name.includes(search.value.toLowerCase())) {
-        continue;
-      }
       const subitemsWithAlias = new Set();
       for (const request of value.requests) {
         if (request.alias) {
@@ -1947,11 +1992,26 @@ const ApiExplorerMenu = () => {
       }
       filtered.push({
         id: key,
-        subitemsWithAlias: [...subitemsWithAlias],
+        subitemsWithAlias: searchItems({
+          items: [...subitemsWithAlias],
+          searchQuery: requestSearch.trim(),
+          getStringToMatch(item) {
+            return item;
+          }
+        }),
         ...value
       });
     }
-    return filtered;
+    const searchedItems = searchItems({
+      items: filtered,
+      searchQuery: callSearch.trim(),
+      getStringToMatch(item) {
+        return item.name;
+      }
+    });
+    return sortBy(searchedItems, item => {
+      return item.requests.at(-1)?.startTime || 0;
+    });
   }, 'id');
   const _currentCallId = createMemo(() => uiStore.selectedCall);
   return (() => {
@@ -3472,9 +3532,58 @@ const Root = () => {
   return createComponent(App, {});
 };
 
+function getGoogleFontsImportUrl(fonts) {
+  let url = "";
+  fonts.forEach(({ family, weights, italics }) => {
+    url += `${url ? "&" : ""}family=${family}:`;
+    if (weights[1] === "..") {
+      url += `wght@${weights[0]}..${weights[2]}`;
+    } else {
+      url += "ital,wght@";
+      weights.forEach((value, i) => {
+        if (i !== 0) {
+          url += ";";
+        }
+        url += `0,${value}`;
+      });
+      italics?.forEach((value) => {
+        url += `;1,${value}`;
+      });
+    }
+  });
+  return `https://fonts.googleapis.com/css2?${url}&display=swap`;
+}
+
+let fontsWereAdded = false;
+function addGoogleFonts() {
+  if (fontsWereAdded)
+    return;
+  fontsWereAdded = true;
+  const googleFonts = getGoogleFontsImportUrl([
+    {
+      family: "Work+Sans",
+      weights: [300, "..", 700]
+    }
+  ]);
+  const headID = document.getElementsByTagName("head")[0];
+  const link = document.createElement("link");
+  link.type = "text/css";
+  link.rel = "stylesheet";
+  link.href = googleFonts;
+  headID?.appendChild(link);
+}
+
 let unmount = () => {};
+let isInitialized = false;
 function initializeApp() {
   dayjs.extend(relativeTime);
+  if (isInitialized) {
+    unmountApp();
+    isInitialized = false;
+    return;
+  }
+  isInitialized = true;
+  addGoogleFonts();
   if (navigator.platform.indexOf('Win') > -1) {
     document.body.classList.add('windows');
   }
@@ -3493,11 +3602,11 @@ function initializeDevTools({
 }) {
   tinykeys(window, {
     [shortcut]: (e) => {
-      e.preventDefault();
       const active = document.activeElement;
       const enteringText = active instanceof HTMLElement && (active.isContentEditable || active.tagName === "INPUT" || active.tagName === "TEXTAREA");
       if (enteringText)
         return;
+      e.preventDefault();
       initializeApp();
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-devtools",
-  "version": "0.14.0",
+  "version": "0.17.0",
   "description": "",
   "packageManager": "pnpm@6.29.1",
   "license": "MIT",
@@ -24,6 +24,7 @@
     "dayjs": "^1.11.7",
     "dequal": "^2.0.3",
     "diff": "^5.1.0",
+    "immer": "^9.0.19",
     "klona": "^2.0.6",
     "nanoid": "^4.0.1",
     "regexparam": "^2.0.1",