WIP: adding component aliases #681

Domiii · Mar 6, 2022 · 93fcd70 · 93fcd70
1 parent b6edd28
commit 93fcd70
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 17 deletions.
diff --git a/dbux-graph-client/src/componentLib/ClientComponentEndpoint.js b/dbux-graph-client/src/componentLib/ClientComponentEndpoint.js
@@ -4,6 +4,7 @@ import ClientComponentList from './ClientComponentList';
 
 /**
  * The Client endpoint is controlled by the Host endpoint.
+ * @extends ComponentEndpoint<ClientComponentEndpoint>
  */
 class ClientComponentEndpoint extends ComponentEndpoint {
   /**
@@ -68,6 +69,14 @@ class ClientComponentEndpoint extends ComponentEndpoint {
   // private methods
   // ###########################################################################
 
+  _build(componentManager, parent, componentId, initialState, clientProps) {
+    // store client endpoint props
+    Object.assign(this, clientProps);
+
+    // build
+    return super._build(componentManager, parent, componentId, initialState);
+  }
+
   _performClientInit(role) {
     this._internalRoleName = role;
     if (this.owner) {

diff --git a/dbux-graph-client/src/componentLib/ClientComponentManager.js b/dbux-graph-client/src/componentLib/ClientComponentManager.js
@@ -44,7 +44,7 @@ class AppComponent extends ClientComponentEndpoint {
   }
 
   _publicInternal = {
-    async createClientComponent(parentId, role, componentId, componentName, shared, initialState) {
+    async createClientComponent(parentId, role, componentId, componentName, shared, initialState, clientAdditionalProps) {
       const parent = this.componentManager.getComponent(parentId);
 
       // NOTE: parent should never be null (except for AppComponent, which does not get initialized this way)
@@ -56,7 +56,10 @@ class AppComponent extends ClientComponentEndpoint {
       }
 
       // NOTE: `_registerComponent` also calls `_build`
-      const component = this.componentManager._registerComponent(componentId, parent, ComponentClass, initialState);
+      /**
+       * @type {ClientComponentEndpoint}
+       */
+      const component = this.componentManager._registerComponent(componentId, parent, ComponentClass, initialState, clientAdditionalProps);
 
       // deserialize shared
       this._deserializeShared(component, shared);

diff --git a/dbux-graph-common/src/componentLib/ComponentEndpoint.js b/dbux-graph-common/src/componentLib/ComponentEndpoint.js
@@ -15,6 +15,16 @@ class ComponentEndpoint {
    */
   componentManager;
 
+  /**
+   * @type {import("./ComponentList").default<C>}
+   */
+  children;
+
+  /**
+   * @type {import("./ComponentList").default<C>}
+   */
+  controllers;
+
   /**
    * Parent endpoint (is null if this is the root (or "Document") endpoint)
    * @type {C}
@@ -24,6 +34,10 @@ class ComponentEndpoint {
   componentId;
   remote;
   state;
+  /**
+   * @type {string[]}
+   */
+  aliases;
 
   _isDisposed = false;
   _disposables = [];

diff --git a/dbux-graph-common/src/componentLib/ComponentList.js b/dbux-graph-common/src/componentLib/ComponentList.js
@@ -14,7 +14,7 @@ export default class ComponentList {
    */
   components = [];
   /**
-   * @type {Map.<string, C>}
+   * @type {Map.<string, C[]>}
    */
   componentsByName = new Map();
   /**
@@ -68,21 +68,21 @@ export default class ComponentList {
   /**
    * @return {C[]}
    */
-  getComponentsRef(Clazz) {
-    if (isString(Clazz)) {
-      return this.componentsByName.get(Clazz) || null;
+  getComponentsRef(clazzOrName) {
+    if (isString(clazzOrName)) {
+      return this.componentsByName.get(clazzOrName) || null;
     }
-    if (!Clazz._componentName) {
-      throw new Error(`Invalid component class. Did you forget to add this component to _hostRegistry? - ${Clazz}`);
+    if (!clazzOrName._componentName) {
+      throw new Error(`Invalid component class. Did you forget to add this component to _hostRegistry? - ${clazzOrName}`);
     }
-    return this.componentsByName.get(Clazz._componentName) || null;
+    return this.componentsByName.get(clazzOrName._componentName) || null;
   }
 
   // ###########################################################################
   // iterators
   // ###########################################################################
 
-  * [Symbol.iterator]() {
+  *[Symbol.iterator]() {
     yield* this.components;
   }
 
@@ -133,11 +133,15 @@ export default class ComponentList {
    * @param {C} comp
    */
   _addComponent(comp) {
-    const Clazz = comp.constructor;
-    const name = Clazz._componentName;
-
     this.components.push(comp);
-    let byName = this.getComponentsRef(Clazz);
+
+    for (const name of comp.aliases) {
+      this._addComponentByName(name, comp);
+    }
+  }
+
+  _addComponentByName(name, comp) {
+    let byName = this.componentsByName.get(name);
     if (!byName) {
       this.componentsByName.set(name, byName = []);
     }

diff --git a/dbux-graph-host/src/componentLib/HostComponentEndpoint.js b/dbux-graph-host/src/componentLib/HostComponentEndpoint.js
@@ -43,6 +43,8 @@ class HostComponentEndpoint extends ComponentEndpoint {
 
   constructor() {
     super();
+
+    this.aliases = this.aliases || [this._componentName];
 
     this.children = new HostComponentList(this, 'child');
     this.controllers = new HostComponentList(this, 'controller');
@@ -158,8 +160,8 @@ class HostComponentEndpoint extends ComponentEndpoint {
    */
   _build(componentManager, parent, componentId, initialState, hostOnlyState) {
     // store properties
-    super._build(componentManager, parent, componentId, initialState);
     this.hostOnlyState = hostOnlyState;
+    super._build(componentManager, parent, componentId, initialState);
 
     componentManager.incInitCount();
 

diff --git a/dbux-graph-host/src/componentLib/HostComponentManager.js b/dbux-graph-host/src/componentLib/HostComponentManager.js
@@ -114,7 +114,8 @@ class HostComponentManager extends BaseComponentManager {
       componentId,
       componentName,
       parent,
-      state
+      state,
+      aliases
     } = component;
 
     // parent
@@ -129,13 +130,18 @@ class HostComponentManager extends BaseComponentManager {
     // send new component to client *AFTER* its parent has finished init'ing
     await parent?.waitForInit();
 
+    const clientAdditionalProps = {
+      aliases
+    };
+
     return this.app._remoteInternal.createClientComponent(
       parentId,
       role,
       componentId,
       componentName,
       shared,
-      state
+      state,
+      clientAdditionalProps
     );
   }
 

diff --git a/dbux-graph-host/src/graph/syncGraph/HoleNode.js b/dbux-graph-host/src/graph/syncGraph/HoleNode.js
@@ -9,6 +9,8 @@ import GroupNode from './GroupNode';
  * 
  */
 export default class HoleNode extends GroupNode {
+  aliases = ['HoleNode', 'GroupNode', 'ContextNode'];
+
   init() {
     // TODO: make this a proper "Hole"/"Group" representation → not just a single context!
     super.init();