waygraph 0.15.50 → 0.15.52

package/examples/routed-demo/playwright.config.ts

@@ -1,7 +1,5 @@
 import { defineConfig } from "@playwright/test";
-
-const PORT = process.env.WAYGRAPH_FIXTURE_PORT || "4277";
-const HOST = process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1";
+import { chromiumExecutablePath } from "waygraph";
 
 export default defineConfig({
   testDir: "./tests",
@@ -9,13 +7,15 @@ export default defineConfig({
   workers: 1,
   timeout: 30_000,
   reporter: [["list"], ["html", { open: "never" }]],
+  webServer: {
+    command: "node scripts/fixture-server.mjs",
+    url: "http://127.0.0.1:4277/dashboard",
+    reuseExistingServer: !process.env.CI,
+  },
   use: {
     headless: true,
-    baseURL: process.env.WAYGRAPH_BASE_URL || `http://${HOST}:${PORT}`,
+    baseURL: "http://127.0.0.1:4277",
     trace: "retain-on-failure",
-    launchOptions: {
-      executablePath: process.env.CHROME_PATH || process.env.CHROMIUM_PATH,
-      args: ["--no-sandbox", "--disable-dev-shm-usage"],
-    },
+    launchOptions: { executablePath: chromiumExecutablePath() },
   },
 });

package/examples/routed-demo/scripts/fixture-server.mjs

@@ -1,37 +1,18 @@
-#!/usr/bin/env node
-/**
- * Tiny static server for this example's offline fixture pages.
- * Mirrors templates/scaffold's own scripts/fixture-server.mjs exactly.
- */
+// Stands in for this example's real app: serves src/pages/<name>.html at clean URLs (/dashboard, /docs).
+// Started and stopped by playwright.config.ts's webServer - waygraph run/demo/auto/test all honor it.
 import { createServer } from "node:http";
 import { readFileSync, existsSync } from "node:fs";
-import { join, dirname, extname, normalize } from "node:path";
-import { fileURLToPath } from "node:url";
+import { join } from "node:path";
 
-const ROOT = join(dirname(fileURLToPath(import.meta.url)), "../src/pages");
-const PORT = Number(process.env.WAYGRAPH_FIXTURE_PORT || 4277);
-const HOST = process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1";
+const PAGES = join(import.meta.dirname, "../src/pages");
 
-const TYPES = {
-  ".html": "text/html; charset=utf-8",
-};
-
-const server = createServer((req, res) => {
-  const raw = (req.url || "/").split("?")[0] || "/";
-  const rel = raw === "/" ? "dashboard.html" : raw.replace(/^\//, "");
-  const full = normalize(join(ROOT, rel));
-  if (!full.startsWith(ROOT) || !existsSync(full)) {
-    res.writeHead(404, { "content-type": "text/plain" });
-    res.end("not found");
+createServer((req, res) => {
+  const path = (req.url || "/").split("?")[0];
+  const name = path === "/" ? "dashboard" : path.slice(1);
+  const file = join(PAGES, `${name}.html`);
+  if (!/^[a-z-]+$/.test(name) || !existsSync(file)) {
+    res.writeHead(404).end("not found");
     return;
   }
-  const type = TYPES[extname(full)] || "application/octet-stream";
-  res.writeHead(200, { "content-type": type });
-  res.end(readFileSync(full));
-});
-
-server.listen(PORT, HOST, () => {
-  if (process.env.WAYGRAPH_FIXTURE_QUIET !== "1") {
-    console.error(`waygraph fixture: http://${HOST}:${PORT}/dashboard.html`);
-  }
-});
+  res.writeHead(200, { "content-type": "text/html; charset=utf-8" }).end(readFileSync(file));
+}).listen(4277, "127.0.0.1");

package/examples/routed-demo/src/map/(app_base)/dashboard/_sel.ts

@@ -1,6 +1,4 @@
-export const DASHBOARD_URL =
-  process.env.WAYGRAPH_DASHBOARD_URL ??
-  `http://${process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1"}:${process.env.WAYGRAPH_FIXTURE_PORT || "4277"}/dashboard.html`;
+export const DASHBOARD_URL = "/dashboard";
 
 export const DashboardSel = {
   heading: "#dashboard-heading",

package/examples/routed-demo/src/map/(external)/docs/_sel.ts

@@ -1,6 +1,4 @@
-export const DOCS_URL =
-  process.env.WAYGRAPH_DOCS_URL ??
-  `http://${process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1"}:${process.env.WAYGRAPH_FIXTURE_PORT || "4277"}/docs.html`;
+export const DOCS_URL = "/docs";
 
 export const DocsSel = {
   heading: "#docs-heading",

package/examples/routed-demo/src/pages/dashboard.html

@@ -5,6 +5,6 @@
   <h1 id="dashboard-heading">Dashboard</h1>
   <button id="widget-btn" onclick="document.getElementById('widget-out').textContent = 'clicked'">Click widget</button>
   <div id="widget-out"></div>
-  <a id="go-docs" href="/docs.html">Docs</a>
+  <a id="go-docs" href="/docs">Docs</a>
 </body>
 </html>

package/examples/routed-demo/src/pages/docs.html

@@ -3,6 +3,6 @@
 <head><title>Routed demo - docs</title></head>
 <body>
   <h1 id="docs-heading">Docs</h1>
-  <a id="go-dashboard" href="/dashboard.html">Back to dashboard</a>
+  <a id="go-dashboard" href="/dashboard">Back to dashboard</a>
 </body>
 </html>

package/examples/saucedemo/playwright.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "@playwright/test";
+import { chromiumExecutablePath } from "waygraph";
 
 export default defineConfig({
   testDir: "./tests",
@@ -11,9 +12,7 @@ export default defineConfig({
     baseURL: "https://www.saucedemo.com",
     trace: "retain-on-failure",
     launchOptions: {
-      // Canonical Chromium on this machine is the Flatpak install - never let
-      // Playwright download its own bundled binary. See .agent/manager-agent.md.
-      executablePath: process.env.CHROME_PATH || process.env.CHROMIUM_PATH,
+      executablePath: chromiumExecutablePath(),
       args: ["--no-sandbox", "--disable-dev-shm-usage"],
     },
   },

package/examples/saucedemo/scripts/prove-add-to-cart-menu.mjs

@@ -6,6 +6,7 @@ import { chromium } from "@playwright/test";
 import { join, dirname } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { createRequire } from "node:module";
+import { chromiumExecutablePath } from "waygraph";
 
 const require = createRequire(import.meta.url);
 await import(require.resolve("tsx/esm"));
@@ -18,7 +19,7 @@ const { buildExploreContext, buildExploreMenu } = await import(
 );
 const { MemPage, Engine, start, end } = await import(pathToFileURL(join(waygraphDist, "index.js")).href);
 
-const exe = process.env.CHROME_PATH || process.env.CHROMIUM_PATH;
+const exe = chromiumExecutablePath();
 
 async function runBlock(engine, entry, context, page, mem) {
   const flow = engine.defineFlow([start, entry.block, end]);

package/examples/saucedemo/scripts/prove-auto-graph.mjs

@@ -2,6 +2,7 @@ import { chromium } from "@playwright/test";
 import { join, dirname } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { createRequire } from "node:module";
+import { chromiumExecutablePath } from "waygraph";
 
 const require = createRequire(import.meta.url);
 await import(require.resolve("tsx/esm"));
@@ -15,7 +16,7 @@ const { buildExploreContext, buildExploreMenu } = await import(
 );
 const { locate, MemPage, Engine, start, end } = await import(pathToFileURL(join(waygraphDist, "index.js")).href);
 
-const exe = process.env.CHROME_PATH || process.env.CHROMIUM_PATH;
+const exe = chromiumExecutablePath();
 
 async function snap(page, name) {
   const path = join(outDir, `graph-proof-${name}.png`);

package/examples/saucedemo/scripts/prove-wrong-login-runtime.mjs

@@ -6,6 +6,7 @@ import { chromium } from "@playwright/test";
 import { join, dirname } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { createRequire } from "node:module";
+import { chromiumExecutablePath } from "waygraph";
 
 const require = createRequire(import.meta.url);
 await import(require.resolve("tsx/esm"));
@@ -25,7 +26,7 @@ const { SubmitLoginBlock } = await import(
 );
 const { LoginCreds } = await import(pathToFileURL(join(root, "src/states/checkout.mem-keys.js")).href);
 
-const exe = process.env.CHROME_PATH || process.env.CHROMIUM_PATH;
+const exe = chromiumExecutablePath();
 const baseURL = "https://www.saucedemo.com";
 
 console.log("RUNTIME: headless browser (wrong password test)...");

package/examples/saucedemo/tests/flow-block-verify.spec.ts

@@ -1,7 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { MemPage, checkpoint, Trait } from "waygraph";
 import { checkoutFlow } from "../src/flows/checkout.flow.js";
-import { FfOwnerAuthBlock } from "../src/blocks/saucedemo-web/ff-owner-auth.block.js";
 import { LoginCreds, SelectedItem } from "../src/states/checkout.mem-keys.js";
 
 // checkoutFlow.withBlockVerify/modBlockVerify - a spec that only imports the
@@ -31,12 +30,8 @@ test("withBlockVerify: replacing login's verify with an extra real check still p
   mem.set(LoginCreds({ username: "standard_user", password: "secret_sauce" }));
   mem.set(SelectedItem({ id: "sauce-labs-backpack", name: "Sauce Labs Backpack" }));
 
-  // Addressed by the actual FfOwnerAuthBlock reference - the preferred
-  // form: no typo risk, refactor-safe, jump-to-definition works. checkoutFlow
-  // drives login through the ff-owner-auth FFCompose step (collapsed
-  // nav-login + fill-username + fill-password + submit-login), not a bare
-  // SubmitLoginBlock reference, so that's the Block whose verify this patches.
-  const patched = checkoutFlow.withBlockVerify(FfOwnerAuthBlock, [
+  // checkoutFlow's login steps are one inline `{ ff: true }` group, auto-named "ff-1".
+  const patched = checkoutFlow.withBlockVerify("ff-1", [
     Trait.url({ pathname: "/inventory.html" }),
     Trait.visible(".inventory_list"),
   ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.15.50",
+  "version": "0.15.52",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",
@@ -30,7 +30,15 @@
     "!examples/**/.waygraph-traverse/**",
     "!examples/**/.waygraph-videos",
     "!examples/**/.waygraph-videos/**",
-    "!**/*.webm"
+    "!**/*.webm",
+    "!**/.waygraph-auto",
+    "!**/.waygraph-auto/**",
+    "!**/test-results",
+    "!**/test-results/**",
+    "!**/playwright-report",
+    "!**/playwright-report/**",
+    "!**/.waygraph-chain-*.mjs",
+    "!**/*.log"
   ],
   "repository": {
     "type": "git",

package/templates/quickstart/playwright.config.ts

@@ -10,11 +10,5 @@ export default defineConfig({
     headless: true,
     baseURL: "https://www.saucedemo.com",
     trace: "retain-on-failure",
-    launchOptions: {
-      // Canonical Chromium on this machine is the Flatpak install - never let
-      // Playwright download its own bundled binary. See .agent/manager-agent.md.
-      executablePath: process.env.CHROME_PATH || process.env.CHROMIUM_PATH,
-      args: ["--no-sandbox", "--disable-dev-shm-usage"],
-    },
   },
 });

package/templates/scaffold/README.md

@@ -1,7 +1,7 @@
 # __PROJECT_NAME__
 
 A waygraph project on the **Waygraph Map** layout: `src/map/` folders mirror your app's URLs.
-Runs fully offline - `npm test` is green on a local fixture page.
+Runs fully offline - the demo pages open directly via `file://`, no server or network needed.
 
 ## Run it
 
@@ -24,7 +24,11 @@ one Block per action, flows in `src/flows/`.
 
 ## Point it at your real app
 
-Set `waygraph.baseUrl` in `package.json`, drop the `scripts/with-fixture.mjs` wrappers, and
-keep each `src/map/` folder matching the URL it represents (`waygraph map` enforces this).
+Change each `_nav.block.ts`'s `url` from the local `file://` path to a real one, and set a real
+`baseUrl` if your Nav Blocks use relative paths (`config/waygraph.config.ts`, a `.env`, or
+`package.json`'s `"waygraph"` field - see the main docs' "Project config" section). That file also
+holds the test settings (`testDir`, `webServer`, `playwright: { workers, timeout, ... }`), so the
+project needs no `playwright.config.ts`. Keep each
+`src/map/` folder matching the URL it represents (`waygraph map` enforces this).
 
 Docs: https://deviate-dv8.github.io/waygraph/

package/templates/scaffold/STRUCTURE.md

@@ -7,14 +7,16 @@ Next.js route groups) and never appear in a URL or Checkpoint name.
 ```text
 .
 ├── package.json
+├── .agents/skills/                    # waygraph skills for coding agents
+├── config/waygraph.config.ts          # baseUrl, tests, extensions, webServer - no playwright.config
 ├── src/
 │   ├── map/
-│   │   ├── (app_base)/                # your app (served on :4177 here)
-│   │   │   ├── home/                  # URL /home.html
+│   │   ├── (app_base)/                # your app (opened via file:// here)
+│   │   │   ├── home/                  # URL /home
 │   │   │   │   ├── _nav.block.ts      # how to get here
 │   │   │   │   ├── _page.block.ts     # "you have arrived" hub
 │   │   │   │   ├── _sel.ts            # every selector for this page
-│   │   │   │   ├── home.html          # offline fixture page
+│   │   │   │   ├── index.html         # offline fixture page
 │   │   │   │   └── _methods/          # one action per Block
 │   │   │   │       ├── add-item.effect.block.ts       # + instanceOptions (auto menu)
 │   │   │   │       ├── remove-item.effect.block.ts
@@ -22,10 +24,10 @@ Next.js route groups) and never appear in a URL or Checkpoint name.
 │   │   │   │       ├── assert-hello.method.block.ts   # + stubs + YAP slide
 │   │   │   │       └── assert-item-added.method.block.ts
 │   │   │   └── docs/                  # a second page, same shape
-│   │   └── (external)/mailpit/        # a different origin (mail catcher)
+│   │   ├── (external)/mailpit/        # a different origin (mail catcher)
+│   │   └── (external)/hoppscotch/     # API client, REST client, needs the hoppscotch extension
 │   ├── states/                        # Checkpoint types + mem keys
 │   └── flows/                         # example / shop / mail-verify
-├── scripts/                           # local fixture server
 └── tests/example.spec.ts
 ```
 
@@ -40,7 +42,7 @@ page folder uses, so any agent or teammate knows where to look without asking.
 | Add an action on a page | one file in that page's `_methods/` |
 | Verify a state (button disabled, error shown) | `defineAssertBlock` + `Trait.disabled` / `Trait.enabled` |
 | Wire steps together | `src/flows/*.flow.ts` |
-| Give a flow fake data | `registerMemStub(key, fake)` + `withMemStub(flow)` (docs: docs/REFERENCE.md, "memStub") |
+| Give a flow fake data | `registerMemStub(key, fake)` + `memStub: true` in the flow's options (docs: docs/REFERENCE.md, "memStub") |
 | Explore by hand | `npm run auto` (headed) or `npm run auto:cli` |
 | Check your work | `npm run check`, `npm run graph`, `waygraph map` |
 

package/templates/scaffold/config/waygraph.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from "waygraph";
+
+export default defineConfig(({ env }) => ({
+  // Where the app under test lives. BASE_URL comes from .env / .env.<mode>:  waygraph test --env staging
+  baseUrl: env.BASE_URL ?? "__APP_BASE_URL__",
+
+  // ── waygraph: uncomment what you need ─────────────────────────────────────────────────────────
+  // extensions: ["hoppscotch"],             // browser extensions to load (a waygraph feature, not Playwright's)
+  // video: {                                // recordings made with `waygraph run|demo --video`
+  //   dir: "~/Downloads/waygraph-videos",   //   where they are saved (default: Downloads/waygraph-videos/<project>)
+  //   viewport: "1920x1080",                //   recording size: demo defaults to 1920x1080, run to 1280x720
+  // },
+  // slowMo: 250,                            // ms to pause before each browser action, so a run is watchable
+  // headed: true,                           // show the browser window (demo and auto already do)
+  // demo: { autoNext: true, fast: false },  // advance demo steps without clicking Next; blitz fast-forward steps
+  // webServer: { command: "npm start", port: 3000 },   // started around test / run / demo / auto
+
+  // ── test runner (Playwright) ──────────────────────────────────────────────────────────────────
+  // testDir: "tests",
+  // playwright: {                           // any Playwright test option, merged over waygraph's defaults
+  //   workers: 1,
+  //   retries: 1,
+  //   timeout: 60_000,
+  //   use: { video: "on", trace: "on", screenshot: "only-on-failure", viewport: { width: 1280, height: 720 } },
+  // },
+}));

package/templates/scaffold/package.json

@@ -7,25 +7,21 @@
     "typecheck": "waygraph typecheck .",
     "test": "waygraph test",
     "test:ui": "waygraph test ui",
-    "fixture": "node scripts/fixture-server.mjs",
     "list": "waygraph list",
     "check": "waygraph check",
     "graph": "waygraph graph",
     "graph:mermaid": "waygraph graph --mermaid",
-    "auto": "node scripts/with-fixture.mjs waygraph auto",
-    "auto:cli": "node scripts/with-fixture.mjs waygraph auto --cli",
-    "demo": "node scripts/with-fixture.mjs waygraph demo --blocks exampleFlow",
-    "demo:auto-next": "node scripts/with-fixture.mjs waygraph demo --blocks exampleFlow --auto-next --title \"Scaffold hello\"",
-    "demo:shop": "node scripts/with-fixture.mjs waygraph demo --blocks shopFlow --data \"{\\\"demo.selectedItem\\\":{\\\"id\\\":\\\"alpha\\\",\\\"name\\\":\\\"Alpha\\\"}}\" --title \"Scaffold shop\"",
-    "demo:shop:auto-next": "node scripts/with-fixture.mjs waygraph demo --blocks shopFlow --auto-next --data \"{\\\"demo.selectedItem\\\":{\\\"id\\\":\\\"alpha\\\",\\\"name\\\":\\\"Alpha\\\"}}\"",
-    "run": "node scripts/with-fixture.mjs waygraph run --blocks exampleFlow",
-    "run:shop": "node scripts/with-fixture.mjs waygraph run --blocks shopFlow --data \"{\\\"demo.selectedItem\\\":{\\\"id\\\":\\\"alpha\\\",\\\"name\\\":\\\"Alpha\\\"}}\""
-  },
-  "waygraph": {
-    "baseUrl": "http://127.0.0.1:4177"
+    "auto": "waygraph auto",
+    "auto:cli": "waygraph auto --cli",
+    "demo": "waygraph demo --blocks exampleFlow",
+    "demo:auto-next": "waygraph demo --blocks exampleFlow --auto-next",
+    "demo:shop": "waygraph demo --blocks shopFlow",
+    "demo:shop:auto-next": "waygraph demo --blocks shopFlow --auto-next",
+    "run": "waygraph run --blocks exampleFlow",
+    "run:shop": "waygraph run --blocks shopFlow"
   },
   "dependencies": {
-    "waygraph": "^0.12.20"
+    "waygraph": "latest"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",

package/templates/scaffold/src/flows/README.md

@@ -7,12 +7,12 @@ all point at an export here by name (`waygraph run --blocks shopFlow`).
   `.branch()`) over hand-composing raw Blocks - it checks each step's Block kind at runtime and
   the Checkpoint chain at compile time, so a wrong step is a build/test failure, not a
   mid-run surprise.
-- `withTitle`/`withHighlightFixtures`/`withSessionReset`/etc. are non-destructive wrappers -
-  `someFlow.withTitle("...")` doesn't mutate `someFlow`, it returns a new one. Compose them
-  around the finished `.end()` result, not inside the Map chain itself.
+- Flow settings go in `.end({ title, memStub, sessionReset })`. No nested `withTitle(withMemStub(...))`.
+- Demo highlights are ctx stubs chained on the Block where the flow uses it:
+  `AddItemBlock.stubAfter((ctx) => { ctx.ring("cart", { selector, label }); })`.
 - One flow, one scenario. A flow that needs a genuinely different starting session
-  (re-entering the login page mid-chain) wraps that segment in `withSessionReset`, rather than
-  hand-clearing cookies inside a Block.
+  (re-entering the login page mid-chain) sets `sessionReset: true`, rather than hand-clearing
+  cookies inside a Block.
 
 New flow → new file here, named for the scenario (`checkout.flow.ts`), not for the Blocks it
 happens to use.

package/templates/scaffold/src/flows/example.flow.ts

@@ -1,4 +1,6 @@
-import { Engine, start, end, withTitle, withHighlightFixtures } from "waygraph";
+import { Engine } from "waygraph";
+import config from "../../config/waygraph.config.js";
+import { DemoSel } from "../map/(app_base)/home/_sel.js";
 import { NavHomeBlock } from "../map/(app_base)/home/_nav.block.js";
 import { AssertHelloBlock } from "../map/(app_base)/home/_methods/assert-hello.method.block.js";
 import { NavDocsBlock } from "../map/(app_base)/docs/_nav.block.js";
@@ -6,24 +8,36 @@ import { NavDocsBlock } from "../map/(app_base)/docs/_nav.block.js";
 import "../map/(app_base)/home/_page.block.js";
 import "../map/(app_base)/docs/_page.block.js";
 
-const engine = new Engine();
+const engine = new Engine(config);
 
 /** Smoke: nav + assert (no mem), then nav to the sibling docs/ page. Green offline. */
-export const exampleFlow = withHighlightFixtures(
-  withTitle(
-    engine.defineFlow([start, NavHomeBlock, AssertHelloBlock, NavDocsBlock, end]),
-    "Scaffold: Hello Waygraph",
-  ),
-  {
-    "assert-hello": {
-      stubAfter: {
-        title: {
+export const exampleFlow = engine
+  .map()
+  .start()
+  .gotoPage(
+    NavHomeBlock.stubAfter((ctx) => {
+      ctx.ring("title", { selector: DemoSel.title, label: "Home heading", duration: true });
+    }).stubOnError((ctx) => {
+      ctx.ring("title", { selector: DemoSel.title, label: "Home heading at failure" });
+    }),
+  )
+  .assert(
+    AssertHelloBlock.stubBefore((ctx) => {
+      ctx.ring("title", { selector: DemoSel.title, label: "Heading about to check" });
+    })
+      .stubAfter((ctx) => {
+        ctx.ring("title", {
+          selector: DemoSel.title,
           label: "AC · Hello visible",
-          detail: "Replace this fixture copy with your ticket lines.",
+          detail: "Replace this copy with your ticket lines.",
           tag: "AC",
           duration: true,
-        },
-      },
-    },
-  },
-);
+        });
+        ctx.ring("sub", { selector: DemoSel.sub, label: "Subcopy", duration: 1500 });
+      })
+      .stubOnError((ctx) => {
+        ctx.ring("title", { selector: DemoSel.title, label: "Heading at failure", tag: "FAIL" });
+      }),
+  )
+  .gotoPage(NavDocsBlock)
+  .end({ title: "Scaffold: Hello Waygraph" });

package/templates/scaffold/src/flows/hoppscotch-auth.flow.ts

@@ -0,0 +1,35 @@
+import { Engine } from "waygraph";
+import config from "../../config/waygraph.config.js";
+import { NavHoppscotchSettingsBlock } from "../map/(external)/hoppscotch/settings/_nav.block.js";
+import { PickExtensionInterceptorBlock } from "../map/(external)/hoppscotch/_methods/pick-extension-interceptor.method.block.js";
+import { NavHoppscotchRestBlock } from "../map/(external)/hoppscotch/_nav.block.js";
+import { SetQueryParamsBlock } from "../map/(external)/hoppscotch/_methods/set-query-params.method.block.js";
+import { SetUrlBlock } from "../map/(external)/hoppscotch/_methods/set-url.method.block.js";
+import { SetBearerTokenBlock } from "../map/(external)/hoppscotch/_methods/set-bearer-token.method.block.js";
+import { SendRequestBlock } from "../map/(external)/hoppscotch/_methods/send-request.method.block.js";
+import { AssertStatusBlock } from "../map/(external)/hoppscotch/_methods/assert-status.method.block.js";
+import { ReadResponseHeadersBlock } from "../map/(external)/hoppscotch/_methods/read-response-headers.method.block.js";
+import { AssertResponseHeaderBlock } from "../map/(external)/hoppscotch/_methods/assert-response-header.method.block.js";
+import { ReadResponseBodyBlock } from "../map/(external)/hoppscotch/_methods/read-response-body.method.block.js";
+import { AssertResponseBodyBlock } from "../map/(external)/hoppscotch/_methods/assert-response-body.method.block.js";
+import "../map/(external)/hoppscotch/_page.block.js";
+
+const engine = new Engine(config);
+
+/** GET with query params and a bearer token, check the status, that the API received them, and a response header. Needs `extensions: ["hoppscotch"]`. */
+export const hoppscotchAuthFlow = engine
+  .map()
+  .start()
+  .gotoExternal(NavHoppscotchSettingsBlock)
+  .method(PickExtensionInterceptorBlock)
+  .gotoExternal(NavHoppscotchRestBlock)
+  .method(SetUrlBlock)
+  .method(SetQueryParamsBlock)
+  .method(SetBearerTokenBlock)
+  .method(SendRequestBlock)
+  .assert(AssertStatusBlock)
+  .method(ReadResponseBodyBlock)
+  .assert(AssertResponseBodyBlock)
+  .method(ReadResponseHeadersBlock)
+  .assert(AssertResponseHeaderBlock)
+  .end({ title: "Scaffold: Hoppscotch GET with query params and bearer token" });

package/templates/scaffold/src/flows/hoppscotch-get.flow.ts

@@ -0,0 +1,23 @@
+import { Engine } from "waygraph";
+import config from "../../config/waygraph.config.js";
+import { NavHoppscotchSettingsBlock } from "../map/(external)/hoppscotch/settings/_nav.block.js";
+import { PickExtensionInterceptorBlock } from "../map/(external)/hoppscotch/_methods/pick-extension-interceptor.method.block.js";
+import { NavHoppscotchRestBlock } from "../map/(external)/hoppscotch/_nav.block.js";
+import { SetUrlBlock } from "../map/(external)/hoppscotch/_methods/set-url.method.block.js";
+import { SendRequestBlock } from "../map/(external)/hoppscotch/_methods/send-request.method.block.js";
+import { AssertStatusBlock } from "../map/(external)/hoppscotch/_methods/assert-status.method.block.js";
+import "../map/(external)/hoppscotch/_page.block.js";
+
+const engine = new Engine(config);
+
+/** GET a URL and check the status. Needs `extensions: ["hoppscotch"]` in waygraph.config.ts. */
+export const hoppscotchGetFlow = engine
+  .map()
+  .start()
+  .gotoExternal(NavHoppscotchSettingsBlock)
+  .method(PickExtensionInterceptorBlock)
+  .gotoExternal(NavHoppscotchRestBlock)
+  .method(SetUrlBlock)
+  .method(SendRequestBlock)
+  .assert(AssertStatusBlock)
+  .end({ title: "Scaffold: Hoppscotch GET" });

package/templates/scaffold/src/flows/hoppscotch-post.flow.ts

@@ -0,0 +1,33 @@
+import { Engine } from "waygraph";
+import config from "../../config/waygraph.config.js";
+import { NavHoppscotchSettingsBlock } from "../map/(external)/hoppscotch/settings/_nav.block.js";
+import { PickExtensionInterceptorBlock } from "../map/(external)/hoppscotch/_methods/pick-extension-interceptor.method.block.js";
+import { NavHoppscotchRestBlock } from "../map/(external)/hoppscotch/_nav.block.js";
+import { SetMethodBlock } from "../map/(external)/hoppscotch/_methods/set-method.method.block.js";
+import { SetUrlBlock } from "../map/(external)/hoppscotch/_methods/set-url.method.block.js";
+import { SetHeadersBlock } from "../map/(external)/hoppscotch/_methods/set-headers.method.block.js";
+import { SetJsonBodyBlock } from "../map/(external)/hoppscotch/_methods/set-json-body.method.block.js";
+import { SendRequestBlock } from "../map/(external)/hoppscotch/_methods/send-request.method.block.js";
+import { AssertStatusBlock } from "../map/(external)/hoppscotch/_methods/assert-status.method.block.js";
+import { ReadResponseBodyBlock } from "../map/(external)/hoppscotch/_methods/read-response-body.method.block.js";
+import { AssertResponseBodyBlock } from "../map/(external)/hoppscotch/_methods/assert-response-body.method.block.js";
+import "../map/(external)/hoppscotch/_page.block.js";
+
+const engine = new Engine(config);
+
+/** POST JSON with a header, check the status and the response body. Needs `extensions: ["hoppscotch"]`. */
+export const hoppscotchPostFlow = engine
+  .map()
+  .start()
+  .gotoExternal(NavHoppscotchSettingsBlock)
+  .method(PickExtensionInterceptorBlock)
+  .gotoExternal(NavHoppscotchRestBlock)
+  .method(SetMethodBlock)
+  .method(SetUrlBlock)
+  .method(SetHeadersBlock)
+  .method(SetJsonBodyBlock)
+  .method(SendRequestBlock)
+  .assert(AssertStatusBlock)
+  .method(ReadResponseBodyBlock)
+  .assert(AssertResponseBodyBlock)
+  .end({ title: "Scaffold: Hoppscotch POST with header and JSON body" });