mirror of
https://github.com/MercuryWorkshop/dreamlandjs.git
synced 2025-05-15 15:10:02 -04:00
delete examples/
This commit is contained in:
CoolElectronics
parent
4fff09eebf
commit
aa07178e8b
4 changed files with 2 additions and 175 deletions
|
|
@ -1,14 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Dreamland examples</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<script src="../dist/dev.js"></script>
|
||||
|
||||
<script src="lib/index.js"></script>
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
body {
|
||||
background-color: #191724;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #1f1d2e;
|
||||
border-radius: 25px;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
p,
|
||||
h1 {
|
||||
font-family: 'serif';
|
||||
color: #e0def4;
|
||||
}
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
function Counter() {
|
||||
this.css = css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 10em;
|
||||
height: 5em;
|
||||
background-color: #f6c177;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
`
|
||||
|
||||
this.counter ??= 0
|
||||
|
||||
return (
|
||||
<div class="box">
|
||||
<h1>Counter</h1>
|
||||
<p>Value: {use(this.counter)}</p>
|
||||
<button on:click={() => this.counter++}>Click me!</button>
|
||||
<p>
|
||||
is {use(this.counter)} odd?{' '}
|
||||
{use(this.counter, (p) => p % 2 == 1)}
|
||||
</p>
|
||||
</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>Dreamland Examples</h1> */}
|
||||
// {/* <p>Some examples of dreamland.js 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(<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)
|
||||
})
|
||||
|
|
@ -23,23 +23,21 @@ export function css(strings, ...values) {
|
|||
let selfstr = ''
|
||||
|
||||
// compat layer for older browsers. when css nesting stablizes this can be removed
|
||||
for (; ;) {
|
||||
for (;;) {
|
||||
let [first, ...rest] = str.split('\n')
|
||||
if (first.trim().endsWith('{')) break;
|
||||
if (first.trim().endsWith('{')) break
|
||||
|
||||
selfstr += first + '\n'
|
||||
str = rest.join('\n')
|
||||
}
|
||||
styleElement.textContent = str
|
||||
|
||||
|
||||
for (const rule of styleElement.sheet.cssRules) {
|
||||
rule.selectorText = `.${uid} ${rule.selectorText}`
|
||||
newstr += rule.cssText + '\n'
|
||||
}
|
||||
|
||||
styleElement.textContent = `.${uid} {${selfstr}}` + '\n' + newstr
|
||||
console.log(styleElement.textContent)
|
||||
|
||||
cssmap[str] = uid
|
||||
return uid
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue