aberdeen 1.17.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/aberdeen.d.ts +928 -944
- package/dist/src/aberdeen.js +1693 -1705
- package/dist/src/aberdeen.js.map +3 -3
- package/dist/src/index.d.ts +12 -0
- package/dist/src/index.js +11 -0
- package/dist/src/index.js.map +10 -0
- package/dist/src/prediction.d.ts +7 -4
- package/dist/src/prediction.js +18 -23
- package/dist/src/prediction.js.map +3 -3
- package/dist/src/route.d.ts +112 -99
- package/dist/src/route.js +254 -254
- package/dist/src/route.js.map +3 -3
- package/dist/src/server-dom.d.ts +158 -0
- package/dist/src/server-dom.js +458 -0
- package/dist/src/server-dom.js.map +10 -0
- package/dist/src/server.d.ts +55 -0
- package/dist/src/server.js +25 -0
- package/dist/src/server.js.map +10 -0
- package/dist/src/transitions.js +7 -4
- package/dist/src/transitions.js.map +3 -3
- package/dist/tests/environment.d.ts +24 -0
- package/dist/tests/{fakedom.js → environment.js} +239 -288
- package/dist/tests/environment.js.map +11 -0
- package/dist/tests/helpers.d.ts +15 -3
- package/dist/tests/helpers.js +277 -306
- package/dist/tests/helpers.js.map +6 -5
- package/dist-docs/Tutorial/index.html +30 -30
- package/dist-docs/aberdeen/Aberdeen/index.html +350 -0
- package/dist-docs/aberdeen/InitOptions/index.html +4 -0
- package/dist-docs/aberdeen/KeyToString/index.html +2 -0
- package/dist-docs/aberdeen/PromiseProxy/index.html +6 -6
- package/dist-docs/aberdeen/SortKeyType/index.html +2 -0
- package/dist-docs/aberdeen/TargetType/index.html +2 -0
- package/dist-docs/aberdeen/ValueRef/index.html +2 -0
- package/dist-docs/aberdeen/WindowLike/index.html +5 -0
- package/dist-docs/aberdeen/{clone → createA}/index.html +10 -5
- package/dist-docs/aberdeen/index.html +13 -54
- package/dist-docs/assets/aberdeen/aberdeen.d.ts +928 -944
- package/dist-docs/assets/aberdeen/aberdeen.js +1693 -1705
- package/dist-docs/assets/aberdeen/aberdeen.js.map +3 -3
- package/dist-docs/assets/aberdeen/index.d.ts +12 -0
- package/dist-docs/assets/aberdeen/index.js +11 -0
- package/dist-docs/assets/aberdeen/index.js.map +10 -0
- package/dist-docs/assets/aberdeen/prediction.d.ts +7 -4
- package/dist-docs/assets/aberdeen/prediction.js +18 -23
- package/dist-docs/assets/aberdeen/prediction.js.map +3 -3
- package/dist-docs/assets/aberdeen/route.d.ts +112 -99
- package/dist-docs/assets/aberdeen/route.js +254 -254
- package/dist-docs/assets/aberdeen/route.js.map +3 -3
- package/dist-docs/assets/aberdeen/server-dom.d.ts +158 -0
- package/dist-docs/assets/aberdeen/server-dom.js +458 -0
- package/dist-docs/assets/aberdeen/server-dom.js.map +10 -0
- package/dist-docs/assets/aberdeen/server.d.ts +55 -0
- package/dist-docs/assets/aberdeen/server.js +25 -0
- package/dist-docs/assets/aberdeen/server.js.map +10 -0
- package/dist-docs/assets/aberdeen/transitions.js +7 -4
- package/dist-docs/assets/aberdeen/transitions.js.map +3 -3
- package/dist-docs/assets/navigation.js +1 -1
- package/dist-docs/assets/search.js +1 -1
- package/dist-docs/dispatcher/Dispatcher/index.html +5 -6
- package/dist-docs/dispatcher/MATCH_FAILED/index.html +2 -2
- package/dist-docs/dispatcher/MATCH_REST/index.html +2 -2
- package/dist-docs/dispatcher/index.html +2 -2
- package/dist-docs/hierarchy.html +1 -1
- package/dist-docs/index-1/index.html +2 -0
- package/dist-docs/index.html +2 -2
- package/dist-docs/media/CHANGELOG.md +10 -1
- package/dist-docs/modules.html +1 -1
- package/dist-docs/prediction/applyCanon/index.html +4 -3
- package/dist-docs/prediction/applyPrediction/index.html +4 -3
- package/dist-docs/prediction/index.html +2 -2
- package/dist-docs/route/Route/index.html +9 -9
- package/dist-docs/route/RouteApi/index.html +60 -0
- package/dist-docs/route/index.html +6 -15
- package/dist-docs/route/init/index.html +5 -0
- package/dist-docs/server/RenderToStringOptions/index.html +6 -0
- package/dist-docs/server/RenderToStringResult/index.html +6 -0
- package/dist-docs/server/index.html +4 -0
- package/dist-docs/server/renderToString/index.html +6 -0
- package/dist-docs/sitemap.xml +51 -155
- package/dist-docs/transitions/grow/index.html +2 -2
- package/dist-docs/transitions/index.html +2 -2
- package/dist-docs/transitions/shrink/index.html +2 -2
- package/package.json +17 -7
- package/skill/SKILL.md +28 -28
- package/skill/aberdeen.md +471 -3448
- package/skill/dispatcher.md +6 -16
- package/skill/prediction.md +17 -5
- package/skill/route.md +95 -77
- package/skill/transitions.md +3 -3
- package/src/aberdeen.ts +1224 -741
- package/src/index.ts +13 -0
- package/src/prediction.ts +25 -24
- package/src/route.ts +192 -142
- package/src/server-dom.ts +508 -0
- package/src/server.ts +74 -0
- package/src/transitions.ts +9 -3
- package/dist/tests/fakedom.d.ts +0 -9
- package/dist/tests/fakedom.js.map +0 -10
- package/dist-docs/aberdeen/A/index.html +0 -115
- package/dist-docs/aberdeen/CUSTOM_DUMP/index.html +0 -7
- package/dist-docs/aberdeen/NO_COPY/index.html +0 -2
- package/dist-docs/aberdeen/OPAQUE/index.html +0 -12
- package/dist-docs/aberdeen/clean/index.html +0 -11
- package/dist-docs/aberdeen/copy/index.html +0 -22
- package/dist-docs/aberdeen/count/index.html +0 -7
- package/dist-docs/aberdeen/cssVars/index.html +0 -11
- package/dist-docs/aberdeen/darkMode/index.html +0 -9
- package/dist-docs/aberdeen/default/index.html +0 -341
- package/dist-docs/aberdeen/derive/index.html +0 -18
- package/dist-docs/aberdeen/disableCreateDestroy/index.html +0 -6
- package/dist-docs/aberdeen/dump/index.html +0 -11
- package/dist-docs/aberdeen/insertCss/index.html +0 -30
- package/dist-docs/aberdeen/insertGlobalCss/index.html +0 -19
- package/dist-docs/aberdeen/invertString/index.html +0 -13
- package/dist-docs/aberdeen/isEmpty/index.html +0 -12
- package/dist-docs/aberdeen/map/index.html +0 -26
- package/dist-docs/aberdeen/merge/index.html +0 -11
- package/dist-docs/aberdeen/mount/index.html +0 -17
- package/dist-docs/aberdeen/multiMap/index.html +0 -28
- package/dist-docs/aberdeen/onEach/index.html +0 -19
- package/dist-docs/aberdeen/partition/index.html +0 -36
- package/dist-docs/aberdeen/peek/index.html +0 -40
- package/dist-docs/aberdeen/proxy/index.html +0 -35
- package/dist-docs/aberdeen/ref/index.html +0 -13
- package/dist-docs/aberdeen/runQueue/index.html +0 -13
- package/dist-docs/aberdeen/setErrorHandler/index.html +0 -16
- package/dist-docs/aberdeen/setSpacingCssVars/index.html +0 -8
- package/dist-docs/aberdeen/unmountAll/index.html +0 -5
- package/dist-docs/aberdeen/unproxy/index.html +0 -11
- package/dist-docs/route/back/index.html +0 -4
- package/dist-docs/route/current/index.html +0 -2
- package/dist-docs/route/go/index.html +0 -14
- package/dist-docs/route/interceptLinks/index.html +0 -8
- package/dist-docs/route/matchCurrent/index.html +0 -10
- package/dist-docs/route/persistScroll/index.html +0 -6
- package/dist-docs/route/push/index.html +0 -6
- package/dist-docs/route/setLog/index.html +0 -3
- package/dist-docs/route/up/index.html +0 -5
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../tests/fakedom.ts"],
|
|
4
|
-
"sourcesContent": [
|
|
5
|
-
"let newCount: number = 0, changeCount: number = 0;\nexport const resetCounts = function(): void { newCount = changeCount = 0; };\nexport const getCounts = function(): { new: number, changed: number } { \n return { new: newCount, changed: changeCount }; \n};\nexport const clearBody = function(): void {\n document.body.childNodes.length = 0;\n};\n\nclass Node {\n parentNode: Element | null = null;\n childNodes: Node[] = [];\n\n get nextSibling(): Node | undefined {\n return this.getSibling(+1);\n }\n \n get previousSibling(): Node | undefined {\n return this.getSibling(-1);\n }\n \n getSibling(delta: number): Node | undefined {\n if (!this.parentNode) return undefined;\n let siblings = this.parentNode.childNodes;\n let idx = siblings.indexOf(this);\n if (idx < 0) throw new Error(\"not part of siblings!?\");\n return siblings[idx + delta];\n }\n}\n\nclass Element extends Node {\n tagName: string;\n namespaceURI?: string;\n _style: Record<string, string> = {};\n attrs: Record<string, string> = {};\n events: Record<string, Set<Function>> = {};\n _classList?: {\n add: (...names: string[]) => void;\n remove: (...names: string[]) => void;\n toggle: (name: string, force?: boolean) => void;\n contains: (name: string) => boolean;\n };\n\n constructor(tag: string, namespaceURI?: string) {\n super();\n this.tagName = tag;\n this.namespaceURI = namespaceURI;\n this.childNodes = [];\n newCount++;\n }\n\n appendChild(node: Node): void {\n this.insertBefore(node, null);\n }\n\n insertBefore(node: Node, ref: Node | null): void {\n if (node.parentNode) node.parentNode.removeChild(node);\n else changeCount++;\n node.parentNode = this;\n if (ref) {\n let idx = this.childNodes.indexOf(ref);\n if (idx < 0) throw new Error(\"non-existing ref node\");\n this.childNodes.splice(idx, 0, node);\n } else {\n this.childNodes.push(node);\n }\n }\n\n removeChild(node: Node): void {\n let idx = this.childNodes.indexOf(node);\n if (idx < 0) throw new Error(\"no such child\");\n this.childNodes.splice(idx, 1);\n node.parentNode = null;\n changeCount++;\n }\n\n remove(): void {\n this.parentNode?.removeChild(this);\n }\n\n replaceChild(newNode: Node, oldNode: Node): void {\n this.insertBefore(newNode, oldNode);\n this.removeChild(oldNode);\n }\n\n setAttribute(k: string, v: any): void {\n if (v == null || v === '') delete this.attrs[k];\n else this.attrs[k] = '' + v;\n changeCount++;\n }\n\n getAttribute(k: string): string | undefined {\n return this.attrs[k];\n }\n\n removeAttribute(k: string): void {\n delete this.attrs[k];\n changeCount++;\n }\n\n get classList(): {\n add: (...names: string[]) => void;\n remove: (...names: string[]) => void;\n toggle: (name: string, force?: boolean) => void;\n contains: (name: string) => boolean;\n } {\n return this._classList || (this._classList = {\n add: (...names: string[]) => {\n let set = this._getClassSet();\n for(const name of names) set.add(name);\n this._setClassSet(set);\n },\n remove: (...names: string[]) => {\n let set = this._getClassSet();\n for(const name of names) set.delete(name);\n this._setClassSet(set);\n },\n toggle: (name: string, force?: boolean) => {\n if (force === true || (force !== false && !this._getClassSet().has(name))) this._classList!.add(name);\n else this._classList!.remove(name);\n },\n contains: (name: string) => this._getClassSet().has(name),\n });\n }\n\n get parentElement(): Element | undefined {\n if (this.parentNode instanceof Element) return this.parentNode;\n return undefined;\n }\n\n _getClassSet(): Set<string> {\n return new Set(this.attrs.class ? this.attrs.class.split(' ') : []);\n }\n\n _setClassSet(map: Set<string>): void {\n this.setAttribute('class', Array.from(map).sort().join(' ') || undefined);\n }\n\n get firstChild(): Node | undefined {\n return this.childNodes[0];\n }\n\n get lastChild(): Node | undefined {\n return this.childNodes[this.childNodes.length - 1];\n }\n\n set textContent(text: string) {\n this.childNodes = [new TextNode(text)];\n }\n \n get textContent() {\n let text = '';\n for(let child of this.childNodes) {\n if (child instanceof TextNode) {\n text += child.textContent;\n }\n }\n return text;\n }\n\n querySelectorAll(selector: string): Element[] {\n const results: Element[] = [];\n this._querySelectorAllRecursive(selector, results);\n return results;\n }\n\n private _querySelectorAllRecursive(selector: string, results: Element[]): void {\n for (const child of this.childNodes) {\n if (child instanceof Element) {\n if (child.tagName === selector) {\n results.push(child);\n }\n child._querySelectorAllRecursive(selector, results);\n }\n }\n }\n\n set innerHTML(html: string) {\n this.childNodes = [];\n if (html) {\n let n = new Element('fake-emulated-html');\n n.textContent = html;\n this.appendChild(n);\n }\n }\n\n set style(val: string) {\n if (val !== '') throw new Error(\"non-empty style string cannot be emulated\");\n this._style = {};\n changeCount++;\n }\n\n get style(): Record<string, string> {\n for(let k in this._style) {\n if (this._style[k] === '') delete this._style[k];\n }\n return this._style;\n }\n\n set className(v: string) {\n this.attrs.class = v;\n changeCount++;\n }\n\n get offsetHeight(): number {\n return 20;\n }\n\n get offsetWidth(): number {\n return 200;\n }\n\n get scrollTop(): number {\n return this._scrollTop || 0;\n }\n \n set scrollTop(value: number) {\n this._scrollTop = value;\n }\n \n get scrollLeft(): number {\n return this._scrollLeft || 0;\n }\n \n set scrollLeft(value: number) {\n this._scrollLeft = value;\n }\n\n public _scrollTop?: number;\n public _scrollLeft?: number;\n\n toString(): string {\n let arr: string[] = [];\n for(let [symbol, items, toKebab] of [['=', this.attrs, false], ['->', this, false], [':', this.style, true]] as [string, Record<string, any>, boolean][]) {\n for(let key of Object.keys(items).sort()) {\n const outputKey = toKebab ? key.replace(/[A-Z]/g, l => `-${l.toLowerCase()}`) : key;\n const prefix = outputKey + symbol;\n if (key[0] === '_' || IGNORE_OUTPUT.has(prefix)) continue;\n let value = '' + items[key];\n if (value.indexOf(\" \") >= 0 || value.indexOf(\"}\") >= 0 || !value.length) value = JSON.stringify(value);\n arr.push(prefix + value);\n }\n }\n for(let child of this.childNodes) arr.push(child.toString());\n\n const cls = this.attrs['class'] ? \".\" + this.attrs['class'].replace(/ /g, '.') : '';\n return this.tagName + cls + (arr.length ? `{${arr.join(' ')}}` : '');\n }\n\n addEventListener(name: string, func: Function): void {\n this.events[name] = this.events[name] || new Set();\n this.events[name].add(func);\n changeCount++;\n }\n\n removeEventListener(name: string, func: Function): void {\n if (this.events[name]) {\n if (this.events[name].delete(func)) {\n changeCount++;\n }\n }\n }\n\n event(info: string | { type: string; [key: string]: any }): void {\n if (typeof info === 'string') info = {type: info};\n let type = info.type;\n info.target = this;\n info.preventDefault = function() {};\n info.stopPropagation = function() { info.stopped = true; };\n let node: Element | null = this;\n while(node && !info.stopped) {\n let funcs = node.events[type];\n if (funcs) {\n for(let func of funcs) {\n func.call(node, info);\n }\n }\n node = node.parentNode;\n }\n }\n\n getElementById(id: string): Element | undefined {\n if (this.attrs.id === id) return this;\n for(let child of this.childNodes) {\n if (child instanceof Element) {\n let el = child.getElementById(id);\n if (el) return el;\n }\n }\n return undefined;\n }\n}\n\n\n\nconst document = {\n createElement: (tag: string) => new Element(tag, 'http://www.w3.org/1999/xhtml'),\n createElementNS: (namespaceURI: string, tag: string) => new Element(tag, namespaceURI),\n createTextNode: (text: string) => new TextNode(text),\n head: new Element('head', 'http://www.w3.org/1999/xhtml'),\n body: new Element('body', 'http://www.w3.org/1999/xhtml')\n};\n\n// Browser history and location simulation\nclass FakeLocation {\n private _href: string = 'http://localhost/';\n \n get href(): string { return this._href; }\n set href(value: string) { \n if (value.startsWith('/')) {\n // Relative path - convert to absolute URL\n const currentUrl = new URL(this._href);\n this._href = `${currentUrl.protocol}//${currentUrl.host}${value}`;\n } else {\n this._href = value;\n }\n }\n\n get host(): string {\n const url = new URL(this._href);\n return url.host;\n }\n \n get pathname(): string { \n const url = new URL(this._href);\n return url.pathname;\n }\n set pathname(value: string) {\n const url = new URL(this._href);\n url.pathname = value;\n this._href = url.href;\n }\n \n get search(): string {\n const url = new URL(this._href);\n return url.search;\n }\n set search(value: string) {\n const url = new URL(this._href);\n url.search = value;\n this._href = url.href;\n }\n \n get hash(): string {\n const url = new URL(this._href);\n return url.hash;\n }\n set hash(value: string) {\n const url = new URL(this._href);\n url.hash = value;\n this._href = url.href;\n }\n}\n\nclass FakeHistory {\n private _state: any = null;\n private _entries: Array<{url: string, state: any}> = [];\n private _index: number = 0;\n \n constructor() {\n // Initialize with current location\n this._entries = [{url: location.href, state: null}];\n }\n \n get state(): any {\n return this._state;\n }\n \n pushState(state: any, title: string, url: string): void {\n // Remove any entries after current index (like real browser behavior)\n this._entries = this._entries.slice(0, this._index + 1);\n \n // Add new entry\n this._entries.push({url, state});\n this._index = this._entries.length - 1;\n this._state = state;\n \n // Update location\n location.href = url;\n }\n \n replaceState(state: any, title: string, url: string): void {\n // state = JSON.parse(JSON.stringify(state)); // clone state\n this._entries[this._index] = {url, state};\n this._state = state;\n \n // Update location\n location.href = url;\n }\n \n go(delta: number): void {\n const newIndex = this._index + delta;\n if (newIndex >= 0 && newIndex < this._entries.length) {\n this._index = newIndex;\n const entry = this._entries[this._index];\n this._state = entry.state;\n location.href = entry.url;\n \n // Trigger popstate event asynchronously\n setTimeout(() => {\n const event = {\n type: 'popstate',\n state: this._state,\n target: window,\n preventDefault: () => {},\n stopPropagation: () => {}\n };\n window.dispatchEvent(event);\n }, 0);\n }\n }\n \n back(): void {\n this.go(-1);\n }\n \n forward(): void {\n this.go(1);\n }\n \n // Test helper methods\n _reset(): void {\n this._state = null;\n this._entries = [{url: location.href, state: null}];\n this._index = 0;\n }\n \n _getLength(): number {\n return this._entries.length;\n }\n}\n\nclass FakeWindow {\n private _listeners: Record<string, Set<Function>> = {};\n \n addEventListener(type: string, listener: Function): void {\n if (!this._listeners[type]) {\n this._listeners[type] = new Set();\n }\n this._listeners[type].add(listener);\n }\n \n removeEventListener(type: string, listener: Function): void {\n if (this._listeners[type]) {\n this._listeners[type].delete(listener);\n }\n }\n \n dispatchEvent(event: any): void {\n const listeners = this._listeners[event.type];\n if (listeners) {\n for (const listener of listeners) {\n listener.call(this, event);\n }\n }\n }\n\n matchMedia(query: string): MediaQueryList {\n if (!mediaQueries.has(query)) {\n mediaQueries.set(query, new MediaQueryList(query));\n }\n return mediaQueries.get(query)!;\n }\n \n // Test helper\n _reset(): void {\n this._listeners = {};\n }\n}\n\nconst location = new FakeLocation();\nconst history = new FakeHistory();\nconst window = new FakeWindow();\n\n// Reset function for tests\nexport const resetBrowserState = function(): void {\n location.href = 'http://localhost/';\n history._reset();\n // Don't reset window listeners as they're registered by the modules being tested\n};\n\ntype TimeoutItem = {\n func: () => void | Promise<void>;\n time: number;\n realId: ReturnType<typeof global.setTimeout>;\n};\n\nlet timeouts: TimeoutItem[] = [];\nlet currentTime: number = 0;\nlet deferredErrors: any[] = [];\n\nconst realSetTimeout = global.setTimeout;\nconst realClearTimeout = global.clearTimeout;\n\nfunction fireItem(item: TimeoutItem) {\n const idx = timeouts.indexOf(item);\n if (idx < 0) return; // Already fired by passTime or another path\n timeouts.splice(idx, 1);\n if (item.time > currentTime) currentTime = item.time;\n item.func();\n}\n\nconst setTimeout = function(func: () => void, time: number): void {\n const item: TimeoutItem = { func, time: time + currentTime, realId: undefined! };\n item.realId = realSetTimeout(() => {\n try { fireItem(item); }\n catch (e) { deferredErrors.push(e); }\n }, time);\n timeouts.push(item);\n};\n\nconst queueMicrotask = function(func: () => void): void {\n const item: TimeoutItem = { func, time: 0, realId: undefined! };\n item.realId = realSetTimeout(() => {\n try { fireItem(item); }\n catch (e) { deferredErrors.push(e); }\n }, 0);\n timeouts.push(item);\n};\n\n// Fast-forward fake time, firing all timeouts up to `ms` ms ahead (default 0).\n// Awaits async timer callbacks so microtasks and chained timers complete too.\n// Rethrows any errors from timeouts that fired via real timers in the background.\nexport const passTime = async function(ms: number = 0): Promise<void> {\n let targetTime = currentTime + ms;\n while(true) {\n await new Promise(resolve => realSetTimeout(resolve, 0));\n\n // Rethrow errors from background-fired timeouts\n if (deferredErrors.length) {\n const err = deferredErrors.shift();\n throw err;\n }\n\n if (!timeouts.length) {\n // Async I/O (e.g. database commits) may still be in flight, about to schedule\n // new timeouts. Retry a few real event-loop ticks before giving up.\n let settled = false;\n for (let r = 0; r < 5 && !settled; r++) {\n await new Promise(resolve => realSetTimeout(resolve, 0));\n settled = timeouts.length > 0;\n }\n if (!settled) break;\n }\n\n // Find the earliest timeout\n let smallestIdx = 0;\n for(let idx = 1; idx < timeouts.length; idx++) {\n if (timeouts[idx].time < timeouts[smallestIdx].time) smallestIdx = idx;\n }\n let item = timeouts[smallestIdx];\n\n if (item.time > targetTime) break;\n\n // Fire early, cancel real timer\n timeouts.splice(smallestIdx, 1);\n realClearTimeout(item.realId);\n if (item.time > currentTime) currentTime = item.time;\n await item.func();\n }\n currentTime = targetTime;\n};\n\nconst IGNORE_OUTPUT = new Set(\"tagName-> attrs-> events-> childNodes-> parentNode-> class= namespaceURI->\".split(\" \"));\n\nclass TextNode extends Node {\n textContent: string;\n\n constructor(textContent: string) {\n super();\n this.textContent = '' + textContent;\n newCount++;\n }\n\n toString(): string {\n return JSON.stringify(this.textContent);\n }\n\n remove() {\n this.parentNode?.removeChild(this);\n }\n}\n\nfunction getComputedStyle(el: Element): Record<string, string> {\n return el._style;\n}\n\n// MediaQueryList mock for testing\nclass MediaQueryList {\n matches: boolean;\n media: string;\n private listeners: Set<(event: any) => void> = new Set();\n\n constructor(query: string) {\n this.media = query;\n // Check if there's a preset value, otherwise default to light mode\n const preset = mediaQueryPresets.get(query);\n this.matches = preset !== undefined ? preset : (query.includes('dark') ? false : true);\n }\n\n addEventListener(type: string, listener: (event: any) => void) {\n if (type === 'change') {\n this.listeners.add(listener);\n }\n }\n\n removeEventListener(type: string, listener: (event: any) => void) {\n if (type === 'change') {\n this.listeners.delete(listener);\n }\n }\n\n // Test helper to simulate media query changes\n _trigger(matches: boolean) {\n this.matches = matches;\n const event = { matches, media: this.media };\n for (const listener of this.listeners) {\n listener(event);\n }\n }\n}\n\nconst mediaQueries = new Map<string, MediaQueryList>();\nconst mediaQueryPresets = new Map<string, boolean>();\n\n// Set media query value and trigger change event if already initialized\nexport function setMediaQuery(query: string, matches: boolean) {\n mediaQueryPresets.set(query, matches);\n // If already created, update it and trigger change\n if (mediaQueries.has(query)) {\n mediaQueries.get(query)!._trigger(matches);\n }\n}\n\nconst globals = {Node, Element, TextNode, document, window, setTimeout, queueMicrotask, getComputedStyle, location, history, URLSearchParams};\nObject.assign(global, globals);\nObject.assign(window, globals);\n"
|
|
6
|
-
],
|
|
7
|
-
"mappings": "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",
|
|
8
|
-
"debugId": "697BCB7341E1E8EC64756E2164756E21",
|
|
9
|
-
"names": []
|
|
10
|
-
}
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>A | Aberdeen - v1.17.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.17.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">A</a></li></ul><h1>Function A</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="a"><span class="tsd-kind-call-signature">A</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span><a href="#a" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>The core function for building reactive user interfaces in Aberdeen. It creates and inserts new DOM elements
|
|
2
|
-
and sets attributes/properties/event listeners on DOM elements. It does so in a reactive way, meaning that
|
|
3
|
-
changes will be (mostly) undone when the current <em>scope</em> is destroyed or will be re-execute.</p>
|
|
4
|
-
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>Any number of arguments can be given. How they're interpreted depends on their types:</p>
|
|
5
|
-
<h3 id="string-arguments" class="tsd-anchor-link">String arguments<a href="#string-arguments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Strings can be used to create and insert new elements, set classnames for the <em>current</em> element, and add text to the current element.
|
|
6
|
-
The format of a string is: (<strong>tag</strong> | <code>.</code> <strong>class</strong> | <strong>key</strong>[=:]<strong>val</strong> | <strong>key</strong>[=:]"<strong>val containing spaces</strong>")* ('#' <strong>text</strong> | <strong>key</strong>[=:])?</p>
|
|
7
|
-
<p>So a string may consist of any number of...</p>
|
|
8
|
-
<ul>
|
|
9
|
-
<li>
|
|
10
|
-
<p><strong>tag</strong> elements, like <code>h1</code> or <code>div</code>. These elements are created, added to the <em>current</em> element, and become the new <em>current</em> element for the rest of this <code>A</code> function execution.</p>
|
|
11
|
-
</li>
|
|
12
|
-
<li>
|
|
13
|
-
<p>CSS classes prefixed by <code>.</code> characters. These classes will be added to the <em>current</em> element. Optionally, CSS classes can be appended to a <strong>tag</strong> without a space. So both <code>div.myclass</code> and <code>div .myclass</code> are valid and do the same thing.</p>
|
|
14
|
-
</li>
|
|
15
|
-
<li>
|
|
16
|
-
<p>Property key/value pairs, like <code>type=password</code>, <code>placeholder="Your name"</code> or <code>data-id=123</code>. When the value contains spaces, it needs to be quoted with either "double quotes", 'single quotes' or <code>backticks</code>. Quotes within quoted values cannot be escaped (see the next rule for a solution). Key/value pairs will be handled according to <em>Property rules</em> below, but with the caveat that values can only be strings.</p>
|
|
17
|
-
</li>
|
|
18
|
-
<li>
|
|
19
|
-
<p>CSS key/value pairs using two syntaxes:</p>
|
|
20
|
-
<ul>
|
|
21
|
-
<li><strong>Short form</strong> <code>key:value</code> (no space after colon): The value ends at the next whitespace. Example: <code>m:$3 bg:red r:8px</code></li>
|
|
22
|
-
<li><strong>Long form</strong> <code>key: value;</code> (space after colon): The value continues until a semicolon. Example: <code>box-shadow: 2px 0 6px black; transition: all 0.3s ease;</code></li>
|
|
23
|
-
</ul>
|
|
24
|
-
<p>Both forms support CSS shortcuts (see below). You can mix them: <code>m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg</code>
|
|
25
|
-
The elements must be separated by spaces, except before a <code>.cssClass</code> if it is preceded by either <strong>tag</strong> or another CSS class.</p>
|
|
26
|
-
</li>
|
|
27
|
-
</ul>
|
|
28
|
-
<p>And a string may end in...</p>
|
|
29
|
-
<ul>
|
|
30
|
-
<li>A '#' followed by text, which will be added as a <code>TextNode</code> to the <em>current</em> element. The text ranges til the end of the string, and may contain any characters, including spaces and quotes.</li>
|
|
31
|
-
<li>A key followed by an '=' character, in which case the value is expected as a separate argument. The key/value pair is set according to the <em>Property rules</em> below. This is useful when the value is not a string or contains spaces or user data. Example: <code>A('button text="Click me" click=', () => alert('Clicked!'))</code> or <code>A('input.value=', someUserData, "placeholder=", "Type your stuff")</code>. In case the value is a proxied object, its <code>.value</code> property will be applied reactively without needing to rerender the parent scope.</li>
|
|
32
|
-
<li>A key followed by a ':' character (with no value), in which case the value is expected as a separate argument. The value is treated as a CSS value to be set inline on the <em>current</em> element. Example: <code>A('div margin-top:', someValueInPx)</code>. In case the value is a proxied object, its <code>.value</code> property will be applied reactively without needing to rerender the parent scope.</li>
|
|
33
|
-
</ul>
|
|
34
|
-
<h3 id="function-arguments" class="tsd-anchor-link">Function arguments<a href="#function-arguments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When a function (without arguments nor a return value) is passed in, it will be reactively executed in its own observer scope, preserving the <em>current</em> element. So any <code>A()</code> invocations within this function will add child elements to or set properties on that element. If the function reads observable data, and that data is changed later on, the function we re-execute (after side effects, such as DOM modifications through <code>A</code>, have been cleaned - see also <a href="../clean/" class="tsd-kind-function">clean</a>).</p>
|
|
35
|
-
<h3 id="object-arguments" class="tsd-anchor-link">Object arguments<a href="#object-arguments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When an object is passed in, its key-value pairs are used to modify the <em>current</em> element according to the <em>Property rules</em> below, <em>unless</em> the key starts with a <code>$</code> character, in which case that character is stripped of and the key/value pair is treated as a CSS property, subject to the <em>CSS shortcuts</em> below. In case a value is a proxied object, its <code>.value</code> property will be applied reactively without needing to rerender the parent scope. In most cases, the string notation (<code>key=</code> and <code>key:</code>) is preferred over this object notation, for readability.</p>
|
|
36
|
-
<h3 id="dom-node-arguments" class="tsd-anchor-link">DOM node arguments<a href="#dom-node-arguments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When a DOM Node (Element or TextNode) is passed in, it is added as a child to the <em>current</em> element. If the Node is an Element, it becomes the new <em>current</em> element for the rest of this <code>A</code> function execution.</p>
|
|
37
|
-
<h3 id="property-rules" class="tsd-anchor-link">Property rules<a href="#property-rules" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
38
|
-
<li><strong>Attribute:</strong> The common case is setting the value as an HTML attribute named key. For example <code>A('input placeholder=Name')</code> results in <code><input placeholder="Name"></code>.</li>
|
|
39
|
-
<li><strong>Event listener:</strong> If the value is a <code>function</code> it is set as an event listener for the event with the name given by the key. For example: A('button text=Press! click=', () => alert('Clicked!'))`. The event listener will be removed when the current scope is destroyed.</li>
|
|
40
|
-
<li><strong>DOM property:</strong> When the value is a boolean, or the key is <code>"value"</code> or <code>"selectedIndex"</code>, it is set on the <code>current</code> element as a DOM property instead of an HTML attribute. For example <code>A('checked=', true)</code> would do <code>el.checked = true</code> for the <em>current</em> element.</li>
|
|
41
|
-
<li><strong>Conditional CSS class:</strong> If the key starts with a <code>.</code> character, its either added to or removed from the <em>current</em> element as a CSS class, based on the truthiness of the value. So <code>A('.hidden=', isHidden)</code> would toggle the <code>hidden</code> CSS class. This only works if the <code>=</code> is the last character of the string, and the next argument is the value. Its common for the value to be a proxied object, in which case its <code>.value</code> is reactively applied without needing to rerender the parent scope.</li>
|
|
42
|
-
<li><strong>Create transition:</strong> When the key is <code>"create"</code>, the value will be added as a CSS class to the <em>current</em> element immediately, and then removed right after the browser has finished doing a layout pass. This behavior only triggers when the scope setting the <code>create</code> is the top-level scope being (re-)run. This allows for creation transitions, without triggering the transitions for deeply nested elements being drawn as part of a larger component. The string may also contain multiple dot-separated CSS classes, such as <code>.fade.grow</code>. The initial dot is optional. Alternatively, to allow for more complex transitions, the value may be a function that receives the <code>HTMLElement</code> being created as its only argument. It is <em>only</em> called if this is the top-level element being created in this scope run. See <code>transitions.ts</code> in the Aberdeen source code for some examples.</li>
|
|
43
|
-
<li><strong>Destroy transition:</strong> When the key is <code>"destroy"</code> the value will be used to apply a CSS transition if the <em>current</em> element is later on removed from the DOM and is the top-level element to be removed. This happens as follows: actual removal from the DOM is delayed by 2 seconds, and in the mean-time the value string is added as a CSS class to the element, allowing for a deletion transition. The string may also contain multiple dot-separated CSS classes, such as <code>.fade.shrink</code>. The initial dot is optional. Alternatively, to allow for more complex transitions, the value may be a function that receives the <code>HTMLElement</code> to be removed from the DOM as its only argument. This function may perform any transitions and is then itself responsible for eventually removing the element from the DOM. See <code>transitions.ts</code> in the Aberdeen source code for some examples.</li>
|
|
44
|
-
<li><strong>Two-way data binding:</strong> When the key is <code>"bind"</code> a two-way binding between the <code>.value</code> property of the given proxied object, and the <em>current</em> input element (<code><input></code>, <code><select></code> or <code><textarea></code>) is created. This is often used together with {@link ref}, in order to use properties other than <code>.value</code>.</li>
|
|
45
|
-
<li><strong>Text:</strong>: If the key is <code>"text"</code>, the value will be appended as a <code>TextNode</code> to the <em>current</em> element. The same can also be done with the <code>#</code> syntax in string arguments, though <code>text=</code> allows additional properties to come after in the same string: <code>A('button text=Hello click=', alert)</code>.</li>
|
|
46
|
-
<li><strong>Unsafe HTML:</strong> When the key is <code>"html"</code>, the value will be added as HTML to the <em>current</em> element. This should only be used in exceptional situations. Beware of XSS! Never use this with untrusted user data.</li>
|
|
47
|
-
<li><strong>Rich text:</strong> When the key is <code>"rich"</code>, the value is parsed as simple markdown-like syntax and rendered as inline elements. Supports <code>*italic*</code>, <code>**bold**</code>, <code>`code`</code>, and <code>[link text](/path)</code>. All text content is safely escaped, making it suitable for user data (though links should be validated if untrusted). Example: <code>A('p rich="Click *here* for **more** info")</code>.</li>
|
|
48
|
-
</ul>
|
|
49
|
-
<h3 id="css-shortcuts" class="tsd-anchor-link">CSS shortcuts<a href="#css-shortcuts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>For conciseness, Aberdeen supports some CSS shortcuts when setting CSS properties.</p>
|
|
50
|
-
<table>
|
|
51
|
-
<thead>
|
|
52
|
-
<tr>
|
|
53
|
-
<th>Shortcut</th>
|
|
54
|
-
<th>Expands to</th>
|
|
55
|
-
</tr>
|
|
56
|
-
</thead>
|
|
57
|
-
<tbody>
|
|
58
|
-
<tr>
|
|
59
|
-
<td><code>m</code>, <code>mt</code>, <code>mb</code>, <code>ml</code>, <code>mr</code></td>
|
|
60
|
-
<td><code>margin</code>, <code>margin-top</code>, <code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code></td>
|
|
61
|
-
</tr>
|
|
62
|
-
<tr>
|
|
63
|
-
<td><code>mv</code>, <code>mh</code></td>
|
|
64
|
-
<td>Vertical (top+bottom) or horizontal (left+right) margins</td>
|
|
65
|
-
</tr>
|
|
66
|
-
<tr>
|
|
67
|
-
<td><code>p</code>, <code>pt</code>, <code>pb</code>, <code>pl</code>, <code>pr</code></td>
|
|
68
|
-
<td><code>padding</code>, <code>padding-top</code>, <code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code></td>
|
|
69
|
-
</tr>
|
|
70
|
-
<tr>
|
|
71
|
-
<td><code>pv</code>, <code>ph</code></td>
|
|
72
|
-
<td>Vertical or horizontal padding</td>
|
|
73
|
-
</tr>
|
|
74
|
-
<tr>
|
|
75
|
-
<td><code>w</code>, <code>h</code></td>
|
|
76
|
-
<td><code>width</code>, <code>height</code></td>
|
|
77
|
-
</tr>
|
|
78
|
-
<tr>
|
|
79
|
-
<td><code>bg</code></td>
|
|
80
|
-
<td><code>background</code></td>
|
|
81
|
-
</tr>
|
|
82
|
-
<tr>
|
|
83
|
-
<td><code>fg</code></td>
|
|
84
|
-
<td><code>color</code></td>
|
|
85
|
-
</tr>
|
|
86
|
-
<tr>
|
|
87
|
-
<td><code>r</code></td>
|
|
88
|
-
<td><code>border-radius</code></td>
|
|
89
|
-
</tr>
|
|
90
|
-
</tbody>
|
|
91
|
-
</table>
|
|
92
|
-
<p>Also, when the value is a string starting with <code>$</code>, it is treated as a reference to a CSS variable, expanding to <code>var(--variableName)</code>. For numeric variable names (which can't be used directly as CSS custom property names), Aberdeen prefixes them with <code>m</code>, so <code>$3</code> expands to <code>var(--m3)</code>. This is primarily intended for use with <a href="../setSpacingCssVars/" class="tsd-kind-function">setSpacingCssVars</a>, which initializes spacing variables named <code>0</code> through <code>12</code> with an exponential spacing scale.</p>
|
|
93
|
-
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span></h4><p>The most inner DOM element that was created (not counting text nodes nor elements created by content functions), or the current element if no new element was created. You should normally not need to use the return value - use this function's DOM manipulation abilities instead. One valid use case is when integrating with non-Aberdeen code that requires a reference to a DOM element.</p>
|
|
94
|
-
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-create-element">Example: Create Element<a href="#example-create-element" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button.secondary.outline text=Submit color:red disabled='</span><span class="hl-1">, </span><span class="hl-5">false</span><span class="hl-1">, </span><span class="hl-3">'click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">'Clicked!'</span><span class="hl-1">));</span>
|
|
95
|
-
</code><button type="button">Copy</button></pre>
|
|
96
|
-
|
|
97
|
-
<p>We want to set <code>disabled</code> as a property instead of an attribute, so we must use the <code>key=</code> syntax in order to provide
|
|
98
|
-
<code>false</code> as a boolean instead of a string.</p>
|
|
99
|
-
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-create-nested-elements">Example: Create Nested Elements<a href="#example-create-nested-elements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">inputElement</span><span class="hl-1">: </span><span class="hl-10">Element</span><span class="hl-1"> = </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'label text="Click me" input type=checkbox'</span><span class="hl-1">);</span><br/><span class="hl-4">// You should usually not touch raw DOM elements, unless when integrating</span><br/><span class="hl-4">// with non-Aberdeen code.</span><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">'DOM element:'</span><span class="hl-1">, </span><span class="hl-2">inputElement</span><span class="hl-1">);</span>
|
|
100
|
-
</code><button type="button">Copy</button></pre>
|
|
101
|
-
|
|
102
|
-
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-content-functions--reactive-scope">Example: Content Functions & Reactive Scope<a href="#example-content-functions--reactive-scope" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$state</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">count:</span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1"> });</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div'</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> { </span><span class="hl-4">// Outer element</span><br/><span class="hl-1"> </span><span class="hl-4">// This scope re-renders when $state.count changes</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`p#Count is </span><span class="hl-5">${</span><span class="hl-2">$state</span><span class="hl-9">.</span><span class="hl-2">count</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text=Increment click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$state</span><span class="hl-1">.</span><span class="hl-2">count</span><span class="hl-1">++);</span><br/><span class="hl-1">});</span>
|
|
103
|
-
</code><button type="button">Copy</button></pre>
|
|
104
|
-
|
|
105
|
-
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-two-way-binding">Example: Two-way Binding<a href="#example-two-way-binding" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$user</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">''</span><span class="hl-1"> });</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'input placeholder=Name bind='</span><span class="hl-1">, </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">ref</span><span class="hl-1">(</span><span class="hl-2">$user</span><span class="hl-1">, </span><span class="hl-3">'name'</span><span class="hl-1">));</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'h3'</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> { </span><span class="hl-4">// Reactive scope</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`#Hello </span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-9"> </span><span class="hl-1">||</span><span class="hl-9"> </span><span class="hl-3">'stranger'</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
106
|
-
</code><button type="button">Copy</button></pre>
|
|
107
|
-
|
|
108
|
-
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-conditional-rendering">Example: Conditional Rendering<a href="#example-conditional-rendering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$show</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-5">false</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$show</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = !</span><span class="hl-2">$show</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-2">$show</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> ? </span><span class="hl-3">'#Hide'</span><span class="hl-1"> : </span><span class="hl-3">'#Show'</span><span class="hl-1">));</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> { </span><span class="hl-4">// Reactive scope</span><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (</span><span class="hl-2">$show</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'p#Details are visible!'</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
109
|
-
</code><button type="button">Copy</button></pre>
|
|
110
|
-
|
|
111
|
-
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-proxied-objects-as-values">Example: Proxied objects as values<a href="#example-proxied-objects-as-values" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$myColor</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-3">'red'</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'p text="The color is " text='</span><span class="hl-1">, </span><span class="hl-2">$myColor</span><span class="hl-1">, </span><span class="hl-3">'click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$myColor</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-3">'yellow'</span><span class="hl-1">)</span><br/><span class="hl-4">// Clicking the text will cause it to change color without recreating the <p> itself</span>
|
|
112
|
-
</code><button type="button">Copy</button></pre>
|
|
113
|
-
|
|
114
|
-
<p>This is often used together with <a href="../ref/" class="tsd-kind-function">ref</a>, in order to use properties other than <code>.value</code>.</p>
|
|
115
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L2402">aberdeen.ts:2402</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#string-arguments"><span>String arguments</span></a><a href="#function-arguments"><span>Function arguments</span></a><a href="#object-arguments"><span>Object arguments</span></a><a href="#dom-node-arguments"><span>DOM node arguments</span></a><a href="#property-rules"><span>Property rules</span></a><a href="#css-shortcuts"><span>CSS shortcuts</span></a></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.17.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CUSTOM_DUMP | Aberdeen - v1.17.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.17.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">CUSTOM_DUMP</a></li></ul><h1>Variable CUSTOM_DUMP<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">CUSTOM_DUMP</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">typeof</span> <a href="" class="tsd-signature-type tsd-kind-variable">CUSTOM_DUMP</a><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>When set on an object or its prototype chain, <a href="../dump/" class="tsd-kind-function">dump</a> calls this as a render function
|
|
2
|
-
(with the object as <code>this</code>) instead of its default recursive rendering. If the value is not
|
|
3
|
-
a function, it's treated as a string to display.</p>
|
|
4
|
-
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">class</span><span class="hl-1"> </span><span class="hl-10">Color</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">constructor</span><span class="hl-1">(</span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">r</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">g</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">b</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">) {}</span><br/><span class="hl-1"> [</span><span class="hl-6">CUSTOM_DUMP</span><span class="hl-1">]() { </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`#rgb(</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">r</span><span class="hl-5">}</span><span class="hl-3">, </span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">g</span><span class="hl-5">}</span><span class="hl-3">, </span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">b</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">); }</span><br/><span class="hl-1">}</span>
|
|
5
|
-
</code><button type="button">Copy</button></pre>
|
|
6
|
-
|
|
7
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L3468">aberdeen.ts:3468</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.17.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>NO_COPY | Aberdeen - v1.17.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.17.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">NO_COPY</a></li></ul><h1 class="deprecated">Variable NO_COPY<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">NO_COPY</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol"> = OPAQUE</span></div><div class="tsd-comment tsd-typography"><p>Use <a href="../OPAQUE/" class="tsd-kind-variable">OPAQUE</a> instead. This is an alias kept for backward compatibility.</p>
|
|
2
|
-
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link" id="deprecated">Deprecated<a href="#deprecated" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4></div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L1923">aberdeen.ts:1923</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.17.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>OPAQUE | Aberdeen - v1.17.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.17.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">OPAQUE</a></li></ul><h1>Variable OPAQUE<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">OPAQUE</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">typeof</span> <a href="" class="tsd-signature-type tsd-kind-variable">OPAQUE</a><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>A symbol that controls how Aberdeen handles an object in copy operations and proxy wrapping.</p>
|
|
2
|
-
<p>The <strong>presence</strong> of this symbol (regardless of its value) prevents deep-copying: the object is
|
|
3
|
-
stored and passed by reference in <a href="../clone/" class="tsd-kind-function">clone</a> and <a href="../copy/" class="tsd-kind-function">copy</a>.</p>
|
|
4
|
-
<p>The <strong>value</strong> of the symbol controls proxy wrapping when the object is read from reactive state:</p>
|
|
5
|
-
<ul>
|
|
6
|
-
<li><strong>Truthy</strong> (e.g. <code>true</code>): the object is fully opaque — it is not wrapped in a proxy, so its
|
|
7
|
-
properties are not observable. Use this for objects that break when proxied (e.g. class instances
|
|
8
|
-
with internal slots, Promises) or that must be invisible to Aberdeen's reactive system.</li>
|
|
9
|
-
<li><strong>Falsy</strong> (e.g. <code>false</code>): the object is still wrapped in a proxy, so reads on its properties
|
|
10
|
-
create reactive dependencies as normal — only deep-copying is suppressed.</li>
|
|
11
|
-
</ul>
|
|
12
|
-
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L1916">aberdeen.ts:1916</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.17.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>clean | Aberdeen - v1.17.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.17.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">clean</a></li></ul><h1>Function clean</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="clean"><span class="tsd-kind-call-signature">clean</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cleaner</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#clean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Registers a cleanup function to be executed just before the current reactive scope
|
|
2
|
-
is destroyed or redraws.</p>
|
|
3
|
-
<p>This is useful for releasing resources, removing manual event listeners, or cleaning up
|
|
4
|
-
side effects associated with the scope. Cleaners are run in reverse order of registration.</p>
|
|
5
|
-
<p>Scopes are created by functions like <a href="../derive/" class="tsd-kind-function">derive</a>, <a href="../mount/" class="tsd-kind-function">mount</a>, <a href="../A/" class="tsd-kind-function">A</a> (when given a render function),
|
|
6
|
-
and internally by constructs like <a href="../onEach/" class="tsd-kind-function">onEach</a>.</p>
|
|
7
|
-
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">cleaner</span>: <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span></span><div class="tsd-comment tsd-typography"><p>The function to execute during cleanup.</p>
|
|
8
|
-
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-maintaing-a-sum-for-a-changing-array">Example: Maintaing a sum for a changing array<a href="#example-maintaing-a-sum-for-a-changing-array" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$numbers</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">([</span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-8">10</span><span class="hl-1">]);</span><br/><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-8">0</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Show the array items and maintain the sum</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$numbers</span><span class="hl-1">, (</span><span class="hl-2">item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`code#</span><span class="hl-5">${</span><span class="hl-2">index</span><span class="hl-5">}</span><span class="hl-3">→</span><span class="hl-5">${</span><span class="hl-2">item</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// We'll update $sum.value using peek, as += first does a read, but</span><br/><span class="hl-1"> </span><span class="hl-4">// we don't want to subscribe.</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">peek</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> += </span><span class="hl-2">item</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// Clean gets called before each rerun for a certain item index</span><br/><span class="hl-1"> </span><span class="hl-4">// No need for peek here, as the clean code doesn't run in an</span><br/><span class="hl-1"> </span><span class="hl-4">// observer scope.</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">clean</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> -= </span><span class="hl-2">item</span><span class="hl-1">);</span><br/><span class="hl-1">})</span><br/><br/><span class="hl-4">// Show the sum</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'h1 text='</span><span class="hl-1">, </span><span class="hl-2">$sum</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Make random changes to the array</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">rnd</span><span class="hl-1"> = () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1">|(</span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-7">random</span><span class="hl-1">()*</span><span class="hl-8">20</span><span class="hl-1">);</span><br/><span class="hl-7">setInterval</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$numbers</span><span class="hl-1">[</span><span class="hl-7">rnd</span><span class="hl-1">()] = </span><span class="hl-7">rnd</span><span class="hl-1">(), </span><span class="hl-8">1000</span><span class="hl-1">);</span>
|
|
9
|
-
</code><button type="button">Copy</button></pre>
|
|
10
|
-
|
|
11
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L2938">aberdeen.ts:2938</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.17.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>copy | Aberdeen - v1.17.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.17.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">copy</a></li></ul><h1>Function copy</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="copy"><span class="tsd-kind-call-signature">copy</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#copy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Recursively copies properties or array items from <code>src</code> to <code>dst</code>.
|
|
2
|
-
It's designed to work efficiently with reactive proxies created by <a href="../proxy/" class="tsd-kind-function">proxy</a>.</p>
|
|
3
|
-
<ul>
|
|
4
|
-
<li><strong>Minimizes Updates:</strong> When copying between objects/arrays (proxied or not), if a nested object
|
|
5
|
-
exists in <code>dst</code> with the same constructor as the corresponding object in <code>src</code>, <code>copy</code>
|
|
6
|
-
will recursively copy properties into the existing <code>dst</code> object instead of replacing it.
|
|
7
|
-
This minimizes change notifications for reactive (proxied) destinations.</li>
|
|
8
|
-
<li><strong>Fast with Proxies:</strong> When copying to/from proxied objects, <code>copy</code> uses Aberdeen internals
|
|
9
|
-
to speed things up (compared to a non-Aberdeen-aware deep copy).</li>
|
|
10
|
-
</ul>
|
|
11
|
-
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="copyt"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The type of the objects being copied.</p>
|
|
12
|
-
</div><div class="tsd-comment tsd-typography"></div></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">dst</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a></span><div class="tsd-comment tsd-typography"><p>The destination object/array/Map (proxied or unproxied).</p>
|
|
13
|
-
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">src</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a></span><div class="tsd-comment tsd-typography"><p>The source object/array/Map (proxied or unproxied). It won't be modified.</p>
|
|
14
|
-
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><p><code>true</code> if any changes were made to <code>dst</code>, or <code>false</code> if not.</p>
|
|
15
|
-
<div class="tsd-comment tsd-typography"><div class="tsd-tag-throws"><h4 class="tsd-anchor-link" id="throws">Throws<a href="#throws" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Error if attempting to copy an array into a non-array or vice versa.</p>
|
|
16
|
-
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-basic-copy">Example: Basic Copy<a href="#example-basic-copy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$source</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">a:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">c:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1"> } });</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$dest</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">d:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1"> } });</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">copy</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-2">$source</span><span class="hl-1">);</span><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { c: 2 } })</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">copy</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-3">'b'</span><span class="hl-1">, { </span><span class="hl-2">e:</span><span class="hl-1"> </span><span class="hl-8">4</span><span class="hl-1"> });</span><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { e: 4 } })</span>
|
|
17
|
-
</code><button type="button">Copy</button></pre>
|
|
18
|
-
|
|
19
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L1708">aberdeen.ts:1708</a></li></ul></aside></div></li><li class=""><div class="tsd-signature tsd-anchor-link" id="copy-1"><span class="tsd-kind-call-signature">copy</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">dstKey</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a><span class="tsd-signature-symbol">[</span><span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#copy-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Like above, but copies <code>src</code> into <code>dst[dstKey]</code>. This is useful if you're unsure if dst[dstKey]
|
|
20
|
-
already exists (as the right type of object) or if you don't want to subscribe to dst[dstKey].</p>
|
|
21
|
-
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="copyt-1"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">dst</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a></span></li><li><span><span class="tsd-kind-parameter">dstKey</span>: <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a></span><div class="tsd-comment tsd-typography"><p>Optional key in <code>dst</code> to copy into.</p>
|
|
22
|
-
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">src</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a><span class="tsd-signature-symbol">[</span><span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt-1">T</a><span class="tsd-signature-symbol">]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L1715">aberdeen.ts:1715</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.17.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>count | Aberdeen - v1.17.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.17.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">count</a></li></ul><h1>Function count</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="count"><span class="tsd-kind-call-signature">count</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">TargetType</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ValueRef</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">></span><a href="#count" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Reactively counts the number of properties in an object.</p>
|
|
2
|
-
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">proxied</span>: <span class="tsd-signature-type">TargetType</span></span><div class="tsd-comment tsd-typography"><p>The observable object to count. In case an <code>array</code>, <code>Map</code>, or <code>Set</code> is passed in, a <a href="../ref/" class="tsd-kind-function">ref</a> to its <code>.length</code> or <code>.size</code> will be returned.</p>
|
|
3
|
-
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ValueRef</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">></span></h4><p>an observable object for which the <code>value</code> property reflects the number of properties in <code>proxied</code> with a value other than <code>undefined</code>, or the collection size for arrays, Maps, and Sets.</p>
|
|
4
|
-
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$items</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({</span><span class="hl-2">x:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">y:</span><span class="hl-1"> </span><span class="hl-8">7</span><span class="hl-1">} </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-10">any</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$count</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">count</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Create a DOM text node for the count:</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div text='</span><span class="hl-1">, </span><span class="hl-2">$count</span><span class="hl-1">);</span><br/><span class="hl-4">// <div>2</div></span><br/><br/><span class="hl-4">// Or we can use it in an {@link derive} function:</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">"The count is now"</span><span class="hl-1">, </span><span class="hl-2">$count</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">));</span><br/><span class="hl-4">// The count is now 2</span><br/><br/><span class="hl-4">// Adding/removing items will update the count</span><br/><span class="hl-2">$items</span><span class="hl-1">.</span><span class="hl-2">z</span><span class="hl-1"> = </span><span class="hl-8">12</span><span class="hl-1">;</span><br/><span class="hl-4">// Asynchronously, after 0ms:</span><br/><span class="hl-4">// <div>3</div></span><br/><span class="hl-4">// The count is now 3</span>
|
|
5
|
-
</code><button type="button">Copy</button></pre>
|
|
6
|
-
|
|
7
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ceb94aef9d4eaf884e67232de79631a85f543e28/src/aberdeen.ts#L1155">aberdeen.ts:1155</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.17.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|