@lvce-editor/extension-detail-view 7.13.0 → 7.14.1

package/dist/extensionDetailViewWorkerMain.js

@@ -23,6 +23,7 @@ const CopyLink = 'Copy Link';
 const Created = 'Created';
 const Details$1 = 'Details';
 const Disable$1 = 'Disable';
+const DownloadCount = 'Downloads';
 const Elements = 'Elements';
 const EmptyCommandsArray = 'The extension contributes an empty commands array.';
 const Enable$1 = 'Enable';
@@ -36,6 +37,7 @@ const Identifier = 'Identifier';
 const ImportTime = 'Import Time: ';
 const Installation = 'Installation';
 const InvalidLink = 'Invalid link';
+const ImageCannotBeLoaded = 'Image cannot be loaded';
 const Issues = 'Issues';
 const JsonValidation$1 = 'Json Validation';
 const Label$1 = 'Label';
@@ -51,6 +53,7 @@ const OpenInNewTab = 'Open in New Tab';
 const ProgrammingLanguages$1 = 'Programming Languages';
 const PropertyMustBeOfTypeString = 'Property must be a string';
 const Published = 'Published';
+const Rating = 'Rating';
 const Repository = 'Repository';
 const Resources$1 = 'Resources';
 const RuntimeStatus$1 = 'Runtime Status';
@@ -175,6 +178,9 @@ const id$1 = () => {
 const name = () => {
   return i18nString(Name);
 };
+const imageCannotBeLoaded = () => {
+  return i18nString(ImageCannotBeLoaded);
+};
 const fileExtensions = () => {
   return i18nString(FileExtensions);
 };
@@ -255,6 +261,12 @@ const repository = () => {
 const license = () => {
   return i18nString(License);
 };
+const downloadCount = () => {
+  return i18nString(DownloadCount);
+};
+const rating = () => {
+  return i18nString(Rating);
+};
 const propertyMustBeOfTypeString = () => {
   return i18nString(PropertyMustBeOfTypeString);
 };
@@ -814,6 +826,7 @@ const DefinitionListItemHeading = 'DefinitionListItemHeading';
 const DefinitionListItemValue = 'DefinitionListItemValue';
 const ExtensionDetail = 'ExtensionDetail';
 const ExtensionDetailDescription = 'ExtensionDetailDescription';
+const ExtensionDetailDownloadCount = 'ExtensionDetailDownloadCount';
 const ExtensionDetailError = 'ExtensionDetailError';
 const ExtensionDetailErrorCard = 'ExtensionDetailErrorCard';
 const ExtensionDetailErrorIcon = 'ExtensionDetailErrorIcon';
@@ -823,9 +836,12 @@ const ExtensionDetailHeader = 'ExtensionDetailHeader';
 const ExtensionDetailHeaderActions = 'ExtensionDetailHeaderActions';
 const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
 const ExtensionDetailIcon = 'ExtensionDetailIcon';
+const ExtensionDetailMetadata = 'ExtensionDetailMetadata';
 const ExtensionDetailName = 'ExtensionDetailName';
 const ExtensionDetailNameBadge = 'ExtensionDetailNameBadge';
 const ExtensionDetailPanel = 'ExtensionDetailPanel';
+const ExtensionDetailRating = 'ExtensionDetailRating';
+const ExtensionDetailStatistic = 'ExtensionDetailStatistic';
 const ExtensionDetailTab = 'ExtensionDetailTab';
 const ExtensionDetailTabs = 'ExtensionDetailTabs';
 const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
@@ -837,6 +853,7 @@ const FeatureWebView = 'FeatureWebView';
 const Large$1 = 'Large';
 const Link$1 = 'Link';
 const Markdown = 'Markdown';
+const MarkdownImageError = 'MarkdownImageError';
 const MoreInfo = 'MoreInfo';
 const MoreInfoEntry = 'MoreInfoEntry';
 const MoreInfoEntryKey = 'MoreInfoEntryKey';
@@ -2985,6 +3002,24 @@ const HandleResourceLinkClick = 19;
 const HandleMouseEnterEnable = 20;
 const HandleMouseLeaveEnable = 21;
 const HandleHeaderContextMenu = 22;
+const HandleMarkdownImageError = 23;
+
+const addMarkdownImageErrorHandler = node => {
+  if (node.type !== Img) {
+    return node;
+  }
+  const {
+    onError,
+    ...rest
+  } = node;
+  return {
+    onError: HandleMarkdownImageError,
+    ...rest
+  };
+};
+const addMarkdownImageErrorHandlers = dom => {
+  return dom.map(addMarkdownImageErrorHandler);
+};
 
 const ActivationEvents = 'ActivationEvents';
 const Changelog = 'Changelog';
@@ -3039,7 +3074,7 @@ const addScrollToTopVirtualDom = dom => {
 };
 const getMarkdownVirtualDom = async (html, options) => {
   string(html);
-  const dom = await getVirtualDom(html);
+  const dom = addMarkdownImageErrorHandlers(await getVirtualDom(html));
   if (options?.scrollToTopEnabled) {
     return addScrollToTopVirtualDom(dom);
   }
@@ -3401,10 +3436,67 @@ const toCommandId = key => {
   return key.slice(dotIndex + 1);
 };
 const create$1 = () => {
+  const commandQueues = new Map();
+  const generations = Object.create(null);
   const states = Object.create(null);
   const commandMapRef = {};
+  const getGeneration = uid => generations[uid] || 0;
+  const isCurrentGeneration = (uid, generation) => {
+    return states[uid] !== undefined && getGeneration(uid) === generation;
+  };
+  const updateState = (uid, generation, fallbackState, updater) => {
+    if (!isCurrentGeneration(uid, generation)) {
+      return Promise.resolve(fallbackState);
+    }
+    const current = states[uid];
+    const updatedState = updater(current.newState);
+    if (updatedState !== current.newState) {
+      states[uid] = {
+        newState: updatedState,
+        oldState: current.oldState,
+        scheduledState: updatedState
+      };
+    }
+    return Promise.resolve(updatedState);
+  };
+  const createAsyncCommandContext = (uid, generation) => {
+    let latestState = states[uid].newState;
+    return {
+      getState: () => {
+        if (isCurrentGeneration(uid, generation)) {
+          latestState = states[uid].newState;
+        }
+        return latestState;
+      },
+      updateState: async updater => {
+        latestState = await updateState(uid, generation, latestState, updater);
+        return latestState;
+      }
+    };
+  };
+  const enqueueCommand = async (uid, command) => {
+    const previous = commandQueues.get(uid) || Promise.resolve();
+    const run = async () => {
+      try {
+        await previous;
+      } catch {
+        // The previous caller receives its error; later commands must still run.
+      }
+      await command();
+    };
+    const current = run();
+    commandQueues.set(uid, current);
+    try {
+      await current;
+    } finally {
+      if (commandQueues.get(uid) === current) {
+        commandQueues.delete(uid);
+      }
+    }
+  };
   return {
     clear() {
+      commandQueues.clear();
       for (const key of Object.keys(states)) {
         delete states[key];
       }
@@ -3424,6 +3516,7 @@ const create$1 = () => {
       return diffResult;
     },
     dispose(uid) {
+      commandQueues.delete(uid);
       delete states[uid];
     },
     get(uid) {
@@ -3441,14 +3534,27 @@ const create$1 = () => {
       Object.assign(commandMapRef, commandMap);
     },
     set(uid, oldState, newState, scheduledState) {
+      const current = states[uid];
+      if (!current || oldState === newState && newState !== current.newState) {
+        generations[uid] = getGeneration(uid) + 1;
+      }
       states[uid] = {
         newState,
         oldState,
         scheduledState: scheduledState ?? newState
       };
     },
+    wrapAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        const context = createAsyncCommandContext(uid, generation);
+        await fn(context, ...args);
+      };
+      return wrapped;
+    },
     wrapCommand(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -3457,6 +3563,9 @@ const create$1 = () => {
         if (oldState === newerState || newState === newerState) {
           return;
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return;
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -3481,6 +3590,7 @@ const create$1 = () => {
     },
     wrapLoadContent(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -3495,6 +3605,11 @@ const create$1 = () => {
             error
           };
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return {
+            error
+          };
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -3510,6 +3625,51 @@ const create$1 = () => {
         };
       };
       return wrapped;
+    },
+    wrapSerialAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const context = createAsyncCommandContext(uid, generation);
+          await fn(context, ...args);
+        });
+      };
+      return wrapped;
+    },
+    wrapSerialCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const {
+            newState,
+            oldState
+          } = states[uid];
+          const newerState = await fn(newState, ...args);
+          if (oldState === newerState || newState === newerState) {
+            return;
+          }
+          if (!isCurrentGeneration(uid, generation)) {
+            return;
+          }
+          const latestOld = states[uid];
+          const latestNew = {
+            ...latestOld.newState,
+            ...newerState
+          };
+          states[uid] = {
+            newState: latestNew,
+            oldState: latestOld.oldState,
+            scheduledState: latestNew
+          };
+        });
+      };
+      return wrapped;
     }
   };
 };
@@ -4238,6 +4398,26 @@ const handleClickUninstall = async state => {
   return state;
 };
 
+const handleColorThemeChanged = (state, colorThemeId) => {
+  if (state.currentColorThemeId === colorThemeId) {
+    return state;
+  }
+  const {
+    disabled,
+    extension,
+    hasColorTheme
+  } = state;
+  const extensionColorThemeId = getColorThemeId(extension) || '';
+  const extensionColorThemeLabel = getColorThemeLabel(extension) || '';
+  const isBuiltin = extension?.isBuiltin || extension?.builtin || false;
+  const buttons = getExtensionDetailButtons(hasColorTheme, isBuiltin, disabled, extensionColorThemeId, extensionColorThemeLabel, colorThemeId);
+  return {
+    ...state,
+    buttons,
+    currentColorThemeId: colorThemeId
+  };
+};
+
 const existsFile = async uri => {
   try {
     return await exists(uri);
@@ -4599,10 +4779,10 @@ const loadHeaderContent = (state, platform, extension) => {
   const extensionId = extension?.id || 'n/a';
   const extensionVersion = extension?.version || 'n/a';
   const hasColorTheme = hasColorThemes(extension);
-  const isBuiltin = extension?.builtin;
+  const isBuiltin = extension?.isBuiltin || extension?.builtin || false;
   const badge = getBadge(isBuiltin, builtinExtensionsBadgeEnabled);
-  const downloadCount = getDownloadCount(extension);
-  const rating = getRating(extension);
+  const downloadCount = isBuiltin ? 'n/a' : getDownloadCount(extension);
+  const rating = isBuiltin ? 'n/a' : getRating(extension);
   return {
     badge,
     description,
@@ -4761,21 +4941,17 @@ function prettyBytes(number, options) {
     number = -number;
   }
   const localeOptions = buildLocaleOptions(options);
-  let result;
-  if (number < 1) {
-    const numberString = toLocaleString(number, options.locale, localeOptions);
-    result = prefix + numberString + separator + UNITS[0];
-  } else {
-    const exponent = Math.min(Math.floor(options.binary ? log(number) / Math.log(1024) : log10(number) / 3), UNITS.length - 1);
-    number = divide(number, (options.binary ? 1024 : 1000) ** exponent);
-    if (!localeOptions) {
-      const minPrecision = Math.max(3, Math.floor(number).toString().length);
-      number = number.toPrecision(minPrecision);
-    }
-    const numberString = toLocaleString(Number(number), options.locale, localeOptions);
-    const unit = UNITS[exponent];
-    result = prefix + numberString + separator + unit;
+  let exponent = 0;
+  if (number >= 1) {
+    exponent = Math.min(Math.floor(options.binary ? log(number) / Math.log(1024) : log10(number) / 3), UNITS.length - 1);
   }
+  number = divide(number, (options.binary ? 1024 : 1000) ** exponent);
+  if (!localeOptions) {
+    const minPrecision = Math.max(3, Math.floor(number).toString().length);
+    number = Number(number.toPrecision(minPrecision));
+  }
+  const numberString = toLocaleString(number, options.locale, localeOptions);
+  const result = prefix + numberString + separator + UNITS[exponent];
   return applyFixedWidth(result, options.fixedWidth);
 }
 
@@ -5298,6 +5474,51 @@ const handleImageContextMenu = async (state, eventX, eventY) => {
   return state;
 };
 
+const getMarkdownImageErrorVirtualDom = () => {
+  return [{
+    childCount: 1,
+    className: MarkdownImageError,
+    type: Span
+  }, text(imageCannotBeLoaded())];
+};
+
+const isMatchingImageSrc = (nodeSrc, failedSrc) => {
+  if (typeof nodeSrc !== 'string' || !failedSrc) {
+    return false;
+  }
+  const normalizedNodeSrc = nodeSrc.startsWith('./') ? nodeSrc.slice(2) : nodeSrc;
+  return nodeSrc === failedSrc || failedSrc.endsWith(nodeSrc) || nodeSrc.endsWith(failedSrc) || failedSrc.endsWith(`/${normalizedNodeSrc}`);
+};
+const replaceMarkdownImageWithError = (dom, failedSrc) => {
+  let replaced = false;
+  const newDom = [];
+  for (const node of dom) {
+    if (node.type === Img && isMatchingImageSrc(node.src, failedSrc)) {
+      newDom.push(...getMarkdownImageErrorVirtualDom());
+      replaced = true;
+    } else {
+      newDom.push(node);
+    }
+  }
+  if (!replaced) {
+    return dom;
+  }
+  return newDom;
+};
+
+const handleMarkdownImageError = (state, failedSrc) => {
+  const detailsVirtualDom = replaceMarkdownImageWithError(state.detailsVirtualDom, failedSrc);
+  const changelogVirtualDom = replaceMarkdownImageWithError(state.changelogVirtualDom, failedSrc);
+  if (detailsVirtualDom === state.detailsVirtualDom && changelogVirtualDom === state.changelogVirtualDom) {
+    return state;
+  }
+  return {
+    ...state,
+    changelogVirtualDom,
+    detailsVirtualDom
+  };
+};
+
 const previewColorTheme = async colorThemeId => {
   await invoke$1('ColorTheme.previewColorTheme', colorThemeId);
 };
@@ -6360,6 +6581,31 @@ const getExtensionDetailIconVirtualDom = iconSrc => {
   };
 };
 
+const getStatisticVirtualDom = (label, value, className) => {
+  const accessibleLabel = `${label}: ${value}`;
+  return [{
+    ariaLabel: accessibleLabel,
+    childCount: 1,
+    className: mergeClassNames(ExtensionDetailStatistic, className),
+    title: accessibleLabel,
+    type: Span
+  }, text(value)];
+};
+const getExtensionDetailMetadataVirtualDom = (downloadCount$1, rating$1) => {
+  const hasDownloadCount = downloadCount$1 !== 'n/a';
+  const hasRating = rating$1 !== 'n/a';
+  if (!hasDownloadCount && !hasRating) {
+    return [];
+  }
+  const downloadCountDom = hasDownloadCount ? getStatisticVirtualDom(downloadCount(), downloadCount$1, ExtensionDetailDownloadCount) : [];
+  const ratingDom = hasRating ? getStatisticVirtualDom(rating(), rating$1, ExtensionDetailRating) : [];
+  return [{
+    childCount: Number(hasDownloadCount) + Number(hasRating),
+    className: ExtensionDetailMetadata,
+    type: Div
+  }, ...downloadCountDom, ...ratingDom];
+};
+
 const getNameBadgeVirtualDom = badge => {
   if (!badge) {
     return [];
@@ -6395,17 +6641,18 @@ const getExtensionDetailNameVirtualDom = (name, badge) => {
   return getExtensionDetailNameDefaultVirtualDom(name);
 };
 
-const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled) => {
+const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled, downloadCount = 'n/a', rating = 'n/a') => {
+  const metadataDom = getExtensionDetailMetadataVirtualDom(downloadCount, rating);
   const dom = [{
     childCount: 2,
     className: ExtensionDetailHeader,
     type: Div
   }, getExtensionDetailIconVirtualDom(iconSrc), {
-    childCount: 3,
+    childCount: metadataDom.length > 0 ? 4 : 3,
     className: ExtensionDetailHeaderDetails,
     onContextMenu: HandleHeaderContextMenu,
     type: Div
-  }, ...getExtensionDetailNameVirtualDom(name, badge), ...getExtensionDetailDescriptionVirtualDom(description), ...getExtensionDetailHeaderActionsVirtualDom(buttonDefs, settingsButtonEnabled)];
+  }, ...getExtensionDetailNameVirtualDom(name, badge), ...getExtensionDetailDescriptionVirtualDom(description), ...metadataDom, ...getExtensionDetailHeaderActionsVirtualDom(buttonDefs, settingsButtonEnabled)];
   return dom;
 };
 
@@ -6475,9 +6722,11 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
     changelogVirtualDom,
     description,
     detailsVirtualDom,
+    downloadCount,
     focusedTabIndex,
     iconSrc,
     name,
+    rating,
     resources,
     scrollToTopButtonEnabled,
     settingsButtonEnabled,
@@ -6491,7 +6740,7 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
     childCount: 3,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     type: Div
-  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled), ...getTabsVirtualDom(tabs, focusedTabIndex), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
+  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled, downloadCount, rating), ...getTabsVirtualDom(tabs, focusedTabIndex), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
   return dom;
 };
 
@@ -6633,6 +6882,9 @@ const renderEventListeners = () => {
     name: HandleHeaderContextMenu,
     params: ['handleHeaderContextMenu'],
     preventDefault: true
+  }, {
+    name: HandleMarkdownImageError,
+    params: ['handleMarkdownImageError', 'event.currentTarget.src']
   }, {
     name: HandleReadmeScroll,
     params: ['handleScroll', 'event.target.scrollTop', User],
@@ -6688,6 +6940,10 @@ const renderEventListeners = () => {
   }];
 };
 
+const renderTitle = state => {
+  return state.name;
+};
+
 const resize = (state, dimensions) => {
   const padding = getPadding(dimensions.width);
   const sideBarWidth = getSideBarWidth(dimensions.width);
@@ -6742,12 +6998,14 @@ const commandMap = {
   'ExtensionDetail.handleClickSettings': wrapCommand(handleClickSettings),
   'ExtensionDetail.handleClickSize': wrapCommand(handleClickSize),
   'ExtensionDetail.handleClickUninstall': wrapCommand(handleClickUninstall),
+  'ExtensionDetail.handleColorThemeChanged': wrapCommand(handleColorThemeChanged),
   'ExtensionDetail.handleExtensionsChanged': wrapCommand(handleExtensionsChanged),
   'ExtensionDetail.handleExtensionsStatusUpdate': wrapCommand(handleExtensionsStatusUpdate),
   'ExtensionDetail.handleFeaturesClick': wrapCommand(handleClickFeatures),
   'ExtensionDetail.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
   'ExtensionDetail.handleIconError': wrapCommand(handleIconError),
   'ExtensionDetail.handleImageContextMenu': wrapCommand(handleImageContextMenu),
+  'ExtensionDetail.handleMarkdownImageError': wrapCommand(handleMarkdownImageError),
   'ExtensionDetail.handleMouseEnterEnable': wrapCommand(handleMouseEnterEnable),
   'ExtensionDetail.handleMouseLeaveEnable': wrapCommand(handleMouseLeaveEnable),
   'ExtensionDetail.handleReadmeClick': wrapCommand(handleReadmeClick),
@@ -6766,6 +7024,7 @@ const commandMap = {
   'ExtensionDetail.openImageInNewTab': wrapCommand(openImageInNewTab),
   'ExtensionDetail.render2': render2,
   'ExtensionDetail.renderEventListeners': renderEventListeners,
+  'ExtensionDetail.renderTitle': wrapGetter(renderTitle),
   'ExtensionDetail.resetGithubApiMock': wrapCommand(handleResetGithubApiMock),
   'ExtensionDetail.resize': wrapCommand(resize),
   'ExtensionDetail.saveState': wrapGetter(saveState),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "7.13.0",
+  "version": "7.14.1",
   "description": "Extension Detail View Worker",
   "repository": {
     "type": "git",