fix(react): adjust generated tsconfig path mapping for publ libs

ISSUES CLOSED: #2794

docs/react/api-react/schematics/library.md

@@ -76,6 +76,12 @@ Type: `string`
 
 A directory where the lib is placed
 
+### importPath
+
+Type: `string`
+
+The library name used to import it, like @myorg/my-awesome-lib
+
 ### js
 
 Default: `false`

packages/react/src/schematics/library/library.spec.ts

@@ -395,6 +395,21 @@ describe('lib', () => {
       });
     });
 
+    it('should use an npm friendly name in tsconfig.json when publishable', async () => {
+      const tree = await runSchematic(
+        'lib',
+        { name: 'myLib', directory: 'myDir', publishable: true },
+        appTree
+      );
+      const tsconfigJson = readJsonInTree(tree, '/tsconfig.json');
+      expect(
+        tsconfigJson.compilerOptions.paths['@proj/my-dir-my-lib']
+      ).toEqual(['libs/my-dir/my-lib/src/index.ts']);
+      expect(
+        tsconfigJson.compilerOptions.paths['my-dir-my-lib/*']
+      ).toBeUndefined();
+    });
+
     it('should support styled-components', async () => {
       const tree = await runSchematic(
         'lib',
@@ -485,4 +500,78 @@ describe('lib', () => {
       expect(tree.exists('/libs/my-lib/src/index.js')).toBe(true);
     });
   });
+
+  describe('--importPath', () => {
+    it('should update the package.json & tsconfig with the given import path', async () => {
+      const tree = await runSchematic(
+        'lib',
+        {
+          name: 'myLib',
+          publishable: true,
+          directory: 'myDir',
+          importPath: '@myorg/lib',
+        },
+        appTree
+      );
+      const packageJson = readJsonInTree(
+        tree,
+        'libs/my-dir/my-lib/package.json'
+      );
+      const tsconfigJson = readJsonInTree(tree, '/tsconfig.json');
+
+      expect(packageJson.name).toBe('@myorg/lib');
+      expect(
+        tsconfigJson.compilerOptions.paths[packageJson.name]
+      ).toBeDefined();
+    });
+
+    it('should fail if the same importPath has already been used', async () => {
+      const tree1 = await runSchematic(
+        'lib',
+        {
+          name: 'myLib1',
+          publishable: true,
+          importPath: '@myorg/lib',
+        },
+        appTree
+      );
+
+      try {
+        await runSchematic(
+          'lib',
+          {
+            name: 'myLib2',
+            framework: 'angular',
+            publishable: true,
+            importPath: '@myorg/lib',
+          },
+          tree1
+        );
+      } catch (e) {
+        expect(e.message).toContain(
+          'You already have a library using the import path'
+        );
+      }
+
+      expect.assertions(1);
+    });
+
+    it('should fail if we pass an invalid npm package name', async () => {
+      try {
+        await runSchematic(
+          'lib',
+          {
+            name: 'myLib',
+            publishable: true,
+            importPath: '@myorg/shop/mylib',
+          },
+          appTree
+        );
+      } catch (e) {
+        expect(e.message).toContain('scoped package name has an extra');
+      }
+
+      expect.assertions(1);
+    });
+  });
 });

packages/react/src/schematics/library/library.ts

@@ -9,6 +9,7 @@ import {
   noop,
   Rule,
   SchematicContext,
+  SchematicsException,
   template,
   Tree,
   url,
@@ -50,6 +51,7 @@ import {
 import { Schema } from './schema';
 import { libsDir } from '@nrwl/workspace/src/utils/ast-utils';
 import { initRootBabelConfig } from '@nrwl/web/src/utils/rules';
+import { validateNpmPackageName } from '@nrwl/workspace/src/utils/validate-npm-pkg-name';
 
 export interface NormalizedSchema extends Schema {
   name: string;
@@ -66,6 +68,10 @@ export default function (schema: Schema): Rule {
   return (host: Tree, context: SchematicContext) => {
     const options = normalizeOptions(host, schema);
 
+    if (options.publishable === true) {
+      validateNpmPackageName(options.importPath);
+    }
+
     if (!options.component) {
       options.style = 'none';
     }
@@ -179,12 +185,26 @@ function updateTsConfig(options: NormalizedSchema): Rule {
         const c = json.compilerOptions;
         c.paths = c.paths || {};
         delete c.paths[options.name];
-        c.paths[`@${nxJson.npmScope}/${options.projectDirectory}`] = [
+
+        if (c.paths[options.importPath]) {
+          throw new SchematicsException(
+            `You already have a library using the import path "${options.importPath}". Make sure to specify a unique one.`
+          );
+        }
+
+        // c.paths[`@${nxJson.npmScope}/${options.projectDirectory}`] = [
+        //   maybeJs(
+        //     options,
+        //     `${libsDir(host)}/${options.projectDirectory}/src/index.ts`
+        //   ),
+        // ];
+        c.paths[options.importPath] = [
           maybeJs(
             options,
             `${libsDir(host)}/${options.projectDirectory}/src/index.ts`
           ),
         ];
+
         return json;
       })(host, context);
     },
@@ -324,6 +344,15 @@ function normalizeOptions(host: Tree, options: Schema): NormalizedSchema {
     ? options.tags.split(',').map((s) => s.trim())
     : [];
 
+  // adjust the import path, especially for publishable
+  // libs which need to respect the NPM package scoping rules
+  let importPath = options.importPath;
+  if (!importPath) {
+    importPath = options.publishable
+      ? `@${getNpmScope(host)}/${projectName}`
+      : `@${getNpmScope(host)}/${projectDirectory}`;
+  }
+
   const normalized: NormalizedSchema = {
     ...options,
     fileName,
@@ -332,6 +361,7 @@ function normalizeOptions(host: Tree, options: Schema): NormalizedSchema {
     projectRoot,
     projectDirectory,
     parsedTags,
+    importPath,
   };
 
   if (options.appProject) {
@@ -359,12 +389,10 @@ function normalizeOptions(host: Tree, options: Schema): NormalizedSchema {
 }
 
 function updateLibPackageNpmScope(options: NormalizedSchema): Rule {
-  return (host: Tree) => {
-    return updateJsonInTree(`${options.projectRoot}/package.json`, (json) => {
-      json.name = `@${getNpmScope(host)}/${options.name}`;
-      return json;
-    });
-  };
+  return updateJsonInTree(`${options.projectRoot}/package.json`, (json) => {
+    json.name = options.importPath;
+    return json;
+  });
 }
 
 function maybeJs(options: NormalizedSchema, path: string): string {

packages/react/src/schematics/library/schema.d.ts

@@ -16,5 +16,6 @@ export interface Schema {
   linter: Linter;
   component?: boolean;
   publishable?: boolean;
+  importPath?: string;
   js?: boolean;
 }

packages/react/src/schematics/library/schema.json

@@ -118,6 +118,10 @@
       "description": "Create a buildable library.",
       "alias": "buildable"
     },
+    "importPath": {
+      "type": "string",
+      "description": "The library name used to import it, like @myorg/my-awesome-lib"
+    },
     "component": {
       "type": "boolean",
       "description": "Generate a default component",