vsn 0.1.50 → 0.1.53

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 (45) hide show
  1. package/README.md +4 -56
  2. package/demo/demo.html +61 -182
  3. package/demo/markup-default.html +2 -0
  4. package/demo/vsn.js +1 -1
  5. package/dist/AST/XHRNode.js +2 -0
  6. package/dist/AST/XHRNode.js.map +1 -1
  7. package/dist/AST.js +1 -1
  8. package/dist/AST.js.map +1 -1
  9. package/dist/DOM.d.ts +1 -1
  10. package/dist/DOM.js +1 -1
  11. package/dist/Scope/QueryReference.js +2 -2
  12. package/dist/Tag.d.ts +3 -1
  13. package/dist/Tag.js +25 -19
  14. package/dist/Tag.js.map +1 -1
  15. package/dist/attributes/LazyAttribute.d.ts +8 -0
  16. package/dist/attributes/LazyAttribute.js +120 -0
  17. package/dist/attributes/LazyAttribute.js.map +1 -0
  18. package/dist/attributes/List.js +1 -1
  19. package/dist/attributes/ScopeAttribute.d.ts +4 -0
  20. package/dist/attributes/ScopeAttribute.js +75 -0
  21. package/dist/attributes/ScopeAttribute.js.map +1 -1
  22. package/dist/attributes/_imports.d.ts +1 -0
  23. package/dist/attributes/_imports.js +3 -1
  24. package/dist/attributes/_imports.js.map +1 -1
  25. package/dist/helpers/VisionHelper.d.ts +1 -0
  26. package/dist/helpers/VisionHelper.js +15 -0
  27. package/dist/helpers/VisionHelper.js.map +1 -1
  28. package/dist/vsn.js +1 -1
  29. package/package.json +7 -2
  30. package/src/AST/XHRNode.ts +3 -2
  31. package/src/AST.ts +1 -2
  32. package/src/DOM.ts +1 -1
  33. package/src/Scope/QueryReference.ts +2 -2
  34. package/src/Tag.ts +23 -15
  35. package/src/attributes/LazyAttribute.ts +26 -0
  36. package/src/attributes/List.ts +1 -1
  37. package/src/attributes/ScopeAttribute.ts +19 -0
  38. package/src/attributes/_imports.ts +1 -0
  39. package/src/helpers/VisionHelper.ts +19 -0
  40. package/src/vsn.ts +1 -1
  41. package/test/Controller.spec.ts +4 -4
  42. package/test/DOM.spec.ts +2 -2
  43. package/test/attributes/ScopeAttribute.spec.ts +23 -0
  44. package/test/attributes/Styles.spec.ts +1 -1
  45. package/examples/attribute-binding.html +0 -29
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
+ [![npm version](https://badge.fury.io/js/vsn.svg)](https://badge.fury.io/js/vsn) [![Build Status](https://travis-ci.org/malero/vsn.svg?branch=master)](https://travis-ci.org/malero/vsn) [![codecov](https://codecov.io/gh/malero/vsn/branch/master/graph/badge.svg)](https://codecov.io/gh/malero/vsn) [![npm](https://img.shields.io/npm/dw/vsn.svg)]()
2
+
1
3
  # VisionJS Framework
2
4
 
3
5
  Simple Javascript Framework built from the ground up with eCommerce and SEO in mind. VisionJS is meant to be used with server side rendered websites. Rather than dynamically rendering component templates like most javascript frameworks, VisionJS uses the html rendered by your server to add functionality to your website.
@@ -8,60 +10,6 @@ Use NPM to install VisionJS with the following command:
8
10
  npm i vsn
9
11
 
10
12
 
11
- ## Examples
12
- ### Set A Scope Variable
13
- Use `vsn-set:variable_name="value|type"` to set a variable in the scope. `vsn-set` is only used to initialize a value and will only be evaluated once. Use `vsn-bind` if you would like to bind the element to the scope variable.
14
-
15
- <div vsn-set:my_string="42"></div>
16
- <div vsn-set:my_int="42|int"></div>
17
- <div vsn-set:my_float="42.3|float"></div>
18
- <div vsn-set:my_bool="false|bool"></div>
19
-
20
-
21
- ### Attribute Binding
22
- Use `vsn-bind:attribute` to bind a scope variable to the element's attribute. Using `vsn-bind` on an input will bind the input's value to the scope variable.
23
-
24
- <a href="/index.html" id="link">Home</a>
25
- <input type="text" vsn-bind="#link.@text" />
26
- <input type="text" vsn-bind="#link.@href" />
27
-
28
-
29
- ### Bind to Element Events
30
- Use `vsn-on` on an element to execute some code when the specified event is triggered. Here we have a button that toggles the root scope variable `show` between false and true when the element is clicked.
31
-
32
- <button vsn-on:click="show = !show" vsn-set:show="false|bool">Toggle</button>
33
- <span vsn-bind="show"></span>
34
-
35
-
36
- ### Conditional Elements
37
- Use `vsn-if` if you would only like to show an element if a certain condition is met.
38
-
39
- <button vsn-on:click="show = !show" vsn-set:show="false|bool">Toggle</button>
40
- <span vsn-if="show">Show is true</span>
41
- <span vsn-if="!show">Show is false</span>
42
-
43
-
44
- ### Controllers
45
- Use `vsn-controller:variable_name="ClassName"` to bind an element to a controller class.
46
-
47
- Typescript class controller:
48
-
49
- class Controller {
50
- public on: boolean = false;
51
-
52
- doSomething($event, value) {
53
- $event.preventDefault();
54
- this.on = value;
55
- }
56
- }
57
- vision.registerClass(Controller, 'Controller');
58
-
59
- HTML to use the above controller:
60
-
61
- <div vsn-controller:controller="Controller">
62
- <span vsn-if="controller.on">It's on!</span>
63
- <span vsn-if="!controller.on">It's off...</span>
64
- <a href="/" vsn-on:click="controller.doSomething($event, !controller.on)">Click Me</a>
65
- </div>
13
+ ## Usage
66
14
 
67
- Note: `variable_name` cannot contain capitalized letters. Use `<tag vsn-controller="ClassName" vsn-name="variableName" />` if you need to use capitalized letters in your controller name.
15
+ Please visit the [docs](https://vsnjs.org) for more information.
package/demo/demo.html CHANGED
@@ -2,199 +2,78 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
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
- }());
30
-
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>
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
+ }
63
24
 
64
- <script type="vsn">
65
- class Test {
66
- helloWorld() {
67
- print('Hello, world!');
68
- }
25
+ .code textarea {
26
+ width: 100%;
69
27
  }
70
- </script>
28
+ </style>
71
29
  </head>
72
30
  <body>
73
- <template vsn-template id="vsn-template">
74
- <span>Hello, world!</span>
75
- </template>
76
-
77
- <div>
78
- <textarea id="example-code" rows="10" cols="50"></textarea>
79
- <div id="example-output" vsn-bind:@html="#example-code.@value"></div>
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>
80
37
  </div>
81
38
 
82
- <template vsn-template id="query-operator-example-item">
83
- <li vsn-list-item>
84
- <span vsn-if="'active' in ?>(:parent).@class">active</span>
85
- <span vsn-if:not="'active' not in ?>(:parent).@class">inactive</span>
86
- <button vsn-on:click="?>(:parent).@class += 'active'">+</button>
87
- <button vsn-on:click="?>(:parent).@class -= 'active'">-</button>
88
- <button vsn-on:click="?>(:parent).@class ~ 'active'">~</button>
89
- </li>
90
- </template>
91
-
92
- <div id="test-container"></div>
93
- <a href="./markup.html" vsn-on:click|preventdefault="#test-container.@html = << @href">Fill Container</a>
94
- <a vsn-on:click|preventdefault="#test-container.@html = ''">Clear Container</a>
95
-
96
- <h2>On Click</h2>
97
- <button vsn-on:click="show = !show" vsn-set:show="false|boolean">Toggle</button>
98
- <span vsn-bind="show"></span>
99
-
100
- <a vsn-on:click="if(@text != @clicktext){@text=@clicktext}else{@text='Click Me'}" clicktext="Clicked!">Click Me</a>
101
-
102
- <h2>? Operator</h2>
103
- <p>Add/remove class to list of elements on click.</p>
104
- <p id="toggle-container" vsn-exec="toggles = ?(#list-add-remove-class-example li)">
105
- <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>
106
- <ul id="list-add-remove-class-example" vsn-list initial-items="5" template="?(#query-operator-example-item)"></ul>
107
- </p>
108
-
109
- <h2>@ Operator</h2>
110
- <p></p>
111
- <p>
112
- <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" />
113
- </p>
114
-
115
- <p>Bind to window attributes. </p>
116
- <p>window.scrollX,Y <span vsn-bind="?(window).@scrollX"></span>, <span vsn-bind="?(window).@scrollY"></span></p>
117
-
118
- <h2>Attribute Binding</h2>
119
- <a href="/index.html" id="link" vsn-name="link_test">Home</a>
120
- <input type="text" vsn-bind="#link.@text"/>
121
- <input type="text" vsn-bind="#link.@href"/>
122
-
123
- <h2>Attribute Formatters</h2>
124
- <h3>Currency</h3>
125
- <span vsn-bind="currency_format" vsn-type:currency_format="float" vsn-format="currency" id="formatter">1.5</span>
126
- <input type="text" vsn-bind="#formatter.currency_format" />
127
- <br />
128
- <h3>Date</h3>
129
- <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>
130
- <input type="text" vsn-bind:|to="?(#date-formatter).date_format" />
131
- <input type="text" vsn-on:keyup="?(#date-formatter).date_format = $value" value="Aug 11, 2021 01:03:00 PM PDT" />
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>
49
+ </div>
132
50
 
133
- <h2>$ Operator</h2>
134
- <p></p>
135
- <p>
136
- <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" />
137
- </p>
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>
138
66
 
139
- <h2>Conditional Elements</h2>
140
- <button vsn-on:click="show = !show">Toggle</button>
141
- <span vsn-if="show">Show is true</span>
142
- <span vsn-if="!show">Show is false</span>
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>
143
68
 
144
- <h2>Controllers</h2>
145
- <div vsn-controller:controller="Controller">
146
- <span vsn-if="controller.on">It's on!</span>
147
- <span vsn-if="!controller.on">It's off...</span>
148
- <a href="/" vsn-on:click="controller.doSomething($event, !controller.on)">Click Me</a>
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>
149
75
  </div>
150
76
 
151
- <h2>Lists</h2>
152
- <div vsn-controller:test="TestController" id="testing">
153
- <h3>Value: <span vsn-bind="test.name">Testing</span> <span vsn-bind="test.age">32</span></h3>
154
- <input type="text" vsn-bind="test.name"/>
155
- <input type="text" vsn-bind="test.age"/>
156
- <button vsn-on:click="test.reset()" vsn-if="test.name">Reset</button>
157
- <button vsn-on:click="test.add();">Add New List Item</button>
158
- <ul vsn-list:test.items vsn-list-item-model="TestItem" vsn-name="list">
159
- <li vsn-list-item>
160
- <span vsn-bind="item.name">Tom</span>, <span vsn-bind="item.age">22</span> Years Old <input type="text"
161
- vsn-bind="item.name"/>
162
- <input type="text" vsn-bind="item.age"/>
163
- <button vsn-on:click="item.reset()">R</button>
164
- <button vsn-on:click="list.remove(item)">X</button>
165
- </li>
166
- <li vsn-list-item>
167
- <span vsn-bind="item.name">Steve</span>, <span vsn-bind="item.age">46</span> Years Old <input type="text"
168
- vsn-bind="item.name"/>
169
- <input type="text" vsn-bind="item.age"/>
170
- <button vsn-on:click="item.reset()">R</button>
171
- <button vsn-on:click="list.remove(item)">X</button>
172
- </li>
173
- <li vsn-list-item>
174
- <span vsn-bind="item.name">Frank</span>, <span vsn-bind="item.age">31</span> Years Old <input type="text"
175
- vsn-bind="item.name"/>
176
- <input type="text" vsn-bind="item.age"/>
177
- <button vsn-on:click="item.reset()">R</button>
178
- <button vsn-on:click="list.remove(item)">X</button>
179
- </li>
180
- <li vsn-list-item>
181
- <span vsn-name="wut" vsn-set:wut.test="1">Wut</span>
182
- <span vsn-bind="item.name">Joe</span>, <span vsn-bind="item.age">91</span> Years Old <input type="text"
183
- vsn-bind="item.name"/>
184
- <input type="text" vsn-bind="item.age"/>
185
- <button vsn-on:click="item.reset()">R</button>
186
- <button vsn-on:click="list.remove(item)">X</button>
187
- </li>
188
- </ul>
189
- </div>
190
- <script type="text/javascript">
191
- window.addEventListener('vsn', function () {
192
- vision.registry.classes.register('TestController', TestController);
193
- vision.registry.classes.register('TestItem', TestItem);
194
- vision.registry.classes.register('Controller', Controller);
195
- vision.registry.classes.register('MVal', MVal);
196
- });
197
- </script>
198
77
  <script type="text/javascript" src="vsn.js"></script>
199
78
  </body>
200
79
  </html>
package/demo/markup-default.html ADDED
@@ -0,0 +1,2 @@
1
+ <h1>Default Markup Test</h1>
2
+ <p vsn-on:click="@text = 'This is a clicked paragraph.'">This is the default paragraph.</p>