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

delete examples/

Browse source
This commit is contained in:
CoolElectronics 2024-04-10 11:38:15 -04:00
parent 4fff09eebf
commit aa07178e8b
No known key found for this signature in database
GPG key ID: F63593D168636C50
4 changed files with 2 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

14
examples/example.html
View file

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

21
examples/index.css
View file

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

136
examples/index.tsx
View file

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

6
src/css.js
View file

@ -23,23 +23,21 @@ export function css(strings, ...values) {
let selfstr = '' let selfstr = ''
// compat layer for older browsers. when css nesting stablizes this can be removed // compat layer for older browsers. when css nesting stablizes this can be removed
for (; ;) { for (;;) {
let [first, ...rest] = str.split('\n') let [first, ...rest] = str.split('\n')
if (first.trim().endsWith('{')) break; if (first.trim().endsWith('{')) break
selfstr += first + '\n' selfstr += first + '\n'
str = rest.join('\n') str = rest.join('\n')
} }
styleElement.textContent = str styleElement.textContent = str
for (const rule of styleElement.sheet.cssRules) { for (const rule of styleElement.sheet.cssRules) {
rule.selectorText = `.${uid} ${rule.selectorText}` rule.selectorText = `.${uid} ${rule.selectorText}`
newstr += rule.cssText + '\n' newstr += rule.cssText + '\n'
} }
styleElement.textContent = `.${uid} {${selfstr}}` + '\n' + newstr styleElement.textContent = `.${uid} {${selfstr}}` + '\n' + newstr
console.log(styleElement.textContent)
cssmap[str] = uid cssmap[str] = uid
return uid return uid