beyond lsp
play

Beyond LSP Getting Your Language into Theia and VS Code Dr. Jan - PowerPoint PPT Presentation

Aug 16, 2022 •225 likes •625 views

Beyond LSP Getting Your Language into Theia and VS Code Dr. Jan Khnlein @jankoehnlein The Goal Custom domain-specific language Rich text editor support With diagram support as VS Code Extension! 2 VS Code... Isn't this

  1. Beyond LSP Getting Your Language into Theia and VS Code Dr. Jan Köhnlein @jankoehnlein

  2. The Goal • Custom domain-specific language • Rich text editor support • With diagram support as VS Code Extension! 2

  3. VS Code... Isn't this EclipseCon ??? 3

  4. Why VS Code Extension • >50% IDE market share • VS Code extensions run in Eclipse Theia • new default providing language support • Theia is the base for all the fancy new web-IDEs 4

  5. VS Code Extension Extension Config Language Server Manifest Editor Config Language Server Language Server CLI 🐠 🐠 Syntax Highlighting Diagram Language Snippets Diagram Generator Grammar Server LSP Sprotty JSON Java/Xtend Extension Code Diagram Webview 🐠 🐠 (De-)activation Language Client DI config Views JSON LSP Extension 🐠 🐠 Sprotty VS Code VS Code Diagram Server TS TS TS VSIX 5

  6. VS Code Extension Extension Config Manifest Editor Config Syntax Highlighting Snippets Grammar JSON VSIX 6

  7. Extension Manifest // package.json { "name": "states-extension", • NPM package.json "displayName": "States Example", "description": "An Xtext-based DSL with Sprotty diagrams for statemachines", • extension metadata "publisher": "TypeFox", "repository": { • dependencies "type": "git", "url": "https://github.com/TypeFox/sprotty-vscode" • scripts }, "version": "0.0.20", • VS Code specific extensions "files": [ "syntaxes" ], "scripts": { • commands, keybindings, menu entries... "publish": "vsce publish" } • activation events "engines": { "vscode": "^1.46.0" }, "categories": [ • entry module "Programming Languages" ], • language registration "contributes": { "languages": [{ • file extensions "id": "states", "aliases": [ "states", "sm" ], • editor configuration "extensions": [ ".sm" ], "configuration": "./language-configuration.json" • highlighting grammar }], "grammars": [{ • snippets "language": "states", "scopeName": "source.sm", "path": "./syntaxes/states.tmLanguage.json" }] } } 7

  8. TextMate Grammar • grammar für syntax highlighting • uses regular expressions to map to styles // states.tmLanguage.json { "name": "States DSL", "scopeName": "source.sm", "fileTypes": [ "sm" ], "patterns": [ { "include": "#comments" }, { "name": "keyword.control.states", "match": "\\b(statemachine|state|event|=>)\\b"}, { "name": "keyword.operator.states", "match": "\\=\\>" }, { "name": "string.quoted.double.states", "begin": "\"", "end": "\""}, ], "repository": { "comments": { "patterns": [{ "name": "comment.block.states", "begin": "/\\*", "beginCaptures": { "0": { "name": "punctuation.definition.comment.states" } }, "end": "\\*/", "endCaptures": { "0": { "name": "punctuation.definition.comment.states" } } }, .... 8

  9. Demo: Declarative Language Services 9

  10. Language Server Protocol Language Server Language Server LSP Java/Xtend Extension Code Language Client 10

  11. Using Xtext to Generate a LS // States.xtext grammar io.typefox.examples.theia.states.States with org.eclipse.xtext.common.Terminals Language Server generate states "http://www.typefox.io/States" Language Server Start Scripts StateMachine: 'statemachine' name=ID (states+=State | events+=Event)*; State: 'state' name=ID transitions+=Transition*; Java/Xtend Event: 'event' name=ID; Transition: event=[Event] '=>' state=[State]; 11

  12. VS Code Extension Extension Config Language Server Manifest Editor Config Language Server Start Scripts Syntax Highlighting Snippets Grammar LSP JSON Java/Xtend Extension Code (De-)activation Language Client TS VSIX 12

  13. Extension Activation // package.json • Registration (JSON) • activation events { "name": "states-extension", • entry module ... "activationEvents": [ "onLanguage:states" ], "main": "./pack/states-extension", ... } // states-extension.ts • Code (TypeScript) export function activate(context: vscode.ExtensionContext) { • (de-)activation functions // start the language server and connect it } export function deactivate(): Thenable<void> { // disconnect and stop the language server } 13

  14. Demo 14

  15. VS Code Webview • Generic VS Code GUI component • Separate IFRAME in the DOM • can use arbitrary web frameworks • runs a separate web-application • communicates with extension via JSON objects • Runs the diagram client app 15

  16. Extension Code Diagram Webview JSON TS 16

  17. Sprotty • web-based diagramming framework Sprotty Client • reactive architecture Command • client server separation CommandStack • We use Actions • sprotty: diagram client code SModel ActionDispatcher • sprotty-xtext: extend Xtext LSPs with diagrams • sprotty-vscode: glue code to integrate with VS Code Action Viewer 17

  18. Sprotty – SModel • diagram model SGraph • serializable as JSON • cross-references via IDs • extensible SNode SNode SEdge SPort SCompartment SLabel SLabel 18

  19. Sprotty – Webview application • DI container defines // di.config.ts • custom services / configs • mapping of SModel to views const statesDiagramModule = new ContainerModule(() => { rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope(); • behavior using features rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn); rebind(TYPES.IModelFactory).to(StatesModelFactory); ... configureModelElement(context, 'graph', SGraph, SGraphView, { enable: [hoverFeedbackFeature, popupFeature] }); configureModelElement(context, 'node', SNode, RectangularNodeView); configureModelElement(context, 'label', SLabel, SLabelView); configureModelElement(context, 'edge', SEdge, PolylineArrowEdgeView); configureModelElement(context, 'html', HtmlRoot, HtmlRootView); ... }); 19

  20. Diagram Webview 🐠 🐠 DI config Views TS 20

  21. Language Server 🐠 🐠 Diagram Language Diagram Generator Server LSP Sprotty Java/Xtend Extension Code Diagram Webview 🐠 🐠 Language Client DI config Views TS TS TS 21

  22. sprotty-xtext – Language Server Integration • extends LSP Diagram Webview • adds LSP notifications Command • accept(Action) CommandStack • dispatch(Action) Xtext LS • LanguageServer replaced by Actions DiagramLanguageServer SModel Diagram Server ActionDispatcher • hooks a DiagramGenerator into Xtext model lifecycles Diagram Generator Action Viewer 22

  23. sprotty-xtext – DiagramGenerator • maps Xtext model elements to Sprotty model • on text changes StateMachine SGraph • Xtext model is reparsed • new Sprotty model is created State SNode Transition SEdge Event SLabel 23

  24. Language Server 🐠 🐠 Diagram Language Diagram Generator Server LSP Sprotty Java/Xtend Extension Code Diagram Webview 🐠 🐠 Language Client DI config Views LSP Extension 🐠 Diagram Server 🐠 Sprotty VS Code JSON VS Code TS TS TS VSIX 24

  25. sprotty-vscode – Wiring it Up • Glue code for using Sprotty in VS Code • abstracts internal communication • VscodeDiagramServer • webview side • exchanges actions with the extension • Sprotty VS Code Extension • webview management • extension side • exchanges LSP messages with the LanguageClient • exchanges Actions with the webview • converts between Sprotty LSP messages and Actions 25

  26. Language Server generates new SModel 🐠 🐠 Diagram Language Diagram Generator Server LSP Sprotty Extension Code Diagram Webview Language Client JSON LSP Extension 🐠 Diagram Server 🐠 Sprotty VS Code VS Code TS TS TS VSIX 26

  27. Language Server Create UpdateModelAction 🐠 🐠 Diagram Language Diagram Generator Server LSP Sprotty Extension Code Diagram Webview Language Client JSON LSP Extension 🐠 Diagram Server 🐠 Sprotty VS Code VS Code TS TS TS VSIX 27

  28. Language Server LSP notify dispatch(UpdateModelAction) 🐠 🐠 Diagram Language Diagram Generator Server LSP Sprotty Extension Code Diagram Webview Language Client JSON LSP Extension 🐠 Diagram Server 🐠 Sprotty VS Code VS Code TS TS TS VSIX 28

  29. Language Server onNotify dispatch(UpdateModelAction) 🐠 🐠 Diagram Language Diagram Generator Server LSP Sprotty Extension Code Diagram Webview Language Client JSON LSP Extension 🐠 Diagram Server 🐠 Sprotty VS Code VS Code TS TS TS VSIX 29

Recommend

More recommend