Validation • Playground • Svelte

App.svelte

validate.js

validation.js

validators.js

import { emailValidator, requiredValidator } from './validators.js'

import { createFieldValidator } from './validation.js'

const [ validity, validate, resetValidation ] = createFieldValidator(requiredValidator(), emailValidator())

let email = null

</script>

<input class="input"

type="text"

bind:value={email}

placeholder="Your Email"

class:field-danger={!$validity.valid}

class:field-success={$validity.valid}

use:validate={email}

{#if $validity.dirty && !$validity.valid}

INVALID - {$validity.message} {$validity.dirty}

</span>

{/if}

<button disabled={!$validity.valid}>Ok, I'm ready!</button>

<button on:click={() => resetValidation()}>Reset Validation</button>

<style>

:global(body) {

display: flex;

flex-direction: column;

}

input {

outline: none;

border-width: 2px;

}

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import { emailValidator, requiredValidator } from './validators.js';

import { createFieldValidator } from './validation.js';

var root_1 = $.template(`<span class="validation-hint svelte-1f3oa18"> </span>`);

var root = $.template(`<input type="text" placeholder="Your Email"> <!> <button>Ok, I'm ready!</button> <button>Reset Validation</button>`, 1);

export default function App($$anchor, $$props) {

$.push($$props, false);

const [$$stores, $$cleanup] = $.setup_stores();

const $validity = () => $.store_get(validity, '$validity', $$stores);

const [validity, validate, resetValidation] = createFieldValidator(requiredValidator(), emailValidator());

let email = $.mutable_state(null);

$.init();

var fragment = root();

var input = $.first_child(fragment);

$.remove_input_defaults(input);

let classes;

$.effect(() => $.bind_value(input, () => $.get(email), ($$value) => $.set(email, $$value)));

$.action(input, ($$node, $$action_arg) => validate?.($$node, $$action_arg), () => $.get(email));

var node = $.sibling(input, 2);

{

var consequent = ($$anchor) => {

var span = root_1();

var text = $.child(span);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

body {

display: flex;

flex-direction: column;

}

input.svelte-1f3oa18 {

outline: none;

border-width: 2px;

}

.validation-hint.svelte-1f3oa18 {

color: red;

padding: 6px 0;

}

.field-danger.svelte-1f3oa18 {

border-color: red;

}

.field-success.svelte-1f3oa18 {

border-color: green;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 757
end: 1034
attributes: []
children: [...] (5)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 766
end: 779
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 766
end: 779
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  PseudoClassSelector {...}
 type: "PseudoClassSelector"
name: "global"
args: SelectorList {...}
 type: "SelectorList"
start: 774
end: 778
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 774
end: 778
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "body"
start: 774
end: 778
 }
 ]
start: 774
end: 778
 }
 ]
 }
 ]
 }
start: 766
end: 779
 }
 ]
start: 766
end: 779
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 780
end: 827
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 784
end: 797
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 801
end: 823
property: "flex-direction"
value: "column"
 }
 ]
 }
start: 766
end: 827
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 831
end: 836
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 831
end: 836
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "input"
start: 831
end: 836
 }
 ]
start: 831
end: 836
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 837
end: 879
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 841
end: 854
property: "outline"
value: "none"
 }
 Declaration {...}
 type: "Declaration"
start: 858
end: 875
property: "border-width"
value: "2px"
 }
 ]
 }
start: 831
end: 879
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 883
end: 899
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 883
end: 899
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "validation-hint"
start: 883
end: 899
 }
 ]
start: 883
end: 899
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 900
end: 936
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 904
end: 914
property: "color"
value: "red"
 }
 Declaration {...}
 type: "Declaration"
start: 918
end: 932
property: "padding"
value: "6px 0"
 }
 ]
 }
start: 883
end: 936
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 940
end: 953
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 940
end: 953
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "field-danger"
start: 940
end: 953
 }
 ]
start: 940
end: 953
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 954
end: 979
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 958
end: 975
property: "border-color"
value: "red"
 }
 ]
 }
start: 940
end: 979
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 983
end: 997
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 983
end: 997
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "field-success"
start: 983
end: 997
 }
 ]
start: 983
end: 997
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 998
end: 1025
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 1002
end: 1021
property: "border-color"
value: "green"
 }
 ]
 }
start: 983
end: 1025
 }
 ]
content:  {...}
 start: 764
end: 1026
styles: "\n\t:global(body) {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t\n\tinput {\n\t\toutline: none;\n\t\tborder-width: 2px;\n\t}\n\t\n\t.validation-hint {\n\t\tcolor: red;\n\t\tpadding: 6px 0;\n\t}\n\t\n\t.field-danger {\n\t\tborder-color: red;\n\t}\n\t\n\t.field-success {\n\t\tborder-color: green;\n\t}\n"
comment: null
 }
 }
js: []
start: 277
end: 755
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (9)
  Text {...}
 type: "Text"
start: 275
end: 277
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 277
end: 489
name: "input"
attributes: [...] (7)
  Attribute {...}
 type: "Attribute"
start: 284
end: 297
name: "class"
value: [...] (1)
  Text {...}
 start: 291
end: 296
type: "Text"
raw: "input"
data: "input"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 304
end: 315
name: "type"
value: [...] (1)
  Text {...}
 start: 310
end: 314
type: "Text"
raw: "text"
data: "text"
 }
 ]
 }
 BindDirective {...}
 start: 322
end: 340
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 334
end: 339
loc:  {...}
 start:  {...}
 line: 12
column: 18
 }
end:  {...}
 line: 12
column: 23
 }
 }
name: "email"
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 347
end: 371
name: "placeholder"
value: [...] (1)
  Text {...}
 start: 360
end: 370
type: "Text"
raw: "Your Email"
data: "Your Email"
 }
 ]
 }
 ClassDirective {...}
 start: 375
end: 412
type: "ClassDirective"
name: "field-danger"
expression: UnaryExpression {...}
 type: "UnaryExpression"
start: 395
end: 411
loc:  {...}
 start:  {...}
 line: 14
column: 23
 }
end:  {...}
 line: 14
column: 39
 }
 }
operator: "!"
prefix: true
argument: MemberExpression {...}
 type: "MemberExpression"
start: 396
end: 411
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 39
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 396
end: 405
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 33
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 406
end: 411
loc:  {...}
 start:  {...}
 line: 14
column: 34
 }
end:  {...}
 line: 14
column: 39
 }
 }
name: "valid"
 }
computed: false
optional: false
 }
 }
modifiers: []
 }
 ClassDirective {...}
 start: 416
end: 453
type: "ClassDirective"
name: "field-success"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 437
end: 452
loc:  {...}
 start:  {...}
 line: 15
column: 24
 }
end:  {...}
 line: 15
column: 39
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 437
end: 446
loc:  {...}
 start:  {...}
 line: 15
column: 24
 }
end:  {...}
 line: 15
column: 33
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 447
end: 452
loc:  {...}
 start:  {...}
 line: 15
column: 34
 }
end:  {...}
 line: 15
column: 39
 }
 }
name: "valid"
 }
computed: false
optional: false
 }
modifiers: []
 }
 UseDirective {...}
 start: 460
end: 480
type: "UseDirective"
name: "validate"
expression: Identifier {...}
 type: "Identifier"
start: 474
end: 479
loc:  {...}
 start:  {...}
 line: 16
column: 20
 }
end:  {...}
 line: 16
column: 25
 }
 }
name: "email"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 489
end: 490
raw: " "
data: " "
 }
 IfBlock {...}
 type: "IfBlock"
elseif: false
start: 490
end: 625
test: LogicalExpression {...}
 type: "LogicalExpression"
start: 495
end: 530
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 40
 }
 }
left: MemberExpression {...}
 type: "MemberExpression"
start: 495
end: 510
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 20
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 495
end: 504
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 14
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 505
end: 510
loc:  {...}
 start:  {...}
 line: 18
column: 15
 }
end:  {...}
 line: 18
column: 20
 }
 }
name: "dirty"
 }
computed: false
optional: false
 }
operator: "&&"
right: UnaryExpression {...}
 type: "UnaryExpression"
start: 514
end: 530
loc:  {...}
 start:  {...}
 line: 18
column: 24
 }
end:  {...}
 line: 18
column: 40
 }
 }
operator: "!"
prefix: true
argument: MemberExpression {...}
 type: "MemberExpression"
start: 515
end: 530
loc:  {...}
 start:  {...}
 line: 18
column: 25
 }
end:  {...}
 line: 18
column: 40
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 515
end: 524
loc:  {...}
 start:  {...}
 line: 18
column: 25
 }
end:  {...}
 line: 18
column: 34
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 525
end: 530
loc:  {...}
 start:  {...}
 line: 18
column: 35
 }
end:  {...}
 line: 18
column: 40
 }
 }
name: "valid"
 }
computed: false
optional: false
 }
 }
 }
consequent: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 531
end: 532
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 532
end: 619
name: "span"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 538
end: 561
name: "class"
value: [...] (1)
  Text {...}
 start: 545
end: 560
type: "Text"
raw: "validation-hint"
data: "validation-hint"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 562
end: 574
raw: "INVALID - "
data: "INVALID - "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 574
end: 593
expression: MemberExpression {...}
 type: "MemberExpression"
start: 575
end: 592
loc:  {...}
 start:  {...}
 line: 20
column: 12
 }
end:  {...}
 line: 20
column: 29
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 575
end: 584
loc:  {...}
 start:  {...}
 line: 20
column: 12
 }
end:  {...}
 line: 20
column: 21
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 585
end: 592
loc:  {...}
 start:  {...}
 line: 20
column: 22
 }
end:  {...}
 line: 20
column: 29
 }
 }
name: "message"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 593
end: 594
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 594
end: 611
expression: MemberExpression {...}
 type: "MemberExpression"
start: 595
end: 610
loc:  {...}
 start:  {...}
 line: 20
column: 32
 }
end:  {...}
 line: 20
column: 47
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 595
end: 604
loc:  {...}
 start:  {...}
 line: 20
column: 32
 }
end:  {...}
 line: 20
column: 41
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 605
end: 610
loc:  {...}
 start:  {...}
 line: 20
column: 42
 }
end:  {...}
 line: 20
column: 47
 }
 }
name: "dirty"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 611
end: 612
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 619
end: 620
raw: "\n"
data: "\n"
 }
 ]
 }
alternate: null
 }
 Text {...}
 type: "Text"
start: 625
end: 627
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 627
end: 686
name: "button"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 635
end: 662
name: "disabled"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 644
end: 662
expression: UnaryExpression {...}
 type: "UnaryExpression"
start: 645
end: 661
loc:  {...}
 start:  {...}
 line: 24
column: 18
 }
end:  {...}
 line: 24
column: 34
 }
 }
operator: "!"
prefix: true
argument: MemberExpression {...}
 type: "MemberExpression"
start: 646
end: 661
loc:  {...}
 start:  {...}
 line: 24
column: 19
 }
end:  {...}
 line: 24
column: 34
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 646
end: 655
loc:  {...}
 start:  {...}
 line: 24
column: 19
 }
end:  {...}
 line: 24
column: 28
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 656
end: 661
loc:  {...}
 start:  {...}
 line: 24
column: 29
 }
end:  {...}
 line: 24
column: 34
 }
 }
name: "valid"
 }
computed: false
optional: false
 }
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 663
end: 677
raw: "Ok, I'm ready!"
data: "Ok, I'm ready!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 686
end: 687
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 687
end: 755
name: "button"
attributes: [...] (1)
  OnDirective {...}
 start: 695
end: 729
type: "OnDirective"
name: "click"
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 705
end: 728
loc:  {...}
 start:  {...}
 line: 25
column: 18
 }
end:  {...}
 line: 25
column: 41
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: CallExpression {...}
 type: "CallExpression"
start: 711
end: 728
loc:  {...}
 start:  {...}
 line: 25
column: 24
 }
end:  {...}
 line: 25
column: 41
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 711
end: 726
loc:  {...}
 start:  {...}
 line: 25
column: 24
 }
end:  {...}
 line: 25
column: 39
 }
 }
name: "resetValidation"
 }
arguments: []
optional: false
 }
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 730
end: 746
raw: "Reset Validation"
data: "Reset Validation"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 755
end: 757
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 275
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 266
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 8
column: 0
 }
 }
body: [...] (4)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 77
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 68
 }
 }
specifiers: [...] (2)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 19
end: 33
loc:  {...}
 start:  {...}
 line: 2
column: 10
 }
end:  {...}
 line: 2
column: 24
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 19
end: 33
loc:  {...}
 start:  {...}
 line: 2
column: 10
 }
end:  {...}
 line: 2
column: 24
 }
 }
name: "emailValidator"
 }
local: Identifier {...}
 type: "Identifier"
start: 19
end: 33
loc:  {...}
 start:  {...}
 line: 2
column: 10
 }
end:  {...}
 line: 2
column: 24
 }
 }
name: "emailValidator"
 }
 }
 ImportSpecifier {...}
 type: "ImportSpecifier"
start: 35
end: 52
loc:  {...}
 start:  {...}
 line: 2
column: 26
 }
end:  {...}
 line: 2
column: 43
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 35
end: 52
loc:  {...}
 start:  {...}
 line: 2
column: 26
 }
end:  {...}
 line: 2
column: 43
 }
 }
name: "requiredValidator"
 }
local: Identifier {...}
 type: "Identifier"
start: 35
end: 52
loc:  {...}
 start:  {...}
 line: 2
column: 26
 }
end:  {...}
 line: 2
column: 43
 }
 }
name: "requiredValidator"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 60
end: 77
loc:  {...}
 start:  {...}
 line: 2
column: 51
 }
end:  {...}
 line: 2
column: 68
 }
 }
value: "./validators.js"
raw: "'./validators.js'"
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 80
end: 134
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 56
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 89
end: 109
loc:  {...}
 start:  {...}
 line: 3
column: 11
 }
end:  {...}
 line: 3
column: 31
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 89
end: 109
loc:  {...}
 start:  {...}
 line: 3
column: 11
 }
end:  {...}
 line: 3
column: 31
 }
 }
name: "createFieldValidator"
 }
local: Identifier {...}
 type: "Identifier"
start: 89
end: 109
loc:  {...}
 start:  {...}
 line: 3
column: 11
 }
end:  {...}
 line: 3
column: 31
 }
 }
name: "createFieldValidator"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 117
end: 134
loc:  {...}
 start:  {...}
 line: 3
column: 39
 }
end:  {...}
 line: 3
column: 56
 }
 }
value: "./validation.js"
raw: "'./validation.js'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 138
end: 245
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 109
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 144
end: 245
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 109
 }
 }
id: ArrayPattern {...}
 type: "ArrayPattern"
start: 144
end: 183
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 47
 }
 }
elements: [...] (3)
  Identifier {...}
 type: "Identifier"
start: 146
end: 154
loc:  {...}
 start:  {...}
 line: 5
column: 10
 }
end:  {...}
 line: 5
column: 18
 }
 }
name: "validity"
 }
 Identifier {...}
 type: "Identifier"
start: 156
end: 164
loc:  {...}
 start:  {...}
 line: 5
column: 20
 }
end:  {...}
 line: 5
column: 28
 }
 }
name: "validate"
 }
 Identifier {...}
 type: "Identifier"
start: 166
end: 181
loc:  {...}
 start:  {...}
 line: 5
column: 30
 }
end:  {...}
 line: 5
column: 45
 }
 }
name: "resetValidation"
 }
 ]
 }
init: CallExpression {...}
 type: "CallExpression"
start: 186
end: 245
loc:  {...}
 start:  {...}
 line: 5
column: 50
 }
end:  {...}
 line: 5
column: 109
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 186
end: 206
loc:  {...}
 start:  {...}
 line: 5
column: 50
 }
end:  {...}
 line: 5
column: 70
 }
 }
name: "createFieldValidator"
 }
arguments: [...] (2)
  CallExpression {...}
 type: "CallExpression"
start: 207
end: 226
loc:  {...}
 start:  {...}
 line: 5
column: 71
 }
end:  {...}
 line: 5
column: 90
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 207
end: 224
loc:  {...}
 start:  {...}
 line: 5
column: 71
 }
end:  {...}
 line: 5
column: 88
 }
 }
name: "requiredValidator"
 }
arguments: []
optional: false
 }
 CallExpression {...}
 type: "CallExpression"
start: 228
end: 244
loc:  {...}
 start:  {...}
 line: 5
column: 92
 }
end:  {...}
 line: 5
column: 108
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 228
end: 242
loc:  {...}
 start:  {...}
 line: 5
column: 92
 }
end:  {...}
 line: 5
column: 106
 }
 }
name: "emailValidator"
 }
arguments: []
optional: false
 }
 ]
optional: false
 }
 }
 ]
kind: "const"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 249
end: 265
loc:  {...}
 start:  {...}
 line: 7
column: 1
 }
end:  {...}
 line: 7
column: 17
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 253
end: 265
loc:  {...}
 start:  {...}
 line: 7
column: 5
 }
end:  {...}
 line: 7
column: 17
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 253
end: 258
loc:  {...}
 start:  {...}
 line: 7
column: 5
 }
end:  {...}
 line: 7
column: 10
 }
 }
name: "email"
 }
init: Literal {...}
 type: "Literal"
start: 261
end: 265
loc:  {...}
 start:  {...}
 line: 7
column: 13
 }
end:  {...}
 line: 7
column: 17
 }
 }
value: null
raw: "null"
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern