mercuryworkshop-mirror/dreamlandjs
1
0
Fork 0
mirror of https://github.com/MercuryWorkshop/dreamlandjs.git synced 2025-05-16 15:40:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

completely rewrite reactivity

Browse source
This commit is contained in:
CoolElectronics 2024-02-14 20:43:25 -05:00
parent 444d7d7f58
commit 2d577a6a99
No known key found for this signature in database
GPG key ID: F63593D168636C50
2 changed files with 211 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

182
examples/index.tsx
View file

@ -1,6 +1,5 @@
function Counter(a) {
console.log(a);
let css = styled.new`
function Counter() {
this.css = css`
self {
display: flex;
justify-content: center;
@ -25,7 +24,7 @@ function Counter(a) {
this.counter ??= 0;
return (
<div css={css} class="box">
<div class="box">
<h1>Counter</h1>
<p>
Value: {use(this.counter)}
@ -37,89 +36,98 @@ function Counter(a) {
</div>
)
}
function ToDoList() {
let css = styled.new`
self {
color: #e0def4;
display:flex;
flex-direction:column;
}
.todoitem {
display:flex;
}
`
this.tasks = [];
this.text = "Enter a task here...";
let addTask = () => {
if (!this.text) return;
this.tasks = [...this.tasks, this.text];
this.text = "";
};
return (
<div class="box" css={css}>
<div>
<input bind:value={use(this.text)} on:change={() => addTask()} />
<button on:click={() => addTask()}>Add Task</button>
</div>
<div for={use(this.tasks)} do={(task, i) =>
<div class="todoitem">
{task}
<button on:click={() => {
this.tasks.splice(i, 1)
this.tasks = this.tasks
}}>Delete</button>
</div>
} />
</div>
)
}
function Index() {
let css = styled.new`
h1 {
font-size: 40px;
text-align:center;
}
p {
text-align:center;
font-size:15px;
}
div {
/* margin-bottom:3em; */
}
examples {
display: flex;
justify-content: center;
flex-direction: column;
}
`;
this.c = 5;
this.counterobj;
return (
<div className={"as"}>
<div>
<h1>AliceJS Examples</h1>
<p>Some examples of AliceJS components. Code is in examples/</p>
</div>
<examples>
<Counter a="b" bind:this={use(this.counterobj)} bind:counter={use(this.c)} />
<ToDoList />
</examples>
stuff: {use(this.counterobj.counter)}
<button on:click={() => this.counterobj.counter++}>as</button>
</div>
);
}
//
// function ToDoList() {
// let css = styled.new`
// self {
// color: #e0def4;
// display:flex;
// flex-direction:column;
// }
//
// .todoitem {
// display:flex;
// }
// `
//
// this.tasks = [];
// this.text = "Enter a task here...";
//
// let addTask = () => {
// if (!this.text) return;
// this.tasks = [...this.tasks, this.text];
// this.text = "";
// };
//
// return (
// <div class="box" css={css}>
// <div>
// <input bind:value={use(this.text)} on:change={() => addTask()} />
// <button on:click={() => addTask()}>Add Task</button>
// </div>
// <div for={use(this.tasks)} do={(task, i) =>
// <div class="todoitem">
// {task}
// <button on:click={() => {
// this.tasks.splice(i, 1)
// this.tasks = this.tasks
// }}>Delete</button>
// </div>
// } />
// </div>
// )
// }
//
//
// function Index() {
// let css = styled.new`
// h1 {
// font-size: 40px;
// text-align:center;
// }
// p {
// text-align:center;
// font-size:15px;
// }
// div {
// /* margin-bottom:3em; */
// }
// examples {
// display: flex;
// justify-content: center;
// flex-direction: column;
// }
// `;
//
// this.c = 5;
//
// this.counterobj;
//
// return (
// <div className={"as"}>
// <Counter />
// {/* <div> */}
// {/* <h1>AliceJS Examples</h1> */}
// {/* <p>Some examples of AliceJS components. Code is in examples/</p> */}
// {/* </div> */}
// {/* <examples> */}
// {/* <Counter a="b" bind:this={use(this.counterobj)} bind:counter={use(this.c)} /> */}
// {/* <ToDoList /> */}
// {/* </examples> */}
// {/* stuff: {use(this.counterobj.counter)} */}
// {/* <button on:click={() => this.counterobj.counter++}>as</button> */}
// </div>
// );
// }
window.addEventListener("load", () => {
document.body.appendChild(<Index />);
document.body.appendChild(<Counter />);
});
let a = stateful({ b: stateful({ c: stateful({ d: 0 }) }), array: [[1, 2, 3], [4, 5, 6], [7, 8, 9]] }) as any;
let r = use(a.array[a.b.c.d][a.b.c.d]);
handle(r, v => {
console.log(v);
});