@teambit/generator 1.0.108 → 1.0.109

package/component-generator.ts

@@ -0,0 +1,284 @@
+import Vinyl from 'vinyl';
+import fs from 'fs-extra';
+import pMapSeries from 'p-map-series';
+import path from 'path';
+import { Workspace } from '@teambit/workspace';
+import EnvsAspect, { EnvsMain } from '@teambit/envs';
+import camelcase from 'camelcase';
+import { BitError } from '@teambit/bit-error';
+import { Logger } from '@teambit/logger';
+import { TrackerMain } from '@teambit/tracker';
+import { linkToNodeModulesByIds } from '@teambit/workspace.modules.node-modules-linker';
+import { PathOsBasedRelative } from '@teambit/legacy/dist/utils/path';
+import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+import componentIdToPackageName from '@teambit/legacy/dist/utils/bit/component-id-to-package-name';
+import DataToPersist from '@teambit/legacy/dist/consumer/component/sources/data-to-persist';
+import { NewComponentHelperMain } from '@teambit/new-component-helper';
+import { ComponentID } from '@teambit/component-id';
+import { WorkspaceConfigFilesMain } from '@teambit/workspace-config-files';
+
+import { ComponentTemplate, ComponentFile, ComponentConfig } from './component-template';
+import { CreateOptions } from './create.cmd';
+import { OnComponentCreateSlot } from './generator.main.runtime';
+
+export type GenerateResult = {
+  id: ComponentID;
+  dir: string;
+  files: string[];
+  envId: string;
+  envSetBy: string;
+  packageName: string;
+  isApp?: boolean;
+  isEnv?: boolean;
+  dependencies?: string[];
+  installMissingDependencies?: boolean;
+};
+
+export type OnComponentCreateFn = (generateResults: GenerateResult[]) => Promise<void>;
+
+export class ComponentGenerator {
+  constructor(
+    private workspace: Workspace,
+    private componentIds: ComponentID[],
+    private options: Partial<CreateOptions>,
+    private template: ComponentTemplate,
+    private envs: EnvsMain,
+    private newComponentHelper: NewComponentHelperMain,
+    private tracker: TrackerMain,
+    private wsConfigFiles: WorkspaceConfigFilesMain,
+    private logger: Logger,
+    private onComponentCreateSlot: OnComponentCreateSlot,
+    private aspectId: string,
+    private envId?: ComponentID
+  ) {}
+
+  async generate(): Promise<GenerateResult[]> {
+    const dirsToDeleteIfFailed: string[] = [];
+    const generateResults = await pMapSeries(this.componentIds, async (componentId) => {
+      try {
+        const componentPath = this.newComponentHelper.getNewComponentPath(
+          componentId,
+          this.options.path,
+          this.componentIds.length
+        );
+        if (fs.existsSync(path.join(this.workspace.path, componentPath))) {
+          throw new BitError(`unable to create a component at "${componentPath}", this path already exist`);
+        }
+        if (await this.workspace.hasName(componentId.fullName)) {
+          throw new BitError(
+            `unable to create a component "${componentId.fullName}", a component with the same name already exist`
+          );
+        }
+        dirsToDeleteIfFailed.push(componentPath);
+        return await this.generateOneComponent(componentId, componentPath);
+      } catch (err: any) {
+        await this.deleteGeneratedComponents(dirsToDeleteIfFailed);
+        throw err;
+      }
+    });
+
+    await this.workspace.bitMap.write(`create (${this.componentIds.length} components)`);
+
+    const ids = generateResults.map((r) => r.id);
+    await this.tryLinkToNodeModules(ids);
+    await this.runOnComponentCreateHook(generateResults);
+    // We are running this after the runOnComponentCreateHook as it require
+    // the env to be installed to work properly, and the hook might install
+    // the env.
+    await this.tryWriteConfigFiles(ids);
+
+    return generateResults;
+  }
+
+  private async tryLinkToNodeModules(ids: ComponentID[]) {
+    try {
+      await linkToNodeModulesByIds(
+        this.workspace,
+        ids.map((id) => id)
+      );
+    } catch (err: any) {
+      this.logger.consoleFailure(
+        `failed linking the new components to node_modules, please run "bit link" manually. error: ${err.message}`
+      );
+    }
+  }
+
+  private async runOnComponentCreateHook(generateResults: GenerateResult[]) {
+    const fns = this.onComponentCreateSlot.values();
+    if (!fns.length) return;
+    await Promise.all(fns.map((fn) => fn(generateResults)));
+  }
+
+  /**
+   * The function `tryWriteConfigFiles` attempts to write workspace config files, and if it fails, it logs an error
+   * message.
+   * @returns If the condition `!shouldWrite` is true, then nothing is being returned. Otherwise, if the `writeConfigFiles`
+   * function is successfully executed, nothing is being returned. If an error occurs during the execution of
+   * `writeConfigFiles`, an error message is being returned.
+   */
+  private async tryWriteConfigFiles(ids: ComponentID[]) {
+    const shouldWrite = this.wsConfigFiles.isWorkspaceConfigWriteEnabled();
+    if (!shouldWrite) return;
+    ids.map((id) => this.workspace.clearComponentCache(id));
+    const { err } = await this.wsConfigFiles.writeConfigFiles({
+      clean: true,
+      silent: true,
+      dedupe: true,
+      throw: false,
+    });
+    if (err) {
+      this.logger.consoleFailure(
+        `failed generating workspace config files, please run "bit ws-config write" manually. error: ${err.message}`
+      );
+    }
+  }
+
+  private async deleteGeneratedComponents(dirs: string[]) {
+    await Promise.all(
+      dirs.map(async (dir) => {
+        const absoluteDir = path.join(this.workspace.path, dir);
+        try {
+          await fs.remove(absoluteDir);
+        } catch (err: any) {
+          if (err.code !== 'ENOENT') {
+            // if not exist, it's fine
+            throw err;
+          }
+        }
+      })
+    );
+  }
+
+  private async generateOneComponent(componentId: ComponentID, componentPath: string): Promise<GenerateResult> {
+    const name = componentId.name;
+    const namePascalCase = camelcase(name, { pascalCase: true });
+    const nameCamelCase = camelcase(name);
+    const aspectId = ComponentID.fromString(this.aspectId);
+
+    const files = await this.template.generateFiles({
+      name,
+      namePascalCase,
+      nameCamelCase,
+      componentId,
+      aspectId,
+      envId: this.envId,
+    });
+    const mainFile = files.find((file) => file.isMain);
+    await this.writeComponentFiles(componentPath, files);
+    const addResults = await this.tracker.track({
+      rootDir: componentPath,
+      mainFile: mainFile?.relativePath,
+      componentName: componentId.fullName,
+      defaultScope: this.options.scope,
+    });
+    const component = await this.workspace.get(componentId);
+    const hasEnvConfiguredOriginally = this.envs.hasEnvConfigured(component);
+    if (this.template.isApp) {
+      await this.workspace.use(componentId.toString());
+    }
+    const envBeforeConfigChanges = this.envs.getEnv(component);
+    let config = this.template.config;
+    if (config && typeof config === 'function') {
+      const boundConfig = this.template.config?.bind(this.template);
+      config = boundConfig({ aspectId: this.aspectId });
+    }
+
+    const userEnv = this.options.env;
+
+    if (!config && this.envId && !userEnv) {
+      const isInWorkspace = this.workspace.exists(this.envId);
+      config = {
+        [isInWorkspace ? this.envId.toStringWithoutVersion() : this.envId.toString()]: {},
+        'teambit.envs/envs': {
+          env: this.envId.toStringWithoutVersion(),
+        },
+      };
+    }
+
+    const templateEnv = config?.[EnvsAspect.id]?.env;
+
+    if (config && templateEnv && hasEnvConfiguredOriginally) {
+      // remove the env we got from the template.
+      delete config[templateEnv];
+      delete config[EnvsAspect.id].env;
+      if (Object.keys(config[EnvsAspect.id]).length === 0) delete config[EnvsAspect.id];
+      if (Object.keys(config).length === 0) config = undefined;
+    }
+
+    const configWithEnv = await this.addEnvIfProvidedByFlag(config);
+    if (configWithEnv) this.workspace.bitMap.setEntireConfig(component.id, configWithEnv);
+
+    const getEnvData = () => {
+      const envFromFlag = this.options.env; // env entered by the user when running `bit create --env`
+      const envFromTemplate = config?.[EnvsAspect.id]?.env;
+      if (envFromFlag) {
+        return {
+          envId: envFromFlag,
+          setBy: '--env flag',
+        };
+      }
+      if (envFromTemplate) {
+        return {
+          envId: envFromTemplate,
+          setBy: 'template',
+        };
+      }
+      return {
+        envId: envBeforeConfigChanges.id,
+        setBy: hasEnvConfiguredOriginally ? 'workspace variants' : '<default>',
+      };
+    };
+    const { envId, setBy } = getEnvData();
+    return {
+      id: componentId,
+      dir: componentPath,
+      files: addResults.files,
+      packageName: componentIdToPackageName(component.state._consumer),
+      envId,
+      envSetBy: setBy,
+      isApp: this.template.isApp,
+      isEnv: this.template.isEnv,
+      dependencies: this.template.dependencies,
+      installMissingDependencies: this.template.installMissingDependencies,
+    };
+  }
+
+  private async addEnvIfProvidedByFlag(config?: ComponentConfig): Promise<ComponentConfig | undefined> {
+    const userEnv = this.options.env; // env entered by the user when running `bit create --env`
+    const templateEnv = config?.[EnvsAspect.id]?.env;
+    if (!userEnv || userEnv === templateEnv) {
+      return config;
+    }
+    config = config || {};
+    if (templateEnv) {
+      // the component template has an env and the user wants a different env.
+      delete config[templateEnv];
+    }
+    await this.tracker.addEnvToConfig(userEnv, config);
+
+    return config;
+  }
+
+  /**
+   * writes the generated template files to the default directory set in the workspace config
+   */
+  private async writeComponentFiles(
+    componentPath: string,
+    templateFiles: ComponentFile[]
+  ): Promise<PathOsBasedRelative[]> {
+    const dataToPersist = new DataToPersist();
+    const vinylFiles = templateFiles.map((templateFile) => {
+      const templateFileVinyl = new Vinyl({
+        base: componentPath,
+        path: path.join(componentPath, templateFile.relativePath),
+        contents: Buffer.from(templateFile.content),
+      });
+      return AbstractVinyl.fromVinyl(templateFileVinyl);
+    });
+    const results = vinylFiles.map((v) => v.path);
+    dataToPersist.addManyFiles(vinylFiles);
+    dataToPersist.addBasePath(this.workspace.path);
+    await dataToPersist.persistAllToFS();
+    return results;
+  }
+}

package/component-template.ts

@@ -0,0 +1,152 @@
+import { ComponentID } from '@teambit/component';
+
+/**
+ * BaseComponentTemplateOptions describes the foundational properties for components.
+ */
+export interface BaseComponentTemplateOptions {
+  /**
+   * component-name as entered by the user, e.g. `use-date`.
+   * without the scope and the namespace.
+   */
+  name: string;
+
+  /**
+   * component-name as upper camel case, e.g. `use-date` becomes `UseDate`.
+   * useful when generating the file content, for example for a class name.
+   */
+  namePascalCase: string;
+
+  /**
+   * component-name as lower camel case, e.g. `use-date` becomes `useDate`.
+   * useful when generating the file content, for example for a function/variable name.
+   */
+  nameCamelCase: string;
+
+  /**
+   * component id.
+   * the name is the name+namespace. the scope is the scope entered by --scope flag or the defaultScope
+   */
+  componentId: ComponentID;
+
+  /**
+   * aspect id of the aspect that register the template itself
+   */
+  aspectId: ComponentID | string;
+
+  /**
+   * env id of the env that register the template itself.
+   * This will be usually identical to the aspectId but aspectId will always exist,
+   * while envId will be undefined if the template is not registered by an env.
+   */
+  envId?: ComponentID;
+
+  /**
+   * path of the component.
+   */
+  path?: string;
+  /**
+   * scope of the component.
+   */
+  scope?: string;
+  /**
+   * namespace of the component.
+   */
+  namespace?: string;
+}
+
+/**
+ * ComponentContext represents foundational properties for a component context.
+ */
+export type ComponentContext = BaseComponentTemplateOptions;
+
+export interface ComponentFile {
+  /**
+   * relative path of the file within the component.
+   */
+  relativePath: string;
+
+  /**
+   * file content
+   */
+  content: string;
+
+  /**
+   * whether this file will be tracked as the main file
+   */
+  isMain?: boolean;
+}
+
+export interface ConfigContext {
+  /**
+   * Aspect id of the aspect that register the template itself
+   */
+  aspectId: string;
+}
+
+export type ComponentConfig = { [aspectName: string]: any };
+
+export interface ComponentTemplateOptions {
+  /**
+   * name of the component template. for example: `hook`, `react-component` or `module`.
+   */
+  name?: string;
+
+  /**
+   * short description of the template. shown in the `bit templates` command.
+   */
+  description?: string;
+
+  /**
+   * hide this template so that it is not listed with `bit templates`
+   */
+  hidden?: boolean;
+
+  /**
+   * env to use for the generated component.
+   */
+  env?: string;
+
+  /**
+   * adds a metadata that the component that this template creates is of type env.
+   * This will be used later to do further configuration for example:
+   * - ensure to create the .bit_root for it
+   */
+  isEnv?: boolean;
+
+  /**
+   * adds a metadata that the component that this template creates is of type app.
+   * This will be used later to do further configuration for example:
+   * - add it to the workspace.jsonc as app
+   * - ensure to create the .bit_root for it
+   */
+  isApp?: boolean;
+
+  /**
+   * list of dependencies to install when the component is created.
+   */
+  dependencies?: string[];
+
+  /**
+   * Perform installation of missing dependencies after component generation.
+   * This is the same as of running `bit install --add-missing-deps` after component generation.
+   */
+  installMissingDependencies?: boolean;
+}
+
+export interface ComponentTemplate extends ComponentTemplateOptions {
+  name: string;
+
+  /**
+   * template function for generating the file of a certain component.,
+   */
+  generateFiles(context: ComponentContext): Promise<ComponentFile[]> | ComponentFile[];
+
+  /**
+   * component config. gets saved in the .bitmap file and it overrides the workspace.jsonc config.
+   * for example, you can set the env that will be used for this component as follows:
+   * "teambit.envs/envs": {
+   *    "env": "teambit.harmony/aspect"
+   * },
+   */
+  config?: ComponentConfig | ((context: ConfigContext) => ComponentConfig);
+}

package/create.cmd.ts

@@ -0,0 +1,88 @@
+import { Command, CommandOptions } from '@teambit/cli';
+import { ComponentID } from '@teambit/component';
+import chalk from 'chalk';
+import { GeneratorMain } from './generator.main.runtime';
+import type { BaseComponentTemplateOptions } from './component-template';
+
+/**
+ * CreateOptions combines foundational properties with additional options for creating a component.
+ */
+export type CreateOptions = BaseComponentTemplateOptions & {
+  env?: string;
+  aspect?: string;
+};
+
+export class CreateCmd implements Command {
+  name = 'create <template-name> <component-names...>';
+  description = 'create a new component (source files and config) using a template.';
+  alias = '';
+  loader = true;
+  helpUrl = 'reference/starters/create-starter';
+  arguments = [
+    {
+      name: 'template-name',
+      description:
+        "the template for generating the component \n(run 'bit templates' for a list of available templates)",
+    },
+    {
+      name: 'component-names...',
+      description: 'a list of component names to generate',
+    },
+  ];
+  examples = [
+    {
+      cmd: 'bit create react ui/button --aspect teambit.react/react-env',
+      description: "creates a component named 'ui/button' using the 'react' template",
+    },
+    {
+      cmd: 'bit create node utils/is-string utils/is-number --aspect teambit.node/node',
+      description:
+        "creates two components, 'utils/is-string' and 'utils/is-number' using the 'node' template from the 'node' aspect(env)",
+    },
+    {
+      cmd: 'bit create mdx docs/create-components --aspect teambit.mdx/mdx-env --scope my-org.my-scope',
+      description:
+        "creates an mdx component named 'docs/create-components' and sets it scope to 'my-org.my-scope'. \nby default, the scope is the `defaultScope` value, configured in your `workspace.jsonc`.",
+    },
+    {
+      cmd: 'bit create react ui/button --aspect teambit.react/react-env --env teambit.community/envs/community-react@3.0.3',
+      description:
+        "creates a component named 'ui/button' from the teambit.react/react-env env and sets it to use the 'community-react' env. \n(the template's default env is 'teambit.react/react-env').",
+    },
+  ];
+  group = 'development';
+  options = [
+    ['n', 'namespace <string>', `sets the component's namespace and nested dirs inside the scope`],
+    ['s', 'scope <string>', `sets the component's scope-name. if not entered, the default-scope will be used`],
+    ['a', 'aspect <string>', 'aspect-id of the template. helpful when multiple aspects use the same template name'],
+    ['t', 'template <string>', 'env-id of the template. alias for --aspect.'],
+    ['p', 'path <string>', 'relative path in the workspace. by default the path is `<scope>/<namespace>/<name>`'],
+    ['e', 'env <string>', "set the component's environment. (overrides the env from variants and the template)"],
+  ] as CommandOptions;
+
+  constructor(private generator: GeneratorMain) {}
+
+  async report(
+    [templateName, componentNames]: [string, string[]],
+    options: Partial<CreateOptions> & {
+      template?: string | ComponentID;
+    }
+  ) {
+    options.aspectId = options.aspectId ?? options.template;
+    const results = await this.generator.generateComponentTemplate(componentNames, templateName, options);
+    const title = `${results.length} component(s) were created`;
+
+    const componentsData = results
+      .map((result) => {
+        return `${chalk.bold(result.id.toString())}
+    location: ${result.dir}
+    env:      ${result.envId} (set by ${result.envSetBy})
+    package:  ${result.packageName}
+`;
+      })
+      .join('\n');
+    const footer = `env configuration is according to workspace variants, template config or --env flag.`;
+
+    return `${chalk.green(title)}\n\n${componentsData}\n\n${footer}`;
+  }
+}

package/dist/component-generator.d.ts

@@ -8,7 +8,7 @@ import { WorkspaceConfigFilesMain } from '@teambit/workspace-config-files';
 import { ComponentTemplate } from './component-template';
 import { CreateOptions } from './create.cmd';
 import { OnComponentCreateSlot } from './generator.main.runtime';
-export declare type GenerateResult = {
+export type GenerateResult = {
     id: ComponentID;
     dir: string;
     files: string[];
@@ -20,7 +20,7 @@ export declare type GenerateResult = {
     dependencies?: string[];
     installMissingDependencies?: boolean;
 };
-export declare type OnComponentCreateFn = (generateResults: GenerateResult[]) => Promise<void>;
+export type OnComponentCreateFn = (generateResults: GenerateResult[]) => Promise<void>;
 export declare class ComponentGenerator {
     private workspace;
     private componentIds;
@@ -34,7 +34,7 @@ export declare class ComponentGenerator {
     private onComponentCreateSlot;
     private aspectId;
     private envId?;
-    constructor(workspace: Workspace, componentIds: ComponentID[], options: Partial<CreateOptions>, template: ComponentTemplate, envs: EnvsMain, newComponentHelper: NewComponentHelperMain, tracker: TrackerMain, wsConfigFiles: WorkspaceConfigFilesMain, logger: Logger, onComponentCreateSlot: OnComponentCreateSlot, aspectId: string, envId?: ComponentID | undefined);
+    constructor(workspace: Workspace, componentIds: ComponentID[], options: Partial<CreateOptions>, template: ComponentTemplate, envs: EnvsMain, newComponentHelper: NewComponentHelperMain, tracker: TrackerMain, wsConfigFiles: WorkspaceConfigFilesMain, logger: Logger, onComponentCreateSlot: OnComponentCreateSlot, aspectId: string, envId?: ComponentID);
     generate(): Promise<GenerateResult[]>;
     private tryLinkToNodeModules;
     private runOnComponentCreateHook;

package/dist/component-generator.js

@@ -182,7 +182,6 @@ class ComponentGenerator {
     }));
   }
   async generateOneComponent(componentId, componentPath) {
-    var _config;
     const name = componentId.name;
     const namePascalCase = (0, _camelcase().default)(name, {
       pascalCase: true
@@ -201,7 +200,7 @@ class ComponentGenerator {
     await this.writeComponentFiles(componentPath, files);
     const addResults = await this.tracker.track({
       rootDir: componentPath,
-      mainFile: mainFile === null || mainFile === void 0 ? void 0 : mainFile.relativePath,
+      mainFile: mainFile?.relativePath,
       componentName: componentId.fullName,
       defaultScope: this.options.scope
     });
@@ -213,8 +212,7 @@ class ComponentGenerator {
     const envBeforeConfigChanges = this.envs.getEnv(component);
     let config = this.template.config;
     if (config && typeof config === 'function') {
-      var _this$template$config;
-      const boundConfig = (_this$template$config = this.template.config) === null || _this$template$config === void 0 ? void 0 : _this$template$config.bind(this.template);
+      const boundConfig = this.template.config?.bind(this.template);
       config = boundConfig({
         aspectId: this.aspectId
       });
@@ -229,7 +227,7 @@ class ComponentGenerator {
         }
       };
     }
-    const templateEnv = (_config = config) === null || _config === void 0 || (_config = _config[_envs().default.id]) === null || _config === void 0 ? void 0 : _config.env;
+    const templateEnv = config?.[_envs().default.id]?.env;
     if (config && templateEnv && hasEnvConfiguredOriginally) {
       // remove the env we got from the template.
       delete config[templateEnv];
@@ -240,9 +238,8 @@ class ComponentGenerator {
     const configWithEnv = await this.addEnvIfProvidedByFlag(config);
     if (configWithEnv) this.workspace.bitMap.setEntireConfig(component.id, configWithEnv);
     const getEnvData = () => {
-      var _config2;
       const envFromFlag = this.options.env; // env entered by the user when running `bit create --env`
-      const envFromTemplate = (_config2 = config) === null || _config2 === void 0 || (_config2 = _config2[_envs().default.id]) === null || _config2 === void 0 ? void 0 : _config2.env;
+      const envFromTemplate = config?.[_envs().default.id]?.env;
       if (envFromFlag) {
         return {
           envId: envFromFlag,
@@ -278,9 +275,8 @@ class ComponentGenerator {
     };
   }
   async addEnvIfProvidedByFlag(config) {
-    var _config3;
     const userEnv = this.options.env; // env entered by the user when running `bit create --env`
-    const templateEnv = (_config3 = config) === null || _config3 === void 0 || (_config3 = _config3[_envs().default.id]) === null || _config3 === void 0 ? void 0 : _config3.env;
+    const templateEnv = config?.[_envs().default.id]?.env;
     if (!userEnv || userEnv === templateEnv) {
       return config;
     }