introduce extension component weight

Author: nerdoc

README.md

@@ -19,7 +19,7 @@ If you choose to install everything manually, see [Manual install](manual-instal
 
 ## Extensions
 
-Extensions are modules that export a default object with a `hooks` property, which is a named index pointing to Vue components. This seems complicated, but an example makes it much clearer:
+Extensions are modules that export a default object with a `hooks` property, which is an array of objects, pointing to Vue components (with metadata). This seems complicated, but an example makes it much clearer:
 
 ```javascript
 // extensions/FooExtension/index.js
@@ -28,13 +28,31 @@ import {FooElement, BazElement} from './components/othercomponents.vue'
 
 export default {
     hooks: {
-        "my-list-element": [AComponent],
-        "blah-another-hook": [FooElement, BazElement]
-    }   
+        "my-list.element": [{ component: AComponent }],
+        "mycompany.hooks.ui.item": [
+            { component: FooElement, weight: 2 },
+            { component: BazElement, weight: 3 }
+        ]
+    },
+    routes: [{
+      path: '/foo',
+      component: () => import('layouts/MyLayout.vue'),
+      children: [
+        { path: '', component: () => import('./pages/fooIndex.vue') }
+      ]
+    }]
 }
 ```
 
-One module can provide components for more than one hooks.
+hooks
+
+    Hooks are strings that define an entry point for your extension components
+    Each hook points to an array of objects which declare:
+    
+    * **component**: the Vue component to render.
+    * weight: order of the component in a list. The higher the component's weight, the further it "sinks" down (or right) in the list.
+    
+    One module can provide components for more than one hooks.
 
 There is an `<extensionpoint>` tag in your project available now:
 
@@ -45,8 +63,8 @@ There is an `<extensionpoint>` tag in your project available now:
         <extensionpoint hook="my-list-element"/>
     </ul>
 
-    <h3>Extensionpoints for "blah-another-hook"</h3>
-    <extensionpoint hook="blah-another-hook"/>
+    <h3>Extensionpoints for "mycompany.hooks.ui.item"</h3>
+    <extensionpoint hook="mycompany.hooks.ui.item"/>
 </template>
 ```
 

index.js

@@ -1,4 +1,3 @@
-
 let hookRegistry = {}
 
 export default {
@@ -10,10 +9,12 @@ export default {
      * @param {Object} options An named index of objects:
      *      "extensions": a named index of modules that export an extension:
      *              name: the name of the extensions
-     *              hooks: named index, each one pointing to a list of Vue
-     *                  components implementing that hook. They will be
-     *                  rendered at each extensionpoint that has the same hook
-     *                  name.
+     *              hooks: array of objects with the following schema:
+     *                  component: a Vue component implementing that hook. They will be rendered within the
+     *                    <extensionpoint> tag with given hook name.
+     *                  weight: the "weight" of that component. "heavier" components sink down in the
+     *                    list and are rendered *after* "lighter" ones.
+     *                    Default weight = 0
      */
     install: (Vue, options) => {
 
@@ -22,21 +23,26 @@ export default {
             if(extension.initialize) {
                 extension.initialize()
             }
-            for (let hook in extension.hooks) {
-                // make array
-                let componentArray = Array.isArray(extension.hooks[hook]) ?
-                    extension.hooks[hook]
-                    : [extension.hooks[hook]]
+          for (let hook in extension.hooks) {
+            let extensionArray = extension.hooks[hook]
 
-                if (hookRegistry[hook] === undefined) {
-                    hookRegistry[hook] = componentArray
-                } else {
-                    // if extension provides an array, merge it
-                    hookRegistry[hook] = hookRegistry[hook].concat(componentArray)
+              // set a default weight for all extensions if there is none set.
+              for (let obj of extensionArray) {
+                  if (!obj.weigth) {
+                      obj.weigth = 0
+                  }
+              }
 
-                }
-                // console.debug(`Registering component '${extensionName}' for hook '${hook}'`)
-            }
+              // if hook is not known already, create it
+              if (hookRegistry[hook] === undefined) {
+                  hookRegistry[hook] = extensionArray
+              } else {
+                  // if hook already exists, merge new one
+                  hookRegistry[hook] = hookRegistry[hook].concat(extensionArray)
+
+              }
+              // console.debug(`Registering component '${extensionName}' for hook '${hook}'`, extensionArray)
+          }
         }
 
         Vue.component('extensionpoint', {
@@ -47,12 +53,14 @@ export default {
             computed: {
                 extensions ()  {
                     // console.log(`hook ${this.hook}: `, hookRegistry[this.hook])
-                    return hookRegistry[this.hook]
+                    return hookRegistry[this.hook].sort((obj1, obj2) => {
+                      return obj1.weight - obj2.weight
+                    })
                 }
             },
             template: `
             <div class="extension-container">
-                <component :is="extensionComponent" v-for="extensionComponent in extensions" :key="extensionComponent.id"/>
+                <component :is="extensionComponent.component" v-for="extensionComponent in extensions" :key="extensionComponent.component.id"/>
             </div>
             `
         })