Skip to content

Commit

Permalink
feat: add new ng-standalone template
Browse files Browse the repository at this point in the history
  • Loading branch information
ocombe committed Oct 19, 2023
1 parent d131640 commit febca6f
Show file tree
Hide file tree
Showing 19 changed files with 230 additions and 20 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 3 additions & 1 deletion angular/envs/base-env/angular-base-env.bit-env.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 })
]);
Expand Down
6 changes: 4 additions & 2 deletions angular/examples/my-angular-env/my-angular-env.bit-env.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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})
]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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})
]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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})
]);
Expand Down
16 changes: 13 additions & 3 deletions angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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})
]);
Expand Down
16 changes: 13 additions & 3 deletions angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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})
]);
Expand Down
1 change: 1 addition & 0 deletions angular/templates/generators/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export { NgModuleTemplate } from './ng-module';
export { NgStandaloneTemplate } from './ng-standalone';
export { NgEnvTemplate } from './ng-env';
export { NgAppTemplate } from './ng-app';
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ describe('${Name}Component', () => {
imports: [ ${Name}Module ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(${Name}Component);
component = fixture.componentInstance;
fixture.detectChanges();
Expand Down
33 changes: 33 additions & 0 deletions angular/templates/generators/ng-standalone/files/component-spec.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
`,
};
};
Original file line number Diff line number Diff line change
@@ -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;
}`,
};
};
26 changes: 26 additions & 0 deletions angular/templates/generators/ng-standalone/files/component.ts
Original file line number Diff line number Diff line change
@@ -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() {}
}
`,
};
};
22 changes: 22 additions & 0 deletions angular/templates/generators/ng-standalone/files/composition.ts
Original file line number Diff line number Diff line change
@@ -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,
};
};
38 changes: 38 additions & 0 deletions angular/templates/generators/ng-standalone/files/docs.ts
Original file line number Diff line number Diff line change
@@ -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}>
\`\`\`
`,
};
};
14 changes: 14 additions & 0 deletions angular/templates/generators/ng-standalone/files/public-api.ts
Original file line number Diff line number Diff line change
@@ -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';
`,
};
};
38 changes: 38 additions & 0 deletions angular/templates/generators/ng-standalone/index.ts
Original file line number Diff line number Diff line change
@@ -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
);
}
}
2 changes: 1 addition & 1 deletion scripts/keep-env.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ regexp.push(new RegExp(`\\s\\s"bitdev\\.angular\\/envs\\/angular\\-v(?!${version
// Remove default env & app 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'));
regexp.push(new RegExp(`\\s\\s"integration.examples\\/demo-app":\\s\\{\\},\\n`, 'g'));
}

try {
Expand Down
Loading

0 comments on commit febca6f

Please sign in to comment.