From a757ae37b353ec77d8df870100caf9c04daa2325 Mon Sep 17 00:00:00 2001 From: Miel Truyen Date: Wed, 26 Feb 2020 16:27:24 +0100 Subject: [PATCH] v0.0.7: Switched to lowercase decorators. --- packages/csx/package.json | 2 +- packages/csx/src/custom-element/prop.js | 10 +++++----- packages/csx/src/custom-element/state.js | 2 +- packages/csx/src/vdom/renderers/nodetree.js | 3 +++ tests/basic/index.jsx | 13 ++++++++++++- tests/basic/page.jsx | 4 ++-- tests/pdf/index.jsx | 4 ++-- tests/svg/svg-loader.jsx | 6 +++--- tests/svg/svg-tester-two.jsx | 4 ++-- tests/svg/svg-tester.jsx | 4 ++-- tests/todos-mvc/components/my-todo.jsx | 4 ++-- tests/todos-mvc/components/todo-input.jsx | 4 ++-- tests/todos-mvc/components/todo-item.jsx | 6 +++--- 13 files changed, 40 insertions(+), 26 deletions(-) diff --git a/packages/csx/package.json b/packages/csx/package.json index 5b6d20a..afc65b8 100644 --- a/packages/csx/package.json +++ b/packages/csx/package.json @@ -1,6 +1,6 @@ { "name": "@cerxes/csx", - "version": "0.0.5", + "version": "0.0.7", "author": "Miel Truyen ", "description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.", "repository": { diff --git a/packages/csx/src/custom-element/prop.js b/packages/csx/src/custom-element/prop.js index 2e3aba0..6ae67d0 100644 --- a/packages/csx/src/custom-element/prop.js +++ b/packages/csx/src/custom-element/prop.js @@ -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; diff --git a/packages/csx/src/custom-element/state.js b/packages/csx/src/custom-element/state.js index e5acb67..854f824 100644 --- a/packages/csx/src/custom-element/state.js +++ b/packages/csx/src/custom-element/state.js @@ -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); diff --git a/packages/csx/src/vdom/renderers/nodetree.js b/packages/csx/src/vdom/renderers/nodetree.js index f12f6bd..18c4603 100644 --- a/packages/csx/src/vdom/renderers/nodetree.js +++ b/packages/csx/src/vdom/renderers/nodetree.js @@ -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(); diff --git a/tests/basic/index.jsx b/tests/basic/index.jsx index 13738c3..a6778a5 100644 --- a/tests/basic/index.jsx +++ b/tests/basic/index.jsx @@ -15,4 +15,15 @@ document.body.appendChild(render()); * - style-attribute untested * - Want a way to toggle classes: could do * - Supporting fragments <>...? - */ \ No newline at end of file + */ +// Private vars are visible, because of loose mode, not desirable... +class PrivTest{ + #privatevar = 1; + get someVar(){ + console.log(Object.getOwnPropertyDescriptors(this)); + return this.#privatevar; + } +} +let a = new PrivTest(); +console.log(a); +console.log(a.someVar); \ No newline at end of file diff --git a/tests/basic/page.jsx b/tests/basic/page.jsx index 2890815..44459bc 100644 --- a/tests/basic/page.jsx +++ b/tests/basic/page.jsx @@ -1,9 +1,9 @@ -import {defineElement, render, CustomElement, Prop, State} from "../../packages/csx"; +import {defineElement, render, CustomElement, prop, state} from "../../packages/csx"; @defineElement('example-page') export class ExamplePage extends CustomElement{ - @Prop({reflect: true, attr: 'page-width'}) + @prop({reflect: true, attr: 'page-width'}) set pageWidth(value){ if(value!==this.#pageWidth){ this.#pageWidth = value; diff --git a/tests/pdf/index.jsx b/tests/pdf/index.jsx index 5001ed1..44b3e7c 100644 --- a/tests/pdf/index.jsx +++ b/tests/pdf/index.jsx @@ -1,5 +1,5 @@ import kaartStyle from "./index.pcss"; -import {render, defineElement, CustomElement, Host, State, Prop, ShadowDOM} from "../../packages/csx"; +import {render, defineElement, CustomElement, Host, state, prop, ShadowDOM} from "../../packages/csx"; // Style document.head.appendChild(render()); @@ -8,7 +8,7 @@ document.head.appendChild(render()); @defineElement("pasta-buffet-kaart") class PastaBuffetKaart extends CustomElement{ - @Prop() eigenExemplaar; + @prop() eigenExemplaar; render(){ return
diff --git a/tests/svg/svg-loader.jsx b/tests/svg/svg-loader.jsx index 7b2916c..0ed944f 100644 --- a/tests/svg/svg-loader.jsx +++ b/tests/svg/svg-loader.jsx @@ -1,4 +1,4 @@ -import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx"; +import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx"; import loaderComponentShadowStyle from './svg-loader.shadow.scss'; // TODO configurability, like inverted and not with props... @@ -13,8 +13,8 @@ export class SvgLoader extends CustomElement{ // Private properties // Properties - @Prop({reflect: true}) inverted; - @Prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000"; + @prop({reflect: true}) inverted; + @prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000"; // Handlers diff --git a/tests/svg/svg-tester-two.jsx b/tests/svg/svg-tester-two.jsx index ba5605a..eeb72c9 100644 --- a/tests/svg/svg-tester-two.jsx +++ b/tests/svg/svg-tester-two.jsx @@ -1,4 +1,4 @@ -import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx"; +import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx"; import {SvgLoader} from "./svg-loader"; @defineElement('svg-tester-two') @@ -18,7 +18,7 @@ export class SvgTesterTwo extends CustomElement{ ]; // Properties - @State() state = this.states[0]; + @state() state = this.states[0]; // Handlers diff --git a/tests/svg/svg-tester.jsx b/tests/svg/svg-tester.jsx index 7909ec0..9902dde 100644 --- a/tests/svg/svg-tester.jsx +++ b/tests/svg/svg-tester.jsx @@ -1,4 +1,4 @@ -import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx"; +import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx"; import {SvgLoader} from "./svg-loader"; @defineElement('svg-tester') @@ -18,7 +18,7 @@ export class SvgTester extends CustomElement{ ]; // Properties - @State() state = this.states[0]; + @state() state = this.states[0]; // Handlers diff --git a/tests/todos-mvc/components/my-todo.jsx b/tests/todos-mvc/components/my-todo.jsx index 6d52650..ad0e01a 100644 --- a/tests/todos-mvc/components/my-todo.jsx +++ b/tests/todos-mvc/components/my-todo.jsx @@ -1,4 +1,4 @@ -import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx"; +import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx"; import style from './my-todo.scss'; import {TodoInput} from './todo-input'; @@ -7,7 +7,7 @@ import {TodoItem} from './todo-item'; @defineElement('my-todo') export class MyTodo extends CustomElement{ uid = 1; - @State() todos = [ + @state() todos = [ {id: this.uid++, text: "my initial todo", checked: false }, {id: this.uid++, text: "Learn about Web Components", checked: false }, ]; diff --git a/tests/todos-mvc/components/todo-input.jsx b/tests/todos-mvc/components/todo-input.jsx index 56a4199..6b7b8df 100644 --- a/tests/todos-mvc/components/todo-input.jsx +++ b/tests/todos-mvc/components/todo-input.jsx @@ -1,9 +1,9 @@ -import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx"; +import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx"; import style from './todo-input.scss'; @defineElement('todo-input') export class TodoInput extends CustomElement{ - @State() value = ""; + @state() value = ""; render(){ return ( diff --git a/tests/todos-mvc/components/todo-item.jsx b/tests/todos-mvc/components/todo-item.jsx index 29da30e..6336029 100644 --- a/tests/todos-mvc/components/todo-item.jsx +++ b/tests/todos-mvc/components/todo-item.jsx @@ -1,10 +1,10 @@ -import {defineElement, render, CustomElement, Host, ShadowDOM, State, Prop} from "../../../packages/csx"; +import {defineElement, render, CustomElement, Host, ShadowDOM, state, prop} from "../../../packages/csx"; import style from './todo-item.scss'; @defineElement('todo-item') export class TodoItem extends CustomElement{ - @Prop({reflect: true}) checked = false; - @Prop() model; + @prop({reflect: true}) checked = false; + @prop() model; render(){ return (