feat(dev-server): add managed paths

scopes/compilation/bundler/dev-server.service.tsx

@@ -56,9 +56,6 @@ export class DevServerService implements EnvService<ComponentServer, DevServerDe
   name = 'dev server';
 
   constructor(
-    /**
-     * browser runtime slot
-     */
     private pubsub: PubsubMain,
 
     private dependencyResolver: DependencyResolverMain,

scopes/dependencies/modules/packages-excluder/generate-node-modules-pattern.ts

@@ -1,4 +1,15 @@
-type generateNodeModulesPatternOptions = {
+export enum PatternTarget {
+  /**
+   * Used in Jest `transformIgnorePatterns` options
+   */
+  JEST = 'jest',
+  /**
+   * Used in Webpack `snapshot.managedPaths` options
+   */
+  WEBPACK = 'webpack',
+}
+
+type GenerateNodeModulesPatternOptions<T> = {
   /**
    * An array of packages name to exclude in the regex.
    */
@@ -8,30 +19,62 @@ type generateNodeModulesPatternOptions = {
    * A component package looks like `@org/scope.namespace.component-name`.
    */
   excludeComponents?: boolean;
+  /**
+   * The target for which patterns are generated.
+   */
+  target?: T;
+};
+
+const patternTargetMap = {
+  [PatternTarget.JEST]: toJestPattern,
+  [PatternTarget.WEBPACK]: toWebpackPattern,
 };
 
+type PatternTargetMap = typeof patternTargetMap;
+type PatternReturnType<T extends PatternTarget> = ReturnType<PatternTargetMap[T]>;
+
 /**
  * A function that receives an array of packages names and returns a pattern (string) of a regex that matches any node_modules/package-name except the provided package-names.
  * @param {string[]} packages - array of packages.
  * @returns {string} node modules catched packages regex.
  */
-export function generateNodeModulesPattern({
-  packages = [],
-  excludeComponents,
-}: generateNodeModulesPatternOptions): string {
-  const negativeLookaheadPatterns = packages.reduce((acc: string[], curr) => {
-    const yarnPattern = curr;
-    const pnpmCurr = curr.replace(/\//g, '\\+');
-    const pnpmPattern = `\\.pnpm/(.*[+/])?${pnpmCurr}.*`;
+export function generateNodeModulesPattern<T extends PatternTarget>(
+  options: GenerateNodeModulesPatternOptions<T> = {}
+): PatternReturnType<T> {
+  const { packages = [], excludeComponents, target = PatternTarget.JEST } = options;
+  const negativeLookaheadPatterns = packages.reduce((acc: string[], packageName) => {
+    const yarnPattern = packageName.replace(/\//g, '[\\/]');
+    const pnpmPackageName = packageName.replace(/\//g, '\\+');
+    const pnpmPattern = `\\.pnpm[\\/](.*[+\\/])?${pnpmPackageName}.*`;
     return [...acc, yarnPattern, pnpmPattern];
   }, []);
+
   if (excludeComponents) {
     negativeLookaheadPatterns.push(
       '@[^/]+/([^/]+\\.)+[^/]+',
       '\\.pnpm/(.+[+/])?@[^+]+\\+([^+]+\\.)+[^+]+',
       '\\.pnpm/.+/node_modules/@[^/]+/([^/]+\\.)+[^/]+'
     );
   }
-  const transformIgnorePattern = `node_modules/(?!(${negativeLookaheadPatterns.join('|')})/)`;
-  return transformIgnorePattern;
+
+  return patternTargetMap[target](negativeLookaheadPatterns) as PatternReturnType<T>;
+}
+
+function toJestPattern(patterns: string[]) {
+  return `node_modules/(?!(${patterns.join('|')})/)`;
+}
+
+/**
+ * Webpack managed paths evaluate absolutes paths to `package.json` files.
+ * We need to generate a pattern that excludes the `package.json` files of the bit component packages.
+ * Example:
+ * - Component package: `@my-org/my-scope.components`
+ * - Webpack path: `/Users/aUser/dev/bit-example/node_modules/@my-org/my-scope.components/package.json`
+ * - RegExp to exclude this path from managed paths: `/^(.+?[\\/]node_modules[\\/](?!(@my-org[\\/]my-scope.components))(@.+?[\\/])?.+?)[\\/]/`
+ */
+
+function toWebpackPattern(patterns: string[]) {
+  return patterns.map((pattern) => {
+    return `^(.+?[\\/]node_modules[\\/](?!(${pattern}))(@.+?[\\/])?.+?)[\\/]`;
+  });
 }

scopes/dependencies/modules/packages-excluder/index.ts

@@ -1 +1 @@
-export { generateNodeModulesPattern } from './generate-node-modules-pattern';
+export { generateNodeModulesPattern, PatternTarget } from './generate-node-modules-pattern';

scopes/dependencies/modules/packages-excluder/packages-excluder.composition.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { generateNodeModulesPattern } from './generate-node-modules-pattern';
+import { PatternTarget, generateNodeModulesPattern } from './generate-node-modules-pattern';
 
 export function LiveExample() {
   const [text, setText] = useState('react,@myorg,some-lib');
@@ -18,14 +18,29 @@ export function RegexExample() {
   const [packagesToExclude, setPackagesToExclude] = useState('@myorg,react,some-lib');
   const [packageToCheck, setPackageToCheck] = useState('@myorg');
   const [excludeComponents, setExcludeComponents] = useState(false);
-  const [calculatedRegex, setCalculatedRegex] = useState('');
-  const [regexResult, setRegexResult] = useState(true);
+  const [defaultCalculatedRegex, setDefaultCalculatedRegex] = useState('');
+  const [webpackCalculatedRegexps, setWebpackCalculatedRegexps] = useState([]);
+  const [defaultRegexResult, setDefaultRegexResult] = useState(true);
+  const [webpackRegexResult, setWebpackRegexResult] = useState(true);
 
   useEffect(() => {
-    const pattern = generateNodeModulesPattern({ packages: packagesToExclude.split(','), excludeComponents });
-    setCalculatedRegex(pattern);
+    const pattern = generateNodeModulesPattern({ packages: packagesToExclude.split(','), excludeComponents }) as string;
+    const webpackPatterns = generateNodeModulesPattern({
+      packages: packagesToExclude.split(','),
+      excludeComponents,
+      target: PatternTarget.WEBPACK,
+    });
+    setDefaultCalculatedRegex(pattern);
+    // @ts-ignore
+    setWebpackCalculatedRegexps(webpackPatterns);
     const regex = new RegExp(pattern);
-    setRegexResult(regex.test(`node_modules/${packageToCheck}/some-path`));
+    const webpackRegexps = webpackPatterns.map((webpackPattern) => new RegExp(webpackPattern));
+    setDefaultRegexResult(regex.test(`node_modules/${packageToCheck}/some-path`));
+    setWebpackRegexResult(
+      webpackRegexps.every((webpackRegex) =>
+        webpackRegex.test(`Users/aUser/workspace-a/node_modules/${packageToCheck}/package.json`)
+      )
+    );
   }, [packagesToExclude, packageToCheck, excludeComponents]);
 
   return (
@@ -38,19 +53,39 @@ export function RegexExample() {
       />
       <div>Exclude components:</div>
       <input type="checkbox" checked={excludeComponents} onChange={(e) => setExcludeComponents(e.target.checked)} />
-      <div>Write a package that you want to check with Regex test:</div>
-      <div style={{ marginBottom: 12 }}>
-        <input value="node_modules/" disabled />
-        <input value={packageToCheck} onChange={(e) => setPackageToCheck(e.target.value)} />
-        <input value="/some-path" disabled />
-      </div>
-      <div style={{ backgroundColor: '#ededed', padding: 8 }}>
-        regex exclude {packageToCheck} excludeComponents: {excludeComponents.toString()}
-        <br />
-        regex: {calculatedRegex}
-        <br />
-        result: {regexResult.toString()}
-      </div>
+
+      <section>
+        <h3>Default target (Jest)</h3>
+        <div>Write a package that you want to check with Regex test:</div>
+        <div style={{ marginBottom: 12 }}>
+          <input value="node_modules/" disabled />
+          <input value={packageToCheck} onChange={(e) => setPackageToCheck(e.target.value)} />
+          <input value="/some-path" disabled />
+        </div>
+        <div style={{ backgroundColor: '#ededed', padding: 8 }}>
+          regex exclude {packageToCheck} excludeComponents: {excludeComponents.toString()}
+          <br />
+          regex: {defaultCalculatedRegex}
+          <br />
+          result: {defaultRegexResult.toString()}
+        </div>
+      </section>
+      <section>
+        <h3>Target Webpack</h3>
+        <div>Write a package that you want to check with Regex test:</div>
+        <div style={{ marginBottom: 12 }}>
+          <input value="Users/aUser/workspace-a/node_modules/" disabled />
+          <input value={packageToCheck} onChange={(e) => setPackageToCheck(e.target.value)} />
+          <input value="/package.json" disabled />
+        </div>
+        <div style={{ backgroundColor: '#ededed', padding: 8 }}>
+          regex exclude {packageToCheck} excludeComponents: {excludeComponents.toString()}
+          <br />
+          regex: {webpackCalculatedRegexps}
+          <br />
+          result: {webpackRegexResult.toString()}
+        </div>
+      </section>
     </div>
   );
 }

scopes/dependencies/modules/packages-excluder/packages-excluder.docs.md

@@ -3,14 +3,20 @@ labels: ['typescript', 'utils', 'packages', 'node modules', 'node', 'regex', 'ex
 description: 'Create node modules regex with packages.'
 ---
 
-import { generateNodeModulesPattern } from './generate-node-modules-pattern';
+import { generateNodeModulesPattern, PatternTarget } from './generate-node-modules-pattern';
 
 A function that returns a pattern (string) of a regex that matches any `node_modules/package-name` except the ones that we want to exclude.
 
+> **_NOTE:_** There are different cases of patterns that need to be generated. This depends on different capture groups that might need to be applied. At the moment matching patterns based on the target are supported. Check `target` option for details.
+
 Options:
 
 - `packages` - **string[]** - optional. A list of package names and package scopes that we want to exclude.
 - `excludeComponents` - **boolean** - optional. If set to `true`, all component packages are excluded.
+- `target` - **enum** - optional. Specifies the target for which patterns need to be generated for. Default target `PatternTarget.JEST`.
+  - Available pattern targets through `PatternTarget` enum:
+    - `JEST`: Used in Jest `transformIgnorePatterns` options
+    - `WEBPACK`: Used in Webpack `snapshot.managedPaths` options
 
 Basic example:
 
@@ -21,6 +27,15 @@ Basic example:
 };
 ```
 
+Basic example for `PatternTarget.WEBPACK` target:
+
+```js live
+() => {
+  const packagesToTransform = ['@my-scope/my-button-component'];
+  return generateNodeModulesPattern({ packages: packagesToTransform, target: PatternTarget.WEBPACK });
+};
+```
+
 Regex exclude the package:
 
 ```js live
@@ -32,6 +47,19 @@ Regex exclude the package:
 };
 ```
 
+Regex exclude the package for `PatternTarget.WEBPACK` target:
+
+```js live
+() => {
+  const packagesToTransform = ['@my-scope/my-button-component'];
+  const patterns = generateNodeModulesPattern({ packages: packagesToTransform, target: PatternTarget.WEBPACK });
+  const regexps = patterns.map((pattern) => new RegExp(pattern));
+  return regexps
+    .every((regex) => regex.test('Users/aUser/dev/node_modules/@my-scope/my-button-component/package.json'))
+    .toString();
+};
+```
+
 Regex not exclude the package:
 
 ```js live
@@ -43,6 +71,19 @@ Regex not exclude the package:
 };
 ```
 
+Regex not exclude the package for `PatternTarget.WEBPACK` target:
+
+```js live
+() => {
+  const packagesToTransform = ['@my-scope/my-button-component'];
+  const patterns = generateNodeModulesPattern({ packages: packagesToTransform, target: PatternTarget.WEBPACK });
+  const regexps = patterns.map((pattern) => new RegExp(pattern));
+  return regexps
+    .some((regex) => regex.test('Users/aUser/dev/node_modules/not-excluded-package/package.json'))
+    .toString();
+};
+```
+
 Exclude components:
 
 ```js live

scopes/harmony/application/build-application.task.ts

@@ -134,8 +134,9 @@ export class AppsBuildTask implements BuildTask {
         appResult.componentResult.warnings || []
       );
       // @ts-ignore
-      merged.componentResult._metadata.buildDeployContexts = // @ts-ignore
-      (merged.componentResult._metadata.buildDeployContexts || [])
+      merged.componentResult._metadata.buildDeployContexts = ( // @ts-ignore
+        merged.componentResult._metadata.buildDeployContexts || []
+      )
         // @ts-ignore
         .concat(appResult.componentResult._metadata || []);
     });

scopes/webpack/webpack/config/webpack.dev.config.ts

@@ -25,6 +25,7 @@ export function configFactory(
   entryFiles: string[],
   publicRoot: string,
   publicPath: string,
+  componentPathsRegExps: RegExp[],
   pubsub: PubsubMain,
   title?: string,
   favicon?: string
@@ -72,6 +73,7 @@ export function configFactory(
 
     stats: {
       errorDetails: true,
+      logging: 'error',
     },
 
     devServer: {
@@ -107,6 +109,7 @@ export function configFactory(
 
       client: {
         overlay: false,
+        logging: 'error',
       },
 
       setupMiddlewares: (middlewares, devServer) => {
@@ -160,6 +163,10 @@ export function configFactory(
       }),
     ],
 
+    snapshot: {
+      ...(componentPathsRegExps && componentPathsRegExps.length > 0 ? { managedPaths: componentPathsRegExps } : {}),
+    },
+
     watchOptions: {
       poll: true,
     },

scopes/webpack/webpack/webpack.main.runtime.ts

@@ -95,6 +95,7 @@ export class WebpackMain {
       context.id,
       context.rootPath,
       context.publicPath,
+      this.workspace.getComponentPathsRegExps(),
       context.title
     ) as any;
     const wdsPath = webpackDevServerModulePath || require.resolve('webpack-dev-server');
@@ -197,9 +198,19 @@ export class WebpackMain {
     devServerID: string,
     publicRoot: string,
     publicPath: string,
+    componentPathsRegExps: RegExp[],
     title?: string
   ) {
-    return devServerConfigFactory(devServerID, rootPath, entry, publicRoot, publicPath, this.pubsub, title);
+    return devServerConfigFactory(
+      devServerID,
+      rootPath,
+      entry,
+      publicRoot,
+      publicPath,
+      componentPathsRegExps,
+      this.pubsub,
+      title
+    );
   }
 
   static slots = [];

scopes/workspace/watcher/output-formatter.ts

@@ -1,7 +1,7 @@
 import { OnComponentEventResult } from '@teambit/workspace';
 import chalk from 'chalk';
 
-const verboseComponentFilesArrayToString = (componentFiles) => {
+const verboseComponentFilesArrayToString = (componentFiles = []) => {
   return componentFiles.reduce((outputString, filePath) => `${outputString} \t - ${filePath}\n`, ``);
 };
 

scopes/workspace/workspace/workspace.provider.ts

@@ -233,6 +233,9 @@ export default async function provideWorkspace(
 
   const workspaceSchema = getWorkspaceSchema(workspace, graphql);
   ui.registerUiRoot(new WorkspaceUIRoot(workspace, bundler));
+  ui.registerPreStart(async () => {
+    return workspace.setComponentPathsRegExps();
+  });
   graphql.register(workspaceSchema);
   const capsuleCmd = getCapsulesCommands(isolator, scope, workspace);
   const commands: CommandList = [new EjectConfCmd(workspace), capsuleCmd, new UseCmd(workspace)];