withPlugins

withPlugins takes the base DOM object and an array of plugins, returning a new object that includes both the original DOM methods and all plugin extensions. The return type is fully inferred by TypeScript.

For a larger app, you usually call withPlugins once in a dedicated module (conventionally jd.config) and import the result as jd from your entry and components. To generate that layout in a new Vite app, use create-just-dom.

Import

import { withPlugins } from "just-dom";

Signature

function withPlugins<const P extends readonly JDPlugin<any>[]>(
  dom: JDom,
  plugins: P,
): JDom & MergePluginExtensions<P>;

Parameters

Returns

Usage

Single plugin

import DOM, { withPlugins } from "just-dom";
import { lucidePlugin } from "@just-dom/lucide";

const jd = withPlugins(DOM, [lucidePlugin]);

jd.div({ className: "app" });           // built-in
jd.lucide("Heart", { size: 24 });       // from plugin

Multiple plugins

import DOM, { withPlugins } from "just-dom";
import { pluginA } from "just-dom-a";
import { pluginB } from "just-dom-b";

const jd = withPlugins(DOM, [pluginA, pluginB]);

TypeScript merges all extension types into a single intersection, so every method from every plugin is typed correctly.

How It Works

At runtime, withPlugins creates a shallow copy of the DOM object, then iterates over each plugin and calls its extend() method. The returned methods are merged onto the copy:

const extended = { ...dom };
for (const plugin of plugins) {
  Object.assign(extended, plugin.extend());
}
return extended;

The original DOM object is never mutated — withPlugins always returns a new object.

Type Utilities

The return type uses two internal type utilities:

These are exported from just-dom for advanced use cases:

import type { MergePluginExtensions, JDPlugin } from "just-dom";