@excom/super-form 0.1.0

package/support/docs/README.md

@@ -0,0 +1,61 @@
+# super-form
+
+Submit AJAX requests with HTML forms. Pair it with Quark to render the response.
+
+<include-content data-demo="simple"></include-content>
+
+## Features
+
+- **Makes AJAX requests** JSON payload is built from each input's `name` and `type` attributes
+- **Progressively enhanced** Doesn't replace the native `form`; it enhances it. Everything you know about `form` and `input` still applies.
+- **Provides data** Use Quark to render the response
+- **Submit command** `--submit` submits programmatically (`<button command="--submit" commandfor="…">`)
+- **Highly configurable** Headers, credentials, redirect, etc
+
+## Installation
+
+<include-content is-active template-ref="/views/install-section/install-section.html"></include-content>
+
+## Usage
+
+Just wrap a regular form. Form fields become a JSON payload via their `name`: dot-separated names nest, and a trailing `[]` collects same-named fields into an array. `input[type]` determines the type conversion.
+
+```html
+<super-form>
+  <form action="/api/signup" method="post">
+    <input name="isAvailable" type="checkbox"> <!-- -> { isAvailable: true } -->
+    <input name="address.city" value="Anytown"> <!-- -> { address: { city: "Anytown" } } -->
+    <input name="tags[]" value="smart">
+    <input name="tags[]" value="kind"> <!-- -> { tags: ["smart", "kind"] } -->
+    <button type="submit">Sign up</button>
+  </form>
+</super-form>
+```
+
+Hook the lifecycle state with CSS:
+
+```css
+super-form[is-loading] { /* form currently submitting, show loading spinner */ }
+super-form[is-error]::before { content: "An error occurred." }
+```
+
+Or Quark:
+
+```quark
+super-form[is-success] {
+  $res: prop("provision").body;
+  span { content: $res.json.email; }
+}
+```
+
+### API Reference
+
+<include-content is-active template-ref="/views/api-reference/api-reference.html"></include-content>
+
+### Examples
+
+#### Comprehensive
+
+This example shows loading state, error state, rendering, and triggering from outside the form.
+
+<include-content data-demo="external-trigger"></include-content>

package/support/package-meta.json

@@ -0,0 +1,224 @@
+{
+  "shortName": "super-form",
+  "package": {
+    "name": "@excom/super-form",
+    "version": "0.1.0",
+    "description": "<super-form> custom element",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "kit-element"
+    }
+  },
+  "demos": {
+    "external-trigger": "<section>\n  <super-form id=\"demo-super-form-external\" class=\"tag-article grid\">\n    <form action=\"/api/echo\" method=\"post\">\n      <label>\n        Nickname\n        <input type=\"text\" name=\"nickname\" placeholder=\"John\" required>\n      </label>\n    </form>\n    <ul></ul>\n    <ul></ul>\n    <template id=\"demo-super-form-item\">\n      <li class=\"tag-code\"></li>\n    </template>\n  </super-form>\n  <button type=\"button\" command=\"--submit\" commandfor=\"demo-super-form-external\">\n    Save (outside the form)\n  </button>\n  <style>\n    #demo-super-form-external-trigger { max-width: none; }\n    #demo-super-form-external-trigger super-form {\n      &[is-loading] {\n        opacity: 0.5;\n        border: 1px dashed yellow;\n      }\n      &[is-success] { border: 1px solid green; }\n      &[is-error] {\n        border: 1px solid red;\n        &::before { content: \"An error occurred.\"; }\n      }\n      ul:first-of-type::before { content: \"Submitted JSON:\"; }\n      ul:last-of-type::before { content: \"Response data:\"; }\n      li { display: block; }\n    }\n  </style>\n  <quark-sheet>\n    super-form[is-success] {\n      $res: prop(\"provision\");\n      li { content: \"#{index}: #{item}\"; }\n      ul:first-of-type { content: iterate($res.body.json, \"#demo-super-form-item\"); }\n      ul:last-of-type { content: iterate($res, \"#demo-super-form-item\"); }\n    }\n  </quark-sheet>\n</section>\n",
+    "simple": "<section>\n  <super-form>\n    <form action=\"/api/echo\" method=\"post\">\n      <input type=\"text\" name=\"name\" placeholder=\"Your name\" required>\n      <button type=\"submit\">Submit</button>\n    </form>\n    <h4></h4>\n    <span></span>\n  </super-form>\n  <quark-sheet>\n    super-form[is-success] {\n      $res: prop(\"provision\");\n      h4 { content: \"Echoed name: #{$res.body.json.name}\"; }\n    }\n    super-form {\n      $res: prop(\"provision\");\n      span { content: \"HTTP status code: #{$res.status or \"\"}\"; }\n    }\n  </quark-sheet>\n  <style>\n    #demo-super-form-simple super-form[is-loading] {\n      animation: pulse 1s linear infinite;\n      pointer-events: none;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.2; }\n      50% { opacity: 0.6; }\n      100% { opacity: 0.2; }\n    }\n  </style>\n</section>\n"
+  },
+  "readme": "<h1 id=\"md-super-form\">super-form</h1>\n<p>Submit AJAX requests with HTML forms. Pair it with Quark to render the response.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Makes AJAX requests</strong> JSON payload is built from each input&#39;s <code>name</code> and <code>type</code> attributes</li>\n<li><strong>Progressively enhanced</strong> Doesn&#39;t replace the native <code>form</code>; it enhances it. Everything you know about <code>form</code> and <code>input</code> still applies.</li>\n<li><strong>Provides data</strong> Use Quark to render the response</li>\n<li><strong>Submit command</strong> <code>--submit</code> submits programmatically (<code>&lt;button command=&quot;--submit&quot; commandfor=&quot;…&quot;&gt;</code>)</li>\n<li><strong>Highly configurable</strong> Headers, credentials, redirect, etc</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Just wrap a regular form. Form fields become a JSON payload via their <code>name</code>: dot-separated names nest, and a trailing <code>[]</code> collects same-named fields into an array. <code>input[type]</code> determines the type conversion.</p>\n<include-content data-language=\"html\"><template>&lt;super-form&gt;\n  &lt;form action=\"/api/signup\" method=\"post\"&gt;\n    &lt;input name=\"isAvailable\" type=\"checkbox\"&gt; &lt;!-- -&gt; { isAvailable: true } --&gt;\n    &lt;input name=\"address.city\" value=\"Anytown\"&gt; &lt;!-- -&gt; { address: { city: \"Anytown\" } } --&gt;\n    &lt;input name=\"tags[]\" value=\"smart\"&gt;\n    &lt;input name=\"tags[]\" value=\"kind\"&gt; &lt;!-- -&gt; { tags: [\"smart\", \"kind\"] } --&gt;\n    &lt;button type=\"submit\"&gt;Sign up&lt;/button&gt;\n  &lt;/form&gt;\n&lt;/super-form&gt;</template></include-content>\n<p>Hook the lifecycle state with CSS:</p>\n<include-content data-language=\"css\"><template>super-form[is-loading] { /* form currently submitting, show loading spinner */ }\nsuper-form[is-error]::before { content: \"An error occurred.\" }</template></include-content>\n<p>Or Quark:</p>\n<include-content data-language=\"quark\"><template>super-form[is-success] {\n  $res: prop(\"provision\").body;\n  span { content: $res.json.email; }\n}</template></include-content>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-comprehensive\">Comprehensive</h4>\n<p>This example shows loading state, error state, rendering, and triggering from outside the form.</p>\n<p><include-content data-demo=\"external-trigger\"></include-content></p>\n",
+  "docs": {
+    "readme": "<h1 id=\"md-super-form\">super-form</h1>\n<p>Submit AJAX requests with HTML forms. Pair it with Quark to render the response.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Makes AJAX requests</strong> JSON payload is built from each input&#39;s <code>name</code> and <code>type</code> attributes</li>\n<li><strong>Progressively enhanced</strong> Doesn&#39;t replace the native <code>form</code>; it enhances it. Everything you know about <code>form</code> and <code>input</code> still applies.</li>\n<li><strong>Provides data</strong> Use Quark to render the response</li>\n<li><strong>Submit command</strong> <code>--submit</code> submits programmatically (<code>&lt;button command=&quot;--submit&quot; commandfor=&quot;…&quot;&gt;</code>)</li>\n<li><strong>Highly configurable</strong> Headers, credentials, redirect, etc</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Just wrap a regular form. Form fields become a JSON payload via their <code>name</code>: dot-separated names nest, and a trailing <code>[]</code> collects same-named fields into an array. <code>input[type]</code> determines the type conversion.</p>\n<include-content data-language=\"html\"><template>&lt;super-form&gt;\n  &lt;form action=\"/api/signup\" method=\"post\"&gt;\n    &lt;input name=\"isAvailable\" type=\"checkbox\"&gt; &lt;!-- -&gt; { isAvailable: true } --&gt;\n    &lt;input name=\"address.city\" value=\"Anytown\"&gt; &lt;!-- -&gt; { address: { city: \"Anytown\" } } --&gt;\n    &lt;input name=\"tags[]\" value=\"smart\"&gt;\n    &lt;input name=\"tags[]\" value=\"kind\"&gt; &lt;!-- -&gt; { tags: [\"smart\", \"kind\"] } --&gt;\n    &lt;button type=\"submit\"&gt;Sign up&lt;/button&gt;\n  &lt;/form&gt;\n&lt;/super-form&gt;</template></include-content>\n<p>Hook the lifecycle state with CSS:</p>\n<include-content data-language=\"css\"><template>super-form[is-loading] { /* form currently submitting, show loading spinner */ }\nsuper-form[is-error]::before { content: \"An error occurred.\" }</template></include-content>\n<p>Or Quark:</p>\n<include-content data-language=\"quark\"><template>super-form[is-success] {\n  $res: prop(\"provision\").body;\n  span { content: $res.json.email; }\n}</template></include-content>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-comprehensive\">Comprehensive</h4>\n<p>This example shows loading state, error state, rendering, and triggering from outside the form.</p>\n<p><include-content data-demo=\"external-trigger\"></include-content></p>\n"
+  },
+  "installation": {
+    "name": "@excom/super-form",
+    "shortName": "super-form",
+    "version": "0.1.0",
+    "description": "<super-form> custom element",
+    "packageType": "kit-element",
+    "cdn": "<script src=\"https://unpkg.com/@excom/kit-utils/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/neutron/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/super-form@0.1.0/dist/index.umd.min.js\"></script>",
+    "install": {
+      "npm": "npm install @excom/super-form"
+    },
+    "imports": {
+      "js": "import \"@excom/super-form\";",
+      "html": "<!-- import path to `node_modules` will depend on your build setup -->\n<script type=\"module\" src=\"/node_modules/@excom/super-form\"></script>\n<link rel=\"stylesheet\" href=\"/node_modules/@excom/super-form\">"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [
+    {
+      "tag": "super-form",
+      "summary": "Zero-JS <code>fetch()</code> submit for a plain <code>&lt;form&gt;</code>.",
+      "kind": "class",
+      "attributes": [
+        {
+          "name": "api-method",
+          "type": "string",
+          "description": "HTTP method. Always uppercased before the request is sent.",
+          "fieldName": "apiMethod",
+          "surface": "option",
+          "default": "\"GET\"",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "api-url",
+          "type": "string",
+          "description": "Endpoint URL. When the request has no body, the JSON payload (from <code>form-ref</code> or custom <code>doFetch()</code> args) is merged in as query params instead.",
+          "fieldName": "apiUrl",
+          "surface": "option",
+          "default": "\"\"",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "fetch-credentials",
+          "type": "string",
+          "description": "<code>RequestInit.credentials</code> mode.",
+          "fieldName": "fetchCredentials",
+          "surface": "option",
+          "default": "\"include\"",
+          "values": "\"omit\" | \"same-origin\" | \"include\"",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "fetch-redirect",
+          "type": "string",
+          "description": "<code>RequestInit.redirect</code> mode. Unset defers to the browser default (<code>follow</code>).",
+          "fieldName": "fetchRedirect",
+          "surface": "option",
+          "values": "\"follow\" | \"error\" | \"manual\"",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "form-ref",
+          "type": "string",
+          "description": "CSS selector for the <code>&lt;form&gt;</code> to intercept. The form&#39;s <code>action</code> / <code>method</code> / <code>enctype</code> take priority over <code>api-url</code> / <code>api-method</code> below. Must be a descendant to be heard directly — point elsewhere and invoke the <code>--submit</code> command instead.",
+          "fieldName": "formRef",
+          "surface": "option",
+          "default": "\":scope form\"",
+          "values": "<CSS Selector>"
+        },
+        {
+          "name": "form-ref",
+          "type": "string",
+          "description": "CSS selector for a <code>&lt;form&gt;</code> to source the request from — its <code>action</code> (URL), <code>method</code>, <code>enctype</code> (Content-Type), and field values (as the JSON payload) all take priority over the matching attributes below. Omit to build the request entirely from attributes / custom <code>doFetch()</code> args.",
+          "fieldName": "formRef",
+          "surface": "option",
+          "values": "<CSS Selector>",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "has-body",
+          "type": "boolean",
+          "description": "Force a request body even for methods that don&#39;t imply one (<code>GET</code> / <code>HEAD</code>). Already implied for <code>POST</code> / <code>PUT</code> / <code>PATCH</code>.",
+          "fieldName": "hasBody",
+          "surface": "option",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "header-accept",
+          "type": "string",
+          "description": "<code>Accept</code> request header.",
+          "fieldName": "headerAccept",
+          "surface": "option",
+          "default": "\"application/json\"",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "header-cache-control",
+          "type": "string",
+          "description": "<code>Cache-Control</code> request header. Unset by default (browser default caching applies).",
+          "fieldName": "headerCacheControl",
+          "surface": "option",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "header-content-type",
+          "type": "string",
+          "description": "<code>Content-Type</code> request header. Dropped entirely when the request has no body.",
+          "fieldName": "headerContentType",
+          "surface": "option",
+          "default": "\"application/json\"",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "is-error",
+          "type": "boolean",
+          "description": "The most recent request failed (non-2xx status, network error, or a thrown error other than <code>AbortError</code>). Fires with the <code>error</code> event.",
+          "fieldName": "isError",
+          "surface": "state",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "is-loading",
+          "type": "boolean",
+          "description": "A request is currently in flight.",
+          "fieldName": "isLoading",
+          "surface": "state",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "is-success",
+          "type": "boolean",
+          "description": "The most recent request resolved successfully. Mutually exclusive with <code>is-error</code>.",
+          "fieldName": "isSuccess",
+          "surface": "state",
+          "inheritedFrom": "@excom/fetchable-element"
+        }
+      ],
+      "events": [
+        {
+          "name": "super-form-error",
+          "description": "Dispatched when the request fails — non-2xx status, network error, or a thrown error. <code>event.detail</code> is the error payload (see <code>provision</code>). Not dispatched for aborted requests.",
+          "type": "FetchableErrorEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-error\"; detail: { bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; } | { message: string; stack?: string }; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "super-form-loading",
+          "description": "Dispatched immediately before the request is sent.",
+          "type": "FetchableLoadingEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-loading\"; detail: void; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/fetchable-element"
+        },
+        {
+          "name": "super-form-submit",
+          "description": "Internal — dispatched whenever a submit is about to run (real <code>submit</code> or the <code>--submit</code> command). Built by <code>getFetchArgs()</code>. Cancelable; default action calls <code>doFetch()</code>.",
+          "type": "SuperFormSubmitEvent",
+          "typeExpanded": "CustomEvent & { type: \"super-form-submit\"; detail: [url: string, requestInit: RequestInit]; bubbles: true; cancelable: true; composed: true }",
+          "defaultAction": "Calls <code>doFetch(url, requestInit)</code> with the event&#39;s detail."
+        },
+        {
+          "name": "super-form-success",
+          "description": "Dispatched when the request resolves successfully. <code>event.detail</code> is the parsed response (see <code>provision</code>).",
+          "type": "FetchableSuccessEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-success\"; detail: { bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; }; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/fetchable-element"
+        }
+      ],
+      "slots": [],
+      "cssProperties": [],
+      "cssClasses": [],
+      "cssAliases": [],
+      "listens": [
+        {
+          "name": "submit",
+          "description": "The default action of the <code>&lt;form&gt;</code> matched by <code>form-ref</code> (or any descendant <code>&lt;form&gt;</code>); prevented, then converted into <code>super-form-submit</code>.",
+          "type": "SuperFormNativeSubmitEvent",
+          "typeExpanded": "SubmitEvent & { type: \"submit\"; bubbles: true; cancelable: true; composed: false; }"
+        }
+      ],
+      "commands": [
+        {
+          "name": "--submit",
+          "description": "Submits programmatically (<code>&lt;button command=&quot;--submit&quot; commandfor=&quot;…&quot;&gt;</code>) — the only option when <code>form-ref</code> points to a form that isn&#39;t a descendant, since this element can&#39;t hear its <code>submit</code> event directly."
+        }
+      ],
+      "defaultActions": [
+        {
+          "name": "super-form-submit",
+          "description": "Calls <code>doFetch(url, requestInit)</code> with the event&#39;s detail."
+        }
+      ],
+      "expectedChildren": [],
+      "provisions": [
+        {
+          "name": "provision",
+          "type": "FetchResponse",
+          "typeExpanded": "{ bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; }",
+          "description": "Response payload on success, or error payload on failure. Success shape: <code>{ status, statusText, ok, headers, url, redirected, bodyUsed, type, body }</code>. Failure shape is either that same response shape (server responded with an error status) or <code>{ message, stack }</code> (request never completed). Not reflected as an attribute.",
+          "fieldName": "provision",
+          "inheritedFrom": "@excom/fetchable-element"
+        }
+      ]
+    }
+  ],
+  "exportedFiles": {}
+}

package/support/tests/__snapshots__/external-trigger.view.test.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`external-trigger view > lists the echo after an outside trigger > complexity 1`] = `
+{
+  "attributeRuns": 12,
+  "closest": 20,
+  "getVar": 2,
+  "importNode": 12,
+  "listenerRuns": 0,
+  "matches": 6,
+  "parentElement": 25,
+  "quarkRuns": 2,
+  "queryScopeCost": 88,
+  "querySelectorAll": 12,
+  "removeAttribute": 1,
+  "ruleRuns": 12,
+  "schedulePaint": 12,
+  "setAttribute": 4,
+  "setVar": 1,
+  "textContent": 10,
+  "variableRuns": 1,
+}
+`;

package/support/tests/__snapshots__/simple.view.test.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`simple view > echoes the submitted name and stays within the complexity budget > complexity 1`] = `
+{
+  "attributeRuns": 2,
+  "closest": 0,
+  "getVar": 2,
+  "importNode": 0,
+  "listenerRuns": 0,
+  "matches": 6,
+  "parentElement": 4,
+  "quarkRuns": 3,
+  "queryScopeCost": 15,
+  "querySelectorAll": 4,
+  "removeAttribute": 1,
+  "ruleRuns": 6,
+  "schedulePaint": 2,
+  "setAttribute": 2,
+  "setVar": 2,
+  "textContent": 2,
+  "variableRuns": 2,
+}
+`;

package/support/tests/external-trigger.view.test.ts

@@ -0,0 +1,57 @@
+import { invokeCommand } from "@excom/neutron";
+import "@excom/event-handler";
+import "@excom/quark-sheet";
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+  spyFetch,
+  waitForEvent,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import {
+  expectComplexity,
+  flush,
+  measureComplexity,
+  mountView,
+  readDemo,
+} from "@excom/quark/support/tests/view-helpers";
+
+describe("external-trigger view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("lists the echo after an outside trigger", async () => {
+    spyFetch({
+      status: 200,
+      body: JSON.stringify({ json: { nickname: "Ada" } }),
+    });
+    const { root, quark } = await mountView(
+      readDemo(import.meta.url, "external-trigger"),
+    );
+    const form = root.querySelector<HTMLSuperFormElement>("super-form")!;
+    const trigger = root.querySelector<HTMLButtonElement>("button[command]")!;
+    root.querySelector<HTMLInputElement>('input[name="nickname"]')!.value =
+      "Ada";
+
+    expect(trigger.getAttribute("command")).toBe("--submit");
+    expect(trigger.getAttribute("commandfor")).toBe(form.id);
+
+    // happy-dom has no Command API: dispatch what the button would have
+    const meter = measureComplexity(quark!);
+    await waitForEvent(form, "super-form-success", () => {
+      invokeCommand(form, "--submit", trigger);
+    });
+    // `[is-success]` is observed as an attribute change (deferred run), then
+    // the iterate rows render and their own rule runs: two settle cycles
+    await flush();
+    await flush();
+    const budget = meter.take();
+    meter.stop();
+    expect(form.hasAttribute("is-success")).toBe(true);
+    expect(root.querySelector("ul")?.textContent).toMatch(/Ada/);
+    expectComplexity(budget);
+  });
+});

package/support/tests/simple.view.test.ts

@@ -0,0 +1,63 @@
+import "@excom/quark-sheet";
+import "../../index";
+import {
+  expectComplexity,
+  flush,
+  measureComplexity,
+} from "@excom/quark/support/tests/helpers";
+import {
+  afterEach,
+  describe,
+  expect,
+  fixture,
+  it,
+  spyFetch,
+  waitForEvent,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const demoHtml = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), "../demos/simple.html"),
+  "utf8",
+);
+
+describe("simple view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("echoes the submitted name and stays within the complexity budget", async () => {
+    spyFetch({
+      status: 200,
+      body: JSON.stringify({ json: { name: "Ada" } }),
+    });
+    const root = fixture<HTMLElement>(demoHtml);
+    const sheet = root.querySelector<HTMLQuarkSheetElement>("quark-sheet")!;
+    const superForm = root.querySelector<HTMLSuperFormElement>("super-form")!;
+    await flush();
+    expect(sheet.quarkInstance).toBeDefined();
+
+    const nameInput = root.querySelector<HTMLInputElement>(
+      'input[name="name"]',
+    )!;
+    nameInput.value = "Ada";
+
+    const meter = measureComplexity(sheet.quarkInstance!);
+    await waitForEvent(superForm, "super-form-success", () => {
+      superForm
+        .getFormElement()!
+        .dispatchEvent(new Event("submit", { bubbles: true }));
+    });
+    await flush();
+    const budget = meter.take();
+    meter.stop();
+
+    expect(root.querySelector("h4")?.textContent).toBe("Echoed name: Ada");
+    expect(root.querySelector("span")?.textContent).toBe(
+      "HTTP status code: 200",
+    );
+    expectComplexity(budget);
+  });
+});