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

v0.0.7: Switched to lowercase decorators.

Browse Source
This commit is contained in:
Miel Truyen
2020-02-26 16:27:24 +01:00
parent 2b1846a008
commit a757ae37b3
13 changed files with 40 additions and 26 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.5",
"version": "0.0.7",
"author": "Miel Truyen <miel.truyen@cerxes.net>",
"description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
"repository": {

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

@@ -6,7 +6,7 @@ import { trackValue } from "../decorator-utils/track-value";
* @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) {
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 ...
@@ -25,17 +25,17 @@ export function Prop(opts) {
//console.log(`Prop ${key} was set: ` + JSON.stringify(value));
if (opts.reflect) {
if ((value ?? false) === false) {
this.removeAttribute(attrName);
if(this.hasAttribute(attrName)) this.removeAttribute(attrName);
} else if (value === true) {
this.setAttribute(attrName, "");
if(!this.hasAttribute(attrName)) this.setAttribute(attrName, "");
} else {
this.setAttribute(attrName, value);
let strValue = value?.toString() || "";
if(this.getAttribute(attrName)!== strValue) this.setAttribute(attrName, strValue);
}
}
this.markDirty && this.markDirty();
});
// Registering as attr and subscribing to relevant callbacks
if (opts.attr !== false || opts.attr === undefined) {
let oldCallback = target.attributeChangedCallback;

2
packages/csx/src/custom-element/state.js
View File

@@ -4,7 +4,7 @@ import {trackValue} from "../decorator-utils/track-value";
/**
* Decorate a variable as part of the component-state, and will thus trigger a re-render whenever it is changed
*/
export function State() {
export function state() {
return function decorator(target, key, descriptor){
// Dev-note: Tis is run for every instance made of the decorated class ...
// console.log("State " + key, target);

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

@@ -110,6 +110,9 @@ export const NodeTreeRenderer = {
const VNODE_SPECIAL_PROPS = {
['key']: false,
['ref']: false,
['value']: ({host, newVal, oldVal, key})=>{
if(newVal!==oldVal) host.value = newVal;
},
['className']: ({host, newVal, oldVal, key})=>{
let oldClasses = new Set();
let newClasses = new Set();