@itmetsam/samurai-framework 0.10.0 → 0.12.0

package/dist/recorder/toolbar/source/recorder-side.js

@@ -0,0 +1,54 @@
+/** The recorder's side of the hook: update, reply, rebind, dispose. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const RECORDER_SIDE_JS = String.raw `  // ---- The recorder's side ----
+  const showToast = (text) => {
+    toast.textContent = text;
+    toast.hidden = false;
+    toast.classList.remove("gone");
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => {
+      toast.classList.add("gone");
+      toastTimer = setTimeout(() => { toast.hidden = true; }, 300);
+    }, 2500);
+  };
+  const update = (next) => {
+    state = Object.assign({}, DEFAULTS, next);
+    const dropped = ui.dropped;
+    if (dropped && state.position && Math.round(state.position.x) === dropped.x && Math.round(state.position.y) === dropped.y) ui.dropped = null;
+    if (ui.closeOnUpdate) closePanel();
+    if (!usable()) {
+      stopPicking();
+      closePanel();
+    }
+    if (state.toast && state.toast.id !== ui.toastId) {
+      ui.toastId = state.toast.id;
+      showToast(state.toast.text);
+    }
+    attach();
+    render();
+  };
+  const reply = (id, result) => {
+    if (!ui.pending || id !== ui.pending || !result) return;
+    ui.busy = false;
+    const ok = result.ok === true;
+    if (ui.panel === "assert" && ui.assert && !ui.assert.info) {
+      const a = ui.assert;
+      a.info = result;
+      if (ok) {
+        a.matcher = result.first.matcher;
+        a.attribute = result.attributes[0] ? result.attributes[0].name : null;
+        a.countIndex = 0;
+        a.expected = prefill(a, a.matcher);
+      }
+    } else if (ok) {
+      closePanel();
+    } else if (ui.panel === "assert" && ui.assert) {
+      ui.assert.error = result.error;
+    } else if (ui.panel === "insert") {
+      ui.insert.error = result.error;
+    } else if (ui.panel === "new") {
+      if (result.field === "name") ui.form.nameError = result.error;
+      else ui.form.error = result.error;
+    }
+    render();
+  };
+`;

package/dist/recorder/toolbar/source/setup.d.ts

@@ -0,0 +1,2 @@
+/** Preamble: single-run guard, shared candidate code, styles, defaults and the toolbar state variables. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const SETUP_JS: string;

package/dist/recorder/toolbar/source/setup.js

@@ -0,0 +1,50 @@
+import { CANDIDATES_JS } from "../../candidates.js";
+import { TOOLBAR_KEY } from "../protocol.js";
+import { TOOLBAR_CSS } from "../styles.js";
+/** Preamble: single-run guard, shared candidate code, styles, defaults and the toolbar state variables. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const SETUP_JS = String.raw `  if (window !== window.top) return;
+  const KEY = Symbol.for("${TOOLBAR_KEY}");
+  if (globalThis[KEY]) {
+    globalThis[KEY].rebind(send);
+    return;
+  }
+
+  ${CANDIDATES_JS}
+
+  const CSS = ${JSON.stringify(TOOLBAR_CSS)};
+  const DEFAULTS = {
+    status: "recording", collapsed: false, position: null, steps: 0, environment: "", canAddVariables: false,
+    variables: [], secrets: [], secretsIgnored: true, resumeQuestion: false, nextScreenshot: "screenshot-1",
+    warnings: [],
+  };
+  const MATCHERS = [
+    ["toBeVisible", "Visible"], ["toHaveText", "Has text"], ["toContainText", "Contains text"],
+    ["toHaveValue", "Has value"], ["toHaveAttribute", "Has attribute"], ["toHaveCount", "Count"],
+  ];
+
+  let channel = send;
+  let state = Object.assign({}, DEFAULTS);
+  let nextId = Date.now();
+  let railBox = { x: 0, y: 0, w: 0, h: 0 };
+  let toastTimer = 0;
+  // Local UI state; everything about steps lives in the recorder
+  const ui = {
+    panel: null, picking: false, busy: false, closeOnUpdate: false, pending: 0, focus: null,
+    field: null, assert: null, insert: null, form: null,
+    wait: { kind: "idle", seconds: "2" }, shot: { name: "", fullPage: false },
+    drag: null, dropped: null, toastId: null,
+  };
+
+  const post = (message) => {
+    try { channel(Object.assign({ type: "toolbar" }, message)); } catch (err) { /* the channel is gone */ }
+  };
+  // Listeners on the page's window and document, so dispose() can take them all off again
+  const listening = [];
+  const listen = (target, type, handler, capture) => {
+    target.addEventListener(type, handler, capture === true);
+    listening.push([target, type, handler, capture === true]);
+  };
+  const paused = () => state.status === "paused";
+  // Whole pixels, so a rail at the far edge does not overhang it by a rounding error
+  const clamp = (value, max) => Math.max(0, Math.min(value, Math.floor(max)));
+`;

package/dist/recorder/toolbar/source/views-panels.d.ts

@@ -0,0 +1,2 @@
+/** Views: the Assert, Insert, New, Wait and Screenshot panels. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const VIEWS_PANELS_JS: string;

package/dist/recorder/toolbar/source/views-panels.js

@@ -0,0 +1,150 @@
+/** Views: the Assert, Insert, New, Wait and Screenshot panels. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const VIEWS_PANELS_JS = String.raw `  const unavailable = (info, matcher) =>
+    (matcher === "toHaveValue" && info.value === undefined) ||
+    (matcher === "toHaveAttribute" && info.attributes.length === 0) ||
+    (matcher === "toHaveCount" && info.counts.length === 0);
+  const prefill = (a, matcher) => {
+    const info = a.info;
+    if (matcher === "toHaveAttribute") {
+      const found = info.attributes.find((at) => at.name === a.attribute) || info.attributes[0];
+      return found ? found.value : "";
+    }
+    if (matcher === "toHaveCount") {
+      const found = info.counts[a.countIndex];
+      return found ? String(found.count) : "";
+    }
+    if (matcher === info.first.matcher && info.first.expected !== undefined) return info.first.expected;
+    if (matcher === "toHaveText" || matcher === "toContainText") return info.text;
+    if (matcher === "toHaveValue") return info.value || "";
+    return "";
+  };
+  const assertValue = (a) => {
+    const info = a.info;
+    const expected = (type) => h("input", { type, class: "in", "data-field": "expected", value: a.expected, "data-enter": "assert-add", autocomplete: "off" });
+    if (a.matcher === "toHaveText" || a.matcher === "toContainText" || a.matcher === "toHaveValue") return h("div", { class: "val" }, expected("text"));
+    if (a.matcher === "toHaveAttribute") {
+      return h("div", { class: "val" },
+        h("select", { class: "in", "data-field": "attribute" }, info.attributes.map((at) => {
+          const shown = at.name + '="' + at.value + '"';
+          return h("option", { value: at.name, selected: at.name === a.attribute }, shown.length > 44 ? shown.slice(0, 43) + "…" : shown);
+        })),
+        expected("text"));
+    }
+    if (a.matcher === "toHaveCount") {
+      return h("div", { class: "val" },
+        h("select", { class: "in", "data-field": "countIndex" }, info.counts.map((c, i) =>
+          h("option", { value: String(i), selected: i === a.countIndex }, c.label + " (" + c.count + ")"))),
+        expected("number"));
+    }
+    return null;
+  };
+  const assertPanel = () => {
+    const a = ui.assert;
+    const info = a.info;
+    const head = h("div", { class: "h" }, "Assert", info && info.ok && h("code", { title: info.label }, info.label));
+    if (!info) return [head, h("div", { class: "msg" }, "…")];
+    if (!info.ok) return [head, h("div", { class: "err" }, info.error)];
+    return [
+      head,
+      h("div", { class: "opts" }, MATCHERS.map(([matcher, label]) =>
+        h("button", { class: a.matcher === matcher ? "o sel" : "o", "data-action": "matcher", "data-matcher": matcher, disabled: unavailable(info, matcher) }, label))),
+      assertValue(a),
+      a.error && h("div", { class: "err" }, a.error),
+      h("div", { class: "row" },
+        h("label", { class: "neg" }, h("input", { type: "checkbox", "data-action": "not", checked: a.not }), "Not"),
+        h("button", { class: "add", "data-action": "assert-add", disabled: ui.busy }, "Add")),
+    ];
+  };
+
+  const matches = () => {
+    const filter = ui.insert.filter.trim().toLowerCase();
+    const hit = (item) => !filter || item.name.toLowerCase().indexOf(filter) >= 0;
+    return {
+      filter,
+      variables: state.canAddVariables ? state.variables.filter(hit) : [],
+      secrets: state.secrets.filter(hit),
+    };
+  };
+  const insertPanel = () => {
+    const ins = ui.insert;
+    if (!ins.field) return [h("div", { class: "h" }, "Insert"), h("div", { class: "msg" }, "Click into a field first")];
+    const found = matches();
+    const none = found.filter && found.variables.length === 0 && found.secrets.length === 0;
+    const item = (kind, name, value) =>
+      h("button", { class: "it", "data-action": "insert-item", "data-kind": kind, "data-name": name, disabled: ui.busy }, h("code", null, name), value);
+    return [
+      h("div", { class: "h stack" }, 'Insert into "' + fieldLabel(ins.field) + '"', h("small", null, "Environment: " + state.environment)),
+      h("input", { type: "text", class: "in search", "data-field": "filter", placeholder: "Filter…", value: ins.filter, "data-enter": "insert-first", autocomplete: "off", spellcheck: "false" }),
+      state.canAddVariables && [
+        h("div", { class: "grp" }, "Variables"),
+        found.variables.length
+          ? found.variables.map((v) => item("env", v.name, h("span", { class: "v", title: v.value }, v.value)))
+          : h("div", { class: "empty" }, found.filter ? "No variable matches." : "No variables yet."),
+      ],
+      h("div", { class: "grp" }, "Secrets"),
+      found.secrets.length
+        ? found.secrets.map((s) => item("secret", s.name, s.set ? h("span", { class: "v" }, "••••••") : h("span", { class: "warn" }, "not set")))
+        : h("div", { class: "empty" }, found.filter ? "No secret matches." : "No secrets yet."),
+      ins.error && h("div", { class: "err" }, ins.error),
+      h("button", { class: "act", "data-action": "insert-new", "data-kind": "env" }, "+ Add variable" + (none ? ' "' + variableName(ins.filter) + '"' : "")),
+      h("button", { class: "act", "data-action": "insert-new", "data-kind": "secret" }, "+ Add secret" + (none ? ' "' + snake(ins.filter) + '"' : "")),
+    ];
+  };
+
+  const newHint = (secret, env, name) => {
+    if (!secret) return ["Saved to ", h("code", null, "environments." + env + ".variables"), " in samurai.config.ts. Other environments don't get it — add it there before running against them."];
+    if (!state.secretsIgnored) return h("span", { class: "warn" }, "Add .env." + env + " to .gitignore before committing.");
+    return ["Saved as ", h("code", null, "SAMURAI_SECRET_" + (name.trim() || "<NAME>")), " in ", h("code", null, ".env." + env), " (git-ignored)."];
+  };
+  const newPanel = () => {
+    const f = ui.form;
+    const secret = f.kind === "secret";
+    const blocked = !secret && !state.canAddVariables;
+    const env = state.environment;
+    return [
+      h("div", { class: "h stack" }, f.setValue ? "Set value" : secret ? "New secret" : "New variable", h("small", null, 'For "' + fieldLabel(ui.insert.field) + '"')),
+      h("div", { class: "seg" },
+        h("button", { class: secret ? "" : "sel", "data-action": "new-kind", "data-kind": "env" }, "Variable"),
+        h("button", { class: secret ? "sel" : "", "data-action": "new-kind", "data-kind": "secret" }, "Secret")),
+      blocked
+        ? h("div", { class: "msg" }, "This recording has no environment")
+        : [
+            h("div", { class: "lbl" }, "Name"),
+            h("div", { class: "f" }, h("input", { type: "text", class: "in code", "data-field": "name", value: f.name, "data-enter": "new-save", autocomplete: "off", spellcheck: "false" })),
+            f.nameError && h("div", { class: "field-error" }, f.nameError),
+            h("div", { class: "lbl" }, "Value in " + env),
+            h("div", { class: "f" }, h("input", { type: secret ? "password" : "text", class: "in", "data-field": "value", value: f.value, "data-enter": "new-save", autocomplete: secret ? "new-password" : "off" })),
+            h("div", { class: "hint" }, newHint(secret, env, f.name)),
+            f.error && h("div", { class: "err" }, f.error),
+          ],
+      h("div", { class: "foot plain" },
+        h("button", { class: "cancel", "data-action": "new-cancel" }, "Cancel"),
+        !blocked && h("button", { class: "add", "data-action": "new-save", disabled: ui.busy || !f.name.trim() }, "Save and insert")),
+    ];
+  };
+
+  const secondsValid = () => {
+    const seconds = Number(ui.wait.seconds);
+    return ui.wait.seconds.trim() !== "" && isFinite(seconds) && seconds >= 0.1 && seconds <= 60;
+  };
+  const radio = (field, value, checked, ...label) =>
+    h("label", { class: "radio" }, h("input", { type: "radio", name: field, "data-field": field, value, checked }), label);
+  const waitPanel = () => [
+    h("div", { class: "h" }, "Wait"),
+    radio("waitKind", "idle", ui.wait.kind === "idle", "Until the page settles"),
+    h("div", { class: "sub" }, "No requests for 500 ms"),
+    radio("waitKind", "time", ui.wait.kind === "time", "For ",
+      h("input", { type: "number", class: "num", "data-field": "seconds", min: "0.1", max: "60", step: "0.1", value: ui.wait.seconds, "data-enter": "wait-add" }),
+      " seconds"),
+    h("div", { class: "foot" }, h("button", { class: "add", "data-action": "wait-add", disabled: ui.busy || (ui.wait.kind === "time" && !secondsValid()) }, "Add")),
+  ];
+  const screenshotPanel = () => [
+    h("div", { class: "h" }, "Screenshot"),
+    h("div", { class: "grp" }, "Name"),
+    h("div", { class: "f" }, h("input", { type: "text", class: "in", "data-field": "shotName", value: ui.shot.name, "data-enter": "screenshot-add", autocomplete: "off", spellcheck: "false" })),
+    radio("fullPage", "false", !ui.shot.fullPage, "Visible part"),
+    radio("fullPage", "true", ui.shot.fullPage, "Whole page"),
+    h("div", { class: "foot" }, h("button", { class: "add", "data-action": "screenshot-add", disabled: ui.busy }, "Add")),
+  ];
+  const PANELS = { assert: assertPanel, insert: insertPanel, new: newPanel, wait: waitPanel, screenshot: screenshotPanel };
+`;

package/dist/recorder/toolbar/source/views-rail.d.ts

@@ -0,0 +1,2 @@
+/** Views: the chip and the rail. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const VIEWS_RAIL_JS: string;

package/dist/recorder/toolbar/source/views-rail.js

@@ -0,0 +1,40 @@
+/** Views: the chip and the rail. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const VIEWS_RAIL_JS = String.raw `  // ---- Views ----
+  const toolOn = (tool) =>
+    tool === "assert" ? ui.picking || ui.panel === "assert" : tool === "insert" ? ui.panel === "insert" || ui.panel === "new" : ui.panel === tool;
+
+  const chipView = () =>
+    h("div", { class: "chip" },
+      h("span", { "data-grip": true, title: "Drag to move" }, "⋮⋮"),
+      h("span", { class: paused() ? "dot pause" : "dot" }),
+      (paused() ? "Paused" : "Rec") + " · " + state.steps + (state.steps === 1 ? " step" : " steps"),
+      h("button", { class: "chev", "data-action": "expand", title: "Expand" }, "⌄"));
+
+  const railView = () => {
+    const tool = (action, icon, label) =>
+      h("button", { class: toolOn(action) ? "b on" : "b", "data-action": action, disabled: paused() }, ico(icon), label);
+    return h("div", { class: paused() || state.resumeQuestion ? "rail wide" : "rail" },
+      h("div", { class: "top" },
+        h("span", { "data-grip": true, title: "Drag to move" }, "⋮⋮⋮"),
+        h("button", { class: "chev", "data-action": "collapse", title: "Collapse" }, "⌃")),
+      h("div", { class: "st" }, h("span", { class: paused() ? "dot pause" : "dot" }), paused() ? "Paused" : "Recording"),
+      paused() && h("div", { class: "note" }, "Nothing you do now is recorded."),
+      state.resumeQuestion && [
+        h("div", { class: "note" }, "Add a step that opens this page?"),
+        h("div", { class: "ask" },
+          h("button", { class: "yes", "data-action": "resume-yes" }, "Yes"),
+          h("button", { "data-action": "resume-no" }, "No")),
+      ],
+      h("div", { class: "sep" }),
+      paused()
+        ? h("button", { class: "b on", "data-action": "resume" }, ico("▶"), "Resume")
+        : h("button", { class: "b", "data-action": "pause" }, ico("❚❚"), "Pause"),
+      tool("assert", "✓", "Assert"),
+      ui.picking && h("div", { class: "note" }, "Click an element · Esc cancels"),
+      tool("insert", "{x}", "Insert"),
+      tool("wait", "⏱", "Wait"),
+      tool("screenshot", "◉", "Screenshot"),
+      h("div", { class: "sep" }),
+      h("button", { class: "b stop", "data-action": "stop" }, ico("■"), "Stop"));
+  };
+`;

package/dist/recorder/toolbar/source/views-render.d.ts

@@ -0,0 +1,2 @@
+/** Views: warnings, notices and the render pass. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export declare const VIEWS_RENDER_JS: string;

package/dist/recorder/toolbar/source/views-render.js

@@ -0,0 +1,48 @@
+/** Views: warnings, notices and the render pass. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+export const VIEWS_RENDER_JS = String.raw `  // Notice nodes live as long as their warning: rebuilding them would make screen readers announce each alert again
+  const noticeNodes = new Map();
+  let savingNode = null;
+  let savingText = null;
+  const renderNotices = () => {
+    const ids = new Set(state.warnings.map((w) => w.id));
+    for (const [id, node] of noticeNodes) {
+      if (ids.has(id)) continue;
+      node.remove();
+      noticeNodes.delete(id);
+    }
+    for (const w of state.warnings) {
+      if (noticeNodes.has(w.id)) continue;
+      const node = h("div", { class: "notice warning", "data-warning": String(w.id), role: "alert" },
+        h("span", null, w.text),
+        h("button", { class: "dismiss", "data-action": "dismiss", "data-id": String(w.id) }, "Dismiss"));
+      noticeNodes.set(w.id, node);
+      // Before the saving line, which stays last
+      notices.insertBefore(node, savingNode);
+    }
+    const saving = state.saving || null;
+    if (saving !== savingText) {
+      savingText = saving;
+      if (savingNode) savingNode.remove();
+      savingNode = saving ? h("div", { class: "notice saving" }, "Saving " + saving + "…") : null;
+      if (savingNode) notices.append(savingNode);
+    }
+  };
+  const render = () => {
+    const active = root.activeElement;
+    const kept = active && active.type !== "radio" ? active.getAttribute("data-field") : null;
+    let selection = null;
+    try { selection = kept ? [active.selectionStart, active.selectionEnd] : null; } catch (err) { selection = null; }
+    const panel = ui.panel && !state.collapsed ? h("div", { class: ui.panel === "new" || ui.panel === "insert" ? "panel wide" : "panel" }, PANELS[ui.panel]()) : null;
+    container.replaceChildren(state.collapsed ? chipView() : railView(), ...(panel ? [panel] : []));
+    renderNotices();
+    placeAll();
+    const focus = ui.focus || kept;
+    ui.focus = null;
+    const target = focus && root.querySelector('[data-field="' + focus + '"]');
+    if (!target) return;
+    target.focus({ preventScroll: true });
+    if (focus === kept && selection && selection[0] !== null) {
+      try { target.setSelectionRange(selection[0], selection[1]); } catch (err) { /* not a text input */ }
+    }
+  };
+`;