@modyra/solid

Solid binding for the Modyra form engine: solidReactivity() implements the core's reactive contract on Solid's native primitives (createSignal/createMemo/createEffect), so form state participates in Solid's fine-grained reactivity directly.

Headless. This package renders no markup — you bring your own. Modyra's DOM conformance suites (anatomy, state matrix, renderer equivalence) check the three adapters that do render; they do not apply here, because there is no part to find and no rendered state to compare. What this package promises — value, validation, error and lifecycle semantics — is checked by its own suites and the shared reactivity capability tests. Accessibility and theming are yours; @modyra/widgets exports the same projections, id policy and class vocabulary the rendering adapters use, so your markup can be built from the contract rather than guessed.

npm install @modyra/solid

import { createSolidForm, field, required } from "@modyra/solid";

const form = createSolidForm({ email: field("", [required()]) });
// form.f.email.value() / errors() track inside createMemo/createEffect/JSX

What's included

• createSolidForm(schema, options?) — typed form on Solid's reactivity.
• useSolidForm(schema, options?) — the same, destroyed automatically when the current owner (component or createRoot) is disposed.
• The full core API — field, group, array, serverValidator, crossField, drafts, undo/redo… re-exported from @modyra/core.

Running in plain Node

solid-js's package.json maps the default Node import condition to a non-reactive SSR stub (dist/server.js — signals/effects run once and never notify). Any Node process that needs real reactivity — tests, a server-rendered handler, a script — must run with --conditions=browser:

node --conditions=browser --test my-test.mjs

This package's own npm test already does this (see package.json).

Headless widgets

useMdyField/useMdySelect wrap @modyra/widgets' framework-agnostic controllers the same way @modyra/vue does — state and view exposed as getters over Solid signals, so a createMemo/JSX expression reading api.state.value tracks it natively:

import { useMdyField } from "@modyra/solid";

const email = useMdyField(form.f.email, { widgetId: "email", inputType: "email" });
// email.state.value / .invalid / .touched, email.view.parts.input.attributes

Scope

This package is the reactivity bridge and the headless widgets bridge — the same two layers @modyra/vue and @modyra/react are built on. It ships no components: Solid's own primitives and your design system supply the markup.

Every core primitive — typed fields, arrays, async and server validation, drafts, undo and redo — works through createSolidForm / useSolidForm. A runnable example lives in examples/solid, and headless recipes covers pairing it with Kobalte or shadcn-solid.

License

MIT © Lorenzo Muscherà