feat(preview | dev server): dynamically generate dev servers for new components (teambit#9651)

Author: luvkapur

components/ui/workspace-component-card/workspace-component-card.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
 import classNames from 'classnames';
 import { ScopeID } from '@teambit/scopes.scope-id';
 import { ComponentCard, type ComponentCardPluginType, type PluginProps } from '@teambit/explorer.ui.component-card';
 import { ComponentModel } from '@teambit/component';
 import { LoadPreview } from '@teambit/workspace.ui.load-preview';
-
 import styles from './workspace-component-card.module.scss';
 
 export type WorkspaceComponentCardProps = {
@@ -31,27 +30,41 @@ export function WorkspaceComponentCard({
   ...rest
 }: WorkspaceComponentCardProps) {
   const [shouldShowPreviewState, togglePreview] = React.useState<boolean>(Boolean(shouldShowPreviewStateFromProps));
+  const prevServerUrlRef = useRef(component.server?.url);
+  
+  useEffect(() => {
+    const currentServerUrl = component.server?.url;
+    if (prevServerUrlRef.current !== currentServerUrl && shouldShowPreviewState) {
+      togglePreview(false);
+      setTimeout(() => togglePreview(true), 50);
+    }
+    prevServerUrlRef.current = currentServerUrl;
+  }, [component.server?.url]);
 
   useEffect(() => {
     togglePreview(Boolean(shouldShowPreviewStateFromProps));
   }, [shouldShowPreviewStateFromProps]);
+  
   const showPreview = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     if (!shouldShowPreviewState) {
       togglePreview(true);
     }
   };
+  
   const loadPreviewBtnVisible =
     component.compositions.length > 0 && component?.buildStatus !== 'pending' && !shouldShowPreviewState;
+  
   const updatedPlugins = React.useMemo(() => {
     return plugins?.map((plugin) => {
       if (plugin.preview) {
         const Preview = plugin.preview;
         return {
           ...plugin,
           preview: function PreviewWrapper(props) {
+            const serverKey = component.server?.url || 'no-server';
             return (
-              <div className={styles.previewWrapper}>
+              <div key={serverKey}>
                 <Preview {...props} shouldShowPreview={shouldShowPreviewState} />
               </div>
             );
@@ -60,12 +73,14 @@ export function WorkspaceComponentCard({
       }
       return plugin;
     });
-  }, [shouldShowPreviewState, component.compositions.length]);
+  }, [shouldShowPreviewState, component.compositions.length, component.server?.url]);
+  
   if (component.deprecation?.isDeprecate) return null;
+  
   return (
     <div key={component.id.toString()} className={classNames(styles.cardWrapper, className)} {...rest}>
       {loadPreviewBtnVisible && <LoadPreview className={styles.loadPreview} onClick={showPreview} />}
       <ComponentCard component={componentDescriptor} plugins={updatedPlugins} displayOwnerDetails="all" scope={scope} />
     </div>
   );
-}
+}

scopes/compilation/bundler/bundler.main.runtime.ts

@@ -1,23 +1,25 @@
 import { PubsubAspect, PubsubMain } from '@teambit/pubsub';
 import { MainRuntime } from '@teambit/cli';
-import { Component, ComponentAspect } from '@teambit/component';
+import { Component } from '@teambit/component';
 import { DependencyResolverAspect, DependencyResolverMain } from '@teambit/dependency-resolver';
 import { EnvsAspect, EnvsMain } from '@teambit/envs';
 import { GraphqlAspect, GraphqlMain } from '@teambit/graphql';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import { BrowserRuntime } from './browser-runtime';
 import { BundlerAspect } from './bundler.aspect';
 import { ComponentServer } from './component-server';
+import { NewDevServersCreatedEvent } from './events';
 import { BundlerContext } from './bundler-context';
 import { devServerSchema } from './dev-server.graphql';
 import { DevServerService } from './dev-server.service';
 import { BundlerService } from './bundler.service';
 import { DevServer } from './dev-server';
 
 export type DevServerTransformer = (devServer: DevServer, { envId }: { envId: string }) => DevServer;
-
+export type OnPreDevServerCreated = (newCompsWithoutDevServer: Component[]) => Promise<void>;
 export type BrowserRuntimeSlot = SlotRegistry<BrowserRuntime>;
 export type DevServerTransformerSlot = SlotRegistry<DevServerTransformer>;
+export type OnPreDevServerCreatedSlot = SlotRegistry<OnPreDevServerCreated>;
 
 export type BundlerConfig = {
   dedicatedEnvDevServers: string[];
@@ -27,6 +29,11 @@ export type BundlerConfig = {
  * bundler extension.
  */
 export class BundlerMain {
+  /**
+   * component servers.
+   */
+  private _componentServers: ComponentServer[] = [];
+
   constructor(
     readonly config: BundlerConfig,
     /**
@@ -52,25 +59,49 @@ export class BundlerMain {
     /**
      * dev server transformer slot.
      */
-    private devServerTransformerSlot: DevServerTransformerSlot
-  ) {}
+    private devServerTransformerSlot: DevServerTransformerSlot,
 
-  /**
-   * load all given components in corresponding dev servers.
-   * @param components defaults to all components in the workspace.
-   */
-  async devServer(components: Component[]): Promise<ComponentServer[]> {
+    /**
+     * pre-dev-server operation slot.
+     */
+    private onPreDevServerCreatedSlot: OnPreDevServerCreatedSlot,
+
+    private graphql: GraphqlMain,
+  ) {
+  }
+
+  async addNewDevServers(newCompsWithoutDevServers: Component[]): Promise<ComponentServer[]> {
+    const newComponents = newCompsWithoutDevServers.filter((component) => {
+      return !this.getComponentServer(component);
+    });
+
+    if (newComponents.length === 0) {
+      return [];
+    }
+
+    await Promise.all(
+      this.onPreDevServerCreatedSlot.values().map(subscriberFn => subscriberFn(newComponents))
+    );
+
+    return this.devServer(newComponents, { configureProxy: true });
+  }
+
+  async devServer(components: Component[], opts: { configureProxy?: boolean } = {}): Promise<ComponentServer[]> {
     const envRuntime = await this.envs.createEnvironment(components);
-    // TODO: this must be refactored away from here. this logic should be in the Preview.
-    // @ts-ignore
-    const servers: ComponentServer[] = await envRuntime.runOnce<ComponentServer[]>(this.devService, {
+    const servers: ComponentServer[] = await envRuntime.runOnce<ComponentServer>(this.devService, {
       dedicatedEnvDevServers: this.config.dedicatedEnvDevServers,
     });
+    if (opts.configureProxy) {
+      this.pubsub.pub(BundlerAspect.id, new NewDevServersCreatedEvent(
+        servers,
+        Date.now(),
+        this.graphql,
+        true
+      ));
+    }
     this._componentServers = servers;
-
     this.indexByComponent();
-
-    return this._componentServers;
+    return servers;
   }
 
   /**
@@ -84,13 +115,12 @@ export class BundlerMain {
       (componentServer) =>
         componentServer.context.relatedContexts.includes(envId) || componentServer.context.id === envId
     );
-
     return server;
   }
 
   /**
    * compute entry files for bundling components in a given execution context.
-   */
+  */
   async computeEntries(context: BundlerContext) {
     const slotEntries = await Promise.all(
       this.runtimeSlot.values().map(async (browserRuntime) => browserRuntime.entry(context))
@@ -126,34 +156,69 @@ export class BundlerMain {
   }
 
   /**
-   * component servers.
+   * register a new pre-dev-server compiler.
+   * @param onPreDevServerCreated
    */
-  private _componentServers: null | ComponentServer[];
+  registerOnPreDevServerCreated(onPreDevServerCreated: OnPreDevServerCreated) {
+    this.onPreDevServerCreatedSlot.register(onPreDevServerCreated);
+    return this;
+  }
 
-  private indexByComponent() {}
+  private indexByComponent() { }
 
-  static slots = [Slot.withType<BrowserRuntime>(), Slot.withType<DevServerTransformerSlot>()];
+  static slots = [
+    Slot.withType<BrowserRuntime>(),
+    Slot.withType<DevServerTransformerSlot>(),
+    Slot.withType<OnPreDevServerCreatedSlot>()
+  ];
 
   static runtime = MainRuntime;
-  static dependencies = [PubsubAspect, EnvsAspect, GraphqlAspect, DependencyResolverAspect, ComponentAspect];
+  static dependencies = [
+    PubsubAspect,
+    EnvsAspect,
+    GraphqlAspect,
+    DependencyResolverAspect,
+  ];
 
   static defaultConfig = {
     dedicatedEnvDevServers: [],
   };
 
   static async provider(
-    [pubsub, envs, graphql, dependencyResolver]: [PubsubMain, EnvsMain, GraphqlMain, DependencyResolverMain],
+    [pubsub, envs, graphql, dependencyResolver]:
+      [
+        PubsubMain,
+        EnvsMain,
+        GraphqlMain,
+        DependencyResolverMain,
+      ],
     config,
-    [runtimeSlot, devServerTransformerSlot]: [BrowserRuntimeSlot, DevServerTransformerSlot]
+    [runtimeSlot,
+      devServerTransformerSlot,
+      onPreDevServerCreatedSlot
+    ]: [
+        BrowserRuntimeSlot,
+        DevServerTransformerSlot,
+        OnPreDevServerCreatedSlot
+      ]
   ) {
+
     const devServerService = new DevServerService(pubsub, dependencyResolver, runtimeSlot, devServerTransformerSlot);
-    const bundler = new BundlerMain(config, pubsub, envs, devServerService, runtimeSlot, devServerTransformerSlot);
+    const bundler = new BundlerMain(
+      config,
+      pubsub,
+      envs,
+      devServerService,
+      runtimeSlot,
+      devServerTransformerSlot,
+      onPreDevServerCreatedSlot,
+      graphql,
+    );
     envs.registerService(devServerService, new BundlerService());
-
-    graphql.register(() => devServerSchema(bundler));
+    graphql.register(() => devServerSchema(bundler, graphql));
 
     return bundler;
   }
 }
 
-BundlerAspect.addRuntime(BundlerMain);
+BundlerAspect.addRuntime(BundlerMain);

scopes/compilation/bundler/component-server.ts

@@ -1,9 +1,8 @@
 import { Component } from '@teambit/component';
 import { ExecutionContext } from '@teambit/envs';
 import { PubsubMain } from '@teambit/pubsub';
-
 import { AddressInfo } from 'net';
-
+import { Server } from 'http';
 import { DevServer } from './dev-server';
 import { BindError } from './exceptions';
 import { ComponentsServerStartedEvent } from './events';
@@ -33,10 +32,19 @@ export class ComponentServer {
      * env dev server.
      */
     readonly devServer: DevServer
-  ) {}
+  ) { }
 
   hostname: string | undefined;
+  private _server?: Server;
+  private _isRestarting: boolean = false;
+
+  get server() {
+    return this._server;
+  }
 
+  get envId() {
+    return this.context.envRuntime.id;
+  };
   /**
    * determine whether component server contains a component.
    */
@@ -49,15 +57,55 @@ export class ComponentServer {
   }
 
   _port: number;
-  async listen() {
-    const port = await selectPort(this.portRange);
+
+  async listen(specificPort?: number) {
+    const port = specificPort || await selectPort(this.portRange);
     this._port = port;
-    const server = await this.devServer.listen(port);
-    const address = server.address();
+    this._server = await this.devServer.listen(port);
+    const address = this._server.address();
     const hostname = this.getHostname(address);
     if (!address) throw new BindError();
     this.hostname = hostname;
-    this.pubsub.pub(BundlerAspect.id, this.createComponentsServerStartedEvent(server, this.context, hostname, port));
+
+    this.pubsub.pub(
+      BundlerAspect.id,
+      this.createComponentsServerStartedEvent(this, this.context, hostname, port)
+    );
+  }
+
+  async close(): Promise<void> {
+    if (!this.server) return;
+
+    return new Promise<void>((resolve, reject) => {
+      this.server?.close((err) => {
+        if (err) {
+          reject(err);
+        } else {
+          this._server = undefined;
+          this.hostname = undefined;
+          resolve();
+        }
+      });
+    });
+  }
+
+  async restart(useNewPort = false): Promise<void> {
+    if (this._isRestarting) {
+      // add a logger here once we start using this API
+      return;
+    }
+    this._isRestarting = true;
+    try {
+      await this.close();
+      await this.listen(useNewPort ? undefined : this._port);
+    }
+    catch (error) {
+      if (!this.errors) this.errors = [];
+      this.errors.push(error as Error);
+    }
+    finally {
+      this._isRestarting = false;
+    }
   }
 
   private getHostname(address: string | AddressInfo | null) {
@@ -72,11 +120,11 @@ export class ComponentServer {
     return hostname;
   }
 
-  private onChange() {}
+  private onChange() { }
 
   private createComponentsServerStartedEvent: (
-    DevServer,
-    ExecutionContext,
+    componentsServer,
+    context,
     string,
     number
   ) => ComponentsServerStartedEvent = (componentsServer, context, hostname, port) => {