mayu-live 0.0.0

data/lib/mayu/client/src/main.ts

@@ -0,0 +1,271 @@
+import { sessionStream } from "./stream";
+import NodeTree from "./NodeTree";
+import h from "./h";
+import type MayuPingElement from "./custom-elements/mayu-ping";
+import type MayuLogElement from "./custom-elements/mayu-log";
+import type MayuExceptionElement from "./custom-elements/mayu-exception";
+import type MayuAlertElement from "./custom-elements/mayu-alert";
+
+import serializeEvent from "./serializeEvent";
+
+import logger from "./logger";
+
+const onDOMContentLoaded = new Promise<void>((resolve) => {
+  if (document.readyState !== "loading") {
+    return resolve();
+  }
+
+  window.addEventListener("DOMContentLoaded", () => resolve());
+});
+
+function shouldPreventDefault(e: Event) {
+  if (typeof TouchEvent !== "undefined") {
+    if (e instanceof TouchEvent) {
+      return false;
+    }
+  }
+  return true;
+}
+
+async function showException({
+  type,
+  message,
+  backtrace,
+}: {
+  type: string;
+  message: string;
+  backtrace: string[];
+}) {
+  await import("./custom-elements/mayu-exception");
+
+  const cleanedBacktrace = backtrace
+    .filter((line) => !/\/vendor\/bundle\//.test(line))
+    .join("\n");
+
+  const el = h("mayu-exception", [
+    h("span", [`${type}: ${message}`], { slot: "title" }),
+    h("span", [cleanedBacktrace], { slot: "backtrace" }),
+  ]);
+
+  document.body.appendChild(el);
+}
+
+async function showAlert(message: string) {
+  await import("./custom-elements/mayu-alert");
+  const elem = document.createElement("mayu-alert") as MayuAlertElement;
+  elem.setAttribute("message", message);
+  document.body.appendChild(elem);
+}
+
+class MayuGlobal {
+  #sessionId: string;
+
+  constructor(sessionId: string) {
+    this.#sessionId = sessionId;
+
+    onDOMContentLoaded.then(() => {
+      window.addEventListener("popstate", () => {
+        return navigateTo(this.#sessionId, location.pathname);
+      });
+    });
+  }
+
+  async handle(e: Event, handlerId: string) {
+    if (shouldPreventDefault(e)) {
+      e.preventDefault();
+    }
+
+    const payload = serializeEvent(e);
+    console.log(payload);
+    // progressBar.setAttribute("progress", "0");
+
+    await mayuCallback(this.#sessionId, handlerId, payload);
+
+    let didRun = false;
+    const timeout = setTimeout(() => {
+      // progressBar.setAttribute("progress", "25");
+      didRun = true;
+    }, 1);
+
+    clearTimeout(timeout);
+
+    // progressBar.setAttribute("progress", "100");
+  }
+
+  async navigate(e: MouseEvent) {
+    if (e.metaKey || e.ctrlKey) return;
+
+    e.preventDefault();
+    const anchor = (e.target as HTMLElement).closest("a");
+
+    if (!anchor) {
+      logger.error("Could not find anchor element for", e.target);
+      return;
+    }
+
+    const url = new URL((anchor as HTMLAnchorElement).href);
+    // progressBar.setAttribute("progress", "0");
+    return navigateTo(this.#sessionId, url.pathname + url.search);
+  }
+}
+
+function mayuCallback(sessionId: string, handlerId: string, payload: any) {
+  return fetch(`/__mayu/session/${sessionId}/callback/${handlerId}`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+    },
+    body: JSON.stringify(payload),
+  });
+}
+
+async function navigateTo(sessionId: string, url: string) {
+  return fetch(`/__mayu/session/${sessionId}/navigate`, {
+    method: "POST",
+    headers: { "content-type": "text/plain; charset=utf-8" },
+    body: url,
+  });
+}
+
+function getSessionIdFromUrl(url: string) {
+  const index = url.lastIndexOf("#");
+  if (index === -1) {
+    throw new Error(`No # found in script url: ${url}`);
+  }
+  return url.slice(index + 1);
+}
+
+function loadCustomElements() {
+  import("./custom-elements/mayu-ping");
+  import("./custom-elements/mayu-disconnected");
+  import("./custom-elements/mayu-progress-bar");
+  import("./custom-elements/mayu-exception");
+  import("./custom-elements/mayu-alert");
+}
+
+async function main(url: string) {
+  const sessionId = getSessionIdFromUrl(url);
+  const mayu = new MayuGlobal(sessionId);
+  window.Mayu = mayu;
+
+  let nodeTree: NodeTree | undefined;
+
+  const disconnectedElement = document.createElement("mayu-disconnected");
+
+  const pingElement = document.createElement("mayu-ping") as MayuPingElement;
+  pingElement.setAttribute("region", "Connecting...");
+  pingElement.setAttribute("status", "connecting");
+  document.body.appendChild(pingElement);
+
+  for await (const [event, payload] of sessionStream(sessionId)) {
+    switch (event) {
+      case "system.connected":
+        loadCustomElements();
+
+        pingElement.setAttribute("region", "Connected!");
+        pingElement.setAttribute("status", "connected");
+        logger.success("Connected!");
+
+        document.body
+          .querySelectorAll("mayu-disconnected")
+          .forEach((el) => el.remove());
+        break;
+      case "system.disconnected":
+        if (payload.transferring) {
+          pingElement.setAttribute("region", "Transferring…");
+          pingElement.setAttribute("status", "transferring");
+          break;
+        }
+
+        pingElement.setAttribute("region", "Disconnected");
+        pingElement.setAttribute("status", "disconnected");
+
+        logger.error("Disconnected");
+
+        disconnectedElement.setAttribute("reason", payload.reason);
+
+        if (disconnectedElement.parentElement !== document.body) {
+          document.body.appendChild(disconnectedElement);
+        }
+        break;
+      case "session.init":
+        await onDOMContentLoaded;
+        nodeTree = new NodeTree(payload.ids);
+        break;
+      case "session.patch":
+        nodeTree?.apply(payload);
+        break;
+      case "session.navigate":
+        const path = payload.path;
+
+        if (path !== location.pathname) {
+          logger.info("Navigating to", path);
+          history.pushState({}, "", path);
+          // progressBar.setAttribute("progress", "100");
+        }
+        break;
+      case "session.action":
+        handleAction(payload.type, payload.payload);
+        break;
+      case "session.keep_alive":
+        break;
+      case "session.transfer":
+        pingElement.setAttribute("region", "Transferring");
+        pingElement.setAttribute("status", "transferring");
+        break;
+      case "session.exception":
+        showException(payload);
+        break;
+      case "ping":
+        const values = Object.values(payload.values) as number[];
+        const mean = values.reduce((a, b) => a + b, 0.0) / values.length;
+        pingElement.setAttribute("ping", `${mean.toFixed(2)} ms`);
+        pingElement.setAttribute(
+          "region",
+          `${payload.instance} @ ${payload.region}`
+        );
+        pingElement.setAttribute("status", "ping");
+        break;
+      default:
+        logger.warn("Unhandled event:", event, payload);
+        break;
+    }
+  }
+
+  function handleAction(type: string, payload: any) {
+    switch (type) {
+      case "scroll_into_view": {
+        scrollIntoView(payload.selector, payload.options || {});
+        break;
+      }
+      case "alert": {
+        showAlert(payload);
+        break;
+      }
+      default: {
+        logger.error("Unhandled action:", type, payload);
+        break;
+      }
+    }
+  }
+
+  function scrollIntoView(selector: string, options: Record<string, string>) {
+    const elem = document.querySelector(selector);
+
+    if (elem) {
+      elem.scrollIntoView({
+        block: "start",
+        inline: "nearest",
+        behavior: "smooth",
+        ...options,
+      });
+    } else {
+      console.error(
+        "Could not find element to scrollIntoView, selector:",
+        selector
+      );
+    }
+  }
+}
+
+export default main(import.meta.url);

data/lib/mayu/client/src/serializeEvent.ts

@@ -0,0 +1,90 @@
+function serializeElement(obj: any) {
+  if (obj instanceof HTMLFormElement) {
+    const formData = Object.fromEntries(new FormData(obj).entries());
+
+    return {
+      tagName: obj.tagName,
+      id: obj.id,
+      method: obj.method,
+      target: obj.target,
+      name: obj.name,
+      formData,
+    };
+  }
+
+  if (obj instanceof HTMLSelectElement) {
+    return {
+      tagName: obj.tagName,
+      id: obj.id,
+      type: obj.type,
+      name: obj.name,
+      value: obj.value,
+    };
+  }
+
+  if (obj instanceof HTMLDetailsElement) {
+    return {
+      tagName: obj.tagName,
+      id: obj.id,
+      open: obj.open,
+    };
+  }
+
+  if (obj instanceof HTMLInputElement) {
+    return {
+      tagName: obj.tagName,
+      id: obj.id,
+      type: obj.type,
+      name: obj.name,
+      value: obj.value,
+      checked: obj.checked,
+    };
+  }
+
+  if (obj instanceof HTMLButtonElement) {
+    return {
+      tagName: obj.tagName,
+      id: obj.id,
+      type: obj.type,
+      name: obj.name,
+      value: obj.value,
+    };
+  }
+
+  if (obj instanceof HTMLElement) {
+    return {
+      tagName: obj.tagName,
+      id: obj.id,
+    };
+  }
+
+  return {};
+}
+
+function serializeEvent(e: Event) {
+  const payload: Record<string, any> = {};
+
+  payload.type = e.constructor.name;
+
+  if (e.currentTarget) {
+    payload.currentTarget = serializeElement(e.currentTarget);
+  }
+
+  if (e.target) {
+    payload.target = serializeElement(e.target);
+  }
+
+  if (e instanceof MouseEvent) {
+    payload.buttons = e.buttons;
+  }
+
+  if (e instanceof SubmitEvent) {
+    if (e.submitter instanceof HTMLElement) {
+      payload.submitter = serializeElement(e.submitter);
+    }
+  }
+
+  return payload;
+}
+
+export default serializeEvent;

data/lib/mayu/client/src/stream.ts

@@ -0,0 +1,175 @@
+import { decodeMultiStream, ExtensionCodec } from "@msgpack/msgpack";
+import { stringifyJSON, retry, FatalError, sleep } from "./utils";
+import { MimeTypes } from "./MimeTypes";
+import logger from "./logger";
+import DecompressionStream from "./DecompressionStream";
+
+function createExtensionCodec() {
+  const extensionCodec = new ExtensionCodec();
+
+  extensionCodec.register({
+    type: 0x01,
+    encode() {
+      throw new Error("Not implemented");
+    },
+    decode(buffer: Uint8Array) {
+      return new Blob([buffer], { type: "application/vnd.mayu.session" });
+    },
+  });
+
+  return extensionCodec;
+}
+
+async function startStream(sessionId: string, encryptedState?: Blob) {
+  const res = await resume(sessionId, encryptedState);
+
+  if (!res.ok) {
+    const text = await res.text();
+
+    if (res.status == 503) {
+      // Server is shutting down, so retry..
+      throw new Error(`${res.status}: ${text}`);
+    }
+
+    throw new FatalError(`${res.status}: ${text}`);
+  }
+
+  if (!res.body) {
+    throw new FatalError("body is null");
+  }
+
+  const decompressionStream = new DecompressionStream("deflate-raw");
+
+  return res.body.pipeThrough(decompressionStream);
+}
+
+type ServerMessage = [id: string, event: string, payload: any];
+type SessionStreamMessage = [string, any];
+
+function resume(sessionId: string, encryptedState?: Blob) {
+  if (!encryptedState) {
+    return retry(() =>
+      fetch(`/__mayu/session/${sessionId}/init`, {
+        method: "POST",
+      })
+    );
+  }
+
+  return retry(() =>
+    fetch(`/__mayu/session/${sessionId}/resume`, {
+      method: "POST",
+      headers: { "content-type": MimeTypes.MAYU_SESSION },
+      body: encryptedState,
+    })
+  );
+}
+
+function errorMessage(e: any) {
+  if (e instanceof Error) {
+    return e.message;
+  }
+
+  if (typeof e === "string") {
+    return e;
+  }
+
+  return String(e);
+}
+
+export async function* sessionStream(
+  sessionId: string
+): AsyncGenerator<SessionStreamMessage> {
+  let isRunning = true;
+  let encryptedState: Blob | undefined;
+  let isConnected = false;
+  const extensionCodec = createExtensionCodec();
+  let reason: string | undefined;
+
+  while (isRunning) {
+    try {
+      const stream = await retry(() => startStream(sessionId, encryptedState));
+
+      try {
+        for await (const message of decodeMultiStream(stream, {
+          extensionCodec,
+        })) {
+          const [id, event, payload] = message as ServerMessage;
+
+          if (!isConnected) {
+            isConnected = true;
+            yield ["system.connected", {}];
+          }
+
+          if (encryptedState) {
+            logger.info("Clearing encryptedState");
+            encryptedState = undefined;
+          }
+
+          try {
+            switch (event) {
+              case "session.transfer":
+                yield ["session.transfer", {}];
+                encryptedState = payload;
+                logger.info("Setting encryptedState", payload);
+                break;
+              case "pong":
+                yield [
+                  "ping",
+                  {
+                    values: {
+                      client: new Date().getTime() - Number(payload.pong),
+                      server: payload.server,
+                    },
+                    region: payload.region,
+                    instance: payload.instance,
+                  },
+                ];
+                break;
+              case "ping":
+                postCallback(sessionId, "ping", {
+                  pong: payload,
+                  ping: new Date().getTime(),
+                });
+                break;
+              default:
+                yield [event, payload];
+            }
+          } catch (e) {
+            reason = errorMessage(e);
+            logger.error(e);
+          }
+        }
+      } catch (e) {
+        reason = errorMessage(e);
+        logger.error(e);
+      }
+
+      isConnected = false;
+
+      if (isRunning) {
+        reason ||= "Stream ended unexpectedly";
+      }
+
+      yield ["system.disconnected", { transferring: !!encryptedState, reason }];
+    } catch (e) {
+      logger.error(e);
+
+      if (e instanceof FatalError) {
+        isRunning = false;
+        isConnected = false;
+        yield ["system.disconnected", { reason: e.message }];
+        return;
+      }
+
+      await sleep(1000);
+    }
+  }
+}
+
+async function postCallback(sessionId: string, callbackId: string, data: any) {
+  return fetch(`/__mayu/session/${sessionId}/${callbackId}`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: stringifyJSON(data),
+  });
+}

data/lib/mayu/client/src/types.ts

@@ -0,0 +1 @@
+export type MayuNodeData = { id: number };

data/lib/mayu/client/src/utils.ts

@@ -0,0 +1,71 @@
+export function stringifyJSON(payload: any, space?: number) {
+  return JSON.stringify(
+    payload,
+    (_key: string, value: any) => {
+      if (typeof value === "bigint") {
+        return Number(value);
+      } else if (value instanceof Blob) {
+        return `Blob{type: ${value.type}, size: ${value.size}}`;
+      } else {
+        return value;
+      }
+    },
+    space
+  );
+}
+
+export async function sleep(ms = 1000) {
+  return new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export class FatalError extends Error {}
+
+export async function retry<T>(fn: () => Promise<T>): Promise<T> {
+  const maxAttempts = 10;
+  let attempts = 0;
+
+  while (true) {
+    try {
+      return await fn();
+    } catch (e) {
+      if (e instanceof FatalError) {
+        throw e;
+      }
+
+      if (attempts >= maxAttempts) {
+        console.error("Reached the maximum number of attempts!");
+        throw e;
+      }
+
+      const waitTime = attempts + Math.random();
+
+      console.error(
+        `Got error (attempts: ${attempts}, wait: ${waitTime.toFixed(2)})`,
+        e
+      );
+
+      const logTimes = Math.ceil(waitTime);
+      const sleepTime = waitTime / logTimes;
+
+      for (let i = 0; i < logTimes; i++) {
+        console.warn(
+          `Retrying in ${(waitTime - i * sleepTime).toFixed(2)} seconds`
+        );
+        await sleep(sleepTime * 1000);
+      }
+
+      attempts++;
+    }
+  }
+}
+
+export function* splitChunk(chunk: Uint8Array) {
+  let offset = 0;
+
+  while (offset < chunk.byteLength) {
+    yield chunk.slice(offset, offset + 1024);
+    offset += 1024;
+  }
+}

data/lib/mayu/client/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}

data/lib/mayu/colors.rb

@@ -0,0 +1,34 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Mayu
+  module Colors
+    extend T::Sig
+
+    sig { params(str: String, t: Float).returns(String) }
+    def self.rainbow(str, t = Time.now.to_f)
+      str
+        .each_line
+        .map do |line|
+          line
+            .chars
+            .map
+            .with_index do |ch, i|
+              next ch if ch.strip.empty?
+
+              r, g, b =
+                3
+                  .times
+                  .map { _1 / 3.0 * Math::PI }
+                  .map { _1 + i / 10.0 }
+                  .map { Math.sin(_1 - t)**2 }
+                  .map { (_1 * 255).to_i }
+
+              format("\e[38;2;%d;%d;%dm%s", r, g, b, ch)
+            end
+            .join
+        end
+        .join + "\e[0m"
+    end
+  end
+end

data/lib/mayu/commands/base.rb

@@ -0,0 +1,22 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Mayu
+  module Commands
+    class Base
+      extend T::Sig
+
+      sig { returns(Configuration) }
+      attr_reader :configuration
+
+      sig { params(configuration: Configuration).void }
+      def initialize(configuration)
+        @configuration = configuration
+      end
+
+      sig { params(argv: T::Array[String]).void }
+      def call(argv)
+      end
+    end
+  end
+end