feat: add lazy validators initialization

.eslintignore

@@ -18,3 +18,6 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+# Until TS Linting is set up
+/index.d.ts

README.md

@@ -41,24 +41,48 @@ class MyForm extends Component {
 }
 ```
 
-### ValidationState type definition
+```hbs
+<input value={{this.username}} />
+
+{{#unless this.formValidState.attrs.username.isValid}}
+  {{#each this.formValidState.attrs.username.messages as |msg|}}
+    <p>{{msg}}</p>
+  {{/each}}
+{{/unless}}
+```
 
-```ts
-interface AttributeValidation {
-  messages: string[];
-  isValid: boolean;
-}
+You can also pass a "thunk" to the `validationState` decorator, for lazy initialization of your Validators:
 
-interface Attrs {
-  [propertyName: string]: AttributeValidation;
-}
+```js
+import Component from '@glimmer/component';
+import validationState, { validate } from 'ember-validation-state';
+
+const Validators = {
+  username: [validate('presence', { presence: true })],
+  password: [validate('length', { min: 6 })]
+};
+
+class MyForm extends Component {
+  @tracked username = null;
+  @tracked password = null;
+
+  @validationState((component) => component.limitedValidators) validationState;
 
-interface ValidationState {
-  isValid: boolean;
-  attrs: Attrs
+  get limitedValidators() {
+    if (!this.args.username) {
+      return {
+        password: Validators['password']
+      };
+    }
+  }
 }
 ```
 
+### ValidationState definition
+
+Please refer to the types in [`index.d.ts`](./index.d.ts) for full typescript type definitions.
+
+
 ## Intl
 
 By default, if ember-intl is installed, validationState will attempt to look for a message for a specific validation error in your translations file. If no key is present, it will fall back to the ember-validators message.
@@ -160,6 +184,31 @@ class MyForm extends Component {
 }
 ```
 
+## Usage with Typescript
+
+This package, although not yet rewritten in Typescript, is fully compatible and exports its own types.<br>
+
+To have full typings support of the property initialized by `validationState`, utilize the `ValidationState` type:
+
+```ts
+import validationState, {
+  validate,
+  ValidationState,
+} from 'ember-validation-state';
+
+const AttrValidators = {
+  name: [validate('presence', { presence: true })],
+  description: [validate('presence', { presence: true })],
+};
+
+export default class {
+  @validationState(AttrValidators)
+  declare formValidState: ValidationState<typeof AttrValidators>;
+}
+```
+
+Utilizing the generic argument `typeof AttrValidators` provides autocomplete for the `formValidState.attrs` hash.
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

addon/index.js

@@ -1,4 +1,5 @@
 import { getOwner } from '@ember/application';
+import { typeOf } from '@ember/utils';
 import macro from 'macro-decorators';
 import { validate as _validate } from 'ember-validators';
 
@@ -34,19 +35,25 @@ import { validate as _validate } from 'ember-validators';
  */
 export default function validationState(VALIDATOR_FNS) {
   return macro(function () {
+    let validatorFns = VALIDATOR_FNS;
+
+    if (typeOf(VALIDATOR_FNS) === 'function') {
+      validatorFns = VALIDATOR_FNS(this);
+    }
+
     const attrState = {};
 
     const messages = getOwner(this).lookup('validation-state:messages');
 
     let formValid = true;
 
-    for (const key in VALIDATOR_FNS) {
+    for (const key in validatorFns) {
       attrState[key] = {
         messages: [],
         isValid: true
       };
 
-      for (const validator of VALIDATOR_FNS[key]) {
+      for (const validator of validatorFns[key]) {
         const [computedValid, message] = validator.apply(this, [
           this[key],
           messages

index.d.ts

@@ -0,0 +1,21 @@
+type Validators = Record<string, any[]>;
+
+type AttributeValidation = {
+  messages: string[];
+  isValid: boolean;
+};
+
+type AttrsType<T> = {
+  [P in keyof T]: AttributeValidation;
+};
+
+export type ValidationState<A> = {
+  isValid: boolean;
+  attrs: AttrsType<A>;
+};
+
+export function validate(any, any): any;
+
+export default function validationState(
+  validators: Validators | ((ctx: any) => Validators)
+): PropertyDescriptor<ValidationState<typeof validators>>;

tests/integration/decorators/form-validation-test.js → tests/integration/decorators/validation-state-test.js

@@ -3,7 +3,7 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import validationState, { validate } from 'ember-validation-state';
 
-module('Integration | Decorator | formValidation', function (hooks) {
+module('Integration | Decorator | validationState', function (hooks) {
   setupApplicationTest(hooks);
 
   test('returns a state object, which has a falsey `isValid` value if one key fails any of its validations', function (assert) {
@@ -26,6 +26,28 @@ module('Integration | Decorator | formValidation', function (hooks) {
     assert.equal(svc.validState.isValid, false);
   });
 
+  test('can pass a lazy "thunk" for validator initialization', function (assert) {
+    class ValidatedService extends Service {
+      email = null;
+
+      @validationState((component) => component.validations) validState;
+
+      get validations() {
+        return {
+          email: [
+            validate('presence', { presence: true }),
+            validate('format', { type: 'email' })
+          ]
+        };
+      }
+    }
+
+    this.owner.register('service:validated', ValidatedService);
+    const svc = this.owner.lookup('service:validated');
+
+    assert.equal(svc.validState.isValid, false);
+  });
+
   test('invalid key returns a message to display', function (assert) {
     const validations = {
       email: [