Skip to content

Commit

Permalink
Merge pull request #7 from JamiLu/v210
Browse files Browse the repository at this point in the history 
V210
  • Loading branch information
@JamiLu
JamiLu authored Nov 1, 2023
2 parents 224ef09 + a1bc619 commit e61cf81
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 43 deletions.
8 changes: 4 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ Links

Download
-----
- [https://github.com/JamiLu/RME/releases/download/v2.0.9/rme.js](https://github.com/JamiLu/RME/releases/download/v2.0.9/rme.js)
- [https://github.com/JamiLu/RME/releases/download/v2.0.9/rme.es5.js](https://github.com/JamiLu/RME/releases/download/v2.0.9/rme.es5.js)
- [https://github.com/JamiLu/RME/releases/download/v2.0.9/rme.es5.min.js](https://github.com/JamiLu/RME/releases/download/v2.0.9/rme.es5.min.js)
- [https://github.com/JamiLu/RME/releases/download/v2.0.10/rme.js](https://github.com/JamiLu/RME/releases/download/v2.0.10/rme.js)
- [https://github.com/JamiLu/RME/releases/download/v2.0.10/rme.es5.js](https://github.com/JamiLu/RME/releases/download/v2.0.10/rme.es5.js)
- [https://github.com/JamiLu/RME/releases/download/v2.0.10/rme.es5.min.js](https://github.com/JamiLu/RME/releases/download/v2.0.10/rme.es5.min.js)

NPM
---
Expand Down Expand Up @@ -51,7 +51,7 @@ Basics

Download a script file and place it to a project folder or simply use a github online url as follows.

`<script src="https://github.com/JamiLu/RME/releases/download/v2.0.9/rme.es5.min.js"></script>`
`<script src="https://github.com/JamiLu/RME/releases/download/v2.0.10/rme.es5.min.js"></script>`

__Or use NPM__

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rme.js",
"version": "2.0.9",
"version": "2.0.10",
"description": "Functional JavaScript library for HTML 5 web sites.",
"main": "./src/index.js",
"keywords": [
Expand Down
77 changes: 60 additions & 17 deletions rme-build-current/rme.es5.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@ var RMEElemRenderer = /*#__PURE__*/function () {
oldNode.setProps(newNode.getPropsObj());
oldNode.updateListeners(newNode);
oldNode.updateAttributes(newNode);
oldNode.removeDetachedChildren(newNode);
}
var i = 0;
var oldLength = oldNode ? oldNode.children.length : 0;
Expand Down Expand Up @@ -5207,6 +5208,23 @@ var RMETemplateElement = /*#__PURE__*/function (_Elem) {
}
}

/**
* Removes the detached children from this element if the given element does not have children.
* @param {RMETemplateElement} elem
*/
}, {
key: "removeDetachedChildren",
value: function removeDetachedChildren(elem) {
var _this14 = this;
if (elem.children.length === 0) {
this.children.forEach(function (child, idx) {
if (child.dom().parentElement === null) {
_this14.children.splice(idx, 1);
}
});
}
}

/**
* Set params for this element. If the given arrays have at least one element the parameters are updated.
* @param {array} attrs
Expand Down Expand Up @@ -5668,23 +5686,23 @@ var RMETemplateResolver = function () {
}, {
key: "resolveTemplate",
value: function resolveTemplate(template, parent, round, parentContext) {
var _this14 = this;
var _this15 = this;
var _this$resolveTemplate = this.resolveTemplateProperties(template, parent),
_this$resolveTemplate2 = _slicedToArray(_this$resolveTemplate, 3),
attrs = _this$resolveTemplate2[0],
listeners = _this$resolveTemplate2[1],
children = _this$resolveTemplate2[2];
attrs.forEach(function (attr) {
return Template.resolveAttributes(parent, attr.key, _this14.resolveFunctionValue(attr.val, parent));
return Template.resolveAttributes(parent, attr.key, _this15.resolveFunctionValue(attr.val, parent));
});
listeners.forEach(function (listener) {
return _this14.bindEventToElement(parent, listener.func, listener.parentProp);
return _this15.bindEventToElement(parent, listener.func, listener.parentProp);
});
children.forEach(function (rawChild, idx) {
if (RMETemplateFragmentHelper.isFragmentKey(rawChild.key)) {
_this14.resolveNextParent(rawChild.val, parent, round, parentContext + rawChild.key);
_this15.resolveNextParent(rawChild.val, parent, round, parentContext + rawChild.key);
} else {
_this14.resolveChild(rawChild.key, rawChild.val, parent, round, idx, parentContext);
_this15.resolveChild(rawChild.key, rawChild.val, parent, round, idx, parentContext);
}
});
round++;
Expand Down Expand Up @@ -5758,12 +5776,12 @@ var RMETemplateResolver = function () {
}, {
key: "resolveNextParent",
value: function resolveNextParent(obj, parent, round) {
var _this15 = this;
var _this16 = this;
var parentContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var arr = Array.of(this.resolveFunctionValue(obj, parent)).flat();
var parentTag = Util.isEmpty(parent) ? parentContext : parentContext + parent.getTagName().toLowerCase();
arr.forEach(function (item, i) {
return _this15.resolveTemplate(item, parent, round, "".concat(_this15.context).concat(parentTag, "[").concat(i, "]"));
return _this16.resolveTemplate(item, parent, round, "".concat(_this16.context).concat(parentTag, "[").concat(i, "]"));
});
}

Expand Down Expand Up @@ -5901,7 +5919,7 @@ var RMETemplateResolver = function () {
elem.addClasses(val || '');
break;
case 'text':
elem.setText(val || '');
elem.setText(val);
break;
case 'message':
Template.resolveMessage(elem, val);
Expand Down Expand Up @@ -6105,26 +6123,51 @@ var RMETemplateResolver = function () {
key: "updateElemProps",
value: function updateElemProps(elem, props, oldProps) {
var combined = Template.combineProps(props, oldProps);
Object.keys(combined).forEach(function (prop) {
if (Template.isEventKeyVal(prop, combined[prop])) {
elem[prop].call(elem, combined[prop]); // element event attribute -> elem, event function
Object.entries(combined).forEach(function (_ref9) {
var _ref10 = _slicedToArray(_ref9, 2),
prop = _ref10[0],
value = _ref10[1];
if (prop === 'text') {
value ? elem.setText(value) : elem.setText('');
} else if (Template.isEventKeyVal(prop, value)) {
elem[prop].call(elem, value); // element event attribute -> elem, event function
} else if (prop === 'class') {
combined[prop] ? elem.updateClasses(combined[prop]) : elem.removeAttribute('class');
value ? elem.updateClasses(value) : elem.removeAttribute(prop);
} else if (prop === 'value') {
elem.setAttribute(prop, combined[prop]);
elem.setValue(combined[prop]);
value ? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
elem.setValue(value);
} else if (prop === 'tabIndex') {
value ? elem.setTabIndex(value) : elem.removeAttribute('tabindex');
} else if (prop === 'editable') {
value ? elem.setEditable(value) : elem.removeAttribute('contenteditable');
} else if (prop === 'maxLength') {
value ? elem.setMaxLength(value) : elem.removeAttribute('maxlength');
} else if (prop === 'minLength') {
value ? elem.setMinLength(value) : elem.removeAttribute('minlength');
} else if (prop === 'data') {
value ? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
} else if (prop === 'content' && elem.getTagName().toLowerCase() === 'meta') {
value ? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
} else if (prop === 'content') {
elem.setContent(value);
} else {
Template.resolveAttributes(elem, prop, combined[prop]);
value ? Template.resolveAttributes(elem, prop, value) : elem.removeAttribute(prop);
}
});
}

/**
* Combines new and old props together. Marks old properties that are not in the new properties object as undefined.
* @param {object} newProps
* @param {object} oldProps
* @returns Combined properties object
*/
}, {
key: "combineProps",
value: function combineProps(newProps, oldProps) {
Object.keys(oldProps).forEach(function (prop) {
if (oldProps[prop] && !newProps[prop]) {
// if no new prop but old exist
oldProps[prop] = prop === 'style' ? '' : undefined;
oldProps[prop] = undefined;
}
});
return _objectSpread(_objectSpread({}, oldProps), newProps);
Expand Down
2 changes: 1 addition & 1 deletion rme-build-current/rme.es5.min.js
View file

Large diffs are not rendered by default.

57 changes: 47 additions & 10 deletions rme-build-current/rme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,7 @@ class RMEElemRenderer {
oldNode.setProps(newNode.getPropsObj());
oldNode.updateListeners(newNode);
oldNode.updateAttributes(newNode);
oldNode.removeDetachedChildren(newNode);
}

let i = 0;
Expand Down Expand Up @@ -4554,6 +4555,20 @@ class RMETemplateElement extends Elem {
}
}

/**
* Removes the detached children from this element if the given element does not have children.
* @param {RMETemplateElement} elem
*/
removeDetachedChildren(elem) {
if (elem.children.length === 0) {
this.children.forEach((child, idx) => {
if (child.dom().parentElement === null) {
this.children.splice(idx, 1);
}
});
}
}

/**
* Set params for this element. If the given arrays have at least one element the parameters are updated.
* @param {array} attrs
Expand Down Expand Up @@ -5136,7 +5151,7 @@ const RMETemplateResolver = (function() {
elem.addClasses(val || '');
break;
case 'text':
elem.setText(val || '');
elem.setText(val);
break;
case 'message':
Template.resolveMessage(elem, val);
Expand Down Expand Up @@ -5325,24 +5340,46 @@ const RMETemplateResolver = (function() {
*/
static updateElemProps(elem, props, oldProps) {
const combined = Template.combineProps(props, oldProps);
Object.keys(combined).forEach((prop) => {
if (Template.isEventKeyVal(prop, combined[prop])) {
elem[prop].call(elem, combined[prop]); // element event attribute -> elem, event function
Object.entries(combined).forEach(([prop, value]) => {
if (prop === 'text') {
value ? elem.setText(value) : elem.setText('');
} else if (Template.isEventKeyVal(prop, value)) {
elem[prop].call(elem, value); // element event attribute -> elem, event function
} else if (prop === 'class') {
combined[prop] ? elem.updateClasses(combined[prop]) : elem.removeAttribute('class');
value ? elem.updateClasses(value) : elem.removeAttribute(prop);
} else if (prop === 'value') {
elem.setAttribute(prop, combined[prop]);
elem.setValue(combined[prop]);
value ? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
elem.setValue(value);
} else if (prop === 'tabIndex') {
value ? elem.setTabIndex(value) : elem.removeAttribute('tabindex')
} else if (prop === 'editable') {
value ? elem.setEditable(value) : elem.removeAttribute('contenteditable');
} else if (prop === 'maxLength') {
value ? elem.setMaxLength(value) : elem.removeAttribute('maxlength');
} else if (prop === 'minLength') {
value ? elem.setMinLength(value) : elem.removeAttribute('minlength');
} else if (prop === 'data') {
value? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
} else if (prop === 'content' && elem.getTagName().toLowerCase() === 'meta') {
value ? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
} else if (prop === 'content') {
elem.setContent(value);
} else {
Template.resolveAttributes(elem, prop, combined[prop]);
value ? Template.resolveAttributes(elem, prop, value) : elem.removeAttribute(prop);
}
});
}

/**
* Combines new and old props together. Marks old properties that are not in the new properties object as undefined.
* @param {object} newProps
* @param {object} oldProps
* @returns Combined properties object
*/
static combineProps(newProps, oldProps) {
Object.keys(oldProps).forEach(prop => {
if (oldProps[prop] && !newProps[prop]) { // if no new prop but old exist
oldProps[prop] = prop === 'style' ? '' : undefined;
if (oldProps[prop] && !newProps[prop]) {
oldProps[prop] = undefined;
}
});

Expand Down
1 change: 1 addition & 0 deletions src/app/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ class RMEElemRenderer {
oldNode.setProps(newNode.getPropsObj());
oldNode.updateListeners(newNode);
oldNode.updateAttributes(newNode);
oldNode.removeDetachedChildren(newNode);
}

let i = 0;
Expand Down
14 changes: 14 additions & 0 deletions src/template/RMETemplateElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,20 @@ class RMETemplateElement extends Elem {
}
}

/**
* Removes the detached children from this element if the given element does not have children.
* @param {RMETemplateElement} elem
*/
removeDetachedChildren(elem) {
if (elem.children.length === 0) {
this.children.forEach((child, idx) => {
if (child.dom().parentElement === null) {
this.children.splice(idx, 1);
}
});
}
}

/**
* Set params for this element. If the given arrays have at least one element the parameters are updated.
* @param {array} attrs
Expand Down
42 changes: 32 additions & 10 deletions src/template/template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ const RMETemplateResolver = (function() {
elem.addClasses(val || '');
break;
case 'text':
elem.setText(val || '');
elem.setText(val);
break;
case 'message':
Template.resolveMessage(elem, val);
Expand Down Expand Up @@ -504,24 +504,46 @@ const RMETemplateResolver = (function() {
*/
static updateElemProps(elem, props, oldProps) {
const combined = Template.combineProps(props, oldProps);
Object.keys(combined).forEach((prop) => {
if (Template.isEventKeyVal(prop, combined[prop])) {
elem[prop].call(elem, combined[prop]); // element event attribute -> elem, event function
Object.entries(combined).forEach(([prop, value]) => {
if (prop === 'text') {
value ? elem.setText(value) : elem.setText('');
} else if (Template.isEventKeyVal(prop, value)) {
elem[prop].call(elem, value); // element event attribute -> elem, event function
} else if (prop === 'class') {
combined[prop] ? elem.updateClasses(combined[prop]) : elem.removeAttribute('class');
value ? elem.updateClasses(value) : elem.removeAttribute(prop);
} else if (prop === 'value') {
elem.setAttribute(prop, combined[prop]);
elem.setValue(combined[prop]);
value ? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
elem.setValue(value);
} else if (prop === 'tabIndex') {
value ? elem.setTabIndex(value) : elem.removeAttribute('tabindex')
} else if (prop === 'editable') {
value ? elem.setEditable(value) : elem.removeAttribute('contenteditable');
} else if (prop === 'maxLength') {
value ? elem.setMaxLength(value) : elem.removeAttribute('maxlength');
} else if (prop === 'minLength') {
value ? elem.setMinLength(value) : elem.removeAttribute('minlength');
} else if (prop === 'data') {
value? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
} else if (prop === 'content' && elem.getTagName().toLowerCase() === 'meta') {
value ? elem.setAttribute(prop, value) : elem.removeAttribute(prop);
} else if (prop === 'content') {
elem.setContent(value);
} else {
Template.resolveAttributes(elem, prop, combined[prop]);
value ? Template.resolveAttributes(elem, prop, value) : elem.removeAttribute(prop);
}
});
}

/**
* Combines new and old props together. Marks old properties that are not in the new properties object as undefined.
* @param {object} newProps
* @param {object} oldProps
* @returns Combined properties object
*/
static combineProps(newProps, oldProps) {
Object.keys(oldProps).forEach(prop => {
if (oldProps[prop] && !newProps[prop]) { // if no new prop but old exist
oldProps[prop] = prop === 'style' ? '' : undefined;
if (oldProps[prop] && !newProps[prop]) {
oldProps[prop] = undefined;
}
});

Expand Down

0 comments on commit e61cf81

Please sign in to comment.