@teambit/preview 1.0.114 → 1.0.116

package/artifacts/__bit_junit.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites>
-  <testsuite name="teambit.preview/preview@1.0.114" timestamp="2023-12-31T03:45:41.794Z" tests="1" failures="0" errors="0" skipped="0">
-    <testcase classname="create-peer-link.spec.js" name="should output snapshot" time="0.149"/>
+  <testsuite name="teambit.preview/preview@1.0.116" timestamp="2024-01-01T13:22:10.923Z" tests="1" failures="0" errors="0" skipped="0">
+    <testcase classname="create-peer-link.spec.js" name="should output snapshot" time="0.204"/>
   </testsuite>
 </testsuites>

package/artifacts/preview/teambit_preview_preview-preview.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.preview/preview-preview"]=t():e["teambit.preview/preview-preview"]=t()}(self,(()=>(()=>{"use strict";var e={99872:(e,t,n)=>{var o={id:"teambit.preview/preview@1.0.114",homepage:"https://bit.cloud/teambit/preview/preview",exported:!0};function r(){const e=i(n(87363));return r=function(){return e},e}function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=o,i.__bit_component=o;const a=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/preview.svg"}));a.__bit_component=o,t.Logo=a},2936:(e,t,n)=>{Object.defineProperty(t,"M",{enumerable:!0,get:function(){return o.default}});var o=r(n(17712));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.preview/aspect-docs/preview@0.0.165",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0}},17712:(e,t,n)=>{var o={id:"teambit.preview/aspect-docs/preview@0.0.165",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=m,a(n(87363));var r=n(40040),i=["components"];function a(e){return e&&e.__esModule?e:{default:e}}function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},s.apply(this,arguments)}function p(e,t){if(null==e)return{};var n,o,r=d(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function d(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}a.__bit_component=o,s.__bit_component=o,p.__bit_component=o,d.__bit_component=o;var l={},c="wrapper";function m(e){var t=e.components,n=p(e,i);return(0,r.mdx)(c,s({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)("p",null,"The Preview aspect handles the bundling and rendering of component compositions and documentation, for the Workspace UI and Scope UI."),(0,r.mdx)("p",null,"Preview is used to display components in development (on ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit start"),") as well as in their released versions (assets for the release version are generated as part of the build process)."),(0,r.mdx)("p",null,"The Preview aspect handles each component according to the configurations set by the environment that is used by that component. That means both the documentation and the component compositions will be bundled and displayed differently for different environments."),(0,r.mdx)("h2",null,"Rational"),(0,r.mdx)("p",null,"In a standard web application, UI components ",(0,r.mdx)("em",{parentName:"p"},"serving the same application")," are bundled together to produce the necessary assets to make them renderable by the browser."),(0,r.mdx)("p",null,"Components in a Bit workspace are not all in the service of the same application. Each component is authored, tagged and exported as an independent component.\nThat means a few things:"),(0,r.mdx)("ol",null,(0,r.mdx)("li",{parentName:"ol"},(0,r.mdx)("p",{parentName:"li"},"Components in a Bit workspace are not consumed ,directly or indirectly, by a single entry file (e.g, the app's ",(0,r.mdx)("inlineCode",{parentName:"p"},"index.js"),"). That makes it impossible for the bundler to follow the files needed to be bundled.")),(0,r.mdx)("li",{parentName:"ol"},(0,r.mdx)("p",{parentName:"li"},"Different components in a single workspace may be implemented using different technologies and bundled using different configurations or even different bundlers."))),(0,r.mdx)("p",null,"Preview solves the above challenges by creating a temporary entry file for each group of components using the same environment.\nIt then serves this file to the Bundler, to be bundled according to the environment and the purpose of bundling. That is, to display components in development or to display the components' release versions (for a \"production-level\" exhibition of the component's documentation and compositions)."),(0,r.mdx)("h2",null,"Usage"),(0,r.mdx)("h3",null,"Extending the Preview aspect"),(0,r.mdx)("p",null,"The preview aspect can be extended to generate other renderable artifacts , either when running Bit's development server or as part of the build pipeline (for a component's tagged version).\nThese artifacts can present additional information that assists in inspecting a component (for example, showing the results of accessibility tests)."))}m.__bit_component=o,m.isMDXComponent=!0},40040:e=>{e.exports=MdxJsReact},87363:e=>{e.exports=React}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{compositions:()=>m,compositions_metadata:()=>f,overview:()=>u});var e={};n.r(e),n.d(e,{default:()=>c});var t=n(99872),r=(n(87363),n(40040));const i=TeambitMdxUiMdxScopeContext;var a=n(2936),s=["components"];function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},p.apply(this,arguments)}var d={},l="wrapper";function c(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,s);return(0,r.mdx)(l,p({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(i.MDXScopeProvider,{components:{Preview:a.M},mdxType:"MDXScopeProvider"},(0,r.mdx)(a.M,{mdxType:"Preview"})))}c.isMDXComponent=!0;const m=[t],u=[e],f={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.preview/preview-preview"]=t():e["teambit.preview/preview-preview"]=t()}(self,(()=>(()=>{"use strict";var e={99967:(e,t,n)=>{var o={id:"teambit.preview/preview@1.0.116",homepage:"https://bit.cloud/teambit/preview/preview",exported:!0};function r(){const e=i(n(87363));return r=function(){return e},e}function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=o,i.__bit_component=o;const a=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/preview.svg"}));a.__bit_component=o,t.Logo=a},68637:(e,t,n)=>{Object.defineProperty(t,"M",{enumerable:!0,get:function(){return o.default}});var o=r(n(43990));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.preview/aspect-docs/preview@0.0.165",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0}},43990:(e,t,n)=>{var o={id:"teambit.preview/aspect-docs/preview@0.0.165",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=m,a(n(87363));var r=n(40040),i=["components"];function a(e){return e&&e.__esModule?e:{default:e}}function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},s.apply(this,arguments)}function p(e,t){if(null==e)return{};var n,o,r=d(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function d(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}a.__bit_component=o,s.__bit_component=o,p.__bit_component=o,d.__bit_component=o;var l={},c="wrapper";function m(e){var t=e.components,n=p(e,i);return(0,r.mdx)(c,s({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)("p",null,"The Preview aspect handles the bundling and rendering of component compositions and documentation, for the Workspace UI and Scope UI."),(0,r.mdx)("p",null,"Preview is used to display components in development (on ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit start"),") as well as in their released versions (assets for the release version are generated as part of the build process)."),(0,r.mdx)("p",null,"The Preview aspect handles each component according to the configurations set by the environment that is used by that component. That means both the documentation and the component compositions will be bundled and displayed differently for different environments."),(0,r.mdx)("h2",null,"Rational"),(0,r.mdx)("p",null,"In a standard web application, UI components ",(0,r.mdx)("em",{parentName:"p"},"serving the same application")," are bundled together to produce the necessary assets to make them renderable by the browser."),(0,r.mdx)("p",null,"Components in a Bit workspace are not all in the service of the same application. Each component is authored, tagged and exported as an independent component.\nThat means a few things:"),(0,r.mdx)("ol",null,(0,r.mdx)("li",{parentName:"ol"},(0,r.mdx)("p",{parentName:"li"},"Components in a Bit workspace are not consumed ,directly or indirectly, by a single entry file (e.g, the app's ",(0,r.mdx)("inlineCode",{parentName:"p"},"index.js"),"). That makes it impossible for the bundler to follow the files needed to be bundled.")),(0,r.mdx)("li",{parentName:"ol"},(0,r.mdx)("p",{parentName:"li"},"Different components in a single workspace may be implemented using different technologies and bundled using different configurations or even different bundlers."))),(0,r.mdx)("p",null,"Preview solves the above challenges by creating a temporary entry file for each group of components using the same environment.\nIt then serves this file to the Bundler, to be bundled according to the environment and the purpose of bundling. That is, to display components in development or to display the components' release versions (for a \"production-level\" exhibition of the component's documentation and compositions)."),(0,r.mdx)("h2",null,"Usage"),(0,r.mdx)("h3",null,"Extending the Preview aspect"),(0,r.mdx)("p",null,"The preview aspect can be extended to generate other renderable artifacts , either when running Bit's development server or as part of the build pipeline (for a component's tagged version).\nThese artifacts can present additional information that assists in inspecting a component (for example, showing the results of accessibility tests)."))}m.__bit_component=o,m.isMDXComponent=!0},40040:e=>{e.exports=MdxJsReact},87363:e=>{e.exports=React}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{compositions:()=>m,compositions_metadata:()=>f,overview:()=>u});var e={};n.r(e),n.d(e,{default:()=>c});var t=n(99967),r=(n(87363),n(40040));const i=TeambitMdxUiMdxScopeContext;var a=n(68637),s=["components"];function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},p.apply(this,arguments)}var d={},l="wrapper";function c(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,s);return(0,r.mdx)(l,p({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(i.MDXScopeProvider,{components:{Preview:a.M},mdxType:"MDXScopeProvider"},(0,r.mdx)(a.M,{mdxType:"Preview"})))}c.isMDXComponent=!0;const m=[t],u=[e],f={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));

package/dist/{preview-1703992959524.js → preview-1704113440840.js}

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

package/dist/preview-modules.d.ts

@@ -1,10 +1 @@
-import type { PreviewModule, ModuleFile } from './types/preview-module';
-type ModuleId = string;
-export declare class PreviewModules extends Map<ModuleId, PreviewModule> {
-    onSet: Set<() => void>;
-    set(id: ModuleId, preview: PreviewModule): this;
-    loadComponentPreviews(compId: string, previews: Record<string, ModuleFile[]>): void;
-}
-export declare const PREVIEW_MODULES: PreviewModules;
-export declare function linkModules(previewName: string, previewModule: PreviewModule): void;
-export {};
+export { PreviewModules, linkModules, PREVIEW_MODULES } from '@teambit/preview.modules.preview-modules';

package/dist/preview-modules.js

@@ -3,34 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviewModules = exports.PREVIEW_MODULES = void 0;
-exports.linkModules = linkModules;
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-class PreviewModules extends Map {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "onSet", new Set());
+Object.defineProperty(exports, "PREVIEW_MODULES", {
+  enumerable: true,
+  get: function () {
+    return _previewModules().PREVIEW_MODULES;
   }
-  set(id, preview) {
-    super.set(id, preview);
-    this.onSet.forEach(callback => callback());
-    return this;
+});
+Object.defineProperty(exports, "PreviewModules", {
+  enumerable: true,
+  get: function () {
+    return _previewModules().PreviewModules;
   }
-  loadComponentPreviews(compId, previews) {
-    Object.entries(previews).forEach(([previewName, moduleFile]) => {
-      const preview = this.get(previewName);
-      if (!preview) return; // TODO - ok for now
-
-      preview.componentMap[compId] = moduleFile;
-    });
+});
+Object.defineProperty(exports, "linkModules", {
+  enumerable: true,
+  get: function () {
+    return _previewModules().linkModules;
   }
-}
-exports.PreviewModules = PreviewModules;
-const PREVIEW_MODULES = exports.PREVIEW_MODULES = new PreviewModules();
-function linkModules(previewName, previewModule) {
-  PREVIEW_MODULES.set(previewName, previewModule);
+});
+function _previewModules() {
+  const data = require("@teambit/preview.modules.preview-modules");
+  _previewModules = function () {
+    return data;
+  };
+  return data;
 }
 
 //# sourceMappingURL=preview-modules.js.map

package/dist/preview-modules.js.map

@@ -1 +1 @@
-{"version":3,"names":["PreviewModules","Map","constructor","args","_defineProperty","Set","set","id","preview","onSet","forEach","callback","loadComponentPreviews","compId","previews","Object","entries","previewName","moduleFile","get","componentMap","exports","PREVIEW_MODULES","linkModules","previewModule"],"sources":["preview-modules.tsx"],"sourcesContent":["import type { PreviewModule, ModuleFile } from './types/preview-module';\n\ntype ModuleId = string;\n\nexport class PreviewModules extends Map<ModuleId, PreviewModule> {\n  onSet = new Set<() => void>();\n\n  override set(id: ModuleId, preview: PreviewModule) {\n    super.set(id, preview);\n    this.onSet.forEach((callback) => callback());\n    return this;\n  }\n\n  loadComponentPreviews(compId: string, previews: Record<string, ModuleFile[]>) {\n    Object.entries(previews).forEach(([previewName, moduleFile]) => {\n      const preview = this.get(previewName);\n      if (!preview) return; // TODO - ok for now\n\n      preview.componentMap[compId] = moduleFile;\n    });\n  }\n}\n\nexport const PREVIEW_MODULES = new PreviewModules();\n\nexport function linkModules(previewName: string, previewModule: PreviewModule) {\n  PREVIEW_MODULES.set(previewName, previewModule);\n}\n"],"mappings":";;;;;;;;;;AAIO,MAAMA,cAAc,SAASC,GAAG,CAA0B;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gBACvD,IAAIC,GAAG,CAAa,CAAC;EAAA;EAEpBC,GAAGA,CAACC,EAAY,EAAEC,OAAsB,EAAE;IACjD,KAAK,CAACF,GAAG,CAACC,EAAE,EAAEC,OAAO,CAAC;IACtB,IAAI,CAACC,KAAK,CAACC,OAAO,CAAEC,QAAQ,IAAKA,QAAQ,CAAC,CAAC,CAAC;IAC5C,OAAO,IAAI;EACb;EAEAC,qBAAqBA,CAACC,MAAc,EAAEC,QAAsC,EAAE;IAC5EC,MAAM,CAACC,OAAO,CAACF,QAAQ,CAAC,CAACJ,OAAO,CAAC,CAAC,CAACO,WAAW,EAAEC,UAAU,CAAC,KAAK;MAC9D,MAAMV,OAAO,GAAG,IAAI,CAACW,GAAG,CAACF,WAAW,CAAC;MACrC,IAAI,CAACT,OAAO,EAAE,OAAO,CAAC;;MAEtBA,OAAO,CAACY,YAAY,CAACP,MAAM,CAAC,GAAGK,UAAU;IAC3C,CAAC,CAAC;EACJ;AACF;AAACG,OAAA,CAAArB,cAAA,GAAAA,cAAA;AAEM,MAAMsB,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,IAAItB,cAAc,CAAC,CAAC;AAE5C,SAASuB,WAAWA,CAACN,WAAmB,EAAEO,aAA4B,EAAE;EAC7EF,eAAe,CAAChB,GAAG,CAACW,WAAW,EAAEO,aAAa,CAAC;AACjD"}
+{"version":3,"names":["_previewModules","data","require"],"sources":["preview-modules.tsx"],"sourcesContent":["export { PreviewModules, linkModules, PREVIEW_MODULES } from '@teambit/preview.modules.preview-modules';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAAA,gBAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,eAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA"}

package/dist/preview.composition.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Logo: () => JSX.Element;

package/dist/preview.graphql.d.ts

@@ -18,6 +18,12 @@ export declare function previewSchema(previewExtension: PreviewMain): {
             legacyHeader: ({ component }: {
                 component: any;
             }) => Promise<boolean>;
+            onlyOverview: ({ component }: {
+                component: any;
+            }) => Promise<boolean>;
+            useNameParam: ({ component }: {
+                component: any;
+            }) => Promise<boolean>;
             skipIncludes: ({ component }: {
                 component: any;
             }) => Promise<boolean>;

package/dist/preview.graphql.js

@@ -23,7 +23,12 @@ function previewSchema(previewExtension) {
         isScaling: Boolean
         includesEnvTemplate: Boolean
         legacyHeader: Boolean
+        """
+        @deprecated use onlyOverview
+        """
         skipIncludes: Boolean
+        onlyOverview: Boolean
+        useNameParam: Boolean
       }
 
       extend type Component {
@@ -55,10 +60,19 @@ function previewSchema(previewExtension) {
         }) => {
           return previewExtension.isLegacyHeader(component);
         },
+        onlyOverview: ({
+          component
+        }) => {
+          return previewExtension.getOnlyOverview(component);
+        },
+        useNameParam: ({
+          component
+        }) => {
+          return previewExtension.getUseNameParam(component);
+        },
         skipIncludes: ({
           component
         }) => {
-          // return true;
           return previewExtension.isSupportSkipIncludes(component);
         }
       }

package/dist/preview.graphql.js.map

@@ -1 +1 @@
-{"version":3,"names":["_graphqlTag","data","_interopRequireDefault","require","obj","__esModule","default","previewSchema","previewExtension","typeDefs","gql","resolvers","Component","preview","component","Preview","includesEnvTemplate","isBundledWithEnv","isScaling","doesScaling","legacyHeader","isLegacyHeader","skipIncludes","isSupportSkipIncludes"],"sources":["preview.graphql.ts"],"sourcesContent":["import { Component } from '@teambit/component';\nimport gql from 'graphql-tag';\n\nimport { PreviewMain } from './preview.main.runtime';\n\nexport function previewSchema(previewExtension: PreviewMain) {\n  return {\n    typeDefs: gql`\n      type Preview {\n        # url: String!\n        \"\"\"\n        Check if the component supports scaling\n        \"\"\"\n        isScaling: Boolean\n        includesEnvTemplate: Boolean\n        legacyHeader: Boolean\n        skipIncludes: Boolean\n      }\n\n      extend type Component {\n        preview: Preview\n      }\n    `,\n    resolvers: {\n      Component: {\n        preview: (component: Component) => {\n          // return previewExtension.getPreview(component);\n          return { component };\n        },\n      },\n      Preview: {\n        includesEnvTemplate: ({ component }) => {\n          return previewExtension.isBundledWithEnv(component);\n        },\n        isScaling: ({ component }) => {\n          return previewExtension.doesScaling(component);\n        },\n        legacyHeader: ({ component }) => {\n          return previewExtension.isLegacyHeader(component);\n        },\n        skipIncludes: ({ component }) => {\n          // return true;\n          return previewExtension.isSupportSkipIncludes(component);\n        },\n      },\n    },\n  };\n}\n"],"mappings":";;;;;;AACA,SAAAA,YAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,WAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA8B,SAAAC,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIvB,SAASG,aAAaA,CAACC,gBAA6B,EAAE;EAC3D,OAAO;IACLC,QAAQ,EAAE,IAAAC,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;IACDC,SAAS,EAAE;MACTC,SAAS,EAAE;QACTC,OAAO,EAAGC,SAAoB,IAAK;UACjC;UACA,OAAO;YAAEA;UAAU,CAAC;QACtB;MACF,CAAC;MACDC,OAAO,EAAE;QACPC,mBAAmB,EAAEA,CAAC;UAAEF;QAAU,CAAC,KAAK;UACtC,OAAON,gBAAgB,CAACS,gBAAgB,CAACH,SAAS,CAAC;QACrD,CAAC;QACDI,SAAS,EAAEA,CAAC;UAAEJ;QAAU,CAAC,KAAK;UAC5B,OAAON,gBAAgB,CAACW,WAAW,CAACL,SAAS,CAAC;QAChD,CAAC;QACDM,YAAY,EAAEA,CAAC;UAAEN;QAAU,CAAC,KAAK;UAC/B,OAAON,gBAAgB,CAACa,cAAc,CAACP,SAAS,CAAC;QACnD,CAAC;QACDQ,YAAY,EAAEA,CAAC;UAAER;QAAU,CAAC,KAAK;UAC/B;UACA,OAAON,gBAAgB,CAACe,qBAAqB,CAACT,SAAS,CAAC;QAC1D;MACF;IACF;EACF,CAAC;AACH"}
+{"version":3,"names":["_graphqlTag","data","_interopRequireDefault","require","obj","__esModule","default","previewSchema","previewExtension","typeDefs","gql","resolvers","Component","preview","component","Preview","includesEnvTemplate","isBundledWithEnv","isScaling","doesScaling","legacyHeader","isLegacyHeader","onlyOverview","getOnlyOverview","useNameParam","getUseNameParam","skipIncludes","isSupportSkipIncludes"],"sources":["preview.graphql.ts"],"sourcesContent":["import { Component } from '@teambit/component';\nimport gql from 'graphql-tag';\n\nimport { PreviewMain } from './preview.main.runtime';\n\nexport function previewSchema(previewExtension: PreviewMain) {\n  return {\n    typeDefs: gql`\n      type Preview {\n        # url: String!\n        \"\"\"\n        Check if the component supports scaling\n        \"\"\"\n        isScaling: Boolean\n        includesEnvTemplate: Boolean\n        legacyHeader: Boolean\n        \"\"\"\n        @deprecated use onlyOverview\n        \"\"\"\n        skipIncludes: Boolean\n        onlyOverview: Boolean\n        useNameParam: Boolean\n      }\n\n      extend type Component {\n        preview: Preview\n      }\n    `,\n    resolvers: {\n      Component: {\n        preview: (component: Component) => {\n          // return previewExtension.getPreview(component);\n          return { component };\n        },\n      },\n      Preview: {\n        includesEnvTemplate: ({ component }) => {\n          return previewExtension.isBundledWithEnv(component);\n        },\n        isScaling: ({ component }) => {\n          return previewExtension.doesScaling(component);\n        },\n        legacyHeader: ({ component }) => {\n          return previewExtension.isLegacyHeader(component);\n        },\n        onlyOverview: ({ component }) => {\n          return previewExtension.getOnlyOverview(component);\n        },\n        useNameParam: ({ component }) => {\n          return previewExtension.getUseNameParam(component);\n        },\n        skipIncludes: ({ component }) => {\n          return previewExtension.isSupportSkipIncludes(component);\n        },\n      },\n    },\n  };\n}\n"],"mappings":";;;;;;AACA,SAAAA,YAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,WAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA8B,SAAAC,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIvB,SAASG,aAAaA,CAACC,gBAA6B,EAAE;EAC3D,OAAO;IACLC,QAAQ,EAAE,IAAAC,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;IACDC,SAAS,EAAE;MACTC,SAAS,EAAE;QACTC,OAAO,EAAGC,SAAoB,IAAK;UACjC;UACA,OAAO;YAAEA;UAAU,CAAC;QACtB;MACF,CAAC;MACDC,OAAO,EAAE;QACPC,mBAAmB,EAAEA,CAAC;UAAEF;QAAU,CAAC,KAAK;UACtC,OAAON,gBAAgB,CAACS,gBAAgB,CAACH,SAAS,CAAC;QACrD,CAAC;QACDI,SAAS,EAAEA,CAAC;UAAEJ;QAAU,CAAC,KAAK;UAC5B,OAAON,gBAAgB,CAACW,WAAW,CAACL,SAAS,CAAC;QAChD,CAAC;QACDM,YAAY,EAAEA,CAAC;UAAEN;QAAU,CAAC,KAAK;UAC/B,OAAON,gBAAgB,CAACa,cAAc,CAACP,SAAS,CAAC;QACnD,CAAC;QACDQ,YAAY,EAAEA,CAAC;UAAER;QAAU,CAAC,KAAK;UAC/B,OAAON,gBAAgB,CAACe,eAAe,CAACT,SAAS,CAAC;QACpD,CAAC;QACDU,YAAY,EAAEA,CAAC;UAAEV;QAAU,CAAC,KAAK;UAC/B,OAAON,gBAAgB,CAACiB,eAAe,CAACX,SAAS,CAAC;QACpD,CAAC;QACDY,YAAY,EAAEA,CAAC;UAAEZ;QAAU,CAAC,KAAK;UAC/B,OAAON,gBAAgB,CAACmB,qBAAqB,CAACb,SAAS,CAAC;QAC1D;MACF;IACF;EACF,CAAC;AACH"}

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

@@ -58,6 +58,14 @@ export type PreviewAnyComponentData = {
      * Calculated by the component's env
      */
     splitComponentBundle?: boolean;
+    /**
+     * don't allow other aspects implementing a preview definition to be included in your preview.
+     */
+    onlyOverview?: boolean;
+    /**
+     * use name query params to select a specific composition to render.
+     */
+    useNameParam?: boolean;
     /**
      * don't allow other aspects implementing a preview definition to be included in your preview.
      */
@@ -68,6 +76,8 @@ export type PreviewAnyComponentData = {
  */
 export type PreviewEnvComponentData = {
     isScaling?: boolean;
+    supportsOnlyOverview?: boolean;
+    supportsUseNameParam?: boolean;
 };
 export type PreviewConfig = {
     bundlingStrategy?: string;
@@ -78,6 +88,7 @@ export type PreviewConfig = {
      * default - no limit.
      */
     maxChunkSize?: number;
+    onlyOverview?: boolean;
 };
 export type EnvPreviewConfig = {
     strategyName?: PreviewStrategyName;
@@ -137,6 +148,20 @@ export declare class PreviewMain {
      * @returns
      */
     getPreviewData(component: Component): PreviewComponentData | undefined;
+    /**
+     * check if the current version of env component supports skipping other included previews
+     * @param envComponent
+     * @returns
+     */
+    doesEnvIncludesOnlyOverview(envComponent: Component): boolean;
+    /**
+     * check if the current version of env component supports name query param
+     * @param envComponent
+     * @returns
+     */
+    doesEnvUseNameParam(envComponent: Component): boolean;
+    private calculateIncludeOnlyOverview;
+    private calculateUseNameParam;
     /**
      * Calculate preview data on component load
      * @param component
@@ -148,7 +173,7 @@ export declare class PreviewMain {
      * @param component
      * @returns
      */
-    calcPreviewDataFromEnv(component: Component): Promise<Omit<PreviewAnyComponentData, 'doesScaling'> | undefined>;
+    calcPreviewDataFromEnv(component: Component): Promise<Omit<PreviewAnyComponentData, 'doesScaling' | 'onlyOverview' | 'useNameParam'> | undefined>;
     /**
      * calculate extra preview data for env components (on load)
      * @param envComponent
@@ -192,6 +217,14 @@ export declare class PreviewMain {
      */
     isEnvSupportScaling(envComponent: Component): boolean;
     isSupportSkipIncludes(component: Component): Promise<boolean>;
+    /**
+     * check if the component preview should only include the overview (skipping rendering of the compostions and properties table)
+     */
+    getOnlyOverview(component: Component): Promise<boolean>;
+    /**
+     * check if the component preview should include the name query param
+     */
+    getUseNameParam(component: Component): Promise<boolean>;
     /**
      * This function is calculate the isScaling support flag for the component preview.
      * This is calculated only for the env component and not for the component itself.
@@ -285,6 +318,7 @@ export declare class PreviewMain {
     static dependencies: import("@teambit/harmony").Aspect[];
     static defaultConfig: {
         disabled: boolean;
+        onlyOverview: boolean;
     };
     static provider([bundler, builder, componentExtension, uiMain, envs, workspace, pkg, pubsub, aspectLoader, loggerMain, dependencyResolver, graphql, watcher, scope,]: [
         BundlerMain,

package/dist/preview.main.runtime.js

@@ -396,6 +396,40 @@ class PreviewMain {
     return previewData;
   }
 
+  /**
+   * check if the current version of env component supports skipping other included previews
+   * @param envComponent
+   * @returns
+   */
+  doesEnvIncludesOnlyOverview(envComponent) {
+    const previewData = this.getPreviewData(envComponent);
+    return !!previewData?.supportsOnlyOverview;
+  }
+
+  /**
+   * check if the current version of env component supports name query param
+   * @param envComponent
+   * @returns
+   */
+  doesEnvUseNameParam(envComponent) {
+    const previewData = this.getPreviewData(envComponent);
+    return !!previewData?.supportsUseNameParam;
+  }
+  async calculateIncludeOnlyOverview(component) {
+    if (this.envs.isUsingCoreEnv(component)) {
+      return true;
+    }
+    const envComponent = await this.envs.getEnvComponent(component);
+    return this.doesEnvIncludesOnlyOverview(envComponent);
+  }
+  async calculateUseNameParam(component) {
+    if (this.envs.isUsingCoreEnv(component)) {
+      return true;
+    }
+    const envComponent = await this.envs.getEnvComponent(component);
+    return this.doesEnvUseNameParam(envComponent);
+  }
+
   /**
    * Calculate preview data on component load
    * @param component
@@ -405,8 +439,12 @@ class PreviewMain {
     const doesScaling = await this.calcDoesScalingForComponent(component);
     const dataFromEnv = await this.calcPreviewDataFromEnv(component);
     const envData = (await this.calculateDataForEnvComponent(component)) || {};
+    const onlyOverview = await this.calculateIncludeOnlyOverview(component);
+    const useNameParam = await this.calculateUseNameParam(component);
     const data = _objectSpread(_objectSpread({
-      doesScaling
+      doesScaling,
+      onlyOverview,
+      useNameParam
     }, dataFromEnv), envData);
     return data;
   }
@@ -441,14 +479,15 @@ class PreviewMain {
    */
   async calculateDataForEnvComponent(envComponent) {
     const isEnv = this.envs.isEnv(envComponent);
+
     // If the component is not an env, we don't want to store anything in the data
     if (!isEnv) return undefined;
     const previewAspectConfig = this.getPreviewAspectConfig(envComponent);
     const data = {
       // default to true if the env doesn't have a preview config
-      isScaling: previewAspectConfig?.isScaling ?? true
-      // disalbe it for now, we will re-enable it later
-      // skipIncludes: true,
+      isScaling: previewAspectConfig?.isScaling ?? true,
+      supportsOnlyOverview: true,
+      supportsUseNameParam: true
     };
     return data;
   }
@@ -566,6 +605,7 @@ class PreviewMain {
     return !!previewData?.isScaling;
   }
   async isSupportSkipIncludes(component) {
+    if (!this.config.onlyOverview) return false;
     const isCore = this.envs.isUsingCoreEnv(component);
     if (isCore) return false;
     const envComponent = await this.envs.getEnvComponent(component);
@@ -573,6 +613,23 @@ class PreviewMain {
     return !!previewData?.skipIncludes;
   }
 
+  /**
+   * check if the component preview should only include the overview (skipping rendering of the compostions and properties table)
+   */
+  async getOnlyOverview(component) {
+    if (!this.config.onlyOverview) return false;
+    const previewData = this.getPreviewData(component);
+    return previewData?.onlyOverview ?? false;
+  }
+
+  /**
+   * check if the component preview should include the name query param
+   */
+  async getUseNameParam(component) {
+    const previewData = this.getPreviewData(component);
+    return previewData?.useNameParam ?? false;
+  }
+
   /**
    * This function is calculate the isScaling support flag for the component preview.
    * This is calculated only for the env component and not for the component itself.
@@ -869,7 +926,8 @@ _defineProperty(PreviewMain, "slots", [_harmony().Slot.withType(), _harmony().Sl
 _defineProperty(PreviewMain, "runtime", _cli().MainRuntime);
 _defineProperty(PreviewMain, "dependencies", [_bundler().BundlerAspect, _builder().BuilderAspect, _component().ComponentAspect, _ui().UIAspect, _envs().EnvsAspect, _workspace().default, _pkg().PkgAspect, _pubsub().PubsubAspect, _aspectLoader().AspectLoaderAspect, _logger().LoggerAspect, _dependencyResolver().DependencyResolverAspect, _graphql().default, _watcher().default, _scope().default]);
 _defineProperty(PreviewMain, "defaultConfig", {
-  disabled: false
+  disabled: false,
+  onlyOverview: false
 });
 _preview().PreviewAspect.addRuntime(PreviewMain);