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 0 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
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.