Merge pull request #7 from SimplrJS/feature/lerna

Feature/lerna

Author: DovydasNavickas

.gitignore

@@ -250,3 +250,4 @@ paket-files/
 # JetBrains Rider
 .idea/
 *.sln.iml
+yarn.lock

docs/2017-04/2017-04-08.md

@@ -1,161 +0,0 @@
-## April 8 ([discuss](https://github.com/SimplrJS/simplr-forms/pull/1))
-
-### Attendees
-
-* [Dovydas](https://twitter.com/dovydasnav) (QuatroDev)
-* [Martynas](https://twitter.com/MartiogalaLT) (QuatroDev)
-
-### Why do we need yet another forms library?
-
-Over the past few years we worked with React, we tried **MANY** form libraries that are out there.
-
-#### Problems with existing libraries
-
-* There is no de-facto standard library for forms in React, like there is for routing ([react-router](https://github.com/ReactTraining/react-router))
-* They all have their limitations and usually big ones
-* Performance is usually bottlenecking as the project grows
-* No really flux friendly
-* Not friendly with TypeScript
-* There is not a single library that is built **in the React way**
-
-Ok, so the big one is the libraries can never be consumed in a **React** way, which raises a whole bunch of other problems:
-* You have to learn everything from the ground up to use the library
-* When you write your app in a declarative react way, you have to fallback to imperative or semi-imperative way for forms
-* Library has to reinvent the wheel to *do things*
-* Lifecycle management becomes hell on earth
-* Race conditions appear out of the blue
-
-I could go on here, but [Michael Jackson](https://github.com/mjackson) said it better [here](https://www.youtube.com/watch?v=Vur2dAFZ4GE)
-and the problems are more than apparent.
-
-## So why do we start now?
-
-Well, technically, we started almost a year ago (Jan 12, 2016) by building a `simplr-forms` v0.0.4 and used it internally.
-
-v1.0.0 was also released internally on May 30, 2016.
-
-v2.0.0 as well, released internally on September 7th, 2016.
-
-We introduced v3.0.0-beta in Dec 7, 2016. And we made all possible mistakes during these 3 versions (hopefully).
-
-We had 113 different alphas, betas, RCs and stable ones in between.
-
-And more than a year later, we still don't see a proper library for forms out there. This is why we are putting the efforts into
-spec'ing, architecting and building the library out there in public.
-
-### What's the plan?
-
-For a few days already we were talking and ploting the architecture, raising and solving problems on the whiteboard.
-At the moment we are ready to to start coding, but first - we'll try to write out ideas.
-
-### Integrity with flux
-
-During 3 versions, we tried different approaches, to have forms:
-- Live on their own
-- Live in the flux lifecycle
-- Something in between the first two
-
-At the moment, we think the best way to have responsive forms (as of fast response time), we have to make the library live on its own.
-
-And for architectural integration (flux/redux/mobx/etc), we hope to make initial flux and redux versions ourselves and then get some help from community as the library becomes **the best forms library out there**.
-
-## Let's get to the point
-
-### Lifecycle
-
-For forms lifecycle, we will be using somewhat flux-ish architecture of actions and at first and it's gonna be quick-and-dirty switches and immutable objects. Later on, we will incorporate [simplr-flux package](https://github.com/SimplrJS/simplr-flux), as we will open-source it soon.
-
-### Principles
-
-1. The source code is written in TypeScript.
-2. Architecture is compile-time checked as much as possible.
-3. Declarative API first. An imperative API is not going to be first-class citizen.
-4. Simplicity in developer-facing API, performance in the backend.
-5. Have React Fiber in mind.
-6. Validation is first-class citizen.
-
-### Code samples
-
-To get the idea how JSX looks:
-
-```tsx
-<Form onSubmit={this.onFormSubmit}>
-    <Text name="FirstName">
-        <Validators.MinLength value={3} errorMessage="First name has to be at least ${value} long."/>
-        <Validators.MaxLength value={10} errorMessage="First name has to be at most ${value} long."/>
-    </Text>
-    <Submit>Submit</Submit>
-</Form>
-```
-
-And the rendered DOM:
-```html
-<form>
-    <input type="text" name="FirstName" />
-    <button type="submit">Submit</button>
-</form>
-```
-
-As you can see, no wrappers, no custom elements, divs, spans or anything, just a clean form with inputs and buttons.
-
-Having clean output really helps with styling, because you see the same structure in JSX, except for `simplr-forms` specific validators inside text element.
-
-For now, we have to render validators in the virtual DOM, because `input` elements cannot have childrens (at least some of them).
-
-That will change with React Fiber coming in as it will have the ability to return array of elements in the `render` function. With that change, we will be able to render validators alongside, but, of course, that is yet to come.
-
-### Validators
-
-A really important functionality while using forms is data validation.
-
-And the main pains behind validation are:
-* Reusability of validators code
-* An easy way of defining the requirements of your data
-
-Imperative API is probably the worst solution for this, which leaves a nice spot for declarative one. Unfortunately, there is no way of doing that today, but...
-
-We have another package `simplr-validation`, which was released internally on Feb 15, 2016 and did not change much since. We had 19 versions of the package and most of them were adding functionality, not changing the core principles. Which means the package is done right from the start.
-
-#### More interesting use case
-
-Want to have your mind blown?
-
-Suppose you need to validate your username to be:
-* 4 to 128 symbols of length
-* Unique in your system, which is a call to your server
-
-Take a second to think how would you approach it today. Then look at this:
-
-```tsx
-import { MinLength, MaxLength, DebouncerValidator } from "simplr-forms-core/validators";
-
-<Text name="username">
-    <MinLength value={4} errorMessage="Min length is ${value}!" />
-    <MaxLength value={128} errorMessage="Max length is ${value}!" />
-    /*
-        Waits for 3 seconds before executing to the next validator.
-        If the value changes before debouncer expires, 
-        the validation will be stopped and rejected as an error.
-        Also, form store will ignore validation changes until the value is the newest, 
-        therefore store will update validation result to Valid or Invalid 
-        only after ALL needed validators are executed.
-    */ 
-    <DebouncerValidator value={3000} />
-    <CostyValidatorToTheServer />
-</Text>
-```
-
-What you see here is a declarative way to check all of the requirements *AND* do it in an optimal manner, which is debouncing for some time until the user stops typing the username.
-
-Mind blown? :tada: I hoped so. :clap:
-
-### Coding time!
-
-There are more things to cover here, but we are already hyped-up to get our hands dirty and start coding.
-
-The feedback and questions are more than welcome!
-
-------------
-
-Please feel free to discuss these notes in the [corresponding pull request](https://github.com/SimplrJS/simplr-forms/pull/1).
-  

docs/2017-04/2017-04-14.md

@@ -0,0 +1,88 @@
+## April 14 ([discuss](https://github.com/SimplrJS/simplr-forms/pull/4))
+
+### Attendees
+
+* [Dovydas](https://twitter.com/dovydasnav) (QuatroDev)
+* [Martynas](https://twitter.com/MartiogalaLT) (QuatroDev)
+* [Giedrius](https://twitter.com/giedrucis) (QuatroDev)
+* [Aurimas](https://twitter.com/waikys) (QuatroDev)
+
+### simplr-forms-core is done for pre-alpha
+
+During the week, we worked on `simplr-forms-core` to have a solid foundation for `simplr-forms-dom` and `simplr-forms-native`.
+
+Most of the coding was done by Dovydas and Martynas, with valuable and fast reviews by Giedrius.
+Feels good to work with such an amazing team.
+
+Also, Aurimas joined our efforts by preparing react-native app for development of `simplr-forms-native`. Thanks, Aurimas!
+
+We will start working on both `dom` and `native` packages soon.
+
+### So... What happened during the week?
+
+We can confidently say that we have a solid first appearances of `core`, which consists of:
+* [`form-stores-handler`][1] - a general manager for all forms data stores
+* [`form-store`][2] - a data store for one particular form
+* [`base-form`][3] - a base component for a form to register to store and provide context for children, register with `form-stores-handler`, etc.
+* [`base-field`][4] - a base component for field that is aware of the parent form, registers and registers to and from form store, incorporates React lifecycle events, etc. 
+
+These 4 pretty much cover the base of the whole library.
+
+Of course, there is more to it.
+
+[`form-stores-handler`][1] and [`base-form`][3] extend [`ActionEmitter`][5] for you to be able to `addListener`
+for actions and know when the store is created, updates it's state or even more specific [actions][6],
+e.g. [value][7] or [props][8] are updated.
+
+This enables another amazing thing: now we can externalize validation!
+
+> Shoutout to Giedrius for publishing [`ActionEmitter`][5] right on time.
+> And for us all to debugging it in a single day :smile:
+
+### Externalized validation
+
+We understand that most developers use whatever they get out-of-the-box,
+especially if what they get is an easy-to-consume and also an optimal solution.
+
+But sometimes usage of project-specific validation library is a must.
+
+For example, there are quite a few industries with very specific data structures and their validations.
+Medicine, aviation, insurance, finance... And that's just a few on the tip of the tongue.
+
+Therefore, externalizing validation is an amazing step forward to using `simplr-forms`
+no matter what data validation requirements you have.
+
+### Testing
+
+A library without tests these days is a scary and unstable bomb with a timer that shows gibberish on it's timer,
+i.e. you don't know when it is gonna hit you.
+
+Therefore, we already have 44 tests in 4 test suites.
+
+And we will write as much more as we need to ensure everything will progress forward
+and this library becomes de-facto a standard, a no brainer when anyone thinks about React and forms.
+
+### What's next?
+
+Releasing pre-alpha of `simplr-forms-core` and starting development of `simplr-forms-dom` and (maybe) `simplr-forms-native`.
+
+Also, `simplr-validation` is coming into the light as we evaluate all of the peaces for it.
+
+And now... It's coding time again! :tada:
+
+------------
+
+The feedback and questions are more than welcome!
+
+------------
+
+Please feel free to discuss these notes in the [corresponding pull request](https://github.com/SimplrJS/simplr-forms/pull/4).
+  
+[1]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/stores/form-stores-handler.ts
+[2]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/stores/form-store.ts
+[3]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/abstractions/base-form.ts
+[4]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/abstractions/base-field.ts
+[5]: https://github.com/SimplrJS/action-emitter
+[6]: https://github.com/SimplrJS/simplr-forms/tree/dev/packages/simplr-forms-core/src/actions
+[7]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/actions/form-store-actions.ts#L3-L9
+[8]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/actions/form-store-actions.ts#L11-L17

lerna.json

@@ -0,0 +1,12 @@
+{
+  "lerna": "2.0.0-rc.1",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "4.0.0-alpha",
+  "command": {
+    "init": {
+      "exact": true
+    }
+  }
+}

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "simplr-forms",
+  "private": true,
+  "scripts": {},
+  "devDependencies": {
+    "lerna": "2.0.0-rc.1",
+    "typescript": "2.3.0"
+  }
+}

packages/simplr-forms-core/__tests__/stores/form-store.test.ts

@@ -157,6 +157,49 @@ describe("Form store", () => {
         }
     });
 
+    it("skip validation when newValue has expired", async (done) => {
+        const formId = "FORM-ID";
+        const fieldId = "FIELD-ID";
+        const initialValue = "INITIAL-VALUE";
+        const formStore = new FormStore(formId);
+        const formError = "field error";
+
+        formStore.RegisterField(fieldId, initialValue);
+        const validationPromise = new Promise<void>((resolve, reject) => {
+            setTimeout(() => {
+                reject(formError);
+            }, 50);
+        });
+
+        formStore.Validate(fieldId, validationPromise);
+
+        // Imitate removal of last letter
+        formStore.ValueChanged(fieldId, initialValue.slice(0, initialValue.length - 1));
+
+        try {
+            expect(formStore.GetField(fieldId).Validating).toBe(true);
+        } catch (error) {
+            done.fail(error);
+        }
+
+        try {
+            await validationPromise;
+        } catch (err) {
+            // Validation promise was rejected
+            // Expects in the subsequent try block
+        }
+
+        try {
+            // It SHOULD still validating to be true because validation was skipped of expired value
+            expect(formStore.GetField(fieldId).Validating).toBe(true);
+            expect(formStore.GetField(fieldId).Error).toBeUndefined();
+        } catch (err) {
+            done.fail(err);
+        }
+
+        done();
+    });
+
     it("registers field with props", () => {
         const formId = "FORM-ID";
         const fieldId = "FIELD-ID";

packages/simplr-forms-core/__tests__/tsconfig.json

@@ -11,7 +11,12 @@
         "pretty": true,
         "strict": true,
         "noEmit": true,
-        "noUnusedLocals": true
+        "noUnusedLocals": true,
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "es6"
+        ]
     },
     "exclude": [
         "node_modules",