4

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.

michaeljsalo
  • 523
  • 4
  • 16

1 Answers1

7

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.

Thomas
  • 8,426
  • 1
  • 25
  • 49
  • 1
    Awesome, that works. Will just add small comment. It is important to have global/app.ts inside the src folder. Originally I put it to root and it wasn't working because of the script located outside the other code, not in the scope. – Sh. Pavel Aug 17 '21 at 12:10