EnhancedVNode

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 EnhancedVNode(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 EnhancedVNode from "./EnhancedVNode.js";

const h = new EnhancedVNode(createElement);

Create val
h.plugin(props => {
  if (props.bg) {
    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 GooberJS)
• 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 { createElement } from "preact";
import EnhancedVNode from "./EnhancedVNode.js";

const h = new EnhancedNVode(createElement);

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, EnhancedVNode helps you build declarative UIs without tying you to one ecosystem.