From 163acf075ebd7c5e6905abe4a66bf5890221d63f Mon Sep 17 00:00:00 2001 From: Olivier Combe Date: Mon, 19 Feb 2024 14:38:00 +0100 Subject: [PATCH] fix: various app templates & custom envs typos/links/issues --- .../app-types/angular-app-type/component.json | 3 +- angular/envs/angular-env/env.jsonc | 2 +- angular/envs/base-env/preview/mounter.ts | 4 +-- angular/examples/my-angular-env/env.jsonc | 2 +- .../my-angular-env/my-angular-env.bit-env.ts | 4 +-- .../my-angular-env/my-angular-env.docs.mdx | 4 +-- .../my-angular-env/preview/mounter.ts | 4 +-- .../my-angular-v13-env.bit-env.ts | 2 +- .../my-angular-v13-env/preview/mounter.ts | 4 +-- .../my-angular-v14-env.bit-env.ts | 2 +- .../my-angular-v14-env/preview/mounter.ts | 4 +-- .../my-angular-v15-env.bit-env.ts | 2 +- .../my-angular-v15-env/preview/mounter.ts | 4 +-- .../my-angular-v16-env.bit-env.ts | 2 +- .../my-angular-v16-env/preview/mounter.ts | 4 +-- .../my-angular-v17-env.bit-env.ts | 2 +- .../my-angular-v17-env/preview/mounter.ts | 4 +-- angular/templates/generators/ng-app/index.ts | 31 ++++++++++++++++--- .../ng-app/template-files/bit-app.ts | 4 +-- .../ng-env/files/preview/mounter.ts | 8 ++--- 20 files changed, 58 insertions(+), 38 deletions(-) diff --git a/angular/app-types/angular-app-type/component.json b/angular/app-types/angular-app-type/component.json index 56f5f393..a11f883b 100644 --- a/angular/app-types/angular-app-type/component.json +++ b/angular/app-types/angular-app-type/component.json @@ -12,8 +12,7 @@ "nitropack": "^2.8.0", "@angular-devkit/build-angular": "-", "@angular/cli": "-", - "typescript": "-", - "#alias": "-" + "typescript": "-" }, "peerDependencies": { "@angular-devkit/build-angular": ">= 0.0.1", diff --git a/angular/envs/angular-env/env.jsonc b/angular/envs/angular-env/env.jsonc index d0cf9158..4aecd9ec 100644 --- a/angular/envs/angular-env/env.jsonc +++ b/angular/envs/angular-env/env.jsonc @@ -116,6 +116,6 @@ "patterns": { "compositions": ["**/*.composition.*", "**/*.preview.*"], "docs": ["**/*.docs.*"], - "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"], + "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"] } } diff --git a/angular/envs/base-env/preview/mounter.ts b/angular/envs/base-env/preview/mounter.ts index a682a523..af297c87 100644 --- a/angular/envs/base-env/preview/mounter.ts +++ b/angular/envs/base-env/preview/mounter.ts @@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -23,6 +23,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperComponent); diff --git a/angular/examples/my-angular-env/env.jsonc b/angular/examples/my-angular-env/env.jsonc index d0cf9158..4aecd9ec 100644 --- a/angular/examples/my-angular-env/env.jsonc +++ b/angular/examples/my-angular-env/env.jsonc @@ -116,6 +116,6 @@ "patterns": { "compositions": ["**/*.composition.*", "**/*.preview.*"], "docs": ["**/*.docs.*"], - "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"], + "tests": ["**/*.spec.*", "**/*.test.*", "**/*.cy.*"] } } diff --git a/angular/examples/my-angular-env/my-angular-env.bit-env.ts b/angular/examples/my-angular-env/my-angular-env.bit-env.ts index a957ee2e..275b0eba 100644 --- a/angular/examples/my-angular-env/my-angular-env.bit-env.ts +++ b/angular/examples/my-angular-env/my-angular-env.bit-env.ts @@ -44,7 +44,7 @@ export class MyAngularEnv extends AngularEnv { getLinterConfig() { return { - tsconfig: require.resolve('@bitdev/angular.dev-services.linter.eslint/config/tsconfig.json'), + tsconfig: require.resolve('./config/tsconfig.json'), eslint: ESLintLib, configPath: require.resolve('./config/eslintrc'), // resolve all plugins from the angular environment. @@ -64,7 +64,7 @@ export class MyAngularEnv extends AngularEnv { tsconfigPath: require.resolve('./config/tsconfig.json'), }); } - return ngMultiCompiler; + return ngMultiCompiler!; } /** diff --git a/angular/examples/my-angular-env/my-angular-env.docs.mdx b/angular/examples/my-angular-env/my-angular-env.docs.mdx index 50db9862..0f0b36bf 100644 --- a/angular/examples/my-angular-env/my-angular-env.docs.mdx +++ b/angular/examples/my-angular-env/my-angular-env.docs.mdx @@ -20,7 +20,7 @@ import { EnvOverview } from '@teambit/envs.docs.env-overview-template'; { name: 'Jest', configFiles: [ - 'https://bit.cloud/bitdev/angular/envs/angular-v16/~code/jest/jest.config.ts', + 'https://bit.cloud/bitdev/angular/envs/angular-v17/~code/jest/jest.config.ts', ], }, { @@ -52,7 +52,7 @@ import { EnvOverview } from '@teambit/envs.docs.env-overview-template'; { name: 'Jest', configFiles: [ - 'https://bit.cloud/bitdev/angular/envs/angular-v16/~code/jest/jest.config.ts', + 'https://bit.cloud/bitdev/angular/envs/angular-v17/~code/jest/jest.config.ts', ], }, ], diff --git a/angular/examples/my-angular-env/preview/mounter.ts b/angular/examples/my-angular-env/preview/mounter.ts index 89494dfe..6831d115 100644 --- a/angular/examples/my-angular-env/preview/mounter.ts +++ b/angular/examples/my-angular-env/preview/mounter.ts @@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/my-angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/my-angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperComponent); diff --git a/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts b/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts index aaa25f0f..26dcae75 100644 --- a/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts +++ b/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts @@ -64,7 +64,7 @@ export class MyAngularV13Env extends AngularV13Env { tsconfigPath: require.resolve('./config/tsconfig.json'), }); } - return ngMultiCompiler; + return ngMultiCompiler!; } /** diff --git a/angular/examples/my-angular-v13-env/preview/mounter.ts b/angular/examples/my-angular-v13-env/preview/mounter.ts index fcd0e9b5..14114edf 100644 --- a/angular/examples/my-angular-v13-env/preview/mounter.ts +++ b/angular/examples/my-angular-v13-env/preview/mounter.ts @@ -6,7 +6,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -29,6 +29,6 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperModule, {wrapperSelector: '#wrapper-host'}); diff --git a/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts b/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts index 06b8a439..af6464b1 100644 --- a/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts +++ b/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts @@ -64,7 +64,7 @@ export class MyAngularV14Env extends AngularV14Env { tsconfigPath: require.resolve('./config/tsconfig.json'), }); } - return ngMultiCompiler; + return ngMultiCompiler!; } /** diff --git a/angular/examples/my-angular-v14-env/preview/mounter.ts b/angular/examples/my-angular-v14-env/preview/mounter.ts index 46e6d70b..6831d115 100644 --- a/angular/examples/my-angular-v14-env/preview/mounter.ts +++ b/angular/examples/my-angular-v14-env/preview/mounter.ts @@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperComponent); diff --git a/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts b/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts index 6545d4bc..4cd6678c 100644 --- a/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts +++ b/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts @@ -64,7 +64,7 @@ export class MyAngularV15Env extends AngularV15Env { tsconfigPath: require.resolve('./config/tsconfig.json'), }); } - return ngMultiCompiler; + return ngMultiCompiler!; } /** diff --git a/angular/examples/my-angular-v15-env/preview/mounter.ts b/angular/examples/my-angular-v15-env/preview/mounter.ts index 46e6d70b..6831d115 100644 --- a/angular/examples/my-angular-v15-env/preview/mounter.ts +++ b/angular/examples/my-angular-v15-env/preview/mounter.ts @@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperComponent); diff --git a/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts b/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts index 45b128ff..1bd823e1 100644 --- a/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts +++ b/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts @@ -64,7 +64,7 @@ export class MyAngularV16Env extends AngularV16Env { tsconfigPath: require.resolve('./config/tsconfig.json'), }); } - return ngMultiCompiler; + return ngMultiCompiler!; } /** diff --git a/angular/examples/my-angular-v16-env/preview/mounter.ts b/angular/examples/my-angular-v16-env/preview/mounter.ts index 46e6d70b..6831d115 100644 --- a/angular/examples/my-angular-v16-env/preview/mounter.ts +++ b/angular/examples/my-angular-v16-env/preview/mounter.ts @@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperComponent); diff --git a/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts b/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts index e65c7bff..435ec0c5 100644 --- a/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts +++ b/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts @@ -64,7 +64,7 @@ export class MyAngularV17Env extends AngularV17Env { tsconfigPath: require.resolve('./config/tsconfig.json'), }); } - return ngMultiCompiler; + return ngMultiCompiler!; } /** diff --git a/angular/examples/my-angular-v17-env/preview/mounter.ts b/angular/examples/my-angular-v17-env/preview/mounter.ts index 46e6d70b..6831d115 100644 --- a/angular/examples/my-angular-v17-env/preview/mounter.ts +++ b/angular/examples/my-angular-v17-env/preview/mounter.ts @@ -6,7 +6,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -22,6 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperComponent); diff --git a/angular/templates/generators/ng-app/index.ts b/angular/templates/generators/ng-app/index.ts index 9a8c603d..9992ba96 100644 --- a/angular/templates/generators/ng-app/index.ts +++ b/angular/templates/generators/ng-app/index.ts @@ -1,12 +1,15 @@ -import { AngularComponentTemplateOptions } from '@bitdev/angular.dev-services.common'; +import { AngularComponentTemplateOptions, getWorkspace } from '@bitdev/angular.dev-services.common'; import { confirm, group, select } from '@clack/prompts'; +import { ComponentID } from '@teambit/component'; import { EnvContext, EnvHandler } from '@teambit/envs'; import { ComponentContext, ComponentTemplate } from '@teambit/generator'; import { Logger } from '@teambit/logger'; +import { PkgAspect, PkgMain } from '@teambit/pkg'; +import { Workspace } from '@teambit/workspace'; import { isCI } from 'std-env'; import { indexFile } from './template-files'; -import { docsFile } from './template-files/docs'; import { ngAppFile } from './template-files/bit-app'; +import { docsFile } from './template-files/docs'; import { appComponentFile } from './template-files/src/app/app.component'; import { appComponentHtmlFile } from './template-files/src/app/app.component-html'; import { appComponentStyleSheetFile } from './template-files/src/app/app.component-scss'; @@ -33,7 +36,9 @@ export class NgAppTemplate implements ComponentTemplate { readonly angularVersion: number, readonly name = 'ng-app', readonly description = 'create an Angular application', - readonly hidden = false + readonly hidden = false, + private pkg: PkgMain, + private workspace: Workspace | undefined ) { } @@ -86,10 +91,22 @@ export class NgAppTemplate implements ComponentTemplate { params = await this.prompt(context); } + const aspectId: ComponentID = typeof context.aspectId === 'string' ? ComponentID.fromString(context.aspectId) : context.aspectId; + const envId = aspectId.toStringWithoutVersion(); + let envPkgName: string; + if (this.workspace) { + const envComponent = await this.workspace!.get(aspectId); + envPkgName = this.pkg.getPackageName(envComponent); + } else if (envId === 'bitdev.angular/angular-env') { // mostly for ci / ripple + envPkgName = '@bitdev/angular.angular-env'; + } else { + envPkgName = `@bitdev/angular.envs.angular-v${ this.angularVersion }-env`; + } + const files = [ docsFile(context), indexFile(context), - ngAppFile(context, params.styleSheet, params.ssr), + ngAppFile(context, params.styleSheet, params.ssr, envPkgName), tsconfigFile(this.angularVersion, params.ssr), indexHtmlFile(context), mainNgAppFile(params.standalone), @@ -137,12 +154,16 @@ export class NgAppTemplate implements ComponentTemplate { return (context: EnvContext) => { const name = options.name || 'ng-app-template'; const logger = context.createLogger(name); + const pkg = context.getAspect(PkgAspect.id); + const workspace = getWorkspace(context); return new NgAppTemplate( logger, options.angularVersion, options.name, options.description, - options.hidden + options.hidden, + pkg, + workspace ); }; } diff --git a/angular/templates/generators/ng-app/template-files/bit-app.ts b/angular/templates/generators/ng-app/template-files/bit-app.ts index 3e27f8ea..39506964 100644 --- a/angular/templates/generators/ng-app/template-files/bit-app.ts +++ b/angular/templates/generators/ng-app/template-files/bit-app.ts @@ -1,12 +1,12 @@ import { ComponentContext, ComponentFile } from '@teambit/generator'; -export const ngAppFile = (context: ComponentContext, styleSheet: string, ssr: boolean): ComponentFile => { +export const ngAppFile = (context: ComponentContext, styleSheet: string, ssr: boolean, envPkgName: string): ComponentFile => { const { name, namePascalCase: Name } = context; return { relativePath: `${name}.bit-app.ts`, content: `import { type AngularAppOptions, AngularApp } from '@bitdev/angular.app-types.angular-app-type'; import { ${ssr ? `ApplicationOptions`: `BrowserOptions` }, DevServerOptions } from '@bitdev/angular.dev-services.common'; -import { ngEnvOptions } from '@bitdev/angular.envs.angular-v17-env'; +import { ngEnvOptions } from '${envPkgName}'; const angularOptions: ${ssr ? `ApplicationOptions`: `BrowserOptions` } & DevServerOptions = { ${ssr ? `browser: './src/main.ts', diff --git a/angular/templates/generators/ng-env/files/preview/mounter.ts b/angular/templates/generators/ng-env/files/preview/mounter.ts index 76c32578..f5af14e9 100644 --- a/angular/templates/generators/ng-env/files/preview/mounter.ts +++ b/angular/templates/generators/ng-env/files/preview/mounter.ts @@ -9,7 +9,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -32,7 +32,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperModule, {wrapperSelector: '#wrapper-host'});` // Angular v14+ @@ -44,7 +44,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; * Provide your component compositions (preview) with the context they need to run. * for example, a router, a theme, a data provider, etc. * components added here as providers should be listed as host-dependencies in your host-dependencies.ts file. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-providers + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ @Component({ selector: 'bit-wrapper', @@ -60,7 +60,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; /** * the entry for the app (preview runtime) that renders your component previews. * use the default template or create your own. - * @see https://bit.dev/docs/angular-env/components-preview#compositions-mounter + * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers */ export default createMounter(WrapperComponent); `,