@seanox/aspect-js
Version:
full stack JavaScript framework for SPAs incl. reactivity rendering, mvc / mvvm, models, expression language, datasource, virtual paths, unit test and some more
103 lines (99 loc) • 3.5 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
}
body div {
margin: 1em;
}
body * {
display: block;
}
</style>
<script src="aspect-js.js"></script>
<script src="scripts/capture.js"></script>
<script type="text/javascript">
Test.activate();
// The use of the attribute namespace for composites is always optional.
// Composites can be nested in the markup. Primarily, the IDs of the
// composites are concatenated and form a namespace that starts with the
// ID of the topmost composite. If there are composites in a chain
// without the attribute namespace, these have a decoupling effect. This
// means that the preceding namespace is terminated and subsequent
// composites with the namespace attribute start new namespaces.
//
// Why this approach?
//
// The idea is based on the notion of domain-related micro frontends
// (micro-FEs). Here, the SPA forms a platform and uses the modules as
// micro-FEs. Since the world in aspect-js is static, micro-FEs may want
// to share components with corresponding domains. Without the described
// mechanism, the namespaces for each composite would have to be
// declared fully qualified. If the namespace attribute were used for
// this purpose, IDs of composites and namespaces would have to be
// validated, which can become very complex.
const capture = new Capture();
Composite.listen(Composite.EVENT_RENDER_END, () => {
capture.snap();
const count = capture.patterns().length;
if (capture.size() === count)
Test.start();
if (capture.size() > count)
Assert.assertEquals("expected {1} steps but was {2}", count, capture.size());
});
Test.create({test() {
capture.validate();
}});
</script>
<script type="text/test">
a:
b: a
c: a,b
d:
e:
f: e
g: e,f
h:
i:
j: i
</script>
</head>
<body>
<div id="a" composite namespace>
<div id="b" composite namespace>
<div id="c" composite namespace>
<div id="d" composite>
<div id="e" composite namespace>
<div id="f" composite namespace>
<div id="g" composite namespace>
<div id="h" composite>
<div id="i" composite namespace>
<div id="j" composite namespace>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<pre>
a: {{___mount_locate(#a).namespace}}
b: {{___mount_locate(#b).namespace}}
c: {{___mount_locate(#c).namespace}}
d: {{___mount_locate(#d).namespace}}
e: {{___mount_locate(#e).namespace}}
f: {{___mount_locate(#f).namespace}}
g: {{___mount_locate(#g).namespace}}
h: {{___mount_locate(#h).namespace}}
i: {{___mount_locate(#i).namespace}}
j: {{___mount_locate(#j).namespace}}
</pre>
</body>
</html>