vscode ts plugins: fix auto-import

[leonidaz]

fixes #437

[vercel]

@leonidaz is attempting to deploy a commit to the Ripple Team Team on Vercel.

A member of the Team first needs to authorize it.

[pkg-pr-new]

vite-template-ripple

create-ripple

pnpm add https://pkg.pr.new/create-ripple@439

prettier-plugin-ripple

pnpm add https://pkg.pr.new/prettier-plugin-ripple@439

ripple

pnpm add https://pkg.pr.new/ripple@439

rollup-plugin-ripple

pnpm add https://pkg.pr.new/rollup-plugin-ripple@439

vite-plugin-ripple

pnpm add https://pkg.pr.new/vite-plugin-ripple@439

commit: 8c50971

[WebEferen]

LGTM 🙌 Nice one!

[Yusyuriv]

Looks to me like neither Ripple diagnostics nor any TypeScript features work in VS Code when the extension is built from this PR.

The language server works like it did before in WebStorm.

[leonidaz]

i'm still trying to figure it out... not final yet.

[leonidaz]

@Yusyuriv

could you give a code example for the menu to show up and also, where do they show up, under what circumstances.

[Yusyuriv]

Not sure what you mean by menu, I was referring to highlighting errors. Just a basic component without importing track should display the error:

export component App() {
	let color = track('red');
	
	<div>{@color}</div> 
}

[leonidaz]

Looks to me like neither Ripple diagnostics nor any TypeScript features work in VS Code when the extension is built from this PR.

very strange, it's working for me. when i remove the import, the track gets red squiggly underline.

[Yusyuriv]

Could you describe how you installed the extension after you made the changes?

[leonidaz]

I'm just launching it in the debugger.

here's my .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Ripple Extension",
      "type": "extensionHost",
      "request": "launch",
      "autoAttachChildProcesses": true,
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}/packages/ripple-vscode-plugin/",
        "${workspaceFolder}/playground"
      ],
      "outFiles": [
        "${workspaceFolder}/packages/ripple-vscode-plugin/src/**/*.js"
      ],
      "sourceMaps": false
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Language Server",
      "port": 9229,
      "restart": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ],
  "compounds": [
    {
      "name": "Extension + Language Server",
      "configurations": ["Run Ripple Extension", "Attach to Language Server"]
    }
  ]
}

[Yusyuriv]

Sorry, you're right, it does seem to work in dev mode. Maybe there's an issue with how I was building the extension.

There's still an issue with WebStorm not providing auto imports and other TypeScript features, but I'm now thinking it could be related to the plugin I use to be able to use language servers (LSP4IJ), so we might need to build a plugin for the IntelliJ platform after all.

Either way, I tested this branch in VS Code and Sublime Text and it works in both, so I think it's good to go, and I'll try to figure out WebStorm stuff later.

[leonidaz]

we're basically now bypassing this custom language plugin and going directly to Volar. I'm not sure why it was needed and what it's giving us that's different.

we can revisit but i don't know how to connect it properly or if it's even functioning correctly.

[trueadm]

@johnsoncodehk does this look okay to you? You created Volar, so you might know best here :P

[johnsoncodehk]

Not tested yet, but after a quick review, I believe the current changes will cause the VSCode extension to break. You should use vsce package to package the extension and test it in projects other than the playground.

By the way, there is a PR in the volar.js repo attempting to fix this issue on the volar side: volarjs/volar.js#281

[leonidaz]

we're basically now bypassing this custom language plugin and going directly to Volar. I'm not sure why it was needed and what it's giving us that's different.

we can revisit but i don't know how to connect it properly or if it's even functioning correctly.

actually, this above is wrong, we are using it. The problem was that we were doing it twice.

and I removed this from package.json

    "typescriptServerPlugins": [
      {
        "name": "typescript-plugin-ripple",
        "enableForWorkspaceTypeScriptVersions": true,
        "configNamespace": "typescript",
        "languages": [
          "ripple"
        ]
      }
    ],

then, the proxy was not forwarding correctly the calls to volar.

and we were missing in volar data mapping, i didn't find providing our own.

codeActions: true,
formatting: true,
rename: true,

and then we had to enable import mappings as it looks like volar behavior is broken.

[leonidaz]

this is done automatically by vscode since 2022, we don't need it.

[trueadm]

Let's get this in