Stencil JS – Cómo distribuir también un conjunto de métodos compartidos.

16 Jun, 2023 Programación 0

Tengo este componente simple que se compila a un web-component usando 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>
    );
  }
}

En el clic del botón se llama a una función compartida initAuth(...) que se importa del directorio de servicios:

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';
};

¿Existe alguna forma (estándar de Stencil) de también construir y publicar este archivo para que un usuario de nuestra biblioteca de web-components pueda importar las funciones exportadas y usar / llamar a ellas? En nuestro caso de uso, un usuario final debería poder usar métodos en su propia aplicación directamente que también se usan en nuestros web-components.

Otros casos de uso: variables compartidas, clases …

¡Gracias de antemano!

davy.ai

June 16, 2023 at 7:08 pm

Sí, hay una forma de construir y publicar este archivo para que un usuario de su biblioteca de componentes web pueda importar las funciones exportadas y usarlas/llamarlas. Stencil proporciona una característica llamada “distribución” que le permite construir y empaquetar sus componentes como una biblioteca independiente que se puede importar y usar en otros proyectos.

Para crear una distribución de su componente, debe agregar una nueva configuración de “outputTargets” en su archivo stencil.config.ts. Aquí hay un ejemplo:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'mi-lib',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      dir: 'dist',
      copy: [
        { src: '**/*.scss' }
      ]
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      dir: 'www',
      serviceWorker: null // deshabilitar service workers
    }
  ]
};

El objetivo de salida “dist” es lo que crea su distribución. Cuando ejecuta el comando “npm run build”, Stencil compilará su componente y generará un paquete distribuible en el directorio “dist”. Este paquete contendrá su componente como una biblioteca independiente, junto con todas sus dependencias.

Para usar su biblioteca de componentes distribuida en otro proyecto, solo necesita instalarla como una dependencia usando npm, yarn u otro administrador de paquetes. Aquí hay un ejemplo:

npm install mi-lib --save

Después de eso, puede importar su componente y sus funciones exportadas en su código como cualquier otro módulo:

import { LoginButton, initAuth } from 'mi-lib';

const config = {
  oauth2: { clientId: 'mi-id-de-cliente' },
  oidc: { issuer: 'https://mi-emisor.com' }
};

const baseUrl = '/mi/endpoint/de/autenticación';

LoginButton.config = config;
LoginButton.baseUrl = baseUrl;

LoginButton.prototype.foo = function () {
  initAuth(config, baseUrl);
};

En este ejemplo, estamos importando tanto el componente LoginButton como la función initAuth de nuestro paquete “mi-lib”. También estamos configurando algunas propiedades en el componente y agregando un método personalizado a su prototipo que llama a la función initAuth exportada.

Al seguir este enfoque, puede compartir fácilmente variables, funciones, clases y otros activos entre sus componentes Stencil y hacerlos disponibles como una biblioteca independiente para que otros proyectos los consuman.

Answer

davy.ai

June 16, 2023 at 7:08 pm
Sí, hay una forma de construir y publicar este archivo para que un usuario de su biblioteca de componentes web pueda importar las funciones exportadas y usarlas/llamarlas. Stencil proporciona una característica llamada “distribución” que le permite construir y empaquetar sus componentes como una biblioteca independiente que se puede importar y usar en otros proyectos.

Para crear una distribución de su componente, debe agregar una nueva configuración de “outputTargets” en su archivo stencil.config.ts. Aquí hay un ejemplo:
```
import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'mi-lib',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      dir: 'dist',
      copy: [
        { src: '**/*.scss' }
      ]
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      dir: 'www',
      serviceWorker: null // deshabilitar service workers
    }
  ]
};
```
El objetivo de salida “dist” es lo que crea su distribución. Cuando ejecuta el comando “npm run build”, Stencil compilará su componente y generará un paquete distribuible en el directorio “dist”. Este paquete contendrá su componente como una biblioteca independiente, junto con todas sus dependencias.

Para usar su biblioteca de componentes distribuida en otro proyecto, solo necesita instalarla como una dependencia usando npm, yarn u otro administrador de paquetes. Aquí hay un ejemplo:
```
npm install mi-lib --save
```
Después de eso, puede importar su componente y sus funciones exportadas en su código como cualquier otro módulo:
```
import { LoginButton, initAuth } from 'mi-lib';

const config = {
  oauth2: { clientId: 'mi-id-de-cliente' },
  oidc: { issuer: 'https://mi-emisor.com' }
};

const baseUrl = '/mi/endpoint/de/autenticación';

LoginButton.config = config;
LoginButton.baseUrl = baseUrl;

LoginButton.prototype.foo = function () {
  initAuth(config, baseUrl);
};
```
En este ejemplo, estamos importando tanto el componente LoginButton como la función initAuth de nuestro paquete “mi-lib”. También estamos configurando algunas propiedades en el componente y agregando un método personalizado a su prototipo que llama a la función initAuth exportada.

Al seguir este enfoque, puede compartir fácilmente variables, funciones, clases y otros activos entre sus componentes Stencil y hacerlos disponibles como una biblioteca independiente para que otros proyectos los consuman.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Stencil JS – Cómo distribuir también un conjunto de métodos compartidos.

Answer

davy.ai