Giter VIP home page Giter VIP logo

starter's Introduction

language-tools-starter

This is a template for building Embedded Language Tools based on Volar Framework.

If you're working on something like this, you probably started with VSCode's Embedded Programming Languages chapter. If not, I strongly suggest you read it carefully first.

The article mentions two methods to implement Embedded Language support. This template belongs to the extension of the "Language Server for Embedded Language with Language Services" method, but we abstract all the places you don't need to care about, such as virtual code mapping, formatting edits merge etc.

Same with the article, this template uses .html1 as an example to implement embedded HTML and CSS support.

Tools

  • pnpm: monorepo support
  • esbuild: bundle extension

Running the Sample

  • Run pnpm install in this folder. This installs all necessary npm modules in both the client and server folder
  • Open VS Code on this folder.
  • Press Ctrl+Shift+B to compile the client and server.
  • Switch to the Debug viewlet.
  • Select Launch Client from the drop down.
  • Run the launch config.
  • If you want to debug the server as well use the launch configuration Attach to Server
  • In the [Extension Development Host] instance of VSCode, open a test.html1
    • Type <d| to try HTML completion
    • Type <style>.foo { c| }</style> to try CSS completion
    • Have <style>.foo { }</style> to see CSS Diagnostics

Build .vsix

  • Run pnpm run pack in this folder
  • packages/vscode/vscode-html1-0.0.1.vsix will be created, and you can manual install it to VSCode.

References

starter's People

Contributors

adriangonz97 avatar johnsoncodehk avatar remcohaszing avatar suica avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

starter's Issues

Sample does not handle TS correctly

Hi,

Just wanted to let you know that the starter-sample does not handle TS:
image

The issue seems to be that typescript does not 'know' the file-extension. Breakpoint inside typescript.js:
image
message: 'File .../starter/sample/test.html1 has unknown extension.'

The Readme.md does not say it supports TS either, probably a good idea to update it :)

//E

`TypeError:` Cannot read properties of undefined (reading 'roots')

Got this error from launched client on fresh installation.

TypeError: Cannot read properties of undefined (reading 'roots')
    at Nu.createEmbeddedCodes (d:\html1\language-tools\packages\vscode\dist\server.js:1093:39919)
    at createEmbeddedCodes.next ()
    at new Nu (d:\html1\language-tools\packages\vscode\dist\server.js:1093:39731)
    at Object.createVirtualCode (d:\html1\language-tools\packages\vscode\dist\server.js:1093:39040)
    at Object.set (d:\html1\language-tools\packages\vscode\dist\server.js:2:11051)
    at d:\html1\language-tools\packages\vscode\dist\server.js:75:5729
    at Object.get (d:\html1\language-tools\packages\vscode\dist\server.js:2:10370)
    at fx (d:\html1\language-tools\packages\vscode\dist\server.js:2:30946)
    at E5 (d:\html1\language-tools\packages\vscode\dist\server.js:2:30811)
    at Object.findDocumentSymbols (d:\html1\language-tools\packages\vscode\dist\server.js:2:67746)

Bad `umd2esm` plugin in `build.js` script

Description

build.onResolve({ filter: /^(vscode-.*|estree-walker|jsonc-parser)/ }, args => {
const pathUmdMay = require.resolve(args.path, { paths: [args.resolveDir] })
// Call twice the replace is to solve the problem of the path in Windows
const pathEsm = pathUmdMay.replace('/umd/', '/esm/').replace('\\umd\\', '\\esm\\')
return { path: pathEsm }
})

The code above will convert umd imports to esm by replacing "umd" with "esm" in the filepath.

However, the path generated no longer work for vscode-uri as of 3.0.8.
The path for umd import is "lib/umd/index.js", but the path for esm import is "lib/esm/index.mjs". As the script replaces "lib/umd/index.js" with "lib/esm/index.js", esbuild fails to resolve the esm import.

Reference to the commit that changes the export path for esm: microsoft/vscode-uri@53e4ca6#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R9

See the error my Github Action that builds my VSCode extension : https://github.com/bywhitebird/kazam/actions/runs/6483646531/job/17608453201#step:5:218

Steps to Reproduce

Use vscode-uri>=3.0.8.

Solutions

I managed to build my VSCode extension with this code:

build.onResolve({ filter: /^(vscode-.*|estree-walker|jsonc-parser)/ }, (args) => {
  const pathUmdMay = require.resolve(args.path, { paths: [args.resolveDir] })
  // Call twice the replace is to solve the problem of the path in Windows
  let pathEsm = pathUmdMay.replace('/umd/', '/esm/').replace('\\umd\\', '\\esm\\')

  // Try to resolve the path
  // If it fails, if the file extension is .js, try to replace it with .mjs
  try {
    require.resolve(pathEsm, { paths: [args.resolveDir] })
  }
  catch {
    if (pathEsm.endsWith('.js'))
      pathEsm = pathEsm.replace(/\.js$/, '.mjs')
  }

  return { path: pathEsm }
})

This code tries to resolve the new path. If it fails, it tries to resolve the import by replacing .js with .mjs.

It works, but I think it is still not robust enough. Another solution might be considered.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.