enhanceable
Advanced tools
A lightweight library for building server-rendered components with client-side enhancements.
A lightweight library for building server-rendered components with client-side enhancements.
enhanceable provides a simple yet powerful way to create web applications that combine server-side rendering with progressive client-side enhancements. It uses a familiar HTML template syntax and a hooks-based API to bridge the gap between server and client behavior.
use client directive and useEnhancements() hooknpm install enhanceable
Components are simple functions that return HTML using the html template literal:
import { html } from "enhanceable";
export function Wrapper({ children }) {
return html`
<div class="wrapper">
${children}
</div>
`;
}
useEnhancements():// counter.ts
import { html, useEnhancements } from "enhanceable";
import * as enhancements from "./counter.client.ts";
export function Counter({ initialCount = 0 }) {
const { handleIncrement } = useEnhancements(enhancements);
return html`
<button${{ onclick: handleIncrement }}>${initialCount}</button>
`;
}
// counter.client.ts
"use client";
export function handleIncrement(event: MouseEvent) {
if (!event.target || !(event.target instanceof HTMLElement)) {
throw new Error("invalid target");
}
event.target.textContent = "" + (Number(event.target.textContent) + 1);
}
import { html, render } from "enhanceable";
import { Counter } from "./components/counter.ts";
export default {
async fetch() {
return new Response(
await render(
() => html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enhanceable App</title>
</head>
<body>
<h1>Counter Example</h1>
<${Counter} ${{ initialCount: 1 }} />
</body>
</html>
`
),
{
headers: {
"content-type": "text/html; charset=utf-8",
},
}
);
},
};
You can dynamically create and hydrate components on the client:
// In a client-side file
import { html } from "enhanceable";
import { hydrate } from "enhanceable/dom";
import { TodoItem } from "./todo.ts";
export async function addTodo(event: MouseEvent) {
const list = document.querySelector("ul");
const newItem = hydrate(
await html`<${TodoItem}>New Item</${TodoItem}>`
);
list.append(newItem);
}
The enhanceable/dom module provides utilities for client-side DOM manipulation:
import { hydrate, next } from "enhanceable/dom";
// Find the next element matching a selector
const list = next(button, "ul");
// Hydrate a component for client-side use
const element = hydrate(htmlContent);
html - Template literal tag for creating HTML contentrender(template) - Renders a template to HTML stringuseEnhancements(module) - Connects server components with client-side behaviorhydrate(html) - Converts HTML string to DOM elements with enhancementsnext(element, selector) - Finds the next element matching a selectorFAQs
A lightweight library for building server-rendered components with client-side enhancements.
The npm package enhanceable receives a total of 1 weekly downloads. As such, enhanceable popularity was classified as not popular.
We found that enhanceable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.