feat: DLT-1812 language server - initial implementation

.gitignore

@@ -24,6 +24,7 @@ Thumbs.db
 dist
 .temp
 .cache
+out
 
 # Dialtone icons #
 packages/dialtone-icons/index.js
@@ -46,3 +47,7 @@ packages/dialtone-vue*/functions/generated
 
 # Postcss responsive variations
 packages/postcss-responsive-variations/coverage
+
+# Language Server
+*.tsbuildinfo
+*.vsix

.vscode/dialtone.code-workspace

@@ -0,0 +1,51 @@
+{
+  "folders": [
+    {
+      "name": "Root",
+      "path": "../"
+    },
+		{
+      "name": "Documentation",
+      "path": "../apps/dialtone-documentation"
+    },
+    {
+      "name": "CSS",
+      "path": "../packages/dialtone-css"
+    },
+		{
+      "name": "Emojis",
+      "path": "../packages/dialtone-emojis"
+    },
+		{
+      "name": "Icons",
+      "path": "../packages/dialtone-icons"
+    },
+		{
+      "name": "Tokens",
+      "path": "../packages/dialtone-tokens"
+    },
+    {
+      "name": "Vue 2",
+      "path": "../packages/dialtone-vue2"
+    },
+		{
+      "name": "Vue 3",
+      "path": "../packages/dialtone-vue3"
+    },
+		{
+      "name": "ESLint Plugin",
+      "path": "../packages/eslint-plugin-dialtone"
+    },
+		{
+      "name": "StyleLint Plugin",
+      "path": "../packages/stylelint-plugin-dialtone"
+    },
+  ],
+  "settings": {
+    "eslint.format.enable": true,
+    "eslint.run": "onSave",
+    "eslint.runtime": "node",
+    "stylelint.enable": true,
+    "stylelint.stylelintPath": "node_modules/stylelint/lib/index.js"
+  }
+}

.vscode/extensions.json

@@ -14,6 +14,7 @@
     "stylelint.vscode-stylelint",
     "jock.svg",
     "vitest.explorer",
-    "vue.volar"
+    "vue.volar",
+    "johnsoncodehk.volarjs-labs"
   ]
 }

.vscode/folders.json

@@ -0,0 +1,7 @@
+{
+  "folders": [
+    {
+      "path": "apps/dialtone-css"
+    }
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Client",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": [
+        "--disable-updates",
+        "--disable-workspace-trust",
+        "--profile-temp",
+        "--skip-release-notes",
+        "--skip-welcome",
+        "--extensionDevelopmentPath=${workspaceRoot}/packages/language-server/vscode",
+        "--folder-uri=${workspaceRoot}/packages/language-server/sample"
+      ],
+      "outFiles": ["${workspaceRoot}/packages/language-server/vscode/dist/*.js"],
+      "preLaunchTask": "watch: language-server"
+    }
+  ]
+}

.vscode/tasks.json

@@ -49,6 +49,55 @@
       "type": "shell",
       "command": "pnpm nx run dialtone:build",
       "problemMatcher": []
+    },
+    {
+      "label": "build: language-server",
+      "type": "npm",
+      "script": "build",
+      "group": "build",
+      "presentation": {
+				"panel": "dedicated",
+				"reveal": "never"
+			},
+			"problemMatcher": {
+				"pattern": {
+					"regexp": "__________"
+				},
+				"background": {
+					"beginsPattern": "building\\.\\.\\.",
+					"endsPattern": "finished\\."
+				}
+			},
+      "options": {
+        "cwd": "${workspaceFolder}/packages/language-server/vscode"
+      }
+    },
+    {
+      "label": "watch: language-server",
+      "type": "npm",
+      "script": "watch",
+      "isBackground": true,
+      "group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"presentation": {
+				"panel": "dedicated",
+				"reveal": "never"
+			},
+			"problemMatcher": {
+				"pattern": {
+					"regexp": "__________"
+				},
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": "building\\.\\.\\.",
+					"endsPattern": "watching\\.\\.\\."
+				}
+			},
+      "options": {
+        "cwd": "${workspaceFolder}/packages/language-server/vscode"
+      }
     }
   ]
 }

package.json

@@ -152,6 +152,7 @@
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "7.6.20",
+    "@types/node": "^20.4.5",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/tsconfig": "^0.4.0",

packages/dialtone-icons/vue2/package.json

@@ -1,4 +1,5 @@
 {
+  "name": "@dialpad/dialtone-icons-vue2",
   "devDependencies": {
     "vue": "^2.7.16"
   },

packages/dialtone-icons/vue3/package.json

@@ -1,4 +1,5 @@
 {
+  "name": "@dialpad/dialtone-icons-vue3",
   "devDependencies": {
     "@vue/compiler-sfc": "^3.4.15",
     "vue": "^3.4.15"

packages/language-server/.eslintignore

@@ -0,0 +1 @@
+test.*

packages/language-server/README.md

@@ -0,0 +1,42 @@
+# Dialtone language-tools
+
+This is the Dialtone language tools based on Volar Framework.
+
+## Tools
+
+- pnpm: monorepo support
+- esbuild: bundle extension
+
+## Folder structure
+
+- server: Language server.
+  - src: Language server source files.
+    - resolvers: Process documentation and return completion items array.
+    - services: Language service plugins
+- vscode: VSCode extension.
+  - src: Extension source files.
+  - scripts: ESBuild script.
+- sample: Test files
+
+## Running the Sample
+
+- Run `pnpm install`. This installs all necessary npm modules in both the client and server folder
+- Open VS Code on this folder.
+- Switch to the Debug viewlet.
+- Select `Launch Client` from the drop down.
+- Run the launch config.
+- In the [Extension Development Host] instance of VSCode, open a `test.vue`
+  - Type `<dt-|` to try Component completion.
+  - Type `<dt-avatar | />` to try property completion.
+  - Have `<dt-avatar size="|" />` to see values completion.
+
+## Build .vsix
+
+- Run `pnpm nx run dialtone-language-server:pack` in this folder
+- `vscode/vscode-dialtone-X.X.X.vsix` will be created, and you can manual install it to VSCode.
+
+## References
+
+- <https://code.visualstudio.com/api/language-extensions/embedded-languages>
+- <https://github.com/microsoft/vscode-extension-samples/tree/main/lsp-embedded-language-service>
+- <https://volarjs.dev/core-concepts/why-volar/>

packages/language-server/project.json

@@ -0,0 +1,45 @@
+{
+  "name": "dialtone-language-server",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "dependsOn": [
+        "dialtone-vue3:build",
+        "dialtone-tokens:build"
+      ],
+      "inputs": [
+        "{projectRoot}/**/*"
+      ],
+      "outputs": [ "{projectRoot}/vscode/dist" ],
+      "options": {
+        "cwd": "{projectRoot}/vscode",
+        "command": "pnpm run build"
+      }
+    },
+    "publish": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm publish --filter ./packages/dialtone-vue2"
+      }
+    },
+    "pack": {
+      "executor": "nx:run-commands",
+      "dependsOn": [
+        "build",
+        "dialtone-vue3:build",
+        "dialtone-tokens:build"
+      ],
+      "options": {
+        "cwd": "{projectRoot}/vscode",
+        "command": "pnpm vsce package --pre-release"
+      }
+    },
+    "release": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm semantic-release-plus --extends ./packages/dialtone-vue2/release-ci.config.cjs && sleep 3",
+        "parallel": false
+      }
+    }
+  }
+}

packages/language-server/sample/test.vue

@@ -0,0 +1,10 @@
+<template>
+    <dt-avatar />
+    <dt-avatar size="" />
+</template>
+
+<style>
+    .custom-class {
+        color: var(--dt-);
+    }
+</style>

packages/language-server/sample/test2.css

@@ -0,0 +1,3 @@
+.custom-color {
+  color: var()
+}

packages/language-server/server/README.md

@@ -0,0 +1,3 @@
+# Dialtone language server
+
+Language server based on Volar Framework.

packages/language-server/server/bin/server.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+if (process.argv.includes('--version')) {
+  const pkgJSON = require('../package.json');
+  console.log(`${pkgJSON.version}`);
+} else {
+  require('../out/index.js');
+}

packages/language-server/server/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@dialpad/dialtone-language-server",
+	"version": "1.0.0-alpha.2",
+	"author": "Tico Ortega <julio.ortega@dialpad.com>",
+	"bugs": {
+    "email": "dialtone@dialpad.com"
+  },
+	"license": "MIT",
+	"main": "out/index.js",
+	"files": [
+		"out/**/*.js",
+		"out/**/*.d.ts"
+	],
+	"bin": {
+		"dialtone-ls": "bin/server.js"
+	},
+	"dependencies": {
+		"@volar/language-core": "~2.4.8",
+		"@volar/language-server": "~2.4.8",
+		"@volar/language-service": "~2.4.8",
+		"vscode-html-languageservice": "~5.3.1",
+		"vscode-uri": "~3.0.8"
+	},
+	"devDependencies": {
+		"@dialpad/dialtone-vue": "workspace:^3",
+		"@dialpad/dialtone-tokens": "workspace:*"
+	}
+}

packages/language-server/server/src/index.ts

@@ -0,0 +1,24 @@
+import { createConnection, createServer, createSimpleProject } from '@volar/language-server/node';
+import { create as createDialtoneComponentsService } from './services/dialtone-components';
+import { create as createDialtoneTokensService } from './services/dialtone-tokens';
+import { dialtoneLanguagePlugin } from "./language-plugin";
+
+const connection = createConnection();
+const server = createServer(connection);
+
+connection.listen();
+
+connection.onInitialize((params) => {
+  return server.initialize(
+    params,
+    createSimpleProject([dialtoneLanguagePlugin]),
+    [
+      createDialtoneComponentsService(),
+      createDialtoneTokensService(),
+    ]
+  );
+});
+
+connection.onInitialized(server.initialized);
+
+connection.onShutdown(server.shutdown);