@soubai/web-merge

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)

$ npm install @soubai/web-merge

# or

$ yarn add @soubai/web-merge

Then import it in your script

import '@soubai/web-merge'

2. via unpkg

<script type="module" src="//unpkg.com/@soubai/web-merge"></script>

Usage

use <web-merge> custom element to load you fragment into web application

<web-merge content="./fragments/fragment-1.html"></web-merge>

<web-merge content="./fragments/fragment-2.html"></web-merge>

Attributes

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

<web-merge content="./fragments/fragment-1.html"></web-merge>


<web-merge content="http://localhost:3000"></web-merge>

lazy: allow lazy loading for a fragment

<web-merge lazy content="./fragments/fragment-1.html"></web-merge>

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

<web-merge route='/cart' content="http://127.0.0.1:3000"></web-merge>

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

        
// 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 }));
});

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

<!-- index.html -->

<web-merge-router base="/examples">
<web-merge route="/" content="./fragments/fragment-6.html"></web-merge>
<web-merge route="/about" content="./fragments/fragment-5.html"></web-merge>
</web-merge-router>

        
// fragment-5.html

const { router } = parent;

        
<!-- fragment-5.html -->

<ul>
<li>
<a onclick="router.onNavigate('/')" href="#">Home</a>
</li>
<li>
<a onclick="router.onNavigate('/about')" href="#">About</a>

</li>
</ul>

Development

After cloning package on your local machine :

$ npm install

# start dev server to test examples locally

$ yarn dev

# Build 

$ yarn build

Changelog

See the changelog here

Changelog

1.2.8 (2020-09-24)

Chores

• ci: add github action (1d9ad88e)
• core:
  • adding webpack as changelog (dd756114)
  • adding webpack as bundler (09035e64)
• update readme.md (6419531d)
• update readme.md (1c49c60f)
• update version (87e999bb)
• add router (83225859)
• add state manager (c150ad83)
• update version (a86273ff)

New Features

• ci: add travis (6b817d15)

Bug Fixes

• fragment: compoennt block (a7090b11)
• docs:
  • update channge log (ea704911)
  • add travis badge (0f673204)
  • remove false warning message (b6413fcd)
• ci:
  • change readme.md (b1af32b3)
  • fix test command (30ca0a11)
  • fix command freeze (2f168c7f)
• update readme.md (d2ba894a)
• remove unused dep (44b90d3e)
• rename package (0decc7ad)

Other Changes

• Big bang (5d07b98e)