Debugging java/typescript in nodejs with dap

[relief-melone]

I am currently trying to switch to vim using nixvim which was a breeze so far even tough i am not only new to nixvim but vim in general. However at the moment I am stuck trying to get debugging up and running. I tried multiple approaches with packer that are close to what I found online for regular nvim setups but failed. Now I tried to move forward from error message to error message. However at the moment I am stuck without being able to move forward. This is what I have set up so far

 #...
  plugins = {

      packer = {
        enable = true;
        plugins = [
        { 
          name = "mxsdev/nvim-dap-vscode-js"; 
          module = "dap-vscode-js";
          cmd = "
            require(\"dap-vscode-js\").setup({
              debugger_path = \"(runtimedir)/site/pack/packer/opt/vscode-js-debug\",
              adapters = { 'chrome', 'pwa-node', 'pwa-chrome', 'pwa-msedge', 'node-terminal', 'pwa-extensionHost', 'node', 'chrome' },
            })
          ";
        }
        ];
      };

      dap = {
        enable = true;
        adapters = {
          executables = {
            "pwa-node" = "node";
          };
          servers = {
            "pwa-node" = {
            
            };
          };
        };
        configurations = {
          "typescript" = [
            {
              type = "pwa-node";
              request = "launch";
              name = "Launch file";
              program = "\${file}";
              cwd = "\${workspaceFolder}";
            }
          ];
          "javascript" = [{
            type = "pwa-node";
            request = "launch";
            name = "Launch file";
            program = "\${file}";
            cwd = "\${workspaceFolder}";
          }];
        };
      };
  };

I can set breakpoints and dap in general seems to work. However when I try to start a debug session I receive this error

Adapter used with attach must have a port property

Now I know that especially the part around dap.adapters is pretty much nonsense in my config. However I was not able to find any helpful info (at least that I could understand) online nor could I make something of the source code that would help me further. I'd be very happy if someone could help me out and point me into the right direction. In any case nixvim is great work and I've been enjoying it very much being able to configure everything in the "nix way"

[traxys]

Here are some general nixvim tips, but I don't know about the question exactly though :/

I'd suggest looking around the nvim-dap-vscode-js repo for more information on that :/

I'd suggest avoiding packer if you use nixvim, to use plugins not packaged in nixvim itself you can add them to extraPlugins as follows: extraPlugins = [(pkgs.fetchFromGitHub { owner = "mxsdev"; repo = "nvim-dap-vscode-js"; rev = "<git hash>"; hash = "<correct nix hash>"; })]

If using flakes you can also add plugins to your nix flake inputs.
I'd also suggest to use extraConfigLua to add your config.

You can do:

extraConfigLua = ''
  require("dap-vscode-js") ...
'';

(Notice that with '' quotes you don't need escape " quotes)

[relief-melone]

Thank you. That helps. Will fiddle a bit with those tips and get back.

[relief-melone]

So the extraConfigLua helped me out. That did get me 90% of the way. this is what my config looks like now

extraPlugins = [(
      pkgs.fetchFromGitHub {
        owner = "mxsdev";
        repo = "nvim-dap-vscode-js";
        rev = "e7c05495934a658c8aa10afd995dacd796f76091";
        sha256 = "sha256-lZABpKpztX3NpuN4Y4+E8bvJZVV5ka7h8x9vL4r9Pjk=";
      }
    )];

    extraConfigLua = ''
      require("dap-vscode-js").setup({
        adapters = { 'pwa-node', 'pwa-chrome', 'pwa-msedge', 'node-terminal', 'pwa-extensionHost' },
      })

      for _, language in ipairs({ "typescript", "javascript" }) do
        require("dap").configurations[language] = {
          {
            type = "pwa-node",
            request = "launch",
            name = "Launch file",
            program = "''${file}",
            cwd = "''${workspaceFolder}",
          },
          {
            type = "pwa-node",
            request = "attach",
            name = "Attach",
            processId = require'dap.utils'.pick_process,
            cwd = "''${workspaceFolder}",
          }
        }
      end
    '';


    plugins = {

      packer = {
        enable = true;
        plugins = [
        {
          name = "microsoft/vscode-js-debug";
          opt = true;
          run = "npm install --legacy-peer-deps && npx gulp vsDebugServerBundle && mv dist out";
        }];
      };
#...

Now I guess the reason for avoiding packer is that it is not really deterministic and I need to run :PackerSync right? Would also like to get rid of this then. However there is a section in the documentation of nvim-dap-vscode-js that I also need to fetch and build microsoft/vscode-js-debug. Fetching it can be easily done with pkgs.fetchFromGitHub as well I guess. But do you also know how I could substitute the opt and run portions of the plugin configuration?

[traxys]

For the run portions you would need to do a full blown derivation with pkgs.buildVimPlugin, you can then add a

buildPhase = ''
# bash code
'';

To perform what you want. This is a full blown nix package, you can take inspiration from how other plugins are managed in: https://github.com/NixOS/nixpkgs/blob/master/pkgs/applications/editors/vim/plugins/overrides.nix

You can look for one using npm

[relief-melone]

in pkgs I could only find pkgs.vimUtils.buildVimPlugin. However passing the extraPlugin to that function did not work. Am I using the right buildVimPlugin then? Don't want too keep you too long with this problem. Will also try to figure out some more stuff myself in parallel :D Thank you very much so far.
My setup is definately working already and nvim-dap-ui was also already available as a prepackaged vimPlugin so that is working as well. However I am still very interested in "doing it right" and move away from the packer approach

[traxys]

Yeah it should be the right function. you should do src = fetchFromGitHub .... in that function

[relief-melone]

alright. Thanks again for the help. I have been able to set up the configuration in the meantime with your help. If someone has the same challenges as I had. Here is my current config for typescript

{ pkgs, ... }: 
let
  nvim-dap-vscode-js = pkgs.vimUtils.buildVimPlugin {
    name = "vim-dap-vscode-js";
    src = pkgs.fetchFromGitHub {
      owner = "mxsdev";
      repo = "nvim-dap-vscode-js";
      rev = "e7c05495934a658c8aa10afd995dacd796f76091";
      sha256 = "sha256-lZABpKpztX3NpuN4Y4+E8bvJZVV5ka7h8x9vL4r9Pjk=";
    };
  };
in
{

  programs.nixvim = {
    plugins.dap = {
      enable = true;
      extensions = {
        dap-ui.enable = true;
        dap-virtual-text.enable = true;
      };
    };

    plugins.lsp = {
      enable = true;
      tsserver.enable = true;
      eslint.enable = true;
    };

    plugins.nvim-cmp = {
      enable = true;
      autoEnableSources = true;
      sources = [
        { name = "nvim_lsp"; }
        { name = "path"; }
        { name = "buffer"; }
      ];
    };

    extraPlugins = [
      nvim-dap-vscode-js
    ];

    keymaps = [      
      # Dap
      { mode = "n"; action = "<cmd>DapToggleBreakpoint<cr>";  key = "<leader>b"; }
      { mode = "n"; action = "<cmd>DapContinue<cr>"; key = "<F5>"; }
      { mode = "n"; action = "<cmd>DapStepOver<cr>"; key = "<F10>"; }
      { mode = "n"; action = "<cmd>DapStepInto<cr>"; key = "<F11>"; }
      { mode = "n"; action = "<cmd>DapStepOut<cr>"; key = "<F12>"; }
      { mode = "n"; action = "<cmd>lua function() require 'dap'.set_breakpooint(vim.fn.input('Breakpoint condition: '))<cr>"; key = "<leader>B"; }

      # Dap-ui
      { mode = "n"; action = "<cmd>lua require(\"dapui\").toggle()<cr>"; key = "<leader>d"; }

      # LSP
      { mode = "n"; action = "<cmd>lua vim.lsp.buf.rename()<cr>"; key="<F2>"; }
      { mode = "n"; action = "<cmd>lua vim.lsp.buf.hover()<cr>"; key="<leader>h"; }
    ];


    extraConfigLua = ''
      local dap, dapui = require("dap"), require("dapui")
      local dap_vscode_js = require("dap-vscode-js")
      -- DEBUG LISTENERS
      dap.listeners.before.attach.dapui_config = function()
        dapui.open()
      end
      dap.listeners.before.launch.dapui_config = function()
        dapui.open()
      end
      dap.listeners.before.event_terminated.dapui_config = function()
        dapui.close()
      end
      dap.listeners.before.event_exited.dapui_config = function()
        dapui.close()
      end

      dap.set_log_level('DEBUG')

      -- DEBUG VS CODE
      dap_vscode_js.setup({
        adapters = { 'pwa-node', 'pwa-chrome', 'pwa-msedge', 'node-terminal', 'pwa-extensionHost' }
      })

      -- DEBUG CONFIG TYPESCRIPT
      dap.configurations.typescript = {
        {
          type = "pwa-node",
          request = "launch",
          name = "Launch file",
          program = "''${file}",
          cwd = "''${workspaceFolder}",
        },
        {
          type = "pwa-node",
          request = "attach",
          name = "Attach",
          processId = require'dap.utils'.pick_process,
          cwd = "''${workspaceFolder}",
        },
        {
          type = "pwa-node",
          request = "launch",
          name = "Run Application",
          program = "dist/index.js",
          cwd = "''${workspaceFolder}",
        },
        {
          type = "pwa-node",
          request = "launch",
          name = "Run npm test",
          program = "node_modules/mocha/bin/_mocha",
          cwd = "''${workspaceFolder}",
        }
      }
    '';
  };
}