Web Component for partials

Partial is a fragment of a web-page, loaded separately from the main content. This Web Component simplifies their use. It is based on Open Web Components defaults and recommendations.

Install

$ npm i server-page-component

or

<script src="
    https://cdn.jsdelivr.net/npm/server-page-component/dist/server-page.umd.min.js
"></script>

Usage

If using module imports:

import 'server-page-component';

Then:

# anywhere in your html
<server-page url="./cat.html"></server-page>

This will initiate an AJAX request to the address, specified in the url attribute, replacing the content of the component with received response. Modifying the url attribute will trigger a new request. If the id attribute is present, the component will use window.document as an event listener on partial:#{id} namespace. This allows partial content updates to be triggered from any part of your application.

Example

<server-page id="SPY" url="./stock?name=SPY"></server-page>

<script>
    document.dispatchEvent(new Event("partial:SPY"))                                                                                                                                                                         
</script>

Or use the helper triggerServerPage:

import { triggerServerPage } from 'server-page-component';

triggerServerPage('SPY');

For updates from DOM without changing url attribute, a latch attribute can be set to any value and the component will react to any changes to it. Example:

<server-page url="./cat.html" latch="0"></server-page>

Or wire it with a framework of choice:

<div ng-app>
    <script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.cjs.min.js"></script>
    <input type="text" ng-model="yourName" placeholder="Enter anything">
    <server-page url="./test.html" latch="{{ yourName }}"></server-page>
</div>