Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tells you where to import from #171

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Tells you where to import from #171

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16d0ccd
tells you where to import from
evoactivity Jul 23, 2023
ea6f5d4
Add section for template tag usage
evoactivity Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/typescript/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ This addon is written in TypeScript, and strives to give TypeScript users a firs
> Type changes during minor upgrades may be considered breaking changes to some.
> The goal, is to follow the advice of [Semantic Versioning for TypeScript Types](https://www.semver-ts.org/) eventually. Until noted in the Changelog that our TypeScript types fall under SemVer, consider type changes as "bugfixes" for patch releases.


## Usage with classic templates (hbs)

All the components, which are `<HeadlessForm>` as well as those [yielded from it](./usage), have strict Glint types. In case you are already using _strict mode templates_ via [ember-template-imports](https://github.com/ember-template-imports/ember-template-imports), you only need to import the component and you are ready to go. For the more likely case of using classic `.hbs` templates, Glint requires a template registry to be set up, that declares a mapping of component _names_ to their types. This addon follows the [recommendations for Glint-enabled addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons), so add the addon's provided registry to your app's own registry as follows:
All the components, which are `<HeadlessForm>` as well as those [yielded from it](./usage), have strict Glint types. In case you are already using _strict mode templates_ via [ember-template-imports](https://github.com/ember-template-imports/ember-template-imports), you only need to import the component from `ember-headless-form/components/headless-form` and you are ready to go. For the more likely case of using classic `.hbs` templates, Glint requires a template registry to be set up, that declares a mapping of component _names_ to their types. This addon follows the [recommendations for Glint-enabled addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons), so add the addon's provided registry to your app's own registry as follows:
evoactivity marked this conversation as resolved.
Show resolved Hide resolved

```ts
import '@glint/environment-ember-loose';
Expand All @@ -28,6 +29,7 @@ declare module '@glint/environment-ember-loose/registry' {

The same applies for any additional packages of this project if in use, like [`ember-headless-form-yup`](./validation/yup) or [`ember-headless-form-changeset`](./validation/ember-changeset).


## Typing of form data

This addon's types also ensure that your form data matches the form fields you use in your templates. As such it is recommended that you type your form data in a strict and explicit way. Make sure to mark properties as optional, if they are not guaranteed to be filled out initially.
Expand Down