@teambit/aspect 1.0.107 → 1.0.108

package/aspect.aspect.ts

@@ -0,0 +1,7 @@
+import { Aspect } from '@teambit/harmony';
+
+export const AspectAspect = Aspect.create({
+  id: 'teambit.harmony/aspect',
+});
+
+export default AspectAspect;

package/aspect.cmd.ts

@@ -0,0 +1,255 @@
+// eslint-disable-next-line max-classes-per-file
+import { Command, CommandOptions } from '@teambit/cli';
+import { CLITable } from '@teambit/cli-table';
+import chalk from 'chalk';
+import { ExtensionDataList } from '@teambit/legacy/dist/consumer/config';
+import { COMPONENT_PATTERN_HELP } from '@teambit/legacy/dist/constants';
+import { AspectMain } from './aspect.main.runtime';
+
+export class ListAspectCmd implements Command {
+  name = 'list [pattern]';
+  description = 'list all aspects configured on component(s)';
+  arguments = [
+    {
+      name: 'pattern',
+      description: COMPONENT_PATTERN_HELP,
+    },
+  ];
+  options = [['d', 'debug', 'show the origins where the aspects were taken from']] as CommandOptions;
+  group = 'development';
+
+  constructor(private aspect: AspectMain) {}
+
+  async report([name]: [string], { debug }: { debug: boolean }) {
+    const listAspectsResults = await this.aspect.listAspectsOfComponent(name);
+    const rows = Object.keys(listAspectsResults).map((componentId) => {
+      const longestAspectName = Math.max(...listAspectsResults[componentId].map((_) => _.aspectName.length));
+      const aspects = listAspectsResults[componentId]
+        .map((aspectSource) => {
+          const origin = debug ? ` (origin: ${aspectSource.source})` : '';
+          const aspectName = aspectSource.aspectName.padEnd(longestAspectName);
+          return `${aspectName} (level: ${aspectSource.level})${origin}`;
+        })
+        .join('\n');
+
+      return [componentId, aspects];
+    });
+    const table = new CLITable([], rows);
+    return table.render();
+  }
+}
+
+export type SetAspectOptions = { merge?: boolean };
+
+export class SetAspectCmd implements Command {
+  name = 'set <pattern> <aspect-id> [config]';
+  description = 'set components with an aspect to extend their development tools, metadata and (possibly) artifacts';
+  arguments = [
+    {
+      name: 'pattern',
+      description: `the components to extend. ${COMPONENT_PATTERN_HELP}`,
+    },
+    {
+      name: 'aspect-id',
+      description: "the aspect's component id",
+    },
+    {
+      name: 'config',
+      description: `the aspect config. enter the config as a stringified JSON (e.g. '{"foo":"bar"}' ). when no config is provided, an aspect is set with an empty config ({}).`,
+    },
+  ];
+  options = [
+    ['m', 'merge', 'merge with an existing config if exits. (by default, it replaces overlapping existing configs)'],
+  ] as CommandOptions;
+  group = 'development';
+
+  constructor(private aspect: AspectMain) {}
+
+  async report([pattern, aspectId, config]: [string, string, string], options: SetAspectOptions) {
+    const configParsed = config ? JSON.parse(config) : {};
+    const results = await this.aspect.setAspectsToComponents(pattern, aspectId, configParsed, options);
+    if (!results.length)
+      return chalk.yellow(`unable to find any matching components for ${chalk.bold(pattern)} pattern`);
+    return chalk.green(`the following component(s) have been successfully updated:\n${results.join('\n')}`);
+  }
+}
+
+export class UpdateAspectCmd implements Command {
+  name = 'update <aspect-id> [pattern]';
+  description = 'update a version of an aspect for all or specified components';
+  arguments = [
+    {
+      name: 'aspect-id',
+      description:
+        "the aspect's component id. optionally, add a version (id@version), otherwise will use the latest version from the remote",
+    },
+    {
+      name: 'pattern',
+      description: `the components to update (defaults to all components). ${COMPONENT_PATTERN_HELP}`,
+    },
+  ];
+  examples = [
+    {
+      cmd: "bit aspect update scope.org/aspect '**/ui/**'",
+      description: 'update all components with the "ui" namespace that use scope.org/aspect, to use its latest version',
+    },
+    {
+      cmd: 'bit aspect update scope.org/aspect@2.0.0',
+      description:
+        'update version of scope.org/aspect to version 2.0.0 for all components configured with that aspect.',
+    },
+  ];
+  options = [];
+  group = 'development';
+
+  constructor(private aspect: AspectMain) {}
+
+  async report([aspectId, pattern]: [string, string]) {
+    const { updated, alreadyUpToDate } = await this.aspect.updateAspectsToComponents(aspectId, pattern);
+    if (updated.length) {
+      return chalk.green(`the following component(s) have been successfully updated:\n${updated.join('\n')}`);
+    }
+    if (alreadyUpToDate.length) {
+      return chalk.green(
+        `all ${alreadyUpToDate.length} component(s) that use this aspect are already up to date. nothing to update`
+      );
+    }
+    return chalk.yellow(`unable to find any components in this workspace that use ${chalk.bold(aspectId)}`);
+  }
+}
+
+export class UnsetAspectCmd implements Command {
+  name = 'unset <pattern> <aspect-id>';
+  description = `unset an aspect from component(s).`;
+  arguments = [
+    {
+      name: 'pattern',
+      description: `the components to target. ${COMPONENT_PATTERN_HELP}`,
+    },
+    {
+      name: 'aspect-id',
+      description: "the aspect's component id",
+    },
+  ];
+  options = [];
+  group = 'development';
+
+  constructor(private aspect: AspectMain) {}
+
+  async report([pattern, aspectId]: [string, string]) {
+    const results = await this.aspect.unsetAspectsFromComponents(pattern, aspectId);
+    if (!results.length)
+      return chalk.yellow(`unable to find any matching components for ${chalk.bold(pattern)} pattern`);
+    return chalk.green(`the following component(s) have been successfully updated:\n${results.join('\n')}`);
+  }
+}
+
+export class GetAspectCmd implements Command {
+  name = 'get <component-name>';
+  description = 'list the aspects set on a component, as well as their configs and data';
+  arguments = [
+    {
+      name: 'component-name',
+      description: 'the component name or component id to fetch aspects for',
+    },
+  ];
+  options = [
+    ['d', 'debug', 'show the origins where the aspects were taken from'],
+    ['j', 'json', 'format as json'],
+  ] as CommandOptions;
+  group = 'development';
+
+  constructor(private aspect: AspectMain) {}
+
+  async report([componentName]: [string], { debug }: { debug: boolean }) {
+    const extensionsDetailsToString = (extensions: ExtensionDataList) =>
+      extensions
+        .map((e) => {
+          const { name, data, config, extensionId } = e.toComponentObject();
+          return `${chalk.bold('name:')}   ${name || extensionId?.toString()}
+${chalk.bold('config:')} ${JSON.stringify(config, undefined, 2)}
+${chalk.bold('data:')}   ${JSON.stringify(data, undefined, 2)}
+`;
+        })
+        .join('\n');
+
+    if (debug) {
+      const {
+        aspects,
+        extensions: mergedExtensions,
+        beforeMerge,
+      } = await this.aspect.getAspectsOfComponentForDebugging(componentName);
+      const beforeMergeOutput = beforeMerge
+        .map(({ origin, extensions, extraData }) => {
+          const title = chalk.green.bold(`Origin: ${origin}`);
+          const details = extensionsDetailsToString(extensions);
+          const moreData = extraData ? `\n${chalk.bold('Extra Data:')} ${JSON.stringify(extraData, undefined, 2)}` : '';
+          return `${title}\n${details}${moreData}`;
+        })
+        .join('\n\n');
+
+      const afterMergeTitle = chalk.green.bold('After merging the origins above');
+      const afterMergeOutput = `${afterMergeTitle}\n${extensionsDetailsToString(mergedExtensions)}`;
+
+      const afterFinalMergeTitle = chalk.green.bold('Final - After merging the origins above and the loaded data');
+      const afterFinalMergeOutput = `${afterFinalMergeTitle}\n${extensionsDetailsToString(aspects.toLegacy())}`;
+
+      return `${beforeMergeOutput}\n\n${afterMergeOutput}\n\n\n${afterFinalMergeOutput}`;
+    }
+    const aspects = await this.aspect.getAspectsOfComponent(componentName);
+    const extensionDataList = aspects.toLegacy();
+    return extensionsDetailsToString(extensionDataList);
+  }
+
+  async json([componentName]: [string], { debug }: { debug: boolean }) {
+    const extensionsDetailsToObject = (extensions: ExtensionDataList) =>
+      extensions.reduce((acc, current) => {
+        const { name, data, config, extensionId } = current.toComponentObject();
+        const aspectName = name || extensionId?.toString() || '<no-name>';
+        acc[aspectName] = {
+          name: aspectName,
+          config,
+          data,
+        };
+        return acc;
+      }, {});
+
+    if (debug) {
+      const {
+        aspects,
+        extensions: mergedExtensions,
+        beforeMerge,
+      } = await this.aspect.getAspectsOfComponentForDebugging(componentName);
+      const jsonObj: Record<string, any> = {};
+      beforeMerge.forEach(({ origin, extensions, extraData }) => {
+        jsonObj[origin] = {
+          extensions: extensionsDetailsToObject(extensions),
+          extraData,
+        };
+      });
+
+      jsonObj.AfterMerge = { extensions: extensionsDetailsToObject(mergedExtensions) };
+      jsonObj.FinalAfterMergeIncludeLoad = { extensions: extensionsDetailsToObject(aspects.toLegacy()) };
+      return jsonObj;
+    }
+
+    const aspects = await this.aspect.getAspectsOfComponent(componentName);
+
+    return extensionsDetailsToObject(aspects.toLegacy());
+  }
+}
+
+export class AspectCmd implements Command {
+  name = 'aspect <sub-command>';
+  alias = '';
+  description = 'manage aspects';
+  options = [];
+  group = 'development';
+  commands: Command[] = [];
+
+  async report([unrecognizedSubcommand]: [string]) {
+    return chalk.red(
+      `"${unrecognizedSubcommand}" is not a subcommand of "aspect", please run "bit aspect --help" to list the subcommands`
+    );
+  }
+}

package/aspect.env.ts

@@ -0,0 +1,163 @@
+import { Compiler } from '@teambit/compiler';
+import type { DependenciesEnv, PackageEnv, GetNpmIgnoreContext, PreviewEnv } from '@teambit/envs';
+import { merge } from 'lodash';
+import { PackageJsonProps } from '@teambit/pkg';
+import { TsConfigSourceFile } from 'typescript';
+import { ReactEnv } from '@teambit/react';
+import { CAPSULE_ARTIFACTS_DIR } from '@teambit/builder';
+import type { AspectLoaderMain } from '@teambit/aspect-loader';
+import { Bundler, BundlerContext } from '@teambit/bundler';
+import { WebpackConfigTransformer } from '@teambit/webpack';
+import { Tester } from '@teambit/tester';
+import { COMPONENT_PREVIEW_STRATEGY_NAME, PreviewStrategyName } from '@teambit/preview';
+import { BUNDLE_UI_DIR } from '@teambit/ui';
+import { ConfigWriterEntry } from '@teambit/workspace-config-files';
+import { PrettierConfigWriter } from '@teambit/defender.prettier-formatter';
+import { TypescriptConfigWriter } from '@teambit/typescript.typescript-compiler';
+import { EslintConfigWriter } from '@teambit/defender.eslint-linter';
+import { Logger } from '@teambit/logger';
+
+const tsconfig = require('./typescript/tsconfig.json');
+
+export const AspectEnvType = 'aspect';
+
+/**
+ * a component environment built for Aspects .
+ */
+export class AspectEnv implements DependenciesEnv, PackageEnv, PreviewEnv {
+  constructor(private reactEnv: ReactEnv, private aspectLoader: AspectLoaderMain, private logger: Logger) {}
+
+  icon = 'https://static.bit.dev/extensions-icons/default.svg';
+
+  async __getDescriptor() {
+    return {
+      type: AspectEnvType,
+    };
+  }
+
+  getTsConfig(tsConfig: TsConfigSourceFile) {
+    const targetConf = merge(tsconfig, tsConfig);
+    return targetConf;
+  }
+
+  // TODO: should probably use the transformer from the main runtime?
+  // TODO: this doesn't seems to work as expected, the getTsConfig is not a transformer and the react env API expect a transformers array not an object
+  createTsCompiler(tsConfig: TsConfigSourceFile): Compiler {
+    return this.reactEnv.getTsCjsCompiler(this.getTsConfig(tsConfig));
+  }
+
+  /**
+   * returns a component tester.
+   */
+  getTester(jestConfigPath: string, jestModulePath?: string): Tester {
+    const config = jestConfigPath || require.resolve('./jest/jest.config');
+    return this.reactEnv.getCjsJestTester(config, jestModulePath);
+  }
+
+  async getTemplateBundler(context: BundlerContext, transformers: WebpackConfigTransformer[] = []): Promise<Bundler> {
+    return this.createTemplateWebpackBundler(context, transformers);
+  }
+
+  async createTemplateWebpackBundler(
+    context: BundlerContext,
+    transformers: WebpackConfigTransformer[] = []
+  ): Promise<Bundler> {
+    return this.reactEnv.createTemplateWebpackBundler(context, transformers);
+  }
+
+  getPackageJsonProps(): PackageJsonProps {
+    return {
+      ...this.reactEnv.getCjsPackageJsonProps(),
+      exports: {
+        node: {
+          require: './dist/{main}.js',
+          import: './dist/esm.mjs',
+        },
+        default: './dist/{main}.js',
+      },
+    };
+  }
+
+  getNpmIgnore(context?: GetNpmIgnoreContext) {
+    // ignores only .ts files in the root directory, so d.ts files inside dists are unaffected.
+    // without this change, the package has "index.ts" file in the root, causing typescript to parse it instead of the
+    // d.ts files. (changing the "types" prop in the package.json file doesn't help).
+
+    // Ignores all the contents inside the artifacts directory.
+    // Asterisk (*) is needed in order to ignore all other contents of the artifacts directory,
+    // especially when specific folders are excluded from the ignore e.g. in combination with `!artifacts/ui-bundle`.
+    const patterns = ['/*.ts', `${CAPSULE_ARTIFACTS_DIR}/*`];
+
+    // In order to load the env preview template from core aspects we need it to be in the package of the core envs
+    // This is because we don't have the core envs in the local scope so we load it from the package itself in the bvm installation
+    // as this will be excluded from the package tar by default (as it's under the CAPSULE_ARTIFACTS_DIR)
+    // we want to make sure to add it for the core envs
+    if (context && this.aspectLoader.isCoreEnv(context.component.id.toStringWithoutVersion())) {
+      patterns.push(`!${CAPSULE_ARTIFACTS_DIR}/env-template`);
+    }
+    if (context && this.aspectLoader.isCoreAspect(context.component.id.toStringWithoutVersion())) {
+      patterns.push(`!${CAPSULE_ARTIFACTS_DIR}/${BUNDLE_UI_DIR}`);
+    }
+    return patterns;
+  }
+
+  getPreviewConfig() {
+    return {
+      strategyName: COMPONENT_PREVIEW_STRATEGY_NAME as PreviewStrategyName,
+      splitComponentBundle: false,
+    };
+  }
+
+  async getDependencies() {
+    return {
+      dependencies: {
+        react: '-',
+        'react-dom': '-',
+        'core-js': '^3.0.0',
+        // For aspects the babel runtime should be a runtime dep not only dev as they are compiled by babel
+        '@babel/runtime': '7.20.0',
+      },
+      // TODO: add this only if using ts
+      devDependencies: {
+        react: '-',
+        'react-dom': '-',
+        '@types/mocha': '-',
+        '@types/node': '12.20.4',
+        '@types/react': '^17.0.8',
+        '@types/react-dom': '^17.0.5',
+        '@types/jest': '^26.0.0',
+        '@types/testing-library__jest-dom': '5.9.5',
+      },
+      peerDependencies: {
+        // TODO: check if we really need react for aspects (maybe for ink support)
+        react: '^16.8.0 || ^17.0.0',
+        'react-dom': '^16.8.0 || ^17.0.0',
+      },
+    };
+  }
+
+  workspaceConfig(): ConfigWriterEntry[] {
+    return [
+      TypescriptConfigWriter.create(
+        {
+          tsconfig: require.resolve('./typescript/tsconfig.json'),
+          // types: resolveTypes(__dirname, ["./types"]),
+        },
+        this.logger
+      ),
+      EslintConfigWriter.create(
+        {
+          configPath: require.resolve('./eslint/eslintrc.js'),
+          tsconfig: require.resolve('./typescript/tsconfig.json'),
+        },
+        this.logger
+      ),
+      PrettierConfigWriter.create(
+        {
+          configPath: require.resolve('./prettier/prettier.config.js'),
+        },
+        this.logger
+      ),
+    ];
+  }
+}