https://github.com/soub4i/web-merge

Declarative client-side web fragment merger using web component APIs
https://github.com/soub4i/web-merge

fragments microfrontend web-components

Last synced: about 1 month ago
JSON representation

Declarative client-side web fragment merger using web component APIs

• Host: GitHub
• URL: https://github.com/soub4i/web-merge
• Owner: soub4i
• Created: 2020-09-13T16:44:18.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-03T02:13:39.000Z (almost 3 years ago)
• Last Synced: 2024-10-22T23:39:13.603Z (about 2 months ago)
• Topics: fragments, microfrontend, web-components
• Language: JavaScript
• Homepage:
• Size: 1.15 MB
• Stars: 25
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-morocco - Web-merge - merge.svg?style=social)](https://github.com/AbderrahimSoubaiElidrissi/web-merge/stargazers) - Declarative client-side web fragments merger for micro-frontend architectures. by [@soub4i](https://github.com/AbderrahimSoubaiElidrissi) (Uncategorized / Uncategorized)

README

        
# Web Merge

[![Build Status](https://travis-ci.org/AbderrahimSoubaiElidrissi/web-merge.svg?branch=master)](https://travis-ci.org/AbderrahimSoubaiElidrissi/web-merge)

Declarative client-side web fragments (apps/files) merger using web component APIs

## NOTE

> EXPERIMENTAL DO NOT USE IN PRODUCTION

## Installation

## 1. via npm  (Recommended)

```shell

$ npm install @soubai/web-merge

# or

$ yarn add @soubai/web-merge

```

Then import it in your script

```js

import '@soubai/web-merge'

```

## 2. via unpkg

```html

```

## Usage

use `` custom element to load you fragment into web application

```html

```

### Attributes 

**content**: define the source of you fragments (files,urls ...)

```html

```

**lazy**: allow lazy loading for a fragment 

```html

```

**route**: define the route of the component that will be loaded when the this route is fired.

```html

```

## Features

### 1.State management

Web-merge includes a build-in simple state management system based on event (not Event bus).

The fragment `parent` expose a `state` class that can help you to mutate and get new store 

```js

        

// fragment-3.html

const { state } = parent;

//initial state 

state.init({ count: 0 })

//event name 

const COUNT_CHANGE = "countChange";

//Apply side effects 

state.on(COUNT_CHANGE, ({ count }) => {

    document.querySelector("span.value").textContent = count;

});

//mutations 

document.getElementById("inc").addEventListener("click", function () {

    state.dispatch(COUNT_CHANGE, ({ count }) => ({ count: count + 1 }));

        });

document.getElementById("dec").addEventListener("click", function () {

    state.dispatch(COUNT_CHANGE, ({ count }) => ({ count: count - 1 }));

});

```

![](https://www.linkpicture.com/q/preview-2.gif)

### 2.Routing

Web-merge includes a build-in pushState router that will helps you to load fragments/apps based on route.

The fragment `parent` expose a `router` class that can help you to perform routing action to load fragments/apps

You need to warper your fragments/apps with  `web-merge-router` component and define `base` attribute as root route of your routing system; Than add `route` attribute to your fragments/apps to define the route that will load the fragment

```html

```

```js

        

// fragment-5.html

const { router } = parent;

```

```html

        





Home





About






```

![](https://www.linkpicture.com/q/preview-3.gif)

## Development 

After cloning package on your local machine :

```shell

$ npm install

# start dev server to test examples locally

$ yarn dev

# Build 

$ yarn build

```

## Changelog 

[See the changelog here](CHANGELOG.md)