Pagelove - DOM Primitives

Overview

Pagelove applications use the selector Range unit to surgically modify documents on the server. DOM primitives provide a set of HTTP verbs on each DOM Element so that developers can easily manipulate the DOM on the server.

Core Features

Server Detection

The system automatically detects DOM-aware servers by checking for Accept-Ranges: selector in OPTIONS responses. When detected, HTTP methods on DOM elements are activated.

Element Methods

• element.GET() - Fetches fresh content for the element from the server
• element.POST(content) - Appends content as a child (like appendChild)
• element.PUT() - Replaces the element with updated server content
• element.DELETE() - Removes the element from both DOM and server
• element.HEAD() - Retrieves metadata without content
• element.PATCH(data) - Sends partial updates in JSON format

Selector Property

Every element gains a .selector property that generates a unique CSS path. This selector is sent via Range headers to identify specific elements server-side.

Permission System

window.server.can()

Check if HTTP methods are allowed for specific targets:

// Check single method
await window.server.can('PUT', '/api/resource');

// Check multiple methods
await window.server.can(['PUT', 'DELETE'], '#(selector=.item)');

// With caching control
await window.server.can('POST', target, { ttl: 60 });

Conditional Components

Web components that show/hide content based on permissions:

• <http-can> - Shows content when methods are allowed
• <http-cannot> - Shows content when methods are denied

<http-can method="PUT,DELETE" selector=".editable">
    <button>Edit</button>
</http-can>

Events

The system emits custom events for monitoring operations:

• DASAvailable/DASUnavailable - Server capability detection
• DASOk/DASError - Operation success/failure
• HTTPAuthChange - Authorization changes
• http-can/http-cannot - Permission check results

JavaScript Library

The DOM Primitives functionality is available as a JavaScript module that you can import into your applications:

<script type="module" src="https://pagelove.org/js/dom-primitives/index.mjs"></script>

This library provides the client-side implementation that extends DOM elements with HTTP methods and manages server communication using the selector range unit.

The module is available at: https://pagelove.org/js/dom-primitives/index.mjs