https://github.com/joosenavarro/web-adapter-js

:rocket: Web adapter js es un paquete que te permite tener una comunicación dinámica con tus Web Componets externos, ademas podrás cargar tus estilos de forma dinámica.
https://github.com/joosenavarro/web-adapter-js

front-end frontend javascript micro-fronted micro-frontends microfrontends web webapp webcomponent webcomponents

Last synced: 1 day ago
JSON representation

:rocket: Web adapter js es un paquete que te permite tener una comunicación dinámica con tus Web Componets externos, ademas podrás cargar tus estilos de forma dinámica.

• Host: GitHub
• URL: https://github.com/joosenavarro/web-adapter-js
• Owner: JooseNavarro
• Created: 2020-03-02T16:20:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-09T22:47:56.000Z (over 3 years ago)
• Last Synced: 2024-11-12T11:04:21.975Z (1 day ago)
• Topics: front-end, frontend, javascript, micro-fronted, micro-frontends, microfrontends, web, webapp, webcomponent, webcomponents
• Language: TypeScript
• Homepage:
• Size: 103 KB
• Stars: 6
• Watchers: 4
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Trailer](https://raw.githubusercontent.com/JooseNavarro/web-adapter-js/master/web-adapter.png)

Web Adapter es un paquete que te permite tener una comunicación dinámica con tus Web Componets externos, además podrás cargar tus estilos de forma dinámica.

  - Facil de utilizar.

  - Carga tus componentes.

  - Puedes Listar y eliminar tus web component.

  - Custom event

### [Documentación](https://joosenavarro.gitbook.io/adapterjs/)

### Instalación

```sh

$ cd myApp

$ npm install web-adapter-js

```

# 

En tu modulo principal agrega esta configuración.

```

import { Adapter } from 'web-adapter-js';

export class AppModule {

    constructor() {

        const adapter = new Adapter();

        adapter.init(['angular']);

    }

}

```

### Agregar un Web Component

```

import { ComponentAdapter,  UiAdapter } from 'web-adapter-js';

@Component({

  selector: 'app-component',

  template: ``,

})

export class AppComponent implements OnInit {

  public componentAdapter = new ComponentAdapter();

  public uiAdapter = new UiAdapter();

  constructor() { }

  ngOnInit() {

      this.uiAdapter.loadStyles([{name: 'my-style', src: 'https://cdn.com/my-style.css'}]);

      this.microAdapter.loadComponents([{name: 'my-component', src: 'http://localhost:8000/main.js'}]);

  }

}

```

### Custom Event

```

import { EventHandler } from 'web-adapter-js';

const event = EventHandler.custom('[MY_CUSTOM_EVENT]');

// Dispatch

event.dispatch({ example: { ...payload } }, '[KEY]')

// Listen

const event =  EventHandler.custom('[MY_CUSTOM_EVENT]');

event.onChanges((payload)=> console.log(payload), '[KEY]');

```

### Micro Frontend

Aplicación de ejemplo [Netflapp](https://github.com/JooseNavarro/netflapp)

License

----

MIT

----

`Jose Navarro - Trabajo con <3`