@actdim/dynstruct

Structure-First Component Model & Architecture for Large-Scale TypeScript Apps

What is Dynstruct?

@actdim/dynstruct is a TypeScript-first component system and architectural framework. It replaces fragile prop-drilling, scattered MobX observables, and tightly-coupled component trees with declarative component structures, zero-boilerplate MobX reactivity, and decoupled message bus channels.

The Problem It Solves

• Spaghetti React State: Scared of refactoring because prop-drilling and callback chains bleed through 5 layers of UI?
• Implicit Dependencies: Hard to tell what data or API services a component needs just by reading its signature?
• Reactivity Boilerplate: Tired of manual makeAutoObservable, autorun cleanup, and useEffect dependencies?

The Output You Get

• ⚡ Explicit Type-Safe Contracts: Declare props, actions, child structures, and message channels at the TypeScript level before writing UI code.
• 🎯 Decoupled Architecture: Components interact over typed message channels (@actdim/msgmesh) rather than hard-coded callbacks.
• 🔄 Automatic Fine-Grained Reactivity: Mutate model.prop = value and UI updates automatically. Zero extra hooks or boilerplate.
• 🎨 First-Class UI Adapter Support: Ready-to-use Material UI adapters via @actdim/dynstruct-mui.

15-Second Code Snippet

import { ComponentStruct, ComponentDef, ComponentParams } from '@actdim/dynstruct/componentModel/contracts';
import { useComponent, toReact, bind } from '@actdim/dynstruct/componentModel/react';

// 1. Declare pure type structure (Zero runtime code needed)
type CounterStruct = ComponentStruct<AppMsgStruct, {
    props: { count: number };
    actions: { increment: () => void };
}>;

// 2. Define component logic & view
const useCounter = (params: ComponentParams<CounterStruct>) => {
    let c: Component<CounterStruct>;
    let m: ComponentModel<CounterStruct>;

    const def: ComponentDef<CounterStruct> = {
        props: { count: 0 },
        actions: { increment: () => { m.count++; } }, // Mutate directly — reactive UI updates automatically
        view: () => (
            <button onClick={m.increment}>Count: {m.count}</button>
        ),
    };

    c = useComponent(def, params);
    m = c.model;
    return c;
};

// 3. Export as a native React component
export const Counter = toReact(useCounter);

Installation

pnpm add @actdim/dynstruct @actdim/msgmesh @actdim/utico mobx mobx-react-lite react react-dom

Documentation Index

Explore the complete guide step-by-step from core concepts to advanced patterns:

| Section | Description | |---|---| | 📖 01. Overview & Key Advantages | Framework design philosophy, UI companion libraries, and comparison with MobX/React. | | 🧩 02. Core Concepts | ComponentStruct, ComponentDef, reactive properties, form helpers (mapToEdit), and events. | | 🏗️ 03. Architecture & Wiring | Message channels, parent-child wiring, direct bindings (bind), and effects. | | ⚛️ 04. React Integration & Services | useComponent, toReact, API service adapters, routing, and auth providers. | | 🛠️ 05. API Reference & Development | Complete type reference, Storybook integration, and testing commands. |

Quick Interactive Demo

Try @actdim/dynstruct in your browser via StackBlitz:

# Run live Storybook examples locally
pnpm run storybook

AI-Assisted Development

Developed with Along - a provider-agnostic context and memory system for AI coding agents.

License

Proprietary / BUSL-1.1. See LICENSE for details.