| Configuration;
6 | let configs: any;
7 | if ((VERSION.major === '16' && Number(VERSION.minor) >= 2) || Number(VERSION.major) > 16) {
8 | // 16.2+
9 | configs = require('@angular-devkit/build-angular/src/tools/webpack/configs');
10 | } else {
11 | configs = require('@angular-devkit/build-angular/src/webpack/configs');
12 | }
13 |
14 | export const getCommonConfig: configFn = configs.getCommonConfig;
15 | export const getDevServerConfig: configFn = configs.getDevServerConfig;
16 | export const getStylesConfig: configFn = configs.getStylesConfig;
17 |
--------------------------------------------------------------------------------
/angular/integration/demo-lib/src/compositions/cmp1.composition.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { BitTestModule } from '../bit-test.module';
3 | import { BitTest3Component } from "../bit-test3.component";
4 |
5 | @Component({
6 | selector: 'bit-composition',
7 | standalone: true,
8 | imports: [BitTestModule, BitTest3Component],
9 | template: `
10 |
11 | Composition component 1
12 |
13 |
14 |
15 | Composition component 2
16 |
17 |
18 |
19 | Composition component 3
20 |
21 |
22 | `,
23 | styles: [
24 | ]
25 | })
26 | export class StandaloneCompositionComponent {
27 | }
28 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-app/template-files/src/app/app.config.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFile } from '@teambit/generator';
2 |
3 | export const appConfigFile = (ssr: boolean): ComponentFile => {
4 | return {
5 | relativePath: `src/app/app.config.ts`,
6 | content: `import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
7 | import { provideRouter } from '@angular/router';${ssr ? `
8 | import { provideClientHydration, withEventReplay } from '@angular/platform-browser';` : ''}
9 | import { routes } from './app.routes';
10 |
11 | export const appConfig: ApplicationConfig = {
12 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)${ssr ? ', provideClientHydration(withEventReplay())' : ''}]
13 | };
14 | `,
15 | };
16 | };
17 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-standalone/files/composition.ts:
--------------------------------------------------------------------------------
1 | import { ComponentContext, ComponentFile } from '@teambit/generator';
2 |
3 | export const compositionFile = (context: ComponentContext): ComponentFile => {
4 | const { name, namePascalCase: Name } = context;
5 |
6 | const standaloneComposition = `import { Component } from '@angular/core';
7 | import { ${Name}Component } from './${name}.component';
8 |
9 | @Component({
10 | standalone: true,
11 | selector: '${name}-composition-cmp',
12 | imports: [${Name}Component],
13 | template: \`${Name} composition: <${name}>\`
14 | })
15 | export class ${Name}CompositionComponent {}
16 | `;
17 |
18 | return {
19 | relativePath: `${name}.composition.ts`,
20 | content: standaloneComposition,
21 | };
22 | };
23 |
--------------------------------------------------------------------------------
/angular/integration/demo-app/src/main.ts:
--------------------------------------------------------------------------------
1 | // import { enableProdMode } from '@angular/core';
2 | // import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 | //
4 | // import { AppModule } from './app/app.module';
5 | // import { environment } from './environments/environment';
6 | //
7 | // if (environment.production) {
8 | // enableProdMode();
9 | // }
10 | //
11 | // platformBrowserDynamic().bootstrapModule(AppModule)
12 | // .catch(err => console.error(err));
13 |
14 | import 'zone.js';
15 | import { bootstrapApplication } from '@angular/platform-browser';
16 |
17 | import { AppComponent } from './app/app.component';
18 | import { appConfig } from './app/app.config';
19 |
20 | bootstrapApplication(AppComponent, appConfig)
21 | .catch((err) => console.error(err));
22 |
23 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v18-env/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "examples/my-angular-v18-env",
5 | "version": "3.3.2"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "@jest/globals": "^29.3.1",
13 | "@bitdev/angular.dev-services.linter.eslint": ">= 1.0.0",
14 | "@types/eslint": "^8.40.0",
15 | "@types/jest": "^29.5.0",
16 | "jest": "^29.5.0",
17 | "jest-preset-angular": "~14.1.0"
18 | }
19 | }
20 | },
21 | "bitdev.general/envs/bit-env@1.0.21": {},
22 | "teambit.envs/envs": {
23 | "env": "bitdev.general/envs/bit-env"
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v19-env/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "examples/my-angular-v19-env",
5 | "version": "2.3.2"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "@jest/globals": "^29.3.1",
13 | "@bitdev/angular.dev-services.linter.eslint": ">= 1.0.0",
14 | "@types/eslint": "^8.40.0",
15 | "@types/jest": "^29.5.0",
16 | "jest": "^29.5.0",
17 | "jest-preset-angular": "~14.4.0"
18 | }
19 | }
20 | },
21 | "bitdev.general/envs/bit-env@1.0.21": {},
22 | "teambit.envs/envs": {
23 | "env": "bitdev.general/envs/bit-env"
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/angular/integration/demo-lib-v19/compositions/cmp1.composition.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { BitTestModule } from '../bit-test.module';
3 | import { BitTest3Component } from "../bit-test3.component";
4 |
5 | @Component({
6 | selector: 'bit-composition-v18',
7 | standalone: true,
8 | imports: [BitTestModule, BitTest3Component],
9 | template: `
10 |
11 | Composition component 1
12 |
13 |
14 |
15 | Composition component 2
16 |
17 |
18 |
19 | Composition component 3
20 |
21 |
22 | `,
23 | styles: [
24 | ]
25 | })
26 | export class StandaloneCompositionComponent {
27 | }
28 |
--------------------------------------------------------------------------------
/angular/devkit/ng-compat/build-angular/webpack/stats.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
3 | import { logging } from '@angular-devkit/core';
4 | import { VERSION } from '@angular/cli';
5 | import { BrowserBuilderOptions } from '../builder-options';
6 |
7 | export let createWebpackLoggingCallback: (options: BrowserBuilderOptions, logger: logging.LoggerApi) => WebpackLoggingCallback;
8 |
9 | if ((VERSION.major === '16' && Number(VERSION.minor) >= 2) || Number(VERSION.major) > 16) {
10 | createWebpackLoggingCallback = require('@angular-devkit/build-angular/src/tools/webpack/utils/stats').createWebpackLoggingCallback;
11 | } else {
12 | createWebpackLoggingCallback = require('@angular-devkit/build-angular/src/webpack/utils/stats').createWebpackLoggingCallback;
13 | }
14 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-app/template-files/src/main.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFile } from '@teambit/generator';
2 |
3 | export const mainNgAppFile = (standalone: boolean): ComponentFile => {
4 | return {
5 | relativePath: `src/main.ts`,
6 | content: `import 'zone.js';
7 | ${standalone ? `import { bootstrapApplication } from '@angular/platform-browser';
8 | import { appConfig } from './app/app.config';
9 | import { AppComponent } from './app/app.component';
10 |
11 | bootstrapApplication(AppComponent, appConfig)
12 | .catch((err) => console.error(err));
13 | ` : `import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
14 | import { AppModule } from './app/app.module';
15 |
16 | platformBrowserDynamic().bootstrapModule(AppModule)
17 | .catch(err => console.error(err));
18 | `}`,
19 | };
20 | };
21 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-env/config/jest.config.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://bit.dev/reference/jest/jest-config
3 | */
4 | const jestConfig = require('@bitdev/angular.angular-env/jest/jest.config.cjs');
5 | const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder');
6 | const { createCjsPreset } = require('jest-preset-angular/presets');
7 |
8 | const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular'];
9 | const presetConfig = createCjsPreset({
10 | tsconfig: require.resolve('./tsconfig.spec.json')
11 | });
12 |
13 | module.exports = {
14 | ...jestConfig,
15 | ...presetConfig,
16 | transformIgnorePatterns: [
17 | '^.+.module.(css|sass|scss)$',
18 | generateNodeModulesPattern({
19 | packages: packagesToExclude,
20 | excludeComponents: true
21 | })
22 | ]
23 | };
24 |
--------------------------------------------------------------------------------
/angular/integration/demo-elements/demo-elements.docs.md:
--------------------------------------------------------------------------------
1 | ---
2 | labels: ['angular', 'typescript', 'demo-elements']
3 | description: 'A `demo-elements` component.'
4 | ---
5 |
6 | Import `DemoElementsComponent` into your application and use the returned selector to create a component
7 | in the framework of your choice. For example with react:
8 |
9 | ```ts
10 | import { DemoElementsComponent } from '@my-scope/demo-elements';
11 | import type { ReactNode } from 'react';
12 |
13 | export type DemoElementsProps = {
14 | /**
15 | * sets the component children.
16 | */
17 | children?: ReactNode;
18 | };
19 |
20 | // Use the component:
21 | export function DemoElements({ children }: DemoElementsProps) {
22 | return (
23 |
24 | {children}
25 |
26 | );
27 | }
28 |
29 | ```
30 |
--------------------------------------------------------------------------------
/angular/devkit/compiler/elements/preview/mount.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // @ts-nocheck
3 | import React from 'react';
4 | import { createRoot } from 'react-dom/client';
5 | // required here to make sure that this is loaded before the compositions file
6 | import { ngToReact } from '@bitdev/angular.dev-services.preview.runtime';
7 |
8 | const container = document.getElementById('root') as HTMLElement;
9 | const root = createRoot(container!);
10 |
11 | /**
12 | * this mounts compositions into the DOM in the component preview.
13 | * this function can be overridden through ReactAspect.overrideCompositionsMounter() API
14 | * to apply custom logic for component DOM mounting.
15 | */
16 | export default async (composition: any/* , previewContext: RenderingContext */) => {
17 | root.render({await ngToReact([composition])}
);
18 | };
19 |
--------------------------------------------------------------------------------
/angular/devkit/compiler/elements/rollup/utils/fs.ts:
--------------------------------------------------------------------------------
1 | import * as fs from 'fs';
2 | import { dirname } from 'path';
3 | import { promisify } from 'util';
4 |
5 | export const {readFile, writeFile, access, mkdir, stat} = fs.promises;
6 | // @ts-ignore
7 | export const rmdir = fs.promises.rm ?? fs.promises.rmdir;
8 |
9 | export async function exists(path: fs.PathLike): Promise {
10 | try {
11 | await access(path, fs.constants.F_OK);
12 |
13 | return true;
14 | } catch {
15 | return false;
16 | }
17 | }
18 |
19 | const cpFile = promisify(fs.copyFile);
20 | export async function copyFile(src: string, dest: string): Promise {
21 | const dir = dirname(dest);
22 | if (!(await exists(dir))) {
23 | await mkdir(dir, { recursive: true });
24 | }
25 |
26 | await cpFile(src, dest, fs.constants.COPYFILE_FICLONE);
27 | }
28 |
--------------------------------------------------------------------------------
/angular/devkit/preview/vite-preview/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "dev-services/preview/vite-preview",
5 | "version": "1.2.1"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "peerDependencies": {
12 | "@angular/core": ">= 16.0.0"
13 | }
14 | }
15 | },
16 | "teambit.component/dev-files": {},
17 | "teambit.pkg/pkg": {},
18 | "teambit.preview/preview": {},
19 | "teambit.compositions/compositions": {},
20 | "teambit.docs/docs": {},
21 | "teambit.pipelines/builder": {},
22 | "teambit.semantics/schema": {},
23 | "teambit.envs/envs": {
24 | "env": "bitdev.node/node-env"
25 | },
26 | "bitdev.node/node-env@4.0.3": {}
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-app/template-files/src/app/app.config.server.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFile } from '@teambit/generator';
2 |
3 | export const serverConfigFile = (): ComponentFile => {
4 | return {
5 | relativePath: `src/app/app.config.server.ts`,
6 | content: `import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
7 | import { provideServerRendering } from '@angular/platform-server';
8 | import { provideServerRouting } from '@angular/ssr';
9 | import { appConfig } from './app.config';
10 | import { serverRoutes } from './app.routes.server';
11 |
12 | const serverConfig: ApplicationConfig = {
13 | providers: [
14 | provideServerRendering(),
15 | provideServerRouting(serverRoutes)
16 | ]
17 | };
18 |
19 | export const config = mergeApplicationConfig(appConfig, serverConfig);
20 | `,
21 | };
22 | };
23 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v19-env/config/jest.config.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://bit.dev/reference/jest/jest-config
3 | */
4 | const jestConfig = require('@bitdev/angular.envs.angular-v19-env/jest/jest.config.cjs');
5 | const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder');
6 | const { createCjsPreset } = require('jest-preset-angular/presets');
7 |
8 | const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular'];
9 | const presetConfig = createCjsPreset({
10 | tsconfig: require.resolve('./tsconfig.spec.json')
11 | });
12 |
13 | module.exports = {
14 | ...jestConfig,
15 | ...presetConfig,
16 | transformIgnorePatterns: [
17 | '^.+.module.(css|sass|scss)$',
18 | generateNodeModulesPattern({
19 | packages: packagesToExclude,
20 | excludeComponents: true
21 | })
22 | ]
23 | };
24 |
--------------------------------------------------------------------------------
/angular/envs/base-env/angular-env.interface.ts:
--------------------------------------------------------------------------------
1 | import { CompilerEnv } from '@teambit/compiler';
2 | import { SchemaEnv } from '@teambit/schema';
3 | import { Env } from '@teambit/envs';
4 | import { PreviewEnv } from '@teambit/preview';
5 | import { TesterEnv } from '@teambit/tester';
6 | import { LinterEnv } from '@teambit/linter';
7 | import { FormatterEnv } from '@teambit/formatter';
8 | import { BuilderEnv } from '@teambit/builder';
9 | import { GeneratorEnv } from '@teambit/generator';
10 | import { PackageEnv } from '@teambit/pkg';
11 | import { AppsEnv } from '@teambit/application';
12 |
13 | export interface AngularEnvInterface
14 | extends Env,
15 | AppsEnv,
16 | CompilerEnv,
17 | TesterEnv,
18 | PreviewEnv,
19 | SchemaEnv,
20 | LinterEnv,
21 | FormatterEnv,
22 | BuilderEnv,
23 | GeneratorEnv,
24 | PackageEnv {}
25 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-module/files/docs.ts:
--------------------------------------------------------------------------------
1 | import { ComponentContext, ComponentFile } from '@teambit/generator';
2 |
3 | export const docsFile = (context: ComponentContext): ComponentFile => {
4 | const { name, namePascalCase: Name } = context;
5 |
6 | return {
7 | relativePath: `${name}.docs.md`,
8 | content: `---
9 | labels: ['angular', 'typescript', '${name}']
10 | description: 'A \`${name}\` component.'
11 | ---
12 |
13 | Import \`${Name}Module\` into your application:
14 |
15 | \`\`\`ts
16 | import { ${Name}Module } from './${name}.module';
17 |
18 | // add it to your module imports
19 | @NgModule({
20 | imports: [
21 | ${Name}Module
22 | ]
23 | })
24 | export class AppModule {}
25 | \`\`\`
26 |
27 | Use \`${Name}Component\` in your generators:
28 |
29 | \`\`\`html
30 | <${name}>
31 | \`\`\`
32 | `,
33 | };
34 | };
35 |
--------------------------------------------------------------------------------
/angular/app-types/angular-app-type/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "app-types/angular-app-type",
5 | "version": "8.2.1"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "@angular/cli": "-"
13 | },
14 | "peerDependencies": {
15 | "@angular/cli": ">= 13.0.0"
16 | }
17 | }
18 | },
19 | "teambit.component/renaming": {
20 | "renamedFrom": {
21 | "scope": "bitdev.angular",
22 | "name": "dev-services/apps",
23 | "version": "02f8cd3d639894dea416cc38674a6887e11e939b"
24 | }
25 | },
26 | "teambit.envs/envs": {
27 | "env": "bitdev.node/node-env"
28 | },
29 | "bitdev.node/node-env@4.0.3": {}
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/angular/docs/ng-component-libraries/commands.tsx:
--------------------------------------------------------------------------------
1 | import { CommandsExplorer } from '@teambit/community.ui.bit-cli.commands-explorer';
2 | import React from 'react';
3 |
4 | export const CreateDesignSystemWS = () => {
5 | const example = {
6 | 'template-name': 'design-system',
7 | 'default-scope': 'my-org.my-scope',
8 | 'workspace-name': 'my-design-system',
9 | aspect: 'bitdev.angular/angular-env',
10 | };
11 | return ;
12 | };
13 |
14 | export const CreateMaterialDesignSystemWS = () => {
15 | const example = {
16 | 'template-name': 'material-design-system',
17 | 'default-scope': 'my-org.my-scope',
18 | 'workspace-name': 'my-material-design-system',
19 | aspect: 'bitdev.angular/angular-env',
20 | };
21 | return ;
22 | };
23 |
--------------------------------------------------------------------------------
/angular/devkit/preview/preview-app/preview-app/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
6 |
7 | declare const require: {
8 | context(
9 | path: string,
10 | deep?: boolean,
11 | filter?: RegExp
12 | ): {
13 | keys(): string[];
14 | (id: string): T;
15 | };
16 | };
17 |
18 | // First, initialize the Angular testing environment.
19 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
20 | // Then we find all the tests.
21 | const context = require.context('./', true, /\.spec\.ts$/);
22 | // And load the modules.
23 | context.keys().map(context);
24 |
--------------------------------------------------------------------------------
/angular/envs/angular-v16-env/jest/jest-global-mocks.ts:
--------------------------------------------------------------------------------
1 | import { jest } from '@jest/globals';
2 |
3 | Object.defineProperty(window, 'CSS', { value: null });
4 |
5 | Object.defineProperty(document, 'doctype', {
6 | value: '',
7 | });
8 |
9 | Object.defineProperty(window, 'getComputedStyle', {
10 | value: () => {
11 | return {
12 | display: 'none',
13 | appearance: ['-webkit-appearance'],
14 | };
15 | },
16 | });
17 |
18 | /**
19 | * ISSUE: https://github.com/angular/material2/issues/7101
20 | * Workaround for JSDOM missing transform property
21 | */
22 | Object.defineProperty(document.body.style, 'transform', {
23 | value: () => {
24 | return {
25 | enumerable: true,
26 | configurable: true,
27 | };
28 | },
29 | });
30 |
31 | HTMLCanvasElement.prototype.getContext = jest.fn();
32 |
--------------------------------------------------------------------------------
/angular/envs/angular-v17-env/jest/jest-global-mocks.ts:
--------------------------------------------------------------------------------
1 | import { jest } from '@jest/globals';
2 |
3 | Object.defineProperty(window, 'CSS', { value: null });
4 |
5 | Object.defineProperty(document, 'doctype', {
6 | value: '',
7 | });
8 |
9 | Object.defineProperty(window, 'getComputedStyle', {
10 | value: () => {
11 | return {
12 | display: 'none',
13 | appearance: ['-webkit-appearance'],
14 | };
15 | },
16 | });
17 |
18 | /**
19 | * ISSUE: https://github.com/angular/material2/issues/7101
20 | * Workaround for JSDOM missing transform property
21 | */
22 | Object.defineProperty(document.body.style, 'transform', {
23 | value: () => {
24 | return {
25 | enumerable: true,
26 | configurable: true,
27 | };
28 | },
29 | });
30 |
31 | HTMLCanvasElement.prototype.getContext = jest.fn();
32 |
--------------------------------------------------------------------------------
/angular/envs/angular-v18-env/jest/jest-global-mocks.ts:
--------------------------------------------------------------------------------
1 | import { jest } from '@jest/globals';
2 |
3 | Object.defineProperty(window, 'CSS', { value: null });
4 |
5 | Object.defineProperty(document, 'doctype', {
6 | value: '',
7 | });
8 |
9 | Object.defineProperty(window, 'getComputedStyle', {
10 | value: () => {
11 | return {
12 | display: 'none',
13 | appearance: ['-webkit-appearance'],
14 | };
15 | },
16 | });
17 |
18 | /**
19 | * ISSUE: https://github.com/angular/material2/issues/7101
20 | * Workaround for JSDOM missing transform property
21 | */
22 | Object.defineProperty(document.body.style, 'transform', {
23 | value: () => {
24 | return {
25 | enumerable: true,
26 | configurable: true,
27 | };
28 | },
29 | });
30 |
31 | HTMLCanvasElement.prototype.getContext = jest.fn();
32 |
--------------------------------------------------------------------------------
/angular/envs/angular-v19-env/jest/jest-global-mocks.ts:
--------------------------------------------------------------------------------
1 | import { jest } from '@jest/globals';
2 |
3 | Object.defineProperty(window, 'CSS', { value: null });
4 |
5 | Object.defineProperty(document, 'doctype', {
6 | value: '',
7 | });
8 |
9 | Object.defineProperty(window, 'getComputedStyle', {
10 | value: () => {
11 | return {
12 | display: 'none',
13 | appearance: ['-webkit-appearance'],
14 | };
15 | },
16 | });
17 |
18 | /**
19 | * ISSUE: https://github.com/angular/material2/issues/7101
20 | * Workaround for JSDOM missing transform property
21 | */
22 | Object.defineProperty(document.body.style, 'transform', {
23 | value: () => {
24 | return {
25 | enumerable: true,
26 | configurable: true,
27 | };
28 | },
29 | });
30 |
31 | HTMLCanvasElement.prototype.getContext = jest.fn();
32 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-app/template-files/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { ComponentContext, ComponentFile } from '@teambit/generator';
2 |
3 | export const appComponentFile = (context: ComponentContext, styleSheet: string, standalone: boolean): ComponentFile => {
4 | const { name } = context;
5 | return {
6 | relativePath: `src/app/app.component.ts`,
7 | content: `import { Component } from '@angular/core';${standalone ? `
8 | import { CommonModule } from '@angular/common';` : ''}
9 | import { RouterOutlet } from '@angular/router';
10 |
11 | @Component({
12 | selector: 'app-root',${standalone ? `
13 | standalone: true,
14 | imports: [CommonModule, RouterOutlet],` : ''}
15 | templateUrl: './app.component.html',
16 | styleUrls: ['./app.component.${ styleSheet }']
17 | })
18 | export class AppComponent {
19 | title = '${name}';
20 | }
21 | `,
22 | };
23 | };
24 |
--------------------------------------------------------------------------------
/angular/integration/my-react-app/my-react-app.app-root.tsx:
--------------------------------------------------------------------------------
1 | import { BrowserRouter } from 'react-router-dom';
2 | import {
3 | createRoot,
4 | // hydrateRoot
5 | } from 'react-dom/client';
6 | import { MyReactApp } from "./my-react-app.js";
7 |
8 | /**
9 | * comment this in for server-side rendering (ssr) and comment
10 | * out of the root.render() invocation below.
11 | */
12 | // hydrateRoot(
13 | // document.getElementById("root") as HTMLElement,
14 | //
15 | //
16 | //
17 | // );
18 |
19 | if (import.meta.hot) {
20 | import.meta.hot.accept();
21 | }
22 |
23 | /**
24 | * mounting for client side rendering.
25 | */
26 | const container = document.getElementById('root');
27 | const root = createRoot(container!);
28 |
29 | root.render(
30 | // @ts-ignore
31 |
32 |
33 |
34 | );
35 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-app/template-files/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFile } from '@teambit/generator';
2 |
3 | export const appModuleFile = (ssr: boolean): ComponentFile => {
4 | return {
5 | relativePath: `src/app/app.module.ts`,
6 | content: `import { NgModule } from '@angular/core';
7 | import { BrowserModule } from '@angular/platform-browser';
8 | import { RouterModule } from '@angular/router';${ssr ? `
9 | import { provideClientHydration } from '@angular/platform-browser';` : ''}
10 | import { routes } from './app.routes';
11 | import { AppComponent } from './app.component';
12 |
13 | @NgModule({
14 | declarations: [
15 | AppComponent
16 | ],
17 | imports: [
18 | BrowserModule,
19 | RouterModule.forRoot(routes)
20 | ],
21 | providers: [${ssr ? `provideClientHydration()` : ``}],
22 | bootstrap: [AppComponent]
23 | })
24 | export class AppModule { }
25 | `,
26 | };
27 | };
28 |
--------------------------------------------------------------------------------
/angular/devkit/linter/eslint/eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser',
3 | root: true,
4 | ignorePatterns: ['node_modules'],
5 | parserOptions: {
6 | createDefaultProgram: true,
7 | },
8 | env: {
9 | browser: true,
10 | node: true,
11 | es6: true,
12 | jest: true,
13 | },
14 | overrides: [
15 | {
16 | files: ['*.ts', '*.tsx', '*.js', '*.jsx', '*.mjs'],
17 | parserOptions: {
18 | project: require.resolve('./config/tsconfig.json'),
19 | createDefaultProgram: true,
20 | },
21 | extends: ['plugin:@angular-eslint/recommended', 'plugin:@angular-eslint/template/process-inline-templates'],
22 | },
23 | {
24 | files: ['*.html'],
25 | extends: ['plugin:@angular-eslint/template/recommended'],
26 | },
27 | {
28 | files: ['*.md'],
29 | extends: ['plugin:markdown/recommended'],
30 | },
31 | ],
32 | };
33 |
--------------------------------------------------------------------------------
/angular/docs/build-pipelines/code-snippets/add-replace-task-build.mdx:
--------------------------------------------------------------------------------
1 | It is common to both replace tasks and add new tasks.
2 |
3 | ```ts
4 | import { AngularV19Env } from '@bitdev/angular.envs.angular-v19-env';
5 | import { JestTask } from '@teambit/defender.jest-tester';
6 | /* import the task you want to add */
7 | import { ComponentNameTask } from '@learnbit/extending-bit.build-tasks.component-name';
8 |
9 | export class MyAngularEnv extends AngularV19Env {
10 | build() {
11 | return (
12 | super
13 | .build()
14 | /* replace some of the tasks in the build pipeline */
15 | .replace([
16 | JestTask.from({
17 | config: require.resolve('./config/jest.config'),
18 | }),
19 | ])
20 | /* add a new task to the build pipeline */
21 | .add([ComponentNameTask.from({})])
22 | );
23 | }
24 | }
25 |
26 | export default new MyAngularEnv();
27 | ```
28 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-standalone/files/docs.ts:
--------------------------------------------------------------------------------
1 | import { ComponentContext, ComponentFile } from '@teambit/generator';
2 |
3 | export const docsFile = (context: ComponentContext): ComponentFile => {
4 | const { name, namePascalCase: Name } = context;
5 |
6 | return {
7 | relativePath: `${name}.docs.md`,
8 | content: `---
9 | labels: ['angular', 'typescript', '${name}']
10 | description: 'A \`${name}\` component.'
11 | ---
12 |
13 | Import \`${Name}Component\` into your application:
14 |
15 | \`\`\`ts
16 | import { ${Name}Component } from './${name}.component';
17 |
18 | // add it to your component imports
19 | @Component({
20 | selector: 'app-root',
21 | standalone: true,
22 | imports: [
23 | ${Name}Component
24 | ]
25 | })
26 | export class AppComponent {}
27 | \`\`\`
28 |
29 | Use \`${Name}Component\` in your generators:
30 |
31 | \`\`\`html
32 | <${name}>
33 | \`\`\`
34 | `,
35 | };
36 | };
37 |
--------------------------------------------------------------------------------
/angular/devkit/compiler/multi-compiler/ng-multi-compiler.task.ts:
--------------------------------------------------------------------------------
1 | // TODO: @gilad create compiler task as a component. (teambit.compilation/compiler-task)
2 | import { TaskHandler } from '@teambit/builder';
3 | import { CompilerTask } from '@teambit/compilation.compiler-task';
4 | import { Compiler } from '@teambit/compiler';
5 | import { EnvHandler } from '@teambit/envs';
6 |
7 | export interface NgMultiCompilerTaskOptions {
8 | name?: string;
9 | description?: string;
10 | ngMultiCompiler: EnvHandler;
11 | }
12 |
13 | export const NgMultiCompilerTask = {
14 | from: (options: NgMultiCompilerTaskOptions): TaskHandler => {
15 | const name = options.name || 'NgMultiCompiler';
16 | const description = options.description || 'compiling components using NgMultiCompiler';
17 |
18 | return CompilerTask.from({
19 | name,
20 | description,
21 | compiler: options.ngMultiCompiler
22 | });
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/angular/devkit/vite/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "dev-services/vite",
5 | "version": "2.2.0"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "#alias": "-",
13 | "h3": "^1.9.0",
14 | "nitropack": "^2.8.0",
15 | "@angular-devkit/build-angular": "-",
16 | "@angular/cli": "-",
17 | "typescript": "-"
18 | },
19 | "peerDependencies": {
20 | "@angular-devkit/build-angular": ">= 0.0.1",
21 | "@angular/cli": ">= 13.0.0",
22 | "esbuild": ">= 0.14.0",
23 | "typescript": ">= 3.5.3"
24 | }
25 | }
26 | },
27 | "teambit.envs/envs": {
28 | "env": "bitdev.node/node-env"
29 | },
30 | "bitdev.node/node-env@4.0.3": {}
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/angular/app-types/angular-app-type/angular.app-type.ts:
--------------------------------------------------------------------------------
1 | import { NG_APP_NAME } from '@bitdev/angular.dev-services.common';
2 | import { Application, ApplicationType } from '@teambit/application';
3 | import { EnvHandler } from '@teambit/envs';
4 | import { AngularAppOptions } from './angular-app-options.js';
5 | import { AngularApp } from './angular.application.js';
6 |
7 | interface AngularAppTypeOptions {
8 | name?: string;
9 | }
10 |
11 | export class AngularAppType implements ApplicationType {
12 | constructor(readonly name: string) {}
13 |
14 | createApp(options: AngularAppOptions): Application {
15 | return new AngularApp({
16 | ...options,
17 | name: this.name
18 | });
19 | }
20 |
21 | static from(options: AngularAppTypeOptions): EnvHandler {
22 | return () => {
23 | const name = options.name || NG_APP_NAME;
24 | return new AngularAppType(name);
25 | };
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/angular/integration/demo-lib-v16/bit-test.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { BitTestComponent } from './bit-test.component';
4 |
5 | describe('BitTestComponent', () => {
6 | let component: BitTestComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ BitTestComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(BitTestComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 |
26 | it('should have a service', () => {
27 | expect(component.service).toBeDefined();
28 | expect(component.service.content).toEqual('Content from service');
29 | })
30 | });
31 |
--------------------------------------------------------------------------------
/angular/integration/demo-lib-v17/bit-test.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { BitTestComponent } from './bit-test.component';
4 |
5 | describe('BitTestComponent', () => {
6 | let component: BitTestComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ BitTestComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(BitTestComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 |
26 | it('should have a service', () => {
27 | expect(component.service).toBeDefined();
28 | expect(component.service.content).toEqual('Content from service');
29 | })
30 | });
31 |
--------------------------------------------------------------------------------
/angular/integration/demo-lib-v18/bit-test.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { BitTestComponent } from './bit-test.component';
4 |
5 | describe('BitTestComponent', () => {
6 | let component: BitTestComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ BitTestComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(BitTestComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 |
26 | it('should have a service', () => {
27 | expect(component.service).toBeDefined();
28 | expect(component.service.content).toEqual('Content from service');
29 | })
30 | });
31 |
--------------------------------------------------------------------------------
/angular/integration/demo-lib-v19/bit-test.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { BitTestComponent } from './bit-test.component';
4 |
5 | describe('BitTestComponent', () => {
6 | let component: BitTestComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ BitTestComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(BitTestComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 |
26 | it('should have a service', () => {
27 | expect(component.service).toBeDefined();
28 | expect(component.service.content).toEqual('Content from service');
29 | })
30 | });
31 |
--------------------------------------------------------------------------------
/angular/integration/demo-lib/src/bit-test.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { BitTestComponent } from './bit-test.component';
4 |
5 | describe('BitTestComponent', () => {
6 | let component: BitTestComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ BitTestComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(BitTestComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 |
26 | it('should have a service', () => {
27 | expect(component.service).toBeDefined();
28 | expect(component.service.content).toEqual('Content from service');
29 | })
30 | });
31 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v16-env/config/jest.config.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://bit.dev/reference/jest/jest-config
3 | */
4 | const jestConfig = require('@bitdev/angular.envs.angular-v16-env/jest/jest.config.cjs');
5 | const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder');
6 | const { defaultTransformerOptions } = require('jest-preset-angular/presets');
7 |
8 | const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular'];
9 |
10 | export default {
11 | ...jestConfig,
12 | transform: {
13 | '^.+\\.(ts|js|mjs|html|svg)$': [
14 | 'jest-preset-angular',
15 | {
16 | ...defaultTransformerOptions,
17 | tsconfig: require.resolve('./tsconfig.spec.json')
18 | }
19 | ]
20 | },
21 | transformIgnorePatterns: [
22 | '^.+.module.(css|sass|scss)$',
23 | generateNodeModulesPattern({
24 | packages: packagesToExclude,
25 | excludeComponents: true
26 | })
27 | ]
28 | };
29 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v17-env/config/jest.config.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://bit.dev/reference/jest/jest-config
3 | */
4 | const jestConfig = require('@bitdev/angular.envs.angular-v17-env/jest/jest.config.cjs');
5 | const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder');
6 | const { defaultTransformerOptions } = require('jest-preset-angular/presets');
7 |
8 | const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular'];
9 |
10 | module.exports = {
11 | ...jestConfig,
12 | transform: {
13 | '^.+\\.(ts|js|mjs|html|svg)$': [
14 | 'jest-preset-angular',
15 | {
16 | ...defaultTransformerOptions,
17 | tsconfig: require.resolve('./tsconfig.spec.json')
18 | }
19 | ]
20 | },
21 | transformIgnorePatterns: [
22 | '^.+.module.(css|sass|scss)$',
23 | generateNodeModulesPattern({
24 | packages: packagesToExclude,
25 | excludeComponents: true
26 | })
27 | ]
28 | };
29 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v18-env/config/jest.config.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://bit.dev/reference/jest/jest-config
3 | */
4 | const jestConfig = require('@bitdev/angular.envs.angular-v18-env/jest/jest.config.cjs');
5 | const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder');
6 | const { defaultTransformerOptions } = require('jest-preset-angular/presets');
7 |
8 | const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular'];
9 |
10 | module.exports = {
11 | ...jestConfig,
12 | transform: {
13 | '^.+\\.(ts|js|mjs|html|svg)$': [
14 | 'jest-preset-angular',
15 | {
16 | ...defaultTransformerOptions,
17 | tsconfig: require.resolve('./tsconfig.spec.json')
18 | }
19 | ]
20 | },
21 | transformIgnorePatterns: [
22 | '^.+.module.(css|sass|scss)$',
23 | generateNodeModulesPattern({
24 | packages: packagesToExclude,
25 | excludeComponents: true
26 | })
27 | ]
28 | };
29 |
--------------------------------------------------------------------------------
/angular/devkit/ng-compat/build-angular/utils/index.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import { json, logging } from '@angular-devkit/core';
3 | import { VERSION } from '@angular/cli';
4 | import { BrowserBuilderOptions } from '../builder-options';
5 |
6 | export * from './normalize-cache';
7 | export * from './package-chunk-sort';
8 | export * from './webpack-browser-config';
9 |
10 | export let normalizeBrowserSchema: (workspaceRoot: string, projectRoot: string, projectSourceRoot: string | undefined, options: BrowserBuilderOptions, metadata?: json.JsonObject, logger?: logging.LoggerApi) => any;
11 | export let normalizeOptimization: (optimization?: any) => any;
12 | export let BuildBrowserFeatures: any;
13 |
14 | if (VERSION.major) {
15 | const utils = require('@angular-devkit/build-angular/src/utils');
16 | normalizeBrowserSchema = utils.normalizeBrowserSchema;
17 | normalizeOptimization = utils.normalizeOptimization;
18 | BuildBrowserFeatures = utils.BuildBrowserFeatures;
19 | }
20 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v16-env/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "examples/my-angular-v16-env",
5 | "version": "7.3.2"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "@jest/globals": "^29.3.1",
13 | "@bitdev/angular.dev-services.linter.eslint": ">= 1.0.0",
14 | "@types/jest": "^29.5.0",
15 | "jest": "^29.5.0",
16 | "jest-preset-angular": "~13.1.0"
17 | }
18 | }
19 | },
20 | "teambit.component/renaming": {
21 | "renamedFrom": {
22 | "scope": "bitdev.angular",
23 | "name": "examples/angular-v16-env",
24 | "version": "1.0.1"
25 | }
26 | },
27 | "bitdev.general/envs/bit-env@1.0.21": {},
28 | "teambit.envs/envs": {
29 | "env": "bitdev.general/envs/bit-env"
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/angular/devkit/compiler/elements/rollup/utils/path.ts:
--------------------------------------------------------------------------------
1 | import * as nodePath from 'path';
2 |
3 | /* eslint-disable-next-line */
4 | const PATH_REGEXP = new RegExp('\\' + nodePath.win32.sep, 'g');
5 | const ensureUnixPathCache = new Map();
6 | const IS_WINDOWS = process.platform === 'win32';
7 |
8 | export const ensureUnixPath = IS_WINDOWS
9 | ? (path?: string): string | null => {
10 | if (!path) {
11 | return null;
12 | }
13 |
14 | const cachePath = ensureUnixPathCache.get(path);
15 | if (cachePath) {
16 | return cachePath;
17 | }
18 |
19 | // we use a regex instead of the character literal due to a bug in some versions of node.js
20 | // the path separator needs to be preceded by an escape character
21 | const normalizedPath = path.replace(PATH_REGEXP, nodePath.posix.sep);
22 | ensureUnixPathCache.set(path, normalizedPath);
23 |
24 | return normalizedPath;
25 | }
26 | : (path?: string) => path;
27 |
--------------------------------------------------------------------------------
/angular/devkit/common/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "dev-services/common",
5 | "version": "8.2.0"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "@angular-devkit/build-angular": "-",
13 | "typescript": "-",
14 | "normalize-path": "^3.0.0"
15 | },
16 | "peerDependencies": {
17 | "@angular-devkit/build-angular": ">= 0.0.1",
18 | "typescript": ">= 3.5.3"
19 | }
20 | }
21 | },
22 | "teambit.envs/envs": {},
23 | "teambit.component/dev-files": {},
24 | "teambit.pkg/pkg": {},
25 | "teambit.preview/preview": {},
26 | "teambit.compositions/compositions": {},
27 | "teambit.docs/docs": {},
28 | "teambit.pipelines/builder": {},
29 | "teambit.semantics/schema": {},
30 | "teambit.node/node@1.0.110": {}
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/angular/envs/angular-v19-env/jest/jest.config.cjs:
--------------------------------------------------------------------------------
1 | const { generateNodeModulesPattern } = require('@teambit/dependencies.modules.packages-excluder');
2 | const { createCjsPreset } = require('jest-preset-angular/presets');
3 |
4 | const packagesToExclude = ['@angular', '@ngrx', 'apollo-angular'];
5 | const presetConfig = createCjsPreset({
6 | tsconfig: require.resolve('./tsconfig.spec.json')
7 | });
8 |
9 | module.exports = {
10 | ...presetConfig,
11 | reporters: ['default'],
12 | setupFilesAfterEnv: [require.resolve('./setup-jest.cjs')],
13 | testPathIgnorePatterns: ['/.*/e2e/'],
14 | globals: {
15 | ngJest: {
16 | skipNgcc: true
17 | }
18 | },
19 | resolver: require.resolve('./jest.resolver.cjs'),
20 | moduleDirectories: ['/node_modules', 'node_modules'],
21 | transformIgnorePatterns: [
22 | '^.+.module.(css|sass|scss)$',
23 | generateNodeModulesPattern({
24 | packages: packagesToExclude,
25 | excludeComponents: true
26 | })
27 | ]
28 | };
29 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-env/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "examples/my-angular-env",
5 | "version": "8.3.2"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "@jest/globals": "^29.3.1",
13 | "@bitdev/angular.dev-services.linter.eslint": ">= 1.0.0",
14 | "@types/eslint": "^8.40.0",
15 | "@types/jest": "^29.5.0",
16 | "jest": "^29.5.0",
17 | "jest-preset-angular": "~14.4.0"
18 | }
19 | }
20 | },
21 | "teambit.component/renaming": {
22 | "renamedFrom": {
23 | "scope": "bitdev.angular",
24 | "name": "examples/angular-env",
25 | "version": "1.0.1"
26 | }
27 | },
28 | "bitdev.general/envs/bit-env@1.0.21": {},
29 | "teambit.envs/envs": {
30 | "env": "bitdev.general/envs/bit-env"
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/angular/integration/demo-elements/demo-elements.ng-elements.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Entry point for this Angular library, do not move or rename this file.
3 | * The exports should be a call to ngToCustomElements which returns the list of custom elements selectors.
4 | */
5 | import { provideExperimentalZonelessChangeDetection } from "@angular/core";
6 | import { ngToCustomElements } from "@bitdev/angular.dev-services.preview.runtime";
7 | import { DemoElementsComponent as Cmp } from "./demo-elements.component";
8 |
9 | /**
10 | * Transform a component into a custom element, and returns the selector for this element.
11 | * It is automatically defined into the custom elements registry when imported.
12 | * Be aware of the risk of selector collision when defining the components (as the registry is global), so you should
13 | * try to always use a prefix.
14 | */
15 | export const DemoElementsComponent = ngToCustomElements(Cmp, {
16 | providers: [
17 | provideExperimentalZonelessChangeDetection()
18 | ]
19 | });
20 |
--------------------------------------------------------------------------------
/angular/devkit/compiler/elements/rollup/ngc-plugin/compile.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 | import type { CompilerHost, CompilerOptions } from '@angular/compiler-cli';
3 | import { CompilerOptions as TsCompilerOptions } from 'typescript';
4 | import { ngCompilerCli } from '../utils/ng-compiler-cli';
5 |
6 | export interface CompileOptions {
7 | id: string;
8 | host: CompilerHost;
9 | options: CompilerOptions & TsCompilerOptions;
10 | files: Map;
11 | }
12 |
13 | export async function compile(opts: CompileOptions) {
14 | const { id, host, options, files } = opts;
15 | // @ts-ignore
16 | const { createProgram } = await ngCompilerCli();
17 |
18 | const program = createProgram({ rootNames: [id], options, host });
19 | program.emit();
20 |
21 | const file = id.replace(/\.tsx?/, '');
22 |
23 | const map = files.get(`${ file }.js.map`);
24 | const code = files.get(`${ file }.js`);
25 |
26 | return {
27 | code: (code ?? '').replace(/\/\/# sourceMappingURL.*/, ''),
28 | map
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/angular/devkit/preview/mounter/mounter.ts:
--------------------------------------------------------------------------------
1 | // required here to make sure that this is loaded before the compositions file
2 | import '@angular/compiler';
3 | // @ts-ignore
4 | import type { Type } from '@angular/core';
5 | import { ngBootstrap, NgBootstrapOptions } from '@bitdev/angular.dev-services.preview.runtime';
6 |
7 | export interface MounterOptions extends Omit {
8 | hostElement?: HTMLElement;
9 | }
10 |
11 | export function createMounter(Wrapper?: Type, options: MounterOptions = {}) {
12 | return async (Composition: Type) => {
13 | const root = options.hostElement ?? document.getElementById('root');
14 | if (!root) {
15 | throw new Error('Host element not found, please provide an `hostElement` or add an element with id "root" to the DOM');
16 | }
17 | await ngBootstrap(Composition, {
18 | ...options,
19 | hostElement: root,
20 | wrapper: Wrapper,
21 | });
22 | };
23 | }
24 |
25 | export default createMounter;
26 |
--------------------------------------------------------------------------------
/angular/devkit/vite/runtime/api-middleware.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is written in JavaScript
3 | * because it is used by Nitro to build
4 | * the renderer for SSR.
5 | *
6 | * The package is shipped as commonjs
7 | * which won't be parsed by Nitro correctly.
8 | */
9 | import { eventHandler, proxyRequest } from 'h3';
10 |
11 | export default eventHandler(async (event) => {
12 | const apiPrefix = `/${import.meta.env.RUNTIME_CONFIG?.apiPrefix ?? 'api'}`;
13 | if (event.node.req.url?.startsWith(apiPrefix)) {
14 | const reqUrl = event.node.req.url?.replace(apiPrefix, '');
15 |
16 | if (
17 | event.node.req.method === 'GET' &&
18 | // in the case of XML routes, we want to proxy the request so that nitro gets the correct headers
19 | // and can render the XML correctly as a static asset
20 | !event.node.req.url?.endsWith('.xml')
21 | ) {
22 | return $fetch(reqUrl);
23 | }
24 |
25 | return proxyRequest(event, reqUrl, {
26 | fetch: $fetch.native,
27 | });
28 | }
29 | });
30 |
--------------------------------------------------------------------------------
/angular/devkit/webpack/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "dev-services/webpack",
5 | "version": "8.2.0"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "typescript": "-"
13 | },
14 | "peerDependencies": {
15 | "@angular-devkit/build-angular": ">= 0.0.1",
16 | "typescript": ">= 3.5.3",
17 | "webpack": ">= 4.44.2"
18 | },
19 | "devDependencies": {
20 | "@babel/runtime": "7.22.15"
21 | }
22 | }
23 | },
24 | "teambit.envs/envs": {},
25 | "teambit.component/dev-files": {},
26 | "teambit.pkg/pkg": {},
27 | "teambit.preview/preview": {},
28 | "teambit.compositions/compositions": {},
29 | "teambit.docs/docs": {},
30 | "teambit.pipelines/builder": {},
31 | "teambit.semantics/schema": {},
32 | "teambit.node/node@1.0.110": {}
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/angular/docs/create-ng-app/bubble-graphs.tsx:
--------------------------------------------------------------------------------
1 | // import { PlainBubbleNode } from '@teambit/community.entity.graph.bubble-graph';
2 | import React from 'react';
3 | import {
4 | createBubbleGraph,
5 | // PlainBubbleNode,
6 | } from '@teambit/community.entity.graph.bubble-graph';
7 | import { BubbleGraph } from '@teambit/community.ui.graph.bubble-graph';
8 |
9 | const appNodes = createBubbleGraph([
10 | {
11 | id: 'teambit.community/apps/bit-dev@1.96.53',
12 | dependencies: ['teambit.docs/ui/community-docs@1.96.36'],
13 | payload: {
14 | icon: 'https://static.bit.dev/extensions-icons/react.svg',
15 | forceActive: true,
16 | },
17 | row: 2,
18 | col: 1,
19 | },
20 | {
21 | id: 'teambit.docs/ui/community-docs@1.96.36',
22 | dependencies: [],
23 | payload: {
24 | icon: 'https://static.bit.dev/extensions-icons/react.svg',
25 | forceActive: true,
26 | },
27 | row: 2,
28 | col: 6,
29 | },
30 | ]);
31 |
32 | export const AppGraph = () => ;
33 |
--------------------------------------------------------------------------------
/angular/devkit/webpack/webpack-plugins/stats-logger.ts:
--------------------------------------------------------------------------------
1 | import type { Compiler, Stats } from 'webpack';
2 |
3 | const PLUGIN_NAME = 'angular-stats-logger-plugin';
4 |
5 | export class StatsLoggerPlugin {
6 | async apply(compiler: Compiler) {
7 | // eslint-disable-next-line no-console
8 | const logger = {
9 | ...console
10 | };
11 | try {
12 | // "Executed when the compilation has completed."
13 | const { createWebpackLoggingCallback } = await import('@bitdev/angular.dev-services.ng-compat');
14 | const loggingCallback = createWebpackLoggingCallback({} as any, logger as any) as any;
15 | compiler.hooks.done.tap(PLUGIN_NAME, (stats: Stats) => {
16 | loggingCallback(stats, { stats: { logging: 'info', colors: true } });
17 | });
18 | } catch (e) {
19 | // if it fails, just continue (we don't need logging to break the build)
20 | // eslint-disable-next-line no-console
21 | console.log('Failed to load @bitdev/angular.dev-services.ng-compat', e);
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/angular/devkit/compiler/ng-packagr/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "componentId": {
3 | "scope": "bitdev.angular",
4 | "name": "dev-services/compiler/ng-packagr",
5 | "version": "8.2.0"
6 | },
7 | "propagate": false,
8 | "extensions": {
9 | "teambit.dependencies/dependency-resolver": {
10 | "policy": {
11 | "dependencies": {
12 | "@angular/compiler-cli": "-",
13 | "chalk": "^4.1.2",
14 | "ng-packagr": "-"
15 | },
16 | "peerDependencies": {
17 | "@angular/compiler-cli": ">= 13.0.0",
18 | "ng-packagr": ">=5.0.0"
19 | }
20 | }
21 | },
22 | "teambit.component/dev-files": {},
23 | "teambit.pkg/pkg": {},
24 | "teambit.preview/preview": {},
25 | "teambit.compositions/compositions": {},
26 | "teambit.docs/docs": {},
27 | "teambit.pipelines/builder": {},
28 | "teambit.semantics/schema": {},
29 | "teambit.envs/envs": {
30 | "env": "bitdev.node/node-env"
31 | },
32 | "bitdev.node/node-env@4.0.3": {}
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-standalone/files/component-spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentContext, ComponentFile } from '@teambit/generator';
2 |
3 | export const componentSpecFile = (context: ComponentContext): ComponentFile => {
4 | const { name, namePascalCase: Name } = context;
5 |
6 | return {
7 | relativePath: `${name}.spec.ts`,
8 | content: `import { ComponentFixture, TestBed } from '@angular/core/testing';
9 | import { ${Name}Component } from './${name}.component';
10 |
11 | describe('${Name}Component', () => {
12 | let component: ${Name}Component;
13 | let fixture: ComponentFixture<${Name}Component>;
14 |
15 | beforeEach(async () => {
16 | await TestBed.configureTestingModule({
17 | imports: [ ${Name}Component ]
18 | })
19 | .compileComponents();
20 |
21 | fixture = TestBed.createComponent(${Name}Component);
22 | component = fixture.componentInstance;
23 | fixture.detectChanges();
24 | });
25 |
26 | it('should create', () => {
27 | expect(component).toBeTruthy();
28 | });
29 | });
30 | `,
31 | };
32 | };
33 |
--------------------------------------------------------------------------------
/angular/devkit/vite/plugins/define.plugin.ts:
--------------------------------------------------------------------------------
1 | import { PluginBuild } from 'esbuild';
2 | import { merge } from 'lodash-es';
3 |
4 | export const stringifyDefine = (define: any) => {
5 | return Object.entries(define).reduce((acc: any, [key, value]) => {
6 | acc[key] = JSON.stringify(value);
7 | return acc;
8 | }, {});
9 | };
10 |
11 | /**
12 | * Pass environment variables to esbuild.
13 | * @returns An esbuild plugin.
14 | */
15 | export default function(defineValues: any = {}) {
16 | // set variables on global so that they also work during ssr
17 | merge(global, defineValues);
18 |
19 | return {
20 | name: 'env-define',
21 | setup(build: PluginBuild) {
22 | const { platform, define = {} } = build.initialOptions;
23 | if (platform === 'node') {
24 | return;
25 | }
26 |
27 | if (typeof defineValues !== 'string') {
28 | defineValues = stringifyDefine(defineValues);
29 | }
30 |
31 | build.initialOptions.define = {
32 | ...defineValues,
33 | ...define
34 | };
35 | }
36 | };
37 | }
38 |
--------------------------------------------------------------------------------
/angular/devkit/common/env-options.ts:
--------------------------------------------------------------------------------
1 | import { WebpackConfigWithDevServer } from '@teambit/webpack';
2 |
3 | export type WebpackConfigFactory = (opts: any) => Promise;
4 |
5 | export type AngularEnvOptions = {
6 | /**
7 | * Use Rollup & Angular Elements to compile compositions instead of webpack.
8 | * This transforms compositions into Web Components and replaces the Angular bundler by the React bundler.
9 | */
10 | jestModulePath: string;
11 | ngPackagrModulePath: string;
12 | webpackConfigFactory?: WebpackConfigFactory;
13 | webpackDevServerModulePath?: string;
14 | webpackModulePath?: string;
15 | /**
16 | * The dev server to use: webpack or vite.
17 | * Vite only works for apps, not preview yet.
18 | * @default 'webpack'
19 | */
20 | // devServer?: 'webpack' | 'vite';
21 | /**
22 | * The bundler to use: webpack or vite.
23 | * Vite only works for apps, not preview yet.
24 | * @default 'webpack'
25 | */
26 | // TODO: enable this once we have a working vite bundler
27 | // bundler?: 'webpack' | 'vite';
28 | };
29 |
--------------------------------------------------------------------------------
/angular/docs/create-ng-app/my-angular-app-files/my-angular-app.ng-app.ts:
--------------------------------------------------------------------------------
1 | export default `import { AngularAppOptions } from '@bitdev/angular.app-types.angular-app-type';
2 | import { BrowserOptions, DevServerOptions } from '@bitdev/angular.dev-services.common';
3 |
4 | const angularOptions: BrowserOptions & DevServerOptions = {
5 | main: './src/main.ts',
6 | polyfills: './src/polyfills.ts',
7 | index: './src/index.html',
8 | tsConfig: './tsconfig.app.json',
9 | assets: ['./src/assets/**/*'],
10 | styles: ['./src/styles.scss'],
11 | };
12 |
13 | export const MyAngularAppOptions: AngularAppOptions = {
14 | /**
15 | * Name of the app in Bit CLI.
16 | */
17 | name: 'my-angular-app',
18 |
19 | /**
20 | * Angular options for \`bit build\`
21 | */
22 | angularBuildOptions: angularOptions,
23 |
24 | /**
25 | * Angular options for \`bit run\`
26 | */
27 | angularServeOptions: angularOptions,
28 |
29 | /**
30 | * Folder containing the main file of your application
31 | */
32 | sourceRoot: './src',
33 | };
34 |
35 | export default MyAngularAppOptions;`;
36 |
--------------------------------------------------------------------------------
/angular/integration/demo-app/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async () => {
6 | await TestBed.configureTestingModule({
7 | imports: [AppComponent],
8 | }).compileComponents();
9 | });
10 |
11 | it('should create the app', () => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.componentInstance;
14 | expect(app).toBeTruthy();
15 | });
16 |
17 | it(`should have as title 'demo-app'`, () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app.title).toEqual('demo-app');
21 | });
22 |
23 | it('should render title', () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | fixture.detectChanges();
26 | const compiled = fixture.nativeElement as HTMLElement;
27 | expect(compiled.querySelector('.content h1')?.textContent).toContain('Hello, demo-app');
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/angular/devkit/preview/preview/docs.ts:
--------------------------------------------------------------------------------
1 | import type { RenderingContext } from '@teambit/preview';
2 | // @ts-ignore
3 | import type { Type } from '@angular/core';
4 | import { ReplaySubject } from 'rxjs';
5 |
6 | window.onDocsLoad$ = window.onDocsLoad$ || new ReplaySubject();
7 | const root = document.getElementById('root');
8 |
9 | export type DocsFile = {
10 | default: string;
11 | };
12 |
13 | export type DocsRootProps = {
14 | Provider: Type | undefined,
15 | componentId: string,
16 | docs: DocsFile | string | undefined,
17 | compositions: { [key: string]: any },
18 | context: RenderingContext
19 | }
20 |
21 | async function docsRoot({docs}: DocsRootProps): Promise {
22 | if (docs && root) {
23 | const appRoot = document.createElement('app-root');
24 | root.replaceChildren(appRoot);
25 | await window.ngMainStart();
26 | window.onDocsLoad$.next((docs as DocsFile).default ?? docs as string);
27 | }
28 | }
29 |
30 | // Add support for new api signature
31 | // TODO: remove by the end of 2022
32 | docsRoot.apiObject = true;
33 |
34 | export default docsRoot;
35 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-elements/files/docs.ts:
--------------------------------------------------------------------------------
1 | import { ComponentContext, ComponentFile } from '@teambit/generator';
2 |
3 | export const docsFile = (context: ComponentContext): ComponentFile => {
4 | const { name, namePascalCase: Name } = context;
5 |
6 | return {
7 | relativePath: `${name}.docs.md`,
8 | content: `---
9 | labels: ['angular', 'typescript', '${name}']
10 | description: 'A \`${name}\` component.'
11 | ---
12 |
13 | Import \`${Name}Component\` into your application and use the returned selector to create a component
14 | in the framework of your choice. For example with react:
15 |
16 | \`\`\`ts
17 | import { ${Name}Component } from '@my-scope/${name}';
18 | import type { ReactNode } from 'react';
19 |
20 | export type ${Name}Props = {
21 | /**
22 | * sets the component children.
23 | */
24 | children?: ReactNode;
25 | };
26 |
27 | // Use the component:
28 | export function ${Name}({ children }: ${Name}Props) {
29 | return (
30 | <${Name}Component>
31 | {children}
32 |
33 | );
34 | }
35 |
36 | \`\`\`
37 | `,
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/angular/devkit/preview/vite-preview/docs.ts:
--------------------------------------------------------------------------------
1 | import type { RenderingContext } from '@teambit/preview';
2 | // @ts-ignore
3 | import type { Type } from '@angular/core';
4 | import { ReplaySubject } from 'rxjs';
5 |
6 | window.onDocsLoad$ = window.onDocsLoad$ || new ReplaySubject();
7 | const root = document.getElementById('root');
8 |
9 | export type DocsFile = {
10 | default: string;
11 | };
12 |
13 | export type DocsRootProps = {
14 | Provider: Type | undefined,
15 | componentId: string,
16 | docs: DocsFile | string | undefined,
17 | compositions: { [key: string]: any },
18 | context: RenderingContext
19 | }
20 |
21 | async function docsRoot({docs}: DocsRootProps): Promise {
22 | if (docs && root) {
23 | const appRoot = document.createElement('app-root');
24 | root.replaceChildren(appRoot);
25 | await window.ngMainStart();
26 | window.onDocsLoad$.next((docs as DocsFile).default ?? docs as string);
27 | }
28 | }
29 |
30 | // Add support for new api signature
31 | // TODO: remove by the end of 2022
32 | docsRoot.apiObject = true;
33 |
34 | export default docsRoot;
35 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-module/files/component-spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentContext, ComponentFile } from '@teambit/generator';
2 |
3 | export const componentSpecFile = (context: ComponentContext): ComponentFile => {
4 | const { name, namePascalCase: Name } = context;
5 |
6 | return {
7 | relativePath: `${name}.spec.ts`,
8 | content: `import { ComponentFixture, TestBed } from '@angular/core/testing';
9 | import { ${Name}Component } from './${name}.component';
10 | import { ${Name}Module } from './${name}.module';
11 |
12 | describe('${Name}Component', () => {
13 | let component: ${Name}Component;
14 | let fixture: ComponentFixture<${Name}Component>;
15 |
16 | beforeEach(async () => {
17 | await TestBed.configureTestingModule({
18 | imports: [ ${Name}Module ]
19 | })
20 | .compileComponents();
21 |
22 | fixture = TestBed.createComponent(${Name}Component);
23 | component = fixture.componentInstance;
24 | fixture.detectChanges();
25 | });
26 |
27 | it('should create', () => {
28 | expect(component).toBeTruthy();
29 | });
30 | });
31 | `,
32 | };
33 | };
34 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-env/config/mounter.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-unresolved */
2 | import { createMounter } from '@bitdev/angular.dev-services.preview.mounter';
3 | import { Component, ViewEncapsulation } from '@angular/core';
4 |
5 | /**
6 | * Provide your component compositions (preview) with the context they need to run.
7 | * for example, a router, a theme, a data provider, etc.
8 | * components added here as providers should be listed as host-dependencies
9 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
10 | */
11 | @Component({
12 | selector: 'bit-wrapper',
13 | standalone: true,
14 | imports: [],
15 | encapsulation: ViewEncapsulation.None,
16 | template: `
17 |
18 | `,
19 | }) export class WrapperComponent {}
20 |
21 |
22 | /**
23 | * the entry for the app (preview runtime) that renders your component previews.
24 | * use the default template or create your own.
25 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
26 | */
27 | export default createMounter(WrapperComponent);
28 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v16-env/config/mounter.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-unresolved */
2 | import { createMounter } from '@bitdev/angular.dev-services.preview.mounter';
3 | import { Component, ViewEncapsulation } from '@angular/core';
4 |
5 | /**
6 | * Provide your component compositions (preview) with the context they need to run.
7 | * for example, a router, a theme, a data provider, etc.
8 | * components added here as providers should be listed as host-dependencies
9 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
10 | */
11 | @Component({
12 | selector: 'bit-wrapper',
13 | standalone: true,
14 | imports: [],
15 | encapsulation: ViewEncapsulation.None,
16 | template: `
17 |
18 | `,
19 | }) export class WrapperComponent {}
20 |
21 |
22 | /**
23 | * the entry for the app (preview runtime) that renders your component previews.
24 | * use the default template or create your own.
25 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
26 | */
27 | export default createMounter(WrapperComponent);
28 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v17-env/config/mounter.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-unresolved */
2 | import { createMounter } from '@bitdev/angular.dev-services.preview.mounter';
3 | import { Component, ViewEncapsulation } from '@angular/core';
4 |
5 | /**
6 | * Provide your component compositions (preview) with the context they need to run.
7 | * for example, a router, a theme, a data provider, etc.
8 | * components added here as providers should be listed as host-dependencies
9 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
10 | */
11 | @Component({
12 | selector: 'bit-wrapper',
13 | standalone: true,
14 | imports: [],
15 | encapsulation: ViewEncapsulation.None,
16 | template: `
17 |
18 | `,
19 | }) export class WrapperComponent {}
20 |
21 |
22 | /**
23 | * the entry for the app (preview runtime) that renders your component previews.
24 | * use the default template or create your own.
25 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
26 | */
27 | export default createMounter(WrapperComponent);
28 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v18-env/config/mounter.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-unresolved */
2 | import { createMounter } from '@bitdev/angular.dev-services.preview.mounter';
3 | import { Component, ViewEncapsulation } from '@angular/core';
4 |
5 | /**
6 | * Provide your component compositions (preview) with the context they need to run.
7 | * for example, a router, a theme, a data provider, etc.
8 | * components added here as providers should be listed as host-dependencies
9 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
10 | */
11 | @Component({
12 | selector: 'bit-wrapper',
13 | standalone: true,
14 | imports: [],
15 | encapsulation: ViewEncapsulation.None,
16 | template: `
17 |
18 | `,
19 | }) export class WrapperComponent {}
20 |
21 |
22 | /**
23 | * the entry for the app (preview runtime) that renders your component previews.
24 | * use the default template or create your own.
25 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
26 | */
27 | export default createMounter(WrapperComponent);
28 |
--------------------------------------------------------------------------------
/angular/examples/my-angular-v19-env/config/mounter.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-unresolved */
2 | import { createMounter } from '@bitdev/angular.dev-services.preview.mounter';
3 | import { Component, ViewEncapsulation } from '@angular/core';
4 |
5 | /**
6 | * Provide your component compositions (preview) with the context they need to run.
7 | * for example, a router, a theme, a data provider, etc.
8 | * components added here as providers should be listed as host-dependencies
9 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
10 | */
11 | @Component({
12 | selector: 'bit-wrapper',
13 | standalone: true,
14 | imports: [],
15 | encapsulation: ViewEncapsulation.None,
16 | template: `
17 |
18 | `,
19 | }) export class WrapperComponent {}
20 |
21 |
22 | /**
23 | * the entry for the app (preview runtime) that renders your component previews.
24 | * use the default template or create your own.
25 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
26 | */
27 | export default createMounter(WrapperComponent);
28 |
--------------------------------------------------------------------------------
/angular/templates/generators/ng-app/template-files/src/main.server.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFile } from '@teambit/generator';
2 |
3 | export const mainServerFile = (standalone: boolean): ComponentFile => {
4 | return {
5 | relativePath: `src/main.server.ts`,
6 | content: `import 'zone.js/node';
7 | ${standalone ? `import { bootstrapApplication } from '@angular/platform-browser';
8 | import { AppComponent } from './app/app.component';
9 | import { config } from './app/app.config.server';
10 |
11 | export default function bootstrap() {
12 | return bootstrapApplication(AppComponent, config);
13 | }` : `import { provideServerRendering } from '@angular/platform-server';
14 | import { NgModule } from '@angular/core';
15 | import { ServerModule } from '@angular/platform-server';
16 | import { AppModule } from './app/app.module';
17 | import { AppComponent } from './app/app.component';
18 |
19 | @NgModule({
20 | imports: [
21 | AppModule,
22 | ServerModule,
23 | ],
24 | providers: [provideServerRendering()],
25 | bootstrap: [AppComponent],
26 | })
27 | export default class AppServerModule {}`}`,
28 | };
29 | };
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bit-angular",
3 | "version": "1.0.0",
4 | "description": "Bit Angular
![](\"https://storage.googleapis.com/static.bit.dev/harmony-docs/readme-logo%20(2).png\"/)
",
5 | "directories": {
6 | "example": "integration"
7 | },
8 | "dependencies": {},
9 | "devDependencies": {},
10 | "scripts": {
11 | "format": "prettier \"./packages/**/*.+(ts|js|jsx|css|scss|tsx|md|mdx)\" --write",
12 | "format:check": "prettier \"./packages/**/*.+(ts|js|jsx|css|scss|tsx|md)\" --check",
13 | "clean": "bit capsule delete --scope-aspects && rm node_modules -rf && rm yarn.lock"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/teambit/bit-angular.git"
18 | },
19 | "keywords": [],
20 | "author": "teambit",
21 | "license": "ISC",
22 | "bugs": {
23 | "url": "https://github.com/teambit/bit-angular/issues"
24 | },
25 | "homepage": "https://github.com/teambit/bit-angular#readme",
26 | "packageManager": "pnpm@9.7.0+sha256.b35018fbfa8f583668b2649e407922a721355cd81f61beeb4ac1d4258e585559"
27 | }
28 |
--------------------------------------------------------------------------------
/angular/docs/ng-app-deploy/netlify.mdx:
--------------------------------------------------------------------------------
1 | import { InstallNetlify } from './commands';
2 |
3 | Run the following to install the Netlify deployer:
4 |
5 |
6 |
7 | Set the Netlify deployer in your app plugin file (`.ng-app.ts`):
8 |
9 | ```ts
10 | import {
11 | NetlifyOptions,
12 | Netlify,
13 | } from '@teambit/cloud-providers.deployers.netlify';
14 | import { AngularAppOptions } from '@bitdev/angular.app-types.angular-app-type';
15 |
16 | const netlify: NetlifyOptions = {
17 | /*
18 | * your Netlify authentication token. it's recommended to store the token it an env variable.
19 | * https://docs.netlify.com/cli/get-started/#obtain-a-token-in-the-netlify-ui
20 | */
21 | accessToken: process.env.NETLIFY_AUTH_TOKEN as string,
22 | productionSiteName: 'my-awesome-site',
23 | stagingSiteName: 'my-awesome-staging-site',
24 | /**
25 | * your Netlify team slug
26 | */
27 | team: 'a-team',
28 | };
29 |
30 | export const MyAngularAppOptions: AngularAppOptions = {
31 | name: 'my-angular-app',
32 | // ...
33 | deploy: Netlify.deploy(netlify),
34 | };
35 |
36 | export default MyAngularAppOptions;
37 | ```
38 |
--------------------------------------------------------------------------------
/angular/envs/base-env/config/mounter.ts:
--------------------------------------------------------------------------------
1 | import { createMounter } from '@bitdev/angular.dev-services.preview.mounter';
2 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
3 | import { Component, ViewEncapsulation } from '@angular/core';
4 |
5 | /**
6 | * Provide your component compositions (preview) with the context they need to run.
7 | * for example, a router, a theme, a data provider, etc.
8 | * components added here as providers should be listed as host-dependencies
9 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
10 | */
11 | @Component({
12 | selector: 'bit-wrapper',
13 | // @ts-ignore
14 | standalone: true,
15 | imports: [],
16 | encapsulation: ViewEncapsulation.None,
17 | template: `
18 |
19 | `,
20 | }) export class WrapperComponent {}
21 |
22 | /**
23 | * the entry for the app (preview runtime) that renders your component previews.
24 | * use the default template or create your own.
25 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
26 | */
27 | export default createMounter(WrapperComponent);
28 |
--------------------------------------------------------------------------------
/angular/devkit/ng-compat/build-angular/builders/application.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import type { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
3 | import { VERSION } from '@angular/cli';
4 | import type { OutputFile, Plugin } from 'esbuild';
5 | import { ApplicationBuilderOptions } from '../schemas/application.schema';
6 |
7 | export let buildApplicationInternal = (
8 | options: ApplicationBuilderOptions,
9 | context: BuilderContext & {
10 | signal?: AbortSignal;
11 | },
12 | // infrastructureSettings?: {
13 | // write?: boolean;
14 | // },
15 | plugins?: Plugin[] | { codePlugins: Plugin[], indexHtmlTransformer: any }
16 | // @ts-ignore
17 | ) => AsyncIterable;
24 |
25 | if(Number(VERSION.major) >= 18) {
26 | buildApplicationInternal = require('@angular/build').buildApplication;
27 | } else if (Number(VERSION.major) >= 16) {
28 | buildApplicationInternal = require('@angular-devkit/build-angular/src/builders/application').buildApplicationInternal;
29 | }
30 |
--------------------------------------------------------------------------------
/angular/envs/angular-v16-env/config/mounter.ts:
--------------------------------------------------------------------------------
1 | import { createMounter } from '@bitdev/angular.dev-services.preview.mounter';
2 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
3 | import { Component, ViewEncapsulation } from '@angular/core';
4 |
5 | /**
6 | * Provide your component compositions (preview) with the context they need to run.
7 | * for example, a router, a theme, a data provider, etc.
8 | * components added here as providers should be listed as host-dependencies
9 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
10 | */
11 | @Component({
12 | selector: 'bit-wrapper',
13 | // @ts-ignore
14 | standalone: true,
15 | imports: [],
16 | encapsulation: ViewEncapsulation.None,
17 | template: `
18 |
19 | `,
20 | }) export class WrapperComponent {}
21 |
22 | /**
23 | * the entry for the app (preview runtime) that renders your component previews.
24 | * use the default template or create your own.
25 | * @see https://bit.dev/docs/angular-env-env/components-preview#compositions-providers
26 | */
27 | export default createMounter(WrapperComponent);
28 |
--------------------------------------------------------------------------------
/angular/devkit/vite/plugins/md.plugin.ts:
--------------------------------------------------------------------------------
1 | import markdoc from '@markdoc/markdoc';
2 | import { Plugin, PluginBuild } from 'esbuild';
3 | import { promises } from 'fs';
4 |
5 | /**
6 | * This plugin uses build.onLoad to intercept .md filenames.
7 | * These files are then read from disk and parsed by remark.
8 | * @returns An esbuild plugin.
9 | */
10 | export default function () {
11 | const plugin: Plugin = {
12 | name: 'md-loader',
13 |
14 | setup(build: PluginBuild) {
15 | // intercept .md files
16 | build.onResolve({ filter: /\.md$/ }, args => {
17 | return {
18 | path: args.path,
19 | namespace: 'md-ns',
20 | }
21 | });
22 |
23 | build.onLoad({ filter: /.*/, namespace: 'md-ns' }, async args => {
24 | const data = await promises.readFile(args.path, 'utf8');
25 | const ast = markdoc.parse(data);
26 | const content = markdoc.transform(ast, {});
27 | const html = markdoc.renderers.html(content);
28 | return {
29 | contents: html,
30 | loader: 'text',
31 | };
32 | })
33 | }
34 | };
35 |
36 | return plugin;
37 | }
38 |
--------------------------------------------------------------------------------
6 |