lit · justinfagnani · Aug 22, 2025 · Oct 5, 2023 · Feb 1, 2024 · Feb 2, 2024
@@ -0,0 +1,5 @@
+---
+'@lit-labs/analyzer': minor
+---
+
+Add template parser to analyzer
@@ -390,10 +390,7 @@ packages/labs/tsserver-plugin/example/node_modules/
 packages/labs/tsserver-plugin/lib/
 packages/labs/tsserver-plugin/test/
 
-packages/labs/tsserver-plugin/**/index.js
-packages/labs/tsserver-plugin/**/index.js.map
-packages/labs/tsserver-plugin/**/index.d.ts
-packages/labs/tsserver-plugin/**/index.d.ts.map
+packages/labs/tsserver-plugin/index.*
 
 packages/labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js
 packages/labs/virtualizer/src/polyfills/resize-observer-polyfill/ResizeObserver.js

@@ -375,10 +375,7 @@ packages/labs/testing/**/.tsbuildinfo-utils
 packages/labs/tsserver-plugin/lib/
 packages/labs/tsserver-plugin/test/
 
-packages/labs/tsserver-plugin/**/index.js
-packages/labs/tsserver-plugin/**/index.js.map
-packages/labs/tsserver-plugin/**/index.d.ts
-packages/labs/tsserver-plugin/**/index.d.ts.map
+packages/labs/tsserver-plugin/index.*
 
 packages/labs/virtualizer/layouts/
 packages/labs/virtualizer/polyfillLoaders/

@@ -5,14 +5,14 @@
  */
 
 import type ts from 'typescript';
-import {Package, PackageJson, AnalyzerInterface, Module} from './model.js';
-import {AbsolutePath} from './paths.js';
 import {getModule} from './javascript/modules.js';
-export {PackageJson};
 import {
   getPackageInfo,
   getPackageRootForModulePath,
 } from './javascript/packages.js';
+import {AnalyzerInterface, Module, Package, PackageJson} from './model.js';
+import {AbsolutePath} from './paths.js';
+export {PackageJson};
 
 export type TypeScript = typeof ts;
 

@@ -1,7 +1,4 @@
 /lib/
 /test/
 
-index.js
-index.js.map
-index.d.ts
-index.d.ts.map
+/index.*
@@ -17,13 +17,26 @@ A new TypeScript Language Service Plugin for Lit living in the Lit monorepo.
 
 ### Goals
 
-This plugin will provide additional type-checking, syntax checking, and better errors for Lit constructs (like lit-html templates) that the TypeScript compiler can't check natively.
-
-It is intended to include much of the functionality from [ts-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/ts-lit-plugin) and [eslint-plugin-lit](https://github.com/43081j/eslint-plugin-lit) but maintained within the Lit monorepo and based on the analysis of the [Lit team's first-party analyzer](https://github.com/lit/lit/tree/main/packages/labs/analyzer).
-
-This plugin is also intended to be used with and be coherent with the new type-aware version of the `eslint-plugin-lit` library that's being developed (also int he Lit monorepo).
-
-This means that additional checks should ideally live in either the linter or the type-checker, and rarely both. That may be hard as there is a blurry line between type-checking and type-aware linting, and not all users may want to run both tools. If there are cases where a rule exists in booth tools they should share an implementation, name, and ideally a controlling configuration.
+This plugin will provide additional type-checking, syntax checking, and better
+errors for Lit constructs (like lit-html templates) that the TypeScript compiler
+can't check natively.
+
+It is intended to include much of the functionality from
+[ts-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/ts-lit-plugin)
+and [eslint-plugin-lit](https://github.com/43081j/eslint-plugin-lit) but
+maintained within the Lit monorepo and based on the analysis of the [Lit team's
+first-party
+analyzer](https://github.com/lit/lit/tree/main/packages/labs/analyzer).
+
+This plugin is also intended to be used with and be coherent with the new
+type-aware version of the `eslint-plugin-lit` library that's being developed
+(also int he Lit monorepo).
+
+This means that additional checks should ideally live in either the linter or
+the type-checker, and rarely both. That may be hard as there is a blurry line
+between type-checking and type-aware linting, and not all users may want to run
+both tools. If there are cases where a rule exists in booth tools they should
+share an implementation, name, and ideally a controlling configuration.
 
 ### Features to include
 
@@ -41,6 +54,42 @@ Aside from linting / type-checking:
 
 Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).
 
+### Running locally
+
+There is an example project in `example/` that should be setup to run the plugin
+locally for development.
+
+The example project has a dependency on the plugin with a `file:..` version, and
+a tsconfig that adds the plugin.
+
+#### Install example project dependencies
+
+```sh
+cd packages/labs/tsserver-plugin/example
+npm i
+```
+
+#### Open example project
+
+```sh
+cd packages/labs/tsserver-plugin
+code example
+```
+
+#### Setup VS Code
+
+Do these in the window that has the example project open:
+
+- Make sure are using the TypeScript version from the example workspace. Click
+  the `{}` from the status bar to select a version.
+- The logs from the plugin are written to the TS Server logs. To see logs those,
+  open a TypeScript file and run the command "TypeScript: Open TS SErver log".
+  You may have to enable the logs.
+- Disable othet Lit plugins. VS Code can not save disabled extensions to a
+  workspace settings file, so you have to do this yourself. Go to the Extensions
+  activity, cliekt the gear icon next to `lit-plugin`, and select
+  "Disable (Worksapce)".
+
 ### Debugging
 
 ```sh

@@ -3,7 +3,10 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@lit-labs/tsserver-plugin": "file:..",
+    "@lit-labs/tsserver-plugin": "file:.."
+  },
+  "dependencies": {
+    "lit": "^3.2.1",
     "typescript": "~5.9.0"
   }
 }
@@ -1,5 +1,18 @@
-// Edit this file to trigger the TSServer commands.
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
-const anExampleVariable = 'Hello World';
-console.log(anExampleVariable);
-a;
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    :host {
+      color: blue;
+    }
+  `;
+
+  @property({type: String})
+  name = 'World';
+
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    // This matches the package name given in this package.json
     "plugins": [
       {
         "name": "@lit-labs/tsserver-plugin"
@@ -17,13 +16,14 @@
     "outDir": "./",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "exactOptionalPropertyTypes": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "noImplicitOverride": true,
     "skipLibCheck": true
   },
   "include": ["src/**/*.ts"],

@@ -11,8 +11,8 @@
     "url": "git+https://github.com/lit/lit.git",
     "directory": "packages/labs/tsserver-plugin"
   },
-  "main": "index.js",
-  "type": "commonjs",
+  "main": "index.cjs",
+  "type": "module",
   "scripts": {
     "build": "wireit",
     "test": "wireit"
@@ -30,14 +30,19 @@
         "index.{js,js.map,d.ts,d.ts.map}",
         "tsconfig.tsbuildinfo"
       ],
+      "dependencies": [
+        "../analyzer:build"
+      ],
       "clean": "if-file-deleted"
     },
     "test": {
-      "command": "node --enable-sourcemaps --test-reporter=spec --test test/**/*_test.js",
+      "command": "node --enable-source-maps --test-reporter=spec --test test/**/*_test.js",
       "dependencies": [
         "build"
       ],
-      "files": [],
+      "files": [
+        "test-files/**/*"
+      ],
       "output": []
     }
   },
@@ -49,6 +54,11 @@
     ".": "./index.js"
   },
   "devDependencies": {
+    "@types/node": "^22.7.7"
+  },
+  "dependencies": {
+    "@lit-labs/analyzer": "^0.13.1",
+    "@parse5/tools": "^0.5.0",
     "typescript": "~5.9.0"
   }
 }