22 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | {{content-for "body-footer"}} {{content-for "test-body-footer"}}
34 |
35 |
36 |
--------------------------------------------------------------------------------
/test-app/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (environment) {
4 | const ENV = {
5 | modulePrefix: 'test-app',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'history',
9 | EmberENV: {
10 | EXTEND_PROTOTYPES: false,
11 | FEATURES: {
12 | // Here you can enable experimental features on an ember canary build
13 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
14 | },
15 | },
16 |
17 | APP: {
18 | // Here you can pass flags/options to your application instance
19 | // when it is created
20 | },
21 | };
22 |
23 | if (environment === 'development') {
24 | // ENV.APP.LOG_RESOLVER = true;
25 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
26 | // ENV.APP.LOG_TRANSITIONS = true;
27 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
28 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
29 | }
30 |
31 | if (environment === 'test') {
32 | // Testem prefers this...
33 | ENV.locationType = 'none';
34 |
35 | // keep test console output quieter
36 | ENV.APP.LOG_ACTIVE_GENERATION = false;
37 | ENV.APP.LOG_VIEW_LOOKUPS = false;
38 |
39 | ENV.APP.rootElement = '#ember-testing';
40 | ENV.APP.autoboot = false;
41 | }
42 |
43 | if (environment === 'production') {
44 | // here you can enable a production-specific feature
45 | }
46 |
47 | return ENV;
48 | };
49 |
--------------------------------------------------------------------------------
/test-app/tests/helpers/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | setupApplicationTest as upstreamSetupApplicationTest,
3 | setupRenderingTest as upstreamSetupRenderingTest,
4 | setupTest as upstreamSetupTest,
5 | type SetupTestOptions,
6 | } from 'ember-qunit';
7 |
8 | // This file exists to provide wrappers around ember-qunit's
9 | // test setup functions. This way, you can easily extend the setup that is
10 | // needed per test type.
11 |
12 | function setupApplicationTest(hooks: NestedHooks, options?: SetupTestOptions) {
13 | upstreamSetupApplicationTest(hooks, options);
14 |
15 | // Additional setup for application tests can be done here.
16 | //
17 | // For example, if you need an authenticated session for each
18 | // application test, you could do:
19 | //
20 | // hooks.beforeEach(async function () {
21 | // await authenticateSession(); // ember-simple-auth
22 | // });
23 | //
24 | // This is also a good place to call test setup functions coming
25 | // from other addons:
26 | //
27 | // setupIntl(hooks, 'en-us'); // ember-intl
28 | // setupMirage(hooks); // ember-cli-mirage
29 | }
30 |
31 | function setupRenderingTest(hooks: NestedHooks, options?: SetupTestOptions) {
32 | upstreamSetupRenderingTest(hooks, options);
33 |
34 | // Additional setup for rendering tests can be done here.
35 | }
36 |
37 | function setupTest(hooks: NestedHooks, options?: SetupTestOptions) {
38 | upstreamSetupTest(hooks, options);
39 |
40 | // Additional setup for unit tests can be done here.
41 | }
42 |
43 | export { setupApplicationTest, setupRenderingTest, setupTest };
44 |
--------------------------------------------------------------------------------
/.release-plan.json:
--------------------------------------------------------------------------------
1 | {
2 | "solution": {
3 | "ember-changeset": {
4 | "impact": "major",
5 | "oldVersion": "4.2.0",
6 | "newVersion": "5.0.0",
7 | "tagName": "latest",
8 | "constraints": [
9 | {
10 | "impact": "major",
11 | "reason": "Appears in changelog section :boom: Breaking Change"
12 | },
13 | {
14 | "impact": "minor",
15 | "reason": "Appears in changelog section :rocket: Enhancement"
16 | },
17 | {
18 | "impact": "patch",
19 | "reason": "Appears in changelog section :house: Internal"
20 | }
21 | ],
22 | "pkgJSONPath": "./package.json"
23 | }
24 | },
25 | "description": "## Release (2025-04-27)\n\n* ember-changeset 5.0.0 (major)\n\n#### :boom: Breaking Change\n* `ember-changeset`\n * [#706](https://github.com/adopted-ember-addons/ember-changeset/pull/706) Drop support for Ember.js versions below 4.8 ([@SergeAstapov](https://github.com/SergeAstapov))\n\n#### :rocket: Enhancement\n* `ember-changeset`\n * [#705](https://github.com/adopted-ember-addons/ember-changeset/pull/705) Convert addon to v2 format ([@SergeAstapov](https://github.com/SergeAstapov))\n\n#### :house: Internal\n* `ember-changeset`\n * [#703](https://github.com/adopted-ember-addons/ember-changeset/pull/703) Bump pnpm to v10 ([@SergeAstapov](https://github.com/SergeAstapov))\n * [#701](https://github.com/adopted-ember-addons/ember-changeset/pull/701) Bump release-plan to v0.16 ([@SergeAstapov](https://github.com/SergeAstapov))\n\n#### Committers: 1\n- Sergey Astapov ([@SergeAstapov](https://github.com/SergeAstapov))\n"
26 | }
27 |
--------------------------------------------------------------------------------
/RELEASE.md:
--------------------------------------------------------------------------------
1 | # Release Process
2 |
3 | Releases in this repo are mostly automated using [release-plan](https://github.com/embroider-build/release-plan/). Once you label all your PRs correctly (see below) you will have an automatically generated PR that updates your CHANGELOG.md file and a `.release-plan.json` that is used to prepare the release once the PR is merged.
4 |
5 | ## Preparation
6 |
7 | Since the majority of the actual release process is automated, the remaining tasks before releasing are:
8 |
9 | - correctly labeling **all** pull requests that have been merged since the last release
10 | - updating pull request titles so they make sense to our users
11 |
12 | Some great information on why this is important can be found at [keepachangelog.com](https://keepachangelog.com/en/1.1.0/), but the overall
13 | guiding principle here is that changelogs are for humans, not machines.
14 |
15 | When reviewing merged PR's the labels to be used are:
16 |
17 | - breaking - Used when the PR is considered a breaking change.
18 | - enhancement - Used when the PR adds a new feature or enhancement.
19 | - bug - Used when the PR fixes a bug included in a previous release.
20 | - documentation - Used when the PR adds or updates documentation.
21 | - internal - Internal changes or things that don't fit in any other category.
22 |
23 | **Note:** `release-plan` requires that **all** PRs are labeled. If a PR doesn't fit in a category it's fine to label it as `internal`
24 |
25 | ## Release
26 |
27 | Once the prep work is completed, the actual release is straight forward: you just need to merge the open [Plan Release](https://github.com/adopted-ember-addons/ember-changeset/pulls?q=is%3Apr+is%3Aopen+%22Prepare+Release%22+in%3Atitle) PR
28 |
--------------------------------------------------------------------------------
/test-app/app/components/validated-form.js:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { tracked } from '@glimmer/tracking';
4 | import { ValidatedChangeset } from 'ember-changeset';
5 |
6 | import { object, string } from 'yup';
7 |
8 | const FormSchema = object({
9 | cid: string().required(),
10 | user: object({
11 | name: string().required(),
12 | email: string().email(),
13 | }),
14 | });
15 |
16 | class Address {
17 | constructor(args) {
18 | Object.assign(this, args);
19 | }
20 | street = '123';
21 | city = 'Yurtville';
22 | }
23 |
24 | class Foo {
25 | user = {
26 | name: 'someone',
27 | email: 'something@gmail.com',
28 | };
29 |
30 | addresses = [new Address(), new Address({ city: 'Woods' })];
31 |
32 | cid = '1';
33 |
34 | @tracked
35 | growth = 0;
36 |
37 | save() {
38 | return Promise.resolve();
39 | }
40 |
41 | // notifications = {
42 | // email: false,
43 | // sms: true,
44 | // };
45 |
46 | // get doubleGrowth() {
47 | // return this.growth * 2;
48 | // }
49 | }
50 |
51 | export default class ValidatedForm extends Component {
52 | constructor() {
53 | super(...arguments);
54 |
55 | this.model = new Foo();
56 | this.changeset = ValidatedChangeset(this.model);
57 | }
58 |
59 | @action
60 | async setChangesetProperty(path, evt) {
61 | this.changeset.set(path, evt.target.value);
62 | try {
63 | await this.changeset.validate((changes) => {
64 | return FormSchema.validate(changes);
65 | });
66 | this.changeset.removeError(path);
67 |
68 | await this.model.save();
69 | } catch (e) {
70 | this.changeset.addError(e.path, {
71 | value: this.changeset.get(e.path),
72 | validation: e.message,
73 | });
74 | }
75 | }
76 |
77 | @action
78 | async submitForm(changeset, event) {
79 | event.preventDefault();
80 |
81 | changeset.execute();
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/ember/tsconfig.json",
3 | "include": [
4 | "src/**/*",
5 | "types/**/*",
6 | "unpublished-development-types/**/*",
7 | "index.d.ts"
8 | ],
9 | "glint": {
10 | "environment": ["ember-loose", "ember-template-imports"]
11 | },
12 | "compilerOptions": {
13 | "allowJs": true,
14 | "declarationDir": "declarations",
15 | /**
16 | https://www.typescriptlang.org/tsconfig#noEmit
17 |
18 | We want to emit declarations, so this option must be set to `false`.
19 | @tsconfig/ember sets this to `true`, which is incompatible with our need to set `emitDeclarationOnly`.
20 | @tsconfig/ember is more optimized for apps, which wouldn't emit anything, only type check.
21 | */
22 | "noEmit": false,
23 | /**
24 | https://www.typescriptlang.org/tsconfig#emitDeclarationOnly
25 | We want to only emit declarations as we use Rollup to emit JavaScript.
26 | */
27 | "emitDeclarationOnly": true,
28 |
29 | /**
30 | https://www.typescriptlang.org/tsconfig#noEmitOnError
31 | Do not block emit on TS errors.
32 | */
33 | "noEmitOnError": false,
34 |
35 | /**
36 | https://www.typescriptlang.org/tsconfig#rootDir
37 | "Default: The longest common path of all non-declaration input files."
38 |
39 | Because we want our declarations' structure to match our rollup output,
40 | we need this "rootDir" to match the "srcDir" in the rollup.config.mjs.
41 |
42 | This way, we can have simpler `package.json#exports` that matches
43 | imports to files on disk
44 | */
45 | "rootDir": "./src",
46 |
47 | /**
48 | https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions
49 |
50 | We want our tooling to know how to resolve our custom files so the appropriate plugins
51 | can do the proper transformations on those files.
52 | */
53 | "allowImportingTsExtensions": true,
54 |
55 | "types": ["ember-source/types"]
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/test-app/app/components/changeset-form.js:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { later } from '@ember/runloop';
3 | import { action, get } from '@ember/object';
4 | import { tracked } from '@glimmer/tracking';
5 | import { Changeset } from 'ember-changeset';
6 |
7 | function validate() {
8 | return 'not good';
9 | }
10 |
11 | let dummyValidations = {
12 | user: {
13 | name(value) {
14 | return !!value;
15 | },
16 | email(value) {
17 | let ok = value && value.includes('@');
18 | return new Promise((resolve) =>
19 | // eslint-disable-next-line ember/no-runloop
20 | later(
21 | this,
22 | () => {
23 | resolve(ok);
24 | },
25 | 400,
26 | ),
27 | );
28 | },
29 | },
30 | };
31 |
32 | function dummyValidator({ key, newValue, oldValue, changes, content }) {
33 | let validatorFn = get(dummyValidations, key);
34 |
35 | if (typeof validatorFn === 'function') {
36 | return validatorFn(newValue, oldValue, changes, content);
37 | }
38 | }
39 |
40 | class Address {
41 | constructor(args) {
42 | Object.assign(this, args);
43 | }
44 | street = '123';
45 | city = 'Yurtville';
46 | }
47 |
48 | class Foo {
49 | user = {
50 | aliases: ['someone'],
51 | name: 'someone',
52 | email: 'something',
53 | };
54 |
55 | addresses = [new Address(), new Address({ city: 'Woods' })];
56 |
57 | cid = '1';
58 |
59 | @tracked
60 | growth = 0;
61 |
62 | notifications = {
63 | email: false,
64 | sms: true,
65 | };
66 |
67 | get doubleGrowth() {
68 | return this.growth * 2;
69 | }
70 | }
71 |
72 | export default class ChangesetForm extends Component {
73 | constructor() {
74 | super(...arguments);
75 |
76 | this.model = new Foo();
77 | this.changeset = Changeset(this.model, dummyValidator);
78 | }
79 |
80 | updateAttrOnInput(changesetSet, event) {
81 | changesetSet(event.target.value);
82 | }
83 |
84 | updateAttrOnChange(changesetSet, event) {
85 | changesetSet(event.target.checked);
86 | }
87 |
88 | get validateOnRender() {
89 | let cs = Changeset({}, null, { title: validate });
90 | cs.validate();
91 | return cs;
92 | }
93 |
94 | @action
95 | async submitForm(changeset, event) {
96 | event.preventDefault();
97 |
98 | await changeset.validate();
99 |
100 | changeset.save();
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/test-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-app",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Small description for test-app goes here",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "ember build --environment=production",
15 | "start": "ember serve",
16 | "test": "concurrently 'pnpm:test:*'",
17 | "test:ember": "ember test",
18 | "test:ember-compatibility": "ember try:each"
19 | },
20 | "devDependencies": {
21 | "@babel/core": "^7.26.10",
22 | "@babel/plugin-proposal-decorators": "^7.25.9",
23 | "@ember/optional-features": "^2.2.0",
24 | "@ember/string": "^3.1.1",
25 | "@ember/test-helpers": "^5.1.0",
26 | "@embroider/compat": "^3.4.8",
27 | "@embroider/core": "^3.4.8",
28 | "@embroider/macros": "^1.16.13",
29 | "@embroider/test-setup": "^4.0.0",
30 | "@embroider/webpack": "^4.0.0",
31 | "@glimmer/component": "^1.1.2",
32 | "@glimmer/tracking": "^1.1.2",
33 | "@glint/environment-ember-loose": "^1.5.2",
34 | "@glint/environment-ember-template-imports": "^1.5.2",
35 | "@glint/template": "^1.5.2",
36 | "@tsconfig/ember": "^3.0.10",
37 | "@types/qunit": "^2.19.12",
38 | "@types/rsvp": "^4.0.9",
39 | "broccoli-asset-rev": "^3.0.0",
40 | "concurrently": "^9.1.2",
41 | "ember-auto-import": "^2.10.0",
42 | "ember-changeset": "workspace:*",
43 | "ember-cli": "~6.3.1",
44 | "ember-cli-babel": "^8.2.0",
45 | "ember-cli-deprecation-workflow": "^3.3.0",
46 | "ember-cli-htmlbars": "^6.3.0",
47 | "ember-cli-inject-live-reload": "^2.1.0",
48 | "ember-cli-sri": "^2.1.1",
49 | "ember-cli-terser": "^4.0.2",
50 | "ember-data": "~4.12.8",
51 | "ember-load-initializers": "^3.0.1",
52 | "ember-qunit": "^9.0.1",
53 | "ember-try": "^4.0.0",
54 | "ember-resolver": "^13.1.0",
55 | "ember-source": "~6.3.0",
56 | "ember-template-imports": "^4.3.0",
57 | "loader.js": "^4.7.0",
58 | "qunit": "^2.24.1",
59 | "qunit-dom": "^3.4.0",
60 | "scenario-tester": "^2.1.2",
61 | "typescript": "^5.8.2",
62 | "webpack": "^5.99.5",
63 | "yup": "^1.6.1"
64 | },
65 | "dependenciesMeta": {
66 | "ember-changeset": {
67 | "injected": true
68 | }
69 | },
70 | "engines": {
71 | "node": ">= 18"
72 | },
73 | "volta": {
74 | "extends": "../package.json"
75 | },
76 | "ember": {
77 | "edition": "octane"
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # How to contribute
2 |
3 | ## Improve documentation
4 |
5 | We are always looking to improve our documentation. If at some moment you are
6 | reading the documentation and something is not clear, or you can't find what you
7 | are looking for, then please open an issue with the repository. This gives us a
8 | chance to answer your question and to improve the documentation if needed.
9 |
10 | Pull requests correcting spelling or grammar mistakes are always welcome.
11 |
12 | ## Found a bug?
13 |
14 | Please try to answer at least the following questions when reporting a bug:
15 |
16 | - Which version of the project did you use when you noticed the bug?
17 | - How do you reproduce the error condition?
18 | - What happened that you think is a bug?
19 | - What should it do instead?
20 |
21 | It would really help the maintainers if you could provide a reduced test case
22 | that reproduces the error condition.
23 |
24 | ## Have a feature request?
25 |
26 | Please provide some thoughful commentary and code samples on what this feature
27 | should do and why it should be added (your use case). The minimal questions you
28 | should answer when submitting a feature request should be:
29 |
30 | - What will it allow you to do that you can't do today?
31 | - Why do you need this feature and how will it benefit other users?
32 | - Are there any drawbacks to this feature?
33 |
34 | ## Submitting a pull-request?
35 |
36 | Here are some things that will increase the chance that your pull-request will
37 | get accepted:
38 |
39 | - Did you confirm this fix/feature is something that is needed?
40 | - Did you write tests, preferably in a test driven style?
41 | - Did you add documentation for the changes you made?
42 |
43 | If your pull-request addresses an issue then please add the corresponding
44 | issue's number to the description of your pull-request.
45 |
46 | ## Installation
47 |
48 | - `git clone git@github.com:adopted-ember-addons/ember-changeset.git`
49 | - `cd ember-changeset`
50 | - `pnpm install`
51 |
52 | ## Linting
53 |
54 | - `pnpm lint`
55 | - `pnpm lint:fix`
56 |
57 | ## Running tests
58 |
59 | - `pnpm test` – Runs the test suite on the current Ember version
60 | - `pnpm test:ember --server` – Runs the test suite in "watch mode"
61 | - `pnpm test:ember-compatibility` – Runs the test suite against multiple Ember versions
62 |
63 | ## Running the dummy application
64 |
65 | - `pnpm start`
66 | - Visit the dummy application at [http://localhost:4200](http://localhost:4200).
67 |
68 | For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).
69 |
--------------------------------------------------------------------------------
/test-app/app/components/validated-form.hbs:
--------------------------------------------------------------------------------
1 | {{! template-lint-disable require-input-label }}
2 |
23 |
24 |
25 | Validated Changeset isValid · {{this.changeset.isValid}}
3 |Validated Changeset isPristine · {{this.changeset.isPristine}}
4 |Validated Changeset cid: 5 | {{this.changeset.cid}}
6 |Validated Changeset Email: 7 | {{changeset-get 8 | this.changeset 9 | "user.email" 10 | }}
11 |Validated Changeset Name: 12 | {{changeset-get 13 | this.changeset 14 | "user.name" 15 | }}
16 |17 |
Model Name: 18 | {{this.model.user.name}}
19 |Model Email: 20 | {{this.model.user.email}}
21 |Model cid: {{this.model.cid}}
22 | 23 | {{#each this.model.addresses as |address idx|}} 24 |{{address.street}} {{address.city}}
25 | {{/each}} 26 | 27 | -------------------------------------------------------------------------------- /test-app/config/ember-try.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // @todo uncomment when https://github.com/emberjs/ember.js/issues/20777 resolved 4 | // const getChannelURL = require('ember-source-channel-url'); 5 | async function getChannelURL(channelType) { 6 | let HOST = 7 | process.env.EMBER_SOURCE_CHANNEL_URL_HOST || 'https://s3.amazonaws.com'; 8 | let PATH = 'builds.emberjs.com'; 9 | 10 | const response = await fetch(`${HOST}/${PATH}/${channelType}.json`); 11 | const result = await response.json(); 12 | 13 | return result.version 14 | .replace('.canary', '') 15 | .replace('.beta', '') 16 | .replace('-release', ''); 17 | } 18 | const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup'); 19 | 20 | module.exports = async function () { 21 | return { 22 | packageManager: 'pnpm', 23 | scenarios: [ 24 | { 25 | name: 'ember-lts-4.8', 26 | npm: { 27 | devDependencies: { 28 | 'ember-data': '~4.8.0', 29 | 'ember-resolver': '^8.0.0', 30 | 'ember-source': '~4.8.0', 31 | }, 32 | }, 33 | }, 34 | { 35 | name: 'ember-lts-4.12', 36 | npm: { 37 | devDependencies: { 38 | 'ember-data': '~4.12.0', 39 | 'ember-source': '~4.12.0', 40 | }, 41 | }, 42 | }, 43 | { 44 | name: 'ember-lts-5.4', 45 | npm: { 46 | devDependencies: { 47 | 'ember-source': '~5.4.0', 48 | }, 49 | }, 50 | }, 51 | { 52 | name: 'ember-lts-5.8', 53 | npm: { 54 | devDependencies: { 55 | 'ember-source': '~5.8.0', 56 | }, 57 | }, 58 | }, 59 | { 60 | name: 'ember-lts-5.12', 61 | npm: { 62 | devDependencies: { 63 | 'ember-source': '~5.12.0', 64 | }, 65 | }, 66 | }, 67 | { 68 | name: 'ember-release', 69 | npm: { 70 | devDependencies: { 71 | 'ember-source': await getChannelURL('release'), 72 | }, 73 | }, 74 | }, 75 | { 76 | name: 'ember-beta', 77 | npm: { 78 | devDependencies: { 79 | 'ember-source': await getChannelURL('beta'), 80 | '@ember/test-helpers': '^4.0.0', 81 | }, 82 | }, 83 | }, 84 | { 85 | name: 'ember-canary', 86 | npm: { 87 | devDependencies: { 88 | 'ember-source': await getChannelURL('canary'), 89 | '@ember/test-helpers': '^4.0.0', 90 | }, 91 | }, 92 | }, 93 | embroiderSafe(), 94 | embroiderOptimized(), 95 | ], 96 | }; 97 | }; 98 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - master 8 | pull_request: {} 9 | 10 | concurrency: 11 | group: ci-${{ github.head_ref || github.ref }} 12 | cancel-in-progress: true 13 | 14 | jobs: 15 | test: 16 | name: "Tests" 17 | runs-on: ubuntu-latest 18 | timeout-minutes: 10 19 | 20 | steps: 21 | - uses: actions/checkout@v4 22 | - uses: pnpm/action-setup@v4 23 | - name: Install Node 24 | uses: actions/setup-node@v4 25 | with: 26 | node-version: 18 27 | cache: pnpm 28 | - name: Install Dependencies 29 | run: pnpm install --frozen-lockfile 30 | - name: Second Install for proper injected 31 | run: pnpm install --frozen-lockfile 32 | - name: Lint 33 | run: pnpm lint 34 | - name: Run Tests 35 | run: pnpm test:ember 36 | working-directory: test-app 37 | 38 | floating: 39 | name: "Floating Dependencies" 40 | runs-on: ubuntu-latest 41 | timeout-minutes: 10 42 | 43 | steps: 44 | - uses: actions/checkout@v4 45 | - uses: pnpm/action-setup@v4 46 | - uses: actions/setup-node@v4 47 | with: 48 | node-version: 18 49 | cache: pnpm 50 | - name: Install Dependencies 51 | run: pnpm install --no-lockfile 52 | - name: Second Install for proper injected 53 | run: pnpm install --no-lockfile 54 | - name: Run Tests 55 | run: pnpm test:ember 56 | 57 | try-scenarios: 58 | name: ${{ matrix.try-scenario }} 59 | runs-on: ubuntu-latest 60 | needs: "test" 61 | timeout-minutes: 10 62 | 63 | strategy: 64 | fail-fast: false 65 | matrix: 66 | try-scenario: 67 | - ember-lts-4.8 68 | - ember-lts-4.12 69 | - ember-lts-5.4 70 | - ember-lts-5.8 71 | - ember-lts-5.12 72 | - ember-release 73 | - ember-beta 74 | - ember-canary 75 | # @todo uncomment once Ember Data bumped to => 5.3 76 | # - embroider-safe 77 | # - embroider-optimized 78 | 79 | steps: 80 | - uses: actions/checkout@v4 81 | - uses: pnpm/action-setup@v4 82 | - name: Install Node 83 | uses: actions/setup-node@v4 84 | with: 85 | node-version: 18 86 | cache: pnpm 87 | - name: Install Dependencies 88 | run: pnpm install --frozen-lockfile 89 | - name: Second Install for proper injected 90 | run: pnpm install --frozen-lockfile 91 | - name: Run Tests 92 | run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }} --skip-cleanup 93 | working-directory: test-app 94 | -------------------------------------------------------------------------------- /rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { babel } from '@rollup/plugin-babel'; 2 | import { Addon } from '@embroider/addon-dev/rollup'; 3 | import copy from 'rollup-plugin-copy'; 4 | 5 | const addon = new Addon({ 6 | srcDir: 'src', 7 | destDir: 'dist', 8 | }); 9 | 10 | export default { 11 | // This provides defaults that work well alongside `publicEntrypoints` below. 12 | // You can augment this if you need to. 13 | output: addon.output(), 14 | 15 | plugins: [ 16 | // These are the modules that users should be able to import from your 17 | // addon. Anything not listed here may get optimized away. 18 | // By default all your JavaScript modules (**/*.js) will be importable. 19 | // But you are encouraged to tweak this to only cover the modules that make 20 | // up your addon's public API. Also make sure your package.json#exports 21 | // is aligned to the config here. 22 | // See https://github.com/embroider-build/embroider/blob/main/docs/v2-faq.md#how-can-i-define-the-public-exports-of-my-addon 23 | addon.publicEntrypoints(['**/*.js', 'index.js', 'template-registry.js']), 24 | 25 | // These are the modules that should get reexported into the traditional 26 | // "app" tree. Things in here should also be in publicEntrypoints above, but 27 | // not everything in publicEntrypoints necessarily needs to go here. 28 | addon.appReexports(['helpers/**/*.js']), 29 | 30 | // Follow the V2 Addon rules about dependencies. Your code can import from 31 | // `dependencies` and `peerDependencies` as well as standard Ember-provided 32 | // package names. 33 | addon.dependencies(), 34 | 35 | // This babel config should *not* apply presets or compile away ES modules. 36 | // It exists only to provide development niceties for you, like automatic 37 | // template colocation. 38 | // 39 | // By default, this will load the actual babel config from the file 40 | // babel.config.json. 41 | babel({ 42 | extensions: ['.js', '.gjs', '.ts', '.gts'], 43 | babelHelpers: 'bundled', 44 | }), 45 | 46 | // Ensure that standalone .hbs files are properly integrated as Javascript. 47 | addon.hbs(), 48 | 49 | // Ensure that .gjs files are properly integrated as Javascript 50 | addon.gjs(), 51 | 52 | // @todo uncomment once converted to TypeScript 53 | // // Emit .d.ts declaration files 54 | // addon.declarations('declarations'), 55 | 56 | // addons are allowed to contain imports of .css files, which we want rollup 57 | // to leave alone and keep in the published output. 58 | addon.keepAssets(['**/*.css']), 59 | 60 | // Remove leftover build artifacts when starting a new build. 61 | addon.clean(), 62 | 63 | // Copy Readme and License into published package 64 | copy({ 65 | targets: [ 66 | { src: 'src/index.d.ts', dest: 'declarations' }, 67 | { src: 'src/types.d.ts', dest: 'declarations' }, 68 | ], 69 | }), 70 | ], 71 | }; 72 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at arr@sugarpirate.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | * Debugging: 3 | * https://eslint.org/docs/latest/use/configure/debug 4 | * ---------------------------------------------------- 5 | * 6 | * Print a file's calculated configuration 7 | * 8 | * npx eslint --print-config path/to/file.js 9 | * 10 | * Inspecting the config 11 | * 12 | * npx eslint --inspect-config 13 | * 14 | */ 15 | import babelParser from '@babel/eslint-parser'; 16 | import js from '@eslint/js'; 17 | import prettier from 'eslint-config-prettier'; 18 | import ember from 'eslint-plugin-ember/recommended'; 19 | import importPlugin from 'eslint-plugin-import'; 20 | import qunit from 'eslint-plugin-qunit'; 21 | import n from 'eslint-plugin-n'; 22 | import globals from 'globals'; 23 | import ts from 'typescript-eslint'; 24 | 25 | const parserOptions = { 26 | esm: { 27 | js: { 28 | ecmaFeatures: { modules: true }, 29 | ecmaVersion: 'latest', 30 | }, 31 | ts: { 32 | projectService: true, 33 | project: true, 34 | tsconfigRootDir: import.meta.dirname, 35 | }, 36 | }, 37 | }; 38 | 39 | export default ts.config( 40 | js.configs.recommended, 41 | ember.configs.base, 42 | ember.configs.gjs, 43 | ember.configs.gts, 44 | prettier, 45 | /** 46 | * Ignores must be in their own object 47 | * https://eslint.org/docs/latest/use/configure/ignore 48 | */ 49 | { 50 | ignores: [ 51 | 'declarations/', 52 | 'dist/', 53 | 'node_modules/', 54 | 'coverage/', 55 | 'test-app/dist', 56 | '!**/.*', 57 | ], 58 | }, 59 | /** 60 | * https://eslint.org/docs/latest/use/configure/configuration-files#configuring-linter-options 61 | */ 62 | { 63 | linterOptions: { 64 | reportUnusedDisableDirectives: 'error', 65 | }, 66 | }, 67 | { 68 | files: ['**/*.js'], 69 | languageOptions: { 70 | parser: babelParser, 71 | }, 72 | }, 73 | { 74 | files: ['**/*.{js,gjs}'], 75 | languageOptions: { 76 | parserOptions: parserOptions.esm.js, 77 | globals: { 78 | ...globals.browser, 79 | }, 80 | }, 81 | }, 82 | { 83 | files: ['**/*.{ts,gts}'], 84 | languageOptions: { 85 | parser: ember.parser, 86 | parserOptions: parserOptions.esm.ts, 87 | }, 88 | extends: [...ts.configs.recommendedTypeChecked, ember.configs.gts], 89 | }, 90 | { 91 | files: ['src/**/*'], 92 | plugins: { 93 | import: importPlugin, 94 | }, 95 | rules: { 96 | // require relative imports use full extensions 97 | 'import/extensions': ['error', 'always', { ignorePackages: true }], 98 | }, 99 | }, 100 | { 101 | rules: { 102 | 'ember/no-get': 'off', 103 | }, 104 | }, 105 | { 106 | files: ['tests/**/*-test.{js,gjs,ts,gts}'], 107 | plugins: { 108 | qunit, 109 | }, 110 | }, 111 | /** 112 | * CJS node files 113 | */ 114 | { 115 | files: [ 116 | '**/*.cjs', 117 | 'test-app/config/**/*.js', 118 | 'test-app/ember-cli-build.js', 119 | 'test-app/scenarios.js', 120 | 'test-app/testem.js', 121 | ], 122 | plugins: { 123 | n, 124 | }, 125 | 126 | languageOptions: { 127 | sourceType: 'script', 128 | ecmaVersion: 'latest', 129 | globals: { 130 | ...globals.node, 131 | }, 132 | }, 133 | }, 134 | /** 135 | * ESM node files 136 | */ 137 | { 138 | files: ['**/*.mjs'], 139 | plugins: { 140 | n, 141 | }, 142 | 143 | languageOptions: { 144 | sourceType: 'module', 145 | ecmaVersion: 'latest', 146 | parserOptions: parserOptions.esm.js, 147 | globals: { 148 | ...globals.node, 149 | }, 150 | }, 151 | }, 152 | ); 153 | -------------------------------------------------------------------------------- /.github/workflows/plan-release.yml: -------------------------------------------------------------------------------- 1 | name: Plan Release 2 | on: 3 | workflow_dispatch: 4 | push: 5 | branches: 6 | - main 7 | - master 8 | pull_request_target: # This workflow has permissions on the repo, do NOT run code from PRs in this workflow. See https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ 9 | types: 10 | - labeled 11 | - unlabeled 12 | 13 | concurrency: 14 | group: plan-release # only the latest one of these should ever be running 15 | cancel-in-progress: true 16 | 17 | jobs: 18 | is-this-a-release: 19 | name: "Is this a release?" 20 | runs-on: ubuntu-latest 21 | outputs: 22 | command: ${{ steps.check-release.outputs.command }} 23 | 24 | steps: 25 | - uses: actions/checkout@v4 26 | with: 27 | fetch-depth: 2 28 | ref: "master" 29 | # This will only cause the `is-this-a-release` job to have a "command" of `release` 30 | # when the .release-plan.json file was changed on the last commit. 31 | - id: check-release 32 | run: if git diff --name-only HEAD HEAD~1 | grep -w -q ".release-plan.json"; then echo "command=release"; fi >> $GITHUB_OUTPUT 33 | 34 | create-prepare-release-pr: 35 | name: Create Prepare Release PR 36 | runs-on: ubuntu-latest 37 | timeout-minutes: 5 38 | needs: is-this-a-release 39 | permissions: 40 | contents: write 41 | issues: read 42 | pull-requests: write 43 | # only run on push event or workflow dispatch if plan wasn't updated (don't create a release plan when we're releasing) 44 | # only run on labeled event if the PR has already been merged 45 | if: ((github.event_name == 'push' || github.event_name == 'workflow_dispatch') && needs.is-this-a-release.outputs.command != 'release') || (github.event_name == 'pull_request_target' && github.event.pull_request.merged == true) 46 | 47 | steps: 48 | - uses: actions/checkout@v4 49 | # We need to download lots of history so that 50 | # github-changelog can discover what's changed since the last release 51 | with: 52 | fetch-depth: 0 53 | ref: "master" 54 | - uses: pnpm/action-setup@v4 55 | - uses: actions/setup-node@v4 56 | with: 57 | node-version: 18 58 | cache: pnpm 59 | - run: pnpm install --frozen-lockfile 60 | - name: "Generate Explanation and Prep Changelogs" 61 | id: explanation 62 | run: | 63 | set +e 64 | pnpm release-plan prepare 2> >(tee -a release-plan-stderr.txt >&2) 65 | 66 | if [ $? -ne 0 ]; then 67 | release_plan_output=$(cat release-plan-stderr.txt) 68 | else 69 | release_plan_output=$(jq .description .release-plan.json -r) 70 | rm release-plan-stderr.txt 71 | 72 | if [ $(jq '.solution | length' .release-plan.json) -eq 1 ]; then 73 | new_version=$(jq -r '.solution[].newVersion' .release-plan.json) 74 | echo "new_version=v$new_version" >> $GITHUB_OUTPUT 75 | fi 76 | fi 77 | echo 'text<Changeset isPristine · {{this.changeset.isPristine}}
3 |Changeset cid: 4 | {{this.changeset.cid}}
5 |Changeset Email: 6 | {{changeset-get 7 | this.changeset 8 | "user.email" 9 | }}
10 |Changeset Name: 11 | {{changeset-get 12 | this.changeset 13 | "user.name" 14 | }}
15 |Changeset notifications email: 16 | {{changeset-get 17 | this.changeset 18 | "notifications.email" 19 | }}
20 |Changeset notifications sms: 21 | {{changeset-get 22 | this.changeset 23 | "notifications.sms" 24 | }}
25 |26 |
Model Name: 27 | {{this.model.user.name}}
28 |Model Email: 29 | {{this.model.user.email}}
30 |Model cid: {{this.model.cid}}
31 |Model notifications email: 32 | {{this.model.notifications.email}}
35 |Model notifications sms: 36 | {{this.model.notifications.sms}}
39 |Doubled: {{this.model.doubleGrowth}}
40 | 41 | {{#each this.validateOnRender.errors as |e|}} 42 |Validate On Render for {{e.key}}: {{e.value}}
43 | {{/each}} 44 | 45 | {{#each this.model.addresses as |address idx|}} 46 |{{address.street}} {{address.city}}
47 | {{/each}} 48 | 49 | -------------------------------------------------------------------------------- /test-app/tests/integration/helpers/changeset-get-test.js: -------------------------------------------------------------------------------- 1 | import { fillIn, find, render, settled } from '@ember/test-helpers'; 2 | import { setupRenderingTest } from 'ember-qunit'; 3 | import hbs from 'htmlbars-inline-precompile'; 4 | import { module, test } from 'qunit'; 5 | import { Changeset } from 'ember-changeset'; 6 | 7 | module('Integration | Helper | changeset-get', function (hooks) { 8 | setupRenderingTest(hooks); 9 | 10 | let model; 11 | 12 | hooks.beforeEach(function () { 13 | model = { 14 | name: { 15 | first: 'Bob', 16 | last: 'Loblaw', 17 | }, 18 | email: 'bob@lob.law', 19 | url: 'http://bobloblawslawblog.com', 20 | }; 21 | 22 | this.changeset = Changeset(model); 23 | this.fieldName = 'name.first'; 24 | }); 25 | 26 | test('it retrieves the current value using {{get}}', async function (assert) { 27 | this.updateName = (changeset, evt) => { 28 | changeset.set('name.first', evt.target.value); 29 | }; 30 | await render(hbs` 31 | 32 | 38 |{{this.changeset.name.first}}
39 |-
40 | {{#each this.changeset.changes as |change|}}
41 |
- {{change.key}}: {{change.value}} 42 | {{/each}} 43 |
{{get this.changeset this.fieldName}}
70 |-
71 | {{#each (get this.changeset "changes") as |change index|}}
72 |
- {{change.key}}: {{change.value}} 73 | {{/each}} 74 |
{{changeset-get this.changeset "profile.firstName"}}
127 | `); 128 | 129 | assert.dom('#test-el').hasText('Bob'); 130 | }); 131 | 132 | test('it does not fail with a null belongsTo property', async function (assert) { 133 | let user = this.createUserWithNullBelongsTo('user'); 134 | this.changeset = Changeset(user); 135 | 136 | await render(hbs` 137 |{{changeset-get this.changeset "profile.firstName"}}
138 | `); 139 | 140 | assert.dom('#test-el').hasText(''); 141 | }); 142 | }); 143 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-changeset", 3 | "version": "5.0.0", 4 | "description": "Changesets for Ember", 5 | "keywords": [ 6 | "ember-addon", 7 | "changeset" 8 | ], 9 | "homepage": "https://github.com/adopted-ember-addons/ember-changeset", 10 | "bugs": "https://github.com/adopted-ember-addons/ember-changeset/issues", 11 | "repository": "https://github.com/adopted-ember-addons/ember-changeset", 12 | "license": "MIT", 13 | "author": "Lauren TanThere were one or more errors in your form.
49 | {{/if}} 50 | 51 | 52 | 53 | 54 | {{/let}} 55 | `); 56 | 57 | await fillIn('#first-name', 'A'); 58 | await click('#submit-btn'); 59 | assert.dom('#errors-paragraph').exists('should be invalid'); 60 | 61 | await fillIn('#first-name', 'Billy'); 62 | await click('#submit-btn'); 63 | assert.dom('#errors-paragraph').doesNotExist('should be valid'); 64 | }); 65 | 66 | test('it accepts validation map', async function (assert) { 67 | let validations = { 68 | firstName(key, newValue) { 69 | return (isPresent(newValue) && newValue.length > 3) || 'too short'; 70 | }, 71 | lastName(key, newValue) { 72 | return (isPresent(newValue) && newValue.length > 3) || 'too short'; 73 | }, 74 | }; 75 | this.dummyModel = { firstName: 'Jim', lastName: 'Bobbie' }; 76 | this.validations = validations; 77 | this.submit = (changeset) => changeset.validate(); 78 | this.reset = (changeset) => changeset.rollback(); 79 | await render(hbs` 80 | {{#let (changeset this.dummyModel this.validations) as |changesetObj|}} 81 | {{#if changesetObj.isInvalid}} 82 |There were one or more errors in your form.
83 | {{/if}} 84 | 85 | 86 | 87 | 88 | {{/let}} 89 | `); 90 | 91 | await fillIn('#first-name', 'A'); 92 | await click('#submit-btn'); 93 | assert.dom('#errors-paragraph').exists('should be invalid'); 94 | 95 | await fillIn('#first-name', 'Billy'); 96 | await click('#submit-btn'); 97 | assert.dom('#errors-paragraph').doesNotExist('should be valid'); 98 | }); 99 | 100 | test('it accepts validation map with multiple validations', async function (assert) { 101 | function validateLength() { 102 | return (key, newValue) => 103 | (isPresent(newValue) && newValue.length > 3) || 'too short'; 104 | } 105 | function validateStartsUppercase() { 106 | return (key, newValue) => 107 | (isPresent(newValue) && 108 | newValue.charCodeAt(0) > 65 && 109 | newValue.charCodeAt(0) < 90) || 110 | 'not upper case'; 111 | } 112 | let validations = { 113 | firstName: [validateLength(), validateStartsUppercase()], 114 | }; 115 | this.dummyModel = { firstName: 'Jim', lastName: 'Bobbie' }; 116 | this.validations = validations; 117 | this.submit = (changeset) => changeset.validate(); 118 | this.reset = (changeset) => changeset.rollback(); 119 | await render(hbs` 120 | {{#let (changeset this.dummyModel this.validations) as |changesetObj|}} 121 | {{#if changesetObj.isInvalid}} 122 |There were one or more errors in your form.
123 | {{/if}} 124 | 125 | 126 | 127 | 128 | {{/let}} 129 | `); 130 | 131 | await fillIn('#first-name', 'A'); 132 | await click('#submit-btn'); 133 | assert.dom('#errors-paragraph').exists('should be invalid'); 134 | 135 | await fillIn('#first-name', 'Billy'); 136 | await click('#submit-btn'); 137 | assert.dom('#errors-paragraph').doesNotExist('should be valid'); 138 | }); 139 | 140 | test('it accepts validation map with multiple validations with promises', async function (assert) { 141 | function validateLength() { 142 | return (key, newValue) => 143 | (isPresent(newValue) && Promise.resolve(newValue.length > 3)) || 144 | 'too short'; 145 | } 146 | function validateStartsUppercase() { 147 | return (key, newValue) => 148 | (isPresent(newValue) && 149 | newValue.charCodeAt(0) > 65 && 150 | newValue.charCodeAt(0) < 90) || 151 | Promise.resolve('not upper case'); 152 | } 153 | let validations = { 154 | firstName: [validateLength(), validateStartsUppercase()], 155 | }; 156 | this.dummyModel = { firstName: 'Jim', lastName: 'Bobbie' }; 157 | this.validations = validations; 158 | this.submit = (changeset) => changeset.validate(); 159 | this.reset = (changeset) => changeset.rollback(); 160 | await render(hbs` 161 | {{#let (changeset this.dummyModel this.validations) as |changesetObj|}} 162 | {{#if changesetObj.isInvalid}} 163 |There were one or more errors in your form.
164 | {{/if}} 165 | 166 | 167 | 168 | 169 | {{/let}} 170 | `); 171 | 172 | await fillIn('#first-name', 'A'); 173 | await click('#submit-btn'); 174 | assert.dom('#errors-paragraph').exists('should be invalid'); 175 | 176 | await fillIn('#first-name', 'Billy'); 177 | await click('#submit-btn'); 178 | assert.dom('#errors-paragraph').doesNotExist('should be valid'); 179 | }); 180 | 181 | test('it rollsback changes', async function (assert) { 182 | this.dummyModel = { firstName: 'Jim' }; 183 | this.reset = (changeset) => changeset.rollback(); 184 | await render(hbs` 185 | {{#let (changeset this.dummyModel) as |changesetObj|}} 186 | 187 | 188 | {{/let}} 189 | `); 190 | 191 | assert.dom('#first-name').hasValue('Jim', 'precondition'); 192 | await fillIn('#first-name', 'foo'); 193 | assert.dom('#first-name').hasValue('foo', 'should update input'); 194 | await click('#reset-btn'); 195 | assert.dom('#first-name').hasValue('Jim', 'should rollback'); 196 | }); 197 | 198 | test('it can be used with 1 argument', async function (assert) { 199 | this.dummyModel = { firstName: 'Jim', lastName: 'Bob' }; 200 | this.submit = (changeset) => changeset.validate(); 201 | this.reset = (changeset) => changeset.rollback(); 202 | await render(hbs` 203 | {{#let (changeset this.dummyModel) as |changesetObj|}} 204 | {{#if changesetObj.isInvalid}} 205 |There were one or more errors in your form.
206 | {{/if}} 207 | 208 | 209 | 210 | 211 | {{/let}} 212 | `); 213 | 214 | await click('#submit-btn'); 215 | assert.dom('#errors-paragraph').doesNotExist('should be valid'); 216 | }); 217 | 218 | test('it updates when set without a validator', async function (assert) { 219 | this.dummyModel = { firstName: 'Jim', lastName: 'Bob' }; 220 | await render(hbs` 221 | {{#let (changeset this.dummyModel) as |changesetObj|}} 222 |{{changesetObj.firstName}} {{changesetObj.lastName}}
223 | 229 | 230 | {{/let}} 231 | `); 232 | 233 | assert.dom('h1').hasText('Jim Bob', 'precondition'); 234 | await fillIn('#first-name', 'foo'); 235 | await fillIn('#last-name', 'bar'); 236 | assert.dom('h1').hasText('foo bar', 'should update observable value'); 237 | }); 238 | 239 | test('it updates when set with a validator', async function (assert) { 240 | this.dummyModel = { firstName: 'Jim', lastName: 'Bob' }; 241 | this.validate = () => true; 242 | this.updateFirstName = (changeset, evt) => { 243 | changeset.firstName = evt.target.value; 244 | }; 245 | await render(hbs` 246 | {{#let (changeset this.dummyModel this.this.validate) as |changesetObj|}} 247 |{{changesetObj.firstName}} {{changesetObj.lastName}}
248 | 254 | 255 | {{/let}} 256 | `); 257 | 258 | assert.dom('h1').hasText('Jim Bob', 'precondition'); 259 | await fillIn('#first-name', 'foo'); 260 | await fillIn('#last-name', 'bar'); 261 | assert.dom('h1').hasText('foo bar', 'should update observable value'); 262 | }); 263 | 264 | test('a passed down nested object updates when set without a validator', async function (assert) { 265 | let data = { person: { firstName: 'Jim', lastName: 'Bob' } }; 266 | let changeset = Changeset(data); 267 | this.changeset = changeset; 268 | 269 | await render(hbs` 270 |{{this.changeset.person.firstName}} {{this.changeset.person.lastName}}
271 | 275 | 278 | `); 279 | 280 | assert.dom('h1').hasText('Jim Bob', 'precondition'); 281 | assert.strictEqual( 282 | changeset.get('person.firstName'), 283 | 'Jim', 284 | 'precondition firstName', 285 | ); 286 | assert.strictEqual( 287 | changeset.get('person.lastName'), 288 | 'Bob', 289 | 'precondition lastName', 290 | ); 291 | await fillIn('#first-name', 'foo'); 292 | await fillIn('#last-name', 'bar'); 293 | assert.strictEqual( 294 | changeset.get('person.firstName'), 295 | 'foo', 296 | 'should update observable value', 297 | ); 298 | assert.strictEqual( 299 | changeset.get('person.lastName'), 300 | 'bar', 301 | 'should update observable value lastName', 302 | ); 303 | assert.strictEqual( 304 | changeset.get('person').firstName, 305 | 'foo', 306 | 'should work with top level key', 307 | ); 308 | assert.strictEqual( 309 | changeset.get('person').lastName, 310 | 'bar', 311 | 'should work with top level key last name', 312 | ); 313 | assert.strictEqual( 314 | changeset.person.firstName, 315 | 'foo', 316 | 'should work with top level key', 317 | ); 318 | assert.strictEqual( 319 | changeset.get('_content').person.firstName, 320 | 'Jim', 321 | "keeps value on model as execute hasn't been called", 322 | ); 323 | assert.dom('h1').hasText('foo bar', 'should update observable value'); 324 | }); 325 | 326 | test('nested object updates when set without a validator', async function (assert) { 327 | let data = { person: { firstName: 'Jim', lastName: 'Bob' } }; 328 | let changeset = Changeset(data); 329 | this.changeset = changeset; 330 | 331 | await render(hbs` 332 |{{this.changeset.person.firstName}} {{this.changeset.person.lastName}}
333 | 337 | 341 | `); 342 | 343 | assert.dom('h1').hasText('Jim Bob', 'precondition'); 344 | await fillIn('#first-name', 'foo'); 345 | await fillIn('#last-name', 'bar'); 346 | assert.dom('h1').hasText('foo bar', 'should update observable value'); 347 | }); 348 | 349 | test('nested key error clears after entering valid input', async function (assert) { 350 | let data = { person: { firstName: 'Jim' } }; 351 | let validator = ({ newValue }) => 352 | isPresent(newValue) || 'need a first name'; 353 | let c = Changeset(data, validator); 354 | this.c = c; 355 | 356 | await render(hbs` 357 |{{this.c.person.firstName}}
358 | 363 | {{this.c.error.person.firstName.validation}} 364 | `); 365 | 366 | assert.dom('h1').hasText('Jim', 'precondition'); 367 | await fillIn('#first-name', 'foo'); 368 | await fillIn('#first-name', ''); 369 | 370 | let actual = find('#first-name-error').textContent.trim(); 371 | let expectedResult = 'need a first name'; 372 | assert.strictEqual(actual, expectedResult, 'shows error message'); 373 | 374 | await fillIn('#first-name', 'foo'); 375 | 376 | actual = find('#first-name-error').textContent.trim(); 377 | expectedResult = ''; 378 | assert.strictEqual(actual, expectedResult, 'hides error message'); 379 | }); 380 | 381 | test('nested object updates when set with async validator', async function (assert) { 382 | let data = { person: { firstName: 'Jim' } }; 383 | let validator = () => Promise.resolve(true); 384 | let c = Changeset(data, validator); 385 | this.c = c; 386 | 387 | await render(hbs` 388 |{{this.c.person.firstName}}
389 | 394 | {{this.c.error.person.firstName.validation}} 395 | `); 396 | assert.dom('h1').hasText('Jim', 'precondition'); 397 | await fillIn('#first-name', 'John'); 398 | assert.dom('h1').hasText('John', 'should update observable value'); 399 | }); 400 | 401 | test('deeply nested key error clears after entering valid input', async function (assert) { 402 | assert.expect(3); 403 | 404 | let data = { person: { name: { parts: { first: 'Jim' } } } }; 405 | let validator = ({ newValue }) => 406 | isPresent(newValue) || 'need a first name'; 407 | let c = Changeset(data, validator); 408 | this.c = c; 409 | this.mutValue = (path, evt) => (this.c[path] = evt.target.value); 410 | 411 | await render(hbs` 412 |{{this.c.person.name.parts.first}}
413 | 418 | {{this.c.error.person.name.parts.first.validation}} 419 | `); 420 | 421 | assert.dom('h1').hasText('Jim', 'precondition'); 422 | await fillIn('#first-name', ''); 423 | 424 | { 425 | let actual = find('#first-name-error').textContent.trim(); 426 | let expectedResult = 'need a first name'; 427 | assert.strictEqual(actual, expectedResult, 'shows error message'); 428 | } 429 | 430 | await fillIn('#first-name', 'foo'); 431 | 432 | { 433 | let actual = find('#first-name-error').textContent.trim(); 434 | let expectedResult = ''; 435 | assert.strictEqual(actual, expectedResult, 'hides error message'); 436 | } 437 | }); 438 | 439 | test('a rollback propagates binding to deeply nested changesets', async function (assert) { 440 | let data = { person: { firstName: 'Jim', lastName: 'Bob' } }; 441 | let changeset = Changeset(data); 442 | this.changeset = changeset; 443 | this.reset = () => changeset.rollback(); 444 | this.mutValue = (path, evt) => (this.changeset[path] = evt.target.value); 445 | await render(hbs` 446 |{{this.changeset.person.firstName}} {{this.changeset.person.lastName}}
447 | 451 | 455 | 456 | `); 457 | 458 | assert.dom('h1').hasText('Jim Bob', 'precondition'); 459 | await fillIn('#first-name', 'foo'); 460 | await fillIn('#last-name', 'bar'); 461 | assert.dom('h1').hasText('foo bar', 'should update observable value'); 462 | await click('#reset-btn'); 463 | assert.dom('h1').hasText('Jim Bob', 'should rollback values'); 464 | }); 465 | 466 | test('it does not rollback when validating', async function (assert) { 467 | let dummyValidations = { 468 | even(k, value) { 469 | return value % 2 === 0 || 'must be even'; 470 | }, 471 | odd(k, value) { 472 | return value % 2 !== 0 || 'must be odd'; 473 | }, 474 | }; 475 | let changeset = Changeset( 476 | { even: 4, odd: 4 }, 477 | lookupValidator(dummyValidations), 478 | dummyValidations, 479 | ); 480 | this.addEven = (changeset, evt) => { 481 | changeset.even = evt.target.value; 482 | }; 483 | this.addOdd = (changeset, evt) => { 484 | changeset.odd = evt.target.value; 485 | }; 486 | this.changeset = changeset; 487 | this.validateProperty = (changeset, property) => 488 | changeset.validate(property); 489 | await render(hbs` 490 | 503 | 504 | 517 | `); 518 | 519 | await fillIn('#even', '9'); 520 | await triggerEvent('#odd', 'blur'); 521 | assert 522 | .dom('small.even') 523 | .hasText('must be even', 'should display error message'); 524 | assert 525 | .dom('small.odd') 526 | .hasText('must be odd', 'should display error message'); 527 | assert.dom('#even').hasValue('9', 'should not rollback'); 528 | assert.dom('code.even').hasText('9', 'should not rollback'); 529 | assert.dom('#odd').hasValue('4', 'should not rollback'); 530 | await blur('#even'); 531 | // there is a scenario where going from valid to invalid would cause values to 532 | // go out of sync 533 | await fillIn('#odd', '10'); 534 | await blur('#odd'); 535 | assert 536 | .dom('small.even') 537 | .hasText('must be even', 'should display error message'); 538 | assert 539 | .dom('small.odd') 540 | .hasText('must be odd', 'should display error message'); 541 | assert.dom('#odd').hasValue('10', 'should not rollback'); 542 | assert.dom('code.odd').hasText('10', 'should not rollback'); 543 | }); 544 | 545 | test('it handles when changeset is already set', async function (assert) { 546 | class Moment { 547 | constructor(date) { 548 | this.date = date; 549 | } 550 | } 551 | let d = new Date('2015'); 552 | let momentInstance = new Moment(d); 553 | this.dummyModel = { startDate: momentInstance }; 554 | await render(hbs` 555 | {{#let (changeset this.dummyModel) as |changesetObj|}} 556 |{{changesetObj.startDate.date}}
557 | {{/let}} 558 | `); 559 | 560 | assert.dom('h1').hasText(d.toString(), 'should update observable value'); 561 | }); 562 | 563 | test('it handles when is plain object passed to helper', async function (assert) { 564 | let d = new Date('2015'); 565 | this.d = d; 566 | await render(hbs` 567 | {{#let (changeset (hash date=this.d)) as |changesetObj|}} 568 |{{changesetObj.date}}
569 | {{/let}} 570 | `); 571 | 572 | assert.dom('h1').hasText(d.toString(), 'should update observable value'); 573 | }); 574 | 575 | test('it handles models that are promises', async function (assert) { 576 | this.dummyModel = Promise.resolve({ firstName: 'Jim', lastName: 'Bob' }); 577 | 578 | this.updateAttr = (changeset, attr, event) => { 579 | set(changeset, attr, event.target.value); 580 | }; 581 | 582 | // @todo this test does not await until promise resolved 583 | // and actually mutates props on the Promise object, not on the changeset 584 | await render(hbs` 585 | {{#let (changeset this.dummyModel) as |changesetObj|}} 586 |{{changesetObj.firstName}} {{changesetObj.lastName}}
587 | 592 | 593 | 598 | {{/let}} 599 | `); 600 | 601 | await fillIn('#first-name', 'foo'); 602 | await blur('#first-name'); 603 | await fillIn('#last-name', 'bar'); 604 | await blur('#last-name'); 605 | assert.dom('h1').hasText('foo bar', 'should update observable value'); 606 | }); 607 | 608 | test('it skips validation when skipValidate is passed as an option', async function (assert) { 609 | this.dummyModel = { firstName: 'Jim', lastName: 'Bob' }; 610 | this.validate = () => false; 611 | await render(hbs` 612 | {{#let (changeset this.dummyModel this.validate skipValidate=true) as |changesetObj|}} 613 |{{changesetObj.firstName}} {{changesetObj.lastName}}
614 | 615 | 616 | {{#if changesetObj.isInvalid}} 617 |There were one or more errors in your form.
618 | {{/if}} 619 | {{/let}} 620 | `); 621 | 622 | assert.dom('h1').hasText('Jim Bob', 'precondition'); 623 | await fillIn('#first-name', 'J'); 624 | await blur('#first-name'); 625 | await fillIn('#last-name', 'B'); 626 | await blur('#last-name'); 627 | assert.dom('h1').hasText('J B', 'should update observable value'); 628 | assert.dom('#error-paragraph').doesNotExist('should skip validation'); 629 | }); 630 | 631 | test('it validates changes with changesetKeys', async function (assert) { 632 | let validations = { 633 | firstName(value) { 634 | return (isPresent(value) && value.length > 3) || 'too short'; 635 | }, 636 | }; 637 | this.dummyModel = { firstName: 'Jimm', lastName: 'Bob' }; 638 | this.validate = ({ key, newValue }) => { 639 | let validatorFn = validations[key]; 640 | 641 | if (typeOf(validatorFn) === 'function') { 642 | return validatorFn(newValue); 643 | } 644 | }; 645 | this.submit = (changeset) => changeset.validate(); 646 | this.reset = (changeset) => changeset.rollback(); 647 | this.changesetKeys = ['lastName']; 648 | await render(hbs` 649 | {{#let (changeset this.dummyModel this.validate changesetKeys=this.changesetKeys) as |changesetObj|}} 650 | {{#if changesetObj.isDirty}} 651 |There were one or more errors in your form.
652 | {{/if}} 653 | 654 | 655 | {{/let}} 656 | `); 657 | 658 | await fillIn('#first-name', 'A'); 659 | await click('#submit-btn'); 660 | assert.dom('#errors-paragraph').doesNotExist('should not be invalid'); 661 | }); 662 | }); 663 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
4 | 
5 | 
6 | 
7 |
8 | ## Compatibility
9 |
10 | - Ember.js v4.8 or above
11 | - Embroider or ember-auto-import v2
12 |
13 | ## Installation
14 |
15 | ```
16 | ember install ember-changeset
17 | ```
18 |
19 | > [Watch a free video intro presented by EmberScreencasts](https://www.emberscreencasts.com/posts/168-introduction-to-ember-changeset)
20 | >
21 | > 
22 |
23 | ## Updates
24 |
25 | We have released `v3.0.0`. See the CHANGELOG [here](https://github.com/adopted-ember-addons/ember-changeset/blob/master/CHANGELOG.md).
26 | This requires Ember >= 3.13 as the use of `@tracked` will help us monitor and propagate changes to the UI layer.
27 | If your app is < 3.13 or you need to support IE11, then you can install the 2.0 series `ember install ember-changeset@v2.2.4`.
28 |
29 | Support for IE11 was dropped with the `v3.0.0` release given our ubiquitous use of Proxy.
30 |
31 | The base library for this addon is [validated-changeset](https://github.com/adopted-ember-addons/validated-changeset/).
32 | As a result, this functionality is available outside of Ember as well!
33 |
34 | ## Philosophy
35 |
36 | The idea behind a changeset is simple: it represents a set of valid changes to be applied onto any Object (`Ember.Object`, `DS.Model`, POJOs, etc).
37 | Each change is tested against an optional validation, and if valid, the change is stored and applied when executed.
38 |
39 | Assuming a Data Down, Actions Up (DDAU) approach, a changeset is more appropriate compared to implicit 2 way bindings.
40 | Other validation libraries only validate a property _after_ it is set on an Object, which means that your Object can enter an invalid state.
41 |
42 | `ember-changeset` only allows valid changes to be set, so your Objects will never become invalid (assuming you have 100% validation coverage).
43 | Additionally, this addon is designed to be un-opinionated about your choice of form and/or validation library, so you can easily integrate it into an existing solution.
44 |
45 | The simplest way to incorporate validations is to use [`ember-changeset-validations`](https://github.com/adopted-ember-addons/ember-changeset-validations/), a companion addon to this one.
46 | It has a simple mental model, and there are no Observers or CPs involved – just pure functions.
47 |
48 | See also the [plugins](#plugins) section for addons that extend `ember-changeset`.
49 |
50 | #### tl;dr
51 |
52 | ```js
53 | import { Changeset } from "ember-changeset";
54 |
55 | let dummyValidations = {
56 | firstName(newValue) {
57 | return !!newValue;
58 | },
59 | };
60 |
61 | function validatorFn({ key, newValue, oldValue, changes, content }) {
62 | let validator = get(dummyValidations, key);
63 |
64 | if (typeof validator === "function") {
65 | return validator(newValue, oldValue, changes, content);
66 | }
67 | }
68 |
69 | let changeset = Changeset(user, validatorFn);
70 | user.firstName; // "Michael"
71 | user.lastName; // "Bolton"
72 |
73 | changeset.set("firstName", "Jim");
74 | changeset.set("lastName", "B");
75 | changeset.isInvalid; // true
76 | changeset.get("errors"); // [{ key: 'lastName', validation: 'too short', value: 'B' }]
77 | changeset.set("lastName", "Bob");
78 | changeset.isValid; // true
79 |
80 | user.firstName; // "Michael"
81 | user.lastName; // "Bolton"
82 |
83 | changeset.save(); // sets and saves valid changes on the user
84 | user.firstName; // "Jim"
85 | user.lastName; // "Bob"
86 | ```
87 |
88 | ## Usage
89 |
90 | First, create a new `Changeset` using the `changeset` helper or through JavaScript via a factory function:
91 |
92 | ```hbs
93 | {{! application/template.hbs}}
94 | {{#let (changeset this.model this.validate) as |changesetObj|}}
95 | {{this.changeset.error.firstName.validation}}
450 | {{/if}} 451 | 452 | {{#if this.changeset.error.address.zipCode}} 453 |{{this.changeset.error.address.zipCode.validation}}
454 | {{/if}} 455 | ``` 456 | 457 | **[⬆️ back to top](#api)** 458 | 459 | #### `change` 460 | 461 | Returns the change object. 462 | 463 | ```js 464 | { 465 | firstName: "Jim"; 466 | } 467 | ``` 468 | 469 | Note that keys can be arbitrarily nested: 470 | 471 | ```js 472 | { 473 | address: { 474 | zipCode: "10001"; 475 | } 476 | } 477 | ``` 478 | 479 | You can use this property to locate a single change: 480 | 481 | ```hbs 482 | {{this.changeset.change.firstName}} 483 | {{this.changeset.change.address.zipCode}} 484 | ``` 485 | 486 | **[⬆️ back to top](#api)** 487 | 488 | #### `errors` 489 | 490 | Returns an array of errors. If your `validate` function returns a non-boolean value, it is added here as the `validation` property. 491 | 492 | ```js 493 | [ 494 | { 495 | key: "firstName", 496 | value: "Jim", 497 | validation: "First name must be greater than 7 characters", 498 | }, 499 | { 500 | key: "address.zipCode", 501 | value: "123", 502 | validation: "Zip code must have 5 digits", 503 | }, 504 | ]; 505 | ``` 506 | 507 | You can use this property to render a list of errors: 508 | 509 | ```hbs 510 | {{#if this.changeset.isInvalid}} 511 |There were errors in your form:
512 |-
513 | {{#each this.changeset.errors as |error|}}
514 |
- {{error.key}}: {{error.validation}} 515 | {{/each}} 516 |
-
543 | {{#each this.changeset.changes as |change|}}
544 |
- {{change.key}}: {{change.value}} 545 | {{/each}} 546 |
Good job!
595 | {{/if}} 596 | ``` 597 | 598 | **[⬆️ back to top](#api)** 599 | 600 | #### `isInvalid` 601 | 602 | Returns a Boolean value of the changeset's (in)validity. 603 | 604 | ```js 605 | changeset.isInvalid; // true 606 | ``` 607 | 608 | You can use this property in the template: 609 | 610 | ```hbs 611 | {{#if this.changeset.isInvalid}} 612 |There were one or more errors in your form
613 | {{/if}} 614 | ``` 615 | 616 | **[⬆️ back to top](#api)** 617 | 618 | #### `isPristine` 619 | 620 | Returns a Boolean value of the changeset's state. A pristine changeset is one with no changes. 621 | 622 | ```js 623 | changeset.isPristine; // true 624 | ``` 625 | 626 | If changes present on the changeset are equal to the content's, this will return `true`. However, note that key/value pairs in the list of changes must all be present and equal on the content, but not necessarily vice versa: 627 | 628 | ```js 629 | let user = { name: "Bobby", age: 21, address: { zipCode: "10001" } }; 630 | 631 | changeset.set("name", "Bobby"); 632 | changeset.isPristine; // true 633 | 634 | changeset.set("address.zipCode", "10001"); 635 | changeset.isPristine; // true 636 | 637 | changeset.set("foo", "bar"); 638 | changeset.isPristine; // false 639 | ``` 640 | 641 | **[⬆️ back to top](#api)** 642 | 643 | #### `isDirty` 644 | 645 | Returns a Boolean value of the changeset's state. A dirty changeset is one with changes. 646 | 647 | ```js 648 | changeset.isDirty; // true 649 | ``` 650 | 651 | **[⬆️ back to top](#api)** 652 | 653 | #### `get` 654 | 655 | Exactly the same semantics as `Ember.get`. This proxies first to the error value, the changed value, and finally to the underlying Object. 656 | 657 | ```js 658 | changeset.get("firstName"); // "Jim" 659 | changeset.set("firstName", "Billy"); // "Billy" 660 | changeset.get("firstName"); // "Billy" 661 | 662 | changeset.get("address.zipCode"); // "10001" 663 | changeset.set("address.zipCode", "94016"); // "94016" 664 | changeset.get("address.zipCode"); // "94016" 665 | ``` 666 | 667 | You can use and bind this property in the template: 668 | 669 | ```hbs 670 | 671 | ``` 672 | 673 | Note that using `Ember.get` **will not necessarily work if you're expecting an Object**. On the other hand, using `changeset.get` will work just fine: 674 | 675 | ```js 676 | get(changeset, "momentObj").format("dddd"); // will error, format is undefined 677 | changeset.get("momentObj").format("dddd"); // => "Friday" 678 | ``` 679 | 680 | This is because `Changeset` wraps an Object with `Ember.ObjectProxy` internally, and overrides `Ember.Object.get` to hide this implementation detail. 681 | 682 | Because an Object is wrapped with `Ember.ObjectProxy`, the following (although more verbose) will also work: 683 | 684 | ```js 685 | get(changeset, "momentObj.content").format("dddd"); // => "Friday" 686 | ``` 687 | 688 | **[⬆️ back to top](#api)** 689 | 690 | #### `set` 691 | 692 | Exactly the same semantics as `Ember.set`. This stores the change on the changeset. It is recommended to use `changeset.set(...)` instead of `Ember.set(changeset, ...)`. `Ember.set` will set the property for nested keys on the underlying model. 693 | 694 | ```js 695 | changeset.set("firstName", "Milton"); // "Milton" 696 | changeset.set("address.zipCode", "10001"); // "10001" 697 | ``` 698 | 699 | You can use and bind this property in the template: 700 | 701 | ```hbs 702 | 703 | 704 | ``` 705 | 706 | Any updates on this value will only store the change on the changeset, even with 2 way binding. 707 | 708 | **[⬆️ back to top](#api)** 709 | 710 | #### `prepare` 711 | 712 | Provides a function to run before emitting changes to the model. The callback function must return a hash in the same shape: 713 | 714 | ```js 715 | changeset.prepare((changes) => { 716 | // changes = { firstName: "Jim", lastName: "Bob", 'address.zipCode': "07030" }; 717 | let modified = {}; 718 | 719 | for (let key in changes) { 720 | let newKey = key.split(".").map(underscore).join("."); 721 | modified[newKey] = changes[key]; 722 | } 723 | 724 | // don't forget to return, the original changes object is not mutated 725 | // modified = { first_name: "Jim", last_name: "Bob", 'address.zip_code': "07030" }; 726 | return modified; 727 | }); // returns changeset 728 | ``` 729 | 730 | The callback function is **not validated** – if you modify a value, it is your responsibility to ensure that it is valid. 731 | 732 | Returns the changeset. 733 | 734 | **[⬆️ back to top](#api)** 735 | 736 | #### `execute` 737 | 738 | Applies the valid changes to the underlying Object. 739 | 740 | ```js 741 | changeset.execute(); // returns changeset 742 | ``` 743 | 744 | Note that executing the changeset will not remove the internal list of changes - instead, you should do so explicitly with `rollback` or `save` if that is desired. 745 | 746 | **[⬆️ back to top](#api)** 747 | 748 | #### `unexecute` 749 | 750 | Undo changes made to underlying Object for changeset. This is often useful if you want to remove changes from underlying Object if `save` fails. 751 | 752 | ```js 753 | changeset.save().catch(() => { 754 | // save applies changes to the underlying Object via this.execute(). This may be undesired for your use case. 755 | dummyChangeset.unexecute(); 756 | }); 757 | ``` 758 | 759 | **[⬆️ back to top](#api)** 760 | 761 | #### `save` 762 | 763 | Executes changes, then proxies to the underlying Object's `save` method, if one exists. If it does, the method can either return a `Promise` or a non-`Promise` value. Either way, the changeset's `save` method will return 764 | a promise. 765 | 766 | ```js 767 | changeset.save(); // returns Promise 768 | ``` 769 | 770 | The `save` method will also remove the internal list of changes if the `save` is successful. 771 | 772 | **[⬆️ back to top](#api)** 773 | 774 | #### `merge` 775 | 776 | Merges 2 changesets and returns a new changeset with the same underlying content and validator as the origin. Both changesets must point to the same underlying object. For example: 777 | 778 | ```js 779 | let changesetA = Changeset(user, validatorFn); 780 | let changesetB = Changeset(user, validatorFn); 781 | 782 | changesetA.set("firstName", "Jim"); 783 | changesetA.set("address.zipCode", "94016"); 784 | 785 | changesetB.set("firstName", "Jimmy"); 786 | changesetB.set("lastName", "Fallon"); 787 | changesetB.set("address.zipCode", "10112"); 788 | 789 | let changesetC = changesetA.merge(changesetB); 790 | changesetC.execute(); 791 | 792 | user.get("firstName"); // "Jimmy" 793 | user.get("lastName"); // "Fallon" 794 | user.get("address.zipCode"); // "10112" 795 | ``` 796 | 797 | **[⬆️ back to top](#api)** 798 | 799 | #### `rollback` 800 | 801 | Rolls back all unsaved changes and resets all errors. 802 | 803 | ```js 804 | changeset.rollback(); // returns changeset 805 | ``` 806 | 807 | **[⬆️ back to top](#api)** 808 | 809 | #### `rollbackInvalid` 810 | 811 | Rolls back all invalid unsaved changes and resets all errors. Valid changes will be kept on the changeset. 812 | 813 | ```js 814 | changeset.rollbackInvalid(); // returns changeset 815 | ``` 816 | 817 | **[⬆️ back to top](#api)** 818 | 819 | #### `rollbackProperty` 820 | 821 | Rolls back unsaved changes for the specified property only. All other changes will be kept on the changeset. 822 | 823 | ```js 824 | // user = { firstName: "Jim", lastName: "Bob" }; 825 | let changeset = Changeset(user); 826 | changeset.set("firstName", "Jimmy"); 827 | changeset.set("lastName", "Fallon"); 828 | changeset.rollbackProperty("lastName"); // returns changeset 829 | changeset.execute(); 830 | user.get("firstName"); // "Jimmy" 831 | user.get("lastName"); // "Bob" 832 | ``` 833 | 834 | **[⬆️ back to top](#api)** 835 | 836 | #### `validate` 837 | 838 | Validates all, single or multiple fields on the changeset. This will also validate the property on the underlying object, and is a useful method if you require the changeset to validate immediately on render. 839 | 840 | **Note:** This method requires a validation map to be passed in when the changeset is first instantiated. 841 | 842 | ```js 843 | user.set("lastName", "B"); 844 | user.set("address.zipCode", "123"); 845 | 846 | let validationMap = { 847 | lastName: validateLength({ min: 8 }), 848 | 849 | // specify nested keys with pojo's 850 | address: { 851 | zipCode: validateLength({ is: 5 }), 852 | }, 853 | }; 854 | 855 | let changeset = Changeset(user, validatorFn, validationMap); 856 | changeset.get("isValid"); // true 857 | 858 | // validate single field; returns Promise 859 | changeset.validate("lastName"); 860 | changeset.validate("address.zipCode"); 861 | // multiple keys 862 | changeset.validate("lastName", "address.zipCode"); 863 | 864 | // validate all fields; returns Promise 865 | changeset.validate().then(() => { 866 | changeset.get("isInvalid"); // true 867 | 868 | // [{ key: 'lastName', validation: 'too short', value: 'B' }, 869 | // { key: 'address.zipCode', validation: 'too short', value: '123' }] 870 | changeset.get("errors"); 871 | }); 872 | ``` 873 | 874 | **[⬆️ back to top](#api)** 875 | 876 | #### `addError` 877 | 878 | Manually add an error to the changeset. 879 | 880 | ```js 881 | changeset.addError("email", { 882 | value: "jim@bob.com", 883 | validation: "Email already taken", 884 | }); 885 | 886 | changeset.addError("address.zip", { 887 | value: "123", 888 | validation: "Must be 5 digits", 889 | }); 890 | 891 | // shortcut 892 | changeset.addError("email", "Email already taken"); 893 | changeset.addError("address.zip", "Must be 5 digits"); 894 | ``` 895 | 896 | Adding an error manually does not require any special setup. The error will be cleared if the value for the `key` is subsequently set to a valid value. Adding an error will overwrite any existing error or change for `key`. 897 | 898 | If using the shortcut method, the value in the changeset will be used as the value for the error. 899 | 900 | **[⬆️ back to top](#api)** 901 | 902 | #### `pushErrors` 903 | 904 | Manually push errors to the changeset. 905 | 906 | ```js 907 | changeset.pushErrors( 908 | "age", 909 | "Too short", 910 | "Not a valid number", 911 | "Must be greater than 18", 912 | ); 913 | changeset.pushErrors( 914 | "dogYears.age", 915 | "Too short", 916 | "Not a valid number", 917 | "Must be greater than 2.5", 918 | ); 919 | ``` 920 | 921 | This is compatible with `ember-changeset-validations`, and allows you to either add a new error with multiple validation messages or push to an existing array of validation messages. 922 | 923 | **[⬆️ back to top](#api)** 924 | 925 | #### `removeError` 926 | 927 | Manually remove an error from the changeset. 928 | 929 | ```js 930 | changeset.removeError("email"); 931 | ``` 932 | 933 | Removes an error without having to rollback the property. 934 | 935 | **[⬆️ back to top](#api)** 936 | 937 | #### `removeErrors` 938 | 939 | Manually remove an error from the changeset. 940 | 941 | ```js 942 | changeset.removeErrors(); 943 | ``` 944 | 945 | Removes all the errors without having to rollback properties. 946 | 947 | **[⬆️ back to top](#api)** 948 | 949 | #### `snapshot` 950 | 951 | Creates a snapshot of the changeset's errors and changes. This can be used to `restore` the changeset at a later time. 952 | 953 | ```js 954 | let snapshot = changeset.snapshot(); // snapshot 955 | ``` 956 | 957 | **[⬆️ back to top](#api)** 958 | 959 | #### `restore` 960 | 961 | Restores a snapshot of changes and errors to the changeset. This overrides existing changes and errors. 962 | 963 | ```js 964 | let user = { name: "Adam", address: { country: "United States" } }; 965 | let changeset = Changeset(user, validatorFn); 966 | 967 | changeset.set("name", "Jim Bob"); 968 | changeset.set("address.country", "North Korea"); 969 | let snapshot = changeset.snapshot(); 970 | 971 | changeset.set("name", "Poteto"); 972 | changeset.set("address.country", "Australia"); 973 | 974 | changeset.restore(snapshot); 975 | changeset.get("name"); // "Jim Bob" 976 | changeset.get("address.country"); // "North Korea" 977 | ``` 978 | 979 | **[⬆️ back to top](#api)** 980 | 981 | #### `cast` 982 | 983 | Unlike `Ecto.Changeset.cast`, `cast` will take an array of allowed keys and remove unwanted keys off of the changeset. 984 | 985 | ```js 986 | let allowed = ["name", "password", "address.country"]; 987 | let changeset = Changeset(user, validatorFn); 988 | 989 | changeset.set("name", "Jim Bob"); 990 | changeset.set("address.country", "United States"); 991 | 992 | changeset.set("unwantedProp", "foo"); 993 | changeset.set("address.unwantedProp", 123); 994 | changeset.get("unwantedProp"); // "foo" 995 | changeset.get("address.unwantedProp"); // 123 996 | 997 | changeset.cast(allowed); // returns changeset 998 | changeset.get("unwantedProp"); // undefined 999 | changeset.get("address.country"); // "United States" 1000 | changeset.get("another.unwantedProp"); // undefined 1001 | ``` 1002 | 1003 | For example, this method can be used to only allow specified changes through prior to saving. 1004 | This is especially useful if you also setup a `schema` object for your model (using Ember Data), which can then be exported and used as a list of allowed keys: 1005 | 1006 | ```js 1007 | // models/user.js 1008 | export const schema = { 1009 | name: attr("string"), 1010 | password: attr("string"), 1011 | }; 1012 | 1013 | export default Model.extend(schema); 1014 | ``` 1015 | 1016 | ```js 1017 | // controllers/foo.js 1018 | import { action } from '@ember/object'; 1019 | import { schema } from '../models/user'; 1020 | const { keys } = Object; 1021 | 1022 | export default FooController extends Controller { 1023 | // ... 1024 | 1025 | @action 1026 | save(changeset) { 1027 | return changeset.cast(keys(schema)).save(); 1028 | } 1029 | } 1030 | ``` 1031 | 1032 | **[⬆️ back to top](#api)** 1033 | 1034 | #### `isValidating` 1035 | 1036 | Checks to see if async validator for a given key has not resolved. If no key is provided it will check to see if any async validator is running. 1037 | 1038 | ```js 1039 | changeset.set("lastName", "Appleseed"); 1040 | changeset.set("firstName", "Johnny"); 1041 | changeset.set("address.city", "Anchorage"); 1042 | changeset.validate(); 1043 | 1044 | changeset.isValidating(); // true if any async validation is still running 1045 | changeset.isValidating("lastName"); // true if lastName validation is async and still running 1046 | changeset.isValidating("address.city"); // true if address.city validation is async and still running 1047 | 1048 | changeset.validate().then(() => { 1049 | changeset.isValidating(); // false since validations are complete 1050 | }); 1051 | ``` 1052 | 1053 | **[⬆️ back to top](#api)** 1054 | 1055 | #### `beforeValidation` 1056 | 1057 | This event is triggered after isValidating is set to true for a key, but before the validation is complete. 1058 | 1059 | ```js 1060 | changeset.on("beforeValidation", (key) => { 1061 | console.log(`${key} is validating...`); 1062 | }); 1063 | changeset.validate(); 1064 | changeset.isValidating(); // true 1065 | // console output: lastName is validating... 1066 | // console output: address.city is validating... 1067 | ``` 1068 | 1069 | **[⬆️ back to top](#api)** 1070 | 1071 | #### `afterValidation` 1072 | 1073 | This event is triggered after async validations are complete and isValidating is set to false for a key. 1074 | 1075 | ```js 1076 | changeset.on("afterValidation", (key) => { 1077 | console.log(`${key} has completed validating`); 1078 | }); 1079 | changeset.validate().then(() => { 1080 | changeset.isValidating(); // false 1081 | // console output: lastName has completed validating 1082 | // console output: address.city has completed validating 1083 | }); 1084 | ``` 1085 | 1086 | **[⬆️ back to top](#api)** 1087 | 1088 | #### `afterRollback` 1089 | 1090 | This event is triggered after a rollback of the changeset. 1091 | This can be used for [some advanced use cases](https://github.com/offirgolan/ember-changeset-cp-validations/issues/25#issuecomment-375855834) 1092 | where it is necessary to separately track all changes that are made to the changeset. 1093 | 1094 | ```js 1095 | changeset.on("afterRollback", () => { 1096 | console.log("changeset has rolled back"); 1097 | }); 1098 | changeset.rollback(); 1099 | // console output: changeset has rolled back 1100 | ``` 1101 | 1102 | **[⬆️ back to top](#api)** 1103 | 1104 | ## Validation signature 1105 | 1106 | To use with your favorite validation library, you should create a custom `validator` action to be passed into the changeset: 1107 | 1108 | ```js 1109 | // application/controller.js 1110 | import Controller from "@ember/controller"; 1111 | import { action } from "@ember/object"; 1112 | 1113 | export default class FormController extends Controller { 1114 | @action 1115 | validate({ key, newValue, oldValue, changes, content }) { 1116 | // lookup a validator function on your favorite validation library 1117 | // should return a Boolean 1118 | } 1119 | } 1120 | ``` 1121 | 1122 | ```hbs 1123 | {{! application/template.hbs}} 1124 |
1244 | 
1245 | 
1246 | 
1247 | 
1248 | 
1249 | 
1250 | 
1251 | 
1252 | 
1253 | 
1254 | 
1255 | 
1256 | 
1257 | 
1258 | 
1259 | 
1260 | 
1261 | 
1262 | 
1263 | 
1264 | 
1265 | 
1266 | 
1267 | 
1268 | 
1269 | 
1270 | 
1271 | 
1272 |
1273 | [//]: contributor-faces
1274 |
1275 | ## Contributing
1276 |
1277 | See the [Contributing](CONTRIBUTING.md) guide for details.
1278 |
1279 | ## License
1280 |
1281 | This project is licensed under the [MIT License](LICENSE.md).
1282 |
--------------------------------------------------------------------------------