Better imenu to show functions and data

[vindarel]

Hi, Currently the imenu shows some html tags. I'd like it to show javascript functions, and possibly different sub-menus for computed properties or methods.

I tried something but it is unclear to me how to add regular imenu entries.

I have a regexp, checked with the regexp-builder:

(setq imenu-generic-expression
         '(("methods" "^\\s-*\\([a-zA-Z0-9_]+\\): function" 1)))

I don't know how to override the existing entries and use just that. I tried:

(add-hook 'vue-mode-hook
       (lambda ()
          (set (make-local-variable imenu-generic-expression)
               '(("methods" "^\\s-*\\([a-zA-Z0-9_]+\\): function" 1))
                 )))

as discussed on emacswiki and SE and as seen in a couple of other packages, with no luck.

An example file:

    data: function() {
      return {
        page: 1,
      };
    },

    props: {
      title: String,
      url: String,
    },

    computed: {
      entries() {
        log("hello");
      },

    methods: {
      previousPage: function () {
        // ...
      },

there would be functions and data to catch, hence a few imenu regexps to write.

Any ideas ?

imenu doc: https://www.gnu.org/software/emacs/manual/html_node/elisp/Imenu.html

edit: I tried what you can see in the following commit.

[AdamNiederer]

Hello,

I'm pretty unfamiliar with imenu's programming interface, but I agree that it'd be a useful addition, especially because newer extensions like treemacs are so reliant on it. Perhaps we could hijack the submodes' imenu entries for ourselves? I'd definitely be open to any ideas on that front.

[vindarel]

Perhaps we could hijack the submodes' imenu entries for ourselves?

well thought, but I guess it would not be the best, because we'd like to catch vue specific stuff (props, which is not a function) and cleanly organize the imenu: a section for html tags, a section for computed properties, for methods,…

I had a look at this to see how it's done: https://github.com/elixir-editors/emacs-elixir/blob/master/elixir-mode.el#L60

I'll explain what I understood so far, it may help me too :)

("methods" "^\\s-*\\([a-zA-Z0-9_]+\\): function" 1)

• methods: the name of an imenu section
• the regexp. What's catched by the parens (\\( and \\)) will appear in the imenu entry. So, we try to catch the function name but not "function".
• 1 is an index: "a non-negative integer that indicates which subexpression in regexp matches the definition's name." I want to catch the first group of parens, so I put 1 (and verification with elixir-mode's code).

[vindarel]

Note: there's a pb on my side, I could not see imenu entries in web-mode before I loaded it in emacs -Q. It already shows all the JS functions that are present.

Adding menus for data, props, computed and methods would be added sugar.

[brentreeves]

Apologies if out-of-context... vindarel - could you please elaborate "could not see imenu entries in web-mode before I loaded it". In blee.vue, in

[vindarel]

I could not see imenu entries because it seems there was a problem on my side. Indeed, I saw imenu entries without my elisp config, by starting Emacs with emacs -Q.

Now apologies that I didn't link earlier to the related imenu-mode discussion: https://github.com/fxbois/web-mode/issues/886#issuecomment-379514883 With the help of JJPandari we are approaching useful imenu additions for vue files. I wasn't able to submit a patch yet.

in

My issue isn't related to completion though.