@teambit/compositions 0.0.837 → 0.0.845

package/compositions.module.scss

@@ -23,7 +23,7 @@ $panelBg: #fafafa;
 }
 
 .right {
-  background: $panelBg;
+  background: var(--background-color, $panelBg);
   overflow-y: auto;
   // this is to fix the right panel when it gets too big or too small
   min-width: 200px;

package/compositions.tsx

@@ -78,7 +78,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
             emptyState={emptyState}
             component={component}
             selected={selected}
-            queryParams={queryParams}
+            queryParams={component.preview?.isScaling ? `name=${queryParams}`: queryParams}
           />
         </Pane>
         <HoverSplitter className={styles.splitter}>
@@ -178,8 +178,13 @@ export function CompositionContent({ component, selected, queryParams, emptyStat
   return (
     <ComponentComposition
       className={styles.compositionsIframe}
+      // TODO: Oded to add control for viewport.
+      viewport={null}
       component={component}
+      forceHeight="100%"
       composition={selected}
+      fullContentHeight
+      pubsub={true}
       queryParams={queryParams}
     />
   );

package/dist/compositions.js

@@ -278,6 +278,8 @@ function Compositions({
   menuBarWidgets,
   emptyState
 }) {
+  var _component$preview;
+
   const component = (0, _react().useContext)(_component().ComponentContext);
   const [selected, selectComposition] = (0, _react().useState)((0, _lodash().default)(component.compositions));
   const selectedRef = (0, _react().useRef)(selected);
@@ -324,7 +326,7 @@ function Compositions({
     emptyState: emptyState,
     component: component,
     selected: selected,
-    queryParams: queryParams
+    queryParams: (_component$preview = component.preview) !== null && _component$preview !== void 0 && _component$preview.isScaling ? `name=${queryParams}` : queryParams
   })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
     className: _compositionsModule().default.splitter
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiButtons().Collapser, {
@@ -402,9 +404,14 @@ function CompositionContent({
   }
 
   return /*#__PURE__*/_react().default.createElement(_ui().ComponentComposition, {
-    className: _compositionsModule().default.compositionsIframe,
+    className: _compositionsModule().default.compositionsIframe // TODO: Oded to add control for viewport.
+    ,
+    viewport: null,
     component: component,
+    forceHeight: "100%",
     composition: selected,
+    fullContentHeight: true,
+    pubsub: true,
     queryParams: queryParams
   });
 }

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","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={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      component={component}\n      composition={selected}\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","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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"}

package/dist/compositions.module.scss

@@ -23,7 +23,7 @@ $panelBg: #fafafa;
 }
 
 .right {
-  background: $panelBg;
+  background: var(--background-color, $panelBg);
   overflow-y: auto;
   // this is to fix the right panel when it gets too big or too small
   min-width: 200px;

package/dist/compositions.preview.runtime.js

@@ -6,8 +6,6 @@ require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/es.promise.js");
 
-require("core-js/modules/es.regexp.exec.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -79,14 +77,16 @@ class CompositionsPreview {
   }
 
   getActiveComposition(module) {
-    const chosen = window.location.hash.split('&')[1];
+    // const chosen = window.location.hash.split('&')[1];
+    const query = this.preview.getQuery();
+    const param = this.preview.getParam(query, 'name');
 
-    if (!chosen) {
-      const first = (0, _lodash().default)(Object.values(module));
-      return first;
+    if (param && module[param]) {
+      return module[param];
     }
 
-    return module[chosen];
+    const first = (0, _lodash().default)(Object.values(module));
+    return first;
   }
 
   static async provider([preview]) {

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","chosen","window","location","hash","split","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\n    if (!chosen) {\n      const first = head(Object.values(module));\n      return first;\n    }\n\n    return module[chosen];\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,MAAMC,MAAM,GAAGC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,CAAqBC,KAArB,CAA2B,GAA3B,EAAgC,CAAhC,CAAf;;IAEA,IAAI,CAACJ,MAAL,EAAa;MACX,MAAMK,KAAK,GAAG,IAAAC,iBAAA,EAAKT,MAAM,CAACU,MAAP,CAAcR,MAAd,CAAL,CAAd;MACA,OAAOM,KAAP;IACD;;IAED,OAAON,MAAM,CAACC,MAAD,CAAb;EACD;;EAMoB,aAARQ,QAAQ,CAAC,CAAC5B,OAAD,CAAD,EAA8B;IACjD,MAAM6B,WAAW,GAAG,IAAI/B,mBAAJ,CAAwBE,OAAxB,CAApB;IACAA,OAAO,CAAC8B,eAAR,CAAwB;MACtBC,IAAI,EAAE,cADgB;MAEtB9B,MAAM,EAAE4B,WAAW,CAAC5B,MAAZ,CAAmB+B,IAAnB,CAAwBH,WAAxB,CAFc;MAGtBpB,kBAAkB,EAAEoB,WAAW,CAACpB,kBAAZ,CAA+BuB,IAA/B,CAAoCH,WAApC,CAHE;MAItBhB,OAAO,EAAE;IAJa,CAAxB;IAOA,OAAOgB,WAAP;EACD;;AAnD8B;;;gCAApB/B,mB,aAqCMmC,yB;gCArCNnC,mB,kBAuCW,CAACoC,wBAAD,C;;AAexBC,kCAAA,CAAmBC,UAAnB,CAA8BtC,mBAA9B"}
+{"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"}

package/dist/ui/composition-preview.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 import { ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
 import { Composition } from '../composition';
-interface ComponentCompositionProps extends ComponentPreviewProps {
+export declare type ComponentCompositionProps = {
     /**
      * composition to use for component rendering.
      */
     composition?: Composition;
-}
-export declare function ComponentComposition({ composition, queryParams, ...rest }: ComponentCompositionProps): JSX.Element;
-export {};
+} & ComponentPreviewProps;
+export declare function ComponentComposition({ composition, component, queryParams, ...rest }: ComponentCompositionProps): JSX.Element;

package/dist/ui/composition-preview.js

@@ -54,11 +54,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ComponentComposition(_ref) {
   let {
     composition,
+    component,
     queryParams = []
   } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["composition", "queryParams"]);
-  const compositionParams = (0, _react().useMemo)(() => (composition ? [composition.identifier] : []).concat(queryParams), [composition === null || composition === void 0 ? void 0 : composition.identifier, queryParams]);
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["composition", "component", "queryParams"]);
+  const compositionParams = (0, _react().useMemo)(() => {
+    var _component$preview;
+
+    return (composition ? [(_component$preview = component.preview) !== null && _component$preview !== void 0 && _component$preview.isScaling ? `name=${composition.identifier}` : composition.identifier] : []).concat(queryParams);
+  }, [composition === null || composition === void 0 ? void 0 : composition.identifier, queryParams]);
   return /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, (0, _extends2().default)({}, rest, {
+    component: component,
     style: {
       width: '100%',
       height: '100%'

package/dist/ui/composition-preview.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentComposition","composition","queryParams","rest","compositionParams","useMemo","identifier","concat","width","height"],"sources":["composition-preview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';\n\nimport { Composition } from '../composition';\n\ninterface ComponentCompositionProps extends ComponentPreviewProps {\n  /**\n   * composition to use for component rendering.\n   */\n  composition?: Composition;\n}\n\nexport function ComponentComposition({ composition, queryParams = [], ...rest }: ComponentCompositionProps) {\n  const compositionParams = useMemo(\n    () => (composition ? [composition.identifier] : []).concat(queryParams),\n    [composition?.identifier, queryParams]\n  );\n\n  return (\n    <ComponentPreview\n      {...rest}\n      style={{ width: '100%', height: '100%' }}\n      previewName=\"compositions\"\n      queryParams={compositionParams}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAWO,SAASA,oBAAT,OAAqG;EAAA,IAAvE;IAAEC,WAAF;IAAeC,WAAW,GAAG;EAA7B,CAAuE;EAAA,IAAnCC,IAAmC;EAC1G,MAAMC,iBAAiB,GAAG,IAAAC,gBAAA,EACxB,MAAM,CAACJ,WAAW,GAAG,CAACA,WAAW,CAACK,UAAb,CAAH,GAA8B,EAA1C,EAA8CC,MAA9C,CAAqDL,WAArD,CADkB,EAExB,CAACD,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAEK,UAAd,EAA0BJ,WAA1B,CAFwB,CAA1B;EAKA,oBACE,+BAAC,6BAAD,+BACMC,IADN;IAEE,KAAK,EAAE;MAAEK,KAAK,EAAE,MAAT;MAAiBC,MAAM,EAAE;IAAzB,CAFT;IAGE,WAAW,EAAC,cAHd;IAIE,WAAW,EAAEL;EAJf,GADF;AAQD"}
+{"version":3,"names":["ComponentComposition","composition","component","queryParams","rest","compositionParams","useMemo","preview","isScaling","identifier","concat","width","height"],"sources":["composition-preview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';\n\nimport { Composition } from '../composition';\n\nexport type ComponentCompositionProps = {\n  /**\n   * composition to use for component rendering.\n   */\n  composition?: Composition;\n} & ComponentPreviewProps;\n\nexport function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {\n  const compositionParams = useMemo(\n    () => (composition ? [component.preview?.isScaling ? `name=${composition.identifier}` : composition.identifier] : []).concat(queryParams),\n    [composition?.identifier, queryParams]\n  );\n\n  return (\n    <ComponentPreview\n      {...rest}\n      component={component}\n      style={{ width: '100%', height: '100%' }}\n      previewName=\"compositions\"\n      queryParams={compositionParams}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAWO,SAASA,oBAAT,OAAgH;EAAA,IAAlF;IAAEC,WAAF;IAAeC,SAAf;IAA0BC,WAAW,GAAG;EAAxC,CAAkF;EAAA,IAAnCC,IAAmC;EACrH,MAAMC,iBAAiB,GAAG,IAAAC,gBAAA,EACxB;IAAA;;IAAA,OAAM,CAACL,WAAW,GAAG,CAAC,sBAAAC,SAAS,CAACK,OAAV,kEAAmBC,SAAnB,GAAgC,QAAOP,WAAW,CAACQ,UAAW,EAA9D,GAAkER,WAAW,CAACQ,UAA/E,CAAH,GAAgG,EAA5G,EAAgHC,MAAhH,CAAuHP,WAAvH,CAAN;EAAA,CADwB,EAExB,CAACF,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAEQ,UAAd,EAA0BN,WAA1B,CAFwB,CAA1B;EAKA,oBACE,+BAAC,6BAAD,+BACMC,IADN;IAEE,SAAS,EAAEF,SAFb;IAGE,KAAK,EAAE;MAAES,KAAK,EAAE,MAAT;MAAiBC,MAAM,EAAE;IAAzB,CAHT;IAIE,WAAW,EAAC,cAJd;IAKE,WAAW,EAAEP;EALf,GADF;AASD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.837",
+  "version": "0.0.845",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.837"
+    "version": "0.0.845"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -15,44 +15,44 @@
     "classnames": "2.2.6",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
+    "@teambit/component": "0.0.845",
+    "@teambit/compositions.ui.composition-compare": "0.0.79",
+    "@teambit/compositions.model.composition-id": "0.0.494",
     "@teambit/harmony": "0.3.3",
+    "@teambit/graphql": "0.0.845",
+    "@teambit/cli": "0.0.564",
+    "@teambit/dev-files": "0.0.845",
+    "@teambit/envs": "0.0.845",
+    "@teambit/preview": "0.0.845",
+    "@teambit/schema": "0.0.845",
+    "@teambit/toolbox.path.match-patterns": "0.0.7",
+    "@teambit/workspace": "0.0.845",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494",
+    "@teambit/component-id": "0.0.417",
     "@teambit/base-react.navigation.link": "2.0.27",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
-    "@teambit/design.ui.input.option-button": "1.0.0",
-    "@teambit/design.ui.separator": "0.0.354",
-    "@teambit/documenter.theme.theme-context": "4.0.3",
-    "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/documenter.ui.property-table": "4.1.3",
-    "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/component": "0.0.837",
-    "@teambit/compositions.ui.composition-compare": "0.0.71",
-    "@teambit/compositions.model.composition-id": "0.0.494",
-    "@teambit/graphql": "0.0.837",
-    "@teambit/cli": "0.0.562",
-    "@teambit/dev-files": "0.0.837",
-    "@teambit/envs": "0.0.837",
-    "@teambit/preview": "0.0.837",
-    "@teambit/schema": "0.0.837",
-    "@teambit/toolbox.path.match-patterns": "0.0.7",
-    "@teambit/workspace": "0.0.837",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494",
-    "@teambit/component-id": "0.0.411",
     "@teambit/compositions.ui.compositions-menu-bar": "0.0.169",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.169",
     "@teambit/design.ui.alert-card": "0.0.23",
     "@teambit/design.ui.empty-box": "0.0.360",
+    "@teambit/design.ui.input.option-button": "1.0.0",
+    "@teambit/design.ui.separator": "0.0.354",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.14",
     "@teambit/docs.ui.queries.get-docs": "0.0.495",
+    "@teambit/documenter.theme.theme-context": "4.0.3",
+    "@teambit/documenter.ui.heading": "4.1.1",
+    "@teambit/documenter.ui.property-table": "4.1.3",
     "@teambit/mdx.ui.mdx-layout": "0.0.507",
-    "@teambit/panels": "0.0.563",
-    "@teambit/preview.ui.component-preview": "0.0.500",
+    "@teambit/panels": "0.0.565",
+    "@teambit/preview.ui.component-preview": "0.0.501",
     "@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.85",
-    "@teambit/ui": "0.0.837",
+    "@teambit/component-compare": "0.0.93",
+    "@teambit/ui": "0.0.845",
     "@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",
@@ -66,7 +66,7 @@
     "@teambit/compositions.aspect-docs.compositions": "0.0.145"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.343",
+    "@teambit/legacy": "1.0.345",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1662069881993.js → preview-1662521943539.js}

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

package/ui/composition-preview.tsx

@@ -3,22 +3,23 @@ import { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.com
 
 import { Composition } from '../composition';
 
-interface ComponentCompositionProps extends ComponentPreviewProps {
+export type ComponentCompositionProps = {
   /**
    * composition to use for component rendering.
    */
   composition?: Composition;
-}
+} & ComponentPreviewProps;
 
-export function ComponentComposition({ composition, queryParams = [], ...rest }: ComponentCompositionProps) {
+export function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {
   const compositionParams = useMemo(
-    () => (composition ? [composition.identifier] : []).concat(queryParams),
+    () => (composition ? [component.preview?.isScaling ? `name=${composition.identifier}` : composition.identifier] : []).concat(queryParams),
     [composition?.identifier, queryParams]
   );
 
   return (
     <ComponentPreview
       {...rest}
+      component={component}
       style={{ width: '100%', height: '100%' }}
       previewName="compositions"
       queryParams={compositionParams}