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

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 (