@teambit/changelog 0.0.1082 → 0.0.1083

package/changelog.section.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { Section } from '@teambit/component';
 import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
-import { ChangeLogPage } from './ui/change-log-page';
+import { ChangeLogUI } from './changelog.ui.runtime';
 
 export class ChangelogSection implements Section {
+  constructor(private ui: ChangeLogUI) {}
+
   route = {
     path: '~changelog',
-    element: <ChangeLogPage />,
+    element: this.ui.ChangeLog(),
   };
+
   navigationLink = {
     href: '~changelog',
     children: <MenuWidgetIcon icon="changelog" tooltipContent="Change log" />,

package/changelog.ui.runtime.tsx

@@ -1,23 +1,29 @@
 import { ComponentAspect, ComponentUI } from '@teambit/component';
 import { UIRuntime } from '@teambit/ui';
 import React from 'react';
+import { Harmony } from '@teambit/harmony';
 
 import { ChangelogAspect } from './changelog.aspect';
 import { ChangelogSection } from './changelog.section';
-import { ChangeLogPage } from './ui/change-log-page';
+import { ChangeLogPage, ChangeLogPageProps } from './ui/change-log-page';
 
 export class ChangeLogUI {
-  ChangeLog = () => {
-    return <ChangeLogPage />;
+  constructor(private host: string) {}
+
+  ChangeLog = (props: ChangeLogPageProps = {}) => {
+    return <ChangeLogPage {...props} host={this.host} />;
   };
 
   static dependencies = [ComponentAspect];
 
   static runtime = UIRuntime;
 
-  static async provider([component]: [ComponentUI]) {
-    const ui = new ChangeLogUI();
-    const section = new ChangelogSection();
+  static async provider([component]: [ComponentUI], _, __, harmony: Harmony) {
+    const { config } = harmony;
+    const host = String(config.get('teambit.harmony/bit'));
+
+    const ui = new ChangeLogUI(host);
+    const section = new ChangelogSection(ui);
 
     component.registerRoute(section.route);
     component.registerWidget(section.navigationLink, section.order);

package/dist/changelog.section.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { Section } from '@teambit/component';
+import { ChangeLogUI } from './changelog.ui.runtime';
 export declare class ChangelogSection implements Section {
+    private ui;
+    constructor(ui: ChangeLogUI);
     route: {
         path: string;
         element: JSX.Element;

package/dist/changelog.section.js

@@ -26,18 +26,12 @@ function _uiFoundationUi() {
   };
   return data;
 }
-function _changeLogPage() {
-  const data = require("./ui/change-log-page");
-  _changeLogPage = function () {
-    return data;
-  };
-  return data;
-}
 class ChangelogSection {
-  constructor() {
+  constructor(ui) {
+    this.ui = ui;
     (0, _defineProperty2().default)(this, "route", {
       path: '~changelog',
-      element: /*#__PURE__*/_react().default.createElement(_changeLogPage().ChangeLogPage, null)
+      element: this.ui.ChangeLog()
     });
     (0, _defineProperty2().default)(this, "navigationLink", {
       href: '~changelog',

package/dist/changelog.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["ChangelogSection","path","element","href","children","displayName"],"sources":["changelog.section.tsx"],"sourcesContent":["import React from 'react';\nimport { Section } from '@teambit/component';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { ChangeLogPage } from './ui/change-log-page';\n\nexport class ChangelogSection implements Section {\n  route = {\n    path: '~changelog',\n    element: <ChangeLogPage />,\n  };\n  navigationLink = {\n    href: '~changelog',\n    children: <MenuWidgetIcon icon=\"changelog\" tooltipContent=\"Change log\" />,\n    displayName: 'Change log',\n  };\n  order = 40;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,gBAAgB,CAAoB;EAAA;IAAA,+CACvC;MACNC,IAAI,EAAE,YAAY;MAClBC,OAAO,eAAE,+BAAC,8BAAa;IACzB,CAAC;IAAA,wDACgB;MACfC,IAAI,EAAE,YAAY;MAClBC,QAAQ,eAAE,+BAAC,gCAAc;QAAC,IAAI,EAAC,WAAW;QAAC,cAAc,EAAC;MAAY,EAAG;MACzEC,WAAW,EAAE;IACf,CAAC;IAAA,+CACO,EAAE;EAAA;AACZ;AAAC"}
+{"version":3,"names":["ChangelogSection","constructor","ui","path","element","ChangeLog","href","children","displayName"],"sources":["changelog.section.tsx"],"sourcesContent":["import React from 'react';\nimport { Section } from '@teambit/component';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { ChangeLogUI } from './changelog.ui.runtime';\n\nexport class ChangelogSection implements Section {\n  constructor(private ui: ChangeLogUI) {}\n\n  route = {\n    path: '~changelog',\n    element: this.ui.ChangeLog(),\n  };\n\n  navigationLink = {\n    href: '~changelog',\n    children: <MenuWidgetIcon icon=\"changelog\" tooltipContent=\"Change log\" />,\n    displayName: 'Change log',\n  };\n  order = 40;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGO,MAAMA,gBAAgB,CAAoB;EAC/CC,WAAW,CAASC,EAAe,EAAE;IAAA,KAAjBA,EAAe,GAAfA,EAAe;IAAA,+CAE3B;MACNC,IAAI,EAAE,YAAY;MAClBC,OAAO,EAAE,IAAI,CAACF,EAAE,CAACG,SAAS;IAC5B,CAAC;IAAA,wDAEgB;MACfC,IAAI,EAAE,YAAY;MAClBC,QAAQ,eAAE,+BAAC,gCAAc;QAAC,IAAI,EAAC,WAAW;QAAC,cAAc,EAAC;MAAY,EAAG;MACzEC,WAAW,EAAE;IACf,CAAC;IAAA,+CACO,EAAE;EAZ4B;AAaxC;AAAC"}

package/dist/changelog.ui.runtime.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 import { ComponentUI } from '@teambit/component';
+import { Harmony } from '@teambit/harmony';
+import { ChangeLogPageProps } from './ui/change-log-page';
 export declare class ChangeLogUI {
-    ChangeLog: () => JSX.Element;
+    private host;
+    constructor(host: string);
+    ChangeLog: (props?: ChangeLogPageProps) => JSX.Element;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static provider([component]: [ComponentUI]): Promise<ChangeLogUI>;
+    static provider([component]: [ComponentUI], _: any, __: any, harmony: Harmony): Promise<ChangeLogUI>;
 }

package/dist/changelog.ui.runtime.js

@@ -7,6 +7,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChangeLogUI = void 0;
+function _extends2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+  _extends2 = function () {
+    return data;
+  };
+  return data;
+}
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
   _defineProperty2 = function () {
@@ -57,14 +64,21 @@ function _changeLogPage() {
   return data;
 }
 class ChangeLogUI {
-  constructor() {
-    (0, _defineProperty2().default)(this, "ChangeLog", () => {
-      return /*#__PURE__*/_react().default.createElement(_changeLogPage().ChangeLogPage, null);
+  constructor(host) {
+    this.host = host;
+    (0, _defineProperty2().default)(this, "ChangeLog", (props = {}) => {
+      return /*#__PURE__*/_react().default.createElement(_changeLogPage().ChangeLogPage, (0, _extends2().default)({}, props, {
+        host: this.host
+      }));
     });
   }
-  static async provider([component]) {
-    const ui = new ChangeLogUI();
-    const section = new (_changelog2().ChangelogSection)();
+  static async provider([component], _, __, harmony) {
+    const {
+      config
+    } = harmony;
+    const host = String(config.get('teambit.harmony/bit'));
+    const ui = new ChangeLogUI(host);
+    const section = new (_changelog2().ChangelogSection)(ui);
     component.registerRoute(section.route);
     component.registerWidget(section.navigationLink, section.order);
     return ui;

package/dist/changelog.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["ChangeLogUI","provider","component","ui","section","ChangelogSection","registerRoute","route","registerWidget","navigationLink","order","ComponentAspect","UIRuntime","ChangelogAspect","addRuntime"],"sources":["changelog.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport React from 'react';\n\nimport { ChangelogAspect } from './changelog.aspect';\nimport { ChangelogSection } from './changelog.section';\nimport { ChangeLogPage } from './ui/change-log-page';\n\nexport class ChangeLogUI {\n  ChangeLog = () => {\n    return <ChangeLogPage />;\n  };\n\n  static dependencies = [ComponentAspect];\n\n  static runtime = UIRuntime;\n\n  static async provider([component]: [ComponentUI]) {\n    const ui = new ChangeLogUI();\n    const section = new ChangelogSection();\n\n    component.registerRoute(section.route);\n    component.registerWidget(section.navigationLink, section.order);\n\n    return ui;\n  }\n}\n\nChangelogAspect.addRuntime(ChangeLogUI);\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,WAAW,CAAC;EAAA;IAAA,mDACX,MAAM;MAChB,oBAAO,+BAAC,8BAAa,OAAG;IAC1B,CAAC;EAAA;EAMD,aAAaC,QAAQ,CAAC,CAACC,SAAS,CAAgB,EAAE;IAChD,MAAMC,EAAE,GAAG,IAAIH,WAAW,EAAE;IAC5B,MAAMI,OAAO,GAAG,KAAIC,8BAAgB,GAAE;IAEtCH,SAAS,CAACI,aAAa,CAACF,OAAO,CAACG,KAAK,CAAC;IACtCL,SAAS,CAACM,cAAc,CAACJ,OAAO,CAACK,cAAc,EAAEL,OAAO,CAACM,KAAK,CAAC;IAE/D,OAAOP,EAAE;EACX;AACF;AAAC;AAAA,gCAlBYH,WAAW,kBAKA,CAACW,4BAAe,CAAC;AAAA,gCAL5BX,WAAW,aAOLY,eAAS;AAa5BC,4BAAe,CAACC,UAAU,CAACd,WAAW,CAAC"}
+{"version":3,"names":["ChangeLogUI","constructor","host","props","provider","component","_","__","harmony","config","String","get","ui","section","ChangelogSection","registerRoute","route","registerWidget","navigationLink","order","ComponentAspect","UIRuntime","ChangelogAspect","addRuntime"],"sources":["changelog.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport React from 'react';\nimport { Harmony } from '@teambit/harmony';\n\nimport { ChangelogAspect } from './changelog.aspect';\nimport { ChangelogSection } from './changelog.section';\nimport { ChangeLogPage, ChangeLogPageProps } from './ui/change-log-page';\n\nexport class ChangeLogUI {\n  constructor(private host: string) {}\n\n  ChangeLog = (props: ChangeLogPageProps = {}) => {\n    return <ChangeLogPage {...props} host={this.host} />;\n  };\n\n  static dependencies = [ComponentAspect];\n\n  static runtime = UIRuntime;\n\n  static async provider([component]: [ComponentUI], _, __, harmony: Harmony) {\n    const { config } = harmony;\n    const host = String(config.get('teambit.harmony/bit'));\n\n    const ui = new ChangeLogUI(host);\n    const section = new ChangelogSection(ui);\n\n    component.registerRoute(section.route);\n    component.registerWidget(section.navigationLink, section.order);\n\n    return ui;\n  }\n}\n\nChangelogAspect.addRuntime(ChangeLogUI);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,WAAW,CAAC;EACvBC,WAAW,CAASC,IAAY,EAAE;IAAA,KAAdA,IAAY,GAAZA,IAAY;IAAA,mDAEpB,CAACC,KAAyB,GAAG,CAAC,CAAC,KAAK;MAC9C,oBAAO,+BAAC,8BAAa,+BAAKA,KAAK;QAAE,IAAI,EAAE,IAAI,CAACD;MAAK,GAAG;IACtD,CAAC;EAJkC;EAUnC,aAAaE,QAAQ,CAAC,CAACC,SAAS,CAAgB,EAAEC,CAAC,EAAEC,EAAE,EAAEC,OAAgB,EAAE;IACzE,MAAM;MAAEC;IAAO,CAAC,GAAGD,OAAO;IAC1B,MAAMN,IAAI,GAAGQ,MAAM,CAACD,MAAM,CAACE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IAEtD,MAAMC,EAAE,GAAG,IAAIZ,WAAW,CAACE,IAAI,CAAC;IAChC,MAAMW,OAAO,GAAG,KAAIC,8BAAgB,EAACF,EAAE,CAAC;IAExCP,SAAS,CAACU,aAAa,CAACF,OAAO,CAACG,KAAK,CAAC;IACtCX,SAAS,CAACY,cAAc,CAACJ,OAAO,CAACK,cAAc,EAAEL,OAAO,CAACM,KAAK,CAAC;IAE/D,OAAOP,EAAE;EACX;AACF;AAAC;AAAA,gCAvBYZ,WAAW,kBAOA,CAACoB,4BAAe,CAAC;AAAA,gCAP5BpB,WAAW,aASLqB,eAAS;AAgB5BC,4BAAe,CAACC,UAAU,CAACvB,WAAW,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ChangelogAspect } from './changelog.aspect';
+export type { ChangeLogPageProps } from './ui/change-log-page';
 export type { ChangeLogUI } from './changelog.ui.runtime';
 export { ChangelogAspect };
 export default ChangelogAspect;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ChangelogAspect"],"sources":["index.ts"],"sourcesContent":["import { ChangelogAspect } from './changelog.aspect';\n\nexport type { ChangeLogUI } from './changelog.ui.runtime';\nexport { ChangelogAspect };\nexport default ChangelogAspect;\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAqD,eAItCA,4BAAe;AAAA"}
+{"version":3,"names":["ChangelogAspect"],"sources":["index.ts"],"sourcesContent":["import { ChangelogAspect } from './changelog.aspect';\n\nexport type { ChangeLogPageProps } from './ui/change-log-page';\n\nexport type { ChangeLogUI } from './changelog.ui.runtime';\nexport { ChangelogAspect };\nexport default ChangelogAspect;\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAqD,eAMtCA,4BAAe;AAAA"}

package/dist/{preview-1687177768270.js → preview-1687231140262.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_changelog@0.0.1082/dist/changelog.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_changelog@0.0.1082/dist/changelog.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_changelog@0.0.1083/dist/changelog.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_changelog@0.0.1083/dist/changelog.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/ui/change-log-page.d.ts

@@ -1,4 +1,7 @@
+import { ComponentLogsResult, Filters } from '@teambit/component';
 import { HTMLAttributes } from 'react';
-declare type ChangeLogPageProps = {} & HTMLAttributes<HTMLDivElement>;
-export declare function ChangeLogPage({ className }: ChangeLogPageProps): JSX.Element | null;
-export {};
+export declare type ChangeLogPageProps = {
+    host?: string;
+    useComponentLogs?: (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentLogsResult;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function ChangeLogPage({ className, useComponentLogs, host, }: ChangeLogPageProps): JSX.Element | null;

package/dist/ui/change-log-page.js

@@ -78,14 +78,22 @@ function _changeLogPageModule() {
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ChangeLogPage({
-  className
+  className,
+  useComponentLogs = _component().useComponentLogs,
+  host = ''
 }) {
   const component = (0, _react().useContext)(_component().ComponentContext);
   const {
-    logs
-  } = component;
-  if (!logs) return null;
-  if (logs.length === 0) {
+    loading,
+    componentLogs,
+    latest,
+    id
+  } = (useComponentLogs === null || useComponentLogs === void 0 ? void 0 : useComponentLogs(component === null || component === void 0 ? void 0 : component.id.toString(), host, undefined, !component)) || {};
+  if (loading || !componentLogs) return null;
+  const {
+    logs = []
+  } = componentLogs;
+  if ((logs === null || logs === void 0 ? void 0 : logs.length) === 0) {
     return /*#__PURE__*/_react().default.createElement("div", {
       className: (0, _classnames().default)(_changeLogPageModule().default.changeLogPage, className)
     }, /*#__PURE__*/_react().default.createElement(_documenterUi().H1, {
@@ -109,11 +117,12 @@ function ChangeLogPage({
   }), /*#__PURE__*/_react().default.createElement("div", {
     className: _changeLogPageModule().default.logContainer
   }, logs.map((snap, index) => {
-    const isLatest = component.latest === snap.tag || component.latest === snap.hash;
-    const isCurrent = component.version === snap.tag || component.version === snap.hash;
+    var _id$fullName;
+    const isLatest = latest === snap.tag || latest === snap.hash;
+    const isCurrent = (id === null || id === void 0 ? void 0 : id.version) === snap.tag || (id === null || id === void 0 ? void 0 : id.version) === snap.hash;
     return /*#__PURE__*/_react().default.createElement(_componentUi().VersionBlock, {
       key: index,
-      componentId: component.id.fullName,
+      componentId: (_id$fullName = id === null || id === void 0 ? void 0 : id.fullName) !== null && _id$fullName !== void 0 ? _id$fullName : '',
       isLatest: isLatest,
       snap: snap,
       isCurrent: isCurrent

package/dist/ui/change-log-page.js.map

@@ -1 +1 @@
-{"version":3,"names":["ChangeLogPage","className","component","useContext","ComponentContext","logs","length","classNames","styles","changeLogPage","title","separatorNoChangeLog","changeLogCard","separator","logContainer","map","snap","index","isLatest","latest","tag","hash","isCurrent","version","id","fullName"],"sources":["change-log-page.tsx"],"sourcesContent":["import { ComponentContext } from '@teambit/component';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { VersionBlock } from '@teambit/component.ui.version-block';\nimport classNames from 'classnames';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { ExportingComponents } from '@teambit/component.instructions.exporting-components';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport React, { HTMLAttributes, useContext } from 'react';\n\nimport styles from './change-log-page.module.scss';\n\ntype ChangeLogPageProps = {} & HTMLAttributes<HTMLDivElement>;\n\nexport function ChangeLogPage({ className }: ChangeLogPageProps) {\n  const component = useContext(ComponentContext);\n  const { logs } = component;\n\n  if (!logs) return null;\n\n  if (logs.length === 0) {\n    return (\n      <div className={classNames(styles.changeLogPage, className)}>\n        <H1 className={styles.title}>History</H1>\n        <Separator isPresentational className={styles.separatorNoChangeLog} />\n        <AlertCard\n          level=\"info\"\n          title=\"There is no change log as this component has not been exported yet.\n          Learn how to export components:\"\n          className={styles.changeLogCard}\n        >\n          <MDXLayout>\n            <ExportingComponents />\n          </MDXLayout>\n        </AlertCard>\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames(styles.changeLogPage, className)}>\n      <H1 className={styles.title}>History</H1>\n      <Separator isPresentational className={styles.separator} />\n      <div className={styles.logContainer}>\n        {logs.map((snap, index) => {\n          const isLatest = component.latest === snap.tag || component.latest === snap.hash;\n          const isCurrent = component.version === snap.tag || component.version === snap.hash;\n          return (\n            <VersionBlock\n              key={index}\n              componentId={component.id.fullName}\n              isLatest={isLatest}\n              snap={snap}\n              isCurrent={isCurrent}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAmD;AAAA;AAI5C,SAASA,aAAa,CAAC;EAAEC;AAA8B,CAAC,EAAE;EAC/D,MAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACC,6BAAgB,CAAC;EAC9C,MAAM;IAAEC;EAAK,CAAC,GAAGH,SAAS;EAE1B,IAAI,CAACG,IAAI,EAAE,OAAO,IAAI;EAEtB,IAAIA,IAAI,CAACC,MAAM,KAAK,CAAC,EAAE;IACrB,oBACE;MAAK,SAAS,EAAE,IAAAC,qBAAU,EAACC,8BAAM,CAACC,aAAa,EAAER,SAAS;IAAE,gBAC1D,+BAAC,kBAAE;MAAC,SAAS,EAAEO,8BAAM,CAACE;IAAM,GAAC,SAAO,CAAK,eACzC,+BAAC,qBAAS;MAAC,gBAAgB;MAAC,SAAS,EAAEF,8BAAM,CAACG;IAAqB,EAAG,eACtE,+BAAC,sBAAS;MACR,KAAK,EAAC,MAAM;MACZ,KAAK,EAAC,qGAC0B;MAChC,SAAS,EAAEH,8BAAM,CAACI;IAAc,gBAEhC,+BAAC,kBAAS,qBACR,+BAAC,4CAAmB,OAAG,CACb,CACF,CACR;EAEV;EAEA,oBACE;IAAK,SAAS,EAAE,IAAAL,qBAAU,EAACC,8BAAM,CAACC,aAAa,EAAER,SAAS;EAAE,gBAC1D,+BAAC,kBAAE;IAAC,SAAS,EAAEO,8BAAM,CAACE;EAAM,GAAC,SAAO,CAAK,eACzC,+BAAC,qBAAS;IAAC,gBAAgB;IAAC,SAAS,EAAEF,8BAAM,CAACK;EAAU,EAAG,eAC3D;IAAK,SAAS,EAAEL,8BAAM,CAACM;EAAa,GACjCT,IAAI,CAACU,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IACzB,MAAMC,QAAQ,GAAGhB,SAAS,CAACiB,MAAM,KAAKH,IAAI,CAACI,GAAG,IAAIlB,SAAS,CAACiB,MAAM,KAAKH,IAAI,CAACK,IAAI;IAChF,MAAMC,SAAS,GAAGpB,SAAS,CAACqB,OAAO,KAAKP,IAAI,CAACI,GAAG,IAAIlB,SAAS,CAACqB,OAAO,KAAKP,IAAI,CAACK,IAAI;IACnF,oBACE,+BAAC,2BAAY;MACX,GAAG,EAAEJ,KAAM;MACX,WAAW,EAAEf,SAAS,CAACsB,EAAE,CAACC,QAAS;MACnC,QAAQ,EAAEP,QAAS;MACnB,IAAI,EAAEF,IAAK;MACX,SAAS,EAAEM;IAAU,EACrB;EAEN,CAAC,CAAC,CACE,CACF;AAEV"}
+{"version":3,"names":["ChangeLogPage","className","useComponentLogs","defaultUseComponentLogs","host","component","useContext","ComponentContext","loading","componentLogs","latest","id","toString","undefined","logs","length","classNames","styles","changeLogPage","title","separatorNoChangeLog","changeLogCard","separator","logContainer","map","snap","index","isLatest","tag","hash","isCurrent","version","fullName"],"sources":["change-log-page.tsx"],"sourcesContent":["import {\n  ComponentContext,\n  useComponentLogs as defaultUseComponentLogs,\n  ComponentLogsResult,\n  Filters,\n} from '@teambit/component';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { VersionBlock } from '@teambit/component.ui.version-block';\nimport classNames from 'classnames';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { ExportingComponents } from '@teambit/component.instructions.exporting-components';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport React, { HTMLAttributes, useContext } from 'react';\n\nimport styles from './change-log-page.module.scss';\n\nexport type ChangeLogPageProps = {\n  host?: string;\n  useComponentLogs?: (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentLogsResult;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport function ChangeLogPage({\n  className,\n  useComponentLogs = defaultUseComponentLogs,\n  host = '',\n}: ChangeLogPageProps) {\n  const component = useContext(ComponentContext);\n  const { loading, componentLogs, latest, id } =\n    useComponentLogs?.(component?.id.toString(), host, undefined, !component) || {};\n\n  if (loading || !componentLogs) return null;\n\n  const { logs = [] } = componentLogs;\n\n  if (logs?.length === 0) {\n    return (\n      <div className={classNames(styles.changeLogPage, className)}>\n        <H1 className={styles.title}>History</H1>\n        <Separator isPresentational className={styles.separatorNoChangeLog} />\n        <AlertCard\n          level=\"info\"\n          title=\"There is no change log as this component has not been exported yet.\n          Learn how to export components:\"\n          className={styles.changeLogCard}\n        >\n          <MDXLayout>\n            <ExportingComponents />\n          </MDXLayout>\n        </AlertCard>\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames(styles.changeLogPage, className)}>\n      <H1 className={styles.title}>History</H1>\n      <Separator isPresentational className={styles.separator} />\n      <div className={styles.logContainer}>\n        {logs.map((snap, index) => {\n          const isLatest = latest === snap.tag || latest === snap.hash;\n          const isCurrent = id?.version === snap.tag || id?.version === snap.hash;\n          return (\n            <VersionBlock\n              key={index}\n              componentId={id?.fullName ?? ''}\n              isLatest={isLatest}\n              snap={snap}\n              isCurrent={isCurrent}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/changelog",
-  "version": "0.0.1082",
+  "version": "0.0.1083",
   "homepage": "https://bit.cloud/teambit/component/changelog",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "changelog",
-    "version": "0.0.1082"
+    "version": "0.0.1083"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -17,10 +17,10 @@
     "@teambit/design.ui.alert-card": "0.0.26",
     "@teambit/design.ui.separator": "0.0.354",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/component": "0.0.1082",
+    "@teambit/component": "0.0.1083",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.497",
-    "@teambit/ui": "0.0.1082",
-    "@teambit/component.ui.version-block": "0.0.812",
+    "@teambit/ui": "0.0.1083",
+    "@teambit/component.ui.version-block": "0.0.813",
     "@teambit/mdx.ui.mdx-layout": "0.0.515"
   },
   "devDependencies": {

package/ui/change-log-page.tsx

@@ -1,4 +1,9 @@
-import { ComponentContext } from '@teambit/component';
+import {
+  ComponentContext,
+  useComponentLogs as defaultUseComponentLogs,
+  ComponentLogsResult,
+  Filters,
+} from '@teambit/component';
 import { H1 } from '@teambit/documenter.ui.heading';
 import { Separator } from '@teambit/design.ui.separator';
 import { VersionBlock } from '@teambit/component.ui.version-block';
@@ -10,15 +15,25 @@ import React, { HTMLAttributes, useContext } from 'react';
 
 import styles from './change-log-page.module.scss';
 
-type ChangeLogPageProps = {} & HTMLAttributes<HTMLDivElement>;
+export type ChangeLogPageProps = {
+  host?: string;
+  useComponentLogs?: (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentLogsResult;
+} & HTMLAttributes<HTMLDivElement>;
 
-export function ChangeLogPage({ className }: ChangeLogPageProps) {
+export function ChangeLogPage({
+  className,
+  useComponentLogs = defaultUseComponentLogs,
+  host = '',
+}: ChangeLogPageProps) {
   const component = useContext(ComponentContext);
-  const { logs } = component;
+  const { loading, componentLogs, latest, id } =
+    useComponentLogs?.(component?.id.toString(), host, undefined, !component) || {};
 
-  if (!logs) return null;
+  if (loading || !componentLogs) return null;
 
-  if (logs.length === 0) {
+  const { logs = [] } = componentLogs;
+
+  if (logs?.length === 0) {
     return (
       <div className={classNames(styles.changeLogPage, className)}>
         <H1 className={styles.title}>History</H1>
@@ -43,12 +58,12 @@ export function ChangeLogPage({ className }: ChangeLogPageProps) {
       <Separator isPresentational className={styles.separator} />
       <div className={styles.logContainer}>
         {logs.map((snap, index) => {
-          const isLatest = component.latest === snap.tag || component.latest === snap.hash;
-          const isCurrent = component.version === snap.tag || component.version === snap.hash;
+          const isLatest = latest === snap.tag || latest === snap.hash;
+          const isCurrent = id?.version === snap.tag || id?.version === snap.hash;
           return (
             <VersionBlock
               key={index}
-              componentId={component.id.fullName}
+              componentId={id?.fullName ?? ''}
               isLatest={isLatest}
               snap={snap}
               isCurrent={isCurrent}