attaform 0.17.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "attaform",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "files": [
@@ -41,6 +41,9 @@
       "types": "./dist/vite.d.mts",
       "import": "./dist/vite.mjs"
     },
+    "./devtools-panel": {
+      "default": "./dist/runtime/components/AttaformDevtoolsPanel.vue"
+    },
     "./transforms": {
       "types": "./dist/transforms.d.mts",
       "import": "./dist/transforms.mjs"
@@ -83,6 +86,9 @@
   ],
   "license": "MIT",
   "type": "module",
+  "dependencies": {
+    "magic-string": "^0.30.21"
+  },
   "devDependencies": {
     "@commitlint/cli": "^21.0.1",
     "@commitlint/config-conventional": "^21.0.1",
@@ -100,9 +106,11 @@
     "@types/node": "^25.6.0",
     "@typescript-eslint/eslint-plugin": "^8.59.0",
     "@typescript-eslint/parser": "^8.59.0",
+    "@nuxt/devtools-kit": "^3.2.0",
     "@vitejs/plugin-vue": "^6.0.6",
     "@vitest/coverage-v8": "^4.1.5",
     "@vue/compiler-core": "^3.5.33",
+    "@vue/compiler-sfc": "^3.5.33",
     "@vue/devtools-api": "^8.1.1",
     "@vue/language-server": "^3.2.7",
     "@vue/server-renderer": "^3.5.33",
@@ -139,7 +147,9 @@
     "zod-v3": "npm:zod@^3.24"
   },
   "peerDependencies": {
+    "@nuxt/devtools-kit": "^2.0.0 || ^3.0.0",
     "@vue/compiler-core": ">=3.5.0",
+    "@vue/compiler-sfc": ">=3.5.0",
     "@vue/devtools-api": "^6.6.0 || ^7.0.0",
     "lodash-es": ">= 4.0.0",
     "nuxt": ">=3.0.0",
@@ -148,6 +158,9 @@
     "zod": ">=3.0.0"
   },
   "peerDependenciesMeta": {
+    "@nuxt/devtools-kit": {
+      "optional": true
+    },
     "@vue/devtools-api": {
       "optional": true
     },
@@ -175,13 +188,14 @@
     "typecheck": "tsc --noEmit",
     "prepack:watch": "chokidar 'src/**/*' -c 'pnpm prepack' --initial",
     "release": "pnpm check && pnpm version patch && pnpm prepack && pnpm publish && git push --follow-tags",
-    "test": "vitest run",
+    "test": "node scripts/run-with-webstorage-flag.mjs vitest run",
     "test:types": "pnpm dev:prepare && vue-tsc --noEmit && cd apps/site && vue-tsc --noEmit",
-    "test:watch": "vitest watch",
-    "bench": "vitest bench --run",
+    "test:watch": "node scripts/run-with-webstorage-flag.mjs vitest watch",
+    "bench": "node scripts/run-with-webstorage-flag.mjs vitest bench --run",
     "check:size": "pnpm prepack && size-limit",
-    "check:coverage": "vitest run --coverage",
+    "check:coverage": "node scripts/run-with-webstorage-flag.mjs vitest run --coverage",
     "check:bench": "node scripts/check-bench.mjs",
+    "check:bundled-types": "node scripts/check-bundled-types.mjs",
     "check:site": "pnpm dev:prepare && pnpm --filter attaform-site typecheck",
     "version": "node scripts/promote-changelog.mjs && (node scripts/generate-release-notes.mjs || echo '[version] release-notes step failed; continuing') && git add CHANGELOG.md RELEASES.md"
   }

package/dist/shared/attaform.B1jvxsOF.d.mts

@@ -1,156 +0,0 @@
-import { G as GenericForm, F as FormKey, d as UseFormReturnType, R as RegisterValue } from './attaform.C_5aB6EQ.mjs';
-import { Ref } from 'vue';
-
-/**
- * Access an existing form from a descendant component without passing
- * it through props. Counterpart to `useForm` — `useForm` creates and
- * provides; `injectForm` looks up via Vue's inject mechanism.
- *
- * Two ways to call it:
- *
- * ```ts
- * // Reach the nearest ancestor's anonymous useForm() call.
- * const form = injectForm<SignupShape>()
- *
- * // Reach a specific form by its key — works from anywhere in the app.
- * const cart = injectForm<CartShape>('cart')
- * ```
- *
- * Resolution rules (no-key form):
- * - Closest ambient ancestor wins.
- * - Only anonymous `useForm()` (no `key`) fills the ambient slot;
- *   keyed forms are reachable only via `injectForm(key)`.
- * - Inherits the resolved ancestor's `formInstanceId`.
- *
- * Resolution rules (keyed form): registry lookup by string key,
- * independent of component-tree position.
- *
- * Returns `null` when no matching form exists (no ambient ancestor, or
- * the named key isn't registered). A dev-mode warning points at the
- * call site to help diagnose typos. Always narrow before using:
- *
- * ```ts
- * const form = injectForm<Shape>('signup')
- * if (!form) return
- * form.register('email')
- * ```
- *
- * Pass the `Form` generic explicitly — Vue's provide/inject erases
- * generics, so the library can't recover the shape automatically.
- *
- * The form is kept alive for this component's lifetime; once every
- * consumer unmounts, the form is cleaned up automatically.
- */
-declare function injectForm<Form extends GenericForm, GetValueFormType extends GenericForm = Form>(key?: FormKey): UseFormReturnType<Form, GetValueFormType> | null;
-
-/**
- * Re-bind a parent's `v-register` onto an inner native element. Use
- * inside a component that wraps a single form field whose root is
- * NOT the input itself (e.g. a labelled-row that renders `<label>`
- * around the input).
- *
- * ```vue
- * <!-- Parent -->
- * <MyInput v-register="form.register('email')" />
- *
- * <!-- MyInput.vue -->
- * <script setup lang="ts">
- *   import { useRegister } from 'attaform'
- *   const rv = useRegister()
- *   // rv.path / rv.segments / rv.formKey / rv.formInstanceId / rv.innerRef
- *   // are all reachable directly — no `.value` unwrap.
- * </script>
- *
- * <template>
- *   <label class="field">
- *     <span>Email</span>
- *     <input v-register="rv" />
- *   </label>
- * </template>
- * ```
- *
- * Returns a hybrid Proxy: it answers `__v_isRef` / `.value` like a
- * Vue `Ref<RegisterValue | undefined>` (so templates auto-unwrap
- * correctly and `v-register="rv"` feeds the underlying RV to the
- * directive — preserving the directive's path-migration diff across
- * renders), AND every other property read pierces to the captured
- * RV's field (so `rv.path` works directly in script setup). Reads
- * inside reactive scopes (`computed` / `watchEffect`) track the
- * underlying `shallowRef`, so `rv.path` re-runs when the parent
- * rebinds to a different path.
- *
- * Unbound state: when the parent didn't pass `v-register`, every
- * piercing read returns `undefined` at runtime, and the return type
- * surfaces this honestly as `UseRegisterReturn<V> | undefined`.
- * Consumers defend with optional chaining (`rv?.formKey`,
- * `rv?.segments`); the directive accepts `undefined` peacefully (its
- * binding value type is already `RegisterValue<V> | undefined`), so
- * `v-register="rv"` works whether or not a parent has bound. The
- * composable's `onMounted` warn fires once per instance to surface
- * the misuse case at runtime.
- *
- * Diagnostic: in dev mode, a single `console.warn` fires per instance
- * at `onMounted` if the captured value is still `undefined` — by then
- * the parent has had its full mount lifecycle to bind, so a missing
- * binding is conclusive misuse. The warn does NOT fire on every read
- * of the proxy, and is intentionally silent under SSR
- * (`renderToString` skips `onMounted`); the CSR hydration pass
- * surfaces the same diagnostic without double-counting through Nuxt's
- * `dev:ssr-logs` channel.
- *
- * When the wrapper's root IS the input itself, Vue's attribute
- * fallthrough handles the binding and `useRegister` is unnecessary.
- * For wrappers that bind multiple fields (compound forms), use
- * `injectForm<Form>(key?)` and call `ctx.register(...)` directly.
- */
-
-/**
- * Return type of `useRegister()`. Hybrid of `RegisterValue<V>` (so
- * `rv.path` / `rv.segments` / `rv.formKey` etc. work directly in
- * script setup) and `Ref<RegisterValue<V> | undefined>` (so Vue's
- * template auto-unwrap surfaces the underlying RV to `v-register`
- * and the directive's path-migration diff sees the real RV across
- * renders).
- *
- * The two surfaces don't clash at the type level: `RegisterValue`
- * doesn't carry a `value` field, and `Ref<T>`'s `value: T` becomes
- * the hybrid's only `.value`. Older code that read `rv.value?.path`
- * keeps working; new code can write `rv.path` directly.
- */
-type UseRegisterReturn<V = unknown> = RegisterValue<V> & Ref<RegisterValue<V> | undefined>;
-declare function useRegister<V = unknown>(): UseRegisterReturn<V> | undefined;
-
-/**
- * Stable identifiers for library-emitted `ValidationError` codes.
- *
- * Convention: `<scope>:<kebab-case-identifier>`. Three scopes are
- * recognised by the library:
- *
- * - `atta:` — emitted by the framework-agnostic core (this map).
- * - `zod:` — emitted by the Zod adapter; computed inline from
- *   `issue.code` (e.g. `zod:too_small`). No enum here because
- *   Zod's code list evolves.
- * - consumer-defined — anything the consumer's backend / app stamps
- *   onto a `ValidationError` (via the `parseApiErrors` wire payload
- *   or `setFieldErrors` directly). Pick a scope (`api:`, `auth:`,
- *   etc.) and stay consistent.
- *
- * Use these constants in tests and error-routing UI:
- *
- * ```ts
- * if (error.code === AttaformErrorCode.NoValueSupplied) {
- *   // user hasn't filled this field
- * }
- * ```
- */
-declare const AttaformErrorCode: {
-    /** A required field is in the blank set — user hasn't supplied a value. */
-    readonly NoValueSupplied: "atta:no-value-supplied";
-    /** The schema adapter's `validateAtPath` threw synchronously. */
-    readonly AdapterThrew: "atta:adapter-threw";
-    /** The supplied path didn't resolve to any node in the schema. */
-    readonly PathNotFound: "atta:path-not-found";
-};
-type AttaformErrorCode = (typeof AttaformErrorCode)[keyof typeof AttaformErrorCode];
-
-export { AttaformErrorCode as A, injectForm as i, useRegister as u };