Nicolas
e2d7207237
- Outillage complet : pnpm workspaces (catalog), Biome, TypeScript (project references, CommonJS/Node10), Vitest, TypeDoc (validation bloquante en CI), Changesets. - Organisation des packages en catégories client/common/server. - Migration de @lightweight-sdk/web-component (packages/client/) depuis l'ancien repo lightweight-sdk-web-component : code source copié à l'identique, aucune modification. package.json/tsconfig.json/README.md adaptés autour. Exclu de la validation TypeDoc stricte et de quelques règles Biome (formatage, noShadowRestrictedNames) puisque le code ne peut pas être édité pour s'y conformer - détails dans spec/packages.md. - Workflows Forgejo Actions (.forgejo/workflows/) : ci.yml (lint, build, test, docs:check) et release.yml (publication sur le registre npm privé via Changesets). - Script pnpm create-package <client|common|server> <nom> pour scaffolder les futurs packages. - Documentation dans /spec (architecture, conventions, ci-cd, packages). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# lightweight-sdk-web-component
|
|
|
|
A lightweight library to build web components easily.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
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 :
|
|
|
|
```jsonc
|
|
{
|
|
"compilerOptions": {
|
|
"experimentalDecorators": true
|
|
}
|
|
}
|
|
```
|
|
|
|
## Usage
|
|
|
|
```ts
|
|
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.
|