kyuno

Repositories

6

Projects Packages

5

Public activity Starred repositories

@lightweight-sdk/web-component (0.0.2)

Published 2026-09-18 20:57:10 +02:00 by kyuno

Installation

Setup this registry in your project .npmrc file:

@lightweight-sdk:registry=

To install the package using npm, run the following command:

npm install @lightweight-sdk/web-component@0.0.2

or add it to the package.json file:

"@lightweight-sdk/web-component": "0.0.2"

For more information on the npm registry, see the documentation.

About this package

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.

Details

npm

2026-09-18 20:57:10 +02:00

1

latest

6.5 KiB

Assets (1)

web-component-0.0.2.tgz 6.5 KiB

Versions (1) View all

0.0.2 2026-09-18