jails-js 5.0.0-beta.7 → 5.0.0-beta.8
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/.babelrc +6 -0
- package/README.md +7 -25
- package/dist/jails.js +1 -1
- package/dist/jails.js.LICENSE.txt +4 -0
- package/dist/jails.js.map +1 -1
- package/package.json +40 -39
- package/src/Component.ts +168 -113
- package/src/index.ts +18 -52
- package/src/template-system.ts +87 -0
- package/src/utils/index.js +42 -8
- package/tsconfig.json +11 -3
- package/src/Element.ts +0 -126
- package/src/Instances.ts +0 -1
- package/src/Scanner.ts +0 -26
- package/src/soda-config.js +0 -87
package/src/Element.ts
DELETED
@@ -1,126 +0,0 @@
|
|
1
|
-
import { stripTemplateTag, dup, rAF, createTemplate, uuid } from './utils'
|
2
|
-
import morphdom from 'morphdom'
|
3
|
-
import { setSodaConfig } from './soda-config'
|
4
|
-
import { Instances } from './Instances'
|
5
|
-
|
6
|
-
const sodajs = setSodaConfig()
|
7
|
-
const templates = {}
|
8
|
-
|
9
|
-
export const Element = ( el:HTMLElement ) => {
|
10
|
-
|
11
|
-
stripTemplateTag( el )
|
12
|
-
|
13
|
-
let updates = []
|
14
|
-
|
15
|
-
const model = Object.assign({}, JSON.parse(el.dataset.initialState || '{}'))
|
16
|
-
const morphdomOptions = lifecycle(el)
|
17
|
-
const { template, tplid } = getTemplateData(el)
|
18
|
-
|
19
|
-
const api = {
|
20
|
-
|
21
|
-
tplid,
|
22
|
-
template,
|
23
|
-
model,
|
24
|
-
parent: {},
|
25
|
-
view : _ => _,
|
26
|
-
instances:{},
|
27
|
-
destroyers:[],
|
28
|
-
promises: [],
|
29
|
-
parentUpdate: data => null,
|
30
|
-
|
31
|
-
dispose(){
|
32
|
-
if( api.promises.length ){
|
33
|
-
Promise.all(api.promises)
|
34
|
-
.then(_ => api.destroyers.forEach( destroy => destroy(api) ))
|
35
|
-
}else {
|
36
|
-
api.destroyers.forEach( destroy => destroy(api) )
|
37
|
-
}
|
38
|
-
},
|
39
|
-
|
40
|
-
update( data = {}, isParentUpdate ) {
|
41
|
-
|
42
|
-
if( !document.body.contains(el) )
|
43
|
-
return
|
44
|
-
|
45
|
-
updates.push( data )
|
46
|
-
|
47
|
-
rAF( _ => {
|
48
|
-
|
49
|
-
if( updates.length ) {
|
50
|
-
|
51
|
-
const newdata = {}
|
52
|
-
updates.forEach( d => Object.assign(newdata, d ) )
|
53
|
-
updates = []
|
54
|
-
|
55
|
-
api.model = Object.assign( api.model, newdata )
|
56
|
-
|
57
|
-
if( isParentUpdate ) {
|
58
|
-
api.parentUpdate( api.model )
|
59
|
-
}
|
60
|
-
|
61
|
-
const newhtml = sodajs(template, api.view(dup(api.model)))
|
62
|
-
morphdom( el, newhtml, morphdomOptions )
|
63
|
-
|
64
|
-
Array
|
65
|
-
.from( el.querySelectorAll('[data-component]') )
|
66
|
-
.forEach( node => {
|
67
|
-
if( !Instances.get(node) ) return
|
68
|
-
const { parent, ...model } = api.model
|
69
|
-
const initialState = node.dataset.initialState? JSON.parse(node.dataset.initialState): {}
|
70
|
-
const newmodel = Object.assign(initialState, { parent:{ ...model, ...parent} })
|
71
|
-
Instances.get(node).update( newmodel, true )
|
72
|
-
})
|
73
|
-
}
|
74
|
-
})
|
75
|
-
}
|
76
|
-
}
|
77
|
-
|
78
|
-
Instances.set(el, api)
|
79
|
-
|
80
|
-
return api
|
81
|
-
}
|
82
|
-
|
83
|
-
const lifecycle = ( element: HTMLElement ) => {
|
84
|
-
return {
|
85
|
-
onBeforeElUpdated: update(element),
|
86
|
-
onBeforeElChildrenUpdated: update(element),
|
87
|
-
getNodeKey(node) {
|
88
|
-
if( node.nodeType === 1 && node.getAttribute('tplid') )
|
89
|
-
return node.dataset.key || node.getAttribute('tplid')
|
90
|
-
return false
|
91
|
-
}
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
|
-
const update = ( element: HTMLElement ) => ( node: HTMLElement, toEl: HTMLElement ) => {
|
96
|
-
if( node.nodeType == 1 ) {
|
97
|
-
if( 'static' in node.dataset)
|
98
|
-
return false
|
99
|
-
if( node.dataset.component && Instances.get(node) && node !== element )
|
100
|
-
return false
|
101
|
-
}
|
102
|
-
return true
|
103
|
-
}
|
104
|
-
|
105
|
-
const getTemplateData = ( element: HTMLElement ) => {
|
106
|
-
|
107
|
-
Array
|
108
|
-
.from(element.querySelectorAll('[data-component]'))
|
109
|
-
.forEach( setTemplate )
|
110
|
-
|
111
|
-
return setTemplate( element )
|
112
|
-
}
|
113
|
-
|
114
|
-
const setTemplate = (element) => {
|
115
|
-
if( element.getAttribute('tplid') ) {
|
116
|
-
const tplid = element.getAttribute('tplid')
|
117
|
-
const template = templates[tplid]
|
118
|
-
return { tplid, template }
|
119
|
-
}else {
|
120
|
-
const tplid = uuid()
|
121
|
-
element.setAttribute('tplid', tplid)
|
122
|
-
templates[tplid] = createTemplate(element.outerHTML, templates)
|
123
|
-
const template = templates[tplid]
|
124
|
-
return { tplid, template }
|
125
|
-
}
|
126
|
-
}
|
package/src/Instances.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export const Instances = new WeakMap()
|
package/src/Scanner.ts
DELETED
@@ -1,26 +0,0 @@
|
|
1
|
-
|
2
|
-
export const Scanner = {
|
3
|
-
|
4
|
-
scan( node: HTMLElement, callback ) {
|
5
|
-
if( node.nodeType === 1 ) {
|
6
|
-
const list : Array<HTMLElement> = Array.from( node.querySelectorAll('[data-component]') )
|
7
|
-
const elements : Array<HTMLElement> = node.dataset.component? [node].concat(list) : list
|
8
|
-
if( elements.length ) {
|
9
|
-
elements.reverse().forEach( callback )
|
10
|
-
}
|
11
|
-
}
|
12
|
-
},
|
13
|
-
|
14
|
-
observe( target: HTMLElement, onAdd, onRemove ) {
|
15
|
-
const observer = new MutationObserver(mutations => mutations.forEach( mutation => {
|
16
|
-
if (mutation.type === 'childList') {
|
17
|
-
if (mutation.addedNodes.length) {
|
18
|
-
Array.from( mutation.addedNodes ).forEach( node => Scanner.scan(node, onAdd) )
|
19
|
-
} else if (mutation.removedNodes.length) {
|
20
|
-
Array.from( mutation.removedNodes ).forEach( node => Scanner.scan(node, onRemove) )
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}))
|
24
|
-
observer.observe(target, { childList: true, subtree: true })
|
25
|
-
}
|
26
|
-
}
|
package/src/soda-config.js
DELETED
@@ -1,87 +0,0 @@
|
|
1
|
-
import sodajs from 'sodajs'
|
2
|
-
|
3
|
-
export const setSodaConfig = () => {
|
4
|
-
|
5
|
-
sodajs.prefix('v-')
|
6
|
-
|
7
|
-
sodajs.directive('repeat', {
|
8
|
-
|
9
|
-
priority: 10,
|
10
|
-
|
11
|
-
link({ scope, el, expression, getValue, compileNode }) {
|
12
|
-
|
13
|
-
let itemName
|
14
|
-
let valueName
|
15
|
-
let trackName
|
16
|
-
|
17
|
-
const trackReg = /\s+by\s+([^\s]+)$/
|
18
|
-
const inReg = /([^\s]+)\s+in\s+([^\s]+)|\(([^,]+)\s*,\s*([^)]+)\)\s+in\s+([^\s]+)/
|
19
|
-
|
20
|
-
const opt = expression.replace(trackReg, (item, $1) => {
|
21
|
-
if ($1)
|
22
|
-
trackName = ($1 || '').trim()
|
23
|
-
return ''
|
24
|
-
})
|
25
|
-
|
26
|
-
const r = inReg.exec(opt)
|
27
|
-
|
28
|
-
if (r) {
|
29
|
-
if (r[1] && r[2]) {
|
30
|
-
itemName = (r[1] || '').trim()
|
31
|
-
valueName = (r[2] || '').trim()
|
32
|
-
|
33
|
-
if (!(itemName && valueName)) {
|
34
|
-
return
|
35
|
-
}
|
36
|
-
} else if (r[3] && r[4] && r[5]) {
|
37
|
-
trackName = (r[3] || '').trim()
|
38
|
-
itemName = (r[4] || '').trim()
|
39
|
-
valueName = (r[5] || '').trim()
|
40
|
-
}
|
41
|
-
} else {
|
42
|
-
return
|
43
|
-
}
|
44
|
-
|
45
|
-
trackName = trackName || '$index'
|
46
|
-
|
47
|
-
const repeatObj = getValue(scope, valueName) || []
|
48
|
-
|
49
|
-
const repeatFunc = (i) => {
|
50
|
-
|
51
|
-
const itemNode = el.cloneNode(true)
|
52
|
-
const itemScope = Object.create(scope)
|
53
|
-
|
54
|
-
itemScope[trackName] = i
|
55
|
-
itemScope[itemName] = repeatObj[i]
|
56
|
-
|
57
|
-
itemNode.removeAttribute(`${this._prefix}repeat`)
|
58
|
-
|
59
|
-
el.parentNode.insertBefore(itemNode, el)
|
60
|
-
|
61
|
-
Array.from(itemNode.querySelectorAll('[data-component]'))
|
62
|
-
.forEach( node => node.setAttribute('data-initial-state', JSON.stringify(itemScope)) )
|
63
|
-
|
64
|
-
compileNode(itemNode, itemScope)
|
65
|
-
}
|
66
|
-
|
67
|
-
if ('length' in repeatObj) {
|
68
|
-
for (var i = 0; i < repeatObj.length; i++) {
|
69
|
-
repeatFunc(i)
|
70
|
-
}
|
71
|
-
} else {
|
72
|
-
for (var i in repeatObj) {
|
73
|
-
if (repeatObj.hasOwnProperty(i)) {
|
74
|
-
repeatFunc(i)
|
75
|
-
}
|
76
|
-
}
|
77
|
-
}
|
78
|
-
|
79
|
-
el.parentNode.removeChild(el)
|
80
|
-
|
81
|
-
if (el.childNodes && el.childNodes.length)
|
82
|
-
el.innerHTML = ''
|
83
|
-
}
|
84
|
-
})
|
85
|
-
|
86
|
-
return sodajs
|
87
|
-
}
|