A minimalist, plugin-ready hyperscript-style utility for rendering elements with style normalization, class processing, and custom behavioral plugins. Compatible with React, Preact, or any functionally similar createElement.

• 🧱 Lightweight functional interface: const h = new EnhancedElements(createElement)
• 🎨 Normalizes class strings into Set and filters empty entries
• 🎛️ Parses inline style into clean JS objects
• 🧩 Plugin system for custom props, dynamic logic, or design tokens
• 🎯 Renderer-agnostic: bring your own createElement

This utility is framework-neutral. Just copy the source file into your project and wire it up:

Create val
import { createElement } from "preact"; // or import from react
import EnhancedElements from "./EnhancedElements.js";

const h = new EnhancedElements(createElement);

Create val
h.plugin(props => {
  if (!props.bg) return;
  props.classList.add(`bg-${props.bg}`);
  delete props.bg;
});

const vnode = h("div", {
  class: "box  padded",
  style: "color: red; padding: 1rem;",
  bg: "blue"
});

The resulting vnode will have:

• Normalized class string: "box padded bg-blue"
• Inlined style converted into a class (via css()—assumed external)
• Plugins applied and props cleaned up

Plugins are just functions that receive and mutate the props object before rendering:

Create val
h.plugin(props => {
  if (props.opacity) {
    props.styleObject.opacity = parseFloat(props.opacity);
    delete props.opacity;
  }
});

You can add as many as you'd like. They run sequentially.

Create val
h.toStyleObject("color: red; padding: 1rem;")
// ➜ { color: "red", padding: "1rem" }

Create val
import { h as preactH } from "preact";
import EnhancedElements from "./EnhancedElements.js";

const h = new EnhancedElements(preactH);

h.plugin(props => {
  if (props.rounded) {
    props.classList.add("rounded");
    delete props.rounded;
  }
});

export default h;

This utility embraces composability, readability, and framework flexibility. By abstracting common patterns around class and style handling, EnhancedElements helps you build declarative UIs without tying you to one ecosystem.

Want help drafting usage diagrams, export variations (like h.div()), or typing it for TypeScript? I’ve got your back. We’re almost at library-launch mode. 😎