neo.mjs 6.10.12 → 6.10.13
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.
- package/apps/ServiceWorker.mjs +2 -2
- package/apps/portal/view/learn/LivePreview.mjs +1 -0
- package/buildScripts/createAppMinimal.mjs +0 -30
- package/examples/ServiceWorker.mjs +2 -2
- package/package.json +3 -3
- package/resources/data/deck/learnneo/p/ComponentModels.md +27 -13
- package/resources/data/deck/learnneo/p/Earthquakes.md +1226 -31
- package/resources/data/deck/learnneo/p/Events.md +11 -0
- package/resources/data/deck/learnneo/p/GuideEvents.md +153 -0
- package/resources/data/deck/learnneo/t.json +3 -1
- package/resources/scss/src/apps/portal/learn/ContentView.scss +0 -1
- package/resources/scss/src/list/Base.scss +4 -0
- package/src/DefaultConfig.mjs +2 -2
- package/src/main/addon/Navigator.mjs +6 -1
- package/src/util/String.mjs +3 -2
package/apps/ServiceWorker.mjs
CHANGED
|
@@ -167,24 +167,6 @@ if (programOpts.info) {
|
|
|
167
167
|
</head>
|
|
168
168
|
<body>
|
|
169
169
|
<script src="../../src/MicroLoader.mjs" type="module"></script>
|
|
170
|
-
<script>
|
|
171
|
-
new MutationObserver((mutationsList, observer) => {
|
|
172
|
-
for (let mutation of mutationsList) {
|
|
173
|
-
for (let addedNode of mutation.addedNodes) {
|
|
174
|
-
if (addedNode.className && addedNode.className.includes(\'neo-viewport\')) {
|
|
175
|
-
addedNode.addEventListener("contextmenu", function (e) {
|
|
176
|
-
if (!(e.ctrlKey || e.metaKey)) return;
|
|
177
|
-
e.stopPropagation();
|
|
178
|
-
e.preventDefault();
|
|
179
|
-
const event = new Event('neo-debug-item-select', {bubbles: true});
|
|
180
|
-
e.target.dispatchEvent(event);
|
|
181
|
-
});
|
|
182
|
-
observer.disconnect(); // We found the viewport so we\'re finished listening
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
}).observe(document.body, {childList: true, subtree: false});
|
|
187
|
-
</script>
|
|
188
170
|
</body>
|
|
189
171
|
</html>
|
|
190
172
|
`;
|
|
@@ -251,18 +233,6 @@ class ${className} extends Base {
|
|
|
251
233
|
layout: {ntype: 'fit'},
|
|
252
234
|
items: [{module:MainView}],
|
|
253
235
|
}
|
|
254
|
-
afterSetMounted(value, oldValue) {
|
|
255
|
-
super.afterSetMounted(value, oldValue);
|
|
256
|
-
if (!value) return;
|
|
257
|
-
this.addDomListeners({
|
|
258
|
-
"neo-debug-item-select": (event) => {
|
|
259
|
-
event.path.forEach((item) => {
|
|
260
|
-
const component = Neo.getComponent(item.id);
|
|
261
|
-
if (component) console.log(component);
|
|
262
|
-
});
|
|
263
|
-
},
|
|
264
|
-
});
|
|
265
|
-
}
|
|
266
236
|
}
|
|
267
237
|
Neo.applyClassConfig(${className});
|
|
268
238
|
export default ${className};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name" : "neo.mjs",
|
|
3
|
-
"version" : "6.10.
|
|
3
|
+
"version" : "6.10.13",
|
|
4
4
|
"description" : "The webworkers driven UI framework",
|
|
5
5
|
"type" : "module",
|
|
6
6
|
"repository" : {
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"homepage" : "https://neomjs.github.io/pages/",
|
|
45
45
|
"devDependencies" : {
|
|
46
46
|
"@fortawesome/fontawesome-free" : "^6.5.1",
|
|
47
|
-
"autoprefixer" : "^10.4.
|
|
47
|
+
"autoprefixer" : "^10.4.17",
|
|
48
48
|
"chalk" : "^5.3.0",
|
|
49
49
|
"clean-webpack-plugin" : "^4.0.0",
|
|
50
50
|
"commander" : "^11.1.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"neo-jsdoc" : "1.0.1",
|
|
57
57
|
"neo-jsdoc-x" : "1.0.5",
|
|
58
58
|
"postcss" : "^8.4.33",
|
|
59
|
-
"sass" : "^1.
|
|
59
|
+
"sass" : "^1.70.0",
|
|
60
60
|
"siesta-lite" : "5.5.2",
|
|
61
61
|
"showdown" : "^2.1.0",
|
|
62
62
|
"url" : "^0.11.3",
|
|
@@ -37,20 +37,23 @@ class MainView extends Base {
|
|
|
37
37
|
Neo.applyClassConfig(MainView);
|
|
38
38
|
</pre>
|
|
39
39
|
|
|
40
|
-
View model properties are visible
|
|
40
|
+
View model properties are visible down the containment hierarchy:
|
|
41
41
|
Properties introduced in a parent container will be available to any child component, and properties
|
|
42
42
|
introduces in a specific component are only visible to that component. This approach makes it easy to control scope.
|
|
43
43
|
|
|
44
|
-
In
|
|
45
|
-
|
|
44
|
+
In the example above, the main view has a view model that defined a property _foo_. A view model property is available
|
|
45
|
+
within the view and its children. The child items — a label and a text field — can bind properties to
|
|
46
|
+
_foo_. As _foo_ changes, the properties are automatically updated. The example also shows that a binding can be
|
|
47
|
+
`twoWay`, which means a change to the property in the view is _pushed_ to the view model.
|
|
46
48
|
|
|
47
|
-
|
|
48
|
-
containment hierarchy until it finds the value. For the first two panels the label binding looks in the label, then in its `MyPanel`
|
|
49
|
-
container, then in the main view where it finds `foo`. For the third child panel the label binding looks in the label,
|
|
50
|
-
then in its `MyPanel` and finds it because the third copy of `MyPanel` has its own view model with the `foo` property.
|
|
49
|
+
<img width="50%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchy.png"></img>
|
|
51
50
|
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
(Note that in the example above, the main view's view model is defined in-line. Normally your view model
|
|
52
|
+
would be coded in its own class that extends 'Neo.model.Component', and you'd use that in your component.
|
|
53
|
+
Just like with items component configs, trivial configs may be done in-line, and non-trivial configs are
|
|
54
|
+
usually coded as separate classes.)
|
|
55
|
+
|
|
56
|
+
Below is another example.
|
|
54
57
|
|
|
55
58
|
<pre data-neo>
|
|
56
59
|
import Base from '../../../../src/container/Base.mjs';
|
|
@@ -92,6 +95,7 @@ class MainView extends Base {
|
|
|
92
95
|
module: MyPanel,
|
|
93
96
|
}, {
|
|
94
97
|
module: MyPanel,
|
|
98
|
+
// You wouldn't normally configure a view model. We're doing it here to illustrate view model scope.
|
|
95
99
|
model: {
|
|
96
100
|
data: {
|
|
97
101
|
foo: 'child'
|
|
@@ -104,11 +108,21 @@ class MainView extends Base {
|
|
|
104
108
|
Neo.applyClassConfig(MainView);
|
|
105
109
|
</pre>
|
|
106
110
|
|
|
111
|
+
In this case, the main view has three child items of type `MyPanel`, each containing a label.
|
|
112
|
+
The main view has a view model with a `foo` property, and the third child has its own view model with a `foo` property.
|
|
113
|
+
|
|
114
|
+
<img width="60%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchyFooShadowed.png"></img>
|
|
115
|
+
|
|
116
|
+
`MyPanel` contains a `Neo.componnet.Label` whose `text` value is bound to `foo`. To resolve the binding,
|
|
117
|
+
Neo.mjs looks up the containment hierarchy until it finds the value. For the first two panels the label
|
|
118
|
+
binding looks in the label, then in its `MyPanel` container, then in the main view — where it finds `foo`.
|
|
119
|
+
|
|
120
|
+
For the third child panel the label binding looks in the label, then in its `MyPanel`, but this time it finds it
|
|
121
|
+
because the third copy of `MyPanel` has its own view model with the `foo` property.
|
|
107
122
|
|
|
108
123
|
|
|
109
124
|
|
|
125
|
+
## Conclusion
|
|
110
126
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
Just like with items component configs, trivial configs are often done in-line, and non-trivial
|
|
114
|
-
configs are coded as separate classes.
|
|
127
|
+
The Neo.mjs view model and binding approach is simple and powerful. It gives you easy control
|
|
128
|
+
over the scope of a value, which means you can share properties as globally or narrowly as needed.
|