diff options
Diffstat (limited to '')
| -rw-r--r-- | examples/clock/style.css | 15 | ||||
| -rw-r--r-- | examples/form/signup.css | 5 | ||||
| -rw-r--r-- | src/declarations.ts | 37 | ||||
| -rw-r--r-- | src/eval.ts | 4 | ||||
| -rw-r--r-- | src/index.ts | 11 |
5 files changed, 51 insertions, 21 deletions
diff --git a/examples/clock/style.css b/examples/clock/style.css index c23e033..07b8cc9 100644 --- a/examples/clock/style.css +++ b/examples/clock/style.css @@ -6,7 +6,13 @@ font-family: sans-serif; color: #555; - --cssx-children: div#digital div#analog; + --cssx-children: + div#digital + h(div#analog, map(), seq( + div#seconds.analog-clock-hand, + div#minutes.analog-clock-hand, + div#hours.analog-clock-hand + )); } body * { box-sizing: border-box; } @@ -44,7 +50,6 @@ body * { box-sizing: border-box; } --cssx-on-mount: update(--date, call(--get-date)); --cssx-on-update: - update('[data-element=seconds]', --angle, js-eval("360 * new Date().getSeconds() / 60 - 90")), update('[data-element=seconds]', --angle, js-eval("360 * new Date().getSeconds() / 60 - 90")) update('[data-element=minutes]', --angle, js-eval("360 * new Date().getMinutes() / 60 - 90")) update('[data-element=hours]', --angle, @@ -52,12 +57,6 @@ body * { box-sizing: border-box; } ) delay(1s) update(--date, call(--get-date)); - - --cssx-children: - div#seconds.analog-clock-hand - div#minutes.analog-clock-hand - div#hours.analog-clock-hand - ; } [data-element=seconds].analog-clock-hand { diff --git a/examples/form/signup.css b/examples/form/signup.css index 5dfb8f6..ee0c2c1 100644 --- a/examples/form/signup.css +++ b/examples/form/signup.css @@ -43,11 +43,6 @@ input#input-email input#input-password #actions - h(#message[data-attr="wiow"], map(--wow: "wow"), - div#wow - div#yay - h(div#yay, map(--wow: "wow")) - ) ; } #form.submitted #message::after { diff --git a/src/declarations.ts b/src/declarations.ts index a82f42f..5725846 100644 --- a/src/declarations.ts +++ b/src/declarations.ts @@ -30,9 +30,40 @@ export const toDeclaration = }, Call: async ({ name, args }) => { return matchString(name, { - // h: () => { - // - // }, + h: async () => { + const [sel, map, childreExpr] = args + + // Selector + match(sel, { + Selector: sel => { + selector = sel + }, + _: _ => {}, + }) + + const props = await evalExpr(map, actions) + match(props, { + Map: props => { + for (const [key, value] of Object.entries(props)) { + properties.set(key, value) + } + }, + _: _ => {}, + }) + + const childrenExprs = await match< + Promise<Array<Declaration | undefined>>, + EvalValue + >(await evalExpr(childreExpr, actions), { + Lazy: async exprs => + Promise.all(exprs.map(toDeclaration(actions))), + _: async _ => [], + }) + + children.push( + ...(childrenExprs.filter(Boolean) as Array<Declaration>), + ) + }, instance: async () => { isInstance = true const [sel, map] = args diff --git a/src/eval.ts b/src/eval.ts index 2dde4c1..9a55828 100644 --- a/src/eval.ts +++ b/src/eval.ts @@ -47,7 +47,7 @@ export type EvalValue = Enum<{ String: string Number: number Boolean: boolean - Lazy: Expr[] + Lazy: Array<Expr> Void: never VarIdentifier: string Map: { [key in string]: EvalValue } @@ -280,7 +280,7 @@ const getFunctions = ( return EvalValue.Map(Object.fromEntries(values.filter(Boolean) as any)) }, - func: async () => EvalValue.Lazy(args), + seq: async () => EvalValue.Lazy(args), call: async () => { const varId = match<string | undefined, EvalValue>( diff --git a/src/index.ts b/src/index.ts index 69d1fea..bc471ee 100644 --- a/src/index.ts +++ b/src/index.ts @@ -247,10 +247,10 @@ export const handleEvents = async ( } } -const declarationToElement = ( +const declarationToElement = async ( declaration: Declaration, $parent?: HTMLElement, -): { node: HTMLElement; isNewElement: boolean } => { +): Promise<{ node: HTMLElement; isNewElement: boolean }> => { const { tag, id, selectors } = declaration.selector const tagName = tag || 'div' @@ -291,12 +291,17 @@ const createLayer = async ( if (!$childrenRoot.parentNode) $parent.appendChild($childrenRoot) for (const declaration of declarations) { - const { node: $child, isNewElement } = declarationToElement( + const { node: $child, isNewElement } = await declarationToElement( declaration, $childrenRoot, ) $childrenRoot.appendChild($child) + console.log($child.dataset.element, isNewElement, declaration) await manageElement($child, isNewElement) + + if (declaration.children.length > 0) { + await createLayer(declaration.children, $child) + } } } |