or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-interface.mdconfiguration.mdcontext-integration.mdcore-analysis.mdindex.md
tile.json

tessl/npm-lit-analyzer

CLI that type checks bindings in lit-html templates

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/lit-analyzer@2.0.x

To install, run

npx @tessl/cli install tessl/npm-lit-analyzer@2.0.0

index.mddocs/

Lit Analyzer

Lit Analyzer is a comprehensive CLI tool and TypeScript library that performs static analysis and type checking of lit-html templates and LitElement web components. It provides diagnostics, code completion, hover information, definitions, rename support, and code fixes for Lit templates.

Package Information

  • Package Name: lit-analyzer
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install lit-analyzer -g

Core Imports

import { LitAnalyzer, DefaultLitAnalyzerContext, makeConfig } from "lit-analyzer";

For CommonJS:

const { LitAnalyzer, DefaultLitAnalyzerContext, makeConfig } = require("lit-analyzer");

Basic Usage

CLI Usage

# Analyze all TypeScript/JavaScript files in src directory
lit-analyzer src

# Analyze specific files with glob patterns
lit-analyzer "src/**/*.{js,ts}"

# Analyze with custom rules and output format
lit-analyzer --format markdown --rules.no-unknown-tag-name off src

Programmatic Usage

import { LitAnalyzer, DefaultLitAnalyzerContext, makeConfig, type LitPluginContextHandler } from "lit-analyzer";
import * as ts from "typescript";

// Create TypeScript program
const program = ts.createProgram(["src/my-component.ts"], {});

// Create plugin context handler
const handler: LitPluginContextHandler = {
  ts: ts,
  getProgram: () => program
};

// Create analyzer context and update configuration
const context = new DefaultLitAnalyzerContext(handler);
const config = makeConfig({ strict: true });
context.updateConfig(config);

// Create analyzer and get diagnostics
const analyzer = new LitAnalyzer(context);
const sourceFile = program.getSourceFile("src/my-component.ts");
const diagnostics = analyzer.getDiagnosticsInFile(sourceFile!);

// Process diagnostics
diagnostics.forEach(diagnostic => {
  console.log(`${diagnostic.severity}: ${diagnostic.message}`);
});

Architecture

Lit Analyzer is built around several core components:

  • LitAnalyzer: Main analyzer class providing comprehensive static analysis capabilities
  • Context System: Manages TypeScript integration, configuration, and analysis state
  • Rule System: 29 built-in validation rules with configurable severities
  • Document Analysis: Specialized analyzers for HTML and CSS within template literals
  • Type Integration: Deep TypeScript integration for accurate type checking
  • CLI Interface: Command-line tool with multiple output formats and configuration options

Capabilities

Core Analysis Engine

Main analyzer class providing comprehensive static analysis capabilities for Lit templates including diagnostics, completions, definitions, and code fixes.

class LitAnalyzer {
  constructor(context: LitAnalyzerContext);
  getDiagnosticsInFile(file: SourceFile): LitDiagnostic[];
  getCompletionsAtPosition(file: SourceFile, position: SourceFilePosition): LitCompletion[] | undefined;
  getDefinitionAtPosition(file: SourceFile, position: SourceFilePosition): LitDefinition | undefined;
  getQuickInfoAtPosition(file: SourceFile, position: SourceFilePosition): LitQuickInfo | undefined;
}

Core Analysis Engine

Configuration System

Comprehensive configuration system for controlling analyzer behavior, rule severities, and validation modes.

interface LitAnalyzerConfig {
  rules: LitAnalyzerRules;
  strict?: boolean;
  logging?: LitAnalyzerLogging;
  securitySystem?: LitSecuritySystem;
  dontShowSuggestions?: boolean;
  htmlTemplateTags?: string[];
  cssTemplateTags?: string[];
  globalTags?: string[];
  globalAttributes?: string[];
  globalEvents?: string[];
  customHtmlData?: any;
}

function makeConfig(userOptions?: Partial<LitAnalyzerConfig>): LitAnalyzerConfig;

Configuration System

Context and Integration

Context system managing TypeScript integration, analysis state, and component stores for comprehensive template analysis.

interface LitAnalyzerContext {
  readonly ts: typeof import("typescript");
  readonly program: Program;
  readonly config: LitAnalyzerConfig;
  readonly logger: LitAnalyzerLogger;
  updateComponents(file: SourceFile): void;
  updateDependencies(file: SourceFile): void;
}

class DefaultLitAnalyzerContext implements LitAnalyzerContext {
  constructor(handler: LitPluginContextHandler);
}

Context and Integration

CLI Interface

Command-line interface providing analysis capabilities with multiple output formats and extensive configuration options.

function cli(): Promise<void>;

interface LitAnalyzerCliConfig extends LitAnalyzerConfig {
  help: boolean;
  format: "code" | "list" | "markdown";
  maxWarnings: number;
  quiet: boolean;
  failFast: boolean;
  noColor: boolean;
  outFile?: string;
}

CLI Interface

Types

Core Types

type SourceFilePosition = number;
type DocumentOffset = number;

interface Range {
  start: number;
  end: number;
}

type SourceFileRange = Range & { __brand: "SourceFileRange" };
type DocumentRange = Range & { __brand: "DocumentRange" };

Diagnostic Types

type LitDiagnosticSeverity = "error" | "warning";

interface LitDiagnostic {
  location: SourceFileRange;
  code?: number;
  message: string;
  fixMessage?: string;
  suggestion?: string;
  source: LitAnalyzerRuleId;
  severity: LitDiagnosticSeverity;
  file: SourceFile;
}

Completion Types

interface LitCompletion {
  name: string;
  kind: LitTargetKind;
  kindModifiers?: "color";
  insert: string;
  range?: SourceFileRange;
  importance?: "high" | "medium" | "low";
  sortText?: string;
  documentation?(): string | undefined;
}

type LitTargetKind =
  | "memberFunctionElement"
  | "functionElement"
  | "constructorImplementationElement"
  | "variableElement"
  | "classElement"
  | "interfaceElement"
  | "moduleElement"
  | "memberVariableElement"
  | "constElement"
  | "enumElement"
  | "keyword"
  | "alias"
  | "member"
  | "label"
  | "unknown";

Code Fix Types

interface LitCodeFix {
  name: string;
  message: string;
  actions: LitCodeFixAction[];
}

interface LitCodeFixAction {
  range: SourceFileRange;
  newText: string;
}