@supersoniks/concorde 1.1.40 → 1.1.41

package/core/components/functional/sdui/SDUIDescriptorTransformer.d.ts

@@ -0,0 +1,59 @@
+import { SDUINode, SDUITransformDescription, SDUITransformAction, SDUITransformList, SDUIDescriptor } from "@supersoniks/concorde/core/components/functional/sdui/types";
+export default class SDUIDescriptorTransformer {
+    sduiDescriptor?: SDUIDescriptor;
+    constructor();
+    /**
+     * Tranform un SDUIDescriptor via une SDUITransformDescription
+     * Attention fonction non pure :  la sduiDescriptor est modifiée en place.
+     * * La librarie de la sduiDescriptor est mise à jour avec celle présente dans SDUITransformDescription<br>
+     * Si des clefs de librairie correspondent, celles de SDUITransformDescription ecrasent celles existantes
+     * * Ensuite des actions de transformations sont menées sur les nodes du SDUIDescriptor
+     *
+     */
+    transform(sduiDescriptor: SDUIDescriptor, transformDescriptor: SDUITransformDescription): Promise<void>;
+    /**
+     * Effectue une actions de transformation sur les noeuds (nodes) de la sduiDescriptor (SDUIDescriptor)
+     * La des noeuds impacté est sélectionnée via pattern matching (voir SDUITransformAction.pattern et getNodesMatchingPatterns);
+     * Voir le détail des actions de transformations dns les fonctions appellées dans le switch.
+     */
+    transformAction(transformAction: SDUITransformAction): void;
+    /**
+     * Retourne les noeuds du SDUIDescriptor qui matche la liste de patterns fournis, dans l'ordre des patterns fournis
+     */
+    getNodesMatchingPatterns(patterns: Array<SDUINode> | undefined, node?: SDUIDescriptor): SDUITransformList;
+    /**
+     * Utilisé pour voir si un élément du pattern match le même élement du noeud en cours de traitement
+     */
+    stringMatchesExpression(stringToTest?: string, regExpString?: string): true | "" | RegExpMatchArray | null | undefined;
+    /**
+     * Return true si le pattern match avec le noeud, false sinon.
+     */
+    nodeMatchesPattern(pattern: SDUINode, node: SDUINode): boolean;
+    /**
+     * Pour chaque élément de la liste, remplace l'élément par ses enfants
+     */
+    unWrap(transformAction: SDUITransformAction, list: SDUITransformList): void;
+    /**
+     * Regroupe tous les éléments de la liste dans l'élément fourni via la prop `ui` de transformAction
+     * L'élément créé est inséré en lieu et place du premier élément de la liste
+     */
+    wrap(transformAction: SDUITransformAction, list: SDUITransformList): void;
+    /**
+     * Déplace tous les noeuds de la liste avant ou après le noeuds sélectionné par pattern matching via l'attribut correspondant `before` ou `after`
+     */
+    move(transformAction: SDUITransformAction, list: SDUITransformList): void;
+    /**
+     * Transform ous les éléments fourni dans la liste en un élément créé a partir du model fourni dans ui.
+     * Les props attributs et autre props de chaque élément sont conservés si non remapés
+     */
+    remap(transformAction: SDUITransformAction, list: SDUITransformList): void;
+    /**
+     * Supprime tous les éléments de la liste.
+     */
+    delete(transformAction: SDUITransformAction, list: SDUITransformList): void;
+    /**
+     * Ajoute une copie de l'élément décrit dans la propriété ui de transformAction avant ou après chaque élément de la liste
+     * La positione st déterminée par l'attribute before ou after ou in qui est un pattern permettant la sélection de l'élément de référence pur l'ajout
+     */
+    insert(transformAction: SDUITransformAction, list: SDUITransformList): void;
+}

package/core/components/functional/sdui/SDUIDescriptorTransformer.js

@@ -0,0 +1,219 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export default class SDUIDescriptorTransformer {
+    constructor() { }
+    /**
+     * Tranform un SDUIDescriptor via une SDUITransformDescription
+     * Attention fonction non pure :  la sduiDescriptor est modifiée en place.
+     * * La librarie de la sduiDescriptor est mise à jour avec celle présente dans SDUITransformDescription<br>
+     * Si des clefs de librairie correspondent, celles de SDUITransformDescription ecrasent celles existantes
+     * * Ensuite des actions de transformations sont menées sur les nodes du SDUIDescriptor
+     *
+     */
+    transform(sduiDescriptor, transformDescriptor) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.sduiDescriptor = sduiDescriptor;
+            if (this.sduiDescriptor.library) {
+                for (let key in transformDescriptor.library) {
+                    this.sduiDescriptor.library[key] = transformDescriptor.library[key];
+                }
+            }
+            for (let item of transformDescriptor.transforms) {
+                this.transformAction(item);
+            }
+        });
+    }
+    /**
+     * Effectue une actions de transformation sur les noeuds (nodes) de la sduiDescriptor (SDUIDescriptor)
+     * La des noeuds impacté est sélectionnée via pattern matching (voir SDUITransformAction.pattern et getNodesMatchingPatterns);
+     * Voir le détail des actions de transformations dns les fonctions appellées dans le switch.
+     */
+    transformAction(transformAction) {
+        let uis = this.getNodesMatchingPatterns(transformAction.patterns, this.sduiDescriptor);
+        this[transformAction.action](transformAction, uis);
+    }
+    /**
+     * Retourne les noeuds du SDUIDescriptor qui matche la liste de patterns fournis, dans l'ordre des patterns fournis
+     */
+    getNodesMatchingPatterns(patterns, node) {
+        if (!patterns)
+            return [];
+        if (!node)
+            return [];
+        let nodes = node.nodes;
+        if (!nodes)
+            return [];
+        let result = [];
+        let index = 0;
+        for (let pattern of patterns) {
+            for (let child of nodes) {
+                if (this.nodeMatchesPattern(pattern, child)) {
+                    result.push({ parent: node, child: child, index: index });
+                }
+                result = result.concat(this.getNodesMatchingPatterns([pattern], child));
+                index++;
+            }
+        }
+        return result;
+    }
+    /**
+     * Utilisé pour voir si un élément du pattern match le même élement du noeud en cours de traitement
+     */
+    stringMatchesExpression(stringToTest, regExpString) {
+        return !regExpString || (stringToTest && stringToTest.match(regExpString));
+    }
+    /**
+     * Return true si le pattern match avec le noeud, false sinon.
+     */
+    nodeMatchesPattern(pattern, node) {
+        let patternDynamic = pattern;
+        let nodeDynamic = node;
+        let keys = ["libraryKey", "innerHTML", "prefix", "suffix", "markup"];
+        for (let key of keys) {
+            if (!this.stringMatchesExpression(nodeDynamic[key], patternDynamic[key])) {
+                return false;
+            }
+        }
+        let patternAttributes = pattern.attributes;
+        let nodeAttributes = node.attributes;
+        if (patternAttributes && !nodeAttributes)
+            return false;
+        if (patternAttributes) {
+            for (let name in patternAttributes) {
+                if (!this.stringMatchesExpression(nodeAttributes[name], patternAttributes[name])) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    /**
+     * Pour chaque élément de la liste, remplace l'élément par ses enfants
+     */
+    unWrap(transformAction, list) {
+        var _a, _b;
+        transformAction;
+        for (let item of list) {
+            (_a = item.parent.nodes) === null || _a === void 0 ? void 0 : _a.splice(item.parent.nodes.indexOf(item.child), 1);
+            if (item.child.nodes) {
+                (_b = item.parent.nodes) === null || _b === void 0 ? void 0 : _b.splice(item.parent.nodes.indexOf(item.child), 0, ...item.child.nodes);
+            }
+        }
+    }
+    /**
+     * Regroupe tous les éléments de la liste dans l'élément fourni via la prop `ui` de transformAction
+     * L'élément créé est inséré en lieu et place du premier élément de la liste
+     */
+    wrap(transformAction, list) {
+        var _a, _b, _c, _d, _e;
+        let wrapper = Object.assign({}, transformAction.ui);
+        if (!wrapper.nodes)
+            wrapper.nodes = [];
+        let i = 0;
+        for (let item of list) {
+            (_a = wrapper.nodes) === null || _a === void 0 ? void 0 : _a.push(item.child);
+            if (i > 0) {
+                (_b = item.parent.nodes) === null || _b === void 0 ? void 0 : _b.splice(item.parent.nodes.indexOf(item.child), 1);
+            }
+            i++;
+        }
+        let idx = (_c = list[0].parent.nodes) === null || _c === void 0 ? void 0 : _c.indexOf(list[0].child);
+        if (idx) {
+            (_d = list[0].parent.nodes) === null || _d === void 0 ? void 0 : _d.splice(idx, 1);
+            (_e = list[0].parent.nodes) === null || _e === void 0 ? void 0 : _e.splice(idx, 0, wrapper);
+        }
+    }
+    /**
+     * Déplace tous les noeuds de la liste avant ou après le noeuds sélectionné par pattern matching via l'attribut correspondant `before` ou `after`
+     */
+    move(transformAction, list) {
+        var _a, _b;
+        for (let item of list) {
+            (_a = item.parent.nodes) === null || _a === void 0 ? void 0 : _a.splice(item.parent.nodes.indexOf(item.child), 1);
+            let positionType = transformAction.after ? "after" : "before";
+            let element = this.getNodesMatchingPatterns([transformAction[positionType]], this.sduiDescriptor)[0];
+            if (element) {
+                (_b = element.parent.nodes) === null || _b === void 0 ? void 0 : _b.splice(element.parent.nodes.indexOf(element.child) + (positionType == "after" ? 1 : 0), 0, item.child);
+            }
+        }
+    }
+    /**
+     * Transform ous les éléments fourni dans la liste en un élément créé a partir du model fourni dans ui.
+     * Les props attributs et autre props de chaque élément sont conservés si non remapés
+     */
+    remap(transformAction, list) {
+        var _a, _b, _c;
+        console.log(list);
+        for (let item of list) {
+            let newUI = Object.assign({}, transformAction.ui);
+            if (!newUI.attributes) {
+                newUI.attributes = {};
+            }
+            let childAttributes = item.child.attributes;
+            if (childAttributes) {
+                for (let key in childAttributes) {
+                    if (!newUI.attributes.hasOwnProperty("key"))
+                        newUI.attributes[key] = childAttributes[key];
+                }
+            }
+            let keys = ["libraryKey", "innerHTML", "prefix", "suffix", "markup"];
+            let childDynamic = item.child;
+            let newUIDynamic = newUI;
+            for (let key of keys) {
+                if (!newUI.hasOwnProperty(key) && childDynamic[key])
+                    newUIDynamic[key] = childDynamic[key];
+            }
+            if (!newUI.nodes) {
+                newUI.nodes = [];
+            }
+            let childNodes = item.child.nodes;
+            if (childNodes) {
+                for (let node of childNodes) {
+                    newUI.nodes.push(node);
+                }
+            }
+            let idx = ((_a = item.parent.nodes) === null || _a === void 0 ? void 0 : _a.indexOf(item.child)) || -1;
+            if (idx != -1) {
+                (_b = item.parent.nodes) === null || _b === void 0 ? void 0 : _b.splice(idx, 1);
+                (_c = item.parent.nodes) === null || _c === void 0 ? void 0 : _c.splice(idx, 0, newUI);
+            }
+        }
+    }
+    /**
+     * Supprime tous les éléments de la liste.
+     */
+    delete(transformAction, list) {
+        var _a;
+        transformAction;
+        for (let item of list) {
+            (_a = item.parent.nodes) === null || _a === void 0 ? void 0 : _a.splice(item.parent.nodes.indexOf(item.child), 1);
+        }
+    }
+    /**
+     * Ajoute une copie de l'élément décrit dans la propriété ui de transformAction avant ou après chaque élément de la liste
+     * La positione st déterminée par l'attribute before ou after ou in qui est un pattern permettant la sélection de l'élément de référence pur l'ajout
+     */
+    insert(transformAction, list) {
+        var _a;
+        list;
+        let positionType = transformAction.after ? "after" : transformAction.before ? "before" : "in";
+        let node = this.getNodesMatchingPatterns([transformAction[positionType]], this.sduiDescriptor)[0];
+        if (node) {
+            if (positionType == "in") {
+                if (!node.child.nodes)
+                    node.child.nodes = [];
+                node.child.nodes.push(Object.assign({}, transformAction.ui));
+            }
+            else {
+                (_a = node.parent.nodes) === null || _a === void 0 ? void 0 : _a.splice(node.parent.nodes.indexOf(node.child) + (positionType == "after" ? 1 : 0), 0, Object.assign({}, transformAction.ui));
+            }
+        }
+    }
+}

package/core/components/functional/sdui/sdui.d.ts

@@ -1,21 +1,6 @@
 import { LitElement } from "lit";
-declare type SDUIDescriptor = {
-    js?: Array<string>;
-    css?: Array<string>;
-    library?: Record<string, SDUINode>;
-    nodes?: Array<SDUINode>;
-};
-declare type SDUINode = {
-    library?: string;
-    markup?: string;
-    type?: string;
-    attributes: Record<string, string>;
-    nodes?: Array<SDUINode>;
-    innerHTML?: string;
-    prefix?: string;
-    suffix?: string;
-};
-declare const SonicComponent_base: {
+import { SDUIDescriptor } from "@supersoniks/concorde/core/components/functional/sdui/types";
+declare const SonicSDUI_base: {
     new (...args: any[]): {
         api: import("../../../utils/api").default | null;
         key: String;
@@ -56,13 +41,84 @@ declare const SonicComponent_base: {
         hasAttribute(attributeName: String): boolean;
     };
 } & (new (...args: any[]) => import("../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-export declare class SonicComponent extends SonicComponent_base {
+/**
+ *  ### sonic-sdui (Server Driven User Interface) est un fetcher chargant un JSON décrivant une interface utilisateur
+ *
+ * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
+ * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
+ * * Le format du JSON est décrit par le type SDUIDescriptor
+ * * Un attribut supplémentaire `transformation` permet de transformer le json reçu avant la générationd e l'interface utilisateur<br>
+ * Son format est décrit par le type SDUITransformDescription
+ *
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
+ * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
+ * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
+ * *
+ */
+export declare class SonicSDUI extends SonicSDUI_base {
     connectedCallback(): void;
+    /**
+     * On peut passer la description sous form de props, sinon il faut utiliser l'attribut fetch
+     */
     get props(): SDUIDescriptor;
-    loadJS(src: string): Promise<unknown>;
-    loadCSS(src: string): Promise<unknown>;
     set props(value: SDUIDescriptor);
+    /**
+     * updateContents est déclenché quand les props sont renseignées
+     * Le contenu du composant est regénéré en fonction du descripteur fourni
+     */
     updateContents(): Promise<void>;
-    parseChild(props: SDUINode): HTMLElement;
+    /**
+     * Suppressiond du contenu du composant avant le génération de la nouvelle ui
+     */
+    private removeChildren;
+    /**
+     * Chargement de fichiers js et css associés si besoin
+     **/
+    private loadAssets;
+    /**
+     * Transformation de la data fournie via props si il y a un attribut transformation
+     * */
+    private transformSDUIDescriptor;
+    /**
+     * Point d'entrée : transformation des noeuds fournis en éléments graphiques
+     **/
+    private parseRootNodes;
+    /**
+     * On parse un noeud ce qui crée un éléments graphique et ses enfants par recursivité via `handleChildNodes`
+     */
+    private parseChild;
+    /**
+     * Si le noeud courant a des propriétés prefix et ou suffix il est entouré des markups fournis dans ces props.
+     * Le tout est inclu dans une div en display contents
+     */
+    private handlePrefixSuffix;
+    /**
+     * Création des enfants du noeud courant
+     * Si l'enfant à un attribut parentElementSelector, il est ajouté dans le noeud correspondant au sélecteur css associé et non pas dans l'élément directement.
+     */
+    private handleChildNodes;
+    /**
+     * Gestion de librarie :
+     * * Si l'élément référence un élément de la librairie, on se sert de cet élément comme model pour créer le composant graphique.
+     * * Sa propriété contentElement retournée vaut element par défaut.
+     * * Si contentElementSelector est definit, alors contentElement correspond à l'élément obtenu par selection css d'après la valeurs de contentElementSelector
+     * * Les éléments enfants seront ensuite ajoutés dans contentElement
+     */
+    private handleLibrary;
+    /**
+     * Remplissage des attributs html avec les attributs fournis dans le noeud
+     */
+    private handleAttributes;
+    /**
+     * Si une propriété markup est fournie, l'élément est créé à partir de la chaine html fournie avant d'être configuré
+     */
+    private handleMarkup;
+    /**
+     * si le noeud à une propriété innerHTML, on l'ajout ay innerHTML de l'élément html en cours de création
+     */
+    private handleInnerHTML;
 }
 export {};