Search code examples
javascriptnpmweb-componentstenciljs

Import Stencil JS library from another Stencil JS library

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.

Solution

  • 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.