@excom/provider-fetch 0.1.0

package/.rush/temp/chunked-rush-logs/provider-fetch.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/provider-fetch.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/provider-fetch.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 37.503224000000046
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 57.958483
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 99.9778339999998
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,3 @@
+{
+  "../../packages/provider-fetch": "../../packages/provider-fetch:mswbYMnQ4eUa/jTGfZ0ZyQVSsYEX0r/6hq/NA32kH5A=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/index.ts

@@ -0,0 +1,17 @@
+import { ProviderFetch } from "./provider-fetch";
+
+ProviderFetch.define();
+
+export { ProviderFetch };
+
+type T_HTMLProviderFetchElement = typeof ProviderFetch.CustomElement;
+declare global {
+  interface HTMLProviderFetchElement extends T_HTMLProviderFetchElement {}
+  interface Window {
+    HTMLProviderFetchElement: HTMLProviderFetchElement;
+  }
+  interface HTMLElementTagNameMap {
+    "provider-fetch": HTMLProviderFetchElement;
+  }
+}
+export type { HTMLProviderFetchElement };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@excom/provider-fetch",
+  "version": "0.1.0",
+  "description": "<provider-fetch> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@excom/fetchable-element": "^0.1.0",
+    "@excom/neutron": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0",
+    "@excom/kit-logger": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/provider-fetch"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/provider-fetch/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "provider-fetch",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/provider-fetch.ts

@@ -0,0 +1,59 @@
+import { FetchableElement } from "@excom/fetchable-element";
+import { Neutron, TEvent } from "@excom/neutron";
+
+export type FetchArgs = [url: string, requestInit: RequestInit];
+
+export type ProviderFetchSubmitEvent = TEvent & {
+  type: "provider-fetch-submit";
+  detail: FetchArgs;
+};
+
+/**
+ * Zero-JS `fetch()` — composes `FetchableElement` and auto-fetches
+ * whenever `api-url` is set (or changes) while not `is-paused`. Re-fetch
+ * on demand with the `--fetch` command: a `<button command="--fetch"
+ * commandfor="…">`, or `<event-handler command-name="--fetch"
+ * target-ref="…">` to relay any event.
+ *
+ * All request-building attributes (`api-method`, headers, `form-ref`,
+ * …) and lifecycle state (`is-loading` / `is-success` / `is-error` /
+ * `provision`) are inherited from `FetchableElement` — see that package's
+ * docs for the full attribute list.
+ *
+ * @fires provider-fetch-submit - Internal — dispatched whenever a fetch
+ *   is about to run (auto-fetch or `--fetch`). Built by
+ *   `getFetchArgs()`. Cancelable; default action calls `doFetch()`.
+ * @type ProviderFetchSubmitEvent
+ * @command --fetch - Re-runs the request with the current attributes,
+ *   even while `is-paused`.
+ * @default-action provider-fetch-submit - Calls `doFetch(url,
+ *   requestInit)` with the event's detail.
+ */
+export const ProviderFetch = Neutron.compose([
+  FetchableElement,
+  Neutron({
+    tag: "provider-fetch",
+    props: {
+      /**
+       * @option
+       * Pause auto-fetch. While set, `api-url` changes are ignored;
+       * the `--fetch` command still works.
+       */
+      isPaused: Boolean,
+    },
+  }),
+])
+  .onPropChanged(
+    ["apiUrl", "isPaused"],
+    ({ apiUrl, isPaused, getFetchArgs }) =>
+      apiUrl &&
+      !isPaused && {
+        emit: ["provider-fetch-submit", { detail: [getFetchArgs()] }],
+      }
+  )
+  .onCommand("--fetch", ({ getFetchArgs }) => ({
+    emit: ["provider-fetch-submit", { detail: [getFetchArgs()] }],
+  }))
+  .onEventDefault("provider-fetch-submit", (_, { detail }) => ({
+    doFetch: [detail[0], detail[1]],
+  }));

package/rush-logs/provider-fetch.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/provider-fetch.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/provider-fetch.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/provider-fetch.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/provider-fetch.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/provider-fetch.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/support/custom-elements.json

@@ -0,0 +1,91 @@
+{
+  "schemaVersion": "1.0.0",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "provider-fetch.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "ProviderFetch",
+          "customElement": true,
+          "tagName": "provider-fetch",
+          "mixins": [
+            {
+              "name": "FetchableElement",
+              "package": "@excom/fetchable-element"
+            }
+          ],
+          "description": "Zero-JS `fetch()` — composes `FetchableElement` and auto-fetches whenever `api-url` is set (or changes) while not `is-paused`. Re-fetch on demand with the `--fetch` command: a `<button command=\"--fetch\" commandfor=\"…\">`, or `<event-handler command-name=\"--fetch\" target-ref=\"…\">` to relay any event. All request-building attributes (`api-method`, headers, `form-ref`, …) and lifecycle state (`is-loading` / `is-success` / `is-error` / `provision`) are inherited from `FetchableElement` — see that package's docs for the full attribute list.",
+          "attributes": [
+            {
+              "name": "is-paused",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Pause auto-fetch. While set, `api-url` changes are ignored; the `--fetch` command still works.",
+              "fieldName": "isPaused"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "isPaused",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "readonly": false,
+              "description": "Pause auto-fetch. While set, `api-url` changes are ignored; the `--fetch` command still works.",
+              "_neutron": {
+                "surface": "option"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "provider-fetch-submit",
+              "description": "Internal — dispatched whenever a fetch is about to run (auto-fetch or `--fetch`). Built by `getFetchArgs()`. Cancelable; default action calls `doFetch()`.",
+              "type": {
+                "text": "ProviderFetchSubmitEvent",
+                "expanded": "CustomEvent & { type: \"provider-fetch-submit\"; detail: [url: string, requestInit: RequestInit]; bubbles: true; cancelable: true; composed: true }"
+              }
+            }
+          ],
+          "_neutron": {
+            "commands": [
+              {
+                "name": "--fetch",
+                "description": "Re-runs the request with the current attributes, even while `is-paused`."
+              }
+            ],
+            "defaultActions": [
+              {
+                "name": "provider-fetch-submit",
+                "description": "Calls `doFetch(url, requestInit)` with the event's detail."
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ProviderFetch",
+          "declaration": {
+            "name": "ProviderFetch",
+            "module": "provider-fetch.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "provider-fetch",
+          "declaration": {
+            "name": "ProviderFetch",
+            "module": "provider-fetch.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/support/demos/refetch.html

@@ -0,0 +1,35 @@
+<section>
+  <provider-fetch id="demo-refetch-provider" api-url="/api/todos/1" class="tag-article grid">
+    <ul></ul>
+    <ul></ul>
+    <template id="demo-refetch-item">
+      <li class="tag-code"></li>
+    </template>
+  </provider-fetch>
+  <button type="button" command="--fetch" commandfor="demo-refetch-provider">Refetch</button>
+  <style>
+    #demo-provider-fetch-refetch { max-width: none; }
+    #demo-provider-fetch-refetch provider-fetch {
+      &[is-loading] {
+        opacity: 0.5;
+        border: 1px dashed yellow;
+      }
+      &[is-success] { border: 1px solid green; }
+      &[is-error] {
+        border: 1px solid red;
+        &::before { content: "An error occurred."; }
+      }
+      ul:first-of-type::before { content: "Todo data:"; }
+      ul:last-of-type::before { content: "Response data:"; }
+      li { display: block; }
+    }
+  </style>
+  <quark-sheet>
+    provider-fetch[is-success] {
+      $res: prop("provision");
+      li { content: "#{index}: #{item}"; }
+      ul:first-of-type { content: iterate($res.body, "#demo-refetch-item"); }
+      ul:last-of-type { content: iterate($res, "#demo-refetch-item"); }
+    }
+  </quark-sheet>
+</section>

package/support/demos/simple.html

@@ -0,0 +1,13 @@
+<section>
+  <provider-fetch api-url="/api/todos/1">
+    <h4>Fetching todo...</h4>
+    <span></span>
+  </provider-fetch>
+  <quark-sheet>
+    provider-fetch[is-success] {
+      $todo: prop("provision").body;
+      h4 { content: "Todo ##{$todo.id}: #{$todo.title}"; }
+      span { content: "Completed: #{$todo.completed}"; }
+    }
+  </quark-sheet>
+</section>

package/support/dist-docs/provider-fetch.md

@@ -0,0 +1,172 @@
+# provider-fetch
+
+Fetch data with HTML. Pair it with Quark to render the data. Zero app JS.
+
+
+```html
+<section>
+  <provider-fetch api-url="/api/todos/1">
+    <h4>Fetching todo...</h4>
+    <span></span>
+  </provider-fetch>
+  <quark-sheet>
+    provider-fetch[is-success] {
+      $todo: prop("provision").body;
+      h4 { content: "Todo ##{$todo.id}: #{$todo.title}"; }
+      span { content: "Completed: #{$todo.completed}"; }
+    }
+  </quark-sheet>
+</section>
+```
+
+
+## Features
+
+- **Provides data** Use Quark to render that data
+- **Auto-fetch** Fetches whenever `api-url` is set or changes
+- **Re-fetch on demand** The `--fetch` command (`<button command="--fetch" commandfor="…">`) forces a re-fetch
+- **Pausable** `is-paused` holds off auto-fetch without removing state
+- **Highly configurable** Headers, method, `form-ref`,
+  credentials, redirect, etc
+
+## Installation
+
+
+`@excom/provider-fetch` v0.1.0
+
+```bash
+pnpm add @excom/provider-fetch
+```
+
+```bash
+npm install @excom/provider-fetch
+```
+
+```bash
+yarn add @excom/provider-fetch
+```
+
+### Import
+
+```ts
+import "@excom/provider-fetch";
+```
+
+
+
+## Usage
+
+```html
+<provider-fetch api-url="/api/todos"></provider-fetch>
+```
+
+Hook the lifecycle state with CSS:
+
+```css
+provider-fetch[is-loading] { /* show loading spinner */ }
+provider-fetch[is-error]::before { content: "An error occurred." }
+```
+
+Or Quark:
+
+```quark
+provider-fetch[is-success] {
+  $todo: prop("provision").body;
+  span { content: $todo.title; }
+}
+```
+
+### API Reference
+
+
+#### Attributes
+
+| Name | Surface | Type | Default | Values | Description | Inherited from |
+| --- | --- | --- | --- | --- | --- | --- |
+| `is-paused` | option | `boolean` |  |  | Pause auto-fetch. While set, `api-url` changes are ignored; the `--fetch` command still works. |  |
+| `form-ref` | option | `string` |  | `<CSS Selector>` | CSS selector for a `<form>` to source the request from — its `action` (URL), `method`, `enctype` (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 `doFetch()` args. | `@excom/fetchable-element` |
+| `has-body` | option | `boolean` |  |  | Force a request body even for methods that don't imply one (`GET` / `HEAD`). Already implied for `POST` / `PUT` / `PATCH`. | `@excom/fetchable-element` |
+| `api-url` | option | `string` | `""` |  | Endpoint URL. When the request has no body, the JSON payload (from `form-ref` or custom `doFetch()` args) is merged in as query params instead. | `@excom/fetchable-element` |
+| `api-method` | option | `string` | `"GET"` |  | HTTP method. Always uppercased before the request is sent. | `@excom/fetchable-element` |
+| `header-accept` | option | `string` | `"application/json"` |  | `Accept` request header. | `@excom/fetchable-element` |
+| `header-content-type` | option | `string` | `"application/json"` |  | `Content-Type` request header. Dropped entirely when the request has no body. | `@excom/fetchable-element` |
+| `header-cache-control` | option | `string` |  |  | `Cache-Control` request header. Unset by default (browser default caching applies). | `@excom/fetchable-element` |
+| `fetch-redirect` | option | `string` |  | `"follow"` \| `"error"` \| `"manual"` | `RequestInit.redirect` mode. Unset defers to the browser default (`follow`). | `@excom/fetchable-element` |
+| `fetch-credentials` | option | `string` | `"include"` | `"omit"` \| `"same-origin"` \| `"include"` | `RequestInit.credentials` mode. | `@excom/fetchable-element` |
+| `is-loading` | state | `boolean` |  |  | A request is currently in flight. | `@excom/fetchable-element` |
+| `is-success` | state | `boolean` |  |  | The most recent request resolved successfully. Mutually exclusive with `is-error`. | `@excom/fetchable-element` |
+| `is-error` | state | `boolean` |  |  | The most recent request failed (non-2xx status, network error, or a thrown error other than `AbortError`). Fires with the `error` event. | `@excom/fetchable-element` |
+
+#### Provision
+
+| Name | Type | Description | Inherited from |
+| --- | --- | --- | --- |
+| `provision` | `FetchResponse` (`{ bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; }`) | Response payload on success, or error payload on failure. Success shape: `{ status, statusText, ok, headers, url, redirected, bodyUsed, type, body }`. Failure shape is either that same response shape (server responded with an error status) or `{ message, stack }` (request never completed). Not reflected as an attribute. | `@excom/fetchable-element` |
+
+#### Fires
+
+| Name | Type | Description | Inherited from |
+| --- | --- | --- | --- |
+| `provider-fetch-submit` | `ProviderFetchSubmitEvent` (`CustomEvent & { type: "provider-fetch-submit"; detail: [url: string, requestInit: RequestInit]; bubbles: true; cancelable: true; composed: true }`) | Internal — dispatched whenever a fetch is about to run (auto-fetch or `--fetch`). Built by `getFetchArgs()`. Cancelable; default action calls `doFetch()`. |  |
+| `provider-fetch-loading` | `FetchableLoadingEvent` (`CustomEvent & { type: "{tag}-loading"; detail: void; bubbles: true; cancelable: true; composed: true }`) | Dispatched immediately before the request is sent. | `@excom/fetchable-element` |
+| `provider-fetch-success` | `FetchableSuccessEvent` (`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 }`) | Dispatched when the request resolves successfully. `event.detail` is the parsed response (see `provision`). | `@excom/fetchable-element` |
+| `provider-fetch-error` | `FetchableErrorEvent` (`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 }`) | Dispatched when the request fails — non-2xx status, network error, or a thrown error. `event.detail` is the error payload (see `provision`). Not dispatched for aborted requests. | `@excom/fetchable-element` |
+
+#### Commands
+
+| Command | Action |
+| --- | --- |
+| `--fetch` | Re-runs the request with the current attributes, even while `is-paused`. |
+
+#### Default actions
+
+| Event | Default behavior (unless preventDefault() is called) |
+| --- | --- |
+| `provider-fetch-submit` | Calls `doFetch(url, requestInit)` with the event's detail. |
+
+
+
+### Examples
+
+#### Comprehensive
+
+This example shows loading state, error state, rendering, and refetching.
+
+
+```html
+<section>
+  <provider-fetch id="demo-refetch-provider" api-url="/api/todos/1" class="tag-article grid">
+    <ul></ul>
+    <ul></ul>
+    <template id="demo-refetch-item">
+      <li class="tag-code"></li>
+    </template>
+  </provider-fetch>
+  <button type="button" command="--fetch" commandfor="demo-refetch-provider">Refetch</button>
+  <style>
+    #demo-provider-fetch-refetch { max-width: none; }
+    #demo-provider-fetch-refetch provider-fetch {
+      &[is-loading] {
+        opacity: 0.5;
+        border: 1px dashed yellow;
+      }
+      &[is-success] { border: 1px solid green; }
+      &[is-error] {
+        border: 1px solid red;
+        &::before { content: "An error occurred."; }
+      }
+      ul:first-of-type::before { content: "Todo data:"; }
+      ul:last-of-type::before { content: "Response data:"; }
+      li { display: block; }
+    }
+  </style>
+  <quark-sheet>
+    provider-fetch[is-success] {
+      $res: prop("provision");
+      li { content: "#{index}: #{item}"; }
+      ul:first-of-type { content: iterate($res.body, "#demo-refetch-item"); }
+      ul:last-of-type { content: iterate($res, "#demo-refetch-item"); }
+    }
+  </quark-sheet>
+</section>
+```

package/support/docs/README.md

@@ -0,0 +1,52 @@
+# provider-fetch
+
+Fetch data with HTML. Pair it with Quark to render the data. Zero app JS.
+
+<include-content data-demo="simple"></include-content>
+
+## Features
+
+- **Provides data** Use Quark to render that data
+- **Auto-fetch** Fetches whenever `api-url` is set or changes
+- **Re-fetch on demand** The `--fetch` command (`<button command="--fetch" commandfor="…">`) forces a re-fetch
+- **Pausable** `is-paused` holds off auto-fetch without removing state
+- **Highly configurable** Headers, method, `form-ref`,
+  credentials, redirect, etc
+
+## Installation
+
+<include-content is-active template-ref="/views/install-section/install-section.html"></include-content>
+
+## Usage
+
+```html
+<provider-fetch api-url="/api/todos"></provider-fetch>
+```
+
+Hook the lifecycle state with CSS:
+
+```css
+provider-fetch[is-loading] { /* show loading spinner */ }
+provider-fetch[is-error]::before { content: "An error occurred." }
+```
+
+Or Quark:
+
+```quark
+provider-fetch[is-success] {
+  $todo: prop("provision").body;
+  span { content: $todo.title; }
+}
+```
+
+### 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 refetching.
+
+<include-content data-demo="refetch"></include-content>

package/support/package-meta.json

@@ -0,0 +1,214 @@
+{
+  "shortName": "provider-fetch",
+  "package": {
+    "name": "@excom/provider-fetch",
+    "version": "0.1.0",
+    "description": "<provider-fetch> custom element",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "kit-element"
+    }
+  },
+  "demos": {
+    "refetch": "<section>\n  <provider-fetch id=\"demo-refetch-provider\" api-url=\"/api/todos/1\" class=\"tag-article grid\">\n    <ul></ul>\n    <ul></ul>\n    <template id=\"demo-refetch-item\">\n      <li class=\"tag-code\"></li>\n    </template>\n  </provider-fetch>\n  <button type=\"button\" command=\"--fetch\" commandfor=\"demo-refetch-provider\">Refetch</button>\n  <style>\n    #demo-provider-fetch-refetch { max-width: none; }\n    #demo-provider-fetch-refetch provider-fetch {\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: \"Todo data:\"; }\n      ul:last-of-type::before { content: \"Response data:\"; }\n      li { display: block; }\n    }\n  </style>\n  <quark-sheet>\n    provider-fetch[is-success] {\n      $res: prop(\"provision\");\n      li { content: \"#{index}: #{item}\"; }\n      ul:first-of-type { content: iterate($res.body, \"#demo-refetch-item\"); }\n      ul:last-of-type { content: iterate($res, \"#demo-refetch-item\"); }\n    }\n  </quark-sheet>\n</section>\n",
+    "simple": "<section>\n  <provider-fetch api-url=\"/api/todos/1\">\n    <h4>Fetching todo...</h4>\n    <span></span>\n  </provider-fetch>\n  <quark-sheet>\n    provider-fetch[is-success] {\n      $todo: prop(\"provision\").body;\n      h4 { content: \"Todo ##{$todo.id}: #{$todo.title}\"; }\n      span { content: \"Completed: #{$todo.completed}\"; }\n    }\n  </quark-sheet>\n</section>\n"
+  },
+  "readme": "<h1 id=\"md-provider-fetch\">provider-fetch</h1>\n<p>Fetch data with HTML. Pair it with Quark to render the data. Zero app JS.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Provides data</strong> Use Quark to render that data</li>\n<li><strong>Auto-fetch</strong> Fetches whenever <code>api-url</code> is set or changes</li>\n<li><strong>Re-fetch on demand</strong> The <code>--fetch</code> command (<code>&lt;button command=&quot;--fetch&quot; commandfor=&quot;…&quot;&gt;</code>) forces a re-fetch</li>\n<li><strong>Pausable</strong> <code>is-paused</code> holds off auto-fetch without removing state</li>\n<li><strong>Highly configurable</strong> Headers, method, <code>form-ref</code>,\ncredentials, 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<include-content data-language=\"html\"><template>&lt;provider-fetch api-url=\"/api/todos\"&gt;&lt;/provider-fetch&gt;</template></include-content>\n<p>Hook the lifecycle state with CSS:</p>\n<include-content data-language=\"css\"><template>provider-fetch[is-loading] { /* show loading spinner */ }\nprovider-fetch[is-error]::before { content: \"An error occurred.\" }</template></include-content>\n<p>Or Quark:</p>\n<include-content data-language=\"quark\"><template>provider-fetch[is-success] {\n  $todo: prop(\"provision\").body;\n  span { content: $todo.title; }\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 refetching.</p>\n<p><include-content data-demo=\"refetch\"></include-content></p>\n",
+  "docs": {
+    "readme": "<h1 id=\"md-provider-fetch\">provider-fetch</h1>\n<p>Fetch data with HTML. Pair it with Quark to render the data. Zero app JS.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Provides data</strong> Use Quark to render that data</li>\n<li><strong>Auto-fetch</strong> Fetches whenever <code>api-url</code> is set or changes</li>\n<li><strong>Re-fetch on demand</strong> The <code>--fetch</code> command (<code>&lt;button command=&quot;--fetch&quot; commandfor=&quot;…&quot;&gt;</code>) forces a re-fetch</li>\n<li><strong>Pausable</strong> <code>is-paused</code> holds off auto-fetch without removing state</li>\n<li><strong>Highly configurable</strong> Headers, method, <code>form-ref</code>,\ncredentials, 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<include-content data-language=\"html\"><template>&lt;provider-fetch api-url=\"/api/todos\"&gt;&lt;/provider-fetch&gt;</template></include-content>\n<p>Hook the lifecycle state with CSS:</p>\n<include-content data-language=\"css\"><template>provider-fetch[is-loading] { /* show loading spinner */ }\nprovider-fetch[is-error]::before { content: \"An error occurred.\" }</template></include-content>\n<p>Or Quark:</p>\n<include-content data-language=\"quark\"><template>provider-fetch[is-success] {\n  $todo: prop(\"provision\").body;\n  span { content: $todo.title; }\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 refetching.</p>\n<p><include-content data-demo=\"refetch\"></include-content></p>\n"
+  },
+  "installation": {
+    "name": "@excom/provider-fetch",
+    "shortName": "provider-fetch",
+    "version": "0.1.0",
+    "description": "<provider-fetch> 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/provider-fetch@0.1.0/dist/index.umd.min.js\"></script>",
+    "install": {
+      "npm": "npm install @excom/provider-fetch"
+    },
+    "imports": {
+      "js": "import \"@excom/provider-fetch\";",
+      "html": "<!-- import path to `node_modules` will depend on your build setup -->\n<script type=\"module\" src=\"/node_modules/@excom/provider-fetch\"></script>\n<link rel=\"stylesheet\" href=\"/node_modules/@excom/provider-fetch\">"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [
+    {
+      "tag": "provider-fetch",
+      "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 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-paused",
+          "type": "boolean",
+          "description": "Pause auto-fetch. While set, <code>api-url</code> changes are ignored; the <code>--fetch</code> command still works.",
+          "fieldName": "isPaused",
+          "surface": "option"
+        },
+        {
+          "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": "provider-fetch-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": "provider-fetch-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": "provider-fetch-submit",
+          "description": "Internal — dispatched whenever a fetch is about to run (auto-fetch or <code>--fetch</code>). Built by <code>getFetchArgs()</code>. Cancelable; default action calls <code>doFetch()</code>.",
+          "type": "ProviderFetchSubmitEvent",
+          "typeExpanded": "CustomEvent & { type: \"provider-fetch-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": "provider-fetch-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": [],
+      "commands": [
+        {
+          "name": "--fetch",
+          "description": "Re-runs the request with the current attributes, even while <code>is-paused</code>."
+        }
+      ],
+      "defaultActions": [
+        {
+          "name": "provider-fetch-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__/refetch.view.test.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`refetch view > loads then refetches > complexity 1`] = `
+{
+  "attributeRuns": 11,
+  "closest": 22,
+  "getVar": 0,
+  "importNode": 0,
+  "listenerRuns": 0,
+  "matches": 5,
+  "parentElement": 12,
+  "quarkRuns": 2,
+  "queryScopeCost": 42,
+  "querySelectorAll": 3,
+  "removeAttribute": 2,
+  "ruleRuns": 5,
+  "schedulePaint": 11,
+  "setAttribute": 2,
+  "setVar": 1,
+  "textContent": 0,
+  "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 > renders the fetched todo > complexity 1`] = `
+{
+  "attributeRuns": 0,
+  "closest": 0,
+  "getVar": 0,
+  "importNode": 0,
+  "listenerRuns": 0,
+  "matches": 0,
+  "parentElement": 0,
+  "quarkRuns": 0,
+  "queryScopeCost": 0,
+  "querySelectorAll": 0,
+  "removeAttribute": 0,
+  "ruleRuns": 0,
+  "schedulePaint": 0,
+  "setAttribute": 0,
+  "setVar": 0,
+  "textContent": 0,
+  "variableRuns": 0,
+}
+`;

package/support/tests/provider-fetch.test.ts

@@ -0,0 +1,215 @@
+import { invokeCommand } from "@excom/neutron";
+import {
+  afterEach,
+  describe,
+  expect,
+  fixture,
+  it,
+  spyFetch,
+  vi,
+  waitForEvent,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { KitLogger } from "@excom/kit-logger";
+import "../../index";
+
+const fetchStubs = {
+  success: () => ({
+    status: 200,
+    body: JSON.stringify({ foo: "bar" }),
+  }),
+  error: () => ({
+    status: 500,
+    body: JSON.stringify({ error: "bar" }),
+  }),
+};
+
+describe("provider-fetch", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("sets state attributes and fetches data", async () => {
+    const providerFetch = fixture<HTMLProviderFetchElement>(
+      `<provider-fetch></provider-fetch>`,
+    );
+    const fetchSpy = spyFetch(fetchStubs.success() as any);
+
+    providerFetch.addEventListener("provider-fetch-loading", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch api-url="/api/test" is-loading></provider-fetch>`,
+      );
+      expect(providerFetch.provision).toEqual(null);
+      expect(fetchSpy).toHaveBeenCalledWith(
+        "http://localhost:3000/api/test",
+        expect.objectContaining({
+          method: "GET",
+          credentials: "include",
+          headers: {
+            Accept: "application/json",
+          },
+        }),
+      );
+    });
+
+    providerFetch.addEventListener("provider-fetch-success", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch api-url="/api/test" is-success></provider-fetch>`,
+      );
+      expect(providerFetch.provision?.body).toEqual({ foo: "bar" });
+    });
+
+    await waitForEvent(providerFetch, "provider-fetch-success", () => {
+      providerFetch.setAttribute("api-url", "/api/test");
+    });
+    expect.assertions(5);
+  });
+
+  it("sets state attributes and fetches data with formRef", async () => {
+    const providerFetch = fixture<HTMLProviderFetchElement>(
+      `<provider-fetch form-ref="form" api-method="post">
+        <form>
+          <input type="text" name="name" value="John Doe">
+          <input type="email" name="email" value="j@doe.com">
+          <input type="number" name="age" value="50">
+          <input type="range" name="volume" min="0" max="100" value="20">
+          <input type="tel" name="phone" value="123-456-7890">
+          <input type="url" name="website" value="https://example.com">
+        </form>
+      </provider-fetch>`,
+    );
+    const fetchSpy = spyFetch(fetchStubs.success() as any);
+
+    providerFetch.addEventListener("provider-fetch-loading", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch is-loading form-ref="form" api-method="post" api-url="/api/test"></provider-fetch>`,
+      );
+      expect(providerFetch.provision).toEqual(null);
+      expect(fetchSpy).toHaveBeenCalledWith(
+        "http://localhost:3000/api/test",
+        expect.objectContaining({
+          method: "POST",
+          credentials: "include",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: expect.toSatisfy((body: string) => {
+            expect(JSON.parse(body)).toEqual(
+              expect.objectContaining({
+                name: "John Doe",
+                email: "j@doe.com",
+                age: 50,
+                volume: 20,
+                phone: "123-456-7890",
+                website: "https://example.com",
+              }),
+            );
+            return true;
+          }),
+        }),
+      );
+    });
+
+    providerFetch.addEventListener("provider-fetch-success", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch is-success form-ref="form" api-method="post" api-url="/api/test"></provider-fetch>`,
+      );
+      expect(providerFetch.provision?.body).toEqual({ foo: "bar" });
+    });
+
+    await waitForEvent(providerFetch, "provider-fetch-success", () => {
+      providerFetch.setAttribute("api-url", "/api/test");
+    });
+    expect.assertions(6);
+  });
+
+  it("handles fetch error", async () => {
+    const providerFetch = fixture<HTMLProviderFetchElement>(
+      `<provider-fetch></provider-fetch>`,
+    );
+    const fetchSpy = spyFetch(fetchStubs.error as any);
+
+    KitLogger.suppress();
+    providerFetch.addEventListener("provider-fetch-loading", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch api-url="/api/test" is-loading></provider-fetch>`,
+      );
+      expect(providerFetch.provision).toEqual(null);
+      expect(fetchSpy).toHaveBeenCalledWith(
+        "http://localhost:3000/api/test",
+        expect.objectContaining({
+          method: "GET",
+          credentials: "include",
+          headers: {
+            Accept: "application/json",
+          },
+        }),
+      );
+    });
+
+    providerFetch.addEventListener("provider-fetch-error", () => {
+      KitLogger.unsuppress();
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch api-url="/api/test" is-error></provider-fetch>`,
+      );
+      expect(providerFetch.provision?.body).toEqual({ error: "bar" });
+    });
+
+    await waitForEvent(providerFetch, "provider-fetch-error", () => {
+      providerFetch.setAttribute("api-url", "/api/test");
+    });
+    expect.assertions(5);
+  });
+
+  it("interpolates params from its own attributes", async () => {
+    const providerFetch = fixture<HTMLProviderFetchElement>(
+      `<provider-fetch></provider-fetch>`,
+    );
+    const fetchSpy = spyFetch(fetchStubs.success as any);
+
+    providerFetch.addEventListener("provider-fetch-loading", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch api-url="/api/users/123" is-loading></provider-fetch>`,
+      );
+      expect(providerFetch.provision).toEqual(null);
+    });
+
+    providerFetch.addEventListener("provider-fetch-success", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch api-url="/api/users/123" is-success></provider-fetch>`,
+      );
+      expect(providerFetch.provision?.body).toEqual({ foo: "bar" });
+      const calledUrl = fetchSpy.mock.calls[0][0] as string;
+      expect(calledUrl).toBe("http://localhost:3000/api/users/123");
+    });
+
+    await waitForEvent(providerFetch, "provider-fetch-success", () => {
+      providerFetch.setAttribute("api-url", "/api/users/123");
+    });
+    expect.assertions(5);
+  });
+
+  it("aborts existing fetch when new one is triggered", async () => {
+    const providerFetch = fixture<HTMLProviderFetchElement>(
+      `<provider-fetch></provider-fetch>`,
+    );
+    spyFetch(fetchStubs.success as any);
+
+    providerFetch.addEventListener("provider-fetch-loading", () => {
+      expect(providerFetch).dom.to.equalTag(
+        `<provider-fetch api-url="/api/test" is-loading></provider-fetch>`,
+      );
+    });
+    let secondFetch = false;
+    providerFetch.addEventListener("provider-fetch-success", () => {
+      expect(secondFetch).toBe(true);
+    });
+    await waitForEvent(providerFetch, "provider-fetch-success", () => {
+      providerFetch.setAttribute("api-url", "/api/test");
+      secondFetch = true;
+      invokeCommand(providerFetch, "--fetch");
+    });
+    expect.assertions(3);
+  });
+});

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

@@ -0,0 +1,56 @@
+import { invokeCommand } from "@excom/neutron";
+import "@excom/event-handler";
+import "@excom/quark-sheet";
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+  spyFetch,
+  vi,
+  waitForEvent,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import {
+  expectComplexity,
+  flush,
+  measureComplexity,
+  mountView,
+  readDemo,
+} from "@excom/quark/support/tests/view-helpers";
+
+describe("refetch view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("loads then refetches", async () => {
+    spyFetch({
+      status: 200,
+      body: JSON.stringify({ id: 1, title: "Once" }),
+    });
+    const { root, quark } = await mountView(readDemo(import.meta.url, "refetch"));
+    const provider = root.querySelector("provider-fetch")!;
+    if (!provider.hasAttribute("is-success")) {
+      await waitForEvent(provider, "provider-fetch-success");
+    }
+    await flush();
+    expect([...root.querySelectorAll("li")].some((li) => /Once/.test(li.textContent || ""))).toBe(
+      true,
+    );
+    const button = root.querySelector<HTMLButtonElement>("button")!;
+    expect(button.getAttribute("command")).toBe("--fetch");
+    expect(button.getAttribute("commandfor")).toBe(provider.id);
+    const meter = measureComplexity(quark!);
+    // happy-dom has no Command API: dispatch what the button would have
+    await waitForEvent(provider, "provider-fetch-success", () => {
+      invokeCommand(provider, "--fetch", button);
+    });
+    await flush();
+    const budget = meter.take();
+    meter.stop();
+    expect(provider.hasAttribute("is-success")).toBe(true);
+    expectComplexity(budget);
+  });
+});

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

@@ -0,0 +1,43 @@
+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("simple view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders the fetched todo", async () => {
+    spyFetch({
+      status: 200,
+      body: JSON.stringify({ id: 7, title: "Ship it", completed: false }),
+    });
+    const { root, quark } = await mountView(readDemo(import.meta.url, "simple"));
+    const provider = root.querySelector("provider-fetch")!;
+    if (!provider.hasAttribute("is-success")) {
+      await waitForEvent(provider, "provider-fetch-success");
+      await flush();
+    }
+    const meter = measureComplexity(quark!);
+    await flush();
+    const budget = meter.take();
+    meter.stop();
+    expect(root.querySelector("h4")?.textContent).toMatch(/Todo #7: Ship it/);
+    expect(root.querySelector("span")?.textContent).toMatch(/Completed: false/);
+    expectComplexity(budget);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@excom/heft-rig/profiles/default/config/tsconfig.json",
+  "include": ["./*.ts"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
+}