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 ] = 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>

<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>`, 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] = 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: 671
end: 948
attributes: []
children: [...] (5)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 680
end: 693
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 680
end: 693
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  PseudoClassSelector {...}
 type: "PseudoClassSelector"
name: "global"
args: SelectorList {...}
 type: "SelectorList"
start: 688
end: 692
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 688
end: 692
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "body"
start: 688
end: 692
 }
 ]
start: 688
end: 692
 }
 ]
 }
 ]
 }
start: 680
end: 693
 }
 ]
start: 680
end: 693
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 694
end: 741
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 698
end: 711
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 715
end: 737
property: "flex-direction"
value: "column"
 }
 ]
 }
start: 680
end: 741
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 745
end: 750
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 745
end: 750
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "input"
start: 745
end: 750
 }
 ]
start: 745
end: 750
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 751
end: 793
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 755
end: 768
property: "outline"
value: "none"
 }
 Declaration {...}
 type: "Declaration"
start: 772
end: 789
property: "border-width"
value: "2px"
 }
 ]
 }
start: 745
end: 793
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 797
end: 813
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 797
end: 813
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "validation-hint"
start: 797
end: 813
 }
 ]
start: 797
end: 813
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 814
end: 850
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 818
end: 828
property: "color"
value: "red"
 }
 Declaration {...}
 type: "Declaration"
start: 832
end: 846
property: "padding"
value: "6px 0"
 }
 ]
 }
start: 797
end: 850
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 854
end: 867
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 854
end: 867
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "field-danger"
start: 854
end: 867
 }
 ]
start: 854
end: 867
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 868
end: 893
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 872
end: 889
property: "border-color"
value: "red"
 }
 ]
 }
start: 854
end: 893
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 897
end: 911
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 897
end: 911
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "field-success"
start: 897
end: 911
 }
 ]
start: 897
end: 911
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 912
end: 939
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 916
end: 935
property: "border-color"
value: "green"
 }
 ]
 }
start: 897
end: 939
 }
 ]
content:  {...}
 start: 678
end: 940
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: 260
end: 669
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 258
end: 260
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 260
end: 472
name: "input"
attributes: [...] (7)
  Attribute {...}
 type: "Attribute"
start: 267
end: 280
name: "class"
value: [...] (1)
  Text {...}
 start: 274
end: 279
type: "Text"
raw: "input"
data: "input"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 287
end: 298
name: "type"
value: [...] (1)
  Text {...}
 start: 293
end: 297
type: "Text"
raw: "text"
data: "text"
 }
 ]
 }
 BindDirective {...}
 start: 305
end: 323
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 317
end: 322
loc:  {...}
 start:  {...}
 line: 12
column: 18
 }
end:  {...}
 line: 12
column: 23
 }
 }
name: "email"
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 330
end: 354
name: "placeholder"
value: [...] (1)
  Text {...}
 start: 343
end: 353
type: "Text"
raw: "Your Email"
data: "Your Email"
 }
 ]
 }
 ClassDirective {...}
 start: 358
end: 395
type: "ClassDirective"
name: "field-danger"
expression: UnaryExpression {...}
 type: "UnaryExpression"
start: 378
end: 394
loc:  {...}
 start:  {...}
 line: 14
column: 23
 }
end:  {...}
 line: 14
column: 39
 }
 }
operator: "!"
prefix: true
argument: MemberExpression {...}
 type: "MemberExpression"
start: 379
end: 394
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 39
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 379
end: 388
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 33
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 389
end: 394
loc:  {...}
 start:  {...}
 line: 14
column: 34
 }
end:  {...}
 line: 14
column: 39
 }
 }
name: "valid"
 }
computed: false
optional: false
 }
 }
modifiers: []
 }
 ClassDirective {...}
 start: 399
end: 436
type: "ClassDirective"
name: "field-success"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 420
end: 435
loc:  {...}
 start:  {...}
 line: 15
column: 24
 }
end:  {...}
 line: 15
column: 39
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 420
end: 429
loc:  {...}
 start:  {...}
 line: 15
column: 24
 }
end:  {...}
 line: 15
column: 33
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 430
end: 435
loc:  {...}
 start:  {...}
 line: 15
column: 34
 }
end:  {...}
 line: 15
column: 39
 }
 }
name: "valid"
 }
computed: false
optional: false
 }
modifiers: []
 }
 UseDirective {...}
 start: 443
end: 463
type: "UseDirective"
name: "validate"
expression: Identifier {...}
 type: "Identifier"
start: 457
end: 462
loc:  {...}
 start:  {...}
 line: 16
column: 20
 }
end:  {...}
 line: 16
column: 25
 }
 }
name: "email"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 472
end: 473
raw: " "
data: " "
 }
 IfBlock {...}
 type: "IfBlock"
elseif: false
start: 473
end: 608
test: LogicalExpression {...}
 type: "LogicalExpression"
start: 478
end: 513
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 40
 }
 }
left: MemberExpression {...}
 type: "MemberExpression"
start: 478
end: 493
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 20
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 478
end: 487
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 14
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 488
end: 493
loc:  {...}
 start:  {...}
 line: 18
column: 15
 }
end:  {...}
 line: 18
column: 20
 }
 }
name: "dirty"
 }
computed: false
optional: false
 }
operator: "&&"
right: UnaryExpression {...}
 type: "UnaryExpression"
start: 497
end: 513
loc:  {...}
 start:  {...}
 line: 18
column: 24
 }
end:  {...}
 line: 18
column: 40
 }
 }
operator: "!"
prefix: true
argument: MemberExpression {...}
 type: "MemberExpression"
start: 498
end: 513
loc:  {...}
 start:  {...}
 line: 18
column: 25
 }
end:  {...}
 line: 18
column: 40
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 498
end: 507
loc:  {...}
 start:  {...}
 line: 18
column: 25
 }
end:  {...}
 line: 18
column: 34
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 508
end: 513
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: 514
end: 515
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 515
end: 602
name: "span"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 521
end: 544
name: "class"
value: [...] (1)
  Text {...}
 start: 528
end: 543
type: "Text"
raw: "validation-hint"
data: "validation-hint"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 545
end: 557
raw: "INVALID - "
data: "INVALID - "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 557
end: 576
expression: MemberExpression {...}
 type: "MemberExpression"
start: 558
end: 575
loc:  {...}
 start:  {...}
 line: 20
column: 12
 }
end:  {...}
 line: 20
column: 29
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 558
end: 567
loc:  {...}
 start:  {...}
 line: 20
column: 12
 }
end:  {...}
 line: 20
column: 21
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 568
end: 575
loc:  {...}
 start:  {...}
 line: 20
column: 22
 }
end:  {...}
 line: 20
column: 29
 }
 }
name: "message"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 576
end: 577
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 577
end: 594
expression: MemberExpression {...}
 type: "MemberExpression"
start: 578
end: 593
loc:  {...}
 start:  {...}
 line: 20
column: 32
 }
end:  {...}
 line: 20
column: 47
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 578
end: 587
loc:  {...}
 start:  {...}
 line: 20
column: 32
 }
end:  {...}
 line: 20
column: 41
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 588
end: 593
loc:  {...}
 start:  {...}
 line: 20
column: 42
 }
end:  {...}
 line: 20
column: 47
 }
 }
name: "dirty"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 594
end: 595
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 602
end: 603
raw: "\n"
data: "\n"
 }
 ]
 }
alternate: null
 }
 Text {...}
 type: "Text"
start: 608
end: 610
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 610
end: 669
name: "button"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 618
end: 645
name: "disabled"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 627
end: 645
expression: UnaryExpression {...}
 type: "UnaryExpression"
start: 628
end: 644
loc:  {...}
 start:  {...}
 line: 24
column: 18
 }
end:  {...}
 line: 24
column: 34
 }
 }
operator: "!"
prefix: true
argument: MemberExpression {...}
 type: "MemberExpression"
start: 629
end: 644
loc:  {...}
 start:  {...}
 line: 24
column: 19
 }
end:  {...}
 line: 24
column: 34
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 629
end: 638
loc:  {...}
 start:  {...}
 line: 24
column: 19
 }
end:  {...}
 line: 24
column: 28
 }
 }
name: "$validity"
 }
property: Identifier {...}
 type: "Identifier"
start: 639
end: 644
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: 646
end: 660
raw: "Ok, I'm ready!"
data: "Ok, I'm ready!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 669
end: 671
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 258
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 249
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: 228
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 92
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 144
end: 228
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 92
 }
 }
id: ArrayPattern {...}
 type: "ArrayPattern"
start: 144
end: 166
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 30
 }
 }
elements: [...] (2)
  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"
 }
 ]
 }
init: CallExpression {...}
 type: "CallExpression"
start: 169
end: 228
loc:  {...}
 start:  {...}
 line: 5
column: 33
 }
end:  {...}
 line: 5
column: 92
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 169
end: 189
loc:  {...}
 start:  {...}
 line: 5
column: 33
 }
end:  {...}
 line: 5
column: 53
 }
 }
name: "createFieldValidator"
 }
arguments: [...] (2)
  CallExpression {...}
 type: "CallExpression"
start: 190
end: 209
loc:  {...}
 start:  {...}
 line: 5
column: 54
 }
end:  {...}
 line: 5
column: 73
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 190
end: 207
loc:  {...}
 start:  {...}
 line: 5
column: 54
 }
end:  {...}
 line: 5
column: 71
 }
 }
name: "requiredValidator"
 }
arguments: []
optional: false
 }
 CallExpression {...}
 type: "CallExpression"
start: 211
end: 227
loc:  {...}
 start:  {...}
 line: 5
column: 75
 }
end:  {...}
 line: 5
column: 91
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 211
end: 225
loc:  {...}
 start:  {...}
 line: 5
column: 75
 }
end:  {...}
 line: 5
column: 89
 }
 }
name: "emailValidator"
 }
arguments: []
optional: false
 }
 ]
optional: false
 }
 }
 ]
kind: "const"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 232
end: 248
loc:  {...}
 start:  {...}
 line: 7
column: 1
 }
end:  {...}
 line: 7
column: 17
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 236
end: 248
loc:  {...}
 start:  {...}
 line: 7
column: 5
 }
end:  {...}
 line: 7
column: 17
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 236
end: 241
loc:  {...}
 start:  {...}
 line: 7
column: 5
 }
end:  {...}
 line: 7
column: 10
 }
 }
name: "email"
 }
init: Literal {...}
 type: "Literal"
start: 244
end: 248
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