Test case for emacs27 + lsp + vue + vls problem

README.md

Install

• Use recent nightly Emacs 27 with libjansson support (native JSON)
• Install Node v10 or later (with npm)
• Run this:

npm install

Run test

emacs -q -l test-init.el test.vue

• In the buffer, go to the blank line in foo and type: d3. and wait
• You should see lots of completions in the popup, starting with version
• While the completion popup is there, type slowly: 's', 'c', 'a'.
• Notice the completions narrow to the ones with those letters, and it gets fast.
• But now: backspace back to the "."
• and type 's', then 'c', then 'a' again -- you'll see the completions don't narrow anymore, and each letter takes a long time to echo to the screen.
• Do M-x normal-mode to reset; repeat the test and it'll be OK again, until you backspace a few times, then it'll be slow again.

package.json

{
  "name": "vls-lsp-problem",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gary",
  "license": "MIT",
  "dependencies": {
    "@types/d3": "^5.7.2",
    "d3": "^5.12.0"
  }
}

test-init.el

(require 'package)
(package-initialize)
(require 'use-package)
(setq use-package-verbose t
      use-package-always-ensure t)

;;(global-font-lock-mode 0)

;;; Vue mode, based on mmm-mode -- set up for .vue files (html/css/script)
(use-package vue-mode
  :mode "\\.vue$"
  :config
  (setq mmm-submode-decoration-level 0) ; don't color background of sub-modes
  )

(use-package yasnippet
  :config (yas-global-mode))

(use-package lsp-mode
  :commands lsp
  :hook ((vue-mode . lsp)
         (typescript-mode . lsp)
         (python-mode . lsp))
  :config
  (setq lsp-prefer-flymake nil
        lsp-log-io t
        lsp-trace t
        lsp-print-performance t
        lsp-response-timeout 20
        )
  )
(use-package lsp-ui
  :commands lsp-ui-mode
  :hook (lsp-mode . lsp-ui-mode)
  :config
  (setq lsp-ui-doc-enable t
        lsp-ui-doc-use-childframe t
        lsp-ui-doc-position 'top
        lsp-ui-doc-include-signature t
        lsp-ui-sideline-enable nil
        lsp-ui-flycheck-enable t
        lsp-ui-flycheck-list-position 'right
        lsp-ui-flycheck-live-reporting t
        lsp-ui-peek-enable t
        lsp-ui-peek-list-width 60
        lsp-ui-peek-peek-height 25
        )
  )
(use-package company-lsp
  :config
  (push 'company-lsp company-backends)
  (setq company-lsp-async t
        company-lsp-cache-candidates 'auto ; don't use nil or t
        company-lsp-match-candidate-predicate #'company-lsp-match-candidate-flex
        )
  )

test.vue

<template>
</template>

<script lang="ts">
import * as d3 from 'd3'
  function foo() {

  }
  function bar() {
    foo()
  }
</script>

<style>
</style>

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitReturns": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "vuetify",
      "jest",
      "dom-inputevent"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/unit/**/*.spec.ts",
    "tests/unit/**/*.spec.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "typedocOptions": {
    "exclude": "**/.#*",
    "out": "docs"
  }
}