feat: add vite dev server for apps

.bitmap

@@ -10,144 +10,175 @@
 
 {
     "angular-env": {
+        "name": "angular-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/envs/angular-env"
     },
     "app-types/angular-app-type": {
+        "name": "app-types/angular-app-type",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/app-types/angular-app-type"
     },
     "dev-services/common": {
+        "name": "dev-services/common",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/common"
     },
     "dev-services/compiler/elements": {
+        "name": "dev-services/compiler/elements",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/compiler/elements"
     },
     "dev-services/compiler/multi-compiler": {
+        "name": "dev-services/compiler/multi-compiler",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/compiler/multi-compiler"
     },
     "dev-services/compiler/ng-packagr": {
+        "name": "dev-services/compiler/ng-packagr",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/compiler/ng-packagr"
     },
     "dev-services/linter/eslint": {
+        "name": "dev-services/linter/eslint",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.js",
         "rootDir": "angular/devkit/linter/eslint"
     },
     "dev-services/ngcc": {
+        "name": "dev-services/ngcc",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/ngcc"
     },
     "dev-services/preview/mounter": {
+        "name": "dev-services/preview/mounter",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/preview/mounter"
     },
     "dev-services/preview/preview": {
+        "name": "dev-services/preview/preview",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/preview/preview"
     },
     "dev-services/preview/runtime": {
+        "name": "dev-services/preview/runtime",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/preview/runtime"
     },
+    "dev-services/vite": {
+        "name": "dev-services/vite",
+        "scope": "",
+        "version": "",
+        "mainFile": "index.ts",
+        "rootDir": "angular/devkit/vite"
+    },
     "dev-services/webpack": {
+        "name": "dev-services/webpack",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/devkit/webpack"
     },
     "envs/angular-v12-env": {
+        "name": "envs/angular-v12-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/envs/angular-v12-env"
     },
     "envs/angular-v13-env": {
+        "name": "envs/angular-v13-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/envs/angular-v13-env"
     },
     "envs/angular-v14-env": {
+        "name": "envs/angular-v14-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/envs/angular-v14-env"
     },
     "envs/angular-v15-env": {
+        "name": "envs/angular-v15-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/envs/angular-v15-env"
     },
     "envs/angular-v16-env": {
+        "name": "envs/angular-v16-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/envs/angular-v16-env"
     },
     "envs/base-env": {
+        "name": "envs/base-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/envs/base-env"
     },
     "examples/my-angular-env": {
+        "name": "examples/my-angular-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/examples/my-angular-env"
     },
     "examples/my-angular-v12-env": {
+        "name": "examples/my-angular-v12-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/examples/my-angular-v12-env"
     },
     "examples/my-angular-v13-env": {
+        "name": "examples/my-angular-v13-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/examples/my-angular-v13-env"
     },
     "examples/my-angular-v14-env": {
+        "name": "examples/my-angular-v14-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/examples/my-angular-v14-env"
     },
     "examples/my-angular-v15-env": {
+        "name": "examples/my-angular-v15-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/examples/my-angular-v15-env"
     },
     "examples/my-angular-v16-env": {
+        "name": "examples/my-angular-v16-env",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
@@ -160,16 +191,18 @@
         "rootDir": "angular/readme"
     },*/
     "templates/generators": {
+        "name": "templates/generators",
         "scope": "bitdev.angular",
         "version": "1.0.0",
         "mainFile": "index.ts",
         "rootDir": "angular/templates/generators"
     },
     "templates/starters": {
+        "name": "templates/starters",
         "scope": "bitdev.angular",
         "version": "1.0.1",
         "mainFile": "index.ts",
         "rootDir": "angular/templates/starters"
     },
-    "$schema-version": "16.0.0"
+    "$schema-version": "17.0.0"
 }

angular/app-types/angular-app-type/angular-app-options.ts

@@ -18,7 +18,7 @@ export type AngularAppOptions = {
   /**
    * Instance of bundler to use. default is Webpack.
    */
-  bundler?: Bundler;
+  bundler?: Bundler | string;
 
   /**
    * Set webpack build transformers

angular/app-types/angular-app-type/angular.app-type.ts

@@ -1,11 +1,10 @@
-import { GenericAngularEnv, getWorkspace } from '@bitdev/angular.dev-services.common';
+import { GenericAngularEnv, getWorkspace, NG_APP_NAME } from '@bitdev/angular.dev-services.common';
 import { Application, ApplicationType } from '@teambit/application';
 import { DependencyResolverAspect, DependencyResolverMain } from '@teambit/dependency-resolver';
 import { EnvContext, EnvHandler } from '@teambit/envs';
 import { Workspace } from '@teambit/workspace';
 import { AngularAppOptions } from './angular-app-options';
 import { AngularApp } from './angular.application';
-import { NG_APP_NAME } from './utils';
 
 interface AngularAppTypeOptions {
   name?: string;

angular/app-types/angular-app-type/angular.application.ts

@@ -55,10 +55,10 @@ export class AngularApp implements Application {
     return join(artifactsDir, this.name);
   }
 
-  private getDevServerContext(context: AppContext): DevServerContext {
+  private getDevServerContext(context: AppContext, appRootPath: string): DevServerContext {
     return Object.assign(cloneDeep(context), {
       entry: [],
-      rootPath: '',
+      rootPath: appRootPath,
       publicPath: `${this.publicDir}/${this.options.name}`,
       title: this.options.name
     });
@@ -80,28 +80,23 @@ export class AngularApp implements Application {
     });
   }
 
-  private async generateTsConfig(appRootPath: string, tsconfigPath: string): Promise<string> {
+  private generateTsConfig(bitCmps: Component[], appRootPath: string, tsconfigPath: string): string {
     const tsconfigJSON = readConfigFile(tsconfigPath, sys.readFile).config;
 
     // Add the paths to tsconfig to remap bit components to local folders
     tsconfigJSON.compilerOptions.paths = tsconfigJSON.compilerOptions.paths || {};
-    if (this.workspace) {
-      const workspaceCmpsIDs = await this.workspace.listIds();
-      const bitCmps = await this.workspace.getMany(workspaceCmpsIDs);
-      bitCmps.forEach((dep: Component) => {
-          let componentDir = this.workspace?.componentDir(dep.id, {
-            ignoreScopeAndVersion: true,
-            ignoreVersion: true
-          });
-          if (componentDir) {
-            componentDir = pathNormalizeToLinux(componentDir);
-            const pkgName = this.depsResolver.getPackageName(dep);
-            // TODO we should find a way to use the real entry file based on the component config because people can change it
-            tsconfigJSON.compilerOptions.paths[pkgName] = [`${componentDir}/public-api.ts`, `${componentDir}`];
-            tsconfigJSON.compilerOptions.paths[`${pkgName}/*`] = [`${componentDir}/*`];
-          }
-      });
-    }
+    bitCmps.forEach((dep: Component) => {
+        let componentDir = this.workspace?.componentDir(dep.id, {
+          ignoreVersion: true
+        });
+        if (componentDir) {
+          componentDir = pathNormalizeToLinux(componentDir);
+          const pkgName = this.depsResolver.getPackageName(dep);
+          // TODO we should find a way to use the real entry file based on the component config because people can change it
+          tsconfigJSON.compilerOptions.paths[pkgName] = [`${componentDir}/public-api.ts`, `${componentDir}`];
+          tsconfigJSON.compilerOptions.paths[`${pkgName}/*`] = [`${componentDir}/*`];
+        }
+    });
 
     const tsconfigContent = expandIncludeExclude(tsconfigJSON, this.tsconfigPath, [appRootPath]);
     const hash = objectHash(tsconfigContent);
@@ -116,13 +111,17 @@ export class AngularApp implements Application {
   }
 
   async getDevServer(context: AppContext): Promise<DevServer> {
-    const appRootPath = this.workspace?.componentDir(context.appComponent.id, {
-      ignoreScopeAndVersion: true,
+    if(!this.workspace) {
+      throw new Error('workspace is not defined');
+    }
+    const appRootPath = this.workspace.componentDir(context.appComponent.id, {
       ignoreVersion: true
     }) || '';
     const tsconfigPath = join(appRootPath, this.options.angularServeOptions.tsConfig);
-    await this.generateTsConfig(appRootPath, tsconfigPath);
-    const devServerContext = this.getDevServerContext(context);
+    const workspaceCmpsIDs = await this.workspace.listIds();
+    const bitCmps = await this.workspace.getMany(workspaceCmpsIDs);
+    this.generateTsConfig(bitCmps, appRootPath, tsconfigPath);
+    const devServerContext = this.getDevServerContext(context, this.options.bundler === 'vite' ? '' : appRootPath);
     const preview = this.preview(this.envContext);
 
     return preview.getDevServer(devServerContext)(this.envContext);
@@ -136,16 +135,20 @@ export class AngularApp implements Application {
   }
 
   async getBundler(context: AppBuildContext): Promise<Bundler> {
-    if (this.options.bundler) {
-      return this.options.bundler;
+    if (typeof this.options.bundler !== 'string') {
+      return this.options.bundler as Bundler;
+    }
+
+    if (this.options.bundler === 'vite') {
+      throw new Error('implement vite bundler');
     }
 
     const { capsule, artifactsDir } = context;
     const publicDir = this.getPublicDir(artifactsDir);
     const outputPath = pathNormalizeToLinux(join(capsule.path, publicDir));
     const appRootPath = context.capsule.path;
     const tsconfigPath = join(appRootPath, this.options.angularBuildOptions.tsConfig);
-    await this.generateTsConfig(appRootPath, tsconfigPath);
+    this.generateTsConfig([capsule?.component], appRootPath, tsconfigPath);
     const preview = this.preview(this.envContext) as AngularPreview;
 
     const bundlerContext: BundlerContext = Object.assign(cloneDeep(context), {

angular/app-types/angular-app-type/index.ts

@@ -1,4 +1,4 @@
 export { AngularAppType } from './angular.app-type';
 export type { AngularDeployContext } from './deploy-context';
 export type { AngularAppOptions } from './angular-app-options';
-export { NG_APP_NAME, NG_APP_PATTERN, componentIsApp } from './utils';
+export { NG_APP_NAME, NG_APP_PATTERN } from '@bitdev/angular.dev-services.common';

angular/app-types/angular-app-type/utils.ts

@@ -1,20 +1,7 @@
-import { ApplicationMain } from "@teambit/application";
-import { Component } from "@teambit/component";
 import { pathNormalizeToLinux } from "@teambit/legacy/dist/utils";
 import { flatten } from 'lodash';
 import { relative, dirname } from 'path';
 
-export const NG_APP_NAME = 'ng-app';
-export const NG_APP_PATTERN = `*.${NG_APP_NAME}.*`;
-
-export function componentIsApp(component: Component, application: ApplicationMain): boolean {
-  // We first check if the component is registered as an app
-  return !!application.listAppsById(component.id)
-    // If it returns false, it might be because the app has never been compiled and has not been detected as an app yet
-    // In this case we check all the existing files for the ng app pattern
-    || component.filesystem.byGlob([NG_APP_PATTERN]).length > 0;
-}
-
 /**
  * Takes a tsconfig.json file, a list of component directories, and returns a new tsconfig.json file with the include
  * and exclude properties expanded to include all the component directories

angular/devkit/common/env-options.ts

@@ -1,4 +1,4 @@
-import { WebpackConfigWithDevServer } from "@teambit/webpack";
+import { WebpackConfigWithDevServer } from '@teambit/webpack';
 
 export type WebpackConfigFactory = (opts: any) => Promise<WebpackConfigWithDevServer>;
 
@@ -14,7 +14,6 @@ export type AngularEnvOptions = {
    * Whether ngcc should be run as part of postinstall / compile / build ...
    */
   useNgcc?: boolean;
-
   jestConfigPath: string;
   jestModulePath: string;
   ngPackagrModulePath: string;
@@ -23,4 +22,17 @@ export type AngularEnvOptions = {
   webpackConfigFactory?: WebpackConfigFactory;
   webpackDevServerModulePath?: string;
   webpackModulePath?: string;
+  /**
+   * The dev server to use: webpack or vite.
+   * Vite only works for apps, not preview yet.
+   * @default 'webpack'
+   */
+  devServer?: 'webpack' | 'vite';
+  /**
+   * The bundler to use: webpack or vite.
+   * Vite only works for apps, not preview yet.
+   * @default 'webpack'
+   */
+  // TODO: enable this once we have a working vite bundler
+  // bundler?: 'webpack' | 'vite';
 };

angular/devkit/common/index.ts

@@ -1,4 +1,4 @@
-export type { AngularEnvOptions } from './env-options';
+export type { AngularEnvOptions, WebpackConfigFactory } from './env-options';
 export { GenericAngularEnv, DevServerOptions, BrowserOptions } from './generic-angular-env';
 export * from './utils';
 export { AngularComponentTemplateOptions } from './templates';