Your framework, unchanged.

A headless integration

React, Vue, and Angular dependencies belong to your application, never to the core package. The examples below adapt the same public IEngine interface. They are patterns to copy and extend—not exports from @newvexa/workify.

Start runs on explicit actions, not during rendering, on module import, or automatically inside a lifecycle effect. Keep an engine stable for its view or consumer.

Framework adapters

1import { useCallback, useEffect, useSyncExternalStore } from "react";
2import type { IEngine } from "@newvexa/workify";
3
4export function useWorkflow(engine: IEngine) {
5  const subscribe = useCallback(
6    (listener: () => void) => engine.subscribe(listener), [engine],
7  );
8  const getSnapshot = useCallback(() => engine.getSnapshot(), [engine]);
9
10  useEffect(() => {
11    const stop = engine.onEvent((event) => {
12      if (event.type === "run.finished") console.log(event.status);
13    });
14    return stop;
15  }, [engine]);
16
17  return useSyncExternalStore(subscribe, getSnapshot);
18}

In Vue, call the composable inside setup() or an active effect scope. Read state.value.status in script; templates unwrap the ref. onScopeDispose removes the state observer.

React lifecycle & events

The React hook uses useSyncExternalStore for immutable snapshots and useEffect to subscribe to detailed execution events. Both APIs are cleaned up when the consumer changes or unmounts. Keep the instance stable:

1import { useState } from "react";
2import { createWorkflowEngine } from "./workflow";
3import { useWorkflow } from "./useWorkflow";
4
5// Inside your component:
6const [engine] = useState(() => createWorkflowEngine());
7const snapshot = useWorkflow(engine);
8// Start explicitly from a button handler:
9// onClick={() => void engine.run(21)}

Angular dependency injection

Provide both the service and engine at the component/view level. Import the quick-start factory and the token/service from your application files, then use the provider array in the component’s providers metadata.

1const workflowProviders = [
2  WorkflowService,
3  { provide: WORKFLOW_ENGINE, useFactory: createWorkflowEngine },
4];
5// Use workflowProviders in your component's providers.

The service bridges subscriptions to a signal. DestroyRef removes the observer on view destruction; it does not automatically stop an owned run.

Lifecycle & cancellation

Unsubscribing and cancelling are different operations. On cleanup, remove listeners and abort any run the view owns. Cooperative cancellation still waits for started handlers to settle.

1const controller = new AbortController();
2const pending = engine.run(21, { signal: controller.signal });
3controller.abort();
4const result = await pending;
5console.log(result.status); // "cancelled"

For complete run/cancel/error handling, read the shipped framework examples: