Stencil JS - How to also distribute a set of shared methods

Question

I have this simple component that is compiled to a web-component by Stencil:

import { Component, h, Prop } from "@stencil/core";
import { IAuthLoginConfig } from "../../interfaces";
import { initAuth } from "../../services";

@Component({
  tag: "login-button",
  styleUrl: "login-button.css",
})
export class LoginButton {
  @Prop() public baseUrl: string = "/oidc/v1/authorize";

  @Prop() public config: IAuthLoginConfig;

  render() {
    return (
      <button onClick={() => initAuth(this.config, this.baseUrl)}>
        Sign in
      </button>
    );
  }
}

On the button click a shared function initAuth(...) is called that this is imported from the services-directory:

import { IAuthLoginConfig } from "../interfaces";

export const initAuth = (authConfig: IAuthLoginConfig, baseUrl: string): void => {
  const url = `${baseUrl}${buildParameters(authConfig)}`;

  window.location.href = url

};

const buildParameters = ({ oauth2, oidc }: IAuthLoginConfig) => {
  return 'some parameters';
};

Is there any (standard Stencil) way to also build and publish this file so that a user of our web-component library can import the exported functions and use/call them? In our use-case an end-user should be able to use methods in his/her own application directly that are also used in our web-components.

Other use-cases: shared variables, classes...

Thanks in advance!

Answer 1

You will have to manually export each object you want to be accessible in ./src/index.ts , eg:

export { initAuth } from './services';
// or
export * from './services';

This allows you to import it in the consuming project:

import { initAuth } from 'your-installed-package';
// or (depending on how you published)
import { initAuth } from 'your-installed-package/dist';