@teambit/preview 1.0.186 → 1.0.187

package/artifacts/__bit_junit.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites tests="1" failures="0" errors="0" skipped="0">
-  <testsuite name="teambit.preview/preview@1.0.186" tests="1" failures="0" errors="0" skipped="0">
-    <testcase classname="dist/bundler/create-peer-link.spec.js" name="should output snapshot" time="0.004"/>
+  <testsuite name="teambit.preview/preview@1.0.187" tests="1" failures="0" errors="0" skipped="0">
+    <testcase classname="dist/bundler/create-peer-link.spec.js" name="should output snapshot" time="0.003"/>
   </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={74343:(e,t,n)=>{Object.defineProperty(t,"l",{enumerable:!0,get:function(){return o.default}});var o=r(n(77106));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.preview/aspect-docs/preview@0.0.167",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0}},77106:(e,t,n)=>{var o={id:"teambit.preview/aspect-docs/preview@0.0.167",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=m,a(n(41594));var r=n(5016),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},74124:(e,t,n)=>{var o={id:"teambit.preview/preview@1.0.186",homepage:"https://bit.cloud/teambit/preview/preview",exported:!0};function r(){const e=i(n(41594));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},5016:e=>{e.exports=MdxJsReact},41594: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(74124),r=(n(41594),n(5016));const i=TeambitMdxUiMdxScopeContext;var a=n(74343),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.l},mdxType:"MDXScopeProvider"},(0,r.mdx)(a.l,{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={74343:(e,t,n)=>{Object.defineProperty(t,"l",{enumerable:!0,get:function(){return o.default}});var o=r(n(77106));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.preview/aspect-docs/preview@0.0.167",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0}},77106:(e,t,n)=>{var o={id:"teambit.preview/aspect-docs/preview@0.0.167",homepage:"https://bit.cloud/teambit/preview/aspect-docs/preview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=m,a(n(41594));var r=n(5016),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},91749:(e,t,n)=>{var o={id:"teambit.preview/preview@1.0.187",homepage:"https://bit.cloud/teambit/preview/preview",exported:!0};function r(){const e=i(n(41594));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},5016:e=>{e.exports=MdxJsReact},41594: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(91749),r=(n(41594),n(5016));const i=TeambitMdxUiMdxScopeContext;var a=n(74343),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.l},mdxType:"MDXScopeProvider"},(0,r.mdx)(a.l,{mdxType:"Preview"})))}c.isMDXComponent=!0;const m=[t],u=[e],f={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));

package/artifacts/schema.json

@@ -218,7 +218,7 @@
                 "_legacy": {
                   "scope": "teambit.preview",
                   "name": "preview",
-                  "version": "1.0.186"
+                  "version": "1.0.187"
                 },
                 "_scope": "teambit.preview"
               }
@@ -6053,7 +6053,7 @@
                   "_legacy": {
                     "scope": "teambit.preview",
                     "name": "preview",
-                    "version": "1.0.186"
+                    "version": "1.0.187"
                   },
                   "_scope": "teambit.preview"
                 }
@@ -12711,7 +12711,7 @@
   "componentId": {
     "scope": "teambit.preview",
     "name": "preview",
-    "version": "1.0.186"
+    "version": "1.0.187"
   },
   "taggedModuleExports": []
 }

package/dist/{preview-1709781440634.js → preview-1709867881461.js}

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

package/dist/preview.start-plugin.d.ts

@@ -4,6 +4,14 @@ import { ProxyEntry, StartPlugin, StartPluginOptions, UiMain } from '@teambit/ui
 import { Workspace } from '@teambit/workspace';
 import { Logger } from '@teambit/logger';
 import { WatcherMain } from '@teambit/watcher';
+type ServerState = {
+    isCompiling?: boolean;
+    isReady?: boolean;
+    errors?: Error[];
+    warnings?: Error[];
+    results?: any[];
+};
+type ServerStateMap = Record<string, ServerState>;
 export declare class PreviewStartPlugin implements StartPlugin {
     private workspace;
     private bundler;
@@ -13,13 +21,15 @@ export declare class PreviewStartPlugin implements StartPlugin {
     private watcher;
     constructor(workspace: Workspace, bundler: BundlerMain, ui: UiMain, pubsub: PubsubMain, logger: Logger, watcher: WatcherMain);
     previewServers: ComponentServer[];
+    serversState: ServerStateMap;
+    serversMap: Record<string, ComponentServer>;
     initiate(options: StartPluginOptions): Promise<void>;
     getProxy(): ProxyEntry[];
     private listenToDevServers;
+    private handleOnStartCompiling;
+    private handleOnDoneCompiling;
     private setReady;
     private readyPromise;
     get whenReady(): Promise<void>;
-    private initialState;
-    private updateServers;
-    render: () => JSX.Element;
 }
+export {};

package/dist/preview.start-plugin.js

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PreviewStartPlugin = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
 function _lodash() {
   const data = require("lodash");
   _lodash = function () {
@@ -19,15 +12,8 @@ function _lodash() {
   return data;
 }
 function _previewCli() {
-  const data = require("@teambit/preview.cli.preview-server-status");
-  _previewCli = function () {
-    return data;
-  };
-  return data;
-}
-function _previewCli2() {
   const data = require("@teambit/preview.cli.webpack-events-listener");
-  _previewCli2 = function () {
+  _previewCli = function () {
     return data;
   };
   return data;
@@ -46,10 +32,14 @@ function _watcher() {
   };
   return data;
 }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _chalk() {
+  const data = _interopRequireDefault(require("chalk"));
+  _chalk = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -62,36 +52,22 @@ class PreviewStartPlugin {
     this.logger = logger;
     this.watcher = watcher;
     _defineProperty(this, "previewServers", []);
+    _defineProperty(this, "serversState", {});
+    _defineProperty(this, "serversMap", {});
     _defineProperty(this, "setReady", void 0);
     _defineProperty(this, "readyPromise", new Promise(resolve => this.setReady = resolve));
-    _defineProperty(this, "initialState", {});
-    // implements react-like setter (value or updater)
-    _defineProperty(this, "updateServers", servers => {
-      this.initialState = typeof servers === 'function' ? servers(this.initialState) : servers;
-      return servers;
-    });
-    _defineProperty(this, "render", () => {
-      const [servers, setServers] = (0, _react().useState)(this.initialState);
-      this.updateServers = setServers;
-      this.initialState = {};
-      (0, _react().useEffect)(() => {
-        const noneAreCompiling = Object.values(servers).every(x => !x.compiling);
-        if (noneAreCompiling) this.setReady();
-      }, [servers]);
-      return /*#__PURE__*/_react().default.createElement(_previewCli().PreviewServerStatus, {
-        previewServers: this.previewServers,
-        serverStats: servers
-      });
-    });
   }
   async initiate(options) {
     this.listenToDevServers();
     const components = await this.workspace.getComponentsByUserInput(!options.pattern, options.pattern);
     // TODO: logic for creating preview servers must be refactored to this aspect from the DevServer aspect.
     const previewServers = await this.bundler.devServer(components);
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    previewServers.forEach(server => server.listen());
-    // DON'T add wait! this promise never resolves, so it would stop the start process!
+    previewServers.forEach(server => {
+      this.serversMap[server.context.envRuntime.id] = server;
+      // DON'T add wait! this promise never resolves, so it would stop the start process!
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      server.listen();
+    });
     this.watcher.watch({
       spawnTSServer: true,
       checkTypes: _watcher().CheckTypes.None,
@@ -122,25 +98,106 @@ class PreviewStartPlugin {
   // TODO: this should be a part of the devServer
   listenToDevServers() {
     // keep state changes immutable!
-    (0, _previewCli2().SubscribeToWebpackEvents)(this.pubsub, {
+    (0, _previewCli().SubscribeToWebpackEvents)(this.pubsub, {
       onStart: id => {
-        this.updateServers(state => _objectSpread(_objectSpread({}, state), {}, {
-          [id]: {
-            compiling: true
-          }
-        }));
+        this.handleOnStartCompiling(id);
       },
       onDone: (id, results) => {
-        this.updateServers(state => _objectSpread(_objectSpread({}, state), {}, {
-          [id]: results
-        }));
+        this.handleOnDoneCompiling(id, results);
       }
     });
   }
+  handleOnStartCompiling(id) {
+    this.serversState[id] = {
+      isCompiling: true
+    };
+    const spinnerId = getSpinnerId(id);
+    const text = getSpinnerCompilingMessage(this.serversMap[id]);
+    this.logger.multiSpinner.add(spinnerId, {
+      text
+    });
+  }
+  handleOnDoneCompiling(id, results) {
+    this.serversState[id] = {
+      isCompiling: false,
+      isReady: true,
+      errors: results.errors,
+      warnings: results.warnings
+    };
+    const previewServer = this.serversMap[id];
+    const spinnerId = getSpinnerId(id);
+    const errors = results.errors || [];
+    const hasErrors = !!errors.length;
+    const warnings = getWarningsWithoutIgnored(results.warnings);
+    const hasWarnings = !!warnings.length;
+    const url = `http://localhost:${previewServer.port}`;
+    const text = getSpinnerDoneMessage(this.serversMap[id], errors, warnings, url);
+    if (hasErrors) {
+      this.logger.multiSpinner.fail(spinnerId, {
+        text
+      });
+    } else if (hasWarnings) {
+      this.logger.multiSpinner.warn(spinnerId, {
+        text
+      });
+    } else {
+      this.logger.multiSpinner.succeed(spinnerId, {
+        text
+      });
+    }
+    const noneAreCompiling = Object.values(this.serversState).every(x => !x.isCompiling);
+    if (noneAreCompiling) this.setReady();
+  }
   get whenReady() {
     return this.readyPromise;
   }
 }
 exports.PreviewStartPlugin = PreviewStartPlugin;
+function getWarningsWithoutIgnored(warnings) {
+  if (!warnings || !warnings.length) return [];
+  const IGNORE_WARNINGS = [
+  // Webpack 5+ has no facility to disable this warning.
+  // System.import is used in @angular/core for deprecated string-form lazy routes
+  /System.import\(\) is deprecated and will be removed soon/i,
+  // We need to include all the files in the compilation because we don't know what people will use in their compositions
+  /is part of the TypeScript compilation but it's unused/i,
+  // https://github.com/webpack-contrib/source-map-loader/blob/b2de4249c7431dd8432da607e08f0f65e9d64219/src/index.js#L83
+  /Failed to parse source map from/];
+  warnings.filter(warning => !IGNORE_WARNINGS.find(reg => warning?.message?.match(reg)));
+  return warnings;
+}
+function getSpinnerId(envId) {
+  return `preview-${envId}`;
+}
+function getSpinnerCompilingMessage(server, verbose = false) {
+  const prefix = 'COMPILING';
+  const envId = _chalk().default.cyan(server.context.envRuntime.id);
+  let includedEnvs = '';
+  if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {
+    includedEnvs = `on behalf of ${_chalk().default.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;
+  }
+  return `${prefix} ${envId} ${includedEnvs}`;
+}
+function getSpinnerDoneMessage(server, errors, warnings, url, verbose = false) {
+  const hasErrors = !!errors.length;
+  const hasWarnings = !!warnings.length;
+  const prefix = hasErrors ? 'FAILED' : 'RUNNING';
+  const envId = _chalk().default.cyan(server.context.envRuntime.id);
+  let includedEnvs = '';
+  if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {
+    includedEnvs = ` on behalf of ${_chalk().default.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;
+  }
+  const errorsTxt = hasErrors ? errors.map(err => err.message).join('\n') : '';
+  const errorsTxtWithTitle = hasErrors ? _chalk().default.red(`\nErrors:\n${errorsTxt}`) : '';
+  const warningsTxt = hasWarnings ? warnings.map(warning => warning.message).join('\n') : '';
+  const warningsTxtWithTitle = hasWarnings ? _chalk().default.yellow(`\nWarnings:\n${warningsTxt}`) : '';
+  const urlMessage = hasErrors ? '' : `at ${_chalk().default.cyan(url)}`;
+  return `${prefix} ${envId}${includedEnvs} ${urlMessage} ${errorsTxtWithTitle} ${warningsTxtWithTitle}`;
+}
+function stringifyIncludedEnvs(includedEnvs = [], verbose = false) {
+  if (includedEnvs.length < 2) return '';
+  if (includedEnvs.length > 2 && !verbose) return ` ${includedEnvs.length} other envs`;
+  return includedEnvs.join(', ');
+}
 
 //# sourceMappingURL=preview.start-plugin.js.map

package/dist/preview.start-plugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_lodash","_previewCli","_previewCli2","_compiler","_watcher","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","obj","key","value","_toPropertyKey","configurable","writable","_toPrimitive","String","Symbol","toPrimitive","TypeError","Number","PreviewStartPlugin","constructor","workspace","bundler","ui","pubsub","logger","watcher","Promise","resolve","setReady","servers","initialState","setServers","useState","updateServers","useEffect","noneAreCompiling","values","every","x","compiling","createElement","PreviewServerStatus","previewServers","serverStats","initiate","options","listenToDevServers","components","getComponentsByUserInput","pattern","devServer","server","listen","watch","spawnTSServer","checkTypes","CheckTypes","None","preCompile","compile","initiator","CompilationInitiator","Start","catch","err","msg","error","console","message","concat","getProxy","proxyConfigs","map","context","envRuntime","id","target","port","ws","flatten","SubscribeToWebpackEvents","onStart","state","onDone","results","whenReady","readyPromise","exports"],"sources":["preview.start-plugin.tsx"],"sourcesContent":["import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';\nimport { flatten } from 'lodash';\nimport { PreviewServerStatus } from '@teambit/preview.cli.preview-server-status';\nimport { BundlerMain, ComponentServer } from '@teambit/bundler';\nimport { PubsubMain } from '@teambit/pubsub';\nimport { ProxyEntry, StartPlugin, StartPluginOptions, UiMain } from '@teambit/ui';\nimport { Workspace } from '@teambit/workspace';\nimport { SubscribeToWebpackEvents, CompilationResult } from '@teambit/preview.cli.webpack-events-listener';\nimport { CompilationInitiator } from '@teambit/compiler';\nimport { Logger } from '@teambit/logger';\nimport { CheckTypes, WatcherMain } from '@teambit/watcher';\n\ntype CompilationServers = Record<string, CompilationResult>;\ntype ServersSetter = Dispatch<SetStateAction<CompilationServers>>;\n\nexport class PreviewStartPlugin implements StartPlugin {\n  constructor(\n    private workspace: Workspace,\n    private bundler: BundlerMain,\n    private ui: UiMain,\n    private pubsub: PubsubMain,\n    private logger: Logger,\n    private watcher: WatcherMain\n  ) {}\n\n  previewServers: ComponentServer[] = [];\n\n  async initiate(options: StartPluginOptions) {\n    this.listenToDevServers();\n\n    const components = await this.workspace.getComponentsByUserInput(!options.pattern, options.pattern);\n    // TODO: logic for creating preview servers must be refactored to this aspect from the DevServer aspect.\n    const previewServers = await this.bundler.devServer(components);\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    previewServers.forEach((server) => server.listen());\n    // DON'T add wait! this promise never resolves, so it would stop the start process!\n    this.watcher\n      .watch({\n        spawnTSServer: true,\n        checkTypes: CheckTypes.None,\n        preCompile: false,\n        compile: true,\n        initiator: CompilationInitiator.Start,\n      })\n      .catch((err) => {\n        const msg = `watcher found an error`;\n        this.logger.error(msg, err);\n        this.logger.console(`${msg}, ${err.message}`);\n      });\n    this.previewServers = this.previewServers.concat(previewServers);\n  }\n\n  getProxy(): ProxyEntry[] {\n    const proxyConfigs = this.previewServers.map<ProxyEntry[]>((server) => {\n      return [\n        {\n          context: [`/preview/${server.context.envRuntime.id}`],\n          target: `http://localhost:${server.port}`,\n        },\n        {\n          context: [`/_hmr/${server.context.envRuntime.id}`],\n          target: `http://localhost:${server.port}`,\n          ws: true,\n        },\n      ];\n    });\n\n    return flatten(proxyConfigs);\n  }\n\n  // TODO: this should be a part of the devServer\n  private listenToDevServers() {\n    // keep state changes immutable!\n    SubscribeToWebpackEvents(this.pubsub, {\n      onStart: (id) => {\n        this.updateServers((state) => ({\n          ...state,\n          [id]: { compiling: true },\n        }));\n      },\n      onDone: (id, results) => {\n        this.updateServers((state) => ({\n          ...state,\n          [id]: results,\n        }));\n      },\n    });\n  }\n\n  private setReady: () => void;\n  private readyPromise = new Promise<void>((resolve) => (this.setReady = resolve));\n  get whenReady(): Promise<void> {\n    return this.readyPromise;\n  }\n\n  private initialState: CompilationServers = {};\n  // implements react-like setter (value or updater)\n  private updateServers: ServersSetter = (servers) => {\n    this.initialState = typeof servers === 'function' ? servers(this.initialState) : servers;\n    return servers;\n  };\n\n  render = () => {\n    const [servers, setServers] = useState<CompilationServers>(this.initialState);\n    this.updateServers = setServers;\n    this.initialState = {};\n\n    useEffect(() => {\n      const noneAreCompiling = Object.values(servers).every((x) => !x.compiling);\n      if (noneAreCompiling) this.setReady();\n    }, [servers]);\n\n    return <PreviewServerStatus previewServers={this.previewServers} serverStats={servers} />;\n  };\n}\n"],"mappings":"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"}
+{"version":3,"names":["_lodash","data","require","_previewCli","_compiler","_watcher","_chalk","_interopRequireDefault","obj","__esModule","default","_defineProperty","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","t","i","_toPrimitive","String","r","e","Symbol","toPrimitive","call","TypeError","Number","PreviewStartPlugin","constructor","workspace","bundler","ui","pubsub","logger","watcher","Promise","resolve","setReady","initiate","options","listenToDevServers","components","getComponentsByUserInput","pattern","previewServers","devServer","forEach","server","serversMap","context","envRuntime","id","listen","watch","spawnTSServer","checkTypes","CheckTypes","None","preCompile","compile","initiator","CompilationInitiator","Start","catch","err","msg","error","console","message","concat","getProxy","proxyConfigs","map","target","port","ws","flatten","SubscribeToWebpackEvents","onStart","handleOnStartCompiling","onDone","results","handleOnDoneCompiling","serversState","isCompiling","spinnerId","getSpinnerId","text","getSpinnerCompilingMessage","multiSpinner","add","isReady","errors","warnings","previewServer","hasErrors","length","getWarningsWithoutIgnored","hasWarnings","url","getSpinnerDoneMessage","fail","warn","succeed","noneAreCompiling","values","every","x","whenReady","readyPromise","exports","IGNORE_WARNINGS","filter","warning","find","reg","match","envId","verbose","prefix","chalk","cyan","includedEnvs","relatedContexts","stringifyIncludedEnvs","errorsTxt","join","errorsTxtWithTitle","red","warningsTxt","warningsTxtWithTitle","yellow","urlMessage"],"sources":["preview.start-plugin.tsx"],"sourcesContent":["import { flatten } from 'lodash';\nimport { BundlerMain, ComponentServer } from '@teambit/bundler';\nimport { PubsubMain } from '@teambit/pubsub';\nimport { ProxyEntry, StartPlugin, StartPluginOptions, UiMain } from '@teambit/ui';\nimport { Workspace } from '@teambit/workspace';\nimport { SubscribeToWebpackEvents, CompilationResult } from '@teambit/preview.cli.webpack-events-listener';\nimport { CompilationInitiator } from '@teambit/compiler';\nimport { Logger } from '@teambit/logger';\nimport { CheckTypes, WatcherMain } from '@teambit/watcher';\nimport chalk from 'chalk';\n\ntype ServerState = {\n  isCompiling?: boolean;\n  isReady?: boolean;\n  errors?: Error[];\n  warnings?: Error[];\n  results?: any[];\n};\n\ntype ServerStateMap = Record<string, ServerState>;\n\nexport class PreviewStartPlugin implements StartPlugin {\n  constructor(\n    private workspace: Workspace,\n    private bundler: BundlerMain,\n    private ui: UiMain,\n    private pubsub: PubsubMain,\n    private logger: Logger,\n    private watcher: WatcherMain\n  ) {}\n\n  previewServers: ComponentServer[] = [];\n  serversState: ServerStateMap = {};\n  serversMap: Record<string, ComponentServer> = {};\n\n  async initiate(options: StartPluginOptions) {\n    this.listenToDevServers();\n\n    const components = await this.workspace.getComponentsByUserInput(!options.pattern, options.pattern);\n    // TODO: logic for creating preview servers must be refactored to this aspect from the DevServer aspect.\n    const previewServers = await this.bundler.devServer(components);\n    previewServers.forEach((server) => {\n      this.serversMap[server.context.envRuntime.id] = server;\n      // DON'T add wait! this promise never resolves, so it would stop the start process!\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      server.listen();\n    });\n    this.watcher\n      .watch({\n        spawnTSServer: true,\n        checkTypes: CheckTypes.None,\n        preCompile: false,\n        compile: true,\n        initiator: CompilationInitiator.Start,\n      })\n      .catch((err) => {\n        const msg = `watcher found an error`;\n        this.logger.error(msg, err);\n        this.logger.console(`${msg}, ${err.message}`);\n      });\n    this.previewServers = this.previewServers.concat(previewServers);\n  }\n\n  getProxy(): ProxyEntry[] {\n    const proxyConfigs = this.previewServers.map<ProxyEntry[]>((server) => {\n      return [\n        {\n          context: [`/preview/${server.context.envRuntime.id}`],\n          target: `http://localhost:${server.port}`,\n        },\n        {\n          context: [`/_hmr/${server.context.envRuntime.id}`],\n          target: `http://localhost:${server.port}`,\n          ws: true,\n        },\n      ];\n    });\n\n    return flatten(proxyConfigs);\n  }\n\n  // TODO: this should be a part of the devServer\n  private listenToDevServers() {\n    // keep state changes immutable!\n    SubscribeToWebpackEvents(this.pubsub, {\n      onStart: (id) => {\n        this.handleOnStartCompiling(id);\n      },\n      onDone: (id, results) => {\n        this.handleOnDoneCompiling(id, results);\n      },\n    });\n  }\n\n  private handleOnStartCompiling(id: string) {\n    this.serversState[id] = { isCompiling: true };\n    const spinnerId = getSpinnerId(id);\n    const text = getSpinnerCompilingMessage(this.serversMap[id]);\n    this.logger.multiSpinner.add(spinnerId, { text });\n  }\n\n  private handleOnDoneCompiling(id: string, results: CompilationResult) {\n    this.serversState[id] = {\n      isCompiling: false,\n      isReady: true,\n      errors: results.errors,\n      warnings: results.warnings,\n    };\n    const previewServer = this.serversMap[id];\n    const spinnerId = getSpinnerId(id);\n    const errors = results.errors || [];\n    const hasErrors = !!errors.length;\n    const warnings = getWarningsWithoutIgnored(results.warnings);\n    const hasWarnings = !!warnings.length;\n    const url = `http://localhost:${previewServer.port}`;\n    const text = getSpinnerDoneMessage(this.serversMap[id], errors, warnings, url);\n    if (hasErrors) {\n      this.logger.multiSpinner.fail(spinnerId, { text });\n    } else if (hasWarnings) {\n      this.logger.multiSpinner.warn(spinnerId, { text });\n    } else {\n      this.logger.multiSpinner.succeed(spinnerId, { text });\n    }\n\n    const noneAreCompiling = Object.values(this.serversState).every((x) => !x.isCompiling);\n    if (noneAreCompiling) this.setReady();\n  }\n\n  private setReady: () => void;\n  private readyPromise = new Promise<void>((resolve) => (this.setReady = resolve));\n  get whenReady(): Promise<void> {\n    return this.readyPromise;\n  }\n}\n\nfunction getWarningsWithoutIgnored(warnings?: Error[]): Error[] {\n  if (!warnings || !warnings.length) return [];\n  const IGNORE_WARNINGS = [\n    // Webpack 5+ has no facility to disable this warning.\n    // System.import is used in @angular/core for deprecated string-form lazy routes\n    /System.import\\(\\) is deprecated and will be removed soon/i,\n    // We need to include all the files in the compilation because we don't know what people will use in their compositions\n    /is part of the TypeScript compilation but it's unused/i,\n    // https://github.com/webpack-contrib/source-map-loader/blob/b2de4249c7431dd8432da607e08f0f65e9d64219/src/index.js#L83\n    /Failed to parse source map from/,\n  ];\n  warnings.filter((warning) => !IGNORE_WARNINGS.find((reg) => warning?.message?.match(reg)));\n  return warnings;\n}\n\nfunction getSpinnerId(envId: string) {\n  return `preview-${envId}`;\n}\n\nfunction getSpinnerCompilingMessage(server: ComponentServer, verbose = false) {\n  const prefix = 'COMPILING';\n  const envId = chalk.cyan(server.context.envRuntime.id);\n  let includedEnvs = '';\n  if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {\n    includedEnvs = `on behalf of ${chalk.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;\n  }\n  return `${prefix} ${envId} ${includedEnvs}`;\n}\n\nfunction getSpinnerDoneMessage(\n  server: ComponentServer,\n  errors: Error[],\n  warnings: Error[],\n  url: string,\n  verbose = false\n) {\n  const hasErrors = !!errors.length;\n  const hasWarnings = !!warnings.length;\n  const prefix = hasErrors ? 'FAILED' : 'RUNNING';\n  const envId = chalk.cyan(server.context.envRuntime.id);\n  let includedEnvs = '';\n  if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {\n    includedEnvs = ` on behalf of ${chalk.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;\n  }\n  const errorsTxt = hasErrors ? errors.map((err) => err.message).join('\\n') : '';\n  const errorsTxtWithTitle = hasErrors ? chalk.red(`\\nErrors:\\n${errorsTxt}`) : '';\n  const warningsTxt = hasWarnings ? warnings.map((warning) => warning.message).join('\\n') : '';\n  const warningsTxtWithTitle = hasWarnings ? chalk.yellow(`\\nWarnings:\\n${warningsTxt}`) : '';\n\n  const urlMessage = hasErrors ? '' : `at ${chalk.cyan(url)}`;\n  return `${prefix} ${envId}${includedEnvs} ${urlMessage} ${errorsTxtWithTitle} ${warningsTxtWithTitle}`;\n}\n\nfunction stringifyIncludedEnvs(includedEnvs: string[] = [], verbose = false) {\n  if (includedEnvs.length < 2) return '';\n  if (includedEnvs.length > 2 && !verbose) return ` ${includedEnvs.length} other envs`;\n  return includedEnvs.join(', ');\n}\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/preview",
-  "version": "1.0.186",
+  "version": "1.0.187",
   "homepage": "https://bit.cloud/teambit/preview/preview",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.preview",
     "name": "preview",
-    "version": "1.0.186"
+    "version": "1.0.187"
   },
   "dependencies": {
     "mime": "2.5.2",
@@ -17,6 +17,7 @@
     "webpack": "5.84.1",
     "graphql-tag": "2.12.1",
     "object-hash": "2.1.1",
+    "chalk": "2.4.2",
     "lodash.compact": "3.0.1",
     "graphql-request": "6.1.0",
     "webpack-manifest-plugin": "5.0.0",
@@ -27,31 +28,30 @@
     "@teambit/component-id": "1.2.0",
     "@teambit/bit-error": "0.0.404",
     "@teambit/react.webpack.react-webpack": "1.0.23",
-    "@teambit/express": "0.0.953",
-    "@teambit/logger": "0.0.947",
-    "@teambit/builder": "1.0.186",
-    "@teambit/bundler": "1.0.186",
-    "@teambit/component": "1.0.186",
+    "@teambit/express": "0.0.954",
+    "@teambit/logger": "0.0.948",
+    "@teambit/builder": "1.0.187",
+    "@teambit/bundler": "1.0.187",
+    "@teambit/component": "1.0.187",
     "@teambit/preview.ui.component-preview": "1.0.5",
-    "@teambit/aspect-loader": "1.0.186",
-    "@teambit/cli": "0.0.854",
-    "@teambit/dependency-resolver": "1.0.186",
-    "@teambit/envs": "1.0.186",
+    "@teambit/aspect-loader": "1.0.187",
+    "@teambit/cli": "0.0.855",
+    "@teambit/dependency-resolver": "1.0.187",
+    "@teambit/envs": "1.0.187",
     "@teambit/toolbox.path.to-windows-compatible-path": "0.0.496",
-    "@teambit/ui": "1.0.186",
-    "@teambit/isolator": "1.0.186",
+    "@teambit/ui": "1.0.187",
+    "@teambit/isolator": "1.0.187",
     "@teambit/harmony.modules.harmony-root-generator": "0.0.4",
-    "@teambit/cache": "0.0.947",
-    "@teambit/graphql": "1.0.186",
-    "@teambit/pkg": "1.0.186",
-    "@teambit/pubsub": "1.0.186",
-    "@teambit/scope": "1.0.186",
-    "@teambit/watcher": "1.0.186",
-    "@teambit/workspace": "1.0.186",
-    "@teambit/compiler": "1.0.186",
-    "@teambit/preview.cli.preview-server-status": "0.0.506",
-    "@teambit/preview.cli.webpack-events-listener": "0.0.174",
-    "@teambit/webpack": "1.0.186"
+    "@teambit/cache": "0.0.948",
+    "@teambit/graphql": "1.0.187",
+    "@teambit/pkg": "1.0.187",
+    "@teambit/pubsub": "1.0.187",
+    "@teambit/scope": "1.0.187",
+    "@teambit/watcher": "1.0.187",
+    "@teambit/workspace": "1.0.187",
+    "@teambit/compiler": "1.0.187",
+    "@teambit/preview.cli.webpack-events-listener": "0.0.175",
+    "@teambit/webpack": "1.0.187"
   },
   "devDependencies": {
     "@types/mime": "2.0.3",

package/preview.start-plugin.tsx

@@ -1,6 +1,4 @@
-import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
 import { flatten } from 'lodash';
-import { PreviewServerStatus } from '@teambit/preview.cli.preview-server-status';
 import { BundlerMain, ComponentServer } from '@teambit/bundler';
 import { PubsubMain } from '@teambit/pubsub';
 import { ProxyEntry, StartPlugin, StartPluginOptions, UiMain } from '@teambit/ui';
@@ -9,9 +7,17 @@ import { SubscribeToWebpackEvents, CompilationResult } from '@teambit/preview.cl
 import { CompilationInitiator } from '@teambit/compiler';
 import { Logger } from '@teambit/logger';
 import { CheckTypes, WatcherMain } from '@teambit/watcher';
+import chalk from 'chalk';
 
-type CompilationServers = Record<string, CompilationResult>;
-type ServersSetter = Dispatch<SetStateAction<CompilationServers>>;
+type ServerState = {
+  isCompiling?: boolean;
+  isReady?: boolean;
+  errors?: Error[];
+  warnings?: Error[];
+  results?: any[];
+};
+
+type ServerStateMap = Record<string, ServerState>;
 
 export class PreviewStartPlugin implements StartPlugin {
   constructor(
@@ -24,6 +30,8 @@ export class PreviewStartPlugin implements StartPlugin {
   ) {}
 
   previewServers: ComponentServer[] = [];
+  serversState: ServerStateMap = {};
+  serversMap: Record<string, ComponentServer> = {};
 
   async initiate(options: StartPluginOptions) {
     this.listenToDevServers();
@@ -31,9 +39,12 @@ export class PreviewStartPlugin implements StartPlugin {
     const components = await this.workspace.getComponentsByUserInput(!options.pattern, options.pattern);
     // TODO: logic for creating preview servers must be refactored to this aspect from the DevServer aspect.
     const previewServers = await this.bundler.devServer(components);
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    previewServers.forEach((server) => server.listen());
-    // DON'T add wait! this promise never resolves, so it would stop the start process!
+    previewServers.forEach((server) => {
+      this.serversMap[server.context.envRuntime.id] = server;
+      // DON'T add wait! this promise never resolves, so it would stop the start process!
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      server.listen();
+    });
     this.watcher
       .watch({
         spawnTSServer: true,
@@ -73,43 +84,110 @@ export class PreviewStartPlugin implements StartPlugin {
     // keep state changes immutable!
     SubscribeToWebpackEvents(this.pubsub, {
       onStart: (id) => {
-        this.updateServers((state) => ({
-          ...state,
-          [id]: { compiling: true },
-        }));
+        this.handleOnStartCompiling(id);
       },
       onDone: (id, results) => {
-        this.updateServers((state) => ({
-          ...state,
-          [id]: results,
-        }));
+        this.handleOnDoneCompiling(id, results);
       },
     });
   }
 
+  private handleOnStartCompiling(id: string) {
+    this.serversState[id] = { isCompiling: true };
+    const spinnerId = getSpinnerId(id);
+    const text = getSpinnerCompilingMessage(this.serversMap[id]);
+    this.logger.multiSpinner.add(spinnerId, { text });
+  }
+
+  private handleOnDoneCompiling(id: string, results: CompilationResult) {
+    this.serversState[id] = {
+      isCompiling: false,
+      isReady: true,
+      errors: results.errors,
+      warnings: results.warnings,
+    };
+    const previewServer = this.serversMap[id];
+    const spinnerId = getSpinnerId(id);
+    const errors = results.errors || [];
+    const hasErrors = !!errors.length;
+    const warnings = getWarningsWithoutIgnored(results.warnings);
+    const hasWarnings = !!warnings.length;
+    const url = `http://localhost:${previewServer.port}`;
+    const text = getSpinnerDoneMessage(this.serversMap[id], errors, warnings, url);
+    if (hasErrors) {
+      this.logger.multiSpinner.fail(spinnerId, { text });
+    } else if (hasWarnings) {
+      this.logger.multiSpinner.warn(spinnerId, { text });
+    } else {
+      this.logger.multiSpinner.succeed(spinnerId, { text });
+    }
+
+    const noneAreCompiling = Object.values(this.serversState).every((x) => !x.isCompiling);
+    if (noneAreCompiling) this.setReady();
+  }
+
   private setReady: () => void;
   private readyPromise = new Promise<void>((resolve) => (this.setReady = resolve));
   get whenReady(): Promise<void> {
     return this.readyPromise;
   }
+}
+
+function getWarningsWithoutIgnored(warnings?: Error[]): Error[] {
+  if (!warnings || !warnings.length) return [];
+  const IGNORE_WARNINGS = [
+    // Webpack 5+ has no facility to disable this warning.
+    // System.import is used in @angular/core for deprecated string-form lazy routes
+    /System.import\(\) is deprecated and will be removed soon/i,
+    // We need to include all the files in the compilation because we don't know what people will use in their compositions
+    /is part of the TypeScript compilation but it's unused/i,
+    // https://github.com/webpack-contrib/source-map-loader/blob/b2de4249c7431dd8432da607e08f0f65e9d64219/src/index.js#L83
+    /Failed to parse source map from/,
+  ];
+  warnings.filter((warning) => !IGNORE_WARNINGS.find((reg) => warning?.message?.match(reg)));
+  return warnings;
+}
+
+function getSpinnerId(envId: string) {
+  return `preview-${envId}`;
+}
+
+function getSpinnerCompilingMessage(server: ComponentServer, verbose = false) {
+  const prefix = 'COMPILING';
+  const envId = chalk.cyan(server.context.envRuntime.id);
+  let includedEnvs = '';
+  if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {
+    includedEnvs = `on behalf of ${chalk.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;
+  }
+  return `${prefix} ${envId} ${includedEnvs}`;
+}
+
+function getSpinnerDoneMessage(
+  server: ComponentServer,
+  errors: Error[],
+  warnings: Error[],
+  url: string,
+  verbose = false
+) {
+  const hasErrors = !!errors.length;
+  const hasWarnings = !!warnings.length;
+  const prefix = hasErrors ? 'FAILED' : 'RUNNING';
+  const envId = chalk.cyan(server.context.envRuntime.id);
+  let includedEnvs = '';
+  if (server.context.relatedContexts && server.context.relatedContexts.length > 1) {
+    includedEnvs = ` on behalf of ${chalk.cyan(stringifyIncludedEnvs(server.context.relatedContexts, verbose))}`;
+  }
+  const errorsTxt = hasErrors ? errors.map((err) => err.message).join('\n') : '';
+  const errorsTxtWithTitle = hasErrors ? chalk.red(`\nErrors:\n${errorsTxt}`) : '';
+  const warningsTxt = hasWarnings ? warnings.map((warning) => warning.message).join('\n') : '';
+  const warningsTxtWithTitle = hasWarnings ? chalk.yellow(`\nWarnings:\n${warningsTxt}`) : '';
+
+  const urlMessage = hasErrors ? '' : `at ${chalk.cyan(url)}`;
+  return `${prefix} ${envId}${includedEnvs} ${urlMessage} ${errorsTxtWithTitle} ${warningsTxtWithTitle}`;
+}
 
-  private initialState: CompilationServers = {};
-  // implements react-like setter (value or updater)
-  private updateServers: ServersSetter = (servers) => {
-    this.initialState = typeof servers === 'function' ? servers(this.initialState) : servers;
-    return servers;
-  };
-
-  render = () => {
-    const [servers, setServers] = useState<CompilationServers>(this.initialState);
-    this.updateServers = setServers;
-    this.initialState = {};
-
-    useEffect(() => {
-      const noneAreCompiling = Object.values(servers).every((x) => !x.compiling);
-      if (noneAreCompiling) this.setReady();
-    }, [servers]);
-
-    return <PreviewServerStatus previewServers={this.previewServers} serverStats={servers} />;
-  };
+function stringifyIncludedEnvs(includedEnvs: string[] = [], verbose = false) {
+  if (includedEnvs.length < 2) return '';
+  if (includedEnvs.length > 2 && !verbose) return ` ${includedEnvs.length} other envs`;
+  return includedEnvs.join(', ');
 }