Messy Integration

This provides connectivity between the Messy User Area and the UIs of integrating services via browser cross-origin communication utilizing window.postMessage and <iframe>s.

Integrate your own Service with Messy

1. Install this package with npm install messy-integration
2. Load the Messy Integration:

import { startMessy } from "messy-integration";
const session = startMessy();

// Use session.onReady to show some loading animation, i.e.
(async function () {
    showSpinner();
    await session.onReady;
    hideSpinner();
})();

3. Whenever there's a Recipe in your application that the user wants to mix, start the integration:

const result = await session.run({
  recipe: {
    name: { en: "The best cake ever" },
    tasks: [
        {
            name: "misc",
            description: { en: "Switch on the oven" }
        },
        {
            name: "add",
            description: { en: "Two eggs" }
        },
        {
            name: "fill",
            amount: 1000,
            amountInUnit: 1,
            unit: "l",
            ingredient: { en: "water" }
        },
        {
            name: "fill",
            amount: 1000,
            amountInUnit: 900,
            unit: "g",
            ingredient: { en: "flour" }
        },
    ]
  }
});

For further details on the recipe see ./types.ts.