diff options
| -rw-r--r-- | TODO.norg | 3 | ||||
| -rw-r--r-- | src/eval.ts | 19 | ||||
| -rw-r--r-- | src/index.ts | 44 | ||||
| -rw-r--r-- | tests/fixtures/todo-app/index.html | 26 | ||||
| -rw-r--r-- | tests/todo-app.spec.ts | 14 |
5 files changed, 67 insertions, 39 deletions
@@ -17,6 +17,9 @@ - (x) component system (with variables. `instance(button#my-btn)`) - (x) More complex selector support for cssx-children - (x) `add-element` & `remove-element` + - ( ) conditionals + - ( ) figure out how to manage element on change of css variables + - ( ) children of instance must also be instantiated - ( ) access an instance of component - ( ) string concatenation - ( ) `request` error handling diff --git a/src/eval.ts b/src/eval.ts index 79eeb79..a70c760 100644 --- a/src/eval.ts +++ b/src/eval.ts @@ -8,7 +8,11 @@ export interface EvalActions { jsEval(js: string): Promise<any> loadCssx(id: string, url: string): Promise<string> getVariable(name: string): Promise<string | undefined> - updateVariable(id: string, varName: string, value: string): Promise<void> + updateVariable( + id: string | undefined, + varName: string, + value: string, + ): Promise<void> getAttribute( id: string | undefined, name: string, @@ -89,11 +93,12 @@ const getFunctions = (name: string, args: Expr[], actions: EvalActions) => return varName && (actions.getVariable(varName) ?? defaultValue) }, update: async () => { - const id = await evalExpr(args[0], actions) - const varName = await evalExpr(args[1], actions) - const value = await evalExpr(args[2], actions) - if (id && varName && value) { - actions.updateVariable(id, varName, value) + const [id, name, value] = + args.length >= 3 + ? await evalArgs(args, 3, actions) + : [undefined, ...(await evalArgs(args, 2, actions))] + if (name) { + actions.updateVariable(id ?? undefined, name, value ?? '') } }, @@ -103,7 +108,7 @@ const getFunctions = (name: string, args: Expr[], actions: EvalActions) => ? await evalArgs(args, 3, actions) : [undefined, ...(await evalArgs(args, 2, actions))] if (name) { - actions.setAttribute(id as string | undefined, name, value ?? '') + actions.setAttribute(id ?? undefined, name, value ?? '') } }, attr: async () => { diff --git a/src/index.ts b/src/index.ts index acbb360..af8eb23 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,7 +2,6 @@ import { EvalActions, evalExpr } from './eval' import { extractDeclaration, DeclarationEval, - Declaration, expressionsToDeclrs, } from './declarations' import { parse } from './parser' @@ -61,30 +60,32 @@ const getEvalActions = ( removeClass: async (id, cls) => document.getElementById(id)?.classList.remove(cls), delay: delay => new Promise(res => setTimeout(res, delay)), - jsEval: async js => (0, eval)(js), + jsEval: async js => !pure && (0, eval)(js), loadCssx: async (id, url) => - new Promise((resolve, reject) => { - const $link = Object.assign(document.createElement('link'), { - href: url, - rel: 'stylesheet', - }) - $link.onload = () => { - const $el = document.getElementById(id) - if ($el) { - manageElement($el) - resolve(id) - } else { - console.error(`[CSSX] Unable to find root for ${id}`) - reject(`[CSSX] Unable to find root for ${id}`) - } - } - document.body.appendChild($link) - }), + pure + ? '' + : new Promise((resolve, reject) => { + const $link = Object.assign(document.createElement('link'), { + href: url, + rel: 'stylesheet', + }) + $link.onload = () => { + const $el = document.getElementById(id) + if ($el) { + manageElement($el) + resolve(id) + } else { + console.error(`[CSSX] Unable to find root for ${id}`) + reject(`[CSSX] Unable to find root for ${id}`) + } + } + document.body.appendChild($link) + }), getVariable: async varName => getPropertyValue($element, varName), updateVariable: async (targetId, varName, value) => { - const $el = document.getElementById(targetId) + const $el = targetId ? document.getElementById(targetId) : $element if ($el) { - $el.style.setProperty(varName, JSON.stringify(value)) + ;($el as any).style.setProperty(varName, JSON.stringify(value)) } }, setAttribute: async (id, name, value) => { @@ -108,6 +109,7 @@ const getEvalActions = ( ? new FormData($element as HTMLFormElement) : undefined, sendRequest: async ({ url, method, data }) => { + if (pure) return await fetch(url, { method, body: data }) // TODO: Handle response? }, diff --git a/tests/fixtures/todo-app/index.html b/tests/fixtures/todo-app/index.html index 25ccde7..bbf0963 100644 --- a/tests/fixtures/todo-app/index.html +++ b/tests/fixtures/todo-app/index.html @@ -8,31 +8,35 @@ } #task-input-form { + /* prettier-ignore */ --cssx-on-submit: prevent-default() - add-children(task-list, - instance(li#task-item, map(--text: attr(text-input, 'value'))) - ) - ; + add-children( + task-list, + instance(div#task-item, map(--text: attr(text-input, 'value'))) + ); + /* prettier-ignore */ --cssx-children: - input#text-input[data-testid="add-task-input"] - button#create-task-btn[type="submit"][data-testid="add-task-btn"] + input#text-input[data-testid=add-task-input] + button#create-task-btn[type=submit][data-testid=add-task-btn] ; } - #text-input {} + #text-input { + } #create-task-btn { - --cssx-text: "Submit"; + --cssx-text: 'Submit'; } - [data-instance="task-item"] { + [data-instance='task-item'] { --text: default text; - --checked: 0; + --checked: '0'; --cssx-on-mount: set-attr('data-testid', attr(id)); + --cssx-on-click: update(--checked, '1'); } - [data-instance="task-item"]::after { + [data-instance='task-item']::after { content: var(--text); } </style> diff --git a/tests/todo-app.spec.ts b/tests/todo-app.spec.ts index 7fe7d2f..6595bbf 100644 --- a/tests/todo-app.spec.ts +++ b/tests/todo-app.spec.ts @@ -49,5 +49,19 @@ describe('todo-app example', () => { 'Kill all the non-believers', ) }) + + // TODO: Add toggle state after implementing conditionals + it('should check item when clicked', async () => { + expect( + getComputedStyle($taskItems[0]).getPropertyValue('--checked'), + ).toBe(`'0'`) + + $taskItems[0].click() + await delay(100) + + expect( + getComputedStyle($taskItems[0]).getPropertyValue('--checked'), + ).toBe(`"1"`) // TODO: look into the quotes issue + }) }) }) |