@gluonjs/language-server


@gluonjs/language-server / packages/language-server/src / CustomElementDeclaration

Interface: CustomElementDeclaration

Properties

events

readonly events: readonly string[]


props

readonly props: readonly string[]


range

readonly range: Range


slots

readonly slots: readonly string[]


tagName

readonly tagName: string


uri

readonly uri: string

Example

Link a custom tag to its definition URI/range and public property, event, and slot names for cross-file tooling:

ts
import {
  GluonLanguageService,
  PROJECT_ANALYSIS_SCHEMA,
  analyzeGluonDocument,
  analyzeGluonProject,
  analyzeStaticGluonProject,
  declarationsFromCustomElementsManifest,
  type CompletionItem,
  type CustomElementDeclaration,
  type DocumentAnalysis,
  type GluonProjectAnalysis,
  type Hover,
  type Location,
  type Position,
  type ProjectDocument,
  type ProjectAnalysisDiagnostic,
  type ProjectEvidence,
  type Range,
  type TemplateDiagnostic,
  type TemplateDiagnosticCode,
  type TextEdit,
  type WorkspaceEdit,
  type AnalysisConfidence,
} from '@gluonjs/language-server';

const component = {
  uri: 'file:///src/product-card.ts',
  text: `import { GluonElement, defineElement, html } from '@gluonjs/core';
    class ProductCard extends GluonElement {
      static properties = { name: String };
      static events = { select: {} };
      protected render() { return html\`<button>Product</button>\`; }
    }
    defineElement('product-card', ProductCard);`,
} satisfies ProjectDocument;
const page = {
  uri: 'file:///src/page.ts',
  text: `import { html } from '@gluonjs/core'; export const Page = () => html\`<product-card .name=\${'Lamp'}></product-card>\`;`,
} satisfies ProjectDocument;
const project: readonly DocumentAnalysis[] = analyzeGluonProject([component, page]);
const inventory: GluonProjectAnalysis = analyzeStaticGluonProject([component, page]);
const confidence: AnalysisConfidence | undefined = inventory.files[0]?.confidence;
const evidence: ProjectEvidence<{ readonly language: 'javascript' | 'typescript' }> | undefined = inventory.files[0];
const projectDiagnostic: ProjectAnalysisDiagnostic | undefined = inventory.diagnostics[0];
const schemaVersion = PROJECT_ANALYSIS_SCHEMA.properties.schemaVersion.const;
const direct = analyzeGluonDocument(page.uri, page.text, project[0]?.declarations);
const declaration: CustomElementDeclaration | undefined = project[0]?.declarations[0];
const diagnostic: TemplateDiagnostic | undefined = direct.diagnostics[0];
const code: TemplateDiagnosticCode | undefined = diagnostic?.code;

const manifestDeclarations = declarationsFromCustomElementsManifest('file:///custom-elements.json', {
  modules: [{ declarations: [{ customElement: true, tagName: 'price-tag', members: [{ kind: 'field', name: 'value' }] }] }],
});
const service = new GluonLanguageService();
service.open(component.uri, component.text);
service.open(page.uri, page.text);
const position = { line: 0, character: page.text.indexOf('product-card') } satisfies Position;
const range = { start: position, end: { ...position, character: position.character + 12 } } satisfies Range;
const completions: readonly CompletionItem[] = service.complete(page.uri, position);
const hover: Hover | undefined = service.hover(page.uri, position);
const locations: readonly Location[] = service.definition(page.uri, position);
const edit: WorkspaceEdit | undefined = service.rename(page.uri, position, 'catalog-card');
const textEdit: TextEdit = { range, newText: 'catalog-card' };
console.log(declaration, code, manifestDeclarations, completions, hover, locations, edit, textEdit, confidence, evidence, projectDiagnostic, schemaVersion);