Connecting with other Patches

Patches can share functionality with each other using public functions. This guide explains how to expose patch functionality and use it in other patches.

Making Functions Public

Use sup.makePublic() in your patch’s init function to expose functions to other patches:

function init() {
  // Make functions available to other patches
  sup.makePublic([increment, decrement, getCount]);
}

function main() {
  const count = sup.get("count") || 0;
  return [
    `Count: ${count}`,
    sup.button("Add", increment),
    sup.button("Subtract", decrement),
  ];
}

function increment() {
  const count = sup.get("count") || 0;
  sup.set("count", count + 1);
}

function decrement() {
  const count = sup.get("count") || 0;
  sup.set("count", Math.max(0, count - 1));
}

function getCount() {
  return sup.get("count") || 0;
}

Using Other Patches

Access another patch’s public functions using sup.patch():

function main() {
  // Get reference to counter patch
  const counter = sup.patch("cm37jwd2x000008ky4n3v7olb");

  // Call its public functions via .public
  counter.public.increment();
  const count = counter.public.getCount();

  return `Counter value: ${count}`;
}

Patch Author

Every SupPatch includes an author property — a User representing the creator of the patch:

function main() {
  const patch = sup.patch("/hiro/counter");

  // Access the patch author's info
  return `Made by ${patch.author.username}`;
}

This is also available on sup.this.author for the currently running patch.

Passing Data Between Patches

When communicating between patches, all data passed must be serializable (convertible to JSON). This is a general requirement for all inter-patch communication:

// ✅ Works with serializable data
function main() {
  const otherPatch = sup.patch("cm37jwd2x000008ky4n3v7olb");

  // These all work because they're serializable
  otherPatch.public.processString("hello");
  otherPatch.public.processNumber(42);
  otherPatch.public.processObject({ name: "Sam", items: [1, 2, 3] });

  // This doesn't work because functions aren't serializable
  // ❌ otherPatch.public.processFunction(() => "hi");
}

Sup Object Limitations

This serialization requirement affects Sup media objects (SupImage, SupAudio, SupVideo). When passed between patches, they’re serialized to a simplified form.

// ❌ Won't work as expected - passing the full SupImage object
function main() {
  // Trying to pass the entire image object
  return sup.patch("rp639ek4jlwayvisd6dvsx8h").public.removeBg(sup.input.image);
}

// In the meantime you can pass the asset's url.

function main() {
  // Pass just the URL which is a serializable string
  return sup.patch("rp639ek4jlwayvisd6dvsx8h").public.removeBg(sup.input.image.url);
}

Full support for these primitives will be added soon.

Common Patterns

Shared State Management

Create a central patch for managing shared state:

// Patch 1
function init() {
  sup.makePublic([getValue, setValue, increment, reset]);
}

function setValue(key, value) {
  sup.set(key, value);
}

function getValue(key) {
  return sup.get(key);
}

function increment(key) {
  const value = sup.get(key) || 0;
  sup.set(key, value + 1);
  return value + 1;
}

function reset(key) {
  sup.set(key, null);
}

// Patch 2
function main() {
  const state = sup.patch("cm37jws38000108ky9kdfghi4");

  state.public.setValue("score", 100);
  state.public.increment("points");

  return `
    Score: ${state.public.getValue("score")}
    Points: ${state.public.getValue("points")}
  `;
}

Best Practices

1. Clear Function Names

   // ❌ Unclear
   sup.makePublic([fn1, fn2, fn3]);
   
   // ✅ Clear
   sup.makePublic([getUserPreferences, updateUserSettings, resetUserData]);

2. Modular Design

   // ❌ Mixed concerns
   function init() {
     sup.makePublic([updateGame, formatDate, sendMessage]);
   }
   
   // ✅ Focused functionality
   function init() {
     sup.makePublic([startGame, pauseGame, endGame]);
   }