npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

anx-esop-engine

v1.0.53

Published

ESOP Engine, providing BPMN components for React Flow conversion and rendering capabilities.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

clt_packageclt_package

Keywords

bpmnreact-flowconverterworkflow

Readme

anx-esop-engine

ESOP Engine, providing BPMN components for React Flow conversion and rendering capabilities.

Installation

NPM (Recommended)

npm install anx-esop-engine

CDN (Browser)

<script src="https://cdn.example.com/anx-esop-engine.js"></script>
<script>
  const { BpmnImporter, BpmnExporter } = window.AnxEsopEngine;
</script>

See CDN-SETUP.md for detailed CDN configuration and deployment.

Usage

import {
  BpmnImporter,
  BpmnExporter,
  BpmnValidator,
  type DomainWorkflow,
} from 'anx-esop-engine';

const workflow: DomainWorkflow = await BpmnImporter.importXml(xmlString);

const validation = BpmnValidator.validateWorkflow(workflow.nodes, workflow.edges);

const exportedXml = await BpmnExporter.exportToXml(workflow);

Utils (Classes)

  • BpmnImporter - Import BPMN XML files
    • importXml(xml: string): Promise<DomainWorkflow>
  • BpmnExporter - Export workflow to BPMN XML
    • exportToXml(workflow: DomainWorkflow): Promise<string>
  • BpmnLayout - Auto-layout utilities
    • applyAutoLayout(nodes, edges, direction?)
  • BpmnValidator - Validation & connection rules
    • validateWorkflow(nodes, edges)
    • canConnect(source, target, connectionType)
  • REPLACE_OPTIONS - Node replacement options

Components

  • BpmnModeler - Main BPMN editor component (with palette, properties panel)
  • BpmnNode - Custom React Flow node renderer
  • BpmnEdge - Custom React Flow edge renderer
  • BpmnPalette - Toolbar for adding elements
  • BpmnPropertiesPanel - Element properties editor
  • BpmnContextPad - Context menu for quick actions
  • BpmnQuickAppend - Quick append helper component
  • BPMN_ICON_PATHS - SVG icon paths for BPMN shapes

Types

  • DomainWorkflow - Workflow model
  • DomainNode - Node in workflow
  • DomainEdge - Connection between nodes
  • DomainPool - Pool container
  • DomainLane - Lane in pool
  • BpmnState - Global state from Zustand store
  • ValidationError - Validation error details
  • ReplaceOption - Node replacement option
  • BpmnQuickAppendProps - Props for BpmnQuickAppend component

Store

  • useBpmnStore - Zustand store for BPMN state
    • Manages workflow, selection, clipboard, undo/redo

Publish Checklist

  1. Update package name/version in package.json.
  2. Ensure repository URL points to your GitHub repo.
  3. Login with npm login.
  4. Run npm run publish:dry to verify.
  5. Run npm run publish:ps1 to publish.

PowerShell Publish Script

The project includes scripts/publish.ps1 with these options:

  • -DryRun: publish dry-run
  • -Tag <tag>: publish tag, default latest
  • -Access <public|restricted>: npm access, default public
  • -Otp <code>: OTP for 2FA publish
  • -SkipChecks: skip npm whoami, build, and pack checks

Examples:

# Dry run with checks
powershell -ExecutionPolicy Bypass -File .\scripts\publish.ps1 -DryRun

# Real publish
powershell -ExecutionPolicy Bypass -File .\scripts\publish.ps1

# Publish with beta tag
powershell -ExecutionPolicy Bypass -File .\scripts\publish.ps1 -Tag beta

Publishing to CDN

The library supports UMD builds for CDN distribution. All dependencies are bundled for browser use.

Build for CDN

# Creates dist/cdn/ with all CDN-ready files
npm run build:cdn

Output files:

  • anx-esop-engine.js (811.56 KB) - Latest version
  • anx-esop-engine-1.0.0.js - Versioned immutable build
  • anx-esop-engine.js.map - Source map for debugging
  • index.html - Demo page
  • package-info.json - Metadata

CDN Deployment Options

Option 1: AWS S3 (Recommended)

# One-time setup
aws configure

# Set environment variable
$env:CDN_BUCKET = "my-bucket"
$env:AWS_REGION = "us-east-1"

# Upload to CDN
npm run cdn:upload

Option 2: jsDelivr (Automatic)

Automatically available after publishing to npm:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>

Option 3: Manual Upload

# Build CDN files
npm run build:cdn

# Upload dist/cdn/ contents to your CDN provider

HTML Usage

<!DOCTYPE html>
<html>
<head>
    <title>BPMN Viewer</title>
</head>
<body>
    <div id="canvas" style="width: 100%; height: 100vh;"></div>

    <!-- Include from CDN -->
    <script src="https://cdn.example.com/anx-esop-engine.js"></script>
    
    <script>
        const { BpmnImporter, BpmnExporter } = window.AnxEsopEngine;
        
        // Use library
        const workflow = BpmnImporter.fromXML(xmlString);
        console.log('Nodes:', workflow.nodes);
    </script>
</body>
</html>

Global API

Available as window.AnxEsopEngine:

{
  // Utilities
  BpmnImporter, BpmnExporter, BpmnLayout, BpmnValidator, REPLACE_OPTIONS,
  
  // Components
  BpmnModeler, BpmnNode, BpmnEdge, BpmnPalette, BpmnPropertiesPanel,
  BpmnContextPad, BpmnQuickAppend, BPMN_ICON_PATHS,
  
  // Store
  useBpmnStore,
  
  // Types & Constants
  ... (all TypeScript types and exports)
}

For detailed CDN setup and troubleshooting, see CDN-SETUP.md and docs/CDN-DEPLOYMENT.md.