vsn 0.1.56 → 0.1.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/demo/demo.html +184 -62
  2. package/demo/vsn.js +2 -1
  3. package/dist/AST/FunctionNode.d.ts +18 -0
  4. package/dist/AST/FunctionNode.js +87 -0
  5. package/dist/AST/FunctionNode.js.map +1 -1
  6. package/dist/DOM/DOMObject.d.ts +6 -1
  7. package/dist/DOM/DOMObject.js.map +1 -1
  8. package/dist/Tag.d.ts +2 -2
  9. package/dist/Tag.js +19 -10
  10. package/dist/Tag.js.map +1 -1
  11. package/dist/Types.js +1 -1
  12. package/dist/Types.js.map +1 -1
  13. package/dist/attributes/Bind.js.map +1 -1
  14. package/dist/attributes/KeyAbstract.js +1 -1
  15. package/dist/attributes/KeyAbstract.js.map +1 -1
  16. package/dist/attributes/KeyDown.js +1 -1
  17. package/dist/attributes/KeyDown.js.map +1 -1
  18. package/dist/attributes/KeyUp.js +1 -1
  19. package/dist/attributes/KeyUp.js.map +1 -1
  20. package/dist/attributes/LazyAttribute.js +2 -2
  21. package/dist/attributes/LazyAttribute.js.map +1 -1
  22. package/dist/attributes/On.js +1 -1
  23. package/dist/attributes/On.js.map +1 -1
  24. package/dist/vsn.d.ts +1 -1
  25. package/dist/vsn.js +2 -2
  26. package/dist/vsn.js.map +1 -1
  27. package/dist/vsn.min.js +2 -0
  28. package/package.json +3 -4
  29. package/src/AST/FunctionNode.ts +31 -0
  30. package/src/DOM/DOMObject.ts +7 -1
  31. package/src/Tag.ts +18 -10
  32. package/src/Types.ts +1 -1
  33. package/src/attributes/Bind.ts +1 -2
  34. package/src/attributes/KeyAbstract.ts +1 -1
  35. package/src/attributes/KeyDown.ts +1 -1
  36. package/src/attributes/KeyUp.ts +1 -1
  37. package/src/attributes/LazyAttribute.ts +2 -2
  38. package/src/attributes/On.ts +1 -1
  39. package/src/vsn.ts +2 -2
  40. package/webpack.config.js +10 -0
package/demo/demo.html CHANGED
@@ -2,78 +2,200 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>SEO Javascript Demo</title>
6
-
7
- <style>
8
- .example {
9
- border: 1px solid #ccc;
10
- padding: 10px;
11
- margin: 10px;
12
- display: flex;
13
- flex-direction: row;
14
- flex-wrap: nowrap;
15
- align-content: center;
16
- justify-content: space-around;
17
- align-items: center;
18
- }
19
- .code,
20
- .result {
21
- width: 50%;
22
- padding: 10px;
23
- }
5
+ <title>SEO Javascript Test</title>
6
+
7
+ <style></style>
8
+ <script type="text/javascript">
9
+ var TestController = (function () {
10
+ function TestController() {
11
+ this.items = [];
12
+ this.name = null;
13
+ this.age = null;
14
+ this.obj = null;
15
+ this.array = null;
16
+ }
17
+
18
+ TestController.prototype.reset = function () {
19
+ this.name = '';
20
+ this.age = '';
21
+ };
22
+
23
+ TestController.prototype.add = function () {
24
+ this.items.push(new TestItem(this.name, this.age));
25
+ this.reset();
26
+ };
27
+
28
+ return TestController;
29
+ }());
24
30
 
25
- .code textarea {
26
- width: 100%;
31
+ var TestItem = (function () {
32
+ function TestItem(name = null, age = null) {
33
+ this.name = name;
34
+ this.age = age;
35
+ }
36
+
37
+ TestItem.prototype.reset = function () {
38
+ this.name = '';
39
+ this.age = '';
40
+ };
41
+ return TestItem;
42
+ }());
43
+
44
+ var MVal = (function () {
45
+ function MVal(v) {
46
+ this.v = v;
47
+ }
48
+ return MVal;
49
+ }());
50
+
51
+ var Controller = (function () {
52
+ function Controller() {
53
+ this.on = false;
54
+ }
55
+
56
+ Controller.prototype.doSomething = function ($event, value) {
57
+ $event.preventDefault();
58
+ this.on = value;
59
+ };
60
+ return Controller;
61
+ }());
62
+ </script>
63
+
64
+ <script type="vsn">
65
+ class Test {
66
+ helloWorld() {
67
+ print('Hello, world!');
68
+ }
27
69
  }
28
- </style>
70
+ </script>
29
71
  </head>
30
72
  <body>
31
- <h2>Input Binding</h2>
32
- <div class="example">
33
- <div class="code">
34
- <textarea id="input-binding" rows="1"><input id="test" value="initial" /><span vsn-bind="#test.@value"></span></textarea>
35
- </div>
36
- <div class="result"><div vsn-bind:@html="#input-binding.@value"></div></div>
37
- </div>
73
+ <template vsn-template id="vsn-template">
74
+ <span>Hello, world!</span>
75
+ </template>
38
76
 
39
- <h2>DOM Events</h2>
40
- <div class="example">
41
- <div class="code">
42
- <textarea id="dom-events" rows="3">
43
- <button vsn-on:click="counter.v -= 1">-</button>
44
- <span vsn-name="counter" vsn-set:v="0|integer" vsn-bind="v"></span>
45
- <button vsn-on:click="counter.v += 1">+</button>
46
- </textarea>
47
- </div>
48
- <div class="result"><div vsn-bind:@html="#dom-events.@value"></div></div>
77
+ <div>
78
+ <textarea id="example-code" rows="10" cols="50"></textarea>
79
+ <input type="text" id="example-input" value="hmm" />
80
+ <div id="example-output" vsn-bind:@html="#example-code.@value"></div>
49
81
  </div>
50
82
 
51
- <h2>Query Operators & Conditionals</h2>
52
- <div class="example">
53
- <div class="code">
54
- <textarea id="query-operator" rows="7">
55
- <div class="active">
56
- <button vsn-on:click="?>(:parent).@class -= 'active'">-</button>
57
- <button vsn-on:click="?>(:parent).@class ~ 'active'">~</button>
58
- <button vsn-on:click="?>(:parent).@class += 'active'">+</button>
59
- <span vsn-if="'active' not in ?>(:parent).@class">Inactive</span>
60
- <span vsn-if="'active' in ?>(:parent).@class">Active</span>
61
- </div>
62
- </textarea>
63
- </div>
64
- <div class="result"><div vsn-bind:@html="#query-operator.@value"></div></div>
65
- </div>
83
+ <template vsn-template id="query-operator-example-item">
84
+ <li vsn-list-item>
85
+ <span vsn-if="'active' in ?>(:parent).@class">active</span>
86
+ <span vsn-if:not="'active' not in ?>(:parent).@class">inactive</span>
87
+ <button vsn-on:click="?>(:parent).@class += 'active'">+</button>
88
+ <button vsn-on:click="?>(:parent).@class -= 'active'">-</button>
89
+ <button vsn-on:click="?>(:parent).@class ~ 'active'">~</button>
90
+ </li>
91
+ </template>
92
+
93
+ <div id="test-container"></div>
94
+ <a href="./markup.html" vsn-on:click|preventdefault="#test-container.@html = << @href">Fill Container</a>
95
+ <a vsn-on:click|preventdefault="#test-container.@html = ''">Clear Container</a>
96
+
97
+ <h2>On Click</h2>
98
+ <button vsn-on:click="show = !show" vsn-set:show="false|boolean">Toggle</button>
99
+ <span vsn-bind="show"></span>
100
+
101
+ <a vsn-on:click="if(@text != @clicktext){@text=@clicktext}else{@text='Click Me'}" clicktext="Clicked!">Click Me</a>
102
+
103
+ <h2>? Operator</h2>
104
+ <p>Add/remove class to list of elements on click.</p>
105
+ <p id="toggle-container" vsn-exec="toggles = ?(#list-add-remove-class-example li)">
106
+ <button vsn-on:click="?(#list-add-remove-class-example li).@class += 'active'">Add</button> <button vsn-on:click="?(#list-add-remove-class-example li).@class -= 'active'">Remove</button> <button vsn-on:click="?(#list-add-remove-class-example li).@class ~ 'active'">Toggle</button>
107
+ <ul id="list-add-remove-class-example" vsn-list initial-items="5" template="?(#query-operator-example-item)"></ul>
108
+ </p>
66
109
 
67
- <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
110
+ <h2>@ Operator</h2>
111
+ <p></p>
112
+ <p>
113
+ <input type="text" value="testing" id="at-attribute" /> <input type="button" vsn-on:click="?(#at-attribute).@type = 'password'" value="Button" /> <input type="button" vsn-on:click="?(#at-attribute).@type = 'text'" value="Button" />
114
+ </p>
68
115
 
69
- <h2>Lazy Execution</h2>
70
- <div class="example">
71
- <div class="code">
72
- <textarea id="lazy-loading" rows="1"><div vsn-lazy="$background = 'url(./logo.png) no-repeat';$minHeight = 150px;"></div></textarea>
73
- </div>
74
- <div class="result"><div vsn-bind:@html="#lazy-loading.@value"></div></div>
116
+ <p>Bind to window attributes. </p>
117
+ <p>window.scrollX,Y <span vsn-bind="?(window).@scrollX"></span>, <span vsn-bind="?(window).@scrollY"></span></p>
118
+
119
+ <h2>Attribute Binding</h2>
120
+ <a href="/index.html" id="link" vsn-name="link_test">Home</a>
121
+ <input type="text" vsn-bind="#link.@text"/>
122
+ <input type="text" vsn-bind="#link.@href"/>
123
+
124
+ <h2>Attribute Formatters</h2>
125
+ <h3>Currency</h3>
126
+ <span vsn-bind="currency_format" vsn-type:currency_format="float" vsn-format="currency" id="formatter">1.5</span>
127
+ <input type="text" vsn-bind="#formatter.currency_format" />
128
+ <br />
129
+ <h3>Date</h3>
130
+ <span vsn-bind="date_format" vsn-type:date_format="date" vsn-format="date" id="date-formatter">Aug 11, 2021 01:03:00 PM PDT</span>
131
+ <input type="text" vsn-bind:|to="?(#date-formatter).date_format" />
132
+ <input type="text" vsn-on:keyup="?(#date-formatter).date_format = $value" value="Aug 11, 2021 01:03:00 PM PDT" />
133
+
134
+ <h2>$ Operator</h2>
135
+ <p></p>
136
+ <p>
137
+ <input type="text" vsn-bind="$marginTop" id="style-attribute" /> <input type="button" vsn-on:click="?(#style-attribute).$marginTop = $padding;$padding += 1px" vsn-on:contextmenu|preventdefault="$padding -= 1px" value="Button" /> <input type="button" vsn-on:click="?(#style-attribute).$marginTop = '0'" value="Button" />
138
+ </p>
139
+
140
+ <h2>Conditional Elements</h2>
141
+ <button vsn-on:click="show = !show">Toggle</button>
142
+ <span vsn-if="show">Show is true</span>
143
+ <span vsn-if="!show">Show is false</span>
144
+
145
+ <h2>Controllers</h2>
146
+ <div vsn-controller:controller="Controller">
147
+ <span vsn-if="controller.on">It's on!</span>
148
+ <span vsn-if="!controller.on">It's off...</span>
149
+ <a href="/" vsn-on:click="controller.doSomething($event, !controller.on)">Click Me</a>
75
150
  </div>
76
151
 
152
+ <h2>Lists</h2>
153
+ <div vsn-controller:test="TestController" id="testing">
154
+ <h3>Value: <span vsn-bind="test.name">Testing</span> <span vsn-bind="test.age">32</span></h3>
155
+ <input type="text" vsn-bind="test.name"/>
156
+ <input type="text" vsn-bind="test.age"/>
157
+ <button vsn-on:click="test.reset()" vsn-if="test.name">Reset</button>
158
+ <button vsn-on:click="test.add();">Add New List Item</button>
159
+ <ul vsn-list:test.items vsn-list-item-model="TestItem" vsn-name="list">
160
+ <li vsn-list-item>
161
+ <span vsn-bind="item.name">Tom</span>, <span vsn-bind="item.age">22</span> Years Old <input type="text"
162
+ vsn-bind="item.name"/>
163
+ <input type="text" vsn-bind="item.age"/>
164
+ <button vsn-on:click="item.reset()">R</button>
165
+ <button vsn-on:click="list.remove(item)">X</button>
166
+ </li>
167
+ <li vsn-list-item>
168
+ <span vsn-bind="item.name">Steve</span>, <span vsn-bind="item.age">46</span> Years Old <input type="text"
169
+ vsn-bind="item.name"/>
170
+ <input type="text" vsn-bind="item.age"/>
171
+ <button vsn-on:click="item.reset()">R</button>
172
+ <button vsn-on:click="list.remove(item)">X</button>
173
+ </li>
174
+ <li vsn-list-item>
175
+ <span vsn-bind="item.name">Frank</span>, <span vsn-bind="item.age">31</span> Years Old <input type="text"
176
+ vsn-bind="item.name"/>
177
+ <input type="text" vsn-bind="item.age"/>
178
+ <button vsn-on:click="item.reset()">R</button>
179
+ <button vsn-on:click="list.remove(item)">X</button>
180
+ </li>
181
+ <li vsn-list-item>
182
+ <span vsn-name="wut" vsn-set:wut.test="1">Wut</span>
183
+ <span vsn-bind="item.name">Joe</span>, <span vsn-bind="item.age">91</span> Years Old <input type="text"
184
+ vsn-bind="item.name"/>
185
+ <input type="text" vsn-bind="item.age"/>
186
+ <button vsn-on:click="item.reset()">R</button>
187
+ <button vsn-on:click="list.remove(item)">X</button>
188
+ </li>
189
+ </ul>
190
+ </div>
191
+ <script type="text/javascript">
192
+ window.addEventListener('vsn', function () {
193
+ vision.registry.classes.register('TestController', TestController);
194
+ vision.registry.classes.register('TestItem', TestItem);
195
+ vision.registry.classes.register('Controller', Controller);
196
+ vision.registry.classes.register('MVal', MVal);
197
+ });
198
+ </script>
77
199
  <script type="text/javascript" src="vsn.js"></script>
78
200
  </body>
79
- </html>
201
+ </html>