Converting to Typescript: first draft

.npmignore

@@ -1,6 +1,4 @@
 /node_modules
-/src
 /examples
 
-.DS_Store
-rollup.config.js
+.DS_Store

README.md

@@ -318,16 +318,17 @@ Instead of using config in the HOC, you can put it in the Component class. This
 - initialValues: `{ propName: value }`
 - validationSchema: `{ propName: (value, props) => 'error'||{} }`
 - validateOnBlur: `boolean`. Default: `true`
-- validateOnChang: `boolean`. Default: `true`
+- validateOnChange: `boolean`. Default: `true`
 
 ##### Props
 - values: `object`
 - errors: `object`
 - touched: `object`
 - isValid: `boolean`
 - handleSubmit: `function`
-- handleChange: `(path || event, value) => {}`. event: `Event: {target: {name || id, value}} || CustomEvent: {detail: {name || id, value}}`
-- handleBlur: `(path || event) => {}`. event: `Event: {target: {name || id}} || CustomEvent: {detail: {name || id}}`
+TODO: new signature for 2 following events + added SetTouched + validate params to setValue
+- handleChange: `(event, value) => {}`. event: `Event: {target: {name || id, value}} || CustomEvent: {detail: {name || id, value}}`
+- handleBlur: `(event) => {}`. event: `Event: {target: {name || id}} || CustomEvent: {detail: {name || id}}`
 - handleValidate: `function`
 - handleReset: `function`
 
@@ -364,7 +365,7 @@ Component must have `name` (means path) or `id` attribute.
 ##### Usage
 `withError(Component)`
 
-Component must have `name` (means path) or `id` attribute.
+Component must have `name`.
 
 ##### Props
 - error: `object`

examples/components/custom-input.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit-element'
+
 import { ifDefined } from 'lit-html/directives/if-defined'
-import { withField } from '../../src/withField'
+import { withField } from '../../dist/index.js'
 
 export default class ExwcInput extends LitElement {
   static get properties() {

examples/components/error-message.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit-element'
-import { withError } from '../../src/withError'
+
+import { withError } from '../../dist/index.js'
 
 export default class ExwcInput extends LitElement {
   createRenderRoot() {

examples/components/lite-form.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit-element'
-import { withForm } from '../../src'
+
+import { withForm } from '../../dist/index.js'
 
 class LiteForm extends LitElement {
   static get properties() {

examples/components/native-form.js

@@ -1,4 +1,4 @@
-import { withForm } from '../../src'
+import { withForm } from '../../dist/index.js'
 
 class LiteForm extends HTMLFormElement {
   connectedCallback() {

examples/forms/NativeElement.js

@@ -1,14 +1,5 @@
 import { html } from 'lit-element'
 
-// const formRender = () =>
-//   html` <custom-input name="login"></custom-input>
-//     <error-message name="login"></error-message>
-
-//     <custom-input name="password" type="password"></custom-input>
-//     <error-message name="password"></error-message>
-
-//     <button type="submit">Submit</button>`
-
 const MyForm = html`
   <h4>Builtin form element</h4>
 

examples/forms/NativeInputsForm.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit-element'
-import { withForm } from '../../src'
+
+import { withForm } from '../../dist/index.js'
 
 class NotWrappedInputsForm extends LitElement {
   createRenderRoot() {

examples/forms/WrappedInputsForm.js

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit-element'
-import { withForm } from '../../src'
 
+import { withForm } from '../../dist/index.js'
 
 class WrappedInputsForm extends LitElement {
   createRenderRoot() {

examples/index.js

@@ -1,21 +1,19 @@
-import { html } from 'lit-element'
-import { render } from 'lit-html'
-
 import './components/custom-input'
 import './components/error-message'
 import './components/lite-form'
 import './components/native-form'
-
 import './forms/NativeInputsForm'
 import './forms/WrappedInputsForm'
+import './style.css'
+
 import BaseClass from './forms/BaseClass'
 import NativeElement from './forms/NativeElement'
-
-import './style.css'
+import { html } from 'lit-element'
+import { render } from 'lit-html'
 
 render(
   html`<not-wrapped-inputs-form></not-wrapped-inputs-form>
-    <wrapped-inputs-form></wrapped-inputs-form>
+  <wrapped-inputs-form></wrapped-inputs-form>
     ${BaseClass} ${NativeElement}`,
   document.getElementById('root')
 )