Middlewares

Middlewares are functions that wrap the form’s reactive store and observe (or mutate) every action that flows through it. They run on every state change and can be composed.

middlewares goes inside the config object in both paths.

Default middlewares

GolemUI ships a few middlewares you can opt into:

Middleware	What it does
`loggerMiddleware`	Logs each action and the resulting state to the console — handy during development.
`devToolsMiddleware`	Pipes actions to the Redux DevTools extension for time-travel debugging.

Wiring middlewares

Pass an array of middlewares inside the config object as the middlewares property. Below, every framework wires devToolsMiddleware.

import { devToolsMiddleware } from '@golemui/core';
import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-react';

const config = {
  formDef: [gui.inputs.textInput('username')],
  middlewares: [devToolsMiddleware()],
};

export function MyForm() {
  return <GuiForm config={config} />;
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { devToolsMiddleware } from '@golemui/core';
import { gui } from '@golemui/gui-shared';
import { FormComponent } from '@golemui/gui-angular';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyForm {
  protected config = {
    formDef: [gui.inputs.textInput('username')],
    middlewares: [devToolsMiddleware()],
  };
}

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { devToolsMiddleware } from '@golemui/core';
import { gui } from '@golemui/gui-shared';
import '@golemui/gui-lit';

@customElement('my-form')
export class MyForm extends LitElement {
  config = {
    formDef: [gui.inputs.textInput('username')],
    middlewares: [devToolsMiddleware()],
  };

  override createRenderRoot() { return this; }

  override render() {
    return html`<gui-form .config=${this.config}></gui-form>`;
  }
}

<script setup lang="ts">
import { devToolsMiddleware } from '@golemui/core';
import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-vue';

const config = {
  formDef: [gui.inputs.textInput('username')],
  middlewares: [devToolsMiddleware()],
};
</script>

<template>
  <GuiForm :config="config" />
</template>

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';
import { devToolsMiddleware } from '@golemui/core';
import { gui } from '@golemui/gui-shared';

const form = document.getElementById('app-form');
form.config = {
  formDef: [gui.inputs.textInput('username')],
  middlewares: [devToolsMiddleware()],
};

import { devToolsMiddleware } from '@golemui/core';
import { GuiForm } from '@golemui/gui-react';
import formDef from './my-form.json';

const config = { formDef, middlewares: [devToolsMiddleware()] };

export function MyForm() {
  return <GuiForm config={config} />;
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { devToolsMiddleware } from '@golemui/core';
import { FormComponent } from '@golemui/gui-angular';
import formDef from './my-form.json';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyForm {
  protected config = {
    formDef,
    middlewares: [devToolsMiddleware()],
  };
}

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { devToolsMiddleware } from '@golemui/core';
import '@golemui/gui-lit';
import formDef from './my-form.json';

@customElement('my-form')
export class MyForm extends LitElement {
  config = {
    formDef,
    middlewares: [devToolsMiddleware()],
  };

  override createRenderRoot() { return this; }

  override render() {
    return html`<gui-form .config=${this.config}></gui-form>`;
  }
}

<script setup lang="ts">
import { devToolsMiddleware } from '@golemui/core';
import { GuiForm } from '@golemui/gui-vue';
import formDef from './my-form.json';

const config = { formDef, middlewares: [devToolsMiddleware()] };
</script>

<template>
  <GuiForm :config="config" />
</template>

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';
import { devToolsMiddleware } from '@golemui/core';
import formDef from './my-form.json';

const form = document.getElementById('app-form');
form.config = { formDef, middlewares: [devToolsMiddleware()] };

Want to write your own?

See Extending GolemUI / Middlewares for the middleware contract and a worked example.