cerxes/csx
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bugfix

Browse Source
This commit is contained in:
Miel Truyen
2019-12-30 23:18:19 +01:00
parent 4ca54727f1
commit 2b1846a008
6 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/csx/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@cerxes/csx",
"version": "0.0.2",
"version": "0.0.5",
"author": "Miel Truyen <miel.truyen@cerxes.net>",
"description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
"repository": {

3
packages/csx/src/custom-element/prop.js
View File

@@ -3,14 +3,13 @@ import { trackValue } from "../decorator-utils/track-value";
/**
* Decorate a variable as a property of the custom-element.
* @param {Object} opts
* @param {boolean} opts.attr - Update the property when an attribute with specified name is set. Defaults to the property-name
* @param {boolean|string} opts.attr - Update the property when an attribute with specified name is set. Defaults to the property-name
* @param {boolean} opts.reflect - Reflect the property back to attributes when the property is set
*/
export function Prop(opts) {
opts = opts || {};
return function decorator(target, key, descriptor) {
// Dev-note: Tis is run for every instance made of the decorated class ...
// console.log("Prop " + key, target);
// TODO could check the prototype if a markDirty function exists, throw an error if it doesn't
// Register this prop on the class, so the VDOM-renderer can find this and set the prop instead of the attribute (if @meta is every introduced as a built-in decorator, this would be the place to use it)

12
packages/csx/src/vdom/renderers/nodetree.js
View File

@@ -83,8 +83,8 @@ export const NodeTreeRenderer = {
special({host, newVal, oldVal, key});
}else if(key.slice(0,2)==='on' && key[2]>='A' && key[2]<='Z'){
// Event-prop
// Convert event name from camelCase to dash-case (this means that this on<EvenName> syntax might not be able to cover all custom-events)
let eventName = key[2].toLowerCase()+key.slice(3).replace(/[A-Z]/g, function(c){return('-'+c.toLowerCase())});
// Convert event name from camelCase to lowercase
let eventName = key[2].toLowerCase()+key.slice(3).toLowerCase(); // This used to dash case things: .replace(/[A-Z]/g, function(c){return('-'+c.toLowerCase())});
if(!newVal){
host.removeEventListener(eventName, oldVal);
}else{
@@ -145,9 +145,9 @@ const VNODE_SPECIAL_PROPS = {
host.style[key]=null;
}
}
for(let key in newVal){
host.style[key] = newVal[key];
}
}
for(let key in newVal){
host.style[key] = newVal[key];
}
}else if(!newVal){
host.removeAttribute('style');
@@ -157,4 +157,4 @@ const VNODE_SPECIAL_PROPS = {
//TODO!!
throw new Error("We're still planning to implement this but it hasn't been done yet!");
},
};
};