https://github.com/tolyo/server-page-component

Web Component for partials
https://github.com/tolyo/server-page-component

Last synced: about 2 months ago
JSON representation

Web Component for partials

• Host: GitHub
• URL: https://github.com/tolyo/server-page-component
• Owner: tolyo
• License: mit
• Created: 2024-01-30T19:17:08.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-08T17:38:22.000Z (11 months ago)
• Last Synced: 2024-02-08T18:55:43.736Z (11 months ago)
• Language: JavaScript
• Size: 193 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```bash

$ npm i server-page-component

```

or

```html

```

## Usage

If using module imports:

```js

import 'server-page-component';

```

Then:

```html

# anywhere in your html

```

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 

```html

    document.dispatchEvent(new Event("partial:SPY"))                                                                                                                                                                         

```

Or use the helper `triggerServerPage`:

```js

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:

```html

```

Or wire it with a framework of choice:

```html



    

    

    



```