marko global state

global-state.js

const valuesById = new Map();
const listenersById = new Map();

export function withGlobalState(component, out, id, state = {}) {
  if (typeof document === "undefined") {
    if (Array.isArray(id)) {
      for (const item of id) {
        withGlobalState(component, out, item, state);
      }
    } else {
      state[id] = out.global[id];
    }

    return state;
  }

  if (Array.isArray(id)) {
    for (const item of id) {
      withGlobalState(component, out, item, state);
    }
  } else {
    if (valuesById.has(id)) {
      state[id] = valuesById.get(id);
    } else {
      valuesById.set(id, state[id] = out.global[id]);
    }
    

    let listeners = listenersById.get(id);
    if (listeners) {
      listeners.push(component);
    } else {
      listeners = [component];
      listenersById.set(id, listeners);
    }

    component.once("destroy", () => {
      const last = listeners.pop();

      if (component !== last) {
        listeners[listeners.indexOf(component)] = last;
      }
    });

    
  }

  return state;
}

export function setGlobalState(id, value) {
  if (typeof document === "undefined") {
    throw new Error("Cannot set global state on the server, use $global instead");
  }
  
  const listeners = listenersById.get(id);
  valuesById.set(id, value);

  if (listeners) {
    for (const listener of listeners) {
      listener.setState(id, value);
    }
  }
}

Dumb global value pubsub that falls back to Marko's out.global and automatically synchronizes values with component state.

https://markojs.com/playground/#NobwRAdghgtgpmAXGAlhAJnAHgOhlAJwGsB7MAGjAAcoAXACyTAHoBjEmKkiOCWgZ2ZpMufMTKV2fXrSYpOJArQAEIZQHcUDAOIAbEgCMougMq06cZQF9lAMwIdlAHTA5mAc31HdAWn7naOBcAbicIMNZdKH5+VTDlBOVuAGECOAsACjQqAFdaciS8gEo4iETy5QYUfhx-C2UAXg0tej1DYzNMqv4CkjyC4BcoFwKXAxcAXSLQssSrMPnwiB8fZQASEDrAnCgbDa24HANFgB5Pdt8qBwA3FEwCZgA+MCtycGh4JnPvPwDDgCt+BRqHRGMg2BwuDw+IJvsZfhYcIDgVJAnwmFJ-MprsYcnB+AAhACeAEl0I1lDx1MoALJQKgZaYRbhY3TVNFwAiE0nkppU2n0xkzMLYLhKOw5CCsWgobjNHReDp-DLsBTQ-KFDV3AoHCkgKwlEDxZQoWzKDK0IlUOAkM3oEisHLwPiNBpNFySzC2NBwdAuQ3GhKm80AQQIBCgRJw1TDEaJWXQRQDs3KtkU5sxKi0cBgSTNd2TFUSmgVF06gRVkO4Ml6-RNgRgOr+TJTc0D1mUcF0-EsRtbCQOwDuEwpfVoODhuiH6AmM3Ki3baVoOQIZQOc+sYWNwYyscj0f4e-jBcLiTTBAzLKzDbzJsTpSLJdaitMytVUJrmoK2cbygOLfnY0bC7HsH0SHccV0PFuTJHB6GiBMkzA8pB2HClIOg4lYPcOBaEQjcEmA7te3bBIMPxLD0FqXCEybCxpxHJoxwnF8GIAttWy3VtdFw5Q2X8XhOViJp+I5LlKInGiCwIk0zQyUTBK5U9ygUnguRwXJ+HoSs1RkdjCM7YjkMSVShIpYB32rPhZ1Ivj2UUmCqJ7PDtTsgS1P4fTNyWcpLPVHBuFYOAMhcTB-AcIkRnNEoGkeYyEkzPjohUET7I8jSSAZFtbJ3PyZGUABCN0kv8ZSKlMrlgAqmphGwAB5WwdI-PgikYkraBkwj2wNYVONmBdZiXFc1z+GYBtFRQVFsSVpVlNdcLabxy2C1zyNPHdLWtW1lHtR1nRS4qPQwOBvR4P0wDKhgHGpfkAFFw0UEKwGSKAIAgEgVGc5RJz-P4kjKBhLB7Ahrk5AoclAtYfrQASoHO9jFgSY1EuqilqoknCXMTDdyMc6isYKNbeqDOTqrK89LwgVk0s5W8yfityxPx5baOxXE4C8xHvMWF43kgWAEGQScfCuEhbnuPBCFIYEaAYJgIV0mEPBfEWbjuTlJfEFFuDRWRkHkMUVDUZzFqVeobHsRwXDcYWDhCLjImiWI+3KFI2VYIgQ0ZBmBwWl8WaGKK6QYHAIwwDhGU59s3ZQD2CW9l2iz-P2y2VMYg9BUPXvtGBI5kxYBrCE4DDyWg5Rjj2norz3-UeABVKh0AsEMTieIuS9oMuymrquIGSd2iAJWuG6bwICVb54rAmIA