diagram-js-ui

A wrapper around htm/preact that exposes components for building reactive HTML widgets in the context of diagram-js and extensions.

Usage

This module is available through diagram-js/lib/ui. Use it to create and mount your Preact components and render them through the htm utility.

// MyService.js
import { render, html } from 'diagram-js/lib/ui';
import MyCounter from './MyCounter';

export default function MyService() {
  const parentElement = document.createElement('div');

  render(html`<${MyCounter} />`, parentElement);
}

// MyCounter.js
import { useState, html } from 'diagram-js/lib/ui';

export default function MyCounter(props) {
  const counter = useState(0);

  return html`
    <div>Counter: ${counter}</div>
  `;
}

Build and Run

# install all dependencies
npm install

# lint and build the library
npm run all

License

MIT

Changelog

All notable changes to diagram-js-ui are documented here. We use semantic versioning for releases.

Unreleased

_Note: Yet to be released changes appear here._

0.2.3

• FIX: correct type exports
• FIX: turn into an actual module
• CHORE: add package exports declaration

0.2.2

• FIX: export full Preact export (again) (#11)

0.2.1

• FIX: do not double-export Preact

0.2.0

• FEAT: align exports with htm/preact (standalone)
• FEAT: add type definitions

0.1.1

• FIX: move htm and preact from devDependencies to dependencies (#5, 5b0b367)

0.1.0

Initial release.