feat: add new ng-standalone template

Author: ocombe

.github/workflows/main.yml

@@ -41,6 +41,9 @@ jobs:
       - name: Add example app
         run: bit add integration/demo-app --log
 
+      - name: Use example app
+        run: bit use integration.examples/demo-app --log
+
       - name: Install dependencies
         run: bit install --log
 

angular/envs/base-env/angular-base-env.bit-env.ts

@@ -18,7 +18,8 @@ import { NgWebpackBundler, NgWebpackDevServer } from '@bitdev/angular.dev-servic
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
 import {
   AngularStarter,
@@ -224,6 +225,7 @@ export abstract class AngularBaseEnv implements AngularEnvInterface {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({ envName, angularVersion: this.angularVersion }),
+      NgStandaloneTemplate.from({ envName, angularVersion: this.angularVersion }),
       NgEnvTemplate.from({ envName, angularVersion: this.angularVersion }),
       NgAppTemplate.from({ envName, angularVersion: this.angularVersion })
     ]);

angular/examples/my-angular-env/my-angular-env.bit-env.ts

@@ -4,12 +4,13 @@ import {
   BundlerProvider,
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -120,6 +121,7 @@ export class MyAngularEnv extends AngularEnv {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);

angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts

@@ -4,12 +4,12 @@ import {
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV13Env } from '@bitdev/angular.envs.angular-v13-env';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
   NgModuleTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';

angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts

@@ -4,12 +4,13 @@ import {
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV14Env } from '@bitdev/angular.envs.angular-v14-env';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -120,6 +121,7 @@ export class MyAngularV14Env extends AngularV14Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);

angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts

@@ -4,12 +4,13 @@ import {
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV15Env } from '@bitdev/angular.envs.angular-v15-env';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -120,6 +121,7 @@ export class MyAngularV15Env extends AngularV15Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);

angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts

@@ -1,7 +1,16 @@
-import { AngularPreview, BundlerProvider, DevServerProvider } from '@bitdev/angular.dev-services.preview.preview';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
-import { NgAppTemplate, NgEnvTemplate, NgModuleTemplate } from '@bitdev/angular.templates.generators';
+import {
+  AngularPreview,
+  BundlerProvider,
+  DevServerProvider
+} from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV16Env } from '@bitdev/angular.envs.angular-v16-env';
+import {
+  NgAppTemplate,
+  NgEnvTemplate,
+  NgModuleTemplate,
+  NgStandaloneTemplate
+} from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -112,6 +121,7 @@ export class MyAngularV16Env extends AngularV16Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);

angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts

@@ -1,7 +1,16 @@
-import { AngularPreview, BundlerProvider, DevServerProvider } from '@bitdev/angular.dev-services.preview.preview';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
-import { NgAppTemplate, NgEnvTemplate, NgModuleTemplate } from '@bitdev/angular.templates.generators';
+import {
+  AngularPreview,
+  BundlerProvider,
+  DevServerProvider
+} from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV17Env } from '@bitdev/angular.envs.angular-v17-env';
+import {
+  NgAppTemplate,
+  NgEnvTemplate,
+  NgModuleTemplate,
+  NgStandaloneTemplate
+} from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -112,6 +121,7 @@ export class MyAngularV17Env extends AngularV17Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);

angular/templates/generators/index.ts

@@ -1,3 +1,4 @@
 export { NgModuleTemplate } from './ng-module';
+export { NgStandaloneTemplate } from './ng-standalone';
 export { NgEnvTemplate } from './ng-env';
 export { NgAppTemplate } from './ng-app';

angular/templates/generators/ng-module/files/component-spec.ts

@@ -19,9 +19,7 @@ describe('${Name}Component', () => {
       imports: [ ${Name}Module ]
     })
     .compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(${Name}Component);
     component = fixture.componentInstance;
     fixture.detectChanges();

angular/templates/generators/ng-standalone/files/component-spec.ts

@@ -0,0 +1,33 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const componentSpecFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.spec.ts`,
+    content: `import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ${Name}Component } from './${name}.component';
+
+describe('${Name}Component', () => {
+  let component: ${Name}Component;
+  let fixture: ComponentFixture<${Name}Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ ${Name}Component ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(${Name}Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+`,
+  };
+};

angular/templates/generators/ng-standalone/files/component-styles.ts

@@ -0,0 +1,11 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const componentStylesFile = (context: ComponentContext): ComponentFile => {
+  const { name } = context;
+  return {
+    relativePath: `${name}.component.scss`,
+    content: `:host {
+  font-size: inherit;
+}`,
+  };
+};

angular/templates/generators/ng-standalone/files/component.ts

@@ -0,0 +1,26 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const componentFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+  return {
+    relativePath: `${name}.component.ts`,
+    content: `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: '${name}',
+  standalone: true,
+  imports: [CommonModule],
+  template: \`
+    <p>
+    ${name} works!
+    </p>
+\`,
+  styleUrls: ['./${name}.component.scss']
+})
+export class ${Name}Component {
+  constructor() {}
+}
+`,
+  };
+};

angular/templates/generators/ng-standalone/files/composition.ts

@@ -0,0 +1,22 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const compositionFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+
+  const standaloneComposition = `import { Component } from '@angular/core';
+import { ${Name}Component } from './${name}.component';
+
+@Component({
+  standalone: true,
+  selector: '${name}-composition-cmp',
+  imports: [${Name}Component],
+  template: \`${Name} composition: <${name}></${name}>\`
+})
+export class ${Name}CompositionComponent {}
+`;
+
+  return {
+    relativePath: `${name}.composition.ts`,
+    content: standaloneComposition,
+  };
+};

angular/templates/generators/ng-standalone/files/docs.ts

@@ -0,0 +1,38 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const docsFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.docs.md`,
+    content: `---
+labels: ['angular', 'typescript', '${name}']
+description: 'A \`${name}\` component.'
+---
+
+# ${Name} documentation
+
+Import \`${Name}Component\` into your application:
+
+\`\`\`ts
+import { ${Name}Component } from './${name}.component';
+
+// add it to your component imports
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    ${Name}Component
+  ]
+})
+export class AppComponent {}
+\`\`\`
+
+Use \`${Name}Component\` in your generators:
+
+\`\`\`html
+<${name}></${name}>
+\`\`\`
+`,
+  };
+};

angular/templates/generators/ng-standalone/files/public-api.ts

@@ -0,0 +1,14 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const publicApiFile = (context: ComponentContext): ComponentFile => {
+  const { name } = context;
+  return {
+    isMain: true,
+    relativePath: 'public-api.ts',
+    content: `/**
+ * Entry point for this Angular library, do not move or rename this file.
+ */
+export * from './${name}.component';
+`,
+  };
+};

angular/templates/generators/ng-standalone/index.ts

@@ -0,0 +1,38 @@
+import { ComponentContext, ComponentTemplate } from '@teambit/generator';
+import { AngularComponentTemplateOptions } from '@bitdev/angular.dev-services.common';
+import { componentFile } from './files/component';
+import { componentSpecFile } from './files/component-spec';
+import { componentStylesFile } from './files/component-styles';
+import { compositionFile } from './files/composition';
+import { docsFile } from './files/docs';
+import { publicApiFile } from './files/public-api';
+
+export class NgStandaloneTemplate implements ComponentTemplate {
+  private constructor(
+    readonly angularVersion: number,
+    readonly name = 'ng-standalone',
+    readonly description = 'create a standalone Angular component',
+    readonly hidden = false
+  ) {}
+
+  generateFiles(context: ComponentContext) {
+    return [
+      publicApiFile(context),
+      componentFile(context),
+      componentStylesFile(context),
+      docsFile(context),
+      componentSpecFile(context),
+      compositionFile(context),
+    ];
+  }
+
+  static from(options: AngularComponentTemplateOptions & { angularVersion: number }) {
+    return () =>
+      new NgStandaloneTemplate(
+        options.angularVersion,
+        options.name,
+        options.description,
+        options.hidden
+      );
+  }
+}

scripts/keep-env.js

@@ -25,10 +25,9 @@ const defaultEnv = args('default');
 const regexp = [];
 regexp.push(new RegExp(`\\s\\s"bitdev\\.angular\\/envs\\/angular\\-v(?!${version})\\d\\d?\\-env":\\s\\{\\},\\n`, 'g'));
 
-// Remove default env & app if needed
+// Remove default env if needed
 if (!defaultEnv) {
   regexp.push(new RegExp(`\\s\\s"bitdev\\.angular\\/angular\\-env":\\s\\{\\},\\n`, 'g'));
-  regexp.push(new RegExp(`\\s\\s"integration\\/demo-app":\\s\\{\\},\\n`, 'g'));
 }
 
 try {