@teambit/compositions 0.0.849 → 0.0.852

package/compositions.tsx

@@ -56,21 +56,22 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
 
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
 
-  const compositionUrl = toPreviewUrl(component, 'compositions');
-  const currentCompositionUrl = toPreviewUrl(component, 'compositions', selected?.identifier);
+  const compositionUrl = toPreviewUrl(component, 'compositions');  
+  const isScaling = component?.preview?.isScaling;
+  const compositionIdentifierParam = isScaling ? `name=${selected?.identifier}` : selected?.identifier;
+  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);
 
   const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});
   const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);
 
   // collapse sidebar when empty, reopen when not
   useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);
-
   return (
     <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>
       <SplitPane layout={sidebarOpenness} size="85%" className={styles.compositionsPage}>
         <Pane className={styles.left}>
           <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>
-            <Link external href={currentCompositionUrl} className={styles.openInNewTab}>
+            <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>
               <OptionButton icon="open-tab" />
             </Link>
           </CompositionsMenuBar>
@@ -78,7 +79,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
             emptyState={emptyState}
             component={component}
             selected={selected}
-            queryParams={component.preview?.isScaling ? `name=${queryParams}`: queryParams}
+            queryParams={queryParams}
           />
         </Pane>
         <HoverSplitter className={styles.splitter}>
@@ -100,6 +101,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
               </TabList>
               <TabPanel className={styles.tabContent}>
                 <CompositionsPanel
+                  isScaling={isScaling}
                   onSelectComposition={selectComposition}
                   url={compositionUrl}
                   compositions={component.compositions}

package/dist/composition.d.ts

@@ -3,6 +3,13 @@ export declare type CompositionProps = {
     filepath?: string;
     displayName?: string;
 };
+export declare type CompositionBrowserMetadata = {
+    displayName?: string;
+    identifier: string;
+};
+export declare type CompositionBrowserMetadataObject = {
+    compositions: CompositionBrowserMetadata[];
+};
 export declare class Composition {
     /**
      * identifier of the composition
@@ -35,5 +42,6 @@ export declare class Composition {
         filepath: string | undefined;
         displayName: string | undefined;
     };
+    toBrowserMetaDataObject(): CompositionBrowserMetadata;
     static fromArray(compositions: CompositionProps[]): Composition[];
 }

package/dist/composition.js

@@ -46,6 +46,13 @@ class Composition {
     };
   }
 
+  toBrowserMetaDataObject() {
+    return {
+      identifier: this.identifier,
+      displayName: this._displayName
+    };
+  }
+
   static fromArray(compositions) {
     return compositions.map(composition => {
       return new Composition(composition.identifier, composition.filepath, composition.displayName);

package/dist/composition.js.map

@@ -1 +1 @@
-{"version":3,"names":["Composition","constructor","identifier","filepath","_displayName","displayName","humanizeCompositionId","toObject","fromArray","compositions","map","composition"],"sources":["composition.ts"],"sourcesContent":["import { humanizeCompositionId } from '@teambit/compositions.model.composition-id';\n\nexport type CompositionProps = {\n  identifier: string;\n  filepath?: string;\n  displayName?: string;\n};\n\nexport class Composition {\n  constructor(\n    /**\n     * identifier of the composition\n     */\n    readonly identifier: string,\n\n    /**\n     * file path in which the composition is contained.\n     */\n    readonly filepath?: string,\n\n    /**\n     * set explicit display name\n     */\n    private _displayName?: string\n  ) {}\n\n  get displayName() {\n    return this._displayName || humanizeCompositionId(this.identifier);\n  }\n\n  toObject() {\n    return {\n      identifier: this.identifier,\n      filepath: this.filepath,\n      displayName: this._displayName,\n    };\n  }\n\n  static fromArray(compositions: CompositionProps[]): Composition[] {\n    return compositions.map((composition) => {\n      return new Composition(composition.identifier, composition.filepath, composition.displayName);\n    });\n  }\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAQO,MAAMA,WAAN,CAAkB;EACvBC,WAAW;EACT;AACJ;AACA;EACaC,UAJA;EAMT;AACJ;AACA;EACaC,QATA;EAWT;AACJ;AACA;EACYC,YAdC,EAeT;IAAA,KAXSF,UAWT,GAXSA,UAWT;IAAA,KANSC,QAMT,GANSA,QAMT;IAAA,KADQC,YACR,GADQA,YACR;EAAE;;EAEW,IAAXC,WAAW,GAAG;IAChB,OAAO,KAAKD,YAAL,IAAqB,IAAAE,0CAAA,EAAsB,KAAKJ,UAA3B,CAA5B;EACD;;EAEDK,QAAQ,GAAG;IACT,OAAO;MACLL,UAAU,EAAE,KAAKA,UADZ;MAELC,QAAQ,EAAE,KAAKA,QAFV;MAGLE,WAAW,EAAE,KAAKD;IAHb,CAAP;EAKD;;EAEe,OAATI,SAAS,CAACC,YAAD,EAAkD;IAChE,OAAOA,YAAY,CAACC,GAAb,CAAkBC,WAAD,IAAiB;MACvC,OAAO,IAAIX,WAAJ,CAAgBW,WAAW,CAACT,UAA5B,EAAwCS,WAAW,CAACR,QAApD,EAA8DQ,WAAW,CAACN,WAA1E,CAAP;IACD,CAFM,CAAP;EAGD;;AAlCsB"}
+{"version":3,"names":["Composition","constructor","identifier","filepath","_displayName","displayName","humanizeCompositionId","toObject","toBrowserMetaDataObject","fromArray","compositions","map","composition"],"sources":["composition.ts"],"sourcesContent":["import { humanizeCompositionId } from '@teambit/compositions.model.composition-id';\n\nexport type CompositionProps = {\n  identifier: string;\n  filepath?: string;\n  displayName?: string;\n};\n\nexport type CompositionBrowserMetadata = {\n  displayName?: string;\n  identifier: string;\n}\n\nexport type CompositionBrowserMetadataObject = {\n  compositions: CompositionBrowserMetadata[]\n}\n\nexport class Composition {\n  constructor(\n    /**\n     * identifier of the composition\n     */\n    readonly identifier: string,\n\n    /**\n     * file path in which the composition is contained.\n     */\n    readonly filepath?: string,\n\n    /**\n     * set explicit display name\n     */\n    private _displayName?: string\n  ) {}\n\n  get displayName() {\n    return this._displayName || humanizeCompositionId(this.identifier);\n  }\n\n  toObject() {\n    return {\n      identifier: this.identifier,\n      filepath: this.filepath,\n      displayName: this._displayName,\n    };\n  }\n\n  toBrowserMetaDataObject(): CompositionBrowserMetadata {\n    return {\n      identifier: this.identifier,\n      displayName: this._displayName,\n    };\n  }\n\n  static fromArray(compositions: CompositionProps[]): Composition[] {\n    return compositions.map((composition) => {\n      return new Composition(composition.identifier, composition.filepath, composition.displayName);\n    });\n  }\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAiBO,MAAMA,WAAN,CAAkB;EACvBC,WAAW;EACT;AACJ;AACA;EACaC,UAJA;EAMT;AACJ;AACA;EACaC,QATA;EAWT;AACJ;AACA;EACYC,YAdC,EAeT;IAAA,KAXSF,UAWT,GAXSA,UAWT;IAAA,KANSC,QAMT,GANSA,QAMT;IAAA,KADQC,YACR,GADQA,YACR;EAAE;;EAEW,IAAXC,WAAW,GAAG;IAChB,OAAO,KAAKD,YAAL,IAAqB,IAAAE,0CAAA,EAAsB,KAAKJ,UAA3B,CAA5B;EACD;;EAEDK,QAAQ,GAAG;IACT,OAAO;MACLL,UAAU,EAAE,KAAKA,UADZ;MAELC,QAAQ,EAAE,KAAKA,QAFV;MAGLE,WAAW,EAAE,KAAKD;IAHb,CAAP;EAKD;;EAEDI,uBAAuB,GAA+B;IACpD,OAAO;MACLN,UAAU,EAAE,KAAKA,UADZ;MAELG,WAAW,EAAE,KAAKD;IAFb,CAAP;EAID;;EAEe,OAATK,SAAS,CAACC,YAAD,EAAkD;IAChE,OAAOA,YAAY,CAACC,GAAb,CAAkBC,WAAD,IAAiB;MACvC,OAAO,IAAIZ,WAAJ,CAAgBY,WAAW,CAACV,UAA5B,EAAwCU,WAAW,CAACT,QAApD,EAA8DS,WAAW,CAACP,WAA1E,CAAP;IACD,CAFM,CAAP;EAGD;;AAzCsB"}

package/dist/compositions.js

@@ -299,7 +299,9 @@ function Compositions({
   const [isSidebarOpen, setSidebarOpenness] = (0, _react().useState)(showSidebar);
   const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.left;
   const compositionUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions');
-  const currentCompositionUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', selected === null || selected === void 0 ? void 0 : selected.identifier);
+  const isScaling = component === null || component === void 0 ? void 0 : (_component$preview = component.preview) === null || _component$preview === void 0 ? void 0 : _component$preview.isScaling;
+  const compositionIdentifierParam = isScaling ? `name=${selected === null || selected === void 0 ? void 0 : selected.identifier}` : selected === null || selected === void 0 ? void 0 : selected.identifier;
+  const currentCompositionFullUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', compositionIdentifierParam);
   const [compositionParams, setCompositionParams] = (0, _react().useState)({});
   const queryParams = (0, _react().useMemo)(() => _queryString().default.stringify(compositionParams), [compositionParams]); // collapse sidebar when empty, reopen when not
 
@@ -318,7 +320,7 @@ function Compositions({
     className: _compositionsModule().default.menuBar
   }, /*#__PURE__*/_react().default.createElement(_baseReactNavigation().Link, {
     external: true,
-    href: currentCompositionUrl,
+    href: currentCompositionFullUrl,
     className: _compositionsModule().default.openInNewTab
   }, /*#__PURE__*/_react().default.createElement(_designUiInput().OptionButton, {
     icon: "open-tab"
@@ -326,7 +328,7 @@ function Compositions({
     emptyState: emptyState,
     component: component,
     selected: selected,
-    queryParams: (_component$preview = component.preview) !== null && _component$preview !== void 0 && _component$preview.isScaling ? `name=${queryParams}` : queryParams
+    queryParams: queryParams
   })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
     className: _compositionsModule().default.splitter
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiButtons().Collapser, {
@@ -346,6 +348,7 @@ function Compositions({
   }, /*#__PURE__*/_react().default.createElement(_panels().Tab, null, "compositions"), /*#__PURE__*/_react().default.createElement(_panels().Tab, null, "properties")), /*#__PURE__*/_react().default.createElement(_panels().TabPanel, {
     className: _compositionsModule().default.tabContent
   }, /*#__PURE__*/_react().default.createElement(_compositionsPanel().CompositionsPanel, {
+    isScaling: isScaling,
     onSelectComposition: selectComposition,
     url: compositionUrl,
     compositions: component.compositions,

package/dist/compositions.js.map

@@ -1 +1 @@
-{"version":3,"names":["Compositions","menuBarWidgets","emptyState","component","useContext","ComponentContext","selected","selectComposition","useState","head","compositions","selectedRef","useRef","current","properties","useDocs","id","useEffect","prevId","identifier","next","find","c","isMobile","useIsMobile","showSidebar","length","isSidebarOpen","setSidebarOpenness","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","currentCompositionUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","styles","compositionsPage","menuBar","openInNewTab","preview","isScaling","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","compost","CompositionContent","env","environment","EmptyStateTemplate","get","host","noCompositionsPage","title","separator","buildStatus","buildStatusMessage","compositionsIframe"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport head from 'lodash.head';\nimport queryString from 'query-string';\nimport { ThemeContext } from '@teambit/documenter.theme.theme-context';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { ComponentContext, ComponentModel } from '@teambit/component';\nimport { PropTable } from '@teambit/documenter.ui.property-table';\nimport { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';\nimport { useDocs } from '@teambit/docs.ui.queries.get-docs';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { EmptyBox } from '@teambit/design.ui.empty-box';\nimport { toPreviewUrl } from '@teambit/preview.ui.component-preview';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';\nimport { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { OptionButton } from '@teambit/design.ui.input.option-button';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { EmptyStateSlot } from './compositions.ui.runtime';\nimport { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { CompositionsMenuSlot } from './compositions.ui.runtime';\n\nexport type MenuBarWidget = {\n  location: 'start' | 'end';\n  content: ReactNode;\n};\nexport type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };\n\nexport function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {\n  const component = useContext(ComponentContext);\n  const [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const properties = useDocs(component.id);\n\n  // reset selected composition when component changes.\n  // this does trigger renderer, but perf seems to be ok\n  useEffect(() => {\n    const prevId = selectedRef.current?.identifier;\n    const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];\n\n    selectComposition(next);\n  }, [component]);\n  const isMobile = useIsMobile();\n  const showSidebar = !isMobile && component.compositions.length > 0;\n  const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);\n\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;\n\n  const compositionUrl = toPreviewUrl(component, 'compositions');\n  const currentCompositionUrl = toPreviewUrl(component, 'compositions', selected?.identifier);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});\n  const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);\n\n  // collapse sidebar when empty, reopen when not\n  useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);\n\n  return (\n    <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>\n      <SplitPane layout={sidebarOpenness} size=\"85%\" className={styles.compositionsPage}>\n        <Pane className={styles.left}>\n          <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>\n            <Link external href={currentCompositionUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\n            emptyState={emptyState}\n            component={component}\n            selected={selected}\n            queryParams={component.preview?.isScaling ? `name=${queryParams}`: queryParams}\n          />\n        </Pane>\n        <HoverSplitter className={styles.splitter}>\n          <Collapser\n            placement=\"left\"\n            isOpen={isSidebarOpen}\n            onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n            onClick={() => setSidebarOpenness((x) => !x)}\n            tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}\n            className={styles.collapser}\n          />\n        </HoverSplitter>\n        <Pane className={styles.right}>\n          <ThemeContext>\n            <TabContainer className={styles.tabsContainer}>\n              <TabList className={styles.tabs}>\n                <Tab>compositions</Tab>\n                <Tab>properties</Tab>\n              </TabList>\n              <TabPanel className={styles.tabContent}>\n                <CompositionsPanel\n                  onSelectComposition={selectComposition}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={selected}\n                  className={styles.compost}\n                />\n              </TabPanel>\n              <TabPanel className={styles.tabContent}>\n                {properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}\n              </TabPanel>\n            </TabContainer>\n          </ThemeContext>\n        </Pane>\n      </SplitPane>\n    </CompositionContextProvider>\n  );\n}\n\nexport type CompositionContentProps = {\n  component: ComponentModel;\n  selected?: Composition;\n  queryParams?: string | string[];\n  emptyState?: EmptyStateSlot;\n};\n\nexport function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {\n  const env = component.environment?.id;\n  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;\n\n  if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {\n    return (\n      <div className={styles.noCompositionsPage}>\n        <div>\n          <H1 className={styles.title}>Compositions</H1>\n          <Separator isPresentational className={styles.separator} />\n          <AlertCard\n            level=\"info\"\n            title=\"There are no\n              compositions for this Component. Learn how to add compositions:\"\n          >\n            <MDXLayout>\n              <EmptyStateTemplate />\n            </MDXLayout>\n          </AlertCard>\n        </div>\n      </div>\n    );\n  }\n\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard className={styles.buildStatusMessage} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        className={styles.buildStatusMessage}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  // TODO: get the docs domain from the community aspect and pass it here as a prop\n  if (component.compositions.length === 0) {\n    return (\n      <EmptyBox\n        title=\"There are no compositions for this component.\"\n        linkText=\"Learn how to create compositions\"\n        link={`https://bit.dev/docs/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      // TODO: Oded to add control for viewport.\n      viewport={null}\n      component={component}\n      forceHeight=\"100%\"\n      composition={selected}\n      fullContentHeight\n      pubsub={true}\n      queryParams={queryParams}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["Compositions","menuBarWidgets","emptyState","component","useContext","ComponentContext","selected","selectComposition","useState","head","compositions","selectedRef","useRef","current","properties","useDocs","id","useEffect","prevId","identifier","next","find","c","isMobile","useIsMobile","showSidebar","length","isSidebarOpen","setSidebarOpenness","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","styles","compositionsPage","menuBar","openInNewTab","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","compost","CompositionContent","env","environment","EmptyStateTemplate","get","host","noCompositionsPage","title","separator","buildStatus","buildStatusMessage","compositionsIframe"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport head from 'lodash.head';\nimport queryString from 'query-string';\nimport { ThemeContext } from '@teambit/documenter.theme.theme-context';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { ComponentContext, ComponentModel } from '@teambit/component';\nimport { PropTable } from '@teambit/documenter.ui.property-table';\nimport { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';\nimport { useDocs } from '@teambit/docs.ui.queries.get-docs';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { EmptyBox } from '@teambit/design.ui.empty-box';\nimport { toPreviewUrl } from '@teambit/preview.ui.component-preview';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';\nimport { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { OptionButton } from '@teambit/design.ui.input.option-button';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { EmptyStateSlot } from './compositions.ui.runtime';\nimport { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { CompositionsMenuSlot } from './compositions.ui.runtime';\n\nexport type MenuBarWidget = {\n  location: 'start' | 'end';\n  content: ReactNode;\n};\nexport type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };\n\nexport function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {\n  const component = useContext(ComponentContext);\n  const [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const properties = useDocs(component.id);\n\n  // reset selected composition when component changes.\n  // this does trigger renderer, but perf seems to be ok\n  useEffect(() => {\n    const prevId = selectedRef.current?.identifier;\n    const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];\n\n    selectComposition(next);\n  }, [component]);\n  const isMobile = useIsMobile();\n  const showSidebar = !isMobile && component.compositions.length > 0;\n  const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);\n\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;\n\n  const compositionUrl = toPreviewUrl(component, 'compositions');  \n  const isScaling = component?.preview?.isScaling;\n  const compositionIdentifierParam = isScaling ? `name=${selected?.identifier}` : selected?.identifier;\n  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});\n  const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);\n\n  // collapse sidebar when empty, reopen when not\n  useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);\n  return (\n    <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>\n      <SplitPane layout={sidebarOpenness} size=\"85%\" className={styles.compositionsPage}>\n        <Pane className={styles.left}>\n          <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>\n            <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\n            emptyState={emptyState}\n            component={component}\n            selected={selected}\n            queryParams={queryParams}\n          />\n        </Pane>\n        <HoverSplitter className={styles.splitter}>\n          <Collapser\n            placement=\"left\"\n            isOpen={isSidebarOpen}\n            onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n            onClick={() => setSidebarOpenness((x) => !x)}\n            tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}\n            className={styles.collapser}\n          />\n        </HoverSplitter>\n        <Pane className={styles.right}>\n          <ThemeContext>\n            <TabContainer className={styles.tabsContainer}>\n              <TabList className={styles.tabs}>\n                <Tab>compositions</Tab>\n                <Tab>properties</Tab>\n              </TabList>\n              <TabPanel className={styles.tabContent}>\n                <CompositionsPanel\n                  isScaling={isScaling}\n                  onSelectComposition={selectComposition}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={selected}\n                  className={styles.compost}\n                />\n              </TabPanel>\n              <TabPanel className={styles.tabContent}>\n                {properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}\n              </TabPanel>\n            </TabContainer>\n          </ThemeContext>\n        </Pane>\n      </SplitPane>\n    </CompositionContextProvider>\n  );\n}\n\nexport type CompositionContentProps = {\n  component: ComponentModel;\n  selected?: Composition;\n  queryParams?: string | string[];\n  emptyState?: EmptyStateSlot;\n};\n\nexport function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {\n  const env = component.environment?.id;\n  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;\n\n  if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {\n    return (\n      <div className={styles.noCompositionsPage}>\n        <div>\n          <H1 className={styles.title}>Compositions</H1>\n          <Separator isPresentational className={styles.separator} />\n          <AlertCard\n            level=\"info\"\n            title=\"There are no\n              compositions for this Component. Learn how to add compositions:\"\n          >\n            <MDXLayout>\n              <EmptyStateTemplate />\n            </MDXLayout>\n          </AlertCard>\n        </div>\n      </div>\n    );\n  }\n\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard className={styles.buildStatusMessage} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        className={styles.buildStatusMessage}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  // TODO: get the docs domain from the community aspect and pass it here as a prop\n  if (component.compositions.length === 0) {\n    return (\n      <EmptyBox\n        title=\"There are no compositions for this component.\"\n        linkText=\"Learn how to create compositions\"\n        link={`https://bit.dev/docs/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      // TODO: Oded to add control for viewport.\n      viewport={null}\n      component={component}\n      forceHeight=\"100%\"\n      composition={selected}\n      fullContentHeight\n      pubsub={true}\n      queryParams={queryParams}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/compositions.preview-definition.d.ts

@@ -3,6 +3,7 @@ import type { ExecutionContext, Environment } from '@teambit/envs';
 import { PreviewDefinition } from '@teambit/preview';
 import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
 import { CompositionsMain } from './compositions.main.runtime';
+import { CompositionBrowserMetadataObject } from './composition';
 export declare class CompositionPreviewDefinition implements PreviewDefinition {
     private compositions;
     readonly prefix = "compositions";
@@ -11,4 +12,5 @@ export declare class CompositionPreviewDefinition implements PreviewDefinition {
     renderTemplatePath(context: ExecutionContext): Promise<string>;
     renderTemplatePathByEnv(env: Environment): Promise<any>;
     getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>>;
+    getMetadata(component: Component): Promise<CompositionBrowserMetadataObject>;
 }

package/dist/compositions.preview-definition.js

@@ -39,6 +39,16 @@ class CompositionPreviewDefinition {
     return map;
   }
 
+  async getMetadata(component) {
+    const compositions = this.compositions.getCompositions(component).map(composition => ({
+      displayName: composition.displayName,
+      identifier: composition.identifier
+    }));
+    return {
+      compositions
+    };
+  }
+
 }
 
 exports.CompositionPreviewDefinition = CompositionPreviewDefinition;

package/dist/compositions.preview-definition.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositionPreviewDefinition","constructor","compositions","renderTemplatePath","context","renderTemplatePathByEnv","env","getMounter","getModuleMap","components","map","getPreviewFiles"],"sources":["compositions.preview-definition.ts"],"sourcesContent":["import { Component, ComponentMap } from '@teambit/component';\nimport type { ExecutionContext, Environment } from '@teambit/envs';\nimport { PreviewDefinition } from '@teambit/preview';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\n\nimport { CompositionsMain } from './compositions.main.runtime';\n\nexport class CompositionPreviewDefinition implements PreviewDefinition {\n  readonly prefix = 'compositions';\n  readonly includePeers = true;\n\n  constructor(private compositions: CompositionsMain) {}\n\n  async renderTemplatePath(context: ExecutionContext): Promise<string> {\n    return this.renderTemplatePathByEnv(context.env);\n  }\n\n  async renderTemplatePathByEnv(env: Environment) {\n    return env.getMounter();\n  }\n\n  async getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>> {\n    const map = this.compositions.getPreviewFiles(components);\n    return map;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOO,MAAMA,4BAAN,CAAgE;EAIrEC,WAAW,CAASC,YAAT,EAAyC;IAAA,KAAhCA,YAAgC,GAAhCA,YAAgC;IAAA,gDAHlC,cAGkC;IAAA,sDAF5B,IAE4B;EAAE;;EAE9B,MAAlBC,kBAAkB,CAACC,OAAD,EAA6C;IACnE,OAAO,KAAKC,uBAAL,CAA6BD,OAAO,CAACE,GAArC,CAAP;EACD;;EAE4B,MAAvBD,uBAAuB,CAACC,GAAD,EAAmB;IAC9C,OAAOA,GAAG,CAACC,UAAJ,EAAP;EACD;;EAEiB,MAAZC,YAAY,CAACC,UAAD,EAAkE;IAClF,MAAMC,GAAG,GAAG,KAAKR,YAAL,CAAkBS,eAAlB,CAAkCF,UAAlC,CAAZ;IACA,OAAOC,GAAP;EACD;;AAjBoE"}
+{"version":3,"names":["CompositionPreviewDefinition","constructor","compositions","renderTemplatePath","context","renderTemplatePathByEnv","env","getMounter","getModuleMap","components","map","getPreviewFiles","getMetadata","component","getCompositions","composition","displayName","identifier"],"sources":["compositions.preview-definition.ts"],"sourcesContent":["import { Component, ComponentMap } from '@teambit/component';\nimport type { ExecutionContext, Environment } from '@teambit/envs';\nimport { PreviewDefinition } from '@teambit/preview';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\n\nimport { CompositionsMain } from './compositions.main.runtime';\nimport { CompositionBrowserMetadataObject } from './composition';\n\n\nexport class CompositionPreviewDefinition implements PreviewDefinition {\n  readonly prefix = 'compositions';\n  readonly includePeers = true;\n\n  constructor(private compositions: CompositionsMain) {}\n\n  async renderTemplatePath(context: ExecutionContext): Promise<string> {\n    return this.renderTemplatePathByEnv(context.env);\n  }\n\n  async renderTemplatePathByEnv(env: Environment) {\n    return env.getMounter();\n  }\n\n  async getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>> {\n    const map = this.compositions.getPreviewFiles(components);\n    return map;\n  }\n\n  async getMetadata(component: Component): Promise<CompositionBrowserMetadataObject> {\n    const compositions = this.compositions\n      .getCompositions(component)\n      .map((composition) => ({displayName: composition.displayName, identifier: composition.identifier}));\n    return {\n      compositions,\n    };\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AASO,MAAMA,4BAAN,CAAgE;EAIrEC,WAAW,CAASC,YAAT,EAAyC;IAAA,KAAhCA,YAAgC,GAAhCA,YAAgC;IAAA,gDAHlC,cAGkC;IAAA,sDAF5B,IAE4B;EAAE;;EAE9B,MAAlBC,kBAAkB,CAACC,OAAD,EAA6C;IACnE,OAAO,KAAKC,uBAAL,CAA6BD,OAAO,CAACE,GAArC,CAAP;EACD;;EAE4B,MAAvBD,uBAAuB,CAACC,GAAD,EAAmB;IAC9C,OAAOA,GAAG,CAACC,UAAJ,EAAP;EACD;;EAEiB,MAAZC,YAAY,CAACC,UAAD,EAAkE;IAClF,MAAMC,GAAG,GAAG,KAAKR,YAAL,CAAkBS,eAAlB,CAAkCF,UAAlC,CAAZ;IACA,OAAOC,GAAP;EACD;;EAEgB,MAAXE,WAAW,CAACC,SAAD,EAAkE;IACjF,MAAMX,YAAY,GAAG,KAAKA,YAAL,CAClBY,eADkB,CACFD,SADE,EAElBH,GAFkB,CAEbK,WAAD,KAAkB;MAACC,WAAW,EAAED,WAAW,CAACC,WAA1B;MAAuCC,UAAU,EAAEF,WAAW,CAACE;IAA/D,CAAlB,CAFc,CAArB;IAGA,OAAO;MACLf;IADK,CAAP;EAGD;;AA1BoE"}

package/dist/compositions.preview.runtime.d.ts

@@ -1,5 +1,6 @@
 import { ComponentID } from '@teambit/component-id';
 import { PreviewPreview, RenderingContext, PreviewModule } from '@teambit/preview';
+import { CompositionBrowserMetadataObject } from './composition';
 export declare class CompositionsPreview {
     /**
      * preview extension.
@@ -12,7 +13,8 @@ export declare class CompositionsPreview {
     preview: PreviewPreview);
     render(componentId: ComponentID, modules: PreviewModule, otherPreviewDefs: any, context: RenderingContext): void;
     /** gets relevant information for this preview to render */
-    selectPreviewModel(componentId: string, previewModule: PreviewModule): any;
+    selectPreviewModel(componentFullName: string, previewModule: PreviewModule): any;
+    getMetadata(componentFullName: string, previewModule: PreviewModule): CompositionBrowserMetadataObject | undefined;
     private getActiveComposition;
     static runtime: import("@teambit/harmony").RuntimeDefinition;
     static dependencies: import("@teambit/harmony").Aspect[];

package/dist/compositions.preview.runtime.js

@@ -63,20 +63,31 @@ class CompositionsPreview {
   render(componentId, modules, otherPreviewDefs, context) {
     if (!modules.componentMap[componentId.fullName]) return;
     const compositions = this.selectPreviewModel(componentId.fullName, modules);
-    const active = this.getActiveComposition(compositions);
+    const metadata = this.getMetadata(componentId.fullName, modules);
+    const active = this.getActiveComposition(compositions, metadata);
     modules.mainModule.default(active, context);
   }
   /** gets relevant information for this preview to render */
 
 
-  selectPreviewModel(componentId, previewModule) {
-    const files = previewModule.componentMap[componentId] || []; // allow compositions to come from many files. It is assumed they will have unique named
+  selectPreviewModel(componentFullName, previewModule) {
+    const files = previewModule.componentMap[componentFullName] || []; // allow compositions to come from many files. It is assumed they will have unique named
 
     const combined = Object.assign({}, ...files);
     return combined;
   }
 
-  getActiveComposition(module) {
+  getMetadata(componentFullName, previewModule) {
+    const metadata = previewModule !== null && previewModule !== void 0 && previewModule.componentMapMetadata ? previewModule.componentMapMetadata[componentFullName] : undefined;
+
+    if (metadata) {
+      return metadata;
+    }
+
+    return undefined;
+  }
+
+  getActiveComposition(module, metadata) {
     // const chosen = window.location.hash.split('&')[1];
     const query = this.preview.getQuery();
     const param = this.preview.getParam(query, 'name');
@@ -85,6 +96,15 @@ class CompositionsPreview {
       return module[param];
     }
 
+    if (metadata && metadata.compositions) {
+      const first = (0, _lodash().default)(metadata.compositions);
+      const firstId = first === null || first === void 0 ? void 0 : first.identifier;
+
+      if (firstId && module[firstId]) {
+        return module[firstId];
+      }
+    }
+
     const first = (0, _lodash().default)(Object.values(module));
     return first;
   }

package/dist/compositions.preview.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositionsPreview","constructor","preview","render","componentId","modules","otherPreviewDefs","context","componentMap","fullName","compositions","selectPreviewModel","active","getActiveComposition","mainModule","default","previewModule","files","combined","Object","assign","module","query","getQuery","param","getParam","first","head","values","provider","compPreview","registerPreview","name","bind","PreviewRuntime","PreviewAspect","CompositionsAspect","addRuntime"],"sources":["compositions.preview.runtime.ts"],"sourcesContent":["import { ComponentID } from '@teambit/component-id';\nimport {\n  PreviewAspect,\n  PreviewPreview,\n  RenderingContext,\n  PreviewRuntime,\n  PreviewModule,\n  ModuleFile,\n} from '@teambit/preview';\nimport head from 'lodash.head';\n\nimport { CompositionsAspect } from './compositions.aspect';\n\nexport class CompositionsPreview {\n  constructor(\n    /**\n     * preview extension.\n     */\n    private preview: PreviewPreview\n  ) {}\n\n  render(componentId: ComponentID, modules: PreviewModule, otherPreviewDefs, context: RenderingContext) {\n    if (!modules.componentMap[componentId.fullName]) return;\n\n    const compositions = this.selectPreviewModel(componentId.fullName, modules);\n    const active = this.getActiveComposition(compositions);\n\n    modules.mainModule.default(active, context);\n  }\n\n  /** gets relevant information for this preview to render */\n  selectPreviewModel(componentId: string, previewModule: PreviewModule) {\n    const files = previewModule.componentMap[componentId] || [];\n\n    // allow compositions to come from many files. It is assumed they will have unique named\n    const combined = Object.assign({}, ...files);\n    return combined;\n  }\n\n  private getActiveComposition(module: ModuleFile) {\n    // const chosen = window.location.hash.split('&')[1];\n    const query = this.preview.getQuery();\n    const param = this.preview.getParam(query, 'name');\n\n    if (param && module[param]) {\n      return module[param];\n    }\n    \n    const first = head(Object.values(module));\n    return first;\n  }\n\n  static runtime = PreviewRuntime;\n\n  static dependencies = [PreviewAspect];\n\n  static async provider([preview]: [PreviewPreview]) {\n    const compPreview = new CompositionsPreview(preview);\n    preview.registerPreview({\n      name: 'compositions',\n      render: compPreview.render.bind(compPreview),\n      selectPreviewModel: compPreview.selectPreviewModel.bind(compPreview),\n      default: true,\n    });\n\n    return compPreview;\n  }\n}\n\nCompositionsAspect.addRuntime(CompositionsPreview);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAQA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,mBAAN,CAA0B;EAC/BC,WAAW;EACT;AACJ;AACA;EACYC,OAJC,EAKT;IAAA,KADQA,OACR,GADQA,OACR;EAAE;;EAEJC,MAAM,CAACC,WAAD,EAA2BC,OAA3B,EAAmDC,gBAAnD,EAAqEC,OAArE,EAAgG;IACpG,IAAI,CAACF,OAAO,CAACG,YAAR,CAAqBJ,WAAW,CAACK,QAAjC,CAAL,EAAiD;IAEjD,MAAMC,YAAY,GAAG,KAAKC,kBAAL,CAAwBP,WAAW,CAACK,QAApC,EAA8CJ,OAA9C,CAArB;IACA,MAAMO,MAAM,GAAG,KAAKC,oBAAL,CAA0BH,YAA1B,CAAf;IAEAL,OAAO,CAACS,UAAR,CAAmBC,OAAnB,CAA2BH,MAA3B,EAAmCL,OAAnC;EACD;EAED;;;EACAI,kBAAkB,CAACP,WAAD,EAAsBY,aAAtB,EAAoD;IACpE,MAAMC,KAAK,GAAGD,aAAa,CAACR,YAAd,CAA2BJ,WAA3B,KAA2C,EAAzD,CADoE,CAGpE;;IACA,MAAMc,QAAQ,GAAGC,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkB,GAAGH,KAArB,CAAjB;IACA,OAAOC,QAAP;EACD;;EAEOL,oBAAoB,CAACQ,MAAD,EAAqB;IAC/C;IACA,MAAMC,KAAK,GAAG,KAAKpB,OAAL,CAAaqB,QAAb,EAAd;IACA,MAAMC,KAAK,GAAG,KAAKtB,OAAL,CAAauB,QAAb,CAAsBH,KAAtB,EAA6B,MAA7B,CAAd;;IAEA,IAAIE,KAAK,IAAIH,MAAM,CAACG,KAAD,CAAnB,EAA4B;MAC1B,OAAOH,MAAM,CAACG,KAAD,CAAb;IACD;;IAED,MAAME,KAAK,GAAG,IAAAC,iBAAA,EAAKR,MAAM,CAACS,MAAP,CAAcP,MAAd,CAAL,CAAd;IACA,OAAOK,KAAP;EACD;;EAMoB,aAARG,QAAQ,CAAC,CAAC3B,OAAD,CAAD,EAA8B;IACjD,MAAM4B,WAAW,GAAG,IAAI9B,mBAAJ,CAAwBE,OAAxB,CAApB;IACAA,OAAO,CAAC6B,eAAR,CAAwB;MACtBC,IAAI,EAAE,cADgB;MAEtB7B,MAAM,EAAE2B,WAAW,CAAC3B,MAAZ,CAAmB8B,IAAnB,CAAwBH,WAAxB,CAFc;MAGtBnB,kBAAkB,EAAEmB,WAAW,CAACnB,kBAAZ,CAA+BsB,IAA/B,CAAoCH,WAApC,CAHE;MAItBf,OAAO,EAAE;IAJa,CAAxB;IAOA,OAAOe,WAAP;EACD;;AArD8B;;;gCAApB9B,mB,aAuCMkC,yB;gCAvCNlC,mB,kBAyCW,CAACmC,wBAAD,C;;AAexBC,kCAAA,CAAmBC,UAAnB,CAA8BrC,mBAA9B"}
+{"version":3,"names":["CompositionsPreview","constructor","preview","render","componentId","modules","otherPreviewDefs","context","componentMap","fullName","compositions","selectPreviewModel","metadata","getMetadata","active","getActiveComposition","mainModule","default","componentFullName","previewModule","files","combined","Object","assign","componentMapMetadata","undefined","module","query","getQuery","param","getParam","first","head","firstId","identifier","values","provider","compPreview","registerPreview","name","bind","PreviewRuntime","PreviewAspect","CompositionsAspect","addRuntime"],"sources":["compositions.preview.runtime.ts"],"sourcesContent":["import { ComponentID } from '@teambit/component-id';\nimport {\n  PreviewAspect,\n  PreviewPreview,\n  RenderingContext,\n  PreviewRuntime,\n  PreviewModule,\n  ModuleFile,\n} from '@teambit/preview';\nimport head from 'lodash.head';\nimport { CompositionBrowserMetadataObject } from './composition';\n\nimport { CompositionsAspect } from './compositions.aspect';\n\nexport class CompositionsPreview {\n  constructor(\n    /**\n     * preview extension.\n     */\n    private preview: PreviewPreview\n  ) {}\n\n  render(componentId: ComponentID, modules: PreviewModule, otherPreviewDefs, context: RenderingContext) {\n    if (!modules.componentMap[componentId.fullName]) return;\n\n\n    const compositions = this.selectPreviewModel(componentId.fullName, modules);\n    const metadata = this.getMetadata(componentId.fullName, modules);\n    const active = this.getActiveComposition(compositions, metadata);\n\n    modules.mainModule.default(active, context);\n  }\n\n  /** gets relevant information for this preview to render */\n  selectPreviewModel(componentFullName: string, previewModule: PreviewModule) {\n    const files = previewModule.componentMap[componentFullName] || [];\n\n    // allow compositions to come from many files. It is assumed they will have unique named\n    const combined = Object.assign({}, ...files);\n    return combined;\n  }\n\n  getMetadata(componentFullName: string, previewModule: PreviewModule): CompositionBrowserMetadataObject | undefined {\n    const metadata = previewModule?.componentMapMetadata\n      ? previewModule.componentMapMetadata[componentFullName]\n      : undefined;\n    if (metadata){\n      return metadata as CompositionBrowserMetadataObject\n    }\n    return undefined;\n  }\n\n  private getActiveComposition(module: ModuleFile, metadata?: CompositionBrowserMetadataObject) {\n    // const chosen = window.location.hash.split('&')[1];\n    const query = this.preview.getQuery();\n    const param = this.preview.getParam(query, 'name');\n\n    if (param && module[param]) {\n      return module[param];\n    }\n\n    if (metadata && metadata.compositions) {\n      const first = head(metadata.compositions);\n      const firstId = first?.identifier;\n      if (firstId && module[firstId]) {\n        return module[firstId];\n      }\n    }\n\n    const first = head(Object.values(module));\n    return first;\n  }\n\n  static runtime = PreviewRuntime;\n\n  static dependencies = [PreviewAspect];\n\n  static async provider([preview]: [PreviewPreview]) {\n    const compPreview = new CompositionsPreview(preview);\n    preview.registerPreview({\n      name: 'compositions',\n      render: compPreview.render.bind(compPreview),\n      selectPreviewModel: compPreview.selectPreviewModel.bind(compPreview),\n      default: true,\n    });\n\n    return compPreview;\n  }\n}\n\nCompositionsAspect.addRuntime(CompositionsPreview);\n"],"mappings":"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"}

package/dist/ui/compositions-panel/compositions-panel.d.ts

@@ -1,9 +1,25 @@
 import React from 'react';
 import { Composition } from '../../composition';
 export declare type CompositionsPanelProps = {
+    /**
+     * list of compositions
+     */
     compositions: Composition[];
+    /**
+     * select composition to display
+     */
     onSelectComposition: (composition: Composition) => void;
+    /**
+     * the currently active composition
+     */
     active?: Composition;
+    /**
+     * the url to the base composition. doesntc contain the current composition params
+     */
     url: string;
+    /**
+     * checks if a component is using the new preview api. if false, doesnt scale to support new preview
+     */
+    isScaling?: boolean;
 } & React.HTMLAttributes<HTMLUListElement>;
-export declare function CompositionsPanel({ url, compositions, onSelectComposition: onSelect, active, className, ...rest }: CompositionsPanelProps): JSX.Element;
+export declare function CompositionsPanel({ url, compositions, isScaling, onSelectComposition: onSelect, active, className, ...rest }: CompositionsPanelProps): JSX.Element;

package/dist/ui/compositions-panel/compositions-panel.js

@@ -75,18 +75,20 @@ function CompositionsPanel(_ref) {
   let {
     url,
     compositions,
+    isScaling,
     onSelectComposition: onSelect,
     active,
     className
   } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["url", "compositions", "onSelectComposition", "active", "className"]);
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["url", "compositions", "isScaling", "onSelectComposition", "active", "className"]);
   const handleSelect = (0, _react().useCallback)(selected => {
     onSelect && onSelect(selected);
   }, [onSelect]);
   return /*#__PURE__*/_react().default.createElement("ul", (0, _extends2().default)({}, rest, {
     className: (0, _classnames().default)(className)
   }), compositions.map(composition => {
-    // TODO - move to composition panel node
+    const href = isScaling ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`; // TODO - move to composition panel node
+
     return /*#__PURE__*/_react().default.createElement("li", {
       key: composition.identifier,
       className: (0, _classnames().default)(_compositionsPanelModule().default.linkWrapper, composition === active && _compositionsPanelModule().default.active)
@@ -103,7 +105,7 @@ function CompositionsPanel(_ref) {
       className: _compositionsPanelModule().default.panelLink,
       target: "_blank",
       rel: "noopener noreferrer",
-      href: `${url}&${composition.identifier}`
+      href: href
     }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
       className: _compositionsPanelModule().default.icon,
       of: "open-tab"

package/dist/ui/compositions-panel/compositions-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositionsPanel","url","compositions","onSelectComposition","onSelect","active","className","rest","handleSelect","useCallback","selected","classNames","map","composition","identifier","styles","linkWrapper","panelLink","box","name","displayName","right","icon"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport React, { useCallback } from 'react';\n\nimport { Composition } from '../../composition';\nimport styles from './compositions-panel.module.scss';\n\nexport type CompositionsPanelProps = {\n  compositions: Composition[];\n  onSelectComposition: (composition: Composition) => void;\n  active?: Composition;\n  url: string;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  onSelectComposition: onSelect,\n  active,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n    },\n    [onSelect]\n  );\n\n  return (\n    <ul {...rest} className={classNames(className)}>\n      {compositions.map((composition) => {\n        // TODO - move to composition panel node\n        return (\n          <li\n            key={composition.identifier}\n            className={classNames(styles.linkWrapper, composition === active && styles.active)}\n          >\n            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n              <span className={styles.box}></span>\n              <span className={styles.name}>{composition.displayName}</span>\n            </a>\n            <div className={styles.right}>\n              <a\n                className={styles.panelLink}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href={`${url}&${composition.identifier}`}\n              >\n                <Icon className={styles.icon} of=\"open-tab\" />\n              </a>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\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;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AASO,SAASA,iBAAT,OAOoB;EAAA,IAPO;IAChCC,GADgC;IAEhCC,YAFgC;IAGhCC,mBAAmB,EAAEC,QAHW;IAIhCC,MAJgC;IAKhCC;EALgC,CAOP;EAAA,IADtBC,IACsB;EACzB,MAAMC,YAAY,GAAG,IAAAC,oBAAA,EAClBC,QAAD,IAA2B;IACzBN,QAAQ,IAAIA,QAAQ,CAACM,QAAD,CAApB;EACD,CAHkB,EAInB,CAACN,QAAD,CAJmB,CAArB;EAOA,oBACE,kEAAQG,IAAR;IAAc,SAAS,EAAE,IAAAI,qBAAA,EAAWL,SAAX;EAAzB,IACGJ,YAAY,CAACU,GAAb,CAAkBC,WAAD,IAAiB;IACjC;IACA,oBACE;MACE,GAAG,EAAEA,WAAW,CAACC,UADnB;MAEE,SAAS,EAAE,IAAAH,qBAAA,EAAWI,kCAAA,CAAOC,WAAlB,EAA+BH,WAAW,KAAKR,MAAhB,IAA0BU,kCAAA,CAAOV,MAAhE;IAFb,gBAIE;MAAG,SAAS,EAAEU,kCAAA,CAAOE,SAArB;MAAgC,OAAO,EAAE,MAAMT,YAAY,CAACK,WAAD;IAA3D,gBACE;MAAM,SAAS,EAAEE,kCAAA,CAAOG;IAAxB,EADF,eAEE;MAAM,SAAS,EAAEH,kCAAA,CAAOI;IAAxB,GAA+BN,WAAW,CAACO,WAA3C,CAFF,CAJF,eAQE;MAAK,SAAS,EAAEL,kCAAA,CAAOM;IAAvB,gBACE;MACE,SAAS,EAAEN,kCAAA,CAAOE,SADpB;MAEE,MAAM,EAAC,QAFT;MAGE,GAAG,EAAC,qBAHN;MAIE,IAAI,EAAG,GAAEhB,GAAI,IAAGY,WAAW,CAACC,UAAW;IAJzC,gBAME,+BAAC,0BAAD;MAAM,SAAS,EAAEC,kCAAA,CAAOO,IAAxB;MAA8B,EAAE,EAAC;IAAjC,EANF,CADF,CARF,CADF;EAqBD,CAvBA,CADH,CADF;AA4BD"}
+{"version":3,"names":["CompositionsPanel","url","compositions","isScaling","onSelectComposition","onSelect","active","className","rest","handleSelect","useCallback","selected","classNames","map","composition","href","identifier","styles","linkWrapper","panelLink","box","name","displayName","right","icon"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport React, { useCallback } from 'react';\n\nimport { Composition } from '../../composition';\nimport styles from './compositions-panel.module.scss';\n\nexport type CompositionsPanelProps = {\n  /**\n   * list of compositions\n   */\n  compositions: Composition[];\n  /**\n   * select composition to display\n   */\n  onSelectComposition: (composition: Composition) => void;\n  /**\n   * the currently active composition\n   */\n  active?: Composition;\n  /**\n   * the url to the base composition. doesntc contain the current composition params\n   */\n  url: string;\n  /**\n   * checks if a component is using the new preview api. if false, doesnt scale to support new preview\n   */\n  isScaling?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  active,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n    },\n    [onSelect]\n  );\n\n  return (\n    <ul {...rest} className={classNames(className)}>\n      {compositions.map((composition) => {\n\n        const href = isScaling ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;\n\n        // TODO - move to composition panel node\n        return (\n          <li\n            key={composition.identifier}\n            className={classNames(styles.linkWrapper, composition === active && styles.active)}\n          >\n            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n              <span className={styles.box}></span>\n              <span className={styles.name}>{composition.displayName}</span>\n            </a>\n            <div className={styles.right}>\n              <a\n                className={styles.panelLink}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href={href}\n              >\n                <Icon className={styles.icon} of=\"open-tab\" />\n              </a>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\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;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAyBO,SAASA,iBAAT,OAQoB;EAAA,IARO;IAChCC,GADgC;IAEhCC,YAFgC;IAGhCC,SAHgC;IAIhCC,mBAAmB,EAAEC,QAJW;IAKhCC,MALgC;IAMhCC;EANgC,CAQP;EAAA,IADtBC,IACsB;EACzB,MAAMC,YAAY,GAAG,IAAAC,oBAAA,EAClBC,QAAD,IAA2B;IACzBN,QAAQ,IAAIA,QAAQ,CAACM,QAAD,CAApB;EACD,CAHkB,EAInB,CAACN,QAAD,CAJmB,CAArB;EAOA,oBACE,kEAAQG,IAAR;IAAc,SAAS,EAAE,IAAAI,qBAAA,EAAWL,SAAX;EAAzB,IACGL,YAAY,CAACW,GAAb,CAAkBC,WAAD,IAAiB;IAEjC,MAAMC,IAAI,GAAGZ,SAAS,GAAI,GAAEF,GAAI,SAAQa,WAAW,CAACE,UAAW,EAAzC,GAA8C,GAAEf,GAAI,IAAGa,WAAW,CAACE,UAAW,EAApG,CAFiC,CAIjC;;IACA,oBACE;MACE,GAAG,EAAEF,WAAW,CAACE,UADnB;MAEE,SAAS,EAAE,IAAAJ,qBAAA,EAAWK,kCAAA,CAAOC,WAAlB,EAA+BJ,WAAW,KAAKR,MAAhB,IAA0BW,kCAAA,CAAOX,MAAhE;IAFb,gBAIE;MAAG,SAAS,EAAEW,kCAAA,CAAOE,SAArB;MAAgC,OAAO,EAAE,MAAMV,YAAY,CAACK,WAAD;IAA3D,gBACE;MAAM,SAAS,EAAEG,kCAAA,CAAOG;IAAxB,EADF,eAEE;MAAM,SAAS,EAAEH,kCAAA,CAAOI;IAAxB,GAA+BP,WAAW,CAACQ,WAA3C,CAFF,CAJF,eAQE;MAAK,SAAS,EAAEL,kCAAA,CAAOM;IAAvB,gBACE;MACE,SAAS,EAAEN,kCAAA,CAAOE,SADpB;MAEE,MAAM,EAAC,QAFT;MAGE,GAAG,EAAC,qBAHN;MAIE,IAAI,EAAEJ;IAJR,gBAME,+BAAC,0BAAD;MAAM,SAAS,EAAEE,kCAAA,CAAOO,IAAxB;MAA8B,EAAE,EAAC;IAAjC,EANF,CADF,CARF,CADF;EAqBD,CA1BA,CADH,CADF;AA+BD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.849",
+  "version": "0.0.852",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.849"
+    "version": "0.0.852"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -15,18 +15,18 @@
     "classnames": "2.2.6",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/component": "0.0.849",
+    "@teambit/component": "0.0.852",
     "@teambit/compositions.ui.composition-compare": "0.0.81",
     "@teambit/compositions.model.composition-id": "0.0.494",
     "@teambit/harmony": "0.3.3",
-    "@teambit/graphql": "0.0.849",
+    "@teambit/graphql": "0.0.852",
     "@teambit/cli": "0.0.566",
-    "@teambit/dev-files": "0.0.849",
-    "@teambit/envs": "0.0.849",
-    "@teambit/preview": "0.0.849",
-    "@teambit/schema": "0.0.849",
+    "@teambit/dev-files": "0.0.852",
+    "@teambit/envs": "0.0.852",
+    "@teambit/preview": "0.0.852",
+    "@teambit/schema": "0.0.852",
     "@teambit/toolbox.path.match-patterns": "0.0.7",
-    "@teambit/workspace": "0.0.849",
+    "@teambit/workspace": "0.0.852",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494",
     "@teambit/component-id": "0.0.417",
     "@teambit/base-react.navigation.link": "2.0.27",
@@ -45,14 +45,14 @@
     "@teambit/documenter.ui.property-table": "4.1.3",
     "@teambit/mdx.ui.mdx-layout": "0.0.507",
     "@teambit/panels": "0.0.567",
-    "@teambit/preview.ui.component-preview": "0.0.501",
+    "@teambit/preview.ui.component-preview": "0.0.502",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.201",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.185",
-    "@teambit/component-compare": "0.0.97",
-    "@teambit/ui": "0.0.849",
-    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/component-compare": "0.0.100",
+    "@teambit/ui": "0.0.852",
     "@teambit/compositions.model.composition-type": "0.0.495",
-    "@teambit/compositions.ui.composition-card": "0.0.502"
+    "@teambit/compositions.ui.composition-card": "0.0.502",
+    "@teambit/evangelist.elements.icon": "1.0.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",

package/{preview-1662892819691.js → preview-1663069999927.js}

@@ -1,5 +1,7 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.849/dist/compositions.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.849/dist/compositions.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.852/dist/compositions.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.852/dist/compositions.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];
+
+export const compositions_metadata = {"compositions":[{"displayName":"Logo","identifier":"Logo"}]};

package/ui/compositions-panel/compositions-panel.tsx

@@ -6,15 +6,32 @@ import { Composition } from '../../composition';
 import styles from './compositions-panel.module.scss';
 
 export type CompositionsPanelProps = {
+  /**
+   * list of compositions
+   */
   compositions: Composition[];
+  /**
+   * select composition to display
+   */
   onSelectComposition: (composition: Composition) => void;
+  /**
+   * the currently active composition
+   */
   active?: Composition;
+  /**
+   * the url to the base composition. doesntc contain the current composition params
+   */
   url: string;
+  /**
+   * checks if a component is using the new preview api. if false, doesnt scale to support new preview
+   */
+  isScaling?: boolean;
 } & React.HTMLAttributes<HTMLUListElement>;
 
 export function CompositionsPanel({
   url,
   compositions,
+  isScaling,
   onSelectComposition: onSelect,
   active,
   className,
@@ -30,6 +47,9 @@ export function CompositionsPanel({
   return (
     <ul {...rest} className={classNames(className)}>
       {compositions.map((composition) => {
+
+        const href = isScaling ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
+
         // TODO - move to composition panel node
         return (
           <li
@@ -45,7 +65,7 @@ export function CompositionsPanel({
                 className={styles.panelLink}
                 target="_blank"
                 rel="noopener noreferrer"
-                href={`${url}&${composition.identifier}`}
+                href={href}
               >
                 <Icon className={styles.icon} of="open-tab" />
               </a>