@vcmap/ui 5.0.0-rc.29 → 5.0.0-rc.31

package/src/components/vector-properties/composables.js

@@ -0,0 +1,93 @@
+import { computed } from 'vue';
+
+/**
+ * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
+ * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {string} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @returns {import('vue').WriteableComputedRef} A computed with a getter and a setter.
+ */
+export function usePrimitiveProperty(modelObject, key, emit) {
+  return computed({
+    get() {
+      return modelObject()[key];
+    },
+    set(value) {
+      if (modelObject()[key] !== value) {
+        const newParams = structuredClone(modelObject());
+        const changedParams = { [key]: value || undefined }; // XXX boolean values need to be handled differently
+        emit('input', Object.assign(newParams, changedParams));
+        emit('propertyChange', changedParams);
+      }
+    },
+  });
+}
+
+/**
+ * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
+ * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {string} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @param {number} arrayLength The length of the array property.
+ * @returns {Object<string, import('vue').WriteableComputedRef>} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
+ */
+export function useArrayProperty(modelObject, key, emit, arrayLength) {
+  return Array(arrayLength)
+    .fill()
+    .map((entry, index) => {
+      return computed({
+        get() {
+          if (modelObject()?.[key]) {
+            return modelObject()[key][index];
+          } else {
+            return undefined;
+          }
+        },
+        set(value) {
+          const newParams = structuredClone(modelObject());
+          let changedParams;
+          if (!modelObject()?.[key]) {
+            const newArray = Array(arrayLength).fill();
+            newArray[index] = value;
+            changedParams = { [key]: newArray };
+          } else if (modelObject()[key][index] !== value) {
+            const newArray = [...modelObject()[key]];
+            newArray[index] = value;
+            changedParams = { [key]: newArray };
+          }
+
+          if (changedParams) {
+            emit('input', Object.assign(newParams, changedParams));
+            emit('propertyChange', changedParams);
+          }
+        },
+      });
+    });
+}
+
+/**
+ * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
+ * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {string} key The key of the modelObject that should be return on get and updated on set.
+ * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @param {*} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
+ * @returns {import('vue').WriteableComputedRef} A computed ref with a setter and a getter.
+ */
+export function useHasProperty(modelObject, key, emit, valueDefault) {
+  return computed({
+    get() {
+      return modelObject()?.[key] !== undefined;
+    },
+    set(value) {
+      const newParams = structuredClone(modelObject());
+      let changedParams;
+      if (value) {
+        changedParams = { [key]: valueDefault };
+      } else {
+        changedParams = { [key]: undefined };
+      }
+      emit('input', Object.assign(newParams, changedParams));
+      emit('propertyChange', changedParams);
+    },
+  });
+}

package/src/contentTree/contentTreeCollection.js

@@ -17,6 +17,7 @@ import { ButtonLocation } from '../manager/navbarManager.js';
  * @type {symbol}
  */
 const subTreeOpenStateSymbol = Symbol('SubTreeOpenState');
+const subTreeItemWeight = Symbol('SubTreeItemWeight');
 
 /**
  * @typedef {Object} ParentTreeViewItem
@@ -39,9 +40,9 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._app = app;
 
-    const recreateTree = () => {
+    const recreateTree = (resetSubTreeButtons) => {
       if (!this._suspendListeners) {
-        this._setTreeView();
+        this._setTreeView(resetSubTreeButtons);
       }
     };
 
@@ -76,7 +77,7 @@ class ContentTreeCollection extends IndexedCollection {
           this._subTreeViewItems.value.delete(child.name);
         }
       }),
-      this.moved.addEventListener(recreateTree),
+      this.moved.addEventListener(() => recreateTree(true)),
     ];
     /**
      * This is the default content tree.
@@ -128,9 +129,9 @@ class ContentTreeCollection extends IndexedCollection {
     const { action, destroy } = createToggleAction(
       // TODO icon & title are not reactive
       {
-        name: subTreeViewItem.name,
+        name: subTreeViewItem.title ?? subTreeViewItem.name,
         icon: subTreeViewItem.icon,
-        title: subTreeViewItem.title,
+        title: subTreeViewItem.tooltip,
       },
       {
         component: LayerTree,
@@ -149,7 +150,7 @@ class ContentTreeCollection extends IndexedCollection {
     );
 
     this._app.navbarManager.add(
-      { id, action, weight: 100 },
+      { id, action, weight: subTreeViewItem[subTreeItemWeight] },
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );
@@ -162,11 +163,13 @@ class ContentTreeCollection extends IndexedCollection {
   }
 
   /**
+   * @param {boolean} [resetSubtreeButtons=false]
    * @private
    */
-  _setTreeView() {
+  _setTreeView(resetSubtreeButtons = false) {
     /** @type {Map<string, ParentTreeViewItem>} */
     const baseTreeMap = new Map();
+    let maxWeight = 0;
     [...this._array]
       .sort((a, b) => {
         const depthA = a.name.split('.').length;
@@ -183,6 +186,10 @@ class ContentTreeCollection extends IndexedCollection {
         const treeViewItem = item.getTreeViewItem();
         const namespace = treeViewItem.name.split('.');
         const name = namespace.pop();
+        maxWeight = item.weight > maxWeight ? item.weight : maxWeight;
+        if (namespace.length === 0) {
+          treeViewItem[subTreeItemWeight] = item.weight;
+        }
         /** @type {ParentTreeViewItem} */
         let parentItem = { children: baseTreeMap };
         namespace.forEach((parentName) => {
@@ -208,6 +215,7 @@ class ContentTreeCollection extends IndexedCollection {
     const topLevelItems = [...baseTreeMap.values()].map(setChildren);
     const defaultSubTreeViewItem = this._defaultSubtreeItem.getTreeViewItem();
     defaultSubTreeViewItem.children.splice(0);
+    defaultSubTreeViewItem[subTreeItemWeight] = maxWeight + 1;
     defaultSubTreeViewItem.children.push(
       ...topLevelItems.filter((i) => !i[subTreeSymbol]),
     );
@@ -217,11 +225,17 @@ class ContentTreeCollection extends IndexedCollection {
     ];
 
     subTrees.forEach((subTree) => {
-      if (!this._app.navbarManager.has(subTree.name)) {
+      if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
+        this._subTreeListeners.get(subTree.name)?.();
         this._subTreeListeners.set(
           subTree.name,
           this._createSubtreeActionButton(subTree),
         );
+      } else {
+        const buttonComponent = this._app.navbarManager.get(subTree.name);
+        if (buttonComponent.weight !== subTree[subTreeItemWeight]) {
+          buttonComponent.weight = subTree[subTreeItemWeight];
+        }
       }
     });
   }
@@ -243,7 +257,14 @@ class ContentTreeCollection extends IndexedCollection {
    * @readonly
    */
   get subTreeIds() {
-    return [...this._subTreeViewItems.value.keys()];
+    const [defaultItem, ...rest] = [...this._subTreeViewItems.value.entries()];
+    rest.sort(([, a], [, b]) => {
+      if (a[subTreeItemWeight] === b[subTreeItemWeight]) {
+        return 0;
+      }
+      return a[subTreeItemWeight] > b[subTreeItemWeight] ? -1 : 1;
+    });
+    return [defaultItem, ...rest].map(([id]) => id);
   }
 
   /**

package/src/i18n/de.js

@@ -1,9 +1,9 @@
 const messages = {
   navbar: {
     maps: {
-      CesiumMap: '3D Karte aktivieren',
-      OpenlayersMap: '2D Karte aktivieren',
-      ObliqueMap: 'Schrägluftbilder aktivieren',
+      CesiumMap: '3D-Karte aktivieren',
+      OpenlayersMap: '2D-Karte aktivieren',
+      ObliqueMap: 'Schrägluftbildkarte aktivieren',
     },
     menu: {
       tooltip: 'Menü',
@@ -52,6 +52,8 @@ const messages = {
   components: {
     pin: 'Fenster andocken',
     close: 'Fenster schließen',
+    apply: 'Anwenden',
+    cancel: 'Abbrechen',
     vcsFormSection: {
       help: 'Hilfe anzeigen',
     },
@@ -69,8 +71,8 @@ const messages = {
       noResultsPlaceholder: 'Keine übereinstimmenden Einträge gefunden',
     },
     style: {
-      fill: 'Füll Stil',
-      stroke: 'Linien Stil',
+      fill: 'Füllung',
+      stroke: 'Linie',
       reset: 'Zurücksetzen',
       lineWidth: 'Linienbreite',
       type: 'Typ',
@@ -81,7 +83,7 @@ const messages = {
       rotation: 'Rotation',
       scale: 'Skalierung',
       opacity: 'Deckkraft',
-      image: 'Punkt Stil',
+      image: 'Symbol',
       icon: 'Icon',
       presets: 'Vorlagen',
       shape: 'Form',
@@ -97,10 +99,41 @@ const messages = {
       italic: 'Kursiv',
       text: 'Text',
       enterText: 'Text hier eingeben',
+      offset: 'Versatz',
+    },
+    vectorProperties: {
+      header: 'Vektor Eigenschaften',
+      altitudeMode: 'Höhenmodus',
+      clampToGround: 'Auf Gelände legen',
+      absolute: 'Absolut',
+      relativeToGround: 'Relativ zum Gelände',
+      groundLevel: 'Geländehöhe',
+      classificationType: 'Klassifizierung',
+      none: 'Keine',
+      both: 'Beide',
+      cesium3DTile: '3D Tiles',
+      terrain: 'Gelände',
+      heightAboveGround: 'Höhe über Gelände',
+      allowPicking: 'Auswahl erlauben',
+      scaleByDistance: 'Distanzskalierung',
+      eyeOffset: 'Blick Versatz',
+      storeys: 'Stockwerke',
+      storeyHeights: 'Stockwerkshöhe(n)',
+      aboveGround: 'Über Grund',
+      belowGround: 'Unter Grund',
+      modelUrl: 'Modell URL',
+      modelHeading: 'Modell Ausrichtung',
+      modelPitch: 'Modell Neigung',
+      modelRoll: 'Modell Rotation',
+      baseUrl: 'Basis URL',
+      extrudedHeight: 'Extrusion',
+      skirt: 'Skirts',
+      modelScale: 'Modell Skalierung',
+    },
+    validation: {
       allowedRange: 'Erlaubter Wertebereich',
       notValid: 'Eingabe nicht gültig',
       required: 'Eingabe ist erforderlich',
-      offset: 'Versatz',
     },
   },
   settings: {
@@ -145,6 +178,7 @@ const messages = {
     attributions: {
       title: 'Attributionen',
       tooltip: 'Öffne Attributionsfenster',
+      empty: 'Aktuell sind keine Attributionseinträge verfügbar.',
     },
   },
   notification: {

package/src/i18n/en.js

@@ -1,9 +1,9 @@
 const messages = {
   navbar: {
     maps: {
-      CesiumMap: 'Enable 3D view',
-      OpenlayersMap: 'Enable 2D view',
-      ObliqueMap: 'Enable oblique view',
+      CesiumMap: 'Enable 3D map',
+      OpenlayersMap: 'Enable 2D map',
+      ObliqueMap: 'Enable oblique imagery map',
     },
     menu: {
       tooltip: 'Menu',
@@ -52,6 +52,8 @@ const messages = {
   components: {
     pin: 'Dock window',
     close: 'Close window',
+    apply: 'Apply',
+    cancel: 'Cancel',
     vcsFormSection: {
       help: 'Show help',
     },
@@ -81,7 +83,7 @@ const messages = {
       rotation: 'Rotation',
       scale: 'Scale',
       opacity: 'Opacity',
-      image: 'Point style',
+      image: 'Symbol',
       icon: 'Icon',
       shape: 'Shape',
       presets: 'Presets',
@@ -97,10 +99,41 @@ const messages = {
       italic: 'Italic',
       text: 'Text',
       enterText: 'Enter text here',
+      offset: 'Offset',
+    },
+    vectorProperties: {
+      header: 'Vector properties',
+      altitudeMode: 'Altitude mode',
+      clampToGround: 'Clamp to ground',
+      absolute: 'Absolute',
+      relativeToGround: 'Relative to ground',
+      groundLevel: 'Ground level',
+      classificationType: 'Classification',
+      none: 'None',
+      both: 'Both',
+      cesium3DTile: '3D Tiles',
+      terrain: 'Terrain',
+      heightAboveGround: 'Height above ground',
+      allowPicking: 'Allow picking',
+      scaleByDistance: 'Scale by distance',
+      eyeOffset: 'Eye offset',
+      storeys: 'Storeys',
+      storeyHeights: 'Storey height(s)',
+      aboveGround: 'Above ground',
+      belowGround: 'Below ground',
+      modelUrl: 'Model URL',
+      modelHeading: 'Model heading',
+      modelPitch: 'Model pitch',
+      modelRoll: 'Model roll',
+      baseUrl: 'Base URL',
+      extrudedHeight: 'Extrusion',
+      skirt: 'Skirts',
+      modelScale: 'Model scale',
+    },
+    validation: {
       allowedRange: 'Allowed value range',
       notValid: 'Input not valid',
       required: 'Input is required',
-      offset: 'Offset',
     },
   },
   settings: {
@@ -145,6 +178,7 @@ const messages = {
     attributions: {
       title: 'Attributions',
       tooltip: 'Open attributions window',
+      empty: 'Currently there are no attribution entries available.',
     },
   },
   notification: {

package/src/i18n/i18nCollection.js

@@ -1,12 +1,7 @@
-// eslint-disable-next-line max-classes-per-file
-import { v5 as uuidv5 } from 'uuid';
 import { IndexedCollection, moduleIdSymbol } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
-
-/**
- * @type {string}
- */
-const uniqueNamespace = '9c27cc2d-552f-4637-9194-09329ed4c1dc';
+import en from './en.js';
+import de from './de.js';
 
 /**
  * returns true if the given value is of type object and not an array.
@@ -70,64 +65,20 @@ export function mergeDeep(...sources) {
  * @extends {IndexedCollection<I18nConfigurationItem>}
  */
 class I18nCollection extends IndexedCollection {
-  /**
-   * @param {function():string} getDynamicModuleId - function to get the current dynamic module id
-   */
-  constructor(getDynamicModuleId) {
+  constructor() {
     super();
     /**
-     * @type {function(): string}
+     * VC Map default I18n Messages
+     * @type {Object}
      * @private
      */
-    this._getDynamicModuleId = getDynamicModuleId;
-  }
-
-  /**
-   * @inheritDoc
-   */
-  add(item) {
-    if (!item[moduleIdSymbol]) {
-      item[moduleIdSymbol] = this._getDynamicModuleId();
-    }
-    if (!item.name) {
-      item.name = uuidv5(JSON.stringify(item), uniqueNamespace);
-    }
-    super.add(item);
-  }
-
-  /**
-   * @param {Array<I18nConfigurationItem>} configArray
-   * @param {string} moduleId
-   * @returns {Promise<void>}
-   */
-  async parseItems(configArray, moduleId) {
-    if (Array.isArray(configArray)) {
-      configArray.forEach((item) => {
-        this.add({ ...item, [moduleIdSymbol]: moduleId });
-      });
-    }
-  }
-
-  /**
-   * @param {string} moduleId
-   */
-  async removeModule(moduleId) {
-    [...this]
-      .filter((item) => item[moduleIdSymbol] === moduleId)
-      .forEach((item) => {
-        this.remove(item);
-      });
-  }
+    this._defaultMessages = { name: 'default', en, de };
 
-  /**
-   * @param {string} moduleId
-   * @returns {Array<I18nConfigurationItem>}
-   */
-  serializeModule(moduleId) {
-    return [...this]
-      .filter((item) => item[moduleIdSymbol] === moduleId)
-      .filter((item) => !item[i18nPluginSymbol])
-      .map((item) => JSON.parse(JSON.stringify(item)));
+    /**
+     * @type {IndexedCollection<Object>}
+     * @private
+     */
+    this._pluginMessages = new IndexedCollection(false);
   }
 
   /**
@@ -138,10 +89,11 @@ class I18nCollection extends IndexedCollection {
    * @param {Object} messages
    */
   addPluginMessages(plugin, moduleId, messages) {
-    messages[i18nPluginSymbol] = plugin;
     messages[moduleIdSymbol] = moduleId;
+    messages[i18nPluginSymbol] = plugin;
     messages.name = plugin;
-    this.add(messages);
+    this._pluginMessages.add(messages);
+    this.added.raiseEvent(messages);
   }
 
   /**
@@ -151,14 +103,15 @@ class I18nCollection extends IndexedCollection {
    * @param {string} moduleId
    */
   removePluginMessages(pluginName, moduleId) {
-    [...this]
+    [...this._pluginMessages]
       .filter(
         (item) =>
           item[i18nPluginSymbol] === pluginName &&
           item[moduleIdSymbol] === moduleId,
       )
       .forEach((item) => {
-        this.remove(item);
+        this._pluginMessages.remove(item);
+        this.removed.raiseEvent(item);
       });
   }
 
@@ -167,13 +120,14 @@ class I18nCollection extends IndexedCollection {
    * @returns {Object}
    */
   getMergedMessages() {
-    return mergeDeep(...this);
+    return mergeDeep(this._defaultMessages, ...this._pluginMessages, ...this);
   }
 
   /**
    * @inheritDoc
    */
   destroy() {
+    this._pluginMessages.destroy();
     this._getDynamicModuleId = null;
     super.destroy();
   }

package/src/manager/buttonManager.js

@@ -124,6 +124,10 @@ class ButtonManager {
       get weight() {
         return buttonComponentOptions.weight || 0;
       },
+      set weight(value) {
+        check(value, Number);
+        buttonComponentOptions.weight = value;
+      },
     };
 
     this._buttonComponents.set(id, buttonComponent);

package/src/manager/collectionManager/collectionComponent.js

@@ -243,7 +243,7 @@ class CollectionComponent {
    * @private
    */
   _insertListItem(listItem) {
-    if (!this._listItems.value.includes(listItem)) {
+    if (!this._listItems.value.some((i) => i.name === listItem.name)) {
       if (this._collection instanceof IndexedCollection) {
         const newItemIndex = this._collection.indexOfKey(listItem.name);
         if (newItemIndex === this._collection.size - 1) {

package/src/manager/contextMenu/contextMenuManager.js

@@ -126,6 +126,8 @@ class ContextMenuManager {
       } else {
         position.right += 1;
       }
+      position.maxWidth = 320;
+      position.width = -1; // unset width magic. dont touch.
 
       this._app.windowManager.add(
         {

package/src/pluginHelper.js

@@ -25,9 +25,21 @@ export const pluginFactorySymbol = Symbol('pluginFactory');
  */
 export const pluginBaseUrlSymbol = Symbol('pluginBaseUrl');
 
+/**
+ * A symbol added to each plugin which describes the module URL from which the plugin was loaded (with the filename and including searchParams)
+ * @type {symbol}
+ */
+export const pluginModuleUrlSymbol = Symbol('pluginModuleUrl');
+/**
+ * A symbol added to each plugin which describes the configured version range
+ * @type {symbol}
+ */
+export const pluginVersionRangeSymbol = Symbol('pluginVersionRange');
+
 /**
  * A helper function to create an absolute URL from a relative plugin asset URL. For example, when
  * shipping your plugin with a "plugin-asset/icon.png", you can always retrieve said icon with getPluginAssetUrl(app, name, 'pluing-assets/icon.png')
+ * Sets the plugin version as searchParam.
  * Returns null, if the plugin does not exist.
  * @param {VcsUiApp} app
  * @param {string} pluginName
@@ -47,6 +59,7 @@ export function getPluginAssetUrl(app, pluginName, asset) {
         assetUrl.searchParams.set(key, value);
       }
     });
+    assetUrl.searchParams.set('version', plugin.version);
     return assetUrl.toString();
   }
   return null;
@@ -114,15 +127,24 @@ export async function loadPlugin(name, config) {
     baseUrl.pathname = baseUrl.pathname.replace(/\/[^/]+$/, '/');
     const pluginInstance = await plugin.default(config, baseUrl.toString());
 
-    if (!pluginInstance.name) {
-      getLogger().error(`plugin ${name} does not expose a name`);
+    if (!(pluginInstance.name || pluginInstance.version)) {
+      getLogger().error(
+        `plugin ${name} does not conform to the VcsPlugin interface, which requires a name and version`,
+      );
       if (pluginInstance.destroy) {
         pluginInstance.destroy();
       }
       return null;
     }
+    if (!isValidPackageName(pluginInstance.name)) {
+      getLogger().warning(
+        `plugin ${pluginInstance.name} has no valid package name!`,
+      );
+    }
     pluginInstance[pluginFactorySymbol] = plugin.default;
     pluginInstance[pluginBaseUrlSymbol] = baseUrl.toString();
+    pluginInstance[pluginModuleUrlSymbol] = module;
+    pluginInstance[pluginVersionRangeSymbol] = config.version;
     return pluginInstance;
   } catch (err) {
     getLogger().error(`failed to load plugin ${name}`);
@@ -132,19 +154,25 @@ export async function loadPlugin(name, config) {
 }
 
 /**
+ * Returns relative url, if base is same, otherwise absolute url
+ * Removes version from searchParams, since version is serialized itself
  * @param {string} base
- * @param {string} pluginBase
+ * @param {string} pluginUrl
  * @returns {string}
  */
-export function getPluginEntry(base, pluginBase) {
+export function getPluginEntry(base, pluginUrl) {
   const baseUrl = new URL(base);
-  const pluginBaseUrl = new URL(pluginBase);
-  if (baseUrl.origin !== pluginBaseUrl.origin) {
-    return pluginBase;
+  const pluginModuleUrl = new URL(pluginUrl);
+  pluginModuleUrl.searchParams.delete('version'); // semver is part of config
+  if (baseUrl.origin !== pluginModuleUrl.origin) {
+    return pluginModuleUrl.toString();
   }
   const baseSubs = baseUrl.pathname.split('/');
-  const pluginSubs = pluginBaseUrl.pathname.split('/');
-  return pluginSubs.filter((sub, idx) => sub !== baseSubs[idx]).join('/');
+  const pluginSubs = pluginModuleUrl.pathname.split('/');
+  pluginModuleUrl.pathname = pluginSubs
+    .filter((sub, idx) => sub !== baseSubs[idx])
+    .join('/');
+  return `${pluginModuleUrl.pathname}${pluginModuleUrl.search}`.substring(1);
 }
 
 /**
@@ -154,24 +182,36 @@ export function getPluginEntry(base, pluginBase) {
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
   serializedPlugin.name = plugin.name;
+  if (plugin[pluginVersionRangeSymbol]) {
+    serializedPlugin.version = plugin[pluginVersionRangeSymbol];
+  }
   serializedPlugin.entry = getPluginEntry(
     window.location.href,
-    plugin[pluginBaseUrlSymbol],
+    plugin[pluginModuleUrlSymbol],
   );
   serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
   serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
+  serializedPlugin[pluginModuleUrlSymbol] = plugin[pluginModuleUrlSymbol];
+  serializedPlugin[pluginVersionRangeSymbol] = plugin[pluginVersionRangeSymbol];
   return serializedPlugin;
 }
 
 /**
  * @param {Object} serializedPlugin
- * @returns {Promise<VcsPlugin>}
+ * @returns {Promise<VcsPlugin|null>}
  */
 export async function deserializePlugin(serializedPlugin) {
-  const reincarnation = await serializedPlugin[pluginFactorySymbol](
-    serializedPlugin,
-  );
-  reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
-  reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
-  return reincarnation;
+  if (serializedPlugin[pluginFactorySymbol]) {
+    const reincarnation = await serializedPlugin[pluginFactorySymbol](
+      serializedPlugin,
+    );
+    reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
+    reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
+    reincarnation[pluginModuleUrlSymbol] =
+      serializedPlugin[pluginModuleUrlSymbol];
+    reincarnation[pluginVersionRangeSymbol] =
+      serializedPlugin[pluginVersionRangeSymbol];
+    return reincarnation;
+  }
+  return loadPlugin(serializedPlugin.name, serializedPlugin);
 }