@zoijs/forms 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to `@zoijs/forms` are documented here.
 
+## 0.1.2 — 2026-10-05
+
+### Documentation
+- **CDN guidance uses exact, integrity-pinned URLs (SEC-7).** The README's no-install example
+  imported a floating `esm.sh/@zoijs/forms@0.1` URL; it now maps `@zoijs/core` and `@zoijs/forms` to
+  exact-version jsDelivr files with integrity hashes in an import map and imports by name. README
+  only — no code change.
+
+## 0.1.1 — 2026-06-25
+
+Consistency hardening — **non-breaking, additive only.**
+
+- Added reader-style accessors that match the rest of the ecosystem
+  (`data()` / `loading()` / `value(name)` …): **`all()`** (all values),
+  **`allErrors()`** (all errors), **`allTouched()`** (all touched flags), and
+  **`isTouched(name)`** (one field's touched flag). All reactive inside a binding.
+- The raw reactive state `values` / `errors` / `touched` is **kept** for backward
+  compatibility (now documented as advanced/direct access). No existing code breaks.
+- Docs and the login example updated to prefer the reader methods.
+- No behavior changes, no new form features, no core changes.
+
 ## 0.1.0 — 2026-06-25
 
 Initial release of the tiny, native-forms-first helper for Zoijs.

package/README.md

@@ -2,12 +2,12 @@
 
 # @zoijs/forms
 
-**A tiny, native-forms-first helper for [Zoijs](https://zoijs.com).** Reactive values, errors, and touched state — without a form framework.
+**A tiny, native-forms-first helper for [Zoijs](https://zoijs.dev).** Reactive values, errors, and touched state — without a form framework.
 
 [![npm](https://img.shields.io/npm/v/@zoijs/forms.svg)](https://www.npmjs.com/package/@zoijs/forms)
 [![license](https://img.shields.io/npm/l/@zoijs/forms.svg)](LICENSE)
 
-[Website](https://zoijs.com) · [Documentation](https://zoijs.dev) · [Core package](https://www.npmjs.com/package/@zoijs/core)
+[Documentation](https://zoijs.dev) · [Core package](https://www.npmjs.com/package/@zoijs/core)
 
 </div>
 
@@ -27,10 +27,12 @@ You can learn the whole thing in about 5 minutes.
 npm install @zoijs/core @zoijs/forms
 ```
 
-Or with no install, from a CDN:
+Or with no install, from a CDN: in an import map, point "@zoijs/core" and "@zoijs/forms" at
+**exact-version** jsDelivr file URLs with integrity hashes, then import by name (so every
+package shares one core). See the [CDN guide](https://zoijs.dev/installation#from-a-cdn).
 
 ```js
-import { form } from "https://esm.sh/@zoijs/forms";
+import { form } from "@zoijs/forms";
 ```
 
 ## What `form()` does
@@ -43,34 +45,48 @@ import { form } from "@zoijs/forms";
 
 const login = form({ email: "", password: "" });
 
-login.values.get();                 // { email: "", password: "" }
+login.all();                        // { email: "", password: "" } — all values (reactive)
 login.value("email");               // one field (reactive)
 login.set("email", "a@b.com");      // update one field
 login.error("email");               // one field's error (reactive)
 login.setError("email", "Required");
 login.clearError("email");
+login.isTouched("email");           // has this field been touched? (reactive)
 login.touch("email");               // mark touched (e.g. on blur)
 login.reset();                      // restore initial values, clear errors + touched
 ```
 
+These reader methods (`all()`, `value()`, `error()`, `isTouched()`, …) match the
+rest of the ecosystem — the same shape as `data()`, `loading()`, and `pending()` —
+so once you've learned one Zoijs package, the others read the same way.
+
 ## The API
 
 | Member | What it does |
 |---|---|
 | `form(initialValues, options?)` | Create a form helper |
-| `values` | Reactive state of all values — `values.get()` returns the object |
+| `all()` | Read all values (reactive) |
 | `value(name)` | Read one field's value (reactive) |
 | `set(name, value)` | Update one field |
-| `errors` | Reactive state of all errors |
+| `allErrors()` | Read all errors (reactive) |
 | `error(name)` | Read one field's error (reactive) |
 | `setError(name, message)` | Set one field's error |
 | `clearError(name)` | Clear one field's error |
-| `touched` | Reactive state of touched fields |
+| `allTouched()` | Read all touched flags (reactive) |
+| `isTouched(name)` | Has one field been touched? (reactive) |
 | `touch(name)` | Mark a field touched |
 | `reset()` | Restore initial values; clear errors + touched |
 | `validate(rules?)` | Run rules, set errors, return whether valid |
 | `handleSubmit(fn)` | Wrap a submit handler: prevents reload, calls `fn(values)` |
 
+### Advanced: raw state access
+
+The underlying reactive state is also exposed as `values`, `errors`, and `touched`
+(each a `createState`-shaped `{ get, set, peek }`). Prefer the reader methods above;
+reach for the raw state only when you need direct access — e.g. `login.values.peek()`
+to read without subscribing. These remain for backward compatibility and won't be
+removed in 0.x.
+
 ## Login form example
 
 Use native inputs — `value` reads from the form, `oninput` writes back, `onblur`
@@ -141,7 +157,7 @@ html`
   <form onsubmit=${async (e) => {
     e.preventDefault();
     if (!login.validate(rules)) return;
-    await submitLogin.run(login.values.get());
+    await submitLogin.run(login.all());
   }}>
     ...
     <button disabled=${() => submitLogin.pending()}>Sign in</button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zoijs/forms",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A tiny, native-forms-first helper for Zoijs: reactive values, errors, and touched state. No JSX, no build step.",
   "type": "module",
   "main": "src/index.js",
@@ -21,9 +21,9 @@
   "engines": {
     "node": ">=18"
   },
-  "author": "Zoijs contributors (https://zoijs.com)",
+  "author": "Zoijs contributors (https://zoijs.dev)",
   "license": "MIT",
-  "homepage": "https://zoijs.com",
+  "homepage": "https://zoijs.dev",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Zoijs/zoijs.git",
@@ -49,7 +49,7 @@
     "test": "node --test --import ./tests/setup-dom.js",
     "test:types": "tsc --noEmit -p tsconfig.json",
     "test:browser": "playwright test",
-    "dev": "npx serve -l 3700 .."
+    "dev": "node ../scripts/test-server.mjs .. 3700"
   },
   "devDependencies": {
     "@playwright/test": "^1.61.1",

package/src/index.d.ts

@@ -3,12 +3,11 @@
 // Authored in plain JavaScript; these declarations add editor autocomplete and
 // optional type-checking without requiring TypeScript.
 
-/** A reactive value (same shape as core's createState). */
-export interface State<T> {
-  get(): T;
-  set(value: T): void;
-  peek(): T;
-}
+// Source State from @zoijs/core (re-exported for convenience) so the raw
+// values/errors/touched shape can never drift from `createState`. Other packages
+// import core types the same way (e.g. @zoijs/router imports TemplateResult).
+import type { State } from "@zoijs/core";
+export type { State };
 
 /** A single field rule: return a message when invalid, or a falsy value when valid. */
 export type Rule<V = any, Values = Record<string, any>> = (
@@ -27,30 +26,49 @@ export interface FormOptions<V> {
 
 /** A tiny reactive form helper created by {@link form}. */
 export interface Form<V extends Record<string, any>> {
-  /** All values (reactive). `values.get()` returns the whole object. */
-  values: State<V>;
+  // --- values ---
+  /** All values (reactive). Reader-style, like `data()` / `loading()`. */
+  all(): V;
   /** Read one field's value (reactive). */
   value<K extends keyof V>(name: K): V[K];
   /** Update one field's value. */
   set<K extends keyof V>(name: K, value: V[K]): void;
+
+  // --- errors ---
   /** All errors keyed by field name (reactive). */
-  errors: State<Partial<Record<keyof V, string>>>;
+  allErrors(): Partial<Record<keyof V, string>>;
   /** Read one field's error (reactive), or `undefined`. */
   error(name: keyof V): string | undefined;
   /** Set one field's error message. */
   setError(name: keyof V, message: string): void;
   /** Clear one field's error. */
   clearError(name: keyof V): void;
-  /** Which fields have been touched (reactive). */
-  touched: State<Partial<Record<keyof V, boolean>>>;
+
+  // --- touched ---
+  /** All touched flags keyed by field name (reactive). */
+  allTouched(): Partial<Record<keyof V, boolean>>;
+  /** Whether one field has been touched (reactive). */
+  isTouched(name: keyof V): boolean;
   /** Mark a field touched (e.g. on blur). */
   touch(name: keyof V): void;
+
+  // --- lifecycle ---
   /** Restore initial values and clear errors + touched. */
   reset(): void;
   /** Run rules (or the option rules), set errors, and return whether valid. */
   validate(rules?: Rules<V>): boolean;
   /** Wrap a submit handler: prevents the default reload and calls `fn(values)`. */
   handleSubmit(fn: (values: V, event?: Event) => unknown): (event?: Event) => unknown;
+
+  // --- raw reactive state (advanced / backward-compatible) ---
+  // Prefer all() / allErrors() / allTouched() above. These remain for direct
+  // state access (e.g. `values.peek()`), and won't be removed in 0.x.
+  /** Raw values state. Advanced — prefer {@link Form.all}. */
+  values: State<V>;
+  /** Raw errors state. Advanced — prefer {@link Form.allErrors}. */
+  errors: State<Partial<Record<keyof V, string>>>;
+  /** Raw touched state. Advanced — prefer {@link Form.allTouched}. */
+  touched: State<Partial<Record<keyof V, boolean>>>;
 }
 
 /**

package/src/index.js

@@ -88,18 +88,35 @@ export function form(initialValues = {}, options = {}) {
     return fn(values.get(), event);
   };
 
+  // Reader-style accessors for whole-form state, matching the rest of the
+  // ecosystem (data(), loading(), value(name), …). Reactive inside a binding.
+  const all = () => values.get();
+  const allErrors = () => errors.get();
+  const allTouched = () => touched.get();
+  const isTouched = (name) => !!touched.get()[name];
+
   return {
-    values,
+    // values
+    all,
     value,
     set,
-    errors,
+    // errors
+    allErrors,
     error,
     setError,
     clearError,
-    touched,
+    // touched
+    allTouched,
+    isTouched,
     touch,
+    // lifecycle
     reset,
     validate,
     handleSubmit,
+    // raw reactive state — advanced / backward-compatible. Prefer all() /
+    // allErrors() / allTouched() above; these stay for direct state access.
+    values,
+    errors,
+    touched,
   };
 }