Skip to content

Commit

Permalink
Merge pull request #694 from adopted-ember-addons/named-exports
Browse files Browse the repository at this point in the history
Provide helpers named exports for Template Tag support
  • Loading branch information
SergeAstapov authored Oct 30, 2024
2 parents 029eb6e + 51653d1 commit 2f23bd6
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 1 deletion.
43 changes: 42 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,26 @@ If you are only accessing keys in an object that is only one level deep, you do
</form>
```

### Template Tag support

For usage in [Template Tag Format](https://guides.emberjs.com/release/components/template-tag-format/),
this addon provides `changesetGet` and `changesetSet` named exports:

```gjs
import { changesetGet, changesetSet } from 'ember-changeset';
export default <template>
<form>
<FormInput
id="first-name"
type="text"
@value={{changesetGet @changeset "person.firstName"}}
@onChange={{changesetSet @changeset "person.firstName"}}
/>
</form>
</template>
```

## Limiting which keys dirty the changeset

In order to limit the changes made to your changeset and it's associated `isDirty` state, you can pass in a list of `changesetKeys`.
Expand All @@ -226,7 +246,7 @@ let changeset = Changeset(model, validatorFn, validationMap, { skipValidate: tru

Be sure to call `validate()` on the `changeset` before saving or committing changes.

## Types
## TypesScript

```ts
import Component from '@glimmer/component';
Expand Down Expand Up @@ -256,6 +276,27 @@ Other available types include the following. Please put in a PR if you need more
import type { ValidationResult, ValidatorMapFunc, ValidatorAction } from 'ember-changeset/types';
```

This project ships [Glint](https://github.com/typed-ember/glint) types,
which allow you when using TypeScript to get strict type checking in your templates.

Unless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates
(via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)),
Glint needs a [Template Registry](https://typed-ember.gitbook.io/glint/using-glint/ember/template-registry)
that contains entries for the template helper provided by this addon.
To add these registry entries automatically to your app, you just need to import `ember-changeset/template-registry`
from somewhere in your app. When using Glint already, you will likely have a file like
`types/glint.d.ts` where you already import glint types, so just add the import there:

```ts
import '@glint/environment-ember-loose';
import type ChangesetRegistry from 'ember-changeset/template-registry';
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends ChangesetRegistry, /* other addon registries */ {
// local entries
}
}
```

## Alternative Changeset

Enabled in 4.1.0. Experimental and subject to changes until 5.0.
Expand Down
2 changes: 2 additions & 0 deletions addon/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
} from '@embroider/macros';

export { ValidatedChangeset };
export { default as changesetGet } from './helpers/changeset-get';
export { default as changesetSet } from './helpers/changeset-set';

const CHANGES = '_changes';
const PREVIOUS_CONTENT = '_previousContent';
Expand Down

0 comments on commit 2f23bd6

Please sign in to comment.