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

package/dist/extensionDetailViewWorkerMain.js

@@ -1,13 +1,13 @@
 const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
   if (placeholders === emptyObject) {
     return key;
   }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
+  let result = key;
+  for (const [placeholder, replacement] of Object.entries(placeholders)) {
+    result = result.split(`{${placeholder}}`).join(String(replacement));
+  }
+  return result;
 };
 
 const ActivationEvents$1 = 'Activation Events';
@@ -26,6 +26,7 @@ const Disable$1 = 'Disable';
 const Elements = 'Elements';
 const EmptyCommandsArray = 'The extension contributes an empty commands array.';
 const Enable$1 = 'Enable';
+const ExtensionNotAvailable = 'The extension "{PH1}" is not available in this version of LVCE Editor.';
 const Features$2 = 'Features';
 const FileExtensions = 'File Extensions';
 const FileMatch = 'File Match';
@@ -37,7 +38,7 @@ const Installation = 'Installation';
 const InvalidLink = 'Invalid link';
 const Issues = 'Issues';
 const JsonValidation$1 = 'Json Validation';
-const Label = 'Label';
+const Label$1 = 'Label';
 const LastReleased = 'Last Released';
 const LastUpdated = 'Last Updated';
 const License = 'License';
@@ -67,6 +68,8 @@ const Status = 'Status';
 const StringMustNotBeEmpty = 'String must not be empty';
 const Theme$1 = 'Theme';
 const Uninstall$1 = 'Uninstall';
+const UnableToLoadExtension = 'Unable to load extension';
+const UnableToLoadExtensionWithError = 'The extension details could not be loaded: {PH1}';
 const UnsupportedFeature = 'Unsupported Feature';
 const Version = 'Version';
 const WebViews$1 = 'WebViews';
@@ -114,7 +117,7 @@ const openInNewTab = () => {
   return i18nString(OpenInNewTab);
 };
 const label = () => {
-  return i18nString(Label);
+  return i18nString(Label$1);
 };
 const openImageInNewTab$1 = () => {
   return i18nString(OpenImageInNewTab);
@@ -137,6 +140,11 @@ const setColorTheme$2 = () => {
 const enable = () => {
   return i18nString(Enable$1);
 };
+const extensionNotAvailable = extensionId => {
+  return i18nString(ExtensionNotAvailable, {
+    PH1: extensionId
+  });
+};
 const theme = () => {
   return i18nString(Theme$1);
 };
@@ -188,6 +196,14 @@ const elements = () => {
 const uninstall = () => {
   return i18nString(Uninstall$1);
 };
+const unableToLoadExtension = () => {
+  return i18nString(UnableToLoadExtension);
+};
+const unableToLoadExtensionWithError = errorMessage => {
+  return i18nString(UnableToLoadExtensionWithError, {
+    PH1: errorMessage
+  });
+};
 const scrollToTop = () => {
   return i18nString(ScrollToTop$1);
 };
@@ -302,9 +318,14 @@ const Panel = 'panel';
 const Tab = 'tab';
 const TabList = 'tablist';
 
+const Audio = 0;
 const Button$1 = 1;
+const Col = 2;
+const ColGroup = 3;
 const Div = 4;
 const H1 = 5;
+const Input = 6;
+const Kbd = 7;
 const Span = 8;
 const Table$1 = 9;
 const TBody = 10;
@@ -313,20 +334,159 @@ const Text$1 = 12;
 const Th = 13;
 const THead = 14;
 const Tr = 15;
+const I = 16;
 const Img = 17;
+const Root = 0;
+const Ins = 20;
+const Del = 21;
 const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
 const Aside$1 = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
 const Dd = 43;
 const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
 const Li = 48;
+const Ol = 49;
 const P = 50;
 const Pre = 51;
 const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
 const Ul = 60;
+const Video = 61;
+const TextArea = 62;
+const Select = 63;
+const Option = 64;
 const Code$2 = 65;
+const Label = 66;
 const Dt = 67;
+const Iframe = 68;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
 const Reference = 100;
 
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Abbr,
+  Article,
+  Aside: Aside$1,
+  Audio,
+  BlockQuote,
+  Br,
+  Button: Button$1,
+  Canvas,
+  Circle,
+  Cite,
+  Code: Code$2,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label,
+  Li,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol,
+  Option,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote,
+  Rect,
+  Reference,
+  Root,
+  Search,
+  Section,
+  Select,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table: Table$1,
+  Td,
+  Text: Text$1,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr,
+  Ul,
+  Use,
+  Video
+};
+
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 const TargetHref = 'event.target.href';
@@ -371,6 +531,8 @@ const text = data => {
   };
 };
 
+new Set(Object.values(VirtualDomElements));
+
 const SetText = 1;
 const Replace = 2;
 const SetAttribute = 3;
@@ -642,6 +804,7 @@ const Categories = 'Categories';
 const Category = 'Category';
 const Changelog$1 = 'Changelog';
 const MaskIcon = 'MaskIcon';
+const MaskIconWarning = 'MaskIconWarning';
 const ResourceIcon = 'ResourceIcon';
 const Code$1 = 'Code';
 const DefaultMarkdown = 'DefaultMarkdown';
@@ -651,6 +814,11 @@ const DefinitionListItemHeading = 'DefinitionListItemHeading';
 const DefinitionListItemValue = 'DefinitionListItemValue';
 const ExtensionDetail = 'ExtensionDetail';
 const ExtensionDetailDescription = 'ExtensionDetailDescription';
+const ExtensionDetailError = 'ExtensionDetailError';
+const ExtensionDetailErrorCard = 'ExtensionDetailErrorCard';
+const ExtensionDetailErrorIcon = 'ExtensionDetailErrorIcon';
+const ExtensionDetailErrorMessage = 'ExtensionDetailErrorMessage';
+const ExtensionDetailErrorTitle = 'ExtensionDetailErrorTitle';
 const ExtensionDetailHeader = 'ExtensionDetailHeader';
 const ExtensionDetailHeaderActions = 'ExtensionDetailHeaderActions';
 const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
@@ -1375,7 +1543,7 @@ class AssertionError extends Error {
 const Object$1 = 1;
 const Number$1 = 2;
 const Array$1 = 3;
-const String = 4;
+const String$1 = 4;
 const Boolean$1 = 5;
 const Function = 6;
 const Null = 7;
@@ -1387,7 +1555,7 @@ const getType = value => {
     case 'function':
       return Function;
     case 'string':
-      return String;
+      return String$1;
     case 'object':
       if (value === null) {
         return Null;
@@ -1410,7 +1578,7 @@ const number = value => {
 };
 const string = value => {
   const type = getType(value);
-  if (type !== String) {
+  if (type !== String$1) {
     throw new AssertionError('expected value to be of type string');
   }
 };
@@ -1457,7 +1625,6 @@ const walkValue = (value, transferrables, isTransferrable) => {
     for (const property of Object.values(value)) {
       walkValue(property, transferrables, isTransferrable);
     }
-    return;
   }
 };
 const getTransferrables = value => {
@@ -1611,7 +1778,14 @@ class IpcError extends VError {
       const cause = new Error(message);
       // @ts-ignore
       cause.code = code;
-      cause.stack = stack;
+      if (stack) {
+        Object.defineProperty(cause, 'stack', {
+          configurable: true,
+          enumerable: false,
+          value: stack,
+          writable: true
+        });
+      }
       super(cause, betterMessage);
     } else {
       super(betterMessage);
@@ -2810,6 +2984,7 @@ const HandleTabFocus = 18;
 const HandleResourceLinkClick = 19;
 const HandleMouseEnterEnable = 20;
 const HandleMouseLeaveEnable = 21;
+const HandleHeaderContextMenu = 22;
 
 const ActivationEvents = 'ActivationEvents';
 const Changelog = 'Changelog';
@@ -2851,19 +3026,22 @@ const {
   set: set$3
 } = MarkdownWorker;
 
+const addScrollToTopVirtualDom = dom => {
+  const [firstNode, ...rest] = dom;
+  const extraDom = getScrollToTopVirtualDom();
+  return [{
+    ...firstNode,
+    childCount: firstNode.childCount + 1,
+    onClick: HandleReadmeClick,
+    onScroll: HandleReadmeScroll,
+    onSelectionChange: HandleSelectionChange
+  }, ...extraDom, ...rest];
+};
 const getMarkdownVirtualDom = async (html, options) => {
   string(html);
   const dom = await getVirtualDom(html);
   if (options?.scrollToTopEnabled) {
-    const [firstNode, ...rest] = dom;
-    const extraDom = getScrollToTopVirtualDom();
-    return [{
-      ...firstNode,
-      childCount: firstNode.childCount + 1,
-      onClick: HandleReadmeClick,
-      onScroll: HandleReadmeScroll,
-      onSelectionChange: HandleSelectionChange
-    }, ...extraDom, ...rest];
+    return addScrollToTopVirtualDom(dom);
   }
   return dom;
 };
@@ -3431,6 +3609,8 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     disabled: false,
     displaySize: '',
     downloadCount: 'n/a',
+    errorMessage: '',
+    errorTitle: '',
     extension: {},
     extensionId: '',
     extensionUri: '',
@@ -3703,6 +3883,96 @@ const getMenus = () => {
   }];
 };
 
+let mock;
+const getPage = url => {
+  return Number(new URL(url).searchParams.get('page')) || 1;
+};
+const createGeneratedReleases = (url, count) => {
+  const page = getPage(url);
+  const start = (page - 1) * 100;
+  const end = Math.min(start + 100, count);
+  return Array.from({
+    length: Math.max(0, end - start)
+  }, (_, index) => {
+    const releaseNumber = count - start - index;
+    return {
+      body: `Release notes for version ${releaseNumber}`,
+      html_url: `https://github.com/test-owner/test-repository/releases/tag/v${releaseNumber}`,
+      name: `Version ${releaseNumber}`,
+      published_at: '2026-01-01T00:00:00Z',
+      tag_name: `v${releaseNumber}`
+    };
+  });
+};
+const createMockResponse = (url, value) => {
+  const status = value.status ?? 200;
+  const statusText = value.statusText || getStatusText(status);
+  const headers = new Headers(value.headers);
+  if (value.type === 'invalid-json') {
+    headers.set('content-type', 'text/html');
+    return new Response('<!doctype html><title>Unexpected response</title>', {
+      headers,
+      status,
+      statusText
+    });
+  }
+  const body = value.type === 'generated' ? createGeneratedReleases(url, value.releaseCount ?? 0) : value.body ?? [];
+  headers.set('content-type', 'application/json');
+  return Response.json(body, {
+    headers,
+    status,
+    statusText
+  });
+};
+const getStatusText = status => {
+  switch (status) {
+    case 400:
+      return 'Bad Request';
+    case 401:
+      return 'Unauthorized';
+    case 403:
+      return 'Forbidden';
+    case 404:
+      return 'Not Found';
+    case 429:
+      return 'Too Many Requests';
+    case 500:
+      return 'Internal Server Error';
+    case 503:
+      return 'Service Unavailable';
+    default:
+      return '';
+  }
+};
+const request = url => {
+  if (!mock) {
+    return fetch(url, {
+      headers: {
+        Accept: 'application/vnd.github+json',
+        'X-GitHub-Api-Version': '2022-11-28'
+      }
+    });
+  }
+  if (mock.type === 'network-error') {
+    return Promise.reject(new TypeError(mock.message || 'Failed to fetch'));
+  }
+  return Promise.resolve(createMockResponse(url, mock));
+};
+const mockGithubApi = value => {
+  mock = value;
+};
+const handleMockGithubApi = (state, value) => {
+  mockGithubApi(value);
+  return state;
+};
+const resetGithubApiMock = () => {
+  mock = undefined;
+};
+const handleResetGithubApiMock = state => {
+  resetGithubApiMock();
+  return state;
+};
+
 const show2 = async (uid, menuId, x, y, args) => {
   await showContextMenu2(uid, menuId, x, y, args);
 };
@@ -3900,6 +4170,15 @@ const handleClickFeatures = async (state, name) => {
 };
 
 const handleClickScrollToTop = state => {
+  if (state.selectedTab === Changelog) {
+    if (state.changelogScrollTop === 0) {
+      return state;
+    }
+    return {
+      ...state,
+      changelogScrollTop: 0
+    };
+  }
   const {
     readmeScrollTop
   } = state;
@@ -4033,11 +4312,69 @@ const getCurrentColorTheme = async () => {
   return '';
 };
 
+const getErrorMessage$1 = error => {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+  if (typeof error === 'string' && error) {
+    return error;
+  }
+  return 'Unknown error';
+};
+
 const getExtensionIdFromUri = uri => {
   const id = uri.slice('extension-detail://'.length);
   return id;
 };
 
+const getExtensionUri = (uri, platform, origin) => {
+  if (platform !== Web || !uri) {
+    return uri;
+  }
+  return new URL(uri, origin).href;
+};
+
+const segmentRegex = /^[\w.-]+$/;
+const getRepositoryUrl = extension => {
+  if (!extension || !hasProperty(extension, 'repository')) {
+    return '';
+  }
+  const {
+    repository
+  } = extension;
+  if (typeof repository === 'string') {
+    return repository;
+  }
+  if (repository && hasProperty(repository, 'url') && typeof repository.url === 'string') {
+    return repository.url;
+  }
+  return '';
+};
+const getGithubRepository = extension => {
+  const rawUrl = getRepositoryUrl(extension).replace(/^git\+/, '');
+  try {
+    const url = new URL(rawUrl);
+    if (url.protocol !== 'https:' || url.hostname.toLowerCase() !== 'github.com' || url.username || url.password || url.port) {
+      return undefined;
+    }
+    const segments = url.pathname.split('/').filter(Boolean);
+    if (segments.length !== 2) {
+      return undefined;
+    }
+    const owner = segments[0];
+    const repository = segments[1].replace(/\.git$/i, '');
+    if (!owner || !repository || !segmentRegex.test(owner) || !segmentRegex.test(repository)) {
+      return undefined;
+    }
+    return {
+      owner,
+      repository
+    };
+  } catch {
+    return undefined;
+  }
+};
+
 const getLinkProtectionEnabled = async () => {
   try {
     const setting = await getPreference('application.linkProtectionEnabled');
@@ -4186,6 +4523,9 @@ const getIcon = (extension, platform, assetDir) => {
     }
     return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
   }
+  if (platform === Web) {
+    return `${extension.path}/${extension.icon}`;
+  }
   return '';
 };
 
@@ -4497,23 +4837,8 @@ const formatCreated = (created, now = Date.now()) => {
   return relativeTimeFormat.format(value, unit);
 };
 
-const formatLastUpdated = lastUpdated => {
-  if (lastUpdated === null) {
-    return 'n/a';
-  }
-  try {
-    const date = new Date(lastUpdated * 1000);
-    if (Number.isNaN(date.getTime())) {
-      return 'n/a';
-    }
-    return date.toLocaleDateString(undefined, {
-      day: 'numeric',
-      month: 'short',
-      year: 'numeric'
-    });
-  } catch {
-    return 'n/a';
-  }
+const formatLastUpdated = (lastUpdated, now = Date.now()) => {
+  return formatCreated(lastUpdated, now);
 };
 
 const getSizeEntries = (showSizeLink, displaySize, extensionUri) => {
@@ -4694,6 +5019,16 @@ const parseCreated = extension => {
   return timestamp;
 };
 
+const secondsToMillisecondsThreshold = 10_000_000_000;
+const normalizeTimestamp = timestamp => {
+  if (!Number.isFinite(timestamp) || timestamp <= 0) {
+    return null;
+  }
+  if (timestamp < secondsToMillisecondsThreshold) {
+    return timestamp * 1000;
+  }
+  return timestamp;
+};
 const parseLastUpdated = extension => {
   if (!extension || typeof extension !== 'object') {
     return null;
@@ -4705,16 +5040,14 @@ const parseLastUpdated = extension => {
     return null;
   }
   if (typeof lastUpdated === 'number') {
-    if (Number.isFinite(lastUpdated) && lastUpdated > 0) {
-      return lastUpdated;
-    }
-    return null;
+    return normalizeTimestamp(lastUpdated);
   }
   if (typeof lastUpdated === 'string') {
-    const parsed = Number.parseFloat(lastUpdated);
-    if (Number.isFinite(parsed) && parsed > 0) {
-      return parsed;
+    const numericTimestamp = Number(lastUpdated);
+    if (Number.isFinite(numericTimestamp)) {
+      return normalizeTimestamp(numericTimestamp);
     }
+    return normalizeTimestamp(Date.parse(lastUpdated));
   }
   return null;
 };
@@ -4767,7 +5100,7 @@ const restoreState = savedState => {
 const isEnabled = tab => {
   return tab.enabled;
 };
-const loadContent = async (state, platform, savedState, isTest = false) => {
+const loadContentInternal = async (state, platform, savedState, isTest = false) => {
   if (isTest) {
     savedState = undefined;
   }
@@ -4789,13 +5122,14 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     description,
     downloadCount,
     extensionId,
-    extensionUri,
+    extensionUri: unresolvedExtensionUri,
     extensionVersion,
     hasColorTheme,
     iconSrc,
     name,
     rating
   } = headerData;
+  const extensionUri = getExtensionUri(unresolvedExtensionUri, platform, location.origin);
   const readmeUrl = join(extensionUri, 'README.md');
   const changelogUrl = join(extensionUri, 'CHANGELOG.md');
   const [hasReadme, hasChangelog] = await Promise.all([existsFile(readmeUrl), existsFile(changelogUrl)]);
@@ -4814,7 +5148,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   const detailsVirtualDom = await getMarkdownVirtualDom(readmeHtml, {
     scrollToTopEnabled: true
   });
-  const isBuiltin = extension?.isBuiltin;
+  const isBuiltin = extension?.isBuiltin || extension?.builtin || false;
   const disabled = extension?.disabled;
   const extensionColorThemeId = getColorThemeId(extension) || '';
   const extensionColorThemeLabel = getColorThemeLabel(extension) || '';
@@ -4828,7 +5162,8 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   } = restoreState(savedState);
   const features = getFeatures(selectedFeature || Theme, extension);
   const hasFeatures = features.length > 0;
-  const tabs = getTabs(selectedTab, hasReadme, hasFeatures, hasChangelog);
+  const hasGithubReleases = Boolean(getGithubRepository(extension));
+  const tabs = getTabs(selectedTab, hasReadme, hasFeatures, hasChangelog || hasGithubReleases);
   const enabledTabs = tabs.filter(isEnabled);
   const sizeValue = getViewletSize(width || 0);
   const showSizeLink = platform !== Web$1;
@@ -4861,6 +5196,8 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     disabled,
     displaySize,
     downloadCount,
+    errorMessage: '',
+    errorTitle: '',
     extension,
     extensionId,
     extensionUri,
@@ -4897,6 +5234,21 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     tabs: enabledTabs
   };
 };
+const loadContent = async (state, platform, savedState, isTest = false) => {
+  try {
+    return await loadContentInternal(state, platform, savedState, isTest);
+  } catch (error) {
+    const extensionId = getExtensionIdFromUri(state.uri);
+    const errorMessage = error instanceof ExtensionNotFoundError ? extensionNotAvailable(extensionId) : unableToLoadExtensionWithError(getErrorMessage$1(error));
+    return {
+      ...state,
+      errorMessage,
+      errorTitle: unableToLoadExtension(),
+      extensionId,
+      initial: false
+    };
+  }
+};
 
 const handleExtensionsChanged = async state => {
   const {
@@ -4916,6 +5268,10 @@ const handleExtensionsStatusUpdate = async state => {
   };
 };
 
+const handleHeaderContextMenu = async state => {
+  return state;
+};
+
 const handleIconError = state => {
   const {
     assetDir,
@@ -5046,6 +5402,13 @@ const handleResourceLinkClick = async (state, href) => {
 
 const handleScroll = (state, scrollTop, scrollSource = Script) => {
   const newScrollTop = Math.max(0, scrollTop);
+  if (state.selectedTab === Changelog) {
+    return {
+      ...state,
+      changelogScrollTop: newScrollTop,
+      scrollSource
+    };
+  }
   return {
     ...state,
     readmeScrollTop: newScrollTop,
@@ -5072,6 +5435,39 @@ const handleTabFocus = (state, name) => {
   };
 };
 
+const escapeMarkdown = value => {
+  return value.replaceAll('\\', '\\\\').replaceAll('[', '\\[').replaceAll(']', '\\]');
+};
+const getPublishedText = publishedAt => {
+  if (!publishedAt) {
+    return 'Publication date unavailable';
+  }
+  const date = new Date(publishedAt);
+  if (Number.isNaN(date.getTime())) {
+    return 'Publication date unavailable';
+  }
+  return `Published ${date.toLocaleDateString(undefined, {
+    dateStyle: 'long'
+  })}`;
+};
+const getGithubReleasesMarkdown = (releases, githubRepository) => {
+  if (releases.length === 0) {
+    return `# Changelog\n\nNo GitHub releases were found for **${escapeMarkdown(githubRepository.owner)}/${escapeMarkdown(githubRepository.repository)}**.`;
+  }
+  return releases.map(release => {
+    const title = release.name || release.tagName;
+    const body = release.body.trim() || '_No release notes were provided._';
+    return `# [${escapeMarkdown(title)}](${release.htmlUrl})\n\n${getPublishedText(release.publishedAt)} · \`${release.tagName}\`\n\n${body}`;
+  }).join('\n\n---\n\n');
+};
+
+class GithubReleasesError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'GithubReleasesError';
+  }
+}
+
 const error = async error => {
   // TODO send message to error worker or log worker
   // @ts-ignore
@@ -5092,21 +5488,206 @@ const loadChangelogContent = async path => {
   }
 };
 
+const pageSize = 100;
+const maximumReleases = 100;
+const getErrorMessage = async response => {
+  try {
+    const body = await response.clone().json();
+    if (body && hasProperty(body, 'message') && typeof body.message === 'string') {
+      return body.message;
+    }
+  } catch {
+    // The status code still provides a useful error when the error body is invalid.
+  }
+  return '';
+};
+const getHttpError = async response => {
+  const apiMessage = await getErrorMessage(response);
+  const rateLimitRemaining = response.headers.get('x-ratelimit-remaining');
+  if (response.status === 429 || response.status === 403 && (rateLimitRemaining === '0' || /rate limit/i.test(apiMessage))) {
+    const resetValue = Number(response.headers.get('x-ratelimit-reset'));
+    const retry = Number.isFinite(resetValue) && resetValue > 0 ? ` Try again after ${new Date(resetValue * 1000).toLocaleString()}.` : ' Please try again later.';
+    return new GithubReleasesError(`GitHub API rate limit exceeded.${retry}`);
+  }
+  if (response.status === 404) {
+    return new GithubReleasesError('The GitHub repository could not be found or is not publicly reachable.');
+  }
+  if (response.status >= 500) {
+    return new GithubReleasesError(`GitHub is temporarily unavailable (server error ${response.status}). Please try again later.`);
+  }
+  if (response.status >= 400) {
+    const detail = apiMessage ? `: ${apiMessage}` : '';
+    return new GithubReleasesError(`GitHub rejected the releases request (${response.status} ${response.statusText || 'Client Error'})${detail}.`);
+  }
+  return new GithubReleasesError(`GitHub returned an unexpected HTTP status (${response.status}).`);
+};
+const parseNullableString = value => {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (value === null) {
+    return '';
+  }
+  return undefined;
+};
+const parseRelease = value => {
+  if (!value || !hasProperty(value, 'body') || !hasProperty(value, 'html_url') || !hasProperty(value, 'name') || !hasProperty(value, 'published_at') || !hasProperty(value, 'tag_name')) {
+    return undefined;
+  }
+  const body = parseNullableString(value.body);
+  const name = parseNullableString(value.name);
+  const publishedAt = parseNullableString(value.published_at);
+  if (body === undefined || name === undefined || publishedAt === undefined || typeof value.html_url !== 'string' || typeof value.tag_name !== 'string') {
+    return undefined;
+  }
+  try {
+    const htmlUrl = new URL(value.html_url);
+    if (htmlUrl.protocol !== 'https:' || htmlUrl.hostname !== 'github.com') {
+      return undefined;
+    }
+  } catch {
+    return undefined;
+  }
+  return {
+    body,
+    htmlUrl: value.html_url,
+    name,
+    publishedAt,
+    tagName: value.tag_name
+  };
+};
+const parsePage = async response => {
+  let value;
+  try {
+    value = await response.json();
+  } catch {
+    throw new GithubReleasesError('GitHub returned an invalid response instead of JSON release data. Please try again later.');
+  }
+  if (!Array.isArray(value)) {
+    throw new GithubReleasesError('GitHub returned invalid release data. Please try again later.');
+  }
+  const releases = value.map(parseRelease);
+  if (releases.some(release => !release)) {
+    throw new GithubReleasesError('GitHub returned invalid release data. Please try again later.');
+  }
+  return releases;
+};
+const loadGithubReleases = async ({
+  owner,
+  repository
+}) => {
+  const releases = [];
+  for (let page = 1;; page++) {
+    const url = `https://api.github.com/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repository)}/releases?per_page=${pageSize}&page=${page}`;
+    let response;
+    try {
+      response = await request(url);
+    } catch {
+      throw new GithubReleasesError('GitHub releases could not be loaded because GitHub is not reachable. Check your connection and try again.');
+    }
+    if (!response.ok) {
+      throw await getHttpError(response);
+    }
+    const pageReleases = await parsePage(response);
+    const remaining = maximumReleases - releases.length;
+    if (pageReleases.length > remaining) {
+      releases.push(...pageReleases.slice(0, remaining));
+      return {
+        isTruncated: true,
+        releases
+      };
+    }
+    releases.push(...pageReleases);
+    if (pageReleases.length < pageSize) {
+      return {
+        isTruncated: false,
+        releases
+      };
+    }
+  }
+};
+
+const releaseBatchSize = 100;
+const mergeMarkdownVirtualDoms = chunks => {
+  let root;
+  const children = [];
+  for (const chunk of chunks) {
+    const [chunkRoot, ...chunkChildren] = chunk;
+    if (!chunkRoot) {
+      continue;
+    }
+    root = root ? {
+      ...root,
+      childCount: root.childCount + chunkRoot.childCount
+    } : chunkRoot;
+    children.push(...chunkChildren);
+  }
+  return root ? [root, ...children] : [];
+};
+const renderGithubReleases = async (result, githubRepository, languages, locationProtocol) => {
+  const chunks = [];
+  const {
+    isTruncated,
+    releases
+  } = result;
+  const releaseGroups = releases.length === 0 ? [[]] : Array.from({
+    length: Math.ceil(releases.length / releaseBatchSize)
+  }, (_, index) => {
+    return releases.slice(index * releaseBatchSize, (index + 1) * releaseBatchSize);
+  });
+  const baseUrl = `https://github.com/${githubRepository.owner}/${githubRepository.repository}/blob/HEAD/`;
+  for (const [index, releaseGroup] of releaseGroups.entries()) {
+    const limitMessage = index === 0 && isTruncated ? `> Showing the newest ${releases.length} GitHub releases. Older releases are not displayed to keep the editor responsive.\n\n` : '';
+    const markdown = limitMessage + getGithubReleasesMarkdown(releaseGroup, githubRepository);
+    const html = await renderMarkdown(markdown, {
+      baseUrl,
+      languages,
+      linksExternal: true,
+      locationProtocol
+    });
+    chunks.push([...(await getMarkdownVirtualDom(html))]);
+  }
+  return addScrollToTopVirtualDom(mergeMarkdownVirtualDoms(chunks));
+};
 const selectTabChangelog = async state => {
   const {
     baseUrl,
     extension,
+    extensionUri,
     languages,
     locationProtocol,
     tabs
   } = state;
-  const changelogContent = await loadChangelogContent(extension.path); // TODO use uri
-  const changelogMarkdownHtml = await renderMarkdown(changelogContent, {
-    baseUrl,
-    languages,
-    locationProtocol
-  });
-  const changelogDom = await getMarkdownVirtualDom(changelogMarkdownHtml);
+  const githubRepository = getGithubRepository(extension);
+  let changelogDom;
+  if (githubRepository) {
+    try {
+      const result = await loadGithubReleases(githubRepository);
+      changelogDom = await renderGithubReleases(result, githubRepository, languages, locationProtocol);
+    } catch (error) {
+      const message = error instanceof GithubReleasesError ? error.message : 'GitHub releases could not be loaded. Please try again later.';
+      const html = await renderMarkdown(`# Changelog\n\n${message}`, {
+        baseUrl,
+        languages,
+        linksExternal: true,
+        locationProtocol
+      });
+      changelogDom = await getMarkdownVirtualDom(html, {
+        scrollToTopEnabled: true
+      });
+    }
+  } else {
+    const changelogContent = await loadChangelogContent(extensionUri);
+    const html = await renderMarkdown(changelogContent, {
+      baseUrl,
+      languages,
+      linksExternal: true,
+      locationProtocol
+    });
+    changelogDom = await getMarkdownVirtualDom(html, {
+      scrollToTopEnabled: true
+    });
+  }
   const newTabs = tabs.map(tab => {
     return {
       ...tab,
@@ -5380,7 +5961,8 @@ const getChangelogVirtualDom = changelogDom => {
   // TODO set tabpanel role
   return [{
     childCount: 1,
-    className: Changelog$1,
+    className: `${ExtensionDetailPanel} ${Changelog$1}`,
+    role: Panel,
     type: Div
   }, ...changelogDom];
 };
@@ -5684,6 +6266,31 @@ const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, selectedTab, w
   }
 };
 
+const getExtensionDetailErrorVirtualDom = (title, message) => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(Viewlet, ExtensionDetail, ExtensionDetailError),
+    type: Div
+  }, {
+    childCount: 3,
+    className: ExtensionDetailErrorCard,
+    role: 'alert',
+    type: Div
+  }, {
+    childCount: 0,
+    className: mergeClassNames(MaskIcon, MaskIconWarning, ExtensionDetailErrorIcon),
+    type: Div
+  }, {
+    childCount: 1,
+    className: ExtensionDetailErrorTitle,
+    type: H1
+  }, text(title), {
+    childCount: 1,
+    className: ExtensionDetailErrorMessage,
+    type: P
+  }, text(message)];
+};
+
 const getExtensionDetailDescriptionVirtualDom = description => {
   return [{
     childCount: 1,
@@ -5796,6 +6403,7 @@ const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, b
   }, getExtensionDetailIconVirtualDom(iconSrc), {
     childCount: 3,
     className: ExtensionDetailHeaderDetails,
+    onContextMenu: HandleHeaderContextMenu,
     type: Div
   }, ...getExtensionDetailNameVirtualDom(name, badge), ...getExtensionDetailDescriptionVirtualDom(description), ...getExtensionDetailHeaderActionsVirtualDom(buttonDefs, settingsButtonEnabled)];
   return dom;
@@ -5852,6 +6460,9 @@ const getClassNames = size => {
 };
 
 const getExtensionDetailVirtualDom = (newState, selectedTab) => {
+  if (newState.errorMessage) {
+    return getExtensionDetailErrorVirtualDom(newState.errorTitle, newState.errorMessage);
+  }
   // TODO move this to view model so that rendering occurs like
   // 1. state
   // 2. view model
@@ -6018,6 +6629,10 @@ const renderEventListeners = () => {
     name: HandleImageContextMenu,
     params: ['handleImageContextMenu', ClientX, ClientY],
     preventDefault: true
+  }, {
+    name: HandleHeaderContextMenu,
+    params: ['handleHeaderContextMenu'],
+    preventDefault: true
   }, {
     name: HandleReadmeScroll,
     params: ['handleScroll', 'event.target.scrollTop', User],
@@ -6130,6 +6745,7 @@ const commandMap = {
   '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.handleMouseEnterEnable': wrapCommand(handleMouseEnterEnable),
@@ -6146,9 +6762,11 @@ const commandMap = {
   'ExtensionDetail.hideSizeLink': wrapCommand(hideSizeLink),
   'ExtensionDetail.initialize': initialize,
   'ExtensionDetail.loadContent2': wrapCommand(loadContent2),
+  'ExtensionDetail.mockGithubApi': wrapCommand(handleMockGithubApi),
   'ExtensionDetail.openImageInNewTab': wrapCommand(openImageInNewTab),
   'ExtensionDetail.render2': render2,
   'ExtensionDetail.renderEventListeners': renderEventListeners,
+  'ExtensionDetail.resetGithubApiMock': wrapCommand(handleResetGithubApiMock),
   'ExtensionDetail.resize': wrapCommand(resize),
   'ExtensionDetail.saveState': wrapGetter(saveState),
   'ExtensionDetail.selectTab': wrapCommand(selectTab),

package/package.json

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