tessl/npm-lit-analyzer

CLI that type checks bindings in lit-html templates

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Configuration System

Name: tessl/npm-lit-analyzer
Author: tessl

The configuration system provides comprehensive control over analyzer behavior, rule severities, validation modes, and template recognition patterns.

Capabilities

Configuration Creation

Create configuration objects from partial options with intelligent defaults.

import { HTMLDataV1 } from "vscode-html-languageservice";

/**
 * Create a complete configuration from partial options
 * Applies intelligent defaults for unspecified options
 * @param userOptions - Partial configuration options
 * @returns Complete LitAnalyzerConfig with all defaults applied
 */
function makeConfig(userOptions?: Partial<LitAnalyzerConfig>): LitAnalyzerConfig;

/**
 * Create rules configuration from partial analyzer config
 * Extracts and processes rule-specific configuration
 * @param userOptions - Partial configuration containing rules
 * @returns Processed rules configuration
 */
function makeRules(userOptions: Partial<LitAnalyzerConfig>): LitAnalyzerRules;

Usage Example:

import { makeConfig } from "lit-analyzer";

// Create strict configuration with custom rules
const config = makeConfig({
  strict: true,
  rules: {
    "no-unknown-tag-name": "error",
    "no-missing-import": "warn",
    "no-incompatible-type-binding": "off"
  },
  logging: "debug"
});

Rule Management

Utilities for managing rule severities and checking rule states.

/**
 * Get the severity level for a specific rule
 * @param rules - Rules configuration or full config
 * @param ruleId - ID of the rule to check
 * @returns The severity level for the rule
 */
function ruleSeverity(rules: LitAnalyzerConfig | LitAnalyzerRules, ruleId: LitAnalyzerRuleId): LitAnalyzerRuleSeverity;

/**
 * Check if a rule is disabled
 * @param config - Analyzer configuration
 * @param ruleId - ID of the rule to check
 * @returns True if the rule is disabled
 */
function isRuleDisabled(config: LitAnalyzerConfig, ruleId: LitAnalyzerRuleId): boolean;

/**
 * Check if a rule is enabled
 * @param config - Analyzer configuration
 * @param ruleId - ID of the rule to check
 * @returns True if the rule is enabled
 */
function isRuleEnabled(config: LitAnalyzerConfig, ruleId: LitAnalyzerRuleId): boolean;

/**
 * Convert rule severity to diagnostic severity
 * @param config - Analyzer configuration
 * @param ruleId - ID of the rule
 * @returns Diagnostic severity level
 */
function litDiagnosticRuleSeverity(config: LitAnalyzerConfig, ruleId: LitAnalyzerRuleId): LitDiagnosticSeverity;

Rule Information

Access rule metadata and numeric codes.

/**
 * Get numeric code for a rule ID
 * @param ruleId - ID of the rule
 * @returns Numeric code associated with the rule
 */
function ruleIdCode(ruleId: LitAnalyzerRuleId): number;

/** Array of all available rule IDs in alphabetical order */
const ALL_RULE_IDS: readonly LitAnalyzerRuleId[];

/** Map of rule IDs to their numeric codes */
const RULE_ID_CODE_MAP: Record<LitAnalyzerRuleId, number>;

Configuration Types

Main Configuration Interface

interface LitAnalyzerConfig {
  /** Enable strict mode (changes default rule severities) */
  strict: boolean;
  /** Rule configuration mapping rule IDs to severities */
  rules: LitAnalyzerRules;
  /** Security system configuration */
  securitySystem: LitSecuritySystem;
  /** Disable analyzer functionality completely */
  disable: boolean;
  /** Logging level for analyzer output */
  logging: LitAnalyzerLogging;
  /** Current working directory */
  cwd: string;
  /** Format configuration */
  format: { disable: boolean };
  /** Disable suggestion messages in diagnostics */
  dontShowSuggestions: boolean;
  /** Disable configuration change suggestions */
  dontSuggestConfigChanges: boolean;
  /** Maximum depth for node_modules import traversal */
  maxNodeModuleImportDepth: number;
  /** Maximum depth for project import traversal */
  maxProjectImportDepth: number;
  /** Template tag names that contain HTML templates */
  htmlTemplateTags: string[];
  /** Template tag names that contain CSS templates */
  cssTemplateTags: string[];
  /** Global tag names that are always considered valid */
  globalTags: string[];
  /** Global attribute names that are always considered valid */
  globalAttributes: string[];
  /** Global event names that are always considered valid */
  globalEvents: string[];
  /** Custom HTML data for additional element/attribute definitions */
  customHtmlData: (string | HTMLDataV1)[] | string | HTMLDataV1;
}

Rules Configuration

type LitAnalyzerRules = Partial<Record<LitAnalyzerRuleId, LitAnalyzerRuleSeverity>>;

type LitAnalyzerRuleSeverity = 
  | "on" 
  | "off" 
  | "warn" 
  | "warning" 
  | "error" 
  | 0 
  | 1 
  | 2 
  | true 
  | false;

type LitAnalyzerRuleId = 
  | "no-unknown-tag-name"
  | "no-missing-import"
  | "no-unclosed-tag"
  | "no-unknown-attribute"
  | "no-unknown-property"
  | "no-unknown-event"
  | "no-unknown-slot"
  | "no-unintended-mixed-binding"
  | "no-invalid-boolean-binding"
  | "no-expressionless-property-binding"
  | "no-noncallable-event-binding"
  | "no-boolean-in-attribute-binding"
  | "no-complex-attribute-binding"
  | "no-nullable-attribute-binding"
  | "no-incompatible-type-binding"
  | "no-invalid-directive-binding"
  | "no-incompatible-property-type"
  | "no-invalid-attribute-name"
  | "no-invalid-tag-name"
  | "no-invalid-css"
  | "no-property-visibility-mismatch"
  | "no-legacy-attribute"
  | "no-missing-element-type-definition";

Logging Configuration

type LitAnalyzerLogging = "off" | "error" | "warn" | "debug" | "verbose";

Security Configuration

type LitSecuritySystem = "off" | "ClosureSafeTypes";

Rule Categories

Custom Element Validation Rules

Rules for validating custom element usage and definitions:

no-unknown-tag-name - Check for unknown custom element tags
no-missing-import - Ensure custom elements are imported
no-unclosed-tag - Check for unclosed tags
no-missing-element-type-definition - Ensure proper TypeScript definitions

Binding Name Validation Rules

Rules for validating attribute, property, and event names:

no-unknown-attribute - Check for unknown attributes
no-unknown-property - Check for unknown properties
no-unknown-event - Check for unknown events
no-unknown-slot - Check for unknown slots
no-legacy-attribute - Disallow legacy Polymer syntax

Binding Type Validation Rules

Rules for validating binding type compatibility:

no-incompatible-type-binding - Check type compatibility in bindings
no-boolean-in-attribute-binding - Check boolean attribute usage
no-expressionless-property-binding - Ensure property bindings have expressions
no-noncallable-event-binding - Check event handler callability
no-nullable-attribute-binding - Check nullable attribute bindings

Advanced Validation Rules

Rules for advanced template validation:

no-invalid-attribute-name - Validate attribute name syntax
no-invalid-tag-name - Validate tag name syntax
no-property-visibility-mismatch - Check property visibility
no-invalid-directive-binding - Validate directive usage
no-unintended-mixed-binding - Check for mixed binding types
no-invalid-boolean-binding - Validate boolean binding syntax
no-complex-attribute-binding - Check complex attribute expressions
no-attribute-default-value - Check attribute default values
no-invalid-css - Validate CSS within template literals
no-incompatible-property-type - Check property type compatibility
no-unknown-property-converter - Check property converter usage
no-duplicate-slot-names - Check for duplicate slot names
no-template-bind - Check template binding usage

Configuration Examples

Basic Configuration

import { makeConfig } from "lit-analyzer";

const config = makeConfig({
  rules: {
    "no-unknown-tag-name": "warn",
    "no-missing-import": "error"
  }
});

Strict Mode Configuration

const strictConfig = makeConfig({
  strict: true,
  logging: "debug",
  rules: {
    "no-unknown-tag-name": "error",
    "no-incompatible-type-binding": "error"
  }
});

Custom Template Tags

const customConfig = makeConfig({
  htmlTemplateTags: ["html", "template", "render"],
  cssTemplateTags: ["css", "styles"],
  globalTags: ["my-custom-element"],
  globalAttributes: ["data-testid"]
});