@supersoniks/concorde 2.0.7 → 3.0.0

package/src/core/components/functional/router/router.ts

@@ -0,0 +1,108 @@
+import {html, LitElement} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import {templateContent} from "lit/directives/template-content.js";
+import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
+import {repeat} from "lit/directives/repeat.js";
+import UrlPattern from "url-pattern";
+import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+const tagName = "sonic-router";
+/**
+ * ### Le router observe les modification document.location et met à jour sa vu de la manière suivante :
+ * * Il boucle sur ses template enfants et test si la regexp contenue dans l'attribut *data-route* match document.location
+ * * Si oui le contenu du template est affiché
+ * * Si l'attribut dataProviderExpression est fourni le contenu est entouré d'une div :
+ * * L'attribut "dataProvider" de cette div est le resultat de l'appel à la fonction replace sur la propriété location avec comme paramettres la regexpe et dataproviderExpression.
+ * * On peut également utiliser les des expressions du type url-pattern pour les paramètres de la route voir les exemples
+ * * les subscribers/fetch... du template ser réfèrerons à ce dataProvider
+ *
+ * **Exemples **
+ * Avec location = /youpla/utilisateur/2 :
+ * * RegExp : data-route = /utilisateur/(\d+) et dataproviderExpression = /user/$1 l'attribut dataProvider vaudra "/user/2"
+ * * url-pattern : /*utilisateur/:id et dataproviderExpression = /user/:id l'attribut dataProvider vaudra "/user/2"
+ */
+
+@customElement(tagName)
+export class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
+  templateValueAttribute = "data-route";
+
+  @property({type: String}) fallBackRoute?: string;
+
+  connectedCallback() {
+    this.noShadowDom = "";
+    LocationHandler.onChange(this);
+    super.connectedCallback();
+  }
+  disconnectedCallback(): void {
+    LocationHandler.offChange(this);
+    super.disconnectedCallback();
+  }
+  private _location: string = document.location.href.replace(document.location.origin, "");
+
+  @property() set location(value: string) {
+    this._location = value;
+    this.requestUpdate();
+  }
+  get location() {
+    return this._location;
+  }
+
+  render() {
+    const templates = [];
+    for (const t of this.templatePartsList) {
+      const path = t.getAttribute(this.templateValueAttribute) || "";
+      const regexp = new RegExp(path);
+      if (regexp.test(this.location)) {
+        templates.push(t);
+      } else {
+        try {
+          if (new UrlPattern("(/)*" + path + "*").match(this.location)) {
+            t.setAttribute("mode", "patternMatching");
+            templates.push(t);
+          }
+        } catch (e) {
+          if (this.location.indexOf(path.replace(document.location.origin, "")) != -1) {
+            templates.push(t);
+          }
+        }
+      }
+    }
+    if (templates.length == 0) {
+      if (this.fallBackRoute && this.isConnected) {
+        document.location.href = this.fallBackRoute;
+      }
+      const fallback = this.templatePartsList.find((t) => t.hasAttribute("data-fallback"));
+      if (fallback) {
+        templates.push(fallback);
+      }
+    }
+
+    return html`${repeat(
+      templates,
+      (template, index) => {
+        template;
+        return index + new Date().getTime();
+      },
+      (template) => {
+        if (template.title) document.title = template.title;
+        if (template.hasAttribute("dataProviderExpression")) {
+          let dataProvider = "";
+          const dataProviderExpression = template.getAttribute("dataProviderExpression") || "";
+          if (template.getAttribute("mode") == "patternMatching") {
+            const matcher = new UrlPattern("(/)*" + (template.getAttribute(this.templateValueAttribute) || "") + "*");
+            const filler = new UrlPattern(dataProviderExpression);
+            dataProvider = filler.stringify(matcher.match(this.location));
+          } else {
+            const regexp = new RegExp(template.getAttribute(this.templateValueAttribute) || "");
+            const match = (this.location + "").match(regexp);
+            if (match) {
+              dataProvider = match.shift()?.replace(regexp, dataProviderExpression) || "";
+            }
+          }
+          return html`<div style="display:contents" dataProvider="${dataProvider}">${templateContent(template)}</div>`;
+        }
+        return templateContent(template);
+      }
+    )}`;
+  }
+}

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

@@ -0,0 +1,229 @@
+import {
+  SDUINode,
+  SDUITransformDescription,
+  SDUITransformActionName,
+  SDUITransformActionFunction,
+  SDUITransformAction,
+  SDUITransformList,
+  SDUIDescriptor,
+} from "@supersoniks/concorde/core/components/functional/sdui/types";
+export default class SDUIDescriptorTransformer {
+  sduiDescriptor?: SDUIDescriptor;
+
+  /**
+   * 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
+   *
+   */
+  async transform(sduiDescriptor: SDUIDescriptor, transformDescriptor: SDUITransformDescription) {
+    this.sduiDescriptor = sduiDescriptor;
+    if (this.sduiDescriptor.library) {
+      for (const key in transformDescriptor.library) {
+        this.sduiDescriptor.library[key] = transformDescriptor.library[key];
+      }
+    }
+    for (const 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: SDUITransformAction) {
+    const uis = this.getNodesMatchingPatterns(transformAction.patterns, this.sduiDescriptor);
+    (this as Record<SDUITransformActionName, SDUITransformActionFunction>)[transformAction.action](
+      transformAction,
+      uis
+    );
+  }
+  /**
+   * 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 {
+    if (!patterns) return [];
+    if (!node) return [];
+    const nodes: Array<SDUINode> | undefined = node.nodes;
+    if (!nodes) return [];
+    let result: SDUITransformList = [];
+    let index = 0;
+    for (const pattern of patterns) {
+      for (const 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?: string, regExpString?: string) {
+    return !regExpString || (stringToTest && stringToTest.match(regExpString));
+  }
+
+  /**
+   * Return true si le pattern match avec le noeud, false sinon.
+   */
+  nodeMatchesPattern(pattern: SDUINode, node: SDUINode) {
+    const patternDynamic = pattern as Record<string, string>;
+    const nodeDynamic = node as Record<string, string>;
+    const keys = ["libraryKey", "innerHTML", "prefix", "suffix", "markup"];
+    for (const key of keys) {
+      if (!this.stringMatchesExpression(nodeDynamic[key], patternDynamic[key])) {
+        return false;
+      }
+    }
+    const patternAttributes = pattern.attributes;
+    const nodeAttributes = node.attributes;
+    if (patternAttributes && !nodeAttributes) return false;
+    if (patternAttributes) {
+      for (const name in patternAttributes) {
+        if (!nodeAttributes || !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: SDUITransformAction, list: SDUITransformList) {
+    transformAction;
+    for (const item of list) {
+      item.parent.nodes?.splice(item.parent.nodes.indexOf(item.child), 1);
+      if (item.child.nodes) {
+        item.parent.nodes?.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: SDUITransformAction, list: SDUITransformList) {
+    const wrapper = {...transformAction.ui} as SDUINode;
+    if (!wrapper.nodes) wrapper.nodes = [];
+    let i = 0;
+    for (const item of list) {
+      wrapper.nodes?.push(item.child);
+      if (i > 0) {
+        item.parent.nodes?.splice(item.parent.nodes.indexOf(item.child), 1);
+      }
+      i++;
+    }
+    const idx = list[0]?.parent.nodes?.indexOf(list[0].child);
+    if (idx) {
+      list[0].parent.nodes?.splice(idx, 1);
+      list[0].parent.nodes?.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: SDUITransformAction, list: SDUITransformList) {
+    for (const item of list) {
+      item.parent.nodes?.splice(item.parent.nodes.indexOf(item.child), 1);
+      let list: SDUITransformList = [];
+      if (transformAction.after) list = this.getNodesMatchingPatterns([transformAction.after], this.sduiDescriptor);
+      if (transformAction.before) list = this.getNodesMatchingPatterns([transformAction.before], this.sduiDescriptor);
+      const element = list[0];
+      if (element) {
+        element.parent.nodes?.splice(
+          element.parent.nodes.indexOf(element.child) + (transformAction.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: SDUITransformAction, list: SDUITransformList) {
+    for (const item of list) {
+      const newUI = {...transformAction.ui} as SDUINode;
+      if (!newUI.attributes) {
+        newUI.attributes = {};
+      }
+      const childAttributes = item.child.attributes;
+      if (childAttributes) {
+        for (const key in childAttributes) {
+          if (!Object.prototype.hasOwnProperty.call(newUI.attributes, "key"))
+            newUI.attributes[key] = childAttributes[key];
+        }
+      }
+
+      const keys = ["libraryKey", "innerHTML", "prefix", "suffix", "markup"];
+      const childDynamic = item.child as Record<string, object | string>;
+      const newUIDynamic = newUI as Record<string, object | string>;
+      for (const key of keys) {
+        if (!Object.prototype.hasOwnProperty.call(newUI, key) && childDynamic[key])
+          newUIDynamic[key] = childDynamic[key];
+      }
+
+      if (!newUI.nodes) {
+        newUI.nodes = [];
+      }
+      const childNodes = item.child.nodes;
+      if (childNodes) {
+        for (const node of childNodes) {
+          newUI.nodes.push(node);
+        }
+      }
+      const idx = item.parent.nodes?.indexOf(item.child) || -1;
+      if (idx != -1) {
+        item.parent.nodes?.splice(idx, 1);
+        item.parent.nodes?.splice(idx, 0, newUI);
+      }
+    }
+  }
+  /**
+   * Supprime tous les éléments de la liste.
+   */
+  delete(transformAction: SDUITransformAction, list: SDUITransformList) {
+    transformAction;
+    for (const item of list) {
+      item.parent.nodes?.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: SDUITransformAction, list: SDUITransformList) {
+    const positionType = transformAction.after ? "after" : transformAction.before ? "before" : "in";
+    list = [];
+    if (transformAction.after) {
+      list = this.getNodesMatchingPatterns([transformAction.after], this.sduiDescriptor);
+    } else if (transformAction.before) {
+      list = this.getNodesMatchingPatterns([transformAction.before], this.sduiDescriptor);
+    } else if (transformAction.in) {
+      list = this.getNodesMatchingPatterns([transformAction.in], this.sduiDescriptor);
+    }
+    const node = list[0];
+    if (node) {
+      if (positionType == "in") {
+        if (!node.child.nodes) node.child.nodes = [];
+        node.child.nodes.push({...transformAction.ui} as SDUINode);
+      } else {
+        node.parent.nodes?.splice(node.parent.nodes.indexOf(node.child) + (positionType == "after" ? 1 : 0), 0, {
+          ...transformAction.ui,
+        } as SDUINode);
+      }
+    }
+  }
+}

package/{core → src/core}/components/functional/sdui/default-library.json

@@ -10,13 +10,13 @@
     },
     "fieldset": {
         "tagName": "sonic-fieldset",
-        "nodes": [{ "libraryKey": "formLayout" }],
-        "contentElementSelector": "sonic-form-layout"
+        "nodes":[{"libraryKey":"formLayout"}],
+        "contentElementSelector":"sonic-form-layout"
     },
     "managed_file": {
         "tagName": "sonic-input",
         "attributes": {
-            "variant": "ghost",
+            "variant":"ghost",
             "type": "file"
         }
     },
@@ -61,17 +61,17 @@
         "attributes": {
             "onClick": true
         },
-        "contentElementSelector": "sonic-button",
-        "nodes": [
+        "contentElementSelector":"sonic-button",
+        "nodes":[
             {
-                "libraryKey": "button",
-                "attributes": { "type": "success" },
-                "nodes": [
+                "libraryKey":"button",
+                "attributes":{"type":"success"},
+                "nodes":[
                     {
-                        "tagName": "sonic-icon",
-                        "attributes": {
-                            "name": "check",
-                            "slot": "prefix"
+                        "tagName":"sonic-icon",
+                        "attributes":{
+                            "name":"check",
+                            "slot":"prefix"
                         }
                     }
                 ]
@@ -105,4 +105,4 @@
     "divider": {
         "tagName": "sonic-divider"
     }
-}
+}

package/src/core/components/functional/sdui/example.json

@@ -0,0 +1,99 @@
+{
+  "nodes": [
+    {
+      "tagName": "div",
+      "attributes": {
+        "class": "flex gap-2 items-center",
+        "formdataprovider": "states-basic-example"
+      },
+      "nodes": [
+        {
+          "tagName": "sonic-button",
+          "attributes": {
+            "radio": "",
+            "name": "selection",
+            "value": "#home",
+            "checked": "",
+            "size": "xs"
+          },
+          "innerHTML": "Home"
+        },
+        {
+          "tagName": "sonic-button",
+          "attributes": {
+            "radio": "",
+            "name": "selection",
+            "value": "#about",
+            "size": "xs"
+          },
+          "innerHTML": "About"
+        },
+        {
+          "tagName": "sonic-button",
+          "attributes": {
+            "radio": "",
+            "name": "selection",
+            "value": "#work",
+            "size": "xs"
+          },
+          "innerHTML": "Work"
+        },
+        {
+          "tagName": "sonic-button",
+          "attributes": {
+            "radio": "",
+            "name": "selection",
+            "value": "#contact",
+            "size": "xs"
+          },
+          "innerHTML": "Contact"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "class": "text-center text-neutral-700 border rounded text-4xl  my-6 p-3 "
+      },
+      "nodes": [
+        {
+          "tagName": "sonic-states",
+          "attributes": {
+            "dataprovider": "states-basic-example",
+            "data-path": "selection"
+          },
+          "nodes": [
+            {
+              "tagName": "template",
+              "attributes": {
+                "data-value": "#home"
+              },
+              "innerHTML": "Home"
+            },
+            {
+              "tagName": "template",
+              "attributes": {
+                "data-value": "#about"
+              },
+              "innerHTML": "About"
+            },
+            {
+              "tagName": "template",
+              "attributes": {
+                "data-value": "#work"
+              },
+              "innerHTML": "Work"
+            },
+            {
+              "tagName": "template",
+              "attributes": {
+                "data-value": "#contact"
+              },
+              "innerHTML": "Contact"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/core/components/functional/sdui/sdui-utils.ts

@@ -0,0 +1,62 @@
+import {SDUIDescriptor, SDUINode} from "./types";
+export default class SDUIUtils {
+  static toJson(nodes: HTMLCollection) {
+    const desc: SDUIDescriptor = {};
+    desc.nodes = [];
+    for (const node of nodes) {
+      const parsedChild = SDUIUtils.parseNode(node);
+      if (parsedChild) {
+        desc.nodes.push(parsedChild);
+      }
+    }
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(desc, null, 2));
+    const dlAnchorElem = document.createElement("a");
+    dlAnchorElem.setAttribute("href", dataStr);
+    dlAnchorElem.setAttribute("download", "sdui.json");
+    document.body.appendChild(dlAnchorElem);
+    dlAnchorElem.click();
+    dlAnchorElem.remove();
+    return JSON.stringify(desc, null, 4);
+  }
+  static parseNode(node: Node) {
+    const sdui: SDUINode = {};
+    const nodeType = node.nodeType;
+    if (nodeType == Node.ELEMENT_NODE) {
+      const name = node.nodeName.toLowerCase();
+      sdui.tagName = name;
+      const element = node as HTMLElement;
+      sdui.attributes = {};
+      const attributes = element.attributes;
+      const attrLength = attributes.length;
+      for (let i = 0; i < attrLength; i++) {
+        const attribute = attributes.item(i);
+        if (attribute) sdui.attributes[attribute.name] = attribute.value;
+      }
+
+      let childNodes = element.childNodes;
+      let children = element.children;
+      if (name == "template") {
+        const template = node as HTMLTemplateElement;
+        childNodes = template.content.childNodes;
+        children = template.content.children;
+      }
+      if (children.length > 0) {
+        sdui.nodes = [];
+        for (const ch of childNodes) {
+          const parsedChild = SDUIUtils.parseNode(ch);
+          if (parsedChild) {
+            sdui.nodes.push(parsedChild);
+          }
+        }
+      } else if (element.innerHTML) {
+        sdui.innerHTML = element.innerHTML;
+      }
+    }
+    if (nodeType == Node.TEXT_NODE) {
+      const content = (node.textContent || "").trim();
+      if (!content) return null;
+      sdui.markup = content;
+    }
+    return sdui;
+  }
+}