@farm.js/core 0.1.62 → 0.1.64

package/dist/{chunk-CI4UNQHO.cjs → chunk-XBSKPLHF.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkPRFNLQSPcjs = require('./chunk-PRFNLQSP.cjs');
+var _chunk7XGWBPQQcjs = require('./chunk-7XGWBPQQ.cjs');
 
 // src/app-markdown.ts
 var _promises = require('fs/promises');
@@ -8,7 +8,7 @@ var _path = require('path'); var _path2 = _interopRequireDefault(_path);
 var _url = require('url');
 async function createFarmMarkdownRouteModuleFromFile(filePath, options = {}) {
   const source = await _promises.readFile.call(void 0, filePath, "utf8");
-  return _chunkPRFNLQSPcjs.createFarmMarkdownRouteModule.call(void 0, {
+  return _chunk7XGWBPQQcjs.createFarmMarkdownRouteModule.call(void 0, {
     source,
     filePath,
     components: options.components,

package/dist/{chunk-IOF4KXMP.mjs → chunk-XVWSDSUM.mjs}

@@ -10,9 +10,13 @@ import {
 } from "./chunk-LLZSYFOM.mjs";
 import {
   _readFarmRenderedHtml
-} from "./chunk-YSXTNSXS.mjs";
+} from "./chunk-K7OZAVOI.mjs";
 
 // src/mobile/native-tree.ts
+var URLENCODED = "application/x-www-form-urlencoded";
+var MULTIPART = "multipart/form-data";
+var TEXT_INPUT_TYPES = /* @__PURE__ */ new Set(["text", "email", "password", "number", "search", "tel", "url"]);
+var CONTROL_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select", "button"]);
 var VIEW_TAGS = new Set(
   "div section main article header footer nav aside figure ul ol li hr".split(" ")
 );
@@ -118,15 +122,29 @@ function settleLineHeight(style) {
   }
   return rest;
 }
+function labelText(element) {
+  const text = (node) => typeof node === "string" ? node : CONTROL_TAGS.has(node.tag) || node.tag === "option" ? " " : node.children.map(text).join("");
+  return text(element).replace(/\s+/g, " ").trim();
+}
+function findNode(node, test) {
+  for (const child of node.children ?? []) {
+    if (typeof child === "string") continue;
+    if (test(child)) return child;
+    const found = findNode(child, test);
+    if (found) return found;
+  }
+  return void 0;
+}
 var Converter = class {
   /**
    * `sheets`: the page's stylesheets. Without them, a class the Tailwind table does not know is
    * reported; with them, only one a layered (Tailwind) rule styles is, since a class no rule
    * styles has no effect in a browser either.
    */
-  constructor(pageUrl, sheets) {
+  constructor(pageUrl, sheets, labels = /* @__PURE__ */ new Map()) {
     this.pageUrl = pageUrl;
     this.sheets = sheets;
+    this.labels = labels;
     this.unsupported = [];
     /** Off while reading the ancestors above the page, which pass down text styles only. */
     this.reporting = true;
@@ -176,14 +194,75 @@ var Converter = class {
       return void 0;
     }
   }
+  /** A form's or button's action: absolute http(s), without a fragment; empty means this page. */
+  formUrl(value, what) {
+    let url;
+    try {
+      url = new URL(value ?? "", this.pageUrl);
+    } catch {
+      this.problem(`${what} "${value}"`);
+      return void 0;
+    }
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      this.problem(`${what} "${value}"`);
+      return void 0;
+    }
+    url.hash = "";
+    return url.href;
+  }
+  method(value, what) {
+    const method = value?.toLowerCase();
+    if (method === void 0 || method === "") return void 0;
+    if (method === "get" || method === "post") return method;
+    this.problem(`${what} method "${value}"`);
+    return void 0;
+  }
+  enctype(value, what) {
+    const enctype = value?.toLowerCase();
+    if (enctype === void 0 || enctype === "") return void 0;
+    if (enctype === URLENCODED || enctype === MULTIPART) return enctype;
+    this.problem(`${what} enctype "${value}"`);
+    return void 0;
+  }
+  /** What a submit button sends besides its form's fields, and where. */
+  submitter(element) {
+    const { name, value, formaction, formmethod, formenctype, formtarget } = element.attributes;
+    if (formtarget && formtarget !== "_self") this.problem(`<${element.tag}> formtarget`);
+    const action = formaction === void 0 ? void 0 : this.formUrl(formaction, `<${element.tag}> formaction`);
+    const method = this.method(formmethod, `<${element.tag}>`);
+    const enctype = this.enctype(formenctype, `<${element.tag}>`);
+    return {
+      ...name ? { name, value: value ?? "" } : {},
+      ...action ? { action } : {},
+      ...method ? { method } : {},
+      ...enctype ? { enctype } : {}
+    };
+  }
+  /** A `<label>` that wraps a field draws as a box: its text, then the field. */
+  holdsControl(element) {
+    return element.children.some(
+      (child) => typeof child !== "string" && (CONTROL_TAGS.has(child.tag) || this.holdsControl(child))
+    );
+  }
   node(type, element, style, dark) {
     const changed = dark && Object.fromEntries(Object.entries(dark).filter(([key, value]) => style?.[key] !== value));
-    return {
+    const node = {
       type,
       tag: element.tag,
       ...style && Object.keys(style).length > 0 ? { style } : {},
       ...changed && Object.keys(changed).length > 0 ? { dark: changed } : {}
     };
+    const { role } = element.attributes;
+    const level = /^h([1-6])$/.exec(element.tag)?.[1] ?? (role === "heading" ? element.attributes["aria-level"] ?? "2" : void 0);
+    if (type === "Text" && level && Number(level) >= 1 && Number(level) <= 6) {
+      node.heading = Number(level);
+    }
+    const label = element.attributes["aria-label"]?.trim();
+    if (label) node.label = label;
+    if (element.attributes["aria-hidden"] === "true" || role === "presentation" || role === "none" || element.tag === "img" && element.attributes.alt === "") {
+      node.hidden = true;
+    }
+    return node;
   }
   /** Inline content: runs of text, nested inline elements, and line breaks. */
   inline(content, inherited) {
@@ -266,7 +345,7 @@ var Converter = class {
       pending = [];
     };
     for (const child of content) {
-      if (typeof child === "string" || INLINE_TAGS.has(child.tag) && !this.isBlockLink(child)) {
+      if (typeof child === "string" || INLINE_TAGS.has(child.tag) && !this.isBlockLink(child) && !(child.tag === "label" && this.holdsControl(child))) {
         pending.push(child);
         continue;
       }
@@ -277,8 +356,31 @@ var Converter = class {
     flush();
     return nodes;
   }
+  /** `<input type="submit">`: a button whose label is its value. */
+  submitButton(element, passed, box, boxDark) {
+    const node = this.node("Pressable", element, box, boxDark);
+    const label = this.text(
+      { tag: "#text", attributes: {}, children: [] },
+      [element.attributes.value ?? "Submit"],
+      passed
+    );
+    if (label) node.children = [label];
+    if (element.attributes.disabled !== void 0) node.disabled = true;
+    else node.submit = this.submitter(element);
+    return node;
+  }
   element(element, inherited, flexItem = false) {
     if (SKIPPED_TAGS.has(element.tag)) return void 0;
+    if (element.attributes.form !== void 0 && CONTROL_TAGS.has(element.tag)) {
+      this.problem(`<${element.tag}> form="${element.attributes.form}"`);
+    }
+    if (element.tag === "input" && element.attributes.type?.toLowerCase() === "hidden") {
+      const { name, value, disabled } = element.attributes;
+      if (this.form && name && disabled === void 0) {
+        this.form.fields.push({ name, value: value ?? "" });
+      }
+      return void 0;
+    }
     const own = this.stylesOf(element);
     if (own.style.display === "none") return void 0;
     const passed = {
@@ -296,6 +398,15 @@ var Converter = class {
     const box = current(withoutText(own.style), passed.style.color);
     const boxDark = current(withoutText(own.dark), passed.dark.color ?? passed.style.color);
     const flex = own.style.display === "flex";
+    if (element.tag === "label" && this.holdsControl(element)) {
+      const node = this.node("View", element, box, boxDark);
+      const children = this.blocks(element.children, passed, flex);
+      if (children.length > 0) node.children = children;
+      const text = labelText(element);
+      const field = findNode(node, (child) => child.type === "TextInput");
+      if (text && field && !field.label) field.label = text;
+      return node;
+    }
     const textBox = flexItem && INLINE_TAGS.has(element.tag) && element.tag !== "a" && element.tag !== "br";
     if (BLOCK_TEXT_TAGS.has(element.tag) || textBox) {
       if (element.children.some((child) => typeof child !== "string" && !INLINE_TAGS.has(child.tag))) {
@@ -311,21 +422,76 @@ var Converter = class {
       if (!node.src) this.problem("<img> without src");
       return node;
     }
+    if (element.tag === "form") {
+      if (this.form) {
+        this.problem("<form> inside a form");
+        return void 0;
+      }
+      const { action, method, enctype, target } = element.attributes;
+      if (target && target !== "_self") this.problem(`<form> target="${target}"`);
+      const node = this.node("View", element, box, boxDark);
+      const form = {
+        action: this.formUrl(action, "<form> action") ?? "",
+        method: this.method(method, "<form>") ?? "get"
+      };
+      if (this.enctype(enctype, "<form>") === MULTIPART) form.enctype = MULTIPART;
+      this.form = { fields: [] };
+      try {
+        const children = this.blocks(element.children, passed, flex);
+        if (children.length > 0) node.children = children;
+        if (this.form.fields.length > 0) form.fields = this.form.fields;
+      } finally {
+        this.form = void 0;
+      }
+      node.form = form;
+      return node;
+    }
     if (element.tag === "input" || element.tag === "textarea") {
+      const { attributes } = element;
+      const type = element.tag === "input" ? (attributes.type ?? "text").toLowerCase() : "text";
+      if (!this.form) this.problem(`<${element.tag}> has no form to submit it`);
+      if (type === "submit") return this.submitButton(element, passed, box, boxDark);
+      if (!TEXT_INPUT_TYPES.has(type)) this.problem(`<input type="${type}">`);
       const node = this.node(
         "TextInput",
         element,
         settleLineHeight({ ...passed.style, ...box }),
         boxDark
       );
-      if (element.attributes.placeholder) node.placeholder = element.attributes.placeholder;
-      const value = element.tag === "textarea" ? textContent(element) : element.attributes.value;
+      if (attributes.name) node.name = attributes.name;
+      if (!node.label && attributes.id && this.labels.has(attributes.id)) {
+        node.label = this.labels.get(attributes.id);
+      }
+      if (type !== "text") node.inputType = type;
+      if (element.tag === "textarea") node.multiline = true;
+      if (attributes.placeholder) node.placeholder = attributes.placeholder;
+      const value = element.tag === "textarea" ? textContent(element) : attributes.value;
       if (value) node.value = value;
+      if (attributes.required !== void 0) node.required = true;
+      if (attributes.disabled !== void 0) node.disabled = true;
+      if (attributes.readonly !== void 0) node.readOnly = true;
+      const maxLength = Number(attributes.maxlength);
+      if (attributes.maxlength && Number.isInteger(maxLength) && maxLength >= 0) {
+        node.maxLength = maxLength;
+      }
       return node;
     }
-    if (element.tag === "a" || element.tag === "button") {
+    if (element.tag === "button") {
+      const type = (element.attributes.type ?? "submit").toLowerCase();
+      if (!this.form) {
+        this.problem("<button> has no link or form to submit");
+      } else if (type !== "submit") {
+        this.problem(`<button type="${type}">`);
+      }
       const node = this.node("Pressable", element, box, boxDark);
-      if (element.tag === "a") node.href = this.url(element.attributes.href);
+      node.children = this.blocks(element.children, passed, flex);
+      if (element.attributes.disabled !== void 0) node.disabled = true;
+      else node.submit = this.submitter(element);
+      return node;
+    }
+    if (element.tag === "a") {
+      const node = this.node("Pressable", element, box, boxDark);
+      node.href = this.url(element.attributes.href);
       node.children = this.blocks(element.children, passed, flex);
       return node;
     }
@@ -420,9 +586,18 @@ function parsedStylesheet(css) {
 }
 function createFarmNativeTree(html, pageUrl, stylesheets) {
   const title = /<title\b[^>]*>([\s\S]*?)<\/title>/i.exec(html)?.[1];
-  const document = parseHtml(_readFarmRenderedHtml(html));
+  const document = parseHtml(_readFarmRenderedHtml(html, { keepAriaHidden: true }));
   const page = find(document, (element) => element.attributes.id === "__farm_page__") ?? find(document, (element) => element.attributes.id === "root") ?? find(document, (element) => element.tag === "body") ?? document;
-  const converter = new Converter(pageUrl, stylesheets?.map(parsedStylesheet));
+  const labels = /* @__PURE__ */ new Map();
+  const collectLabels = (element) => {
+    if (element.tag === "label" && element.attributes.for) {
+      const text = labelText(element);
+      if (text) labels.set(element.attributes.for, text);
+    }
+    for (const child of element.children) if (typeof child !== "string") collectLabels(child);
+  };
+  collectLabels(page);
+  const converter = new Converter(pageUrl, stylesheets?.map(parsedStylesheet), labels);
   const ancestors = [];
   for (let element = page.parent; element; element = element.parent) ancestors.unshift(element);
   const inherited = { style: {}, dark: {} };
@@ -478,15 +653,15 @@ async function createFarmNativeTreeResponse(options) {
   const headers = new Headers(options.request.headers);
   headers.set("accept", "text/html");
   headers.delete("accept-encoding");
+  const submitted = options.request.method === "POST";
+  const init = submitted ? { method: "POST", headers, body: options.request.body, duplex: "half" } : { method: "GET", headers };
   const page = await options.renderPage(
-    new Request(options.request.url, {
-      method: "GET",
-      headers,
-      signal: options.request.signal
-    })
+    new Request(options.request.url, { ...init, signal: options.request.signal })
   );
+  const cookies = page.headers.getSetCookie?.() ?? [];
   const type = page.headers.get("content-type") ?? "";
-  if (page.status !== 200 || !type.includes("text/html")) return page;
+  const drawn = page.status === 200 || submitted && page.status >= 400 && page.status < 500;
+  if (!drawn || !type.includes("text/html")) return page;
   const html = await page.text();
   const pageUrl = new URL(options.request.url);
   const load = options.loadStylesheet ?? (async (href) => {
@@ -507,12 +682,13 @@ async function createFarmNativeTreeResponse(options) {
         root: { type: "View", tag: "#root" },
         unsupported: [`stylesheet "${source.href}" could not be read`]
       };
-      return new Response(JSON.stringify(tree2), {
-        headers: {
-          "Content-Type": `${FARM_NATIVE_TREE_CONTENT_TYPE}; charset=utf-8`,
-          Vary: "Accept"
-        }
+      const out2 = new Headers({
+        "Content-Type": `${FARM_NATIVE_TREE_CONTENT_TYPE}; charset=utf-8`,
+        Vary: "Accept",
+        "Cache-Control": "no-store"
       });
+      for (const cookie of cookies) out2.append("Set-Cookie", cookie);
+      return new Response(JSON.stringify(tree2), { headers: out2 });
     }
     stylesheets.push(css);
   }
@@ -520,11 +696,12 @@ async function createFarmNativeTreeResponse(options) {
   const out = new Headers({
     "Content-Type": `${FARM_NATIVE_TREE_CONTENT_TYPE}; charset=utf-8`,
     Vary: "Accept",
-    "Cache-Control": page.headers.get("cache-control") ?? "no-store"
+    // The answer to a POST is that submission's result, never a cacheable page.
+    "Cache-Control": (submitted ? void 0 : page.headers.get("cache-control")) ?? "no-store"
   });
-  for (const cookie of page.headers.getSetCookie?.() ?? []) out.append("Set-Cookie", cookie);
+  for (const cookie of cookies) out.append("Set-Cookie", cookie);
   return new Response(options.request.method === "HEAD" ? null : JSON.stringify(tree), {
-    status: 200,
+    status: page.status,
     headers: out
   });
 }