lightweight-sdk/packages/client/web-component

lightweight-sdk-web-component

A lightweight library to build web components easily.

Installation

pnpm add @lightweight-sdk/web-component

Prérequis côté consommateur

@LinkToDom et @CustomComponent sont des décorateurs TypeScript "legacy" (signature (target, key) / (constructor)). Pour les utiliser, ton propre tsconfig.json doit activer :

{
	"compilerOptions": {
		"experimentalDecorators": true
	}
}

Usage

import { AbstractComponent, CustomComponent, LinkToDom } from "@lightweight-sdk/web-component";

@CustomComponent({
	tagName: "my-widget",
	template: "<span ref=\"label\"></span>",
})
class MyWidget extends AbstractComponent {
	@LinkToDom("label")
	private label!: HTMLElement;

	public override init(): void {
		this.label.textContent = "Hello";
	}
}

API

• AbstractComponent — classe de base à étendre pour déclarer un web component (cycle de vie init/refresh).
• CustomComponent(params) — décorateur de classe qui enregistre le custom element et branche le template/Shadow DOM.
• LinkToDom(ref) — décorateur de propriété qui lie un membre de la classe à l'élément DOM portant l'attribut ref="..." correspondant.
• findRefElement(ref, parent?) — retrouve un élément par son attribut ref dans un conteneur donné (document.body par défaut).
• ComponentParams, LinkedProperty, AcceptedHTMLContent — types associés.