enigmatic 0.21.4 → 0.21.6
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/enigmatic.js +28 -2
- package/package.json +1 -1
- package/tests/test.html +39 -0
- package/tests/test-authn.html +0 -0
- package/tests/test-element-classic.html +0 -14
- package/tests/test-icons.html +0 -3
- package/tests/test-state.html +0 -6
- package/tests/test.mjs +0 -26
package/enigmatic.js
CHANGED
|
@@ -70,9 +70,22 @@ w.flatten = (obj, text) => {
|
|
|
70
70
|
return htmls
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
+
w.e = (name, mount, style, fn) => {
|
|
74
|
+
customElements.define(name, class extends HTMLElement {
|
|
75
|
+
connectedCallback() {
|
|
76
|
+
Object.assign(this.style, style)
|
|
77
|
+
if (mount) mount()
|
|
78
|
+
Object.assign(this, fn)
|
|
79
|
+
Object.keys(fn).filter(k=>k.match(/click/)).forEach(k=>{
|
|
80
|
+
this.addEventListener(k, fn[k], true)
|
|
81
|
+
})
|
|
82
|
+
}
|
|
83
|
+
})
|
|
84
|
+
}
|
|
85
|
+
|
|
73
86
|
w.element = (
|
|
74
87
|
name,
|
|
75
|
-
{ onMount = x => x, beforeData = (x) => x, style, template = '' }
|
|
88
|
+
{ onMount = x => x, beforeData = (x) => x, style, template = '', fn = {} }
|
|
76
89
|
) => {
|
|
77
90
|
customElements.define(
|
|
78
91
|
name,
|
|
@@ -86,6 +99,7 @@ w.element = (
|
|
|
86
99
|
}
|
|
87
100
|
this.template = template
|
|
88
101
|
if (!this.template.match('{')) this.innerHTML = this.template
|
|
102
|
+
Object.assign(this, fn)
|
|
89
103
|
}
|
|
90
104
|
set(o) {
|
|
91
105
|
o = beforeData(o)
|
|
@@ -154,7 +168,19 @@ w.start = async () => {
|
|
|
154
168
|
[...e.attributes].map((a) => (e.attr[a.name] = a.value))
|
|
155
169
|
if (e.attr.fetch) {
|
|
156
170
|
e.fetch = async () => {
|
|
157
|
-
|
|
171
|
+
let template = e.innerHTML
|
|
172
|
+
let ignore = template.match(/<!--IGNORE-->.*>/gms) || ''
|
|
173
|
+
if(ignore)
|
|
174
|
+
template = template.replace(ignore, '')
|
|
175
|
+
const obj = await w.get(e.attr.fetch, {}, null, e.attr.data)
|
|
176
|
+
e.innerHTML = w.flatten(obj, template) + ignore
|
|
177
|
+
let pos = 0
|
|
178
|
+
for(c in e.children) {
|
|
179
|
+
const ele = e.children[c]
|
|
180
|
+
if(typeof ele === 'object' && 'set' in ele)
|
|
181
|
+
e.children[c].set(obj[pos++])
|
|
182
|
+
}
|
|
183
|
+
return obj
|
|
158
184
|
}
|
|
159
185
|
if (!e.hasAttribute('defer'))
|
|
160
186
|
e.fetch()
|
package/package.json
CHANGED
package/tests/test.html
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
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
|
+
|
|
9
|
+
<div id='par' fetch='[{"id": 1, "control": "input"},{"id": 2, "control": "select"}]'>
|
|
10
|
+
<div>{control}</div>
|
|
11
|
+
<test-element id="a{id}"></test-element>
|
|
12
|
+
<br>
|
|
13
|
+
<!--IGNORE-->
|
|
14
|
+
ignore this
|
|
15
|
+
<!--ENDIGNORE-->
|
|
16
|
+
</div>
|
|
17
|
+
</section>
|
|
18
|
+
<div class="bg-yellow"></div>
|
|
19
|
+
</body>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
e('test-element', null, {border: '4px green solid'}, {
|
|
23
|
+
set: o=>console.log(o),
|
|
24
|
+
click: x=>alert()
|
|
25
|
+
})
|
|
26
|
+
/*
|
|
27
|
+
More verbose:
|
|
28
|
+
customElements.define('test-element', class extends HTMLElement {
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
this.style.border = '3px black solid'
|
|
31
|
+
}
|
|
32
|
+
set(o) {
|
|
33
|
+
this.innerHTML = `<${o.control}></${o.control}>`
|
|
34
|
+
}
|
|
35
|
+
myfunc() {
|
|
36
|
+
alert('custom func')
|
|
37
|
+
}
|
|
38
|
+
})*/
|
|
39
|
+
</script>
|
package/tests/test-authn.html
DELETED
|
File without changes
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<script src='../enigmatic.js'></script>
|
|
2
|
-
|
|
3
|
-
<script type="module">
|
|
4
|
-
|
|
5
|
-
customElements.define('classic-syntax', class CS extends HTMLElement {
|
|
6
|
-
set(data) {
|
|
7
|
-
this.innerHTML = flatten(data, this.innerHTML)
|
|
8
|
-
}
|
|
9
|
-
})
|
|
10
|
-
state.mykey = {message: 'somedata'}
|
|
11
|
-
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<classic-syntax data="mykey">{message}</classic-syntax>
|
package/tests/test-icons.html
DELETED
package/tests/test-state.html
DELETED
package/tests/test.mjs
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
// wsl install:
|
|
2
|
-
// wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
|
|
3
|
-
// sudo apt - y install./ google - chrome - stable_current_amd64.deb
|
|
4
|
-
|
|
5
|
-
import puppeteer from 'puppeteer'
|
|
6
|
-
import { te, tde, tm, wait } from 'instax'
|
|
7
|
-
const host = 'http://127.0.0.1:8080'
|
|
8
|
-
|
|
9
|
-
const browser = await puppeteer.launch({ headless: true })
|
|
10
|
-
const page = await browser.newPage()
|
|
11
|
-
await page.goto(`${host}/test.html`, {
|
|
12
|
-
waitUntil: 'networkidle2',
|
|
13
|
-
timeout: 5000
|
|
14
|
-
})
|
|
15
|
-
|
|
16
|
-
const e = (await page.evaluate("enigmatic"))
|
|
17
|
-
tm(e.version, /0.11.1/)
|
|
18
|
-
tm(await page.evaluate("$('#div1').template"), /results/)
|
|
19
|
-
|
|
20
|
-
// get
|
|
21
|
-
// state
|
|
22
|
-
// div
|
|
23
|
-
// custom
|
|
24
|
-
await wait(2000)
|
|
25
|
-
await page.close()
|
|
26
|
-
await browser.close()
|