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
Show Stats 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();

13
tests/basic/index.jsx
View File

@ -15,4 +15,15 @@ document.body.appendChild(render(<ExamplePage pageWidth={200} />));
* - style-attribute untested
* - Want a way to toggle classes: <Host class={{'bq-checkbox': true, 'checked': this.isChecked}}> could do
* - Supporting fragments <>...</>?
*/
*/
// 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);

4
tests/basic/page.jsx
View File

@ -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;

4
tests/pdf/index.jsx
View File

@ -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(<style>{kaartStyle}</style>));
@ -8,7 +8,7 @@ document.head.appendChild(render(<style>{kaartStyle}</style>));
@defineElement("pasta-buffet-kaart")
class PastaBuffetKaart extends CustomElement{
@Prop() eigenExemplaar;
@prop() eigenExemplaar;
render(){
return <div className="kaart">

6
tests/svg/svg-loader.jsx
View File

@ -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

4
tests/svg/svg-tester-two.jsx
View File

@ -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

4
tests/svg/svg-tester.jsx
View File

@ -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

4
tests/todos-mvc/components/my-todo.jsx
View File

@ -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 },
];

4
tests/todos-mvc/components/todo-input.jsx
View File

@ -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 (

6
tests/todos-mvc/components/todo-item.jsx
View File

@ -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 (