From 03c61d9682f8354de107380efd3908283e8ad148 Mon Sep 17 00:00:00 2001 From: Olivier Combe Date: Thu, 25 Jan 2024 11:07:30 +0100 Subject: [PATCH] fix: circular dependencies --- .../devkit/preview/preview/angular-preview.ts | 43 +++++++++++++++---- angular/devkit/webpack/ng-webpack-bundler.ts | 14 +++--- .../devkit/webpack/ng-webpack-dev-server.ts | 14 +++--- 3 files changed, 47 insertions(+), 24 deletions(-) diff --git a/angular/devkit/preview/preview/angular-preview.ts b/angular/devkit/preview/preview/angular-preview.ts index 68016da..50850b4 100644 --- a/angular/devkit/preview/preview/angular-preview.ts +++ b/angular/devkit/preview/preview/angular-preview.ts @@ -2,19 +2,23 @@ import { AngularEnvOptions, ApplicationOptions, BrowserOptions, - DevServerOptions + DevServerOptions, + getWorkspace, + isAppBuildContext, + isAppDevContext } from '@bitdev/angular.dev-services.common'; +import { NgWebpackBundler, NgWebpackDevServer } from '@bitdev/angular.dev-services.webpack'; import { AppContext } from '@teambit/application'; import { Bundler, BundlerContext, DevServer, DevServerContext } from '@teambit/bundler'; -import { AsyncEnvHandler, EnvHandler } from '@teambit/envs'; +import { AsyncEnvHandler, EnvContext, EnvHandler } from '@teambit/envs'; import { EnvPreviewConfig, Preview } from '@teambit/preview'; import { WebpackConfigTransformer, WebpackConfigWithDevServer } from '@teambit/webpack'; +import { Workspace } from '@teambit/workspace'; import objectHash from 'object-hash'; import { join, resolve } from 'path'; import type { Configuration } from 'webpack'; // Make sure bit recognizes the dependencies import 'webpack-dev-server'; -import { NgWebpackBundler, NgWebpackDevServer } from '@bitdev/angular.dev-services.webpack'; export type DevServerProvider = ( context: DevServerContext | (DevServerContext & AppContext), @@ -109,33 +113,51 @@ export class AngularPreview implements Preview { private previewConfig: EnvPreviewConfig = {}, private hostDependencies?: string[], private sourceRoot?: string, - ) {} + private workspace?: Workspace + ) { + } getDevServer(context: DevServerContext): AsyncEnvHandler { + let appRootPath: string; + if (isAppDevContext(context)) { // When you use `bit run ` + appRootPath = this.workspace?.componentDir(context.appComponent.id, { + ignoreVersion: true + }) || ''; + } else { // When you use `bit start` + appRootPath = getPreviewRootPath(); + } return NgWebpackDevServer.from({ angularOptions: this.angularServeOptions, devServerContext: context, ngEnvOptions: this.ngEnvOptions, transformers: this.webpackServeTransformers, sourceRoot: this.sourceRoot, + appRootPath }); } getDevEnvId() { const objToHash = { webpack: this.ngEnvOptions.webpackModulePath, - webpackDevServer: this.ngEnvOptions.webpackDevServerModulePath, + webpackDevServer: this.ngEnvOptions.webpackDevServerModulePath }; return objectHash(objToHash); } getBundler(context: BundlerContext): AsyncEnvHandler { + let appRootPath: string; + if (isAppBuildContext(context)) { // When you use `bit build` for an actual angular app + appRootPath = context.capsule.path; + } else { // When you use `bit build` for the preview app + appRootPath = getPreviewRootPath(); + } return NgWebpackBundler.from({ angularOptions: this.angularBuildOptions, bundlerContext: context, ngEnvOptions: this.ngEnvOptions, transformers: this.webpackBuildTransformers, sourceRoot: this.sourceRoot, + appRootPath }); } @@ -150,7 +172,7 @@ export class AngularPreview implements Preview { '@teambit/mdx.ui.mdx-scope-context', '@mdx-js/react', 'react', - 'react-dom', + 'react-dom' ] ); } @@ -163,18 +185,20 @@ export class AngularPreview implements Preview { return this.docsTemplatePath; } - getPreviewConfig(): EnvPreviewConfig & {isScaling ?: boolean} { + getPreviewConfig(): EnvPreviewConfig & { isScaling?: boolean } { return { strategyName: 'env', // splitComponentBundle: true, // isScaling: true, - ...this.previewConfig, + ...this.previewConfig }; } static from(options: AngularPreviewOptions): EnvHandler { const name = options.name || 'angular-preview'; - return () => { + return (context: EnvContext) => { + const workspace = getWorkspace(context); + return new AngularPreview( name, options.ngEnvOptions, @@ -187,6 +211,7 @@ export class AngularPreview implements Preview { options.previewConfig, options.hostDependencies, options.sourceRoot, + workspace ); }; } diff --git a/angular/devkit/webpack/ng-webpack-bundler.ts b/angular/devkit/webpack/ng-webpack-bundler.ts index 210920a..b716a48 100644 --- a/angular/devkit/webpack/ng-webpack-bundler.ts +++ b/angular/devkit/webpack/ng-webpack-bundler.ts @@ -9,7 +9,6 @@ import { isAppBuildContext, writeTsconfig } from '@bitdev/angular.dev-services.common'; -import { getPreviewRootPath } from '@bitdev/angular.dev-services.preview.preview'; import { AppBuildContext, ApplicationAspect, ApplicationMain } from '@teambit/application'; import { BundlerContext } from '@teambit/bundler'; import { DevFilesAspect, DevFilesMain } from '@teambit/dev-files'; @@ -48,7 +47,10 @@ export type NgWebpackBundlerOptions = { ngEnvOptions: AngularEnvOptions; + appRootPath: string; + sourceRoot?: string; + /** * array of transformers to apply on webpack config. */ @@ -72,7 +74,7 @@ export class NgWebpackBundler { const webpackBuildConfigFactory: WebpackBuildConfigFactory = options.ngEnvOptions.webpackConfigFactory; const name = options.name || 'ng-webpack-bundler'; const logger = context.createLogger(name); - const {bundlerContext} = options; + const { bundlerContext } = options; const workspace = getWorkspace(context); const pkg = context.getAspect(PkgAspect.id); const application = context.getAspect(ApplicationAspect.id); @@ -81,7 +83,7 @@ export class NgWebpackBundler { const devFilesMain = context.getAspect(DevFilesAspect.id); let tempFolder: string; - const idName = `bitdev.angular/${name}`; + const idName = `bitdev.angular/${ name }`; if (workspace) { tempFolder = workspace.getTempDir(idName); } else { @@ -92,12 +94,10 @@ export class NgWebpackBundler { let tsconfigPath: string; let plugins: WebpackPluginInstance[] = []; if (isAppBuildContext(bundlerContext)) { // When you use `bit build` for an actual angular app - appRootPath = bundlerContext.capsule.path; - tsconfigPath = options?.angularOptions?.tsConfig ?? posix.join(appRootPath, 'tsconfig.app.json'); + tsconfigPath = options?.angularOptions?.tsConfig ?? posix.join(options.appRootPath, 'tsconfig.app.json'); plugins = [new StatsLoggerPlugin()]; } else { // When you use `bit build` for the preview app - appRootPath = getPreviewRootPath(); - tsconfigPath = writeTsconfig(bundlerContext, appRootPath, tempFolder, application, pkg, devFilesMain, options?.angularOptions?.tsConfig, workspace); + tsconfigPath = writeTsconfig(bundlerContext, options.appRootPath, tempFolder, application, pkg, devFilesMain, options?.angularOptions?.tsConfig, workspace); if (options?.angularOptions?.tsConfig) { options.angularOptions.tsConfig = tsconfigPath; } diff --git a/angular/devkit/webpack/ng-webpack-dev-server.ts b/angular/devkit/webpack/ng-webpack-dev-server.ts index fd922fe..bc9196c 100644 --- a/angular/devkit/webpack/ng-webpack-dev-server.ts +++ b/angular/devkit/webpack/ng-webpack-dev-server.ts @@ -9,7 +9,6 @@ import { isAppDevContext, writeTsconfig } from '@bitdev/angular.dev-services.common'; -import { getPreviewRootPath } from '@bitdev/angular.dev-services.preview.preview'; import { ApplicationAspect, ApplicationMain } from '@teambit/application'; import { DevServer, DevServerContext } from '@teambit/bundler'; import { Component } from '@teambit/component'; @@ -48,7 +47,10 @@ export type WebpackDevServerOptions = { ngEnvOptions: AngularEnvOptions; + appRootPath: string; + sourceRoot?: string; + /** * array of transformers to apply on webpack config. */ @@ -93,14 +95,10 @@ export class NgWebpackDevServer { let tsconfigPath: string; let isApp = false; if (isAppDevContext(devServerContext)) { // When you use `bit run ` - appRootPath = workspace?.componentDir(devServerContext.appComponent.id, { - ignoreVersion: true - }) || ''; - tsconfigPath = options?.angularOptions?.tsConfig ?? posix.join(appRootPath, 'tsconfig.app.json'); + tsconfigPath = options?.angularOptions?.tsConfig ?? posix.join(options.appRootPath, 'tsconfig.app.json'); isApp = true; } else { // When you use `bit start` - appRootPath = getPreviewRootPath(); - tsconfigPath = writeTsconfig(devServerContext, appRootPath, tempFolder, application, pkg, devFilesMain, options?.angularOptions?.tsConfig, workspace); + tsconfigPath = writeTsconfig(devServerContext, options.appRootPath, tempFolder, application, pkg, devFilesMain, options?.angularOptions?.tsConfig, workspace); options.angularOptions = options.angularOptions || {}; if (options?.angularOptions?.tsConfig) { options.angularOptions.tsConfig = tsconfigPath; @@ -135,7 +133,7 @@ export class NgWebpackDevServer { publicPath: devServerContext.publicPath, publicRoot: devServerContext.rootPath, pubsub: webpackMain.pubsub, - rootPath: appRootPath, + rootPath: options.appRootPath, setup: BundlerSetup.Serve, sourceRoot: options.sourceRoot ?? 'src', tempFolder,