u-spy

installation

loading from CDN

<script src="https://cdn.jsdelivr.net/npm/u-spy"></script>

see also documentation

logging

const {
  receiver,
  restore,
} = _spy.intercept('control-id');

receiver.on(
  receiver.events.XHR_LOAD,
  (data) => {
    console.log('xhr load', data);
  },
);

receiver.on(
  receiver.events.FETCH,
  (data) => {
    console.log('fetch', data);
  },
);

receiver.on(
  receiver.events.BEACON,
  (data) => {
    console.log('beacon', data);
  },
);

receiver.on(
  receiver.events.WINDOW_MESSAGE,
  (data) => {
    console.log('window message', data);
  },
);

intercepting

void _spy.intercept('control-id', {
  fetchHandlers: [
    async function(url, init, originalFetch) {
      if (!/somedomain/i.test(url)) {
        return;
      }
      return new Response(JSON.stringify({
        message: 'hello',
      }));
    },
  ],
});

void _spy.intercept('control-id', {
  xhrHandlers: [
    async function ({ url }, originalXmlHttpRequest) {
      if (!/somedomain/i.test(url)) {
        return;
      }
      const responseBody = {
        message: 'hello from xhr handler',
      };
      return {
        response: JSON.stringify(responseBody),
        responseText: JSON.stringify(responseBody),
        responseHeaders: {
          'Content-Type': 'application/json',
        },
        responseURL: 'https://somedomain',
        responseXML: null,
      };
    },
  ],
});

hot stroke

const {
  unregisterHotStroke,
} = _spy.stroke.register("hello", () => {
  console.log("world");
  unregisterHotStroke();
});

display dialog

const {
  unregisterHotStroke,
} = _spy.stroke.register("hello", () => {
  _spy.dialog.display(dialogElement => {
    dialogElement.textContent = "world";
  });
  unregisterHotStroke();
});

Event Bus

function someEventHandler(data) {
  console.log("some-event", data);
}

const SOME_EVENT = "some-event";

_spy.eventBus.on(
  SOME_EVENT,
  someEventHandler,
);

_spy.eventBus.emit(SOME_EVENT, {
  message: "hello",
});

container

_spy.container.set("some", "thing");

_spy.c.some // thing

custom elements

_spy.customElement.ensure("my-element", { templateHtml: `
<div>
  hi
  <span :value="name"></span>
  <p :value="message"></p>
</div>
<style>
:host(.gray) {
  div {
    background: gray;
  }
}
div {
  background: yellow;
  color: red;
  span {
    background: green;
    color: blue;
  }
}
</style>
`});

<my-element name="alice" message="this is a test"></my-element>
<my-element name="bob" class="gray"></my-element>