Using a component with different peer dependencies depending from the context

[zkochan]

Related PRs:

• feat: save the locations of injected deps to the modules state file pnpm/pnpm#4259
• pnpm/pnpm@c138304
• fix: don't overwrite node_modules inside inject dependencies pnpm/pnpm#4299
• feat: set hoisting limits pnpm/pnpm#4300
• fix: perf improvement + don't fail if an injected package has no package.json pnpm/pnpm#4304

Proposed Changes

As of this pull request, this feature will be only supported by pnpm as the package manager (but both the hoisted and isolated nodeLinker will work).

A new optional setting added to the dependency-resolver aspect: rootComponents. rootComponents is an array of component package names.

Root components are installed in isolation from the workspace. None of the dependencies of root components are symlinked from the workspace. Instead, the dependencies of root components are copied (or hard linked) into the node_modules of the root component.

Root components are installed at <workspace root>/node_modules/<root component pkg name>/node_modules/<root component name>. The dependencies of the root component are installed either inside the virtual store (node_modules/.pnpm) or hoisted inside node_modules using Yarn's hoisting algorithm (pnpm uses Yarn's hoisting algorithm for the "hoisted" linker).

Let's see how it will work on the following example:

button        has react 16 || 17 in peer deps
app1          has react 16 in peer deps   has button in the deps
app2          has react 17 in peer deps   has button in the deps
workspace.jsonc

app1 and app2 are listed as rootComponents.

In this case, Bit will create the following node_modules structure:

app1
  node_modules
    react --> <ROOT>/node_modules/.pnpm/react@16
  app1.tsx
app2
  node_modules
    react --> <ROOT>/node_modules/.pnpm/react@17
  app2.tsx
button
  node_modules
    react --> <ROOT>/node_modules/.pnpm/react@17
  button.tsx
node_modules
  .pnpm
    react@16
    app1
      node_modules
        app1
          dist
            app1.js
          app1.js
          package.json
        button --> ../../button+react@16
        react --> ../../react@16
    button+react@16
      node_modules
        button
          dist
            button.js
          button.js
          package.json
        react --> ../../react@16
    react@17
    app2
      node_modules
        app2
          dist
            app2.js
          app2.js
          package.json
        button --> ../../button+react@17
        react --> ../../react@17
    button+react@17
      node_modules
        button
          dist
            button.js
          button.js
          package.json
        react --> ../../react@17
  app1
    node_modules
      app1 --> ../../.pnpm/app1/node_modules/app1
    app1.tsx --> <ROOT>/app1/app1.tsx
    package.json
  app2
    node_modules
      app2 --> ../../.pnpm/app2/node_modules/app2
    app2.tsx --> <ROOT>/app2/app2.tsx
    package.json
  button
    node_modules
      button --> ../../.pnpm/button/node_modules/button
    app2.tsx --> <ROOT>/button/button.tsx
    package.json

See how the files in node_modules/.pnpm/button+react@16/node_modules/button/ are not symlinks? It is important to have real files in the virtual store for proper resolution of dependencies. So the react in node_modules/.pnpm/button+react@16/node_modules/button/dist/index.js will be resolved from node_modules/.pnpm/button+react@16/node_modules/react/, while the react from node_modules/.pnpm/button+react@17/node_modules/button/ will be resolved from node_modules/.pnpm/button+react@17/node_modules/react/

Changes to compilation and linking

All the components in the virtual store should have a dist folder and a package.json file.

The compilation aspect accepts a list of target directories instead of a single target directory. So instead of just compiling the sources of button to node_modules/button/dist, bit compiles the sources of button also to the following locations:

node_modules/.pnpm/button+react@16/node_modules/button/dist
node_modules/.pnpm/button+react@17/node_modules/button/dist

The package.json files are linked as a separate task after installation is complete by the pnpm installation engine. So the package.json file that is generated into node_modules/button/package.json is hard linked into:

node_modules/.pnpm/button+react@16/node_modules/button/package.json
node_modules/.pnpm/button+react@17/node_modules/button/package.json

Other changes

• The dependency-resolver aspect is now a dependency of the compiler aspect

[zkochan]

This might be not the best solution but it does fix a crash when the path doesn't contain '@'. I am open to suggestions.

[davidfirst]

Looks good! I reviewed the compilation part. I'm less familiar with the rest.

[zkochan]

This is closed by #5443