Cadence Mini-Programs

Coloration, diagnostics, complétion et navigation pour les mini-programmes Cadence.

L'extension agit sur deux sortes de fichiers :

• les templates : pages/<nom>/template.html et components/<nom>/template.html ;
• le manifeste : manifest.json.

Dans un template, la barre d'état affiche le langage « Cadence Template ».

Templates

Coloration

• Interpolations {{ … }} : le contenu est coloré comme du JavaScript.
• Blocs : @if, @else if, @else, @for avec of et track, @switch, @case, @default.
• Liaisons [prop]="…" et événements (tap)="…" : la valeur est colorée comme du code.

Commentaires et indentation fonctionnent comme en HTML. Taper {{ insère aussi les }} de fermeture.

Diagnostics

Les erreurs de template sont soulignées pendant la frappe, par exemple :

• une balise non fermée ;
• une interpolation dans une valeur d'attribut ;
• un @for sans track.

L'extension utilise le parseur du compilateur. Une erreur soulignée sera aussi refusée par pnpm mini build.

Complétion

Balises. Après <, la liste propose les éléments et composants du moteur (view, text, switch, picker…) et les composants du mini-programme, avec leur documentation.

Props. Dans une balise ouvrante, la liste propose les props de la balise, en attribut ou après [. Un attribut littéral alimente la prop du même nom : <cell title="Réglages"> équivaut à [title]="'Réglages'".

Icônes. Dans <icon name="…">, la liste s'ouvre dès le guillemet ouvrant. Elle propose les icônes du moteur et celles du mini-programme : les fichiers .svg du dossier icons/ qui commencent par <svg. Une icône du mini-programme remplace l'icône du moteur de même nom.

Expressions. Dans {{ … }}, dans la valeur d'une liaison ou d'un événement, et dans l'en-tête d'un bloc, la liste propose :

• les noms de l'objet retourné par le logic.ts ;
• les props, dans un composant ;
• la variable de boucle et $index, à l'intérieur d'un @for ;
• la variable de boucle, sans $index, dans track ;
• $event, dans un événement.

Une variable de boucle masque un nom du logic.ts qui porte le même nom, comme à la compilation.

Navigation

⌘-clic (Ctrl-clic sous Windows et Linux) :

• sur un composant, comme <product-card> : ouvre components/product-card/template.html ;
• sur une variable de boucle : va à son @for ;
• sur un nom retourné par le logic.ts : va à sa clé dans l'objet retourné ;
• sur une prop : va à son nom dans props.

Sur la clé, un second ⌘-clic mène à sa déclaration TypeScript.

Lecture du logic.ts

L'extension lit le logic.ts sans l'exécuter. Elle reconnaît la forme de la documentation, comme dans ce composant :

import { navigateBack } from '@cadence/router';

export const props = ['title', 'canGoBack'];

export default function PageHeader(): Record<string, unknown> {
  return { goBack: () => navigateBack() };
}

• Props : une liste de chaînes littérales. Ici, title et canGoBack.
• Noms : l'objet retourné par la fonction exportée par défaut. Ici, goBack.

Dans cet objet, les clés courtes ({ total }), les paires ({ total: … }) et les méthodes ({ submit() {} }) sont reconnues. Un étalement (...autres) n'ajoute aucun nom.

Écrit autrement (fonction fléchée, objet construit ailleurs, liste de props calculée), le fichier ne donne aucun nom : l'extension ne devine pas.

Seul le fichier enregistré compte. Un nom ajouté apparaît après l'enregistrement.

Manifeste

Le manifest.json est validé pendant la frappe : clés connues, types, valeurs autorisées, deux à cinq onglets, code de langue bien formé (fr, fr-FR). Une clé mal orthographiée est signalée, alors que le compilateur l'ignore sans prévenir.

La validation ne concerne que les manifestes qui contiennent entry ou pages. Le manifeste d'une application web n'est pas touché.

Dans le tabBar, les champs icon et activeIcon proposent les noms d'icônes.

Limites

• Diagnostics : une seule erreur est soulignée à la fois. Le soulignement peut tomber juste après l'erreur. Les erreurs dans une expression ou dans les styles n'apparaissent qu'au build.
• Manifeste : les règles entre deux champs ne sont vérifiées qu'au build (entrée absente des pages, onglet vers une page inconnue, page de sous-package hors de sa racine).
• Complétion : rien n'est proposé après un point (line.), pour les globaux (Math, JSON…), sur le nom d'un événement ou dans une balise fermante.
• Blocs : un } écrit comme texte dans un élément, à l'intérieur d'un bloc, est lu comme la fin du bloc. La variable de boucle n'est plus proposée après lui.
• Navigation : le ⌘-clic ne part pas d'une prop écrite dans une balise ([title] dans <page-header>).
• Icônes : un nom d'icône inconnu n'est signalé ni dans le template, ni au build.

Licence

MIT. La configuration d'édition des templates reprend celle du HTML de VS Code, sous licence MIT.