Pour commencer

import { Component, css, customElement, html, property, PropertyValues, TemplateResult } from 'wapitis'
import { CSSResult } from 'wapitis/library/css'

// Entrez le nom du composant (x-nameOfComponent) par défaut en paramètre de register => recquis
@customElement()
export default class TodoList extends Component {
    // Si true les logs internes de l'item sont publiés
    showInternalLog = false

    static get styles(): CSSResult {
        return css`
        /* :host {

        } */
        `
    }

    @property() maVariable: string

    // On peut déclarer les propriétés publiques obsevables dans le constructor. Bien que cela ne soit pas obligatoire, cela permet d'aider les éditeurs de code à savoir quels paramètres peuvent être utilisés lors de la création du composant sous la forme new Component({...}).
    // ```typescript
    // constructor(options: { maVariable: string }) {
    //     super(options)
    // }
    // ```
    // Si la création sous cette forme n'est pas utilisée ou si on a pas besoin de cette aide, la déclaration des paramètres dans le constructeur peut alors être la suivante :
    constructor(options: record<string, unknown>) {
        super(options)
        /* ... */
    }
    // Comme toutes les autres méthodes, le constructeur peut aussi ne pas être déclaré si on a rien à mettre dedans, puisqu'il est déclaré dans la classe parente.

    connectedCallback(): void {
        super.connectedCallback()
    }

    attributeChangedCallback(attrName: string, oldVal: unknown, newVal: unknown): void {
        super.attributeChangedCallback(attrName, oldVal, newVal)
    }

    shouldUpdate(_changedProperties: PropertyValues): boolean {
        return true
    }

    beforeRender(_changedProperties: PropertyValues): void {
        //
    }

    render(): TemplateResult {
        return html`
            <!--  -->
        `
    }

    firstUpdated(_changedProperties: PropertyValues): void {
        //
    }

    updated(_changedProperties: PropertyValues): void {
        //
    }

    disconnectedCallback(): void {
        super.disconnectedCallback()
    }
}

import { Component, css, customElement, html, property, UTILS, TemplateResult } from 'wapitis'
import { CSSResult } from 'wapitis/library/css'

// Nous définissons notre custom element dans la directive suivante et la classe associée
// w pour wapitis. il est obligatoire d'avoir "prefix-nom" dans le nom d'un custom element
@customElement('w-todo-list')
export default class TodoList extends Component {
    // Une propriété _todos est déclarée avec la directive @property en indiquant le type dont il s'agit, ici un Array d'objet
    // Le préfixe _ permet à la propriété d'être obervable tout en étant considérée comme protected. Elle n'apparait ainsi pas dans les attributs de l'élément, il n'y a donc pas de conversion
    @property() _todos: Array<{ text: string; }> = []
    // Une propriété input non observable et protected est déclarée
    protected _input: HTMLInputElement | null

   render(): TemplateResult {
        // On utilise ensuite le tag html afin de créer un template avec les événements et les variables observées à mettre à jour
        // @click correspond à addEventListener('click', this.addTodos)
        // La partie du template this._todos est mis à jour car il s'agit d'une propriété observable
        // Voir https://lit-html.polymer-project.org/guide/template-reference, pour en savoir plus sur les possibilités de lit-html
        return html`
            <div class='title'>todos</div>
            <form>
                <input type='text' placeholder='Ajouter une tâche'/>
                <button @click=${this._addTodo}>Ajouter</button>
            </form>
            <div class='todos'>
                ${this._todos.map((todo) => html`<div>${todo.text}</div>`)}
            </div>
        `
    }

    // On va chercher l'élément input
    firstUpdated(): void {
        this._input = this.shadowRoot?.querySelector('input') as HTMLInputElement
    }

    // On ajoute à la propriété _todos la nouvelle tâche créée. C'est la méthode render qui se charge de l'affichage lorsque _todos change
    protected _addTodo = (event: MouseEvent): void => {
        event.preventDefault()
        if (this._input && this._input.value.length > 0) {
            this._todos = [...this._todos, { text: this._input.value, checked: false }]
            this._input.value = ''
        }
    }
}

import { JSX } from 'wapitis'
import TodoList from './components/todo-list'
import './www/styles/main.css'

document.body.appendChild(<TodoList></TodoList>)

export default class TodoList extends Component {
    static get styles(): CSSResult {
        return css`
        :host {
            font-family: Arial, Helvetica, sans-serif;
            margin: auto;
            width: 25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .title {
            font-size: 100px;
            opacity: 0.2;
            color: #333333;
        }
        input {
            border: 1px solid #ccc;
            box-shadow: inset 0 1px 3px #ddd;
            border-radius: 4px;
            padding: 12px 20px;
        }
        button {
            display: none;
        }
        .todos {
            width: 25em;
            margin-top: 1rem;
        }
        `
    }

    // Une propriété _todos est déclarée avec la directive @property en indiquant le type dont il s'agit, ici un Array d'objet
    // Le préfixe _ permet à la propriété d'être obervable tout en étant considérée comme protected. Elle n'apparait ainsi pas dans les attributs de l'élément, il n'y a donc pas de conversion
    @property() _todos: Array<{ text: string; }> = []

    ...

import { Component, css, customElement, html, property, UTILS, TemplateResult } from 'wapitis'
import { CSSResult } from 'wapitis/library/css'

@customElement('w-todo')
export default class Todo extends Component {
    // On déclare les 3 propiétés observables en utilisant la directive @property. Comme il s'agit d'attribut, afin d'indiquer comment la conversion doit être faite entre l'attribut et la propriété, on indique le type pour index et checked, text étant un string il est inutile de l'indiquer. attribute est passé à false pour l'index afin qu'il n'apparaisse pas en tant qu'attribut html dans le dom
    @property() text: string
    @property({ attribute: false }) index: number
    @property({ type: Boolean }) checked = false

    render(): TemplateResult {
        // Voir https://lit-html.polymer-project.org/guide/template-reference
        // On utilise .checked pour indiquer qu'on utilisera une valeur true ou false et pas un booleen pour l'attribut html checked de l'input dans le DOM
        // Un custom event est utilisé pour préciser aux autres composants que la tâche est complétée ou supprimée (cf todo-list pour voir comment cela est traité)
        // Un autre custom event est utilisé pour preciser que la tâche est supprimée
        return html`
            <label>
                <input .checked=${this.checked} @change=${() => this._fireEvent('completed')} type='checkbox'/>
                <span>${this.text}</span>
            </label>
            <button @click=${() => this._fireEvent('remove')}>Supprimer</button>
        `
    }

    // Une fonction générique est créée pour envoyer le custom event
    // On utilise ici une des méthodes disponibles dans la librairie UTILS : dispatchEvent permettant d'envoyer un custom event
    protected _fireEvent = (name: string): void => UTILS.dispatchEvent(name, { index: this.index }, this)
}

import { Component, css, customElement, html, property, UTILS, TemplateResult } from 'wapitis'
import { CSSResult } from 'wapitis/library/css'
// On importe le composant
import './todo'

...

render(): TemplateResult {
        // On utilise ensuite le tag html afin de créer un template avec les événements et les variables observées à mettre à jour
        // @click correspond à addEventListener('click', this.addTodos)
        // La partie du template this._todos est mis à jour car il s'agit d'une propriété observable
        // Voir https://lit-html.polymer-project.org/guide/template-reference, pour en savoir plus sur les possibilités de lit-html
        // On remplace l'ancien div par le composant w-todo en déclarant les différentes variables : text et index avec un . en préfix car il s'agit d'une valeur
        // ?checked permet d'indiquer qu'il s'agit d'un booleen et non d'une valeur. En tant qu'attribut seul checked sera écrit quand l'attribut sera à true. S'il est à false il ne sera pas présent
        // Enfin pour réaliser un addEventListener sur les custom event de ce composant nous posons un @ accompagné du nom de ce custom event et d'une méthode associée
        return html`
            <div class='title'>todos</div>
            <form>
                <input type='text' placeholder='Ajouter une tâche'/>
                <button @click=${this._addTodo}>Ajouter</button>
            </form>
            <div class='todos'>
                ${this._todos.map((todo, index) => html`<w-todo ?checked=${todo.checked} text=${todo.text} .index=${index} @remove=${this._removeTodo} @completed=${this._toggleTodo}></w-todo>`)}
            </div>
        `
    }

    // On va chercher l'élément input
    firstUpdated(): void {
        this._input = this.shadowRoot?.querySelector('input') as HTMLInputElement
    }

    // On ajoute à la propriété _todos la nouvelle tâche créée. C'est la methode render qui se charge de l'affichage lorsque _todos change
    protected _addTodo = (event: MouseEvent): void => {
        event.preventDefault()
        if (this._input && this._input.value.length > 0) {
            this._todos = [...this._todos, { text: this._input.value, checked: false }]
            this._input.value = ''
        }
    }

    // On supprime l'index demandé en filtrant le tableau existant grâce à l'index. La mise à jour du tableau permettra à la methode render de remplacer les élément nécessaires dans le template
    protected _removeTodo = (event: CustomEvent): void => {
        this._todos = this._todos.filter((_todo, _index) => _index !== (event.detail as Record<string, unknown>).index)
    }

    // On remplace dans le tableau la propriété checked par la valeur renvoyée grâce à l'index. La mise à jour du tableau permettra à la methode render de remplacer les élément nécessaires dans le template
    protected _toggleTodo = (event: CustomEvent): void => {
        this._todos = this._todos.map((_todo, _index) => _index === (event.detail as Record<string, unknown>).index ? { ..._todo, checked: !_todo.checked } : _todo)
    }
}

import { Component, css, customElement, html, property, UTILS, TemplateResult } from 'wapitis'
import { CSSResult } from 'wapitis/library/css'
// On importe les icons avec le fichier icons.svg
import icons from '../www/assets/img/icons.svg'

@customElement('w-todo')
export default class Todo extends Component {
    static get styles(): CSSResult {
        return css`
        :host {
            display: flex;
            word-break: break-all;
            padding: 15px 15px 15px 10px;
            line-height: 1.2;
            transition: color 0.4s;
            border: 1px solid #e6e6e6;
            margin-top: -1px;
            justify-content: space-between;
            background: #fdfdfd;
        }
        label {
            display: flex;
            align-items: center;
        }
        label span {
            padding-left: 0.5em;
            font-size: 24px;
            color: #4d4d4d;
            line-height: 1.2;
            transition: color 0.4s;
        }
        :host([checked]) label span {
            color: #d9d9d9;
            text-decoration: line-through;
        }
        input {
            display: none;
        }
        .icon {
            width: 1.7em;
            height: 1.7em;
            stroke: none;
            fill: #cacaca;
        }
        button {
            border: none;
            background: none;
            display: flex;
            justify-content: center;
            cursor: pointer;
        }
        .icon-x {
            fill: #cc9a9a;
            transition: all 0.4s;
            opacity: 0;
        }
        :host(:hover) .icon-x {
            opacity: 1;
        }
        button:hover .icon-x {
            fill: #af5b5e;
        }
        `
    }

    // On déclare les 3 propiétés observables en utilisant la directive @property. Comme il s'agit d'attribut, afin d'indiquer comment la conversion doit être faite entre l'attribut et la propriété, on indique le type pour index et checked, text étant un string il est inutile de l'indiquer. attribute est passé à false pour l'index afin qu'il n'apparaisse pas en tant qu'attribut html dans le dom
    @property() text: string
    @property({ attribute: false }) index: number
    @property({ type: Boolean }) checked = false

    render(): TemplateResult {
        // Voir https://lit-html.polymer-project.org/guide/template-reference
        // On utilise .checked pour indiquer qu'on utilisera une valeur true ou false et pas un booleen pour l'attribut html checked de l'input dans le DOM
        // Un custom event est utilisé pour préciser aux autres composants que la tâche est complétée ou supprimée (cf todo-list pour voir comment cela est traité)
        // Un autre custom event est utilisé pour preciser que la tâche est supprimée
        // On déclare une balise SVG qui va chercher les icones déclarés dans le fichier icons.svg
        return html`
            <label>
                <input .checked=${this.checked} @change=${() => this._fireEvent('completed')} type='checkbox'/>
                ${this.checked ? html`<svg class="icon"><use href=${icons}#icon-check-circle></use></svg>` : html`<svg class="icon"><use href=${icons}#icon-circle></use></svg>`}
                <span>${this.text}</span>
            </label>
            <button @click=${() => this._fireEvent('remove')} title='Supprimer'><svg class="icon icon-x"><use href=${icons}#icon-x></use></svg></button>
        `
    }

    ...