enigmatic 0.22.0 → 0.24.0
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/README.md +181 -44
- package/__tests__/enigmatic.test.js +328 -0
- package/components.js +162 -1
- package/e2.js +29 -0
- package/enigmatic.js +181 -151
- package/index.html +31 -74
- package/jest.config.js +6 -0
- package/jest.setup.js +5 -0
- package/package.json +5 -4
- package/tests/test-error.html +0 -5
- package/tests/test-fetch.html +0 -26
- package/tests/test-flatten.html +0 -38
- package/tests/test-layout.html +0 -32
- package/tests/test-schema.html +0 -10
- package/tests/test.html +0 -44
package/index.html
CHANGED
|
@@ -1,76 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
background-color: #333;
|
|
18
|
-
color: #fff;
|
|
19
|
-
text-align: center;
|
|
20
|
-
padding: 1rem;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.container {
|
|
24
|
-
max-width: 800px;
|
|
25
|
-
margin: auto;
|
|
26
|
-
padding: 2rem;
|
|
27
|
-
background-color: #fff;
|
|
28
|
-
border-radius: 5px;
|
|
29
|
-
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.description {
|
|
33
|
-
margin-top: 1rem;
|
|
34
|
-
font-size: 1.2rem;
|
|
1
|
+
<script src="components.js"></script>
|
|
2
|
+
<script src="enigmatic.js"></script>
|
|
3
|
+
<link rel="stylesheet" href="enigmatic.css">
|
|
4
|
+
|
|
5
|
+
<body style="--cols:1fr; --rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr">
|
|
6
|
+
<hello-world data="name"></hello-world>
|
|
7
|
+
<my-element></my-element>
|
|
8
|
+
|
|
9
|
+
<div id=one fetch="https://randomuser.me/api/?results=1" t="e=>e.results">{email}</div>
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
// Wait for DOM and enigmatic.js to be ready
|
|
13
|
+
document.addEventListener('DOMContentLoaded', async () => {
|
|
14
|
+
// Wait for e to be available (enigmatic.js assigns it)
|
|
15
|
+
while (typeof window.e === 'undefined') {
|
|
16
|
+
await new Promise(r => setTimeout(r, 10))
|
|
35
17
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
</style>
|
|
53
|
-
</head>
|
|
54
|
-
|
|
55
|
-
<body>
|
|
56
|
-
<div class="header">
|
|
57
|
-
<h1>Enigmatic</h1>
|
|
58
|
-
<p>Simpler front-end JS</p>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="container">
|
|
61
|
-
<h2>What is Enigmatic?</h2>
|
|
62
|
-
<p class="description">
|
|
63
|
-
Enigmatic is a powerful JavaScript library designed to solve complex problems with ease.
|
|
64
|
-
</p>
|
|
65
|
-
<h2>Getting Started</h2>
|
|
66
|
-
<div class="install">
|
|
67
|
-
<p>To start using Enigmatic in your projects, simply include the following script tag:</p>
|
|
68
|
-
<pre class="install-code"><code><script src="https://unpkg.com/enigmatic"></script></code></pre>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
<div class="footer">
|
|
72
|
-
<p>© 2023 Enigmatic. All rights reserved.</p>
|
|
73
|
-
</div>
|
|
18
|
+
|
|
19
|
+
e('my-element', {
|
|
20
|
+
init: (e) => e.innerText = 'ready',
|
|
21
|
+
click: (ev) => ev.target.style.color = 'green',
|
|
22
|
+
mouseover: (ev) => ev.target.style.color = 'yellow',
|
|
23
|
+
}, {
|
|
24
|
+
color: 'red',
|
|
25
|
+
"text-decoration": 'underline'
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
// Set state for components
|
|
29
|
+
await ready()
|
|
30
|
+
state.name = { name: 'World' }
|
|
31
|
+
})
|
|
32
|
+
</script>
|
|
74
33
|
</body>
|
|
75
|
-
|
|
76
|
-
</html>
|
package/jest.config.js
ADDED
package/jest.setup.js
ADDED
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "enigmatic",
|
|
3
3
|
"main": "enigmatic.js",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.24.0",
|
|
5
5
|
"scripts": {
|
|
6
|
-
"test": "
|
|
6
|
+
"test": "jest",
|
|
7
|
+
"test:watch": "jest --watch"
|
|
7
8
|
},
|
|
8
9
|
"devDependencies": {
|
|
9
|
-
"
|
|
10
|
-
"
|
|
10
|
+
"jest": "^29.7.0",
|
|
11
|
+
"jest-environment-jsdom": "^29.7.0"
|
|
11
12
|
}
|
|
12
13
|
}
|
package/tests/test-error.html
DELETED
package/tests/test-fetch.html
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<script src='../enigmatic.js'></script>
|
|
2
|
-
|
|
3
|
-
<!-- HTML declarative -->
|
|
4
|
-
<div data='users_declare' fetch='toydb-687z3zxxqk0r.runkit.sh/'>{test_message}</div>
|
|
5
|
-
|
|
6
|
-
<!-- Not immediate -->
|
|
7
|
-
<div id='f' data='users_declare2' fetch='toydb-687z3zxxqk0r.runkit.sh/' defer>Delayed: {test_message}</div>
|
|
8
|
-
<button onclick='f.fetch()'>Fetch</button>
|
|
9
|
-
|
|
10
|
-
<!-- Transform results -->
|
|
11
|
-
<script>
|
|
12
|
-
get('randomuser.me/api', null, x=>x.results, 'users')
|
|
13
|
-
</script>
|
|
14
|
-
<div data="users">
|
|
15
|
-
<div>{gender} {picture}</div>
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
<!-- Component -->
|
|
19
|
-
<script>
|
|
20
|
-
element('my-c', {
|
|
21
|
-
onmount: e=>e.style.border='1px solid black',
|
|
22
|
-
template: 'is: {gender}',
|
|
23
|
-
style: 'color:red'})
|
|
24
|
-
</script>
|
|
25
|
-
|
|
26
|
-
<my-c data='users_component'></my-c>
|
package/tests/test-flatten.html
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<script src='../enigmatic.js'></script>
|
|
2
|
-
<link rel=stylesheet href='../enigmatic.css'>
|
|
3
|
-
|
|
4
|
-
<body style='--rows: 1fr 1fr 1fr 1fr 10fr; --cols: 1fr 10fr 1fr'>
|
|
5
|
-
<h1 style='--span: 3'>Text templating (Flatten)</h1>
|
|
6
|
-
|
|
7
|
-
<div data="testobj" style='--span: 4' preserve='true'>
|
|
8
|
-
{k1} {k2}
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
<div data="testobjkv" style='--span: 4' preserve='true'>
|
|
12
|
-
{$key} {$val}
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
<div data="testarray" style='--span: 4' preserve='true'>
|
|
16
|
-
{$key}: {name}={value}
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<div data="testobjobj" style='--span: 4' preserve='true'>
|
|
20
|
-
{$key}: {name}={value}
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
<div></div>
|
|
24
|
-
|
|
25
|
-
<section style='--cols: 1fr 1fr 1fr 1fr'>
|
|
26
|
-
<button onclick='state.testobj={"k1": "val1", "k2": "val2"}'>{k1: 'val1', k2: 'val2'}</button>
|
|
27
|
-
<button onclick='state.testobjkv={"k1": "val1", "k2": "val2"}'>{k1: 'val1', k2: 'val2'}</button>
|
|
28
|
-
<button onclick='state.testarray=[{ name: "myname", value: "myvalue" },{ name: "myname2", value: "myvalue2" }]'>[
|
|
29
|
-
{ name: 'myname', value: 'myvalue' },
|
|
30
|
-
{ name: 'myname2', value: 'myvalue2' },
|
|
31
|
-
]</button>
|
|
32
|
-
<button onclick='state.testobjobj={ "k1": {name: "myname3", value: "myvalue3"}, "k2": {name: "myname4", value: "myvalue4"} }'>{
|
|
33
|
-
"k1": { name: 'myname3', value: 'myvalue3' },
|
|
34
|
-
"k2": { name: 'myname4', value: 'myvalue4' },
|
|
35
|
-
}</button>
|
|
36
|
-
</section>
|
|
37
|
-
|
|
38
|
-
</body>
|
package/tests/test-layout.html
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
<script src=components.js></script>
|
|
2
|
-
<script src=enigmatic.js></script>
|
|
3
|
-
<link rel=stylesheet href=enigmatic.css>
|
|
4
|
-
|
|
5
|
-
<body style="--cols:3fr 10fr 3fr; --rows:3fr 11fr 2fr">
|
|
6
|
-
|
|
7
|
-
<div class="bg-white"></div>
|
|
8
|
-
<div class="bg-white">
|
|
9
|
-
<img height='62' style='filter:invert(50%)' src='https://unpkg.com/simple-icons@v7/icons/apple.svg'>
|
|
10
|
-
|
|
11
|
-
</div>
|
|
12
|
-
<div class="bg-white"></div>
|
|
13
|
-
|
|
14
|
-
<div class="bg-white"></div>
|
|
15
|
-
<section class="bg-white" style="--cols: 1fr 1fr 1fr; --rows: 1fr 1fr 1fr">
|
|
16
|
-
<div class="bg-green"></div>
|
|
17
|
-
<div class="bg-white"><hello-world></hello-world></div>
|
|
18
|
-
<div class="bg-white"></div>
|
|
19
|
-
<div class="bg-white"></div>
|
|
20
|
-
<div class="bg-white"></div>
|
|
21
|
-
<div class="bg-white"></div>
|
|
22
|
-
<div class="bg-white"></div>
|
|
23
|
-
<div class="bg-white"></div>
|
|
24
|
-
<div class="bg-green"></div>
|
|
25
|
-
</section>
|
|
26
|
-
<div class="bg-white"></div>
|
|
27
|
-
|
|
28
|
-
<div class="bg-yellow"></div>
|
|
29
|
-
<div class="bg-yellow"></div>
|
|
30
|
-
<div class="bg-yellow"></div>
|
|
31
|
-
|
|
32
|
-
</body>
|
package/tests/test-schema.html
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
<script src=../enigmatic.js></script>
|
|
2
|
-
<script type=module src=https://unpkg.com/e-schema@0.0.2/module.mjs></script>
|
|
3
|
-
|
|
4
|
-
<script type="module">
|
|
5
|
-
const es = new eSchema({MyType: {message: 'string'}})
|
|
6
|
-
es.validate({message: 'you are'}, 'MyType')
|
|
7
|
-
save(es.schema, 'myschema')
|
|
8
|
-
console.log(load('myschema'))
|
|
9
|
-
console.log(load('nothing'))
|
|
10
|
-
</script>
|
package/tests/test.html
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
<script src='../enigmatic.js'></script>
|
|
2
|
-
<script src='../components.js'></script>
|
|
3
|
-
<link rel='stylesheet' href='../enigmatic.css'>
|
|
4
|
-
|
|
5
|
-
<body style="--cols:1fr 10fr 1fr; --rows:1fr">
|
|
6
|
-
<div class="bg-black">a</div>
|
|
7
|
-
<section class="bg-white">
|
|
8
|
-
<div id='par' fetch='[{"id": 1, "control": "input"},{"id": 2, "control": "select"}]'>
|
|
9
|
-
<div>{control}</div>
|
|
10
|
-
<test-element id="a{id}"></test-element>
|
|
11
|
-
<br>
|
|
12
|
-
<!--IGNORE-->
|
|
13
|
-
<test-link></test-link>
|
|
14
|
-
<!--ENDIGNORE-->
|
|
15
|
-
</div>
|
|
16
|
-
</section>
|
|
17
|
-
<div class="bg-yellow"></div>
|
|
18
|
-
</body>
|
|
19
|
-
|
|
20
|
-
<script>
|
|
21
|
-
e('test-element', {
|
|
22
|
-
set: o=>console.log(o),
|
|
23
|
-
click: ev=>alert()
|
|
24
|
-
}, { border: '4px green solid' })
|
|
25
|
-
|
|
26
|
-
e('test-link', {
|
|
27
|
-
init: e => e.innerHTML = '<a>Click me</a>',
|
|
28
|
-
click: ev => alert()
|
|
29
|
-
})
|
|
30
|
-
|
|
31
|
-
/*
|
|
32
|
-
More verbose:
|
|
33
|
-
customElements.define('test-element', class extends HTMLElement {
|
|
34
|
-
connectedCallback() {
|
|
35
|
-
this.style.border = '3px black solid'
|
|
36
|
-
}
|
|
37
|
-
set(o) {
|
|
38
|
-
this.innerHTML = `<${o.control}></${o.control}>`
|
|
39
|
-
}
|
|
40
|
-
myfunc() {
|
|
41
|
-
alert('custom func')
|
|
42
|
-
}
|
|
43
|
-
})*/
|
|
44
|
-
</script>
|