use for Symbols for getFormField preventing loading custom input components from pre-build libs

[xmlking]

Describe the bug

I have a monrepo where custom input component is in a package and my webapp is in other package, I want to pass context to the child component loaded from external package/lib which accessing parent context with const { errors } = getFormField();

Path: apps/myapp/ apps/myapp/src/routes/+page.svelte

<Form.Field form={superform} name="content">
  <Form.Control let:attrs>
    <Form.Label class="label">Writing Tools</Form.Label>
    <SmartTextarea
      class="textarea data-[fs-error]:input-error"
      {...attrs}
      bind:value={$form.content}
      {...$constraints.content}
      stream={true}
      placeholder="Write an email to my bank asking them to raise my credit limit from $1,000 to $10,000."
      context="I'm a long-standing customer."
    />
  </Form.Control>
  <Form.Description class="sr-only"
    >Put writing1 description here</Form.Description
  >
  <Form.FieldErrors class="data-[fs-error]:text-error-500" />
</Form.Field>

Path:packages/smart/src/components/smart-textarea.svelte

getting this error when I pnpm run build and pnpm run preview

 Unable to find `Form.Field` context. Did you forget to wrap the component in a `Form.Field`?

The code works without error when running on dev mode pnpm run dev

Reproduction

chaild component https://github.com/xmlking/spectacular/blob/d50f414b92e4fc721b9cccb8de569d6588b85c72/packages/smart/src/components/smart-textarea.svelte#L78

parent component https://github.com/xmlking/spectacular/blob/d50f414b92e4fc721b9cccb8de569d6588b85c72/apps/console/src/routes/(app)/ai/writing/%2Bpage.svelte#L70

Logs

Uncaught (in promise) Error: Unable to find `Form.Field` context. Did you forget to wrap the component in a `Form.Field`?

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 15.03 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.10.0 - /opt/homebrew/bin/node
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: 9.14.2 - /opt/homebrew/bin/pnpm
    bun: 1.1.27 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 131.0.6778.86
    Chrome Canary: 133.0.6853.0
    Edge: 131.0.2903.63
    Safari: 18.1.1

Severity

annoyance

[huntabyte]

The first issue I see is you that are running formsnap@2.0.0-next on the package and then formsnap@1.x in the app. I'll work on updating the internals so that differing versions of 2.x will be compatible with one another. In the meantime, if they run the same version all will work as expected.

Also, I'm still working on documentation for formsnap@next, but getFormField now returns a class instance with various properties, so you can't destructure but don't need to subscribe.

const field = getFormField()

console.log(field.errors)
console.log(field.constraints)
// etc.

[huntabyte]

Going to close this now, docs will be coming soon!