Skip to content

Commit

Permalink
component.Base: #executeVdomUpdate() => remove the vdom & vnode params …
Browse files Browse the repository at this point in the history 
…#6368
  • Loading branch information
@tobiu
tobiu committed Feb 3, 2025
1 parent 4915a8f commit 9a566b4
Show file tree
Hide file tree
Showing 8 changed files with 26 additions and 72 deletions.
4 changes: 2 additions & 2 deletions apps/realworld2/view/article/PreviewList.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ class PreviewList extends List {

if (!silent) {
me.promiseUpdate().then(() => {
me.fire('createItems');
});
me.fire('createItems')
})
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/calendar/view/YearComponent.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,7 @@ class YearComponent extends Component {
vdom.cn[1].cn[0].cn[scrollFromTop ? 'unshift' : 'push'](vdom.cn[0]);
vdom.cn.splice(0, 1);

me.promiseUpdate(vdom).then(() => {
me.promiseUpdate().then(() => {
y = scrollFromTop ? -data.height : 0;
vdom.cn[0].cn[0].style.transform = `translateY(${y}px)`;
me.update();
Expand Down Expand Up @@ -779,7 +779,7 @@ class YearComponent extends Component {

me.isUpdating = true;

me.promiseUpdate(me.vdom).then(() => {
me.promiseUpdate().then(() => {
me.isUpdating = false
})
}
Expand Down
2 changes: 1 addition & 1 deletion src/calendar/view/month/Component.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -689,7 +689,7 @@ class Component extends BaseComponent {
week.header && container.cn.unshift(week.header)
}

me.promiseUpdate(me.vdom).then(() => {
me.promiseUpdate().then(() => {
Neo.main.DomAccess.scrollTo({
direction: 'top',
id : me.vdom.cn[1].id,
Expand Down
80 changes: 17 additions & 63 deletions src/component/Base.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,11 +571,7 @@ class Component extends Base {
vdom.cls = cls
}

if (me.isVdomUpdating || me.silentVdomUpdate) {
me.needsVdomUpdate = true
} else if (me.mounted && me.vnode) {
me.updateCls(value, oldValue, vdomRoot.id)
}
me.update()
}

/**
Expand Down Expand Up @@ -1049,7 +1045,7 @@ class Component extends Base {
* @protected
*/
afterSetVdom(value, oldValue) {
this.updateVdom(value)
this.updateVdom()
}

/**
Expand Down Expand Up @@ -1109,9 +1105,9 @@ class Component extends Base {
value = value || [];

let me = this,
vdom = me.vdom,
{vdom} = me,
vdomRoot = me.getVdomRoot(),
cls = me.vdom?.cls || [];
cls = vdom.cls || [];

if (vdom === vdomRoot) {
// we need to merge changes
Expand All @@ -1125,9 +1121,7 @@ class Component extends Base {
oldValue && NeoArray.remove(cls, oldValue);
NeoArray.add(cls, value);

if (vdom) {
vdom.cls = cls
}
vdom.cls = cls
}

me.update()
Expand Down Expand Up @@ -1556,15 +1550,14 @@ class Component extends Base {

/**
* Internal method to send update requests to the vdom worker
* @param {Object} vdom
* @param {Neo.vdom.VNode} vnode
* @param {function} [resolve] used by promiseUpdate()
* @param {function} [reject] used by promiseUpdate()
* @private
*/
#executeVdomUpdate(vdom, vnode, resolve, reject) {
let me = this,
opts = {},
#executeVdomUpdate(resolve, reject) {
let me = this,
{vdom, vnode} = me,
opts = {},
deltas;

if (currentWorker.isSharedWorker) {
Expand All @@ -1582,18 +1575,13 @@ class Component extends Base {
opts.vdom = ComponentManager.getVdomTree(vdom, me.updateDepth);
opts.vnode = ComponentManager.getVnodeTree(vnode, me.updateDepth);

me.id === 'neo-grid-view-1' && console.log('update', me.id, me.updateDepth, Neo.isEqual(opts.vnode, me.vnode), Neo.clone(opts.vnode, true), Neo.clone(me.vnode, true));

// Reset the updateDepth to the default value for the next update cycle
me._updateDepth = me.constructor.config.updateDepth;

Neo.vdom.Helper.update(opts).catch(err => {
me.isVdomUpdating = false;
console.log('Error attempting to update component dom', err, me);

reject?.()
}).then(data => {
this.id === 'neo-grid-view-1' && console.log('update DONE', this.id, data.deltas);
me.isVdomUpdating = false;

// checking if the component got destroyed before the update cycle is done
Expand Down Expand Up @@ -2211,8 +2199,6 @@ class Component extends Base {
me._rendered = true; // silent update
me.fire('rendered', me.id);

// console.log('rendered: ' + me.appName + ' ' + me.id, me);

if (autoMount) {
me.mounted = true;

Expand All @@ -2226,13 +2212,11 @@ class Component extends Base {

/**
* Promise based vdom update
* @param {Object} vdom=this.vdom
* @param {Neo.vdom.VNode} vnode= this.vnode
* @returns {Promise<any>}
*/
promiseUpdate(vdom=this.vdom, vnode=this.vnode) {
promiseUpdate() {
return new Promise((resolve, reject) => {
this.updateVdom(vdom, vnode, resolve, reject)
this.updateVdom(resolve, reject)
})
}

Expand Down Expand Up @@ -2600,34 +2584,6 @@ class Component extends Base {
this.afterSetVdom(this.vdom, null)
}

/**
* Delta updates for the cls config. Gets called after the cls config gets changed in case the component is mounted.
* @param {String[]} cls
* @param {String[]} oldCls
* @param {String} id=this.id
* @protected
*/
updateCls(cls, oldCls, id=this.id) {
let me = this,
{vnode} = me,
vnodeTarget = vnode && VNodeUtil.find(me.vnode, {id})?.vnode;

if (vnode && !Neo.isEqual(cls, oldCls)) {
if (vnodeTarget) {
vnodeTarget.className = cls; // keep the vnode in sync
me.vnode = vnode;
}

Neo.applyDeltas(me.appName, {
id,
cls: {
add : NeoArray.difference(cls, oldCls),
remove: NeoArray.difference(oldCls, cls)
}
})
}
}

/**
* Creates the style deltas for newValue & oldValue and applies them directly to the DOM.
* @param {Object|String} value
Expand Down Expand Up @@ -2682,15 +2638,13 @@ class Component extends Base {

/**
* Gets called after the vdom config gets changed in case the component is already mounted (delta updates).
* @param {Object} vdom=this.vdom
* @param {Neo.vdom.VNode} vnode=this.vnode
* @param {function} [resolve] used by promiseUpdate()
* @param {function} [reject] used by promiseUpdate()
* @protected
*/
updateVdom(vdom=this.vdom, vnode=this.vnode, resolve, reject) {
let me = this,
{app, mounted, parentId} = me,
updateVdom(resolve, reject) {
let me = this,
{app, mounted, parentId, vnode} = me,
listenerId;

if (me.isVdomUpdating || me.silentVdomUpdate) {
Expand All @@ -2704,7 +2658,7 @@ class Component extends Base {
app.un('mounted', listenerId);

me.timeout(50).then(() => {
me.vnode && me.updateVdom(me.vdom, me.vnode, resolve, reject)
me.vnode && me.updateVdom(resolve, reject)
})
})
} else {
Expand All @@ -2721,10 +2675,10 @@ class Component extends Base {
// Verify that the critical rendering path => CSS files for the new tree is in place
if (currentWorker.countLoadingThemeFiles !== 0) {
currentWorker.on('themeFilesLoaded', function() {
me.updateVdom(vdom, vnode, resolve, reject)
me.updateVdom(resolve, reject)
}, me, {once: true})
} else {
me.#executeVdomUpdate(vdom, vnode, resolve, reject)
me.#executeVdomUpdate(resolve, reject)
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/component/DateSelector.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -547,7 +547,7 @@ class DateSelector extends Component {
vdom.cn[2].cn[0].cn[scrollFromTop ? 'unshift' : 'push'](vdom.cn[1]);
vdom.cn.splice(1, 1);

me.promiseUpdate(vdom).then(() => {
me.promiseUpdate().then(() => {
y = scrollFromTop ? -data.height : 0;
vdom.cn[1].cn[0].style.transform = `translateY(${y}px)`;
me.update();
Expand Down
2 changes: 1 addition & 1 deletion src/component/Gallery.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ class Gallery extends Component {
itemsRoot.cn.push(vdomItem)
}

me.promiseUpdate(vdom).then(() => {
me.promiseUpdate().then(() => {
me[itemsMounted] = true
})
}
Expand Down
2 changes: 1 addition & 1 deletion src/component/Helix.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,7 +597,7 @@ class Helix extends Component {

me[lockWheel] = true;

me.promiseUpdate(vdom).then(() => {
me.promiseUpdate().then(() => {
me[itemsMounted] = true;
me.fire('itemsMounted');

Expand Down
2 changes: 1 addition & 1 deletion src/draggable/toolbar/DragZone.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ class DragZone extends BaseDragZone {
owner.items.forEach(item => {
wrapperCls = item.wrapperCls || [];

NeoArray[draggable ? 'add' : 'remove'](wrapperCls, 'neo-draggable');
NeoArray.toggle(wrapperCls, 'neo-draggable', draggable);
item.wrapperCls = wrapperCls
})
}
Expand Down

0 comments on commit 9a566b4

Please sign in to comment.