Import Stencil JS library from another Stencil JS library

Question

I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components.

I would like to use some of the components from library-a inside library-b. How do I import components from A into B?

The StencilJS docs offer some import instructions but don't cover this particular use case.

Answer 1

Basically all you have to do is npm install (or npm link) the project and import it.

As far as I know there are two places you can include the import:

1. Inside a global app.ts which is configured as a globalScript in stencil.config.ts.
2. Inside the root component.

In your case the second option probably won't work since component libraries usually don't have a root component.

Import inside app.ts:

First, create a global script and configure it in your stencil.config.ts:

export const config: Config = {
  // ...
  globalScript: 'src/global/app.ts',
};

Then add the import inside that file. Example for Ionic Framework:

import '@ionic/core';

Now you can use the components just like any other HTML element.