Debounce autocomplete

2026-03-11 17:46:41 -05:00 · 2023-03-08 11:25:20 -08:00
parent 665dd8447d
commit f66b0ccea1
12 changed files with 117 additions and 33 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,11 +24,13 @@
        "@radix-ui/react-popover": "1.0.3",
        "@radix-ui/react-scroll-area": "^1.0.2",
        "@radix-ui/react-separator": "^1.0.1",
+        "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
        "@tanstack/react-query": "^4.24.10",
        "@tauri-apps/api": "^1.2.0",
        "classnames": "^2.3.2",
        "codemirror": "^6.0.1",
        "framer-motion": "^9.0.4",
+        "lodash": "^4.17.21",
        "parse-color": "^1.0.0",
        "parse-json": "^6.0.2",
        "react": "^18.2.0",
@@ -38,6 +40,7 @@
      },
      "devDependencies": {
        "@tauri-apps/cli": "^1.2.2",
+        "@types/lodash": "^4.14.191",
        "@types/node": "^18.7.10",
        "@types/parse-color": "^1.0.1",
        "@types/parse-json": "^4.0.0",
@@ -1934,6 +1937,35 @@
        "node": ">=10"
      }
    },
+    "node_modules/@tailwindcss/nesting": {
+      "version": "0.0.0-insiders.565cd3e",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
+      "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
+      "dependencies": {
+        "postcss-nested": "^5.0.5"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/@tailwindcss/nesting/node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
    "node_modules/@tanstack/query-core": {
      "version": "4.24.10",
      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.24.10.tgz",
@@ -2181,6 +2213,12 @@
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
    "node_modules/@types/node": {
      "version": "18.13.0",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
@@ -3358,7 +3396,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
      "bin": {
        "cssesc": "bin/cssesc"
      },
@@ -5270,8 +5307,7 @@
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
@@ -5397,7 +5433,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
      "bin": {
        "nanoid": "bin/nanoid.cjs"
      },
@@ -5729,8 +5764,7 @@
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
    "node_modules/picomatch": {
      "version": "2.3.1",
@@ -5768,7 +5802,6 @@
      "version": "8.4.21",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -5896,7 +5929,6 @@
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -6505,7 +6537,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -7035,8 +7066,7 @@
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
    "node_modules/uuid": {
      "version": "9.0.0",
@@ -8786,6 +8816,24 @@
      "dev": true,
      "optional": true
    },
+    "@tailwindcss/nesting": {
+      "version": "0.0.0-insiders.565cd3e",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
+      "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
+      "requires": {
+        "postcss-nested": "^5.0.5"
+      },
+      "dependencies": {
+        "postcss-nested": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+          "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+          "requires": {
+            "postcss-selector-parser": "^6.0.6"
+          }
+        }
+      }
+    },
    "@tanstack/query-core": {
      "version": "4.24.10",
      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.24.10.tgz",
@@ -8912,6 +8960,12 @@
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
+    "@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
    "@types/node": {
      "version": "18.13.0",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
@@ -9750,8 +9804,7 @@
    "cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
    },
    "csstype": {
      "version": "3.1.1",
@@ -11170,8 +11223,7 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "lodash.merge": {
      "version": "4.6.2",
@@ -11274,8 +11326,7 @@
    "nanoid": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
    },
    "natural-compare": {
      "version": "1.4.0",
@@ -11516,8 +11567,7 @@
    "picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
    "picomatch": {
      "version": "2.3.1",
@@ -11546,7 +11596,6 @@
      "version": "8.4.21",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
-      "dev": true,
      "requires": {
        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
@@ -11606,7 +11655,6 @@
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
      "requires": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -12017,8 +12065,7 @@
    "source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
    },
    "spawn-command": {
      "version": "0.0.2-1",
@@ -12404,8 +12451,7 @@
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
    "uuid": {
      "version": "9.0.0",
--- a/package.json
+++ b/package.json
@@ -31,11 +31,13 @@
    "@radix-ui/react-popover": "1.0.3",
    "@radix-ui/react-scroll-area": "^1.0.2",
    "@radix-ui/react-separator": "^1.0.1",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
    "@tanstack/react-query": "^4.24.10",
    "@tauri-apps/api": "^1.2.0",
    "classnames": "^2.3.2",
    "codemirror": "^6.0.1",
    "framer-motion": "^9.0.4",
+    "lodash": "^4.17.21",
    "parse-color": "^1.0.0",
    "parse-json": "^6.0.2",
    "react": "^18.2.0",
@@ -45,6 +47,7 @@
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.2.2",
+    "@types/lodash": "^4.14.191",
    "@types/node": "^18.7.10",
    "@types/parse-color": "^1.0.1",
    "@types/parse-json": "^4.0.0",
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,7 +1,7 @@
 module.exports = {
  plugins: [
+    require('@tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('autoprefixer'),
-    require('postcss-nesting')
  ]
 }
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-web/components/Editor/Editor.tsx
+++ b/src-web/components/Editor/Editor.tsx
@@ -67,7 +67,7 @@ export default function Editor({
  // Create codemirror instance when ref initializes
  useEffect(() => {
    if (ref.current === null) return;
-    console.log('INIT EDITOR');
+    // console.log('INIT EDITOR');
    let view: EditorView | null = null;
    try {
      const langHolder = new Compartment();
@@ -102,7 +102,7 @@ export default function Editor({
  // Update language extension when contentType changes
  useEffect(() => {
    if (cm === null) return;
-    console.log('UPDATE LANG');
+    // console.log('UPDATE LANG');
    const ext = getLanguageExtension({ contentType, useTemplating });
    cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
  }, [contentType]);
@@ -110,6 +110,7 @@ export default function Editor({
  return (
    <div
      ref={ref}
+      dangerouslySetInnerHTML={{ __html: '' }}
      className={classnames(
        className,
        'cm-wrapper text-base bg-background',
--- a/src-web/components/Editor/autocomplete.ts
+++ b/src-web/components/Editor/autocomplete.ts
@@ -0,0 +1,29 @@
+import { closeCompletion, startCompletion } from '@codemirror/autocomplete';
+import { EditorView } from 'codemirror';
+import { debounce } from 'lodash';
+
+/*
+ * Debounce autocomplete until user stops typing for `millis` milliseconds.
+ */
+export function debouncedAutocompletionDisplay({ millis }: { millis: number }) {
+  // TODO: Figure out how to show completion without setting context.explicit = true
+  const debouncedStartCompletion = debounce(function (view: EditorView) {
+    startCompletion(view);
+  }, millis);
+
+  return EditorView.updateListener.of(({ view, docChanged }) => {
+    // const completions = currentCompletions(view.state);
+    // const status = completionStatus(view.state);
+
+    // If the document hasn't changed, we don't need to do anything
+    if (!docChanged) return;
+
+    if (view.state.doc.length === 0) {
+      debouncedStartCompletion.cancel();
+      closeCompletion(view);
+      return;
+    }
+
+    debouncedStartCompletion(view);
+  });
+}
--- a/src-web/components/Editor/extensions.ts
+++ b/src-web/components/Editor/extensions.ts
@@ -33,6 +33,7 @@ import {
  rectangularSelection,
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
+import { debouncedAutocompletionDisplay } from './autocomplete';
 import { twig } from './twig/extension';
 import { url } from './url/extension';

@@ -107,7 +108,8 @@ export const baseExtensions = [
  drawSelection(),
  dropCursor(),
  bracketMatching(),
-  autocompletion({ closeOnBlur: true, interactionDelay: 200 }),
+  debouncedAutocompletionDisplay({ millis: 1000 }),
+  autocompletion({ closeOnBlur: true, interactionDelay: 200, activateOnTyping: false }),
  syntaxHighlighting(myHighlightStyle),
  EditorState.allowMultipleSelections.of(true),
 ];
--- a/src-web/components/Editor/twig/completion.ts
+++ b/src-web/components/Editor/twig/completion.ts
@@ -47,6 +47,7 @@ export function completions(context: CompletionContext) {
        label: toStartOfVariable ? `${openTag}${v.name}${closeTag}` : v.name,
        apply: `${openTag}${v.name}${closeTag}`,
        type: 'variable',
+        matchLen,
      }))
      // Filter out exact matches
      .filter((o) => o.label !== toMatch.text),
--- a/src-web/components/HeaderEditor.tsx
+++ b/src-web/components/HeaderEditor.tsx
@@ -37,7 +37,7 @@ export function HeaderEditor() {
  };

  return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} className="min-h-[30vh]">
      <VStack space={2}>
        {headers.map((header, i) => (
          <FormRow
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -131,7 +131,7 @@ export function ResponsePane({ requestId, className }: Props) {
            ) : response?.body ? (
              <Editor
                className="bg-gray-50 dark:!bg-gray-100"
-                valueKey={`${contentType}:${response.body}`}
+                valueKey={`${contentType}:${response.updatedAt}`}
                defaultValue={response?.body}
                contentType={contentType}
              />
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -22,7 +22,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
  const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
  const { appearance, toggleAppearance } = useTheme();
  const [open, setOpen] = useState<boolean>(false);
-  console.log('OPEN', open);
  return (
    <div
      className={classnames(className, 'w-52 bg-gray-100 h-full border-r border-gray-200')}
--- a/src-web/main.css
+++ b/src-web/main.css
@@ -26,7 +26,10 @@ html, body, #root {
 }

 * {
-    transition: background-color var(--transition-duration), border-color var(--transition-duration);
+    transition: background-color var(--transition-duration),
+    border-color var(--transition-duration),
+    box-shadow var(--transition-duration),
+;
 }

 /*.hide-scrollbar {*/