diff --git a/README.md b/README.md index 13a5c1a..55a1f73 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ function EmojiCounter({ initial }) { el("p", { className: "output", textContent: S(() => - `Hello World ${emoji.get().repeat(clicks.get())}`), + `Hello World ${emoji.get().repeat(count.get())}`), }), // 🎮 Controls - Update state on events @@ -39,12 +39,12 @@ function EmojiCounter({ initial }) { on("click", () => count.set(count.get() + 1)) ), - el("select", null, + el("select", null, on.host(el=> el.value= initial), on("change", e => emoji.set(e.target.value)) ).append( - el(Option, "🎉", isSelected), - el(Option, "🚀", isSelected), - el(Option, "💖", isSelected), + el(Option, "🎉"), + el(Option, "🚀"), + el(Option, "💖"), ) ); } @@ -93,18 +93,30 @@ into existing projects. # npm install deka-dom-el ``` -#### Direct Script +#### CDN / Direct Script + +For CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the [interactive +format selector](https://jaandrle.github.io/deka-dom-el/) on the documentation site. + ```html + - + + + ``` ### Documentation -- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el): WIP -- [Examples](./examples/): TBD/WIP +- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el) +- [**Examples**](https://jaandrle.github.io/deka-dom-el/p15-examples.html) ## Understanding Signals @@ -117,10 +129,17 @@ Signals are the reactive backbone of Deka DOM Elements: ## Inspiration and Alternatives -- [vanjs-org/van](https://github.com/vanjs-org/van) - World's smallest reactive UI framework -- [adamhaile/S](https://github.com/adamhaile/S) - Simple, clean, fast reactive programming -- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) - Create HyperText with JavaScript -- [potch/signals](https://github.com/potch/signals) - A small reactive signals library -- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) - +- [vanjs-org/van](https://github.com/vanjs-org/van) — World's smallest reactive UI framework +- [adamhaile/S](https://github.com/adamhaile/S) — Simple, clean, fast reactive programming +- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) — Create HyperText with JavaScript +- [potch/signals](https://github.com/potch/signals) — A small reactive signals library +- [AseasRoa/paintor](https://github.com/AseasRoa/paintor) - JavaScript library for building reactive client-side user + interfaces or HTML code. +- [pota](https://pota.quack.uy/) — small and pluggable Reactive Web Renderer. It's compiler-less, includes an html + function, and a optimized babel preset in case you fancy JSX. +- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) — Functional DOM components without JSX/virtual DOM -- [mxjp/rvx: A signal based frontend framework](https://github.com/mxjp/rvx) +- [TarekRaafat/eleva](https://github.com/TarekRaafat/eleva) — A minimalist, lightweight, pure vanilla JavaScript + frontend runtime framework. +- [didi/mpx](https://github.com/didi/mpx) — Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架 +- [mxjp/rvx](https://github.com/mxjp/rvx) — A signal based frontend framework diff --git a/bs/build.js b/bs/build.js index 477a301..f45cdc8 100755 --- a/bs/build.js +++ b/bs/build.js @@ -5,18 +5,18 @@ const files= [ "index", "index-with-signals" ]; $.api("") .command("main", "Build main files", { default: true }) .option("--no-types", "Also generate d.ts files", false) -.action(async function main({ types }){ - const regular = await build({ +.action(function main({ types }){ + const regular = build({ files, filesOut, minify: "no", types, }); - const min = await build({ + const min = build({ files, filesOut(file, mark= "esm"){ const out= filesOut(file, mark); - const idx= out.lastIndexOf("."); + const idx= out.indexOf("."); return out.slice(0, idx)+".min"+out.slice(idx); }, minify: "full", @@ -25,8 +25,8 @@ $.api("") return $.exit(regular + min); }) .command("signals", "Build only signals (for example for analysis)") -.action(async function signals(){ - const regular = await build({ +.action(function signals(){ + const regular = build({ files: [ "signals" ], filesOut(file){ return "dist/."+file; }, minify: "no", diff --git a/bs/dev/.build.js b/bs/dev/.build.js index ac2f13d..8e7a251 100644 --- a/bs/dev/.build.js +++ b/bs/dev/.build.js @@ -1,4 +1,5 @@ #!/usr/bin/env -S npx nodejsscript +import { buildSync as esbuildSync } from "esbuild"; const css= echo.css` .info{ color: gray; } `; @@ -8,8 +9,7 @@ export function build({ files, filesOut, minify= "partial", iife= true, types= t const file= file_root+".js"; echo(`Processing ${file} (minified: ${minify})`); const out= filesOut(file); - const esbuild_output= buildEsbuild({ file, out, minify }); - echoVariant(esbuild_output.stderr.split("\n")[1].trim()); + esbuild({ file, out, minify }); if(types){ const file_dts= file_root+".d.ts"; @@ -31,14 +31,13 @@ export function build({ files, filesOut, minify= "partial", iife= true, types= t const name= "DDE"; const out= filesOut(file_root+".js", fileMark); - const params= [ - "--format=iife", - "--global-name="+name, - ]; - const dde_output= buildEsbuild({ file, out, minify, params }); - echoVariant(`${out} (${name})`) + const params= { + format: "iife", + globalName: name + }; + esbuild({ file, out, minify, params }); - if(!types) return dde_output; + if(!types) return; const file_dts= file_root+".d.ts"; const file_dts_out= filesOut(file_dts, fileMark); echoVariant(file_dts_out, true); @@ -48,8 +47,6 @@ export function build({ files, filesOut, minify= "partial", iife= true, types= t entry: file_dts, }) echoVariant(file_dts_out); - - return dde_output; } } export function buildDts({ bundle, entry, name }){ @@ -64,46 +61,39 @@ export function buildDts({ bundle, entry, name }){ ].filter(Boolean).join(" "), { out, entry }); return dts_b_g_output; } -class ErrorEsbuild extends Error{ - constructor({ code, stderr }){ - super(stderr); - this.code= code; - this.stderr= stderr; - } -} -function buildEsbuild({ file, out, minify= "partial", params= [] }){ - try { - return esbuild({ file, out, minify, params }); - } catch(e){ - if(e instanceof ErrorEsbuild) - return $.exit(e.code, echo(e.stderr)); - throw e; - } -} -export function esbuild({ file, out, minify= "partial", params= [] }){ - const esbuild_output= s.$().run([ - "npx esbuild '::file::'", - "--platform=neutral", - "--bundle", - minifyOption(minify), - "--legal-comments=inline", - "--packages=external", - ...params, - "--outfile='::out::'" - ].filter(Boolean).join(" "), { file, out }); - if(esbuild_output.code) - throw new ErrorEsbuild(esbuild_output); +export function esbuild({ file, out, minify= "partial", params= {} }){ + const esbuild_output= esbuildSync({ + entryPoints: [file], + outfile: out, + platform: "neutral", + bundle: true, + legalComments: "inline", + packages: "external", + metafile: true, + ...minifyOption(minify), + ...params + }); pipe( f=> f.replace(/^ +/gm, m=> "\t".repeat(m.length/2)), f=> s.echo(f).to(out) )(s.cat(out)); + + echoVariant(metaToLineStatus(esbuild_output.metafile, out)); return esbuild_output; } /** @param {"no"|"full"|"partial"} level */ function minifyOption(level= "partial"){ - if("no"===level) return undefined; - if("full"===level) return "--minify"; - return "--minify-syntax --minify-identifiers"; + if("no"===level) return { minify: false }; + if("full"===level) return { minify: true }; + return { minifySyntax: true, minifyIdentifiers: true }; +} +function metaToLineStatus(meta, file){ + const status= meta.outputs[file]; + if(!status) return `? ${file}: unknown`; + const { bytes }= status; + const kbytes= bytes/1024; + const kbytesR= kbytes.toFixed(2); + return `${file}: ${kbytesR} kB`; } function echoVariant(name, todo= false){ if(todo) return echo.use("-R", "~ "+name); diff --git a/dist/esm-with-signals.d.min.ts b/dist/esm-with-signals.d.min.ts deleted file mode 100644 index 49490b4..0000000 --- a/dist/esm-with-signals.d.min.ts +++ /dev/null @@ -1,641 +0,0 @@ -declare global{ /* ddeSignal */ } -type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } -type SupportedElement= - HTMLElementTagNameMap[keyof HTMLElementTagNameMap] - | SVGElementTagNameMap[keyof SVGElementTagNameMap] - | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] - | CustomElementTagNameMap[keyof CustomElementTagNameMap] -declare global { - type ddeComponentAttributes= Record | undefined; - type ddeElementAddon= (element: El)=> any; - type ddeString= string | ddeSignal - type ddeStringable= ddeString | number | ddeSignal -} -type PascalCase= -`${Capitalize}${string}`; -type AttrsModified= { - /** - * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). - */ - style: Partial | ddeString - | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> - /** - * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. - * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` - * for others. - */ - classList: Record>, - /** - * Used by the dataset HTML attribute to represent data for custom attributes added to elements. - * Values are converted to string (see {@link DOMStringMap}). - * - * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) - * */ - dataset: Record, - /** - * Sets `aria-*` simiraly to `dataset` - * */ - ariaset: Record, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> - & Record<`.${string}`, any> -type _fromElsInterfaces= Omit; -type IsReadonly = - T extends { readonly [P in K]: T[K] } ? true : false; -/** - * Just element attributtes - * - * In most cases, you can use native propertie such as - * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on - * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). - * - * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives. - * @private - */ -type ElementAttributes= Partial<{ - [K in keyof _fromElsInterfaces]: - _fromElsInterfaces[K] extends ((...p: any[])=> any) - ? _fromElsInterfaces[K] | ((...p: Parameters<_fromElsInterfaces[K]>)=> - ddeSignal[K]>>) - : (IsReadonly<_fromElsInterfaces, K> extends false - ? _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> - : ddeStringable) -} & AttrsModified> & Record; -export function classListDeclarative( - element: El, - classList: AttrsModified["classList"] -): El -export function assign(element: El, ...attrs_array: ElementAttributes[]): El -export function assignAttribute>( - element: El, - attr: ATT, - value: ElementAttributes[ATT] -): ElementAttributes[ATT] - -type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; -export namespace el { - /** - * Creates a marker comment for elements - * - * @param attrs - Marker attributes - * @param [is_open=false] - Whether the marker is open-ended - * @returns Comment node marker - */ - export function mark( - attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" }, - is_open?: boolean - ): Comment; -} - -export function el< - A extends ddeComponentAttributes, - EL extends SupportedElement | ddeDocumentFragment ->( - component: (attr: A, ...rest: any[])=> EL, - attrs?: NoInfer, - ...addons: ddeElementAddon[] -): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? EL - : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) -export function el< - A extends { textContent: ddeStringable }, - EL extends SupportedElement | ddeDocumentFragment ->( - component: (attr: A, ...rest: any[])=> EL, - attrs?: NoInfer["textContent"], - ...addons: ddeElementAddon[] -): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? EL - : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) -export function el< - TAG extends keyof ExtendedHTMLElementTagNameMap, ->( - tag_name: TAG, - attrs?: ElementAttributes]> | ddeStringable, - ...addons: ddeElementAddon< - ExtendedHTMLElementTagNameMap[NoInfer] - >[], // TODO: for now addons must have the same element -): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement -export function el( - tag_name?: "<>", -): ddeDocumentFragment -export function el( - tag_name: string, - attrs?: ElementAttributes | ddeStringable, - ...addons: ddeElementAddon[] -): ddeHTMLElement -export { el as createElement } - -export function elNS( - namespace: "http://www.w3.org/2000/svg" -): < - TAG extends keyof SVGElementTagNameMap & string, - EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), ->( - tag_name: TAG, - attrs?: ElementAttributes> | ddeStringable, - ...addons: ddeElementAddon>[] -)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement -export function elNS( - namespace: "http://www.w3.org/1998/Math/MathML" -): < - TAG extends keyof MathMLElementTagNameMap & string, - EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), ->( - tag_name: TAG, - attrs?: ddeStringable | Partial<{ - [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean - }>, - ...addons: ddeElementAddon>[] -)=> ddeMathMLElement -export function elNS( - namespace: string -): ( - tag_name: string, - attrs?: string | ddeStringable | Record, - ...addons: ddeElementAddon[] -)=> SupportedElement -export { elNS as createElementNS } - -export function chainableAppend(el: EL): EL; -/** Simulate slots for ddeComponents */ -export function simulateSlots( - root: EL, -): EL -/** - * Simulate slots in Custom Elements without using `shadowRoot`. - * @param el Custom Element root element - * @param body Body of the custom element - * */ -export function simulateSlots( - el: HTMLElement, - body: EL, -): EL - -export function dispatchEvent(name: keyof DocumentEventMap | string, element: SupportedElement): - (data?: any)=> void; -export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): - (element: SupportedElement, data?: any)=> void; -export function dispatchEvent( - name: keyof DocumentEventMap | string, - options: EventInit | null, - element: SupportedElement | (()=> SupportedElement) -): (data?: any)=> void; -interface On{ - /** Listens to the DOM event. See {@link Document.addEventListener} */ - < - Event extends keyof DocumentEventMap, - EE extends ddeElementAddon= ddeElementAddon, - >( - type: Event, - listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, - options?: AddEventListenerOptions - ) : EE; - < - EE extends ddeElementAddon= ddeElementAddon, - >( - type: string, - listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent ) => any, - options?: AddEventListenerOptions - ) : EE; - /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line - connected< - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ) - >( - listener: (this: El, event: CustomEvent) => any, - options?: AddEventListenerOptions - ) : EE; - /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line - disconnected< - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ) - >( - listener: (this: El, event: CustomEvent) => any, - options?: AddEventListenerOptions - ) : EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line - attributeChanged< - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ) - >( - listener: (this: El, event: CustomEvent<[ string, string ]>) => any, - options?: AddEventListenerOptions - ) : EE; -} -export const on: On; - -type Scope= { - scope: Node | Function | Object, - host: ddeElementAddon, - custom_element: false | HTMLElement, - prevent: boolean -}; -/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */ -export const scope: { - current: Scope, - /** Stops all automatizations. E. g. signals used as attributes in current scope - * registers removing these listeners (and clean signal if no other listeners are detected) - * on `disconnected` event. */ - preventDefault(prevent: T): T, - /** - * This represents reference to the current host element — `scope.host()`. - * It can be also used to register Addon(s) (functions to be called when component is initized) - * — `scope.host(on.connected(console.log))`. - * */ - host: (...addons: ddeElementAddon[])=> HTMLElement, - - state: Scope[], - /** Adds new child scope. All attributes are inherited by default. */ - push(scope?: Partial): ReturnType["push"]>, - /** Adds root scope as a child of the current scope. */ - pushRoot(): ReturnType["push"]>, - /** Removes last/current child scope. */ - pop(): ReturnType["pop"]>, -}; - -export function customElementRender< - EL extends HTMLElement, - P extends any = Record> ->( - target: ShadowRoot | EL, - render: (props: P)=> SupportedElement | DocumentFragment, - props?: P | ((el: EL)=> P) -): EL -export function customElementWithDDE HTMLElement)>(custom_element: EL): EL -export function lifecyclesToEvents HTMLElement)>(custom_element: EL): EL -export function observedAttributes(custom_element: HTMLElement): Record - -/** - * This is used primarly for server side rendering. To be sure that all async operations - * are finished before the page is sent to the client. - * ``` - * // on component - * function component(){ - * … - * queue(fetch(...).then(...)); - * } - * - * // building the page - * async function build(){ - * const { component }= await import("./component.js"); - * document.body.append(el(component)); - * await queue(); - * retutn document.body.innerHTML; - * } - * ``` - * */ -export function queue(promise?: Promise): Promise; - -/* TypeScript MEH */ -declare global{ - type ddeAppend= (...nodes: (Node | string)[])=> el; - - interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } - interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } - interface ddeSVGElement extends SVGElement{ append: ddeAppend; } - interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } - - interface ddeHTMLElementTagNameMap { - "a": ddeHTMLAnchorElement; - "area": ddeHTMLAreaElement; - "audio": ddeHTMLAudioElement; - "base": ddeHTMLBaseElement; - "blockquote": ddeHTMLQuoteElement; - "body": ddeHTMLBodyElement; - "br": ddeHTMLBRElement; - "button": ddeHTMLButtonElement; - "canvas": ddeHTMLCanvasElement; - "caption": ddeHTMLTableCaptionElement; - "col": ddeHTMLTableColElement; - "colgroup": ddeHTMLTableColElement; - "data": ddeHTMLDataElement; - "datalist": ddeHTMLDataListElement; - "del": ddeHTMLModElement; - "details": ddeHTMLDetailsElement; - "dialog": ddeHTMLDialogElement; - "div": ddeHTMLDivElement; - "dl": ddeHTMLDListElement; - "embed": ddeHTMLEmbedElement; - "fieldset": ddeHTMLFieldSetElement; - "form": ddeHTMLFormElement; - "h1": ddeHTMLHeadingElement; - "h2": ddeHTMLHeadingElement; - "h3": ddeHTMLHeadingElement; - "h4": ddeHTMLHeadingElement; - "h5": ddeHTMLHeadingElement; - "h6": ddeHTMLHeadingElement; - "head": ddeHTMLHeadElement; - "hr": ddeHTMLHRElement; - "html": ddeHTMLHtmlElement; - "iframe": ddeHTMLIFrameElement; - "img": ddeHTMLImageElement; - "input": ddeHTMLInputElement; - "ins": ddeHTMLModElement; - "label": ddeHTMLLabelElement; - "legend": ddeHTMLLegendElement; - "li": ddeHTMLLIElement; - "link": ddeHTMLLinkElement; - "map": ddeHTMLMapElement; - "menu": ddeHTMLMenuElement; - "meta": ddeHTMLMetaElement; - "meter": ddeHTMLMeterElement; - "object": ddeHTMLObjectElement; - "ol": ddeHTMLOListElement; - "optgroup": ddeHTMLOptGroupElement; - "option": ddeHTMLOptionElement; - "output": ddeHTMLOutputElement; - "p": ddeHTMLParagraphElement; - "picture": ddeHTMLPictureElement; - "pre": ddeHTMLPreElement; - "progress": ddeHTMLProgressElement; - "q": ddeHTMLQuoteElement; - "script": ddeHTMLScriptElement; - "select": ddeHTMLSelectElement; - "slot": ddeHTMLSlotElement; - "source": ddeHTMLSourceElement; - "span": ddeHTMLSpanElement; - "style": ddeHTMLStyleElement; - "table": ddeHTMLTableElement; - "tbody": ddeHTMLTableSectionElement; - "td": ddeHTMLTableCellElement; - "template": ddeHTMLTemplateElement; - "textarea": ddeHTMLTextAreaElement; - "tfoot": ddeHTMLTableSectionElement; - "th": ddeHTMLTableCellElement; - "thead": ddeHTMLTableSectionElement; - "time": ddeHTMLTimeElement; - "title": ddeHTMLTitleElement; - "tr": ddeHTMLTableRowElement; - "track": ddeHTMLTrackElement; - "ul": ddeHTMLUListElement; - "video": ddeHTMLVideoElement; - } - interface ddeSVGElementTagNameMap { - "a": ddeSVGAElement; - "animate": ddeSVGAnimateElement; - "animateMotion": ddeSVGAnimateMotionElement; - "animateTransform": ddeSVGAnimateTransformElement; - "circle": ddeSVGCircleElement; - "clipPath": ddeSVGClipPathElement; - "defs": ddeSVGDefsElement; - "desc": ddeSVGDescElement; - "ellipse": ddeSVGEllipseElement; - "feBlend": ddeSVGFEBlendElement; - "feColorMatrix": ddeSVGFEColorMatrixElement; - "feComponentTransfer": ddeSVGFEComponentTransferElement; - "feComposite": ddeSVGFECompositeElement; - "feConvolveMatrix": ddeSVGFEConvolveMatrixElement; - "feDiffuseLighting": ddeSVGFEDiffuseLightingElement; - "feDisplacementMap": ddeSVGFEDisplacementMapElement; - "feDistantLight": ddeSVGFEDistantLightElement; - "feDropShadow": ddeSVGFEDropShadowElement; - "feFlood": ddeSVGFEFloodElement; - "feFuncA": ddeSVGFEFuncAElement; - "feFuncB": ddeSVGFEFuncBElement; - "feFuncG": ddeSVGFEFuncGElement; - "feFuncR": ddeSVGFEFuncRElement; - "feGaussianBlur": ddeSVGFEGaussianBlurElement; - "feImage": ddeSVGFEImageElement; - "feMerge": ddeSVGFEMergeElement; - "feMergeNode": ddeSVGFEMergeNodeElement; - "feMorphology": ddeSVGFEMorphologyElement; - "feOffset": ddeSVGFEOffsetElement; - "fePointLight": ddeSVGFEPointLightElement; - "feSpecularLighting": ddeSVGFESpecularLightingElement; - "feSpotLight": ddeSVGFESpotLightElement; - "feTile": ddeSVGFETileElement; - "feTurbulence": ddeSVGFETurbulenceElement; - "filter": ddeSVGFilterElement; - "foreignObject": ddeSVGForeignObjectElement; - "g": ddeSVGGElement; - "image": ddeSVGImageElement; - "line": ddeSVGLineElement; - "linearGradient": ddeSVGLinearGradientElement; - "marker": ddeSVGMarkerElement; - "mask": ddeSVGMaskElement; - "metadata": ddeSVGMetadataElement; - "mpath": ddeSVGMPathElement; - "path": ddeSVGPathElement; - "pattern": ddeSVGPatternElement; - "polygon": ddeSVGPolygonElement; - "polyline": ddeSVGPolylineElement; - "radialGradient": ddeSVGRadialGradientElement; - "rect": ddeSVGRectElement; - "script": ddeSVGScriptElement; - "set": ddeSVGSetElement; - "stop": ddeSVGStopElement; - "style": ddeSVGStyleElement; - "svg": ddeSVGSVGElement; - "switch": ddeSVGSwitchElement; - "symbol": ddeSVGSymbolElement; - "text": ddeSVGTextElement; - "textPath": ddeSVGTextPathElement; - "title": ddeSVGTitleElement; - "tspan": ddeSVGTSpanElement; - "use": ddeSVGUseElement; - "view": ddeSVGViewElement; - } -} - -// editorconfig-checker-disable -interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } -interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } -interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } -interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend; } -interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend; } -interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend; } -interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend; } -interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend; } -interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend; } -interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend; } -interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } -interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } -interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend; } -interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend; } -interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend; } -interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend; } -interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend; } -interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend; } -interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend; } -interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend; } -interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend; } -interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend; } -interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend; } -interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend; } -interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend; } -interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend; } -interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend; } -interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend; } -interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend; } -interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend; } -interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend; } -interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend; } -interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend; } -interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend; } -interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend; } -interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend; } -interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend; } -interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend; } -interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend; } -interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend; } -interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend; } -interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend; } -interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend; } -interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend; } -interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend; } -interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend; } -interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend; } -interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend; } -interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend; } -interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend; } -interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend; } -interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend; } -interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend; } -interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend; } -interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } -interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend; } -interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend; } -interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } -interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend; } -interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend; } -interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend; } -interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend; } -interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend; } -interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend; } -interface ddeSVGAElement extends SVGAElement{ append: ddeAppend; } -interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend; } -interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend; } -interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend; } -interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend; } -interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend; } -interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend; } -interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend; } -interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend; } -interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend; } -interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend; } -interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend; } -interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend; } -interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend; } -interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend; } -interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend; } -interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend; } -interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend; } -interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend; } -interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend; } -interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend; } -interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend; } -interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend; } -interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend; } -interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend; } -interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend; } -interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend; } -interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend; } -interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend; } -interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend; } -interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend; } -interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend; } -interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend; } -interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend; } -interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend; } -interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend; } -interface ddeSVGGElement extends SVGGElement{ append: ddeAppend; } -interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend; } -interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend; } -interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend; } -interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend; } -interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend; } -interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend; } -interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend; } -interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend; } -interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend; } -interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend; } -interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend; } -interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend; } -interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend; } -interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend; } -interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend; } -interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend; } -interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend; } -interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend; } -interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend; } -interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend; } -interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend; } -interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend; } -interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend; } -interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend; } -interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } -interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } -// editorconfig-checker-enable -export interface Signal { - /** The current value of the signal */ - get(): V; - /** Set new value of the signal */ - set(value: V): V; - toJSON(): V; - valueOf(): V; -} -type Action= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void; -//type SymbolSignal= Symbol; -type SymbolOnclear= symbol; -type Actions= Record>; -type OnListenerOptions= Pick & { first_time?: boolean }; -interface signal{ - _: Symbol - /** - * Computations signal. This creates a signal which is computed from other signals. - * */ - any>(computation: V): Signal, {}> - /** - * Simple example: - * ```js - * const hello= S("Hello Signal"); - * ``` - * …simple todo signal: - * ```js - * const todos= S([], { - * add(v){ this.value.push(S(v)); }, - * remove(i){ this.value.splice(i, 1); }, - * [S.symbols.onclear](){ S.clear(...this.value); }, - * }); - * ``` - * …computed signal: - * ```js - * const name= S("Jan"); - * const surname= S("Andrle"); - * const fullname= S(()=> name.get()+" "+surname.get()); - * ``` - * @param value Initial signal value. Or function computing value from other signals. - * @param actions Use to define actions on the signal. Such as add item to the array. - * There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared - * by `S.clear`. - * */ - >(value: V, actions?: A): Signal; - action>, A extends (S extends Signal ? A : never), N extends keyof A>( - signal: S, - name: N, - ...params: A[N] extends (...args: infer P)=> any ? P : never - ): void; - clear(...signals: Signal[]): void; - on(signal: Signal, onchange: (a: T)=> void, options?: OnListenerOptions): void; - symbols: { - //signal: SymbolSignal; - onclear: SymbolOnclear; - } - /** - * Reactive element, which is rendered based on the given signal. - * ```js - * S.el(signal, value=> value ? el("b", "True") : el("i", "False")); - * S.el(listS, list=> list.map(li=> el("li", li))); - * ``` - * */ - el(signal: Signal, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment; - - observedAttributes(custom_element: HTMLElement): Record>; -} -export const signal: signal; -export const S: signal; -declare global { - type ddeSignal= Signal; - type ddeAction= Action - type ddeActions= Actions -} \ No newline at end of file diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index c22a98a..1cf65ca 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -173,17 +173,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index d223107..06a87bb 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -55,38 +55,7 @@ var Defined = class extends Error { } }; -// src/signals-lib/common.js -var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } -}; -function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; -} -function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; -} - -// src/dom-common.js +// src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -112,7 +81,7 @@ var evc = "dde:connected"; var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; -// src/events-observer.js +// src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -276,7 +245,7 @@ function connectionsChangesObserverConstructor() { } } -// src/events.js +// src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -298,6 +267,7 @@ function on(event, listener, options) { return element; }; } +on.defer = (fn) => setTimeout.bind(null, fn, 0); var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true }); on.connected = function(listener, options) { options = lifeOptions(options); @@ -321,10 +291,7 @@ on.disconnected = function(listener, options) { }; }; -// src/dom.js -function queue(promise) { - return enviroment.q(promise); -} +// src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -399,6 +366,60 @@ var scope = { return scopes.pop(); } }; + +// src/signals-lib/common.js +var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } +}; +function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; +} +function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; +} + +// src/dom-lib/helpers.js +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); +} +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); +} +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); +} +function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); +} + +// src/dom-lib/el.js +function queue(promise) { + return enviroment.q(promise); +} function append(...els) { this.appendOriginal(...els); return this; @@ -414,7 +435,8 @@ function createElement(tag, attributes, ...addons) { const s = signals(this); let scoped = 0; let el, el_host; - if (Object(attributes) !== attributes || s.isSignal(attributes)) + const att_type = typeof attributes; + if (att_type === "string" || att_type === "number" || s.isSignal(attributes)) attributes = { textContent: attributes }; switch (true) { case typeof tag === "function": { @@ -468,38 +490,6 @@ function createElementNS(ns) { return el; }; } -function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; -} var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -562,11 +552,6 @@ function classListDeclarative(element, toggle) { ); return element; } -function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); -} function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -590,19 +575,40 @@ function forEachEntries(s, target, element, obj, cb) { cb(key, val); }); } -function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); -} -function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); -} -function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); -} -// src/customElement.js +// src/dom-lib/customElement.js +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; +} function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ @@ -683,19 +689,19 @@ memo.scope = function memoScope(fun, { signal: signal2, onlyLast } = {}) { // src/signals-lib/helpers.js var mark = "__dde_signal"; var queueSignalWrite = /* @__PURE__ */ (() => { - let pendingSignals = /* @__PURE__ */ new Set(); + let pendingSignals = /* @__PURE__ */ new Map(); let scheduled = false; function flushSignals() { scheduled = false; const todo = pendingSignals; - pendingSignals = /* @__PURE__ */ new Set(); - for (const signal2 of todo) { + pendingSignals = /* @__PURE__ */ new Map(); + for (const [signal2, force] of todo) { const M = signal2[mark]; - if (M) M.listeners.forEach((l) => l(M.value)); + if (M) M.listeners.forEach((l) => l(M.value, force)); } } - return function(s) { - pendingSignals.add(s); + return function(s, force = false) { + pendingSignals.set(s, pendingSignals.get(s) || force); if (scheduled) return; scheduled = true; queueMicrotask(flushSignals); @@ -732,11 +738,11 @@ function signal(value, actions) { return create(false, value, actions); if (isSignal(value)) return value; const out = create(true); - function contextReWatch() { + function contextReWatch(_, force) { const [origin, ...deps_old] = deps.get(contextReWatch); deps.set(contextReWatch, /* @__PURE__ */ new Set([origin])); stack_watch.push(contextReWatch); - write(out, value()); + write(out, value(), force); stack_watch.pop(); if (!deps_old.length) return; const deps_curr = deps.get(contextReWatch); @@ -758,7 +764,7 @@ signal.action = function(s, name, ...a) { throw new Error(`Action "${name}" not defined. See ${mark}.actions.`); actions[name].apply(M, a); if (M.skip) return delete M.skip; - queueSignalWrite(s); + queueSignalWrite(s, true); }; signal.on = function on2(s, listener, options = {}) { const { signal: as } = options; @@ -967,7 +973,7 @@ function write(s, value, force) { const M = s[mark]; if (!M || !force && M.value === value) return; M.value = value; - queueSignalWrite(s); + queueSignalWrite(s, force); return value; } function addSignalListener(s, listener) { @@ -1004,7 +1010,6 @@ export { dispatchEvent, createElement as el, createElementNS as elNS, - elementAttribute, isSignal, lifecyclesToEvents, memo, diff --git a/dist/esm-with-signals.min.d.ts b/dist/esm-with-signals.min.d.ts index c22a98a..1cf65ca 100644 --- a/dist/esm-with-signals.min.d.ts +++ b/dist/esm-with-signals.min.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -173,17 +173,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/esm-with-signals.min.js b/dist/esm-with-signals.min.js index b44560e..e73ec54 100644 --- a/dist/esm-with-signals.min.js +++ b/dist/esm-with-signals.min.js @@ -1,4 +1,4 @@ -var W=(...t)=>Object.prototype.hasOwnProperty.call(...t);function C(t){return typeof t>"u"}function nt(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){return t instanceof e}function rt(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function v(t=null,e={}){return Object.create(t,e)}function x(...t){return Object.assign(...t)}function Z(t,e){if(!t||!S(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function ot(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Et(o)]=e(t,o),r},{})}function Et(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var P=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function G(t,e=!0){return e?x(j,t):(Object.setPrototypeOf(t,j),t)}function F(t){return rt(t,j)&&t!==j?t:j}var l={setDeleteAttr:_t,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function _t(t,e,n){if(Reflect.set(t,e,n),!!C(n)){if(Reflect.deleteProperty(t,e),S(t,l.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var k="__dde_lifecyclesToEvents",y="dde:connected",D="dde:disconnected",I="dde:attributeChanged";var R=l.M?St():new Proxy({},{get(){return()=>{}}});function St(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}O(f.removedNodes,!0)&&u()}},r=new l.M(n(i));return{observe(u){let a=new l.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(l.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function g(u){t.size>30&&await d();let a=[];if(!S(u,l.N))return a;for(let f of t.keys())f===u||!S(f,l.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&g(_).then(h),!t.has(_))continue;let M=t.get(_);M.length_c&&(_.dispatchEvent(new Event(y)),M.connected=new WeakSet,M.length_c=0,M.length_d||t.delete(_),f=!0)}return f}function O(u,a){let f=!1;for(let _ of u)a&&g(_).then(O),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(xt(_)),f=!0);return f}function xt(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(D)),t.delete(u))}}}function Zt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,x({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var ct=t=>x({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=ct(e),function(r){return r.addEventListener(y,t,e),r[k]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(Z(e.signal,()=>R.offConnected(r,t))&&R.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=ct(e),function(r){return r.addEventListener(D,t,e),r[k]||Z(e.signal,()=>R.offDisconnected(r,t))&&R.onDisconnected(r,t),r}};function te(t){return l.q(t)}var A=[{get scope(){return l.D.body},host:t=>t?t(l.D.body):l.D.body,prevent:!0}],V=new WeakMap,E={get current(){return A[A.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(V.has(t))return V.get(t);let e=new AbortController;return V.set(t,e),t(w.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...A]},push(t={}){return A.push(x({},this.current,{prevent:!1},t))},pushRoot(){return A.push(A[0])},pop(){if(A.length!==1)return A.pop()}};function st(...t){return this.appendOriginal(...t),this}function wt(t){return t.append===st||(t.appendOriginal=t.append,t.append=st),t}var U;function q(t,e,...n){let r=F(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(O=>O(s)),void 0):s;E.push({scope:t,host:i}),c=t(e||void 0);let d=S(c,l.F);if(c.nodeName==="#comment")break;let g=q.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(g),d&&(s=g);break}case t==="#text":c=$.call(this,l.D.createTextNode(""),e);break;case(t==="<>"||!t):c=$.call(this,l.D.createDocumentFragment(),e);break;case!!U:c=$.call(this,l.D.createElementNS(U,t),e);break;case!c:c=$.call(this,l.D.createElement(t),e)}return wt(c),s||(s=c),n.forEach(i=>i(s)),o&&E.pop(),o=2,c}q.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=l.D.createComment(``);return e&&(r.end=l.D.createComment("")),r};function ee(t){let e=this;return function(...r){U=t;let o=q.call(e,...r);return U=void 0,o}}function ne(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let d of i){let g=(d.slot||"")+n;try{At(d,"remove","slot")}catch{}let h=o[g];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(O=>O.remove()),h.name=r+g),h.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var z=new WeakMap,{setDeleteAttr:it}=l;function $(t,...e){if(!e.length)return t;z.set(t,at(t,this));for(let[n,r]of Object.entries(x({},...e)))ft.call(this,t,n,r);return z.delete(t),t}function ft(t,e,n){let{setRemoveAttr:r,s:o}=at(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,d)=>ft.call(c,t,i,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return ut(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return it(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return K(o,e,t,n,ut.bind(null,t[e]));case"ariaset":return K(o,e,t,n,(i,d)=>r("aria-"+i,d));case"classList":return yt.call(c,t,n)}return Ot(t,e)?it(t,e,n):r(e,n)}function at(t,e){if(z.has(t))return z.get(t);let r=(S(t,l.S)?Dt:Ct).bind(null,t,"Attribute"),o=F(e);return{setRemoveAttr:r,s:o}}function yt(t,e){let n=F(this);return K(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function At(t,e,n,r){return S(t,l.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Ot(t,e){if(!(e in t))return!1;let n=dt(t,e);return!C(n.set)}function dt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||dt(t,e)}function K(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,d]){i&&(i=new c(i),i.target=e,d=t.processReactiveAttribute(n,i,d,o),o(i,d))})}function Ct(t,e,n,r){return t[(C(r)?"remove":"set")+e](n,r)}function Dt(t,e,n,r,o=null){return t[(C(r)?"remove":"set")+e+"NS"](o,n,r)}function ut(t,e,n){if(Reflect.set(t,e,n),!!C(n))return Reflect.deleteProperty(t,e)}function ie(t,e,n={}){let r=t.host||t;E.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[k];o||Rt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(D,R.observe(t),{once:!0}),E.pop(),t.append(c)}function Rt(t){return Q(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),Q(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(D)))}),Q(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(I,{detail:[o,c]})),e.apply(n,r)}),t.prototype[k]=!0,t}function Q(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var lt="__dde_memo",H=[];function T(t,e){if(!H.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=H;return o(n,W(r,n)?r[n]:e(t))}T.isScope=function(t){return t[lt]};T.scope=function(e,{signal:n,onlyLast:r}={}){let o=v();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:v();H.unshift({cache:o,after(g,h){return i[g]=h}});let d=e.apply(this,s);return H.shift(),o=i,d}return c[lt]=!0,c.clear=()=>o=v(),n&&n.addEventListener("abort",c.clear),c};var p="__dde_signal",X=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var tt=v(null,{get:{value(){return ht(this)}},set:{value(...t){return vt(this,...t)}},toJSON:{value(){return ht(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),Lt=v(tt,{set:{value(){}}});function J(t){return t&&t[p]}var B=[],b=new WeakMap;function m(t,e){if(typeof t!="function")return pt(!1,t,e);if(J(t))return t;let n=pt(!0);function r(){let[o,...c]=b.get(r);if(b.set(r,new Set([o])),B.push(r),vt(n,t()),B.pop(),!c.length)return;let s=b.get(r);for(let i of c)s.has(i)||N(i,r)}return b.set(n[p],r),b.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!W(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;X(t)};m.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));et(e,n),o&&o.addEventListener("abort",()=>N(e,n))}};m.symbols={onclear:Symbol.for("Signal.onclear")};m.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!b.has(o))return;let c=b.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),b.delete(o))})}};var L="__dde_reactive";m.el=function(t,e){e=T.isScope(e)?e:T.scope(e,{onlyLast:!0});let n=q.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=l.D.createDocumentFragment();o.append(n,r);let{current:c}=E,s=i=>{if(!n.parentNode||!r.parentNode)return N(t,s);E.push(c);let d=e(i);E.pop(),Array.isArray(d)||(d=[d]);let g=document.createComment("");d.push(g),n.after(...d);let h;for(;(h=g.nextSibling)&&h!==r;)h.remove();g.remove(),n.isConnected&&Nt(c.host())};return et(t,s),mt(t,s,n,e),s(t.get()),c.host(w.disconnected(()=>e.clear())),o};function Nt(t){!t||!t[L]||(requestIdleCallback||setTimeout)(function(){t[L]=t[L].filter(([e,n])=>n.isConnected?!0:(N(...e),!1))})}var kt={_set(t){this.value=t}};function Tt(t){return function(e,n){let r=v(tt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=bt(r,e.getAttribute(n),kt);return t[n]=o,o}}var Y="__dde_attributes";m.observedAttributes=function(t){let e=t[Y]={},n=ot(t,Tt(e));return w(I,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[Y][c];if(i)return m.action(i,"_set",s)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */m.clear(...Object.values(this[Y]))})(t),n};var gt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return N(n,o);r(e,c)};return et(n,o),mt(n,o,t,e),n.get()}};function mt(t,e,...n){let{current:r}=E;r.host(function(o){if(o[L])return o[L].push([[t,e],...n]);o[L]=[],!r.prevent&&w.disconnected(()=>o[L].forEach(([[c,s]])=>N(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Mt=new FinalizationRegistry(function(t){m.clear({[p]:t})});function pt(t,e,n){let r=v(t?Lt:tt),o=bt(r,e,n,t);return Mt.register(o,o[p]),o}var Pt=x(v(),{stopPropagation(){this.skip=!0}});function bt(t,e,n,r=!1){let o=[];nt(n)!=="[object Object]"&&(n={});let{onclear:c}=m.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=E;return Reflect.defineProperty(t,p,{value:x(v(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return B[B.length-1]}function ht(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=jt();return r&&n.add(r),b.has(r)&&b.get(r).add(t),e}function vt(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,X(t),e}function et(t,e){if(t[p])return t[p].listeners.add(e)}function N(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;m.clear(t);let s=b.get(r);if(!s)return c;let i=b.get(s);if(!i)return c;for(let d of i)N(d,s,!0);return c}G(gt);export{m as S,$ as assign,ft as assignAttribute,wt as chainableAppend,yt as classListDeclarative,q as createElement,ee as createElementNS,ie as customElementRender,Rt as customElementWithDDE,Zt as dispatchEvent,q as el,ee as elNS,At as elementAttribute,J as isSignal,Rt as lifecyclesToEvents,T as memo,w as on,te as queue,G as registerReactivity,E as scope,m as signal,ne as simulateSlots}; +var W=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function ot(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function E(t,e){return t instanceof e}function ct(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function _(t=null,e={}){return Object.create(t,e)}function v(...t){return Object.assign(...t)}function G(t,e){if(!t||!E(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function st(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[wt(o)]=e(t,o),r},{})}function wt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var P=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var d={setDeleteAttr:yt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function yt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),E(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var k="__dde_lifecyclesToEvents",C="dde:connected",R="dde:disconnected",F="dde:attributeChanged";var D=d.M?At():new Proxy({},{get(){return()=>{}}});function At(){let t=new Map,e=!1,n=u=>function(p){for(let f of p)if(f.type==="childList"){if(m(f.addedNodes,!0)){u();continue}y(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let p=new d.M(n(()=>{}));return p.observe(u,{childList:!0,subtree:!0}),()=>p.disconnect()},onConnected(u,p){s();let f=c(u);f.connected.has(p)||(f.connected.add(p),f.length_c+=1)},offConnected(u,p){if(!t.has(u))return;let f=t.get(u);f.connected.has(p)&&(f.connected.delete(p),f.length_c-=1,o(u,f))},onDisconnected(u,p){s();let f=c(u);f.disconnected.has(p)||(f.disconnected.add(p),f.length_d+=1)},offDisconnected(u,p){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(p),f.length_d-=1,o(u,f)}};function o(u,p){p.length_c||p.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let p={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,p),p}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function a(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function h(u){t.size>30&&await a();let p=[];if(!E(u,d.N))return p;for(let f of t.keys())f===u||!E(f,d.N)||u.contains(f)&&p.push(f);return p}function m(u,p){let f=!1;for(let S of u){if(p&&h(S).then(m),!t.has(S))continue;let T=t.get(S);T.length_c&&(S.dispatchEvent(new Event(C)),T.connected=new WeakSet,T.length_c=0,T.length_d||t.delete(S),f=!0)}return f}function y(u,p){let f=!1;for(let S of u)p&&h(S).then(y),!(!t.has(S)||!t.get(S).length_d)&&((globalThis.queueMicrotask||setTimeout)(Z(S)),f=!0);return f}function Z(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function Jt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}w.defer=t=>setTimeout.bind(null,t,0);var it=t=>v({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=it(e),function(r){return r.addEventListener(C,t,e),r[k]?r:r.isConnected?(r.dispatchEvent(new Event(C)),r):(G(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=it(e),function(r){return r.addEventListener(R,t,e),r[k]||G(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],V=new WeakMap,b={get current(){return O[O.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(V.has(t))return V.get(t);let e=new AbortController;return V.set(t,e),t(w.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.push(v({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};var q={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?v(q,t):(Object.setPrototypeOf(t,q),t)}function I(t){return ct(t,q)&&t!==q?t:q}function ut(t,e,n,r){return t[(A(r)?"remove":"set")+e](n,r)}function ft(t,e,n,r,o=null){return t[(A(r)?"remove":"set")+e+"NS"](o,n,r)}function Q(t,e,n){if(Reflect.set(t,e,n),!!A(n))return Reflect.deleteProperty(t,e)}function at(t,e,n,r){return E(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function se(t){return d.q(t)}function pt(...t){return this.appendOriginal(...t),this}function Ct(t){return t.append===pt||(t.appendOriginal=t.append,t.append=pt),t}var $;function j(t,e,...n){let r=I(this),o=0,c,s,i=typeof e;switch((i==="string"||i==="number"||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let a=(...y)=>y.length?(o===1?n.unshift(...y):y.forEach(Z=>Z(s)),void 0):s;b.push({scope:t,host:a}),c=t(e||void 0);let h=E(c,d.F);if(c.nodeName==="#comment")break;let m=j.mark({type:"component",name:t.name,host:h?"this":"parentElement"});c.prepend(m),h&&(s=m);break}case t==="#text":c=U.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=U.call(this,d.D.createDocumentFragment(),e);break;case!!$:c=U.call(this,d.D.createElementNS($,t),e);break;case!c:c=U.call(this,d.D.createElement(t),e)}return Ct(c),s||(s=c),n.forEach(a=>a(s)),o&&b.pop(),o=2,c}j.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(``);return e&&(r.end=d.D.createComment("")),r};function ue(t){let e=this;return function(...r){$=t;let o=j.call(e,...r);return $=void 0,o}}var z=new WeakMap,{setDeleteAttr:dt}=d;function U(t,...e){if(!e.length)return t;z.set(t,ht(t,this));for(let[n,r]of Object.entries(v({},...e)))lt.call(this,t,n,r);return z.delete(t),t}function lt(t,e,n){let{setRemoveAttr:r,s:o}=ht(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,a)=>lt.call(c,t,i,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return Q(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return dt(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return X(o,e,t,n,Q.bind(null,t[e]));case"ariaset":return X(o,e,t,n,(i,a)=>r("aria-"+i,a));case"classList":return Ot.call(c,t,n)}return Rt(t,e)?dt(t,e,n):r(e,n)}function ht(t,e){if(z.has(t))return z.get(t);let r=(E(t,d.S)?ft:ut).bind(null,t,"Attribute"),o=I(e);return{setRemoveAttr:r,s:o}}function Ot(t,e){let n=I(this);return X(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Rt(t,e){if(!(e in t))return!1;let n=mt(t,e);return!A(n.set)}function mt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||mt(t,e)}function X(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,a]){i&&(i=new c(i),i.target=e,a=t.processReactiveAttribute(n,i,a,o),o(i,a))})}function ge(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let a of i){let h=(a.slot||"")+n;try{at(a,"remove","slot")}catch{}let m=o[h];if(!m)return;m.name.startsWith(r)||(m.childNodes.forEach(y=>y.remove()),m.name=r+h),m.append(a)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function ve(t,e,n={}){let r=t.host||t;b.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[k];o||Dt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(C)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,D.observe(t),{once:!0}),b.pop(),t.append(c)}function Dt(t){return Y(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(C))}),Y(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),Y(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(F,{detail:[o,c]})),e.apply(n,r)}),t.prototype[k]=!0,t}function Y(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var gt="__dde_memo",H=[];function M(t,e){if(!H.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=H;return o(n,W(r,n)?r[n]:e(t))}M.isScope=function(t){return t[gt]};M.scope=function(e,{signal:n,onlyLast:r}={}){let o=_();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:_();H.unshift({cache:o,after(h,m){return i[h]=m}});let a=e.apply(this,s);return H.shift(),o=i,a}return c[gt]=!0,c.clear=()=>o=_(),n&&n.addEventListener("abort",c.clear),c};var l="__dde_signal",tt=(()=>{let t=new Map,e=!1;function n(){e=!1;let r=t;t=new Map;for(let[o,c]of r){let s=o[l];s&&s.listeners.forEach(i=>i(s.value,c))}}return function(r,o=!1){t.set(r,t.get(r)||o),!e&&(e=!0,queueMicrotask(n))}})();var nt=_(null,{get:{value(){return bt(this)}},set:{value(...t){return St(this,...t)}},toJSON:{value(){return bt(this)}},valueOf:{value(){return this[l]&&this[l].value}}}),Lt=_(nt,{set:{value(){}}});function J(t){return t&&t[l]}var B=[],x=new WeakMap;function g(t,e){if(typeof t!="function")return vt(!1,t,e);if(J(t))return t;let n=vt(!0);function r(o,c){let[s,...i]=x.get(r);if(x.set(r,new Set([s])),B.push(r),St(n,t(),c),B.pop(),!i.length)return;let a=x.get(r);for(let h of i)a.has(h)||N(h,r)}return x.set(n[l],r),x.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[l];if(!r)return;let{actions:o}=r;if(!o||!W(o,e))throw new Error(`Action "${e}" not defined. See ${l}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t,!0)};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));rt(e,n),o&&o.addEventListener("abort",()=>N(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[l];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[l])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!x.has(o))return;let c=x.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),x.delete(o))})}};var L="__dde_reactive";g.el=function(t,e){e=M.isScope(e)?e:M.scope(e,{onlyLast:!0});let n=j.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=b,s=i=>{if(!n.parentNode||!r.parentNode)return N(t,s);b.push(c);let a=e(i);b.pop(),Array.isArray(a)||(a=[a]);let h=document.createComment("");a.push(h),n.after(...a);let m;for(;(m=h.nextSibling)&&m!==r;)m.remove();h.remove(),n.isConnected&&Nt(c.host())};return rt(t,s),Et(t,s,n,e),s(t.get()),c.host(w.disconnected(()=>e.clear())),o};function Nt(t){!t||!t[L]||(requestIdleCallback||setTimeout)(function(){t[L]=t[L].filter(([e,n])=>n.isConnected?!0:(N(...e),!1))})}var kt={_set(t){this.value=t}};function Mt(t){return function(e,n){let r=_(nt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=_t(r,e.getAttribute(n),kt);return t[n]=o,o}}var et="__dde_attributes";g.observedAttributes=function(t){let e=t[et]={},n=st(t,Mt(e));return w(F,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). + Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[et][c];if(i)return g.action(i,"_set",s)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). + Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[et]))})(t),n};var xt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return N(n,o);r(e,c)};return rt(n,o),Et(n,o,t,e),n.get()}};function Et(t,e,...n){let{current:r}=b;r.host(function(o){if(o[L])return o[L].push([[t,e],...n]);o[L]=[],!r.prevent&&w.disconnected(()=>o[L].forEach(([[c,s]])=>N(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){g.clear({[l]:t})});function vt(t,e,n){let r=_(t?Lt:nt),o=_t(r,e,n,t);return Tt.register(o,o[l]),o}var Pt=v(_(),{stopPropagation(){this.skip=!0}});function _t(t,e,n,r=!1){let o=[];ot(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=b;return Reflect.defineProperty(t,l,{value:v(_(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function qt(){return B[B.length-1]}function bt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=qt();return r&&n.add(r),x.has(r)&&x.get(r).add(t),e}function St(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,tt(t,n),e}function rt(t,e){if(t[l])return t[l].listeners.add(e)}function N(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=x.get(r);if(!s)return c;let i=x.get(s);if(!i)return c;for(let a of i)N(a,s,!0);return c}K(xt);export{g as S,U as assign,lt as assignAttribute,Ct as chainableAppend,Ot as classListDeclarative,j as createElement,ue as createElementNS,ve as customElementRender,Dt as customElementWithDDE,Jt as dispatchEvent,j as el,ue as elNS,J as isSignal,Dt as lifecyclesToEvents,M as memo,w as on,se as queue,K as registerReactivity,b as scope,g as signal,ge as simulateSlots}; diff --git a/dist/esm.d.min.ts b/dist/esm.d.min.ts deleted file mode 100644 index 9ac112a..0000000 --- a/dist/esm.d.min.ts +++ /dev/null @@ -1,568 +0,0 @@ -declare global{ /* ddeSignal */ } -type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } -type SupportedElement= - HTMLElementTagNameMap[keyof HTMLElementTagNameMap] - | SVGElementTagNameMap[keyof SVGElementTagNameMap] - | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] - | CustomElementTagNameMap[keyof CustomElementTagNameMap] -declare global { - type ddeComponentAttributes= Record | undefined; - type ddeElementAddon= (element: El)=> any; - type ddeString= string | ddeSignal - type ddeStringable= ddeString | number | ddeSignal -} -type PascalCase= -`${Capitalize}${string}`; -type AttrsModified= { - /** - * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). - */ - style: Partial | ddeString - | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> - /** - * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. - * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` - * for others. - */ - classList: Record>, - /** - * Used by the dataset HTML attribute to represent data for custom attributes added to elements. - * Values are converted to string (see {@link DOMStringMap}). - * - * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) - * */ - dataset: Record, - /** - * Sets `aria-*` simiraly to `dataset` - * */ - ariaset: Record, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> - & Record<`.${string}`, any> -type _fromElsInterfaces= Omit; -type IsReadonly = - T extends { readonly [P in K]: T[K] } ? true : false; -/** - * Just element attributtes - * - * In most cases, you can use native propertie such as - * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on - * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). - * - * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives. - * @private - */ -type ElementAttributes= Partial<{ - [K in keyof _fromElsInterfaces]: - _fromElsInterfaces[K] extends ((...p: any[])=> any) - ? _fromElsInterfaces[K] | ((...p: Parameters<_fromElsInterfaces[K]>)=> - ddeSignal[K]>>) - : (IsReadonly<_fromElsInterfaces, K> extends false - ? _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> - : ddeStringable) -} & AttrsModified> & Record; -export function classListDeclarative( - element: El, - classList: AttrsModified["classList"] -): El -export function assign(element: El, ...attrs_array: ElementAttributes[]): El -export function assignAttribute>( - element: El, - attr: ATT, - value: ElementAttributes[ATT] -): ElementAttributes[ATT] - -type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; -export namespace el { - /** - * Creates a marker comment for elements - * - * @param attrs - Marker attributes - * @param [is_open=false] - Whether the marker is open-ended - * @returns Comment node marker - */ - export function mark( - attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" }, - is_open?: boolean - ): Comment; -} - -export function el< - A extends ddeComponentAttributes, - EL extends SupportedElement | ddeDocumentFragment ->( - component: (attr: A, ...rest: any[])=> EL, - attrs?: NoInfer, - ...addons: ddeElementAddon[] -): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? EL - : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) -export function el< - A extends { textContent: ddeStringable }, - EL extends SupportedElement | ddeDocumentFragment ->( - component: (attr: A, ...rest: any[])=> EL, - attrs?: NoInfer["textContent"], - ...addons: ddeElementAddon[] -): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? EL - : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) -export function el< - TAG extends keyof ExtendedHTMLElementTagNameMap, ->( - tag_name: TAG, - attrs?: ElementAttributes]> | ddeStringable, - ...addons: ddeElementAddon< - ExtendedHTMLElementTagNameMap[NoInfer] - >[], // TODO: for now addons must have the same element -): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement -export function el( - tag_name?: "<>", -): ddeDocumentFragment -export function el( - tag_name: string, - attrs?: ElementAttributes | ddeStringable, - ...addons: ddeElementAddon[] -): ddeHTMLElement -export { el as createElement } - -export function elNS( - namespace: "http://www.w3.org/2000/svg" -): < - TAG extends keyof SVGElementTagNameMap & string, - EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), ->( - tag_name: TAG, - attrs?: ElementAttributes> | ddeStringable, - ...addons: ddeElementAddon>[] -)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement -export function elNS( - namespace: "http://www.w3.org/1998/Math/MathML" -): < - TAG extends keyof MathMLElementTagNameMap & string, - EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), ->( - tag_name: TAG, - attrs?: ddeStringable | Partial<{ - [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean - }>, - ...addons: ddeElementAddon>[] -)=> ddeMathMLElement -export function elNS( - namespace: string -): ( - tag_name: string, - attrs?: string | ddeStringable | Record, - ...addons: ddeElementAddon[] -)=> SupportedElement -export { elNS as createElementNS } - -export function chainableAppend(el: EL): EL; -/** Simulate slots for ddeComponents */ -export function simulateSlots( - root: EL, -): EL -/** - * Simulate slots in Custom Elements without using `shadowRoot`. - * @param el Custom Element root element - * @param body Body of the custom element - * */ -export function simulateSlots( - el: HTMLElement, - body: EL, -): EL - -export function dispatchEvent(name: keyof DocumentEventMap | string, element: SupportedElement): - (data?: any)=> void; -export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): - (element: SupportedElement, data?: any)=> void; -export function dispatchEvent( - name: keyof DocumentEventMap | string, - options: EventInit | null, - element: SupportedElement | (()=> SupportedElement) -): (data?: any)=> void; -interface On{ - /** Listens to the DOM event. See {@link Document.addEventListener} */ - < - Event extends keyof DocumentEventMap, - EE extends ddeElementAddon= ddeElementAddon, - >( - type: Event, - listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, - options?: AddEventListenerOptions - ) : EE; - < - EE extends ddeElementAddon= ddeElementAddon, - >( - type: string, - listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent ) => any, - options?: AddEventListenerOptions - ) : EE; - /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line - connected< - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ) - >( - listener: (this: El, event: CustomEvent) => any, - options?: AddEventListenerOptions - ) : EE; - /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line - disconnected< - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ) - >( - listener: (this: El, event: CustomEvent) => any, - options?: AddEventListenerOptions - ) : EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line - attributeChanged< - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ) - >( - listener: (this: El, event: CustomEvent<[ string, string ]>) => any, - options?: AddEventListenerOptions - ) : EE; -} -export const on: On; - -type Scope= { - scope: Node | Function | Object, - host: ddeElementAddon, - custom_element: false | HTMLElement, - prevent: boolean -}; -/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */ -export const scope: { - current: Scope, - /** Stops all automatizations. E. g. signals used as attributes in current scope - * registers removing these listeners (and clean signal if no other listeners are detected) - * on `disconnected` event. */ - preventDefault(prevent: T): T, - /** - * This represents reference to the current host element — `scope.host()`. - * It can be also used to register Addon(s) (functions to be called when component is initized) - * — `scope.host(on.connected(console.log))`. - * */ - host: (...addons: ddeElementAddon[])=> HTMLElement, - - state: Scope[], - /** Adds new child scope. All attributes are inherited by default. */ - push(scope?: Partial): ReturnType["push"]>, - /** Adds root scope as a child of the current scope. */ - pushRoot(): ReturnType["push"]>, - /** Removes last/current child scope. */ - pop(): ReturnType["pop"]>, -}; - -export function customElementRender< - EL extends HTMLElement, - P extends any = Record> ->( - target: ShadowRoot | EL, - render: (props: P)=> SupportedElement | DocumentFragment, - props?: P | ((el: EL)=> P) -): EL -export function customElementWithDDE HTMLElement)>(custom_element: EL): EL -export function lifecyclesToEvents HTMLElement)>(custom_element: EL): EL -export function observedAttributes(custom_element: HTMLElement): Record - -/** - * This is used primarly for server side rendering. To be sure that all async operations - * are finished before the page is sent to the client. - * ``` - * // on component - * function component(){ - * … - * queue(fetch(...).then(...)); - * } - * - * // building the page - * async function build(){ - * const { component }= await import("./component.js"); - * document.body.append(el(component)); - * await queue(); - * retutn document.body.innerHTML; - * } - * ``` - * */ -export function queue(promise?: Promise): Promise; - -/* TypeScript MEH */ -declare global{ - type ddeAppend= (...nodes: (Node | string)[])=> el; - - interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } - interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } - interface ddeSVGElement extends SVGElement{ append: ddeAppend; } - interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } - - interface ddeHTMLElementTagNameMap { - "a": ddeHTMLAnchorElement; - "area": ddeHTMLAreaElement; - "audio": ddeHTMLAudioElement; - "base": ddeHTMLBaseElement; - "blockquote": ddeHTMLQuoteElement; - "body": ddeHTMLBodyElement; - "br": ddeHTMLBRElement; - "button": ddeHTMLButtonElement; - "canvas": ddeHTMLCanvasElement; - "caption": ddeHTMLTableCaptionElement; - "col": ddeHTMLTableColElement; - "colgroup": ddeHTMLTableColElement; - "data": ddeHTMLDataElement; - "datalist": ddeHTMLDataListElement; - "del": ddeHTMLModElement; - "details": ddeHTMLDetailsElement; - "dialog": ddeHTMLDialogElement; - "div": ddeHTMLDivElement; - "dl": ddeHTMLDListElement; - "embed": ddeHTMLEmbedElement; - "fieldset": ddeHTMLFieldSetElement; - "form": ddeHTMLFormElement; - "h1": ddeHTMLHeadingElement; - "h2": ddeHTMLHeadingElement; - "h3": ddeHTMLHeadingElement; - "h4": ddeHTMLHeadingElement; - "h5": ddeHTMLHeadingElement; - "h6": ddeHTMLHeadingElement; - "head": ddeHTMLHeadElement; - "hr": ddeHTMLHRElement; - "html": ddeHTMLHtmlElement; - "iframe": ddeHTMLIFrameElement; - "img": ddeHTMLImageElement; - "input": ddeHTMLInputElement; - "ins": ddeHTMLModElement; - "label": ddeHTMLLabelElement; - "legend": ddeHTMLLegendElement; - "li": ddeHTMLLIElement; - "link": ddeHTMLLinkElement; - "map": ddeHTMLMapElement; - "menu": ddeHTMLMenuElement; - "meta": ddeHTMLMetaElement; - "meter": ddeHTMLMeterElement; - "object": ddeHTMLObjectElement; - "ol": ddeHTMLOListElement; - "optgroup": ddeHTMLOptGroupElement; - "option": ddeHTMLOptionElement; - "output": ddeHTMLOutputElement; - "p": ddeHTMLParagraphElement; - "picture": ddeHTMLPictureElement; - "pre": ddeHTMLPreElement; - "progress": ddeHTMLProgressElement; - "q": ddeHTMLQuoteElement; - "script": ddeHTMLScriptElement; - "select": ddeHTMLSelectElement; - "slot": ddeHTMLSlotElement; - "source": ddeHTMLSourceElement; - "span": ddeHTMLSpanElement; - "style": ddeHTMLStyleElement; - "table": ddeHTMLTableElement; - "tbody": ddeHTMLTableSectionElement; - "td": ddeHTMLTableCellElement; - "template": ddeHTMLTemplateElement; - "textarea": ddeHTMLTextAreaElement; - "tfoot": ddeHTMLTableSectionElement; - "th": ddeHTMLTableCellElement; - "thead": ddeHTMLTableSectionElement; - "time": ddeHTMLTimeElement; - "title": ddeHTMLTitleElement; - "tr": ddeHTMLTableRowElement; - "track": ddeHTMLTrackElement; - "ul": ddeHTMLUListElement; - "video": ddeHTMLVideoElement; - } - interface ddeSVGElementTagNameMap { - "a": ddeSVGAElement; - "animate": ddeSVGAnimateElement; - "animateMotion": ddeSVGAnimateMotionElement; - "animateTransform": ddeSVGAnimateTransformElement; - "circle": ddeSVGCircleElement; - "clipPath": ddeSVGClipPathElement; - "defs": ddeSVGDefsElement; - "desc": ddeSVGDescElement; - "ellipse": ddeSVGEllipseElement; - "feBlend": ddeSVGFEBlendElement; - "feColorMatrix": ddeSVGFEColorMatrixElement; - "feComponentTransfer": ddeSVGFEComponentTransferElement; - "feComposite": ddeSVGFECompositeElement; - "feConvolveMatrix": ddeSVGFEConvolveMatrixElement; - "feDiffuseLighting": ddeSVGFEDiffuseLightingElement; - "feDisplacementMap": ddeSVGFEDisplacementMapElement; - "feDistantLight": ddeSVGFEDistantLightElement; - "feDropShadow": ddeSVGFEDropShadowElement; - "feFlood": ddeSVGFEFloodElement; - "feFuncA": ddeSVGFEFuncAElement; - "feFuncB": ddeSVGFEFuncBElement; - "feFuncG": ddeSVGFEFuncGElement; - "feFuncR": ddeSVGFEFuncRElement; - "feGaussianBlur": ddeSVGFEGaussianBlurElement; - "feImage": ddeSVGFEImageElement; - "feMerge": ddeSVGFEMergeElement; - "feMergeNode": ddeSVGFEMergeNodeElement; - "feMorphology": ddeSVGFEMorphologyElement; - "feOffset": ddeSVGFEOffsetElement; - "fePointLight": ddeSVGFEPointLightElement; - "feSpecularLighting": ddeSVGFESpecularLightingElement; - "feSpotLight": ddeSVGFESpotLightElement; - "feTile": ddeSVGFETileElement; - "feTurbulence": ddeSVGFETurbulenceElement; - "filter": ddeSVGFilterElement; - "foreignObject": ddeSVGForeignObjectElement; - "g": ddeSVGGElement; - "image": ddeSVGImageElement; - "line": ddeSVGLineElement; - "linearGradient": ddeSVGLinearGradientElement; - "marker": ddeSVGMarkerElement; - "mask": ddeSVGMaskElement; - "metadata": ddeSVGMetadataElement; - "mpath": ddeSVGMPathElement; - "path": ddeSVGPathElement; - "pattern": ddeSVGPatternElement; - "polygon": ddeSVGPolygonElement; - "polyline": ddeSVGPolylineElement; - "radialGradient": ddeSVGRadialGradientElement; - "rect": ddeSVGRectElement; - "script": ddeSVGScriptElement; - "set": ddeSVGSetElement; - "stop": ddeSVGStopElement; - "style": ddeSVGStyleElement; - "svg": ddeSVGSVGElement; - "switch": ddeSVGSwitchElement; - "symbol": ddeSVGSymbolElement; - "text": ddeSVGTextElement; - "textPath": ddeSVGTextPathElement; - "title": ddeSVGTitleElement; - "tspan": ddeSVGTSpanElement; - "use": ddeSVGUseElement; - "view": ddeSVGViewElement; - } -} - -// editorconfig-checker-disable -interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } -interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } -interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } -interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend; } -interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend; } -interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend; } -interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend; } -interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend; } -interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend; } -interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend; } -interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } -interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } -interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend; } -interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend; } -interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend; } -interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend; } -interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend; } -interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend; } -interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend; } -interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend; } -interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend; } -interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend; } -interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend; } -interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend; } -interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend; } -interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend; } -interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend; } -interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend; } -interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend; } -interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend; } -interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend; } -interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend; } -interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend; } -interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend; } -interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend; } -interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend; } -interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend; } -interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend; } -interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend; } -interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend; } -interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend; } -interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend; } -interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend; } -interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend; } -interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend; } -interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend; } -interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend; } -interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend; } -interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend; } -interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend; } -interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend; } -interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend; } -interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend; } -interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend; } -interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } -interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend; } -interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend; } -interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } -interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend; } -interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend; } -interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend; } -interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend; } -interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend; } -interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend; } -interface ddeSVGAElement extends SVGAElement{ append: ddeAppend; } -interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend; } -interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend; } -interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend; } -interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend; } -interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend; } -interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend; } -interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend; } -interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend; } -interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend; } -interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend; } -interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend; } -interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend; } -interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend; } -interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend; } -interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend; } -interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend; } -interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend; } -interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend; } -interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend; } -interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend; } -interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend; } -interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend; } -interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend; } -interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend; } -interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend; } -interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend; } -interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend; } -interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend; } -interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend; } -interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend; } -interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend; } -interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend; } -interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend; } -interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend; } -interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend; } -interface ddeSVGGElement extends SVGGElement{ append: ddeAppend; } -interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend; } -interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend; } -interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend; } -interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend; } -interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend; } -interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend; } -interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend; } -interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend; } -interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend; } -interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend; } -interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend; } -interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend; } -interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend; } -interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend; } -interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend; } -interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend; } -interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend; } -interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend; } -interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend; } -interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend; } -interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend; } -interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend; } -interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend; } -interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend; } -interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } -interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } -// editorconfig-checker-enable \ No newline at end of file diff --git a/dist/esm.d.ts b/dist/esm.d.ts index 556e227..f736075 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -172,17 +172,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/esm.js b/dist/esm.js index fd33681..b3a6df8 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -26,38 +26,7 @@ function onAbort(signal, listener) { }; } -// src/signals-lib/common.js -var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } -}; -function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; -} -function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; -} - -// src/dom-common.js +// src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -83,7 +52,7 @@ var evc = "dde:connected"; var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; -// src/events-observer.js +// src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -247,7 +216,7 @@ function connectionsChangesObserverConstructor() { } } -// src/events.js +// src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -269,6 +238,7 @@ function on(event, listener, options) { return element; }; } +on.defer = (fn) => setTimeout.bind(null, fn, 0); var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true }); on.connected = function(listener, options) { options = lifeOptions(options); @@ -292,10 +262,7 @@ on.disconnected = function(listener, options) { }; }; -// src/dom.js -function queue(promise) { - return enviroment.q(promise); -} +// src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -370,6 +337,60 @@ var scope = { return scopes.pop(); } }; + +// src/signals-lib/common.js +var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } +}; +function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; +} +function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; +} + +// src/dom-lib/helpers.js +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); +} +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); +} +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); +} +function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); +} + +// src/dom-lib/el.js +function queue(promise) { + return enviroment.q(promise); +} function append(...els) { this.appendOriginal(...els); return this; @@ -385,7 +406,8 @@ function createElement(tag, attributes, ...addons) { const s = signals(this); let scoped = 0; let el, el_host; - if (Object(attributes) !== attributes || s.isSignal(attributes)) + const att_type = typeof attributes; + if (att_type === "string" || att_type === "number" || s.isSignal(attributes)) attributes = { textContent: attributes }; switch (true) { case typeof tag === "function": { @@ -439,38 +461,6 @@ function createElementNS(ns) { return el; }; } -function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; -} var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -533,11 +523,6 @@ function classListDeclarative(element, toggle) { ); return element; } -function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); -} function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -561,19 +546,40 @@ function forEachEntries(s, target, element, obj, cb) { cb(key, val); }); } -function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); -} -function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); -} -function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); -} -// src/customElement.js +// src/dom-lib/customElement.js +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; +} function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ @@ -662,7 +668,6 @@ export { dispatchEvent, createElement as el, createElementNS as elNS, - elementAttribute, lifecyclesToEvents, memo, on, diff --git a/dist/esm.min.d.ts b/dist/esm.min.d.ts index 556e227..f736075 100644 --- a/dist/esm.min.d.ts +++ b/dist/esm.min.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -172,17 +172,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/esm.min.js b/dist/esm.min.js index 8ae4fd8..f3aa4a7 100644 --- a/dist/esm.min.js +++ b/dist/esm.min.js @@ -1 +1 @@ -var $=(...t)=>Object.prototype.hasOwnProperty.call(...t);function _(t){return typeof t>"u"}function b(t,e){return t instanceof e}function U(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function D(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function j(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var A={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function Y(t,e=!0){return e?g(A,t):(Object.setPrototypeOf(t,A),t)}function L(t){return U(t,A)&&t!==A?t:A}var a={setDeleteAttr:tt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function tt(t,e,n){if(Reflect.set(t,e,n),!!_(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",v="dde:connected",w="dde:disconnected",H="dde:attributeChanged";var O=a.M?et():new Proxy({},{get(){return()=>{}}});function et(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function h(s){t.size>30&&await p();let u=[];if(!b(s,a.N))return u;for(let i of t.keys())i===s||!b(i,a.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let m of s){if(u&&h(m).then(l),!t.has(m))continue;let y=t.get(m);y.length_c&&(m.dispatchEvent(new Event(v)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(m),i=!0)}return i}function E(s,u){let i=!1;for(let m of s)u&&h(m).then(E),!(!t.has(m)||!t.get(m).length_d)&&((globalThis.queueMicrotask||setTimeout)(X(m)),i=!0);return i}function X(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function xt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function N(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var z=t=>g({},typeof t=="object"?t:null,{once:!0});N.connected=function(t,e){return e=z(e),function(r){return r.addEventListener(v,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(v)),r):(j(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};N.disconnected=function(t,e){return e=z(e),function(r){return r.addEventListener(w,t,e),r[C]||j(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};function At(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],q=new WeakMap,S={get current(){return x[x.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(N.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(g({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function B(...t){return this.appendOriginal(...t),this}function nt(t){return t.append===B||(t.appendOriginal=t.append,t.append=B),t}var T;function k(t,e,...n){let r=L(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;S.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let h=k.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(h),p&&(d=h);break}case t==="#text":c=R.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=R.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=R.call(this,a.D.createElementNS(T,t),e);break;case!c:c=R.call(this,a.D.createElement(t),e)}return nt(c),d||(d=c),n.forEach(f=>f(d)),o&&S.pop(),o=2,c}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function St(t){let e=this;return function(...r){T=t;let o=k.call(e,...r);return T=void 0,o}}function Dt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let h=(p.slot||"")+n;try{ot(p,"remove","slot")}catch{}let l=o[h];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+h),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var P=new WeakMap,{setDeleteAttr:Z}=a;function R(t,...e){if(!e.length)return t;P.set(t,V(t,this));for(let[n,r]of Object.entries(g({},...e)))J.call(this,t,n,r);return P.delete(t),t}function J(t,e,n){let{setRemoveAttr:r,s:o}=V(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>J.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return G(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return Z(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return W(o,e,t,n,G.bind(null,t[e]));case"ariaset":return W(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return rt.call(c,t,n)}return ct(t,e)?Z(t,e,n):r(e,n)}function V(t,e){if(P.has(t))return P.get(t);let r=(b(t,a.S)?it:st).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function rt(t,e){let n=L(this);return W(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function ot(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function ct(t,e){if(!(e in t))return!1;let n=K(t,e);return!_(n.set)}function K(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||K(t,e)}function W(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function st(t,e,n,r){return t[(_(r)?"remove":"set")+e](n,r)}function it(t,e,n,r,o=null){return t[(_(r)?"remove":"set")+e+"NS"](o,n,r)}function G(t,e,n){if(Reflect.set(t,e,n),!!_(n))return Reflect.deleteProperty(t,e)}function Pt(t,e,n={}){let r=t.host||t;S.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[C];o||ut(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(v)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(w,O.observe(t),{once:!0}),S.pop(),t.append(c)}function ut(t){return F(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(v))}),F(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(w)))}),F(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(H,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function F(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var Q="__dde_memo",M=[];function I(t,e){if(!M.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=M;return o(n,$(r,n)?r[n]:e(t))}I.isScope=function(t){return t[Q]};I.scope=function(e,{signal:n,onlyLast:r}={}){let o=D();function c(...d){if(n&&n.aborted)return e.apply(this,d);let f=r?o:D();M.unshift({cache:o,after(h,l){return f[h]=l}});let p=e.apply(this,d);return M.shift(),o=f,p}return c[Q]=!0,c.clear=()=>o=D(),n&&n.addEventListener("abort",c.clear),c};export{R as assign,J as assignAttribute,nt as chainableAppend,rt as classListDeclarative,k as createElement,St as createElementNS,Pt as customElementRender,ut as customElementWithDDE,xt as dispatchEvent,k as el,St as elNS,ot as elementAttribute,ut as lifecyclesToEvents,I as memo,N as on,At as queue,Y as registerReactivity,S as scope,Dt as simulateSlots}; +var H=(...t)=>Object.prototype.hasOwnProperty.call(...t);function x(t){return typeof t>"u"}function h(t,e){return t instanceof e}function z(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function R(t=null,e={}){return Object.create(t,e)}function v(...t){return Object.assign(...t)}function q(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var f={setDeleteAttr:nt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function nt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),h(t,f.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var O="__dde_lifecyclesToEvents",E="dde:connected",w="dde:disconnected",B="dde:attributeChanged";var y=f.M?rt():new Proxy({},{get(){return()=>{}}});function rt(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}g(i.removedNodes,!0)&&s()}},r=new f.M(n(a));return{observe(s){let u=new f.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){p();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){p();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),a())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function p(){e||(e=!0,r.observe(f.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function m(s){t.size>30&&await d();let u=[];if(!h(s,f.N))return u;for(let i of t.keys())i===s||!h(i,f.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let b of s){if(u&&m(b).then(l),!t.has(b))continue;let C=t.get(b);C.length_c&&(b.dispatchEvent(new Event(E)),C.connected=new WeakSet,C.length_c=0,C.length_d||t.delete(b),i=!0)}return i}function g(s,u){let i=!1;for(let b of s)u&&m(b).then(g),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(j(b)),i=!0);return i}function j(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function gt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let p=c.length?new CustomEvent(t,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(p)}}function S(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}S.defer=t=>setTimeout.bind(null,t,0);var Z=t=>v({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=Z(e),function(r){return r.addEventListener(E,t,e),r[O]?r:r.isConnected?(r.dispatchEvent(new Event(E)),r):(q(e.signal,()=>y.offConnected(r,t))&&y.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=Z(e),function(r){return r.addEventListener(w,t,e),r[O]||q(e.signal,()=>y.offDisconnected(r,t))&&y.onDisconnected(r,t),r}};var _=[{get scope(){return f.D.body},host:t=>t?t(f.D.body):f.D.body,prevent:!0}],W=new WeakMap,A={get current(){return _[_.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(W.has(t))return W.get(t);let e=new AbortController;return W.set(t,e),t(S.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[..._]},push(t={}){return _.push(v({},this.current,{prevent:!1},t))},pushRoot(){return _.push(_[0])},pop(){if(_.length!==1)return _.pop()}};var D={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function ot(t,e=!0){return e?v(D,t):(Object.setPrototypeOf(t,D),t)}function L(t){return z(t,D)&&t!==D?t:D}function G(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,r)}function J(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,r)}function k(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function V(t,e,n,r){return h(t,f.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Tt(t){return f.q(t)}function K(...t){return this.appendOriginal(...t),this}function ct(t){return t.append===K||(t.appendOriginal=t.append,t.append=K),t}var T;function F(t,e,...n){let r=L(this),o=0,c,p,a=typeof e;switch((a==="string"||a==="number"||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let d=(...g)=>g.length?(o===1?n.unshift(...g):g.forEach(j=>j(p)),void 0):p;A.push({scope:t,host:d}),c=t(e||void 0);let m=h(c,f.F);if(c.nodeName==="#comment")break;let l=F.mark({type:"component",name:t.name,host:m?"this":"parentElement"});c.prepend(l),m&&(p=l);break}case t==="#text":c=N.call(this,f.D.createTextNode(""),e);break;case(t==="<>"||!t):c=N.call(this,f.D.createDocumentFragment(),e);break;case!!T:c=N.call(this,f.D.createElementNS(T,t),e);break;case!c:c=N.call(this,f.D.createElement(t),e)}return ct(c),p||(p=c),n.forEach(d=>d(p)),o&&A.pop(),o=2,c}F.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=f.D.createComment(``);return e&&(r.end=f.D.createComment("")),r};function Mt(t){let e=this;return function(...r){T=t;let o=F.call(e,...r);return T=void 0,o}}var P=new WeakMap,{setDeleteAttr:Q}=f;function N(t,...e){if(!e.length)return t;P.set(t,Y(t,this));for(let[n,r]of Object.entries(v({},...e)))X.call(this,t,n,r);return P.delete(t),t}function X(t,e,n){let{setRemoveAttr:r,s:o}=Y(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>X.call(c,t,a,d));let[p]=e;if(p==="=")return r(e.slice(1),n);if(p===".")return k(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return Q(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return I(o,e,t,n,k.bind(null,t[e]));case"ariaset":return I(o,e,t,n,(a,d)=>r("aria-"+a,d));case"classList":return st.call(c,t,n)}return it(t,e)?Q(t,e,n):r(e,n)}function Y(t,e){if(P.has(t))return P.get(t);let r=(h(t,f.S)?J:G).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function st(t,e){let n=L(this);return I(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function it(t,e){if(!(e in t))return!1;let n=tt(t,e);return!x(n.set)}function tt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||tt(t,e)}function I(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([a,d]){a&&(a=new c(a),a.target=e,d=t.processReactiveAttribute(n,a,d,o),o(a,d))})}function $t(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,p,a){if(a[0]===e)return c.apply(t,a);for(let d of a){let m=(d.slot||"")+n;try{V(d,"remove","slot")}catch{}let l=o[m];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(g=>g.remove()),l.name=r+m),l.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function Ht(t,e,n={}){let r=t.host||t;A.push({scope:r,host:(...p)=>p.length?p.forEach(a=>a(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[O];o||ut(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(E)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(w,y.observe(t),{once:!0}),A.pop(),t.append(c)}function ut(t){return U(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(E))}),U(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(w)))}),U(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(B,{detail:[o,c]})),e.apply(n,r)}),t.prototype[O]=!0,t}function U(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var et="__dde_memo",M=[];function $(t,e){if(!M.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=M;return o(n,H(r,n)?r[n]:e(t))}$.isScope=function(t){return t[et]};$.scope=function(e,{signal:n,onlyLast:r}={}){let o=R();function c(...p){if(n&&n.aborted)return e.apply(this,p);let a=r?o:R();M.unshift({cache:o,after(m,l){return a[m]=l}});let d=e.apply(this,p);return M.shift(),o=a,d}return c[et]=!0,c.clear=()=>o=R(),n&&n.addEventListener("abort",c.clear),c};export{N as assign,X as assignAttribute,ct as chainableAppend,st as classListDeclarative,F as createElement,Mt as createElementNS,Ht as customElementRender,ut as customElementWithDDE,gt as dispatchEvent,F as el,Mt as elNS,ut as lifecyclesToEvents,$ as memo,S as on,Tt as queue,ot as registerReactivity,A as scope,$t as simulateSlots}; diff --git a/dist/iife-with-signals.d.ts b/dist/iife-with-signals.d.ts index ec30620..61211f3 100644 --- a/dist/iife-with-signals.d.ts +++ b/dist/iife-with-signals.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -173,17 +173,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/iife-with-signals.js b/dist/iife-with-signals.js index c77ab02..3aca9c7 100644 --- a/dist/iife-with-signals.js +++ b/dist/iife-with-signals.js @@ -32,7 +32,6 @@ var DDE = (() => { dispatchEvent: () => dispatchEvent, el: () => createElement, elNS: () => createElementNS, - elementAttribute: () => elementAttribute, isSignal: () => isSignal, lifecyclesToEvents: () => lifecyclesToEvents, memo: () => memo, @@ -101,38 +100,7 @@ var DDE = (() => { } }; - // src/signals-lib/common.js - var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } - }; - function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; - } - function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; - } - - // src/dom-common.js + // src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -158,7 +126,7 @@ var DDE = (() => { var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; - // src/events-observer.js + // src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -322,7 +290,7 @@ var DDE = (() => { } } - // src/events.js + // src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -344,6 +312,7 @@ var DDE = (() => { return element; }; } + on.defer = (fn) => setTimeout.bind(null, fn, 0); var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true }); on.connected = function(listener, options) { options = lifeOptions(options); @@ -367,10 +336,7 @@ var DDE = (() => { }; }; - // src/dom.js - function queue(promise) { - return enviroment.q(promise); - } + // src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -445,6 +411,60 @@ var DDE = (() => { return scopes.pop(); } }; + + // src/signals-lib/common.js + var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } + }; + function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; + } + function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; + } + + // src/dom-lib/helpers.js + function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); + } + function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); + } + function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); + } + function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); + } + + // src/dom-lib/el.js + function queue(promise) { + return enviroment.q(promise); + } function append(...els) { this.appendOriginal(...els); return this; @@ -460,7 +480,8 @@ var DDE = (() => { const s = signals(this); let scoped = 0; let el, el_host; - if (Object(attributes) !== attributes || s.isSignal(attributes)) + const att_type = typeof attributes; + if (att_type === "string" || att_type === "number" || s.isSignal(attributes)) attributes = { textContent: attributes }; switch (true) { case typeof tag === "function": { @@ -514,38 +535,6 @@ var DDE = (() => { return el; }; } - function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; - } var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -608,11 +597,6 @@ var DDE = (() => { ); return element; } - function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); - } function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -636,19 +620,40 @@ var DDE = (() => { cb(key, val); }); } - function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); - } - function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); - } - function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); - } - // src/customElement.js + // src/dom-lib/customElement.js + function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; + } function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ @@ -729,19 +734,19 @@ var DDE = (() => { // src/signals-lib/helpers.js var mark = "__dde_signal"; var queueSignalWrite = /* @__PURE__ */ (() => { - let pendingSignals = /* @__PURE__ */ new Set(); + let pendingSignals = /* @__PURE__ */ new Map(); let scheduled = false; function flushSignals() { scheduled = false; const todo = pendingSignals; - pendingSignals = /* @__PURE__ */ new Set(); - for (const signal2 of todo) { + pendingSignals = /* @__PURE__ */ new Map(); + for (const [signal2, force] of todo) { const M = signal2[mark]; - if (M) M.listeners.forEach((l) => l(M.value)); + if (M) M.listeners.forEach((l) => l(M.value, force)); } } - return function(s) { - pendingSignals.add(s); + return function(s, force = false) { + pendingSignals.set(s, pendingSignals.get(s) || force); if (scheduled) return; scheduled = true; queueMicrotask(flushSignals); @@ -778,11 +783,11 @@ var DDE = (() => { return create(false, value, actions); if (isSignal(value)) return value; const out = create(true); - function contextReWatch() { + function contextReWatch(_, force) { const [origin, ...deps_old] = deps.get(contextReWatch); deps.set(contextReWatch, /* @__PURE__ */ new Set([origin])); stack_watch.push(contextReWatch); - write(out, value()); + write(out, value(), force); stack_watch.pop(); if (!deps_old.length) return; const deps_curr = deps.get(contextReWatch); @@ -804,7 +809,7 @@ var DDE = (() => { throw new Error(`Action "${name}" not defined. See ${mark}.actions.`); actions[name].apply(M, a); if (M.skip) return delete M.skip; - queueSignalWrite(s); + queueSignalWrite(s, true); }; signal.on = function on2(s, listener, options = {}) { const { signal: as } = options; @@ -1013,7 +1018,7 @@ var DDE = (() => { const M = s[mark]; if (!M || !force && M.value === value) return; M.value = value; - queueSignalWrite(s); + queueSignalWrite(s, force); return value; } function addSignalListener(s, listener) { diff --git a/dist/iife-with-signals.min.d.ts b/dist/iife-with-signals.min.d.ts index ec30620..61211f3 100644 --- a/dist/iife-with-signals.min.d.ts +++ b/dist/iife-with-signals.min.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -173,17 +173,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/iife-with-signals.min.js b/dist/iife-with-signals.min.js index 89e4a86..c73e3bf 100644 --- a/dist/iife-with-signals.min.js +++ b/dist/iife-with-signals.min.js @@ -1,4 +1,4 @@ -var DDE=(()=>{var G=Object.defineProperty;var At=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var Ct=Object.prototype.hasOwnProperty;var Dt=(t,e)=>{for(var n in e)G(t,n,{get:e[n],enumerable:!0})},Rt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Ot(e))!Ct.call(t,o)&&o!==n&&G(t,o,{get:()=>e[o],enumerable:!(r=At(e,o))||r.enumerable});return t};var Lt=t=>Rt(G({},"__esModule",{value:!0}),t);var Vt={};Dt(Vt,{S:()=>m,assign:()=>W,assignAttribute:()=>X,chainableAppend:()=>dt,classListDeclarative:()=>pt,createElement:()=>M,createElementNS:()=>jt,customElementRender:()=>$t,customElementWithDDE:()=>mt,dispatchEvent:()=>Mt,el:()=>M,elNS:()=>jt,elementAttribute:()=>ht,isSignal:()=>F,lifecyclesToEvents:()=>mt,memo:()=>L,on:()=>w,queue:()=>Pt,registerReactivity:()=>$,scope:()=>b,signal:()=>m,simulateSlots:()=>qt});var I=(...t)=>Object.prototype.hasOwnProperty.call(...t);function C(t){return typeof t>"u"}function ot(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){return t instanceof e}function ct(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function x(t=null,e={}){return Object.create(t,e)}function E(...t){return Object.assign(...t)}function V(t,e){if(!t||!S(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function st(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Nt(o)]=e(t,o),r},{})}function Nt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var j=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var q={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function $(t,e=!0){return e?E(q,t):(Object.setPrototypeOf(t,q),t)}function U(t){return ct(t,q)&&t!==q?t:q}var l={setDeleteAttr:kt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function kt(t,e,n){if(Reflect.set(t,e,n),!!C(n)){if(Reflect.deleteProperty(t,e),S(t,l.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var T="__dde_lifecyclesToEvents",y="dde:connected",D="dde:disconnected",z="dde:attributeChanged";var R=l.M?Tt():new Proxy({},{get(){return()=>{}}});function Tt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}O(f.removedNodes,!0)&&u()}},r=new l.M(n(i));return{observe(u){let a=new l.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(l.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function g(u){t.size>30&&await d();let a=[];if(!S(u,l.N))return a;for(let f of t.keys())f===u||!S(f,l.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&g(_).then(h),!t.has(_))continue;let P=t.get(_);P.length_c&&(_.dispatchEvent(new Event(y)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(_),f=!0)}return f}function O(u,a){let f=!1;for(let _ of u)a&&g(_).then(O),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(yt(_)),f=!0);return f}function yt(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(D)),t.delete(u))}}}function Mt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,E({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var it=t=>E({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=it(e),function(r){return r.addEventListener(y,t,e),r[T]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(V(e.signal,()=>R.offConnected(r,t))&&R.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=it(e),function(r){return r.addEventListener(D,t,e),r[T]||V(e.signal,()=>R.offDisconnected(r,t))&&R.onDisconnected(r,t),r}};function Pt(t){return l.q(t)}var A=[{get scope(){return l.D.body},host:t=>t?t(l.D.body):l.D.body,prevent:!0}],K=new WeakMap,b={get current(){return A[A.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(K.has(t))return K.get(t);let e=new AbortController;return K.set(t,e),t(w.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...A]},push(t={}){return A.push(E({},this.current,{prevent:!1},t))},pushRoot(){return A.push(A[0])},pop(){if(A.length!==1)return A.pop()}};function ut(...t){return this.appendOriginal(...t),this}function dt(t){return t.append===ut||(t.appendOriginal=t.append,t.append=ut),t}var H;function M(t,e,...n){let r=U(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(O=>O(s)),void 0):s;b.push({scope:t,host:i}),c=t(e||void 0);let d=S(c,l.F);if(c.nodeName==="#comment")break;let g=M.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(g),d&&(s=g);break}case t==="#text":c=W.call(this,l.D.createTextNode(""),e);break;case(t==="<>"||!t):c=W.call(this,l.D.createDocumentFragment(),e);break;case!!H:c=W.call(this,l.D.createElementNS(H,t),e);break;case!c:c=W.call(this,l.D.createElement(t),e)}return dt(c),s||(s=c),n.forEach(i=>i(s)),o&&b.pop(),o=2,c}M.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=l.D.createComment(``);return e&&(r.end=l.D.createComment("")),r};function jt(t){let e=this;return function(...r){H=t;let o=M.call(e,...r);return H=void 0,o}}function qt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let d of i){let g=(d.slot||"")+n;try{ht(d,"remove","slot")}catch{}let h=o[g];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(O=>O.remove()),h.name=r+g),h.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var J=new WeakMap,{setDeleteAttr:ft}=l;function W(t,...e){if(!e.length)return t;J.set(t,lt(t,this));for(let[n,r]of Object.entries(E({},...e)))X.call(this,t,n,r);return J.delete(t),t}function X(t,e,n){let{setRemoveAttr:r,s:o}=lt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,d)=>X.call(c,t,i,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return at(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return ft(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Q(o,e,t,n,at.bind(null,t[e]));case"ariaset":return Q(o,e,t,n,(i,d)=>r("aria-"+i,d));case"classList":return pt.call(c,t,n)}return Wt(t,e)?ft(t,e,n):r(e,n)}function lt(t,e){if(J.has(t))return J.get(t);let r=(S(t,l.S)?It:Ft).bind(null,t,"Attribute"),o=U(e);return{setRemoveAttr:r,s:o}}function pt(t,e){let n=U(this);return Q(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function ht(t,e,n,r){return S(t,l.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Wt(t,e){if(!(e in t))return!1;let n=gt(t,e);return!C(n.set)}function gt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||gt(t,e)}function Q(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,d]){i&&(i=new c(i),i.target=e,d=t.processReactiveAttribute(n,i,d,o),o(i,d))})}function Ft(t,e,n,r){return t[(C(r)?"remove":"set")+e](n,r)}function It(t,e,n,r,o=null){return t[(C(r)?"remove":"set")+e+"NS"](o,n,r)}function at(t,e,n){if(Reflect.set(t,e,n),!!C(n))return Reflect.deleteProperty(t,e)}function $t(t,e,n={}){let r=t.host||t;b.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[T];o||mt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(D,R.observe(t),{once:!0}),b.pop(),t.append(c)}function mt(t){return Y(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),Y(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(D)))}),Y(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(z,{detail:[o,c]})),e.apply(n,r)}),t.prototype[T]=!0,t}function Y(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var bt="__dde_memo",B=[];function L(t,e){if(!B.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=B;return o(n,I(r,n)?r[n]:e(t))}L.isScope=function(t){return t[bt]};L.scope=function(e,{signal:n,onlyLast:r}={}){let o=x();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:x();B.unshift({cache:o,after(g,h){return i[g]=h}});let d=e.apply(this,s);return B.shift(),o=i,d}return c[bt]=!0,c.clear=()=>o=x(),n&&n.addEventListener("abort",c.clear),c};var p="__dde_signal",tt=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var nt=x(null,{get:{value(){return xt(this)}},set:{value(...t){return wt(this,...t)}},toJSON:{value(){return xt(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),Ut=x(nt,{set:{value(){}}});function F(t){return t&&t[p]}var Z=[],v=new WeakMap;function m(t,e){if(typeof t!="function")return vt(!1,t,e);if(F(t))return t;let n=vt(!0);function r(){let[o,...c]=v.get(r);if(v.set(r,new Set([o])),Z.push(r),wt(n,t()),Z.pop(),!c.length)return;let s=v.get(r);for(let i of c)s.has(i)||k(i,r)}return v.set(n[p],r),v.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!I(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t)};m.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));rt(e,n),o&&o.addEventListener("abort",()=>k(e,n))}};m.symbols={onclear:Symbol.for("Signal.onclear")};m.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!v.has(o))return;let c=v.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),v.delete(o))})}};var N="__dde_reactive";m.el=function(t,e){e=L.isScope(e)?e:L.scope(e,{onlyLast:!0});let n=M.mark({type:"reactive",source:new j().compact},!0),r=n.end,o=l.D.createDocumentFragment();o.append(n,r);let{current:c}=b,s=i=>{if(!n.parentNode||!r.parentNode)return k(t,s);b.push(c);let d=e(i);b.pop(),Array.isArray(d)||(d=[d]);let g=document.createComment("");d.push(g),n.after(...d);let h;for(;(h=g.nextSibling)&&h!==r;)h.remove();g.remove(),n.isConnected&&zt(c.host())};return rt(t,s),_t(t,s,n,e),s(t.get()),c.host(w.disconnected(()=>e.clear())),o};function zt(t){!t||!t[N]||(requestIdleCallback||setTimeout)(function(){t[N]=t[N].filter(([e,n])=>n.isConnected?!0:(k(...e),!1))})}var Ht={_set(t){this.value=t}};function Jt(t){return function(e,n){let r=x(nt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=St(r,e.getAttribute(n),Ht);return t[n]=o,o}}var et="__dde_attributes";m.observedAttributes=function(t){let e=t[et]={},n=st(t,Jt(e));return w(z,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[et][c];if(i)return m.action(i,"_set",s)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */m.clear(...Object.values(this[et]))})(t),n};var Et={isSignal:F,processReactiveAttribute(t,e,n,r){if(!F(n))return n;let o=c=>{if(!t.isConnected)return k(n,o);r(e,c)};return rt(n,o),_t(n,o,t,e),n.get()}};function _t(t,e,...n){let{current:r}=b;r.host(function(o){if(o[N])return o[N].push([[t,e],...n]);o[N]=[],!r.prevent&&w.disconnected(()=>o[N].forEach(([[c,s]])=>k(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Bt=new FinalizationRegistry(function(t){m.clear({[p]:t})});function vt(t,e,n){let r=x(t?Ut:nt),o=St(r,e,n,t);return Bt.register(o,o[p]),o}var Zt=E(x(),{stopPropagation(){this.skip=!0}});function St(t,e,n,r=!1){let o=[];ot(n)!=="[object Object]"&&(n={});let{onclear:c}=m.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=b;return Reflect.defineProperty(t,p,{value:E(x(Zt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new j().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Gt(){return Z[Z.length-1]}function xt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=Gt();return r&&n.add(r),v.has(r)&&v.get(r).add(t),e}function wt(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,tt(t),e}function rt(t,e){if(t[p])return t[p].listeners.add(e)}function k(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;m.clear(t);let s=v.get(r);if(!s)return c;let i=v.get(s);if(!i)return c;for(let d of i)k(d,s,!0);return c}$(Et);return Lt(Vt);})(); +var DDE=(()=>{var V=Object.defineProperty;var Ot=Object.getOwnPropertyDescriptor;var Rt=Object.getOwnPropertyNames;var Dt=Object.prototype.hasOwnProperty;var Lt=(t,e)=>{for(var n in e)V(t,n,{get:e[n],enumerable:!0})},Nt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Rt(e))!Dt.call(t,o)&&o!==n&&V(t,o,{get:()=>e[o],enumerable:!(r=Ot(e,o))||r.enumerable});return t};var kt=t=>Nt(V({},"__esModule",{value:!0}),t);var Vt={};Lt(Vt,{S:()=>g,assign:()=>W,assignAttribute:()=>tt,chainableAppend:()=>mt,classListDeclarative:()=>vt,createElement:()=>T,createElementNS:()=>Wt,customElementRender:()=>Ut,customElementWithDDE:()=>xt,dispatchEvent:()=>qt,el:()=>T,elNS:()=>Wt,isSignal:()=>F,lifecyclesToEvents:()=>xt,memo:()=>L,on:()=>S,queue:()=>jt,registerReactivity:()=>$,scope:()=>v,signal:()=>g,simulateSlots:()=>It});var I=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function st(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function E(t,e){return t instanceof e}function it(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function _(t=null,e={}){return Object.create(t,e)}function b(...t){return Object.assign(...t)}function K(t,e){if(!t||!E(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function ut(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Mt(o)]=e(t,o),r},{})}function Mt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var q=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var d={setDeleteAttr:Tt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Tt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),E(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var M="__dde_lifecyclesToEvents",C="dde:connected",R="dde:disconnected",U="dde:attributeChanged";var D=d.M?Pt():new Proxy({},{get(){return()=>{}}});function Pt(){let t=new Map,e=!1,n=u=>function(p){for(let f of p)if(f.type==="childList"){if(m(f.addedNodes,!0)){u();continue}y(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let p=new d.M(n(()=>{}));return p.observe(u,{childList:!0,subtree:!0}),()=>p.disconnect()},onConnected(u,p){s();let f=c(u);f.connected.has(p)||(f.connected.add(p),f.length_c+=1)},offConnected(u,p){if(!t.has(u))return;let f=t.get(u);f.connected.has(p)&&(f.connected.delete(p),f.length_c-=1,o(u,f))},onDisconnected(u,p){s();let f=c(u);f.disconnected.has(p)||(f.disconnected.add(p),f.length_d+=1)},offDisconnected(u,p){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(p),f.length_d-=1,o(u,f)}};function o(u,p){p.length_c||p.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let p={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,p),p}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function a(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function h(u){t.size>30&&await a();let p=[];if(!E(u,d.N))return p;for(let f of t.keys())f===u||!E(f,d.N)||u.contains(f)&&p.push(f);return p}function m(u,p){let f=!1;for(let w of u){if(p&&h(w).then(m),!t.has(w))continue;let P=t.get(w);P.length_c&&(w.dispatchEvent(new Event(C)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(w),f=!0)}return f}function y(u,p){let f=!1;for(let w of u)p&&h(w).then(y),!(!t.has(w)||!t.get(w).length_d)&&((globalThis.queueMicrotask||setTimeout)(G(w)),f=!0);return f}function G(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function qt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,b({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function S(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}S.defer=t=>setTimeout.bind(null,t,0);var ft=t=>b({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=ft(e),function(r){return r.addEventListener(C,t,e),r[M]?r:r.isConnected?(r.dispatchEvent(new Event(C)),r):(K(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=ft(e),function(r){return r.addEventListener(R,t,e),r[M]||K(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],Q=new WeakMap,v={get current(){return O[O.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(Q.has(t))return Q.get(t);let e=new AbortController;return Q.set(t,e),t(S.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.push(b({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function $(t,e=!0){return e?b(j,t):(Object.setPrototypeOf(t,j),t)}function z(t){return it(t,j)&&t!==j?t:j}function at(t,e,n,r){return t[(A(r)?"remove":"set")+e](n,r)}function pt(t,e,n,r,o=null){return t[(A(r)?"remove":"set")+e+"NS"](o,n,r)}function X(t,e,n){if(Reflect.set(t,e,n),!!A(n))return Reflect.deleteProperty(t,e)}function dt(t,e,n,r){return E(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function jt(t){return d.q(t)}function lt(...t){return this.appendOriginal(...t),this}function mt(t){return t.append===lt||(t.appendOriginal=t.append,t.append=lt),t}var H;function T(t,e,...n){let r=z(this),o=0,c,s,i=typeof e;switch((i==="string"||i==="number"||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let a=(...y)=>y.length?(o===1?n.unshift(...y):y.forEach(G=>G(s)),void 0):s;v.push({scope:t,host:a}),c=t(e||void 0);let h=E(c,d.F);if(c.nodeName==="#comment")break;let m=T.mark({type:"component",name:t.name,host:h?"this":"parentElement"});c.prepend(m),h&&(s=m);break}case t==="#text":c=W.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=W.call(this,d.D.createDocumentFragment(),e);break;case!!H:c=W.call(this,d.D.createElementNS(H,t),e);break;case!c:c=W.call(this,d.D.createElement(t),e)}return mt(c),s||(s=c),n.forEach(a=>a(s)),o&&v.pop(),o=2,c}T.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(``);return e&&(r.end=d.D.createComment("")),r};function Wt(t){let e=this;return function(...r){H=t;let o=T.call(e,...r);return H=void 0,o}}var J=new WeakMap,{setDeleteAttr:ht}=d;function W(t,...e){if(!e.length)return t;J.set(t,gt(t,this));for(let[n,r]of Object.entries(b({},...e)))tt.call(this,t,n,r);return J.delete(t),t}function tt(t,e,n){let{setRemoveAttr:r,s:o}=gt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,a)=>tt.call(c,t,i,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return X(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return ht(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Y(o,e,t,n,X.bind(null,t[e]));case"ariaset":return Y(o,e,t,n,(i,a)=>r("aria-"+i,a));case"classList":return vt.call(c,t,n)}return Ft(t,e)?ht(t,e,n):r(e,n)}function gt(t,e){if(J.has(t))return J.get(t);let r=(E(t,d.S)?pt:at).bind(null,t,"Attribute"),o=z(e);return{setRemoveAttr:r,s:o}}function vt(t,e){let n=z(this);return Y(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ft(t,e){if(!(e in t))return!1;let n=bt(t,e);return!A(n.set)}function bt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||bt(t,e)}function Y(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,a]){i&&(i=new c(i),i.target=e,a=t.processReactiveAttribute(n,i,a,o),o(i,a))})}function It(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let a of i){let h=(a.slot||"")+n;try{dt(a,"remove","slot")}catch{}let m=o[h];if(!m)return;m.name.startsWith(r)||(m.childNodes.forEach(y=>y.remove()),m.name=r+h),m.append(a)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function Ut(t,e,n={}){let r=t.host||t;v.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[M];o||xt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(C)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,D.observe(t),{once:!0}),v.pop(),t.append(c)}function xt(t){return et(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(C))}),et(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),et(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(U,{detail:[o,c]})),e.apply(n,r)}),t.prototype[M]=!0,t}function et(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var Et="__dde_memo",B=[];function L(t,e){if(!B.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=B;return o(n,I(r,n)?r[n]:e(t))}L.isScope=function(t){return t[Et]};L.scope=function(e,{signal:n,onlyLast:r}={}){let o=_();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:_();B.unshift({cache:o,after(h,m){return i[h]=m}});let a=e.apply(this,s);return B.shift(),o=i,a}return c[Et]=!0,c.clear=()=>o=_(),n&&n.addEventListener("abort",c.clear),c};var l="__dde_signal",nt=(()=>{let t=new Map,e=!1;function n(){e=!1;let r=t;t=new Map;for(let[o,c]of r){let s=o[l];s&&s.listeners.forEach(i=>i(s.value,c))}}return function(r,o=!1){t.set(r,t.get(r)||o),!e&&(e=!0,queueMicrotask(n))}})();var ot=_(null,{get:{value(){return St(this)}},set:{value(...t){return Ct(this,...t)}},toJSON:{value(){return St(this)}},valueOf:{value(){return this[l]&&this[l].value}}}),$t=_(ot,{set:{value(){}}});function F(t){return t&&t[l]}var Z=[],x=new WeakMap;function g(t,e){if(typeof t!="function")return _t(!1,t,e);if(F(t))return t;let n=_t(!0);function r(o,c){let[s,...i]=x.get(r);if(x.set(r,new Set([s])),Z.push(r),Ct(n,t(),c),Z.pop(),!i.length)return;let a=x.get(r);for(let h of i)a.has(h)||k(h,r)}return x.set(n[l],r),x.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[l];if(!r)return;let{actions:o}=r;if(!o||!I(o,e))throw new Error(`Action "${e}" not defined. See ${l}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;nt(t,!0)};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));ct(e,n),o&&o.addEventListener("abort",()=>k(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[l];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[l])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!x.has(o))return;let c=x.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),x.delete(o))})}};var N="__dde_reactive";g.el=function(t,e){e=L.isScope(e)?e:L.scope(e,{onlyLast:!0});let n=T.mark({type:"reactive",source:new q().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=v,s=i=>{if(!n.parentNode||!r.parentNode)return k(t,s);v.push(c);let a=e(i);v.pop(),Array.isArray(a)||(a=[a]);let h=document.createComment("");a.push(h),n.after(...a);let m;for(;(m=h.nextSibling)&&m!==r;)m.remove();h.remove(),n.isConnected&&zt(c.host())};return ct(t,s),yt(t,s,n,e),s(t.get()),c.host(S.disconnected(()=>e.clear())),o};function zt(t){!t||!t[N]||(requestIdleCallback||setTimeout)(function(){t[N]=t[N].filter(([e,n])=>n.isConnected?!0:(k(...e),!1))})}var Ht={_set(t){this.value=t}};function Jt(t){return function(e,n){let r=_(ot,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=At(r,e.getAttribute(n),Ht);return t[n]=o,o}}var rt="__dde_attributes";g.observedAttributes=function(t){let e=t[rt]={},n=ut(t,Jt(e));return S(U,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). + Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[rt][c];if(i)return g.action(i,"_set",s)})(t),S.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). + Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[rt]))})(t),n};var wt={isSignal:F,processReactiveAttribute(t,e,n,r){if(!F(n))return n;let o=c=>{if(!t.isConnected)return k(n,o);r(e,c)};return ct(n,o),yt(n,o,t,e),n.get()}};function yt(t,e,...n){let{current:r}=v;r.host(function(o){if(o[N])return o[N].push([[t,e],...n]);o[N]=[],!r.prevent&&S.disconnected(()=>o[N].forEach(([[c,s]])=>k(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Bt=new FinalizationRegistry(function(t){g.clear({[l]:t})});function _t(t,e,n){let r=_(t?$t:ot),o=At(r,e,n,t);return Bt.register(o,o[l]),o}var Zt=b(_(),{stopPropagation(){this.skip=!0}});function At(t,e,n,r=!1){let o=[];st(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=v;return Reflect.defineProperty(t,l,{value:b(_(Zt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new q().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Gt(){return Z[Z.length-1]}function St(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=Gt();return r&&n.add(r),x.has(r)&&x.get(r).add(t),e}function Ct(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,nt(t,n),e}function ct(t,e){if(t[l])return t[l].listeners.add(e)}function k(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=x.get(r);if(!s)return c;let i=x.get(s);if(!i)return c;for(let a of i)k(a,s,!0);return c}$(wt);return kt(Vt);})(); diff --git a/dist/iife.d.ts b/dist/iife.d.ts index df4075e..831ad80 100644 --- a/dist/iife.d.ts +++ b/dist/iife.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -172,17 +172,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/iife.js b/dist/iife.js index a1a2081..cc35cdd 100644 --- a/dist/iife.js +++ b/dist/iife.js @@ -31,7 +31,6 @@ var DDE = (() => { dispatchEvent: () => dispatchEvent, el: () => createElement, elNS: () => createElementNS, - elementAttribute: () => elementAttribute, lifecyclesToEvents: () => lifecyclesToEvents, memo: () => memo, on: () => on, @@ -69,38 +68,7 @@ var DDE = (() => { }; } - // src/signals-lib/common.js - var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } - }; - function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; - } - function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; - } - - // src/dom-common.js + // src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -126,7 +94,7 @@ var DDE = (() => { var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; - // src/events-observer.js + // src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -290,7 +258,7 @@ var DDE = (() => { } } - // src/events.js + // src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -312,6 +280,7 @@ var DDE = (() => { return element; }; } + on.defer = (fn) => setTimeout.bind(null, fn, 0); var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true }); on.connected = function(listener, options) { options = lifeOptions(options); @@ -335,10 +304,7 @@ var DDE = (() => { }; }; - // src/dom.js - function queue(promise) { - return enviroment.q(promise); - } + // src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -413,6 +379,60 @@ var DDE = (() => { return scopes.pop(); } }; + + // src/signals-lib/common.js + var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } + }; + function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; + } + function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; + } + + // src/dom-lib/helpers.js + function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); + } + function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); + } + function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); + } + function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); + } + + // src/dom-lib/el.js + function queue(promise) { + return enviroment.q(promise); + } function append(...els) { this.appendOriginal(...els); return this; @@ -428,7 +448,8 @@ var DDE = (() => { const s = signals(this); let scoped = 0; let el, el_host; - if (Object(attributes) !== attributes || s.isSignal(attributes)) + const att_type = typeof attributes; + if (att_type === "string" || att_type === "number" || s.isSignal(attributes)) attributes = { textContent: attributes }; switch (true) { case typeof tag === "function": { @@ -482,38 +503,6 @@ var DDE = (() => { return el; }; } - function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; - } var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -576,11 +565,6 @@ var DDE = (() => { ); return element; } - function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); - } function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -604,19 +588,40 @@ var DDE = (() => { cb(key, val); }); } - function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); - } - function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); - } - function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); - } - // src/customElement.js + // src/dom-lib/customElement.js + function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; + } function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ diff --git a/dist/iife.min.d.ts b/dist/iife.min.d.ts index df4075e..831ad80 100644 --- a/dist/iife.min.d.ts +++ b/dist/iife.min.d.ts @@ -4,7 +4,7 @@ export interface Signal { /** The current value of the signal */ get(): V; /** Set new value of the signal */ - set(value: V): V; + set(value: V, force?: boolean): V; toJSON(): V; valueOf(): V; } @@ -172,17 +172,30 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options? declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host): (data?: any) => void; export interface On { /** Listens to the DOM event. See {@link Document.addEventListener} */ - = ddeElementAddon>(type: Event, listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; + (type: Event, listener: (this: EL, ev: DocumentEventMap[Event] & { + target: EL; + }) => any, options?: AddEventListenerOptions): ddeElementAddon; = ddeElementAddon>(type: string, listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; + connected(listener: (this: EL, event: CustomEvent>) => any, options?: AddEventListenerOptions): ddeElementAddon; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + disconnected(listener: (this: EL, event: CustomEvent) => any, options?: AddEventListenerOptions): ddeElementAddon; + /** + * Fires after the next tick of the Javascript event loop. + * This is handy for example to apply some property depending on the element content: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.defer(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + defer(listener: (element: EL) => any): ddeElementAddon; } export const on: On; export type Scope = { diff --git a/dist/iife.min.js b/dist/iife.min.js index fa81502..17a64b8 100644 --- a/dist/iife.min.js +++ b/dist/iife.min.js @@ -1 +1 @@ -var DDE=(()=>{var W=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var it=Object.prototype.hasOwnProperty;var ut=(t,e)=>{for(var n in e)W(t,n,{get:e[n],enumerable:!0})},ft=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of st(e))!it.call(t,o)&&o!==n&&W(t,o,{get:()=>e[o],enumerable:!(r=ct(e,o))||r.enumerable});return t};var at=t=>ft(W({},"__esModule",{value:!0}),t);var _t={};ut(_t,{assign:()=>L,assignAttribute:()=>$,chainableAppend:()=>Q,classListDeclarative:()=>Y,createElement:()=>M,createElementNS:()=>mt,customElementRender:()=>Et,customElementWithDDE:()=>nt,dispatchEvent:()=>lt,el:()=>M,elNS:()=>mt,elementAttribute:()=>tt,lifecyclesToEvents:()=>nt,memo:()=>q,on:()=>D,queue:()=>ht,registerReactivity:()=>B,scope:()=>y,simulateSlots:()=>bt});var H=(...t)=>Object.prototype.hasOwnProperty.call(...t);function _(t){return typeof t>"u"}function b(t,e){return t instanceof e}function z(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function N(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function k(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var S={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function B(t,e=!0){return e?g(S,t):(Object.setPrototypeOf(t,S),t)}function R(t){return z(t,S)&&t!==S?t:S}var a={setDeleteAttr:dt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function dt(t,e,n){if(Reflect.set(t,e,n),!!_(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",v="dde:connected",w="dde:disconnected",Z="dde:attributeChanged";var O=a.M?pt():new Proxy({},{get(){return()=>{}}});function pt(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function h(s){t.size>30&&await p();let u=[];if(!b(s,a.N))return u;for(let i of t.keys())i===s||!b(i,a.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let m of s){if(u&&h(m).then(l),!t.has(m))continue;let A=t.get(m);A.length_c&&(m.dispatchEvent(new Event(v)),A.connected=new WeakSet,A.length_c=0,A.length_d||t.delete(m),i=!0)}return i}function E(s,u){let i=!1;for(let m of s)u&&h(m).then(E),!(!t.has(m)||!t.get(m).length_d)&&((globalThis.queueMicrotask||setTimeout)(ot(m)),i=!0);return i}function ot(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function lt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function D(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>g({},typeof t=="object"?t:null,{once:!0});D.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(v,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(v)),r):(k(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};D.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(w,t,e),r[C]||k(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};function ht(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],F=new WeakMap,y={get current(){return x[x.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(D.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(g({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function J(...t){return this.appendOriginal(...t),this}function Q(t){return t.append===J||(t.appendOriginal=t.append,t.append=J),t}var T;function M(t,e,...n){let r=R(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;y.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let h=M.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(h),p&&(d=h);break}case t==="#text":c=L.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=L.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=L.call(this,a.D.createElementNS(T,t),e);break;case!c:c=L.call(this,a.D.createElement(t),e)}return Q(c),d||(d=c),n.forEach(f=>f(d)),o&&y.pop(),o=2,c}M.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function mt(t){let e=this;return function(...r){T=t;let o=M.call(e,...r);return T=void 0,o}}function bt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let h=(p.slot||"")+n;try{tt(p,"remove","slot")}catch{}let l=o[h];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+h),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var P=new WeakMap,{setDeleteAttr:V}=a;function L(t,...e){if(!e.length)return t;P.set(t,X(t,this));for(let[n,r]of Object.entries(g({},...e)))$.call(this,t,n,r);return P.delete(t),t}function $(t,e,n){let{setRemoveAttr:r,s:o}=X(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>$.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return K(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return V(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return I(o,e,t,n,K.bind(null,t[e]));case"ariaset":return I(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return Y.call(c,t,n)}return gt(t,e)?V(t,e,n):r(e,n)}function X(t,e){if(P.has(t))return P.get(t);let r=(b(t,a.S)?xt:vt).bind(null,t,"Attribute"),o=R(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=R(this);return I(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function tt(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function gt(t,e){if(!(e in t))return!1;let n=et(t,e);return!_(n.set)}function et(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||et(t,e)}function I(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function vt(t,e,n,r){return t[(_(r)?"remove":"set")+e](n,r)}function xt(t,e,n,r,o=null){return t[(_(r)?"remove":"set")+e+"NS"](o,n,r)}function K(t,e,n){if(Reflect.set(t,e,n),!!_(n))return Reflect.deleteProperty(t,e)}function Et(t,e,n={}){let r=t.host||t;y.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[C];o||nt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(v)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(w,O.observe(t),{once:!0}),y.pop(),t.append(c)}function nt(t){return U(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(v))}),U(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(w)))}),U(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(Z,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function U(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var rt="__dde_memo",j=[];function q(t,e){if(!j.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=j;return o(n,H(r,n)?r[n]:e(t))}q.isScope=function(t){return t[rt]};q.scope=function(e,{signal:n,onlyLast:r}={}){let o=N();function c(...d){if(n&&n.aborted)return e.apply(this,d);let f=r?o:N();j.unshift({cache:o,after(h,l){return f[h]=l}});let p=e.apply(this,d);return j.shift(),o=f,p}return c[rt]=!0,c.clear=()=>o=N(),n&&n.addEventListener("abort",c.clear),c};return at(_t);})(); +var DDE=(()=>{var k=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var ft=Object.prototype.hasOwnProperty;var at=(t,e)=>{for(var n in e)k(t,n,{get:e[n],enumerable:!0})},pt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ut(e))!ft.call(t,o)&&o!==n&&k(t,o,{get:()=>e[o],enumerable:!(r=it(e,o))||r.enumerable});return t};var dt=t=>pt(k({},"__esModule",{value:!0}),t);var _t={};at(_t,{assign:()=>R,assignAttribute:()=>H,chainableAppend:()=>et,classListDeclarative:()=>rt,createElement:()=>M,createElementNS:()=>gt,customElementRender:()=>Et,customElementWithDDE:()=>ct,dispatchEvent:()=>mt,el:()=>M,elNS:()=>gt,lifecyclesToEvents:()=>ct,memo:()=>q,on:()=>C,queue:()=>bt,registerReactivity:()=>V,scope:()=>O,simulateSlots:()=>xt});var B=(...t)=>Object.prototype.hasOwnProperty.call(...t);function x(t){return typeof t>"u"}function h(t,e){return t instanceof e}function Z(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function L(t=null,e={}){return Object.create(t,e)}function v(...t){return Object.assign(...t)}function I(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var f={setDeleteAttr:lt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function lt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),h(t,f.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",E="dde:connected",w="dde:disconnected",G="dde:attributeChanged";var y=f.M?ht():new Proxy({},{get(){return()=>{}}});function ht(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}g(i.removedNodes,!0)&&s()}},r=new f.M(n(a));return{observe(s){let u=new f.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){p();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){p();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),a())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function p(){e||(e=!0,r.observe(f.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function m(s){t.size>30&&await d();let u=[];if(!h(s,f.N))return u;for(let i of t.keys())i===s||!h(i,f.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let b of s){if(u&&m(b).then(l),!t.has(b))continue;let S=t.get(b);S.length_c&&(b.dispatchEvent(new Event(E)),S.connected=new WeakSet,S.length_c=0,S.length_d||t.delete(b),i=!0)}return i}function g(s,u){let i=!1;for(let b of s)u&&m(b).then(g),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(W(b)),i=!0);return i}function W(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function mt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let p=c.length?new CustomEvent(t,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(p)}}function C(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}C.defer=t=>setTimeout.bind(null,t,0);var J=t=>v({},typeof t=="object"?t:null,{once:!0});C.connected=function(t,e){return e=J(e),function(r){return r.addEventListener(E,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(E)),r):(I(e.signal,()=>y.offConnected(r,t))&&y.onConnected(r,t),r)}};C.disconnected=function(t,e){return e=J(e),function(r){return r.addEventListener(w,t,e),r[A]||I(e.signal,()=>y.offDisconnected(r,t))&&y.onDisconnected(r,t),r}};var _=[{get scope(){return f.D.body},host:t=>t?t(f.D.body):f.D.body,prevent:!0}],F=new WeakMap,O={get current(){return _[_.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(C.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[..._]},push(t={}){return _.push(v({},this.current,{prevent:!1},t))},pushRoot(){return _.push(_[0])},pop(){if(_.length!==1)return _.pop()}};var D={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?v(D,t):(Object.setPrototypeOf(t,D),t)}function N(t){return Z(t,D)&&t!==D?t:D}function K(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,r)}function Q(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,r)}function U(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function X(t,e,n,r){return h(t,f.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function bt(t){return f.q(t)}function Y(...t){return this.appendOriginal(...t),this}function et(t){return t.append===Y||(t.appendOriginal=t.append,t.append=Y),t}var T;function M(t,e,...n){let r=N(this),o=0,c,p,a=typeof e;switch((a==="string"||a==="number"||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let d=(...g)=>g.length?(o===1?n.unshift(...g):g.forEach(W=>W(p)),void 0):p;O.push({scope:t,host:d}),c=t(e||void 0);let m=h(c,f.F);if(c.nodeName==="#comment")break;let l=M.mark({type:"component",name:t.name,host:m?"this":"parentElement"});c.prepend(l),m&&(p=l);break}case t==="#text":c=R.call(this,f.D.createTextNode(""),e);break;case(t==="<>"||!t):c=R.call(this,f.D.createDocumentFragment(),e);break;case!!T:c=R.call(this,f.D.createElementNS(T,t),e);break;case!c:c=R.call(this,f.D.createElement(t),e)}return et(c),p||(p=c),n.forEach(d=>d(p)),o&&O.pop(),o=2,c}M.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=f.D.createComment(``);return e&&(r.end=f.D.createComment("")),r};function gt(t){let e=this;return function(...r){T=t;let o=M.call(e,...r);return T=void 0,o}}var P=new WeakMap,{setDeleteAttr:tt}=f;function R(t,...e){if(!e.length)return t;P.set(t,nt(t,this));for(let[n,r]of Object.entries(v({},...e)))H.call(this,t,n,r);return P.delete(t),t}function H(t,e,n){let{setRemoveAttr:r,s:o}=nt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>H.call(c,t,a,d));let[p]=e;if(p==="=")return r(e.slice(1),n);if(p===".")return U(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return tt(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return $(o,e,t,n,U.bind(null,t[e]));case"ariaset":return $(o,e,t,n,(a,d)=>r("aria-"+a,d));case"classList":return rt.call(c,t,n)}return vt(t,e)?tt(t,e,n):r(e,n)}function nt(t,e){if(P.has(t))return P.get(t);let r=(h(t,f.S)?Q:K).bind(null,t,"Attribute"),o=N(e);return{setRemoveAttr:r,s:o}}function rt(t,e){let n=N(this);return $(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function vt(t,e){if(!(e in t))return!1;let n=ot(t,e);return!x(n.set)}function ot(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||ot(t,e)}function $(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([a,d]){a&&(a=new c(a),a.target=e,d=t.processReactiveAttribute(n,a,d,o),o(a,d))})}function xt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,p,a){if(a[0]===e)return c.apply(t,a);for(let d of a){let m=(d.slot||"")+n;try{X(d,"remove","slot")}catch{}let l=o[m];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(g=>g.remove()),l.name=r+m),l.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function Et(t,e,n={}){let r=t.host||t;O.push({scope:r,host:(...p)=>p.length?p.forEach(a=>a(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[A];o||ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(E)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(w,y.observe(t),{once:!0}),O.pop(),t.append(c)}function ct(t){return z(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(E))}),z(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(w)))}),z(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(G,{detail:[o,c]})),e.apply(n,r)}),t.prototype[A]=!0,t}function z(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var st="__dde_memo",j=[];function q(t,e){if(!j.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=j;return o(n,B(r,n)?r[n]:e(t))}q.isScope=function(t){return t[st]};q.scope=function(e,{signal:n,onlyLast:r}={}){let o=L();function c(...p){if(n&&n.aborted)return e.apply(this,p);let a=r?o:L();j.unshift({cache:o,after(m,l){return a[m]=l}});let d=e.apply(this,p);return j.shift(),o=a,d}return c[st]=!0,c.clear=()=>o=L(),n&&n.addEventListener("abort",c.clear),c};return dt(_t);})(); diff --git a/docs/assets/devtools.png b/docs/assets/devtools.png new file mode 100644 index 0000000..6a2f824 Binary files /dev/null and b/docs/assets/devtools.png differ diff --git a/docs/components/code.html.js b/docs/components/code.html.js index 7d2736f..6425412 100644 --- a/docs/components/code.html.js +++ b/docs/components/code.html.js @@ -184,7 +184,7 @@ import { el } from "deka-dom-el"; * @param {string} [attrs.className] * @param {URL} [attrs.src] Example code file path * @param {string} [attrs.content] Example code - * @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code + * @param {"js"|"ts"|"html"|"css"|"shell"} [attrs.language="js"] Language of the code * @param {string} [attrs.page_id] ID of the page, if setted it registers shiki * */ export function code({ id, src, content, language= "js", className= host.slice(1), page_id }){ diff --git a/docs/components/converter.html.js b/docs/components/converter.html.js new file mode 100644 index 0000000..fc9db56 --- /dev/null +++ b/docs/components/converter.html.js @@ -0,0 +1,176 @@ +import { styles } from "../ssr.js"; + +styles.css` +#html-to-dde-converter { + grid-column: full-main; + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1.5rem; + border-radius: var(--border-radius); + background-color: var(--bg-sidebar); + box-shadow: var(--shadow); + border: 1px solid var(--border); +} + +#html-to-dde-converter h3 { + margin-top: 0; + color: var(--primary); +} + +#html-to-dde-converter .description { + color: var(--text-light); + font-size: 0.95rem; + margin-top: -1rem; +} + +#html-to-dde-converter .converter-form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +#html-to-dde-converter .input-group, +#html-to-dde-converter .output-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#html-to-dde-converter [type="number"]{ + width: 3em; + font-variant-numeric: tabular-nums; + font-size: 1rem; +} + +#html-to-dde-converter label { + font-weight: 500; + display: flex; + justify-content: space-between; +} + +#html-to-dde-converter .options { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 0.5rem; +} + +#html-to-dde-converter .option-group { + display: flex; + align-items: center; + gap: 0.5rem; +} + +#html-to-dde-converter textarea { + font-family: var(--font-mono); + font-size: 0.9rem; + padding: 1rem; + border-radius: var(--border-radius); + border: 1px solid var(--border); + background-color: var(--bg); + color: var(--text); + min-height: 200px; + height: 25em; + resize: vertical; +} + +#html-to-dde-converter textarea:focus { + outline: 2px solid var(--primary-light); + outline-offset: 1px; +} + +#html-to-dde-converter .button-group { + display: flex; + gap: 0.5rem; + justify-content: space-between; + align-items: center; +} + +#html-to-dde-converter button { + padding: 0.5rem 1rem; + border-radius: var(--border-radius); + border: none; + background-color: var(--primary); + color: var(--button-text); + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s ease; +} + +#html-to-dde-converter button:hover { + background-color: var(--primary-dark); +} + +#html-to-dde-converter button.secondary { + background-color: transparent; + border: 1px solid var(--border); + color: var(--text); +} + +#html-to-dde-converter button.secondary:hover { + background-color: var(--bg); + border-color: var(--primary); +} + +#html-to-dde-converter .copy-button { + background-color: var(--secondary); +} + +#html-to-dde-converter .copy-button:hover { + background-color: var(--secondary-dark); +} + +#html-to-dde-converter .status { + font-size: 0.9rem; + color: var(--text-light); +} + +#html-to-dde-converter .error { + color: hsl(0, 100%, 60%); + font-size: 0.9rem; + margin-top: 0.5rem; +} + +/* Sample HTML examples list */ +#html-to-dde-converter .examples-list { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 0.5rem; +} + +#html-to-dde-converter .example-button { + font-size: 0.85rem; + padding: 0.25rem 0.5rem; +} +`; + +import { ireland } from "./ireland.html.js"; +import { el } from "deka-dom-el"; +const fileURL= url=> new URL(url, import.meta.url); + +export function converter({ page_id }){ + registerClientPart(page_id); + return el(ireland, { + src: fileURL("./converter.js.js"), + exportName: "converter", + page_id, + }); +} + +let is_registered= {}; +/** @param {string} page_id */ +function registerClientPart(page_id){ + if(is_registered[page_id]) return; + + document.head.append( + el("script", { + // src: "https://unpkg.com/@beforesemicolon/html-parser/dist/client.js", + src: "https://cdn.jsdelivr.net/npm/@beforesemicolon/html-parser/dist/client.js", + type: "text/javascript", + charset: "utf-8", + defer: true + }), + ); + is_registered[page_id]= true; +} diff --git a/docs/components/converter.js.js b/docs/components/converter.js.js new file mode 100644 index 0000000..f99fca7 --- /dev/null +++ b/docs/components/converter.js.js @@ -0,0 +1,384 @@ +import { el, on } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; +const { parse }= globalThis.BFS || { parse(){ return { children: [ "not implemented" ] } } }; +// Example HTML snippets +const examples = [ +{ + name: "Simple Component", + html: `
+ Card Image +

Card Title

+

This is a simple card component

+ +
` +}, +{ + name: "Navigation", + html: `` +}, +{ + name: "Form", + html: `
+
+ + +
+
+ + +
+
+ + +
+ +
` +} +]; + +// Convert HTML to dd code +function convertHTMLtoDDE(html, options = {}) { + + try { + const parsed = parse(html); + const content = parsed.children[0] || parsed.childNodes[0]; + return !content ? "" : nodeToDDE(content, options); + } catch (error) { + console.error("Parsing error:", error); + return `// Error parsing HTML: ${error.message}`; + } +} + +// Node types based on standard DOM nodeType values +const NODE_TYPE = { + ELEMENT: 1, // Standard element node (equivalent to node.type === "element") + TEXT: 3, // Text node (equivalent to node.type === "text") + COMMENT: 8 // Comment node (equivalent to node.type === "comment") +}; + +// Convert a parsed node to dd code +function nodeToDDE(node, options = {}, level = 0) { + const tab= options.indent === "-1" ? "\t" : " ".repeat(options.indent); + const indent = tab.repeat(level); + const nextIndent = tab.repeat(level + 1); + + const { nodeType } = node; + // Handle text nodes + if (nodeType === NODE_TYPE.TEXT) { + const text = el("i", { innerText: node.nodeValue }).textContent; + if (!text.trim()) return null; + + // Return as plain text or template string for longer text + return text.includes("\n") || text.includes('"') + ? `\`${text}\`` + : `"${text}"`; + } + + // Handle comment nodes + if (nodeType === NODE_TYPE.COMMENT) { + const text = node.nodeValue; + if (!text.trim()) return null; + return text.includes("\n") + ? [ "/*", ...text.trim().split("\n").map(l=> tab+l), "*/" ] + : [ `// ${text}` ]; + } + + // For element nodes + if (nodeType === NODE_TYPE.ELEMENT) { + // Special case for SVG elements + const isNS = node.tagName === "svg"; + const elFunction = isNS ? "elNS" : "el"; + + // Get tag name + let tagStr = `"${node.tagName}"`; + + // Process attributes + const attrs = []; + const sets = { + aria: {}, + data: {}, + } + + for (const { name: key, value } of node.attributes) { + // Handle class attribute + if (key === "class") { + attrs.push(`className: "${value}"`); + continue; + } + + // Handle style attribute + if (key === "style") { + if (options.styleAsObject) { + // Convert inline style to object + const styleObj = {}; + value.split(";").forEach(part => { + const [propRaw, valueRaw] = part.split(":"); + if (propRaw && valueRaw) { + const prop = propRaw.trim(); + const propCamel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + styleObj[propCamel] = valueRaw.trim(); + } + }); + + if (Object.keys(styleObj).length > 0) { + const styleStr = JSON.stringify(styleObj).replace(/"([^"]+)":/g, "$1:"); + attrs.push(`style: ${styleStr}`); + } + } else { + // Keep as string + attrs.push(`style: "${value}"`); + } + continue; + } + + // Handle boolean attributes + if (value === "" || value === key) { + attrs.push(`${key}: true`); + continue; + } + + // Handle data/aria attributes + if (key.startsWith("data-") || key.startsWith("aria-")) { + const keyName = key.startsWith("aria-") ? "aria" : "data"; + const keyCamel = key.slice(keyName.length + 1).replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + sets[keyName][keyCamel] = value; + continue; + } + + // Regular attributes + const keyRegular = key==="for" + ? "htmlFor" + : key.startsWith("on") + ? `"=${key}"` + : key.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + attrs.push(`${keyRegular}: "${value}"`); + } + + // Process sets + for (const [name, set] of Object.entries(sets)) { + if(options.dataAttrsAsCamel) + for (const [key, value] of Object.entries(set)) + attrs.push(`${name}${key[0].toUpperCase() + key.substring(1)}: "${value}"`); + else { + const setStr= Object.entries(set).map(([key, value]) => `${key}: "${value}"`).join(","); + if (setStr !== "") + attrs.push(`${name}set: { ${setStr} }`); + } + } + + // Process children + const children = []; + for (const child of node.childNodes) { + const childCode = nodeToDDE(child, options, level + 1); + if (!childCode) continue; + + children.push(childCode); + } + if(node.childNodes.length===1 && node.childNodes[0].nodeType===NODE_TYPE.TEXT){ + const textContent= children.pop().slice(1, -1); + attrs.unshift(`textContent: "${textContent}"`); + } + + // Build the element creation code + let result = `${elFunction}("${node.tagName.toLowerCase()}"`; + + // Add attributes if any + if (attrs.length > 0) { + const tooLong= attrs.join(``).length+result.length > 55; + if(options.expaned || tooLong || attrs.length > 3) + result += `, {\n${nextIndent}${attrs.join(`,\n${nextIndent}`)},\n${indent}}`; + else + result += `, { ${attrs.join(", ")} }`; + } + + // Add children if any + if (children.length > 0) { + const chs= children.map(ch=> + Array.isArray(ch) ? ch.map(l=> nextIndent + l).join("\n") : + nextIndent + ch + ","); + result += `).append(\n${chs.join("\n")}\n${indent})`; + } else { + result += ")"; + } + + return result; + } + + return null; +} + +export function converter() { + // State for the converter + const htmlInput = S(examples[0].html); + const error = S(""); + + const status = S(""); + const showStatus= msg => { + status.set(msg); + // Clear status after 3 seconds + setTimeout(() => status.set(""), 3000); + }; + + // Options state + const options = { + styleAsObject: { + title: "Convert style to object", + value: S(true), + }, + dataAttrsAsCamel: { + title: "dataKey/ariaKey (or dataset/ariaset)", + value: S(true), + }, + indent: { + title: "Indentation (-1 for tabs)", + value: S("-1"), + type: "number", + }, + expaned: { + title: "Force multiline", + value: S(false), + } + }; + const getOptions = ()=> Object.fromEntries(Object.entries(options) + .map(([key, option]) => ([ + key, + option.value.get() + ])) + ); + + // Update the dd output when input or options change + const ddeOutput = S(() => { + try { + const result = convertHTMLtoDDE(htmlInput.get(), getOptions()); + error.set(""); + return result; + } catch (err) { + error.set(`Error: ${err.message}`); + return ""; + } + }); + + // Event handlers + const onConvert = on("submit", e => { + e.preventDefault(); + htmlInput.set(htmlInput.get(), true); + showStatus("Converted!"); + }); + + const onCopy = on("click", async () => { + if (!ddeOutput.get()) return; + + try { + await navigator.clipboard.writeText(ddeOutput.get()); + showStatus("Copied to clipboard!"); + } catch (err) { + error.set(`Could not copy: ${err.message}`); + } + }); + const onClear = on("click", () => { + htmlInput.set(""); + showStatus("Input cleared"); + }); + const onExampleLoad = (example) => on("click", () => { + htmlInput.set(example.html); + showStatus(`Loaded "${example.name}" example`); + }); + + const optionsElements = () => Object.entries(options) + .map(([key, option]) => + el("label", { className: "option-group" }).append( + option.type==="number" + ? el("input", { + type: option.type || "checkbox", + name: key, + value: option.value.get(), + max: 10, + }, on("change", e => option.value.set(e.target.value))) + : el("input", { + type: option.type || "checkbox", + name: key, + checked: option.value.get(), + }, on("change", e => option.value.set(e.target.checked))), + option.title, + ) + ); + const exampleButtons = examples.map(example => + el("button", { + type: "button", + className: "secondary example-button" + }, onExampleLoad(example)).append(example.name) + ); + + return el("div", { id: "html-to-dde-converter" }).append( + el("h3", "HTML to dd Converter"), + el("p", { className: "description" }).append( + "Convert HTML markup to dd JavaScript code. Paste your HTML below or choose from an example." + ), + + el("form", { className: "converter-form" }, onConvert).append( + el("div", { className: "options" }).append(...optionsElements()), + + el("div", { className: "examples-list" }).append( + el("label", "Examples: "), + ...exampleButtons + ), + + el("div", { className: "editor-container" }).append( + el("div", { className: "input-group" }).append( + el("label", { htmlFor: "html-input" }).append( + "HTML Input", + el("div", { className: "button-group" }).append( + el("button", { + type: "button", + className: "secondary", + title: "Clear input" + }, onClear).append("Clear") + ) + ), + el("textarea", { + id: "html-input", + spellcheck: false, + value: htmlInput, + placeholder: "Paste your HTML here or choose an example", + oninput: e => htmlInput.set(e.target.value) + }) + ), + + el("div", { className: "output-group" }).append( + el("label", { htmlFor: "dde-output" }).append( + "dd Output", + el("div", { className: "button-group" }).append( + el("button", { + textContent: "Copy", + type: "button", + className: "copy-button", + title: "Copy to clipboard", + disabled: S(() => !ddeOutput.get()) + }, onCopy) + ) + ), + el("textarea", { + id: "dde-output", + readonly: true, + spellcheck: false, + placeholder: "The converted dd code will appear here", + value: S(() => ddeOutput.get() || "// Convert HTML to see results here") + }) + ) + ), + + el("div", { className: "button-group" }).append( + S.el(error, error => !error ? el() : el("div", { className: "error" }).append(error)), + el("div", { className: "status", textContent: status }), + el("button", { type: "submit" }).append("Convert") + ) + ) + ); +} diff --git a/docs/components/example.html.js b/docs/components/example.html.js index 53948f3..64d1f72 100644 --- a/docs/components/example.html.js +++ b/docs/components/example.html.js @@ -3,7 +3,6 @@ const host= "."+example.name; styles.css` ${host} { grid-column: full-main; - width: calc(100% - .75em); height: calc(4/6 * var(--body-max-width)); border-radius: var(--border-radius); box-shadow: var(--shadow); @@ -84,7 +83,6 @@ html[data-theme="light"] .cm-s-material .cm-error { color: #f44336 !important; } @media (max-width: 767px) { ${host} { height: 50vh; - max-width: 100%; } ${host} main { flex-grow: 1; @@ -97,7 +95,7 @@ html[data-theme="light"] .cm-s-material .cm-error { color: #f44336 !important; } } } ${host}[data-variant=big]{ - height: 100vh; + height: 150vh; main { flex-flow: column nowrap; diff --git a/docs/components/examples/case-studies/data-dashboard.js b/docs/components/examples/case-studies/data-dashboard.js new file mode 100644 index 0000000..b588485 --- /dev/null +++ b/docs/components/examples/case-studies/data-dashboard.js @@ -0,0 +1,394 @@ +/** + * Case Study: Data Dashboard with Charts + * + * This example demonstrates: + * - Integration with a third-party charting library + * - Data fetching and state management + * - Responsive layout design + * - Multiple interactive components working together + */ + +import { el, on } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; + +/** + * Data Dashboard Component with Chart Integration + * @returns {HTMLElement} Dashboard element + */ +export function DataDashboard() { + // Mock data for demonstration + const DATA = { + sales: [42, 58, 65, 49, 72, 85, 63, 70, 78, 89, 95, 86], + visitors: [1420, 1620, 1750, 1850, 2100, 2400, 2250, 2500, 2750, 2900, 3100, 3200], + conversion: [2.9, 3.5, 3.7, 2.6, 3.4, 3.5, 2.8, 2.8, 2.8, 3.1, 3.0, 2.7], + months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] + }; + + // Application state + const selectedYear = S(2024); + const selectedDataType = S(/** @type {'sales' | 'visitors' | 'conversion'} */ ('sales')); + const isLoading = S(false); + const error = S(null); + + // Filter options + const years = [2022, 2023, 2024]; + const dataTypes = [ + { id: 'sales', label: 'Sales', unit: 'K' }, + { id: 'visitors', label: 'Visitors', unit: '' }, + { id: 'conversion', label: 'Conversion Rate', unit: '%' } + ]; + + // Computed values + const selectedData = S(() => { + return DATA[selectedDataType.get()]; + }); + + const currentDataType = S(() => { + return dataTypes.find(type => type.id === selectedDataType.get()); + }); + + const totalValue = S(() => { + const data = selectedData.get(); + return data.reduce((sum, value) => sum + value, 0); + }); + + const averageValue = S(() => { + const data = selectedData.get(); + return data.reduce((sum, value) => sum + value, 0) / data.length; + }); + + const highestValue = S(() => { + return Math.max(...selectedData.get()); + }); + + // Event handlers + const onYearChange = on("change", e => { + selectedYear.set(parseInt(/** @type {HTMLSelectElement} */(e.target).value)); + loadData(); + }); + + const onDataTypeChange = on("click", e => { + const type = /** @type {'sales' | 'visitors' | 'conversion'} */( + /** @type {HTMLButtonElement} */(e.currentTarget).dataset.type); + selectedDataType.set(type); + }); + + // Simulate data loading + function loadData() { + isLoading.set(true); + error.set(null); + + // Simulate API call + setTimeout(() => { + if (Math.random() > 0.9) { + // Simulate occasional error + error.set('Failed to load data. Please try again.'); + } + isLoading.set(false); + }, 800); + } + + // Reactive chart rendering + const chart = S(()=> { + const chart= el("canvas", { id: "chart-canvas", width: 800, height: 400 }); + const ctx = chart.getContext('2d'); + const data = selectedData.get(); + const months = DATA.months; + const width = chart.width; + const height = chart.height; + const maxValue = Math.max(...data) * 1.1; + const barWidth = width / data.length - 10; + + // Clear canvas + ctx.clearRect(0, 0, width, height); + + // Draw background grid + ctx.beginPath(); + ctx.strokeStyle = '#f0f0f0'; + ctx.lineWidth = 1; + for(let i = 0; i < 5; i++) { + const y = height - (height * (i / 5)) - 30; + ctx.moveTo(50, y); + ctx.lineTo(width - 20, y); + + // Draw grid labels + ctx.fillStyle = '#999'; + ctx.font = '12px Arial'; + ctx.fillText(Math.round(maxValue * (i / 5)), 20, y + 5); + } + ctx.stroke(); + + // Draw bars + data.forEach((value, index) => { + const x = index * (barWidth + 10) + 60; + const barHeight = (value / maxValue) * (height - 60); + + // Bar + ctx.fillStyle = '#4a90e2'; + ctx.fillRect(x, height - barHeight - 30, barWidth, barHeight); + + // Month label + ctx.fillStyle = '#666'; + ctx.font = '12px Arial'; + ctx.fillText(months[index], x + barWidth/2 - 10, height - 10); + }); + + // Chart title + ctx.fillStyle = '#333'; + ctx.font = 'bold 14px Arial'; + ctx.fillText(`${currentDataType.get().label} (${selectedYear.get()})`, width/2 - 80, 20); + return chart; + }); + + return el("div", { className: "dashboard" }).append( + el("header", { className: "dashboard-header" }).append( + el("h1", "Sales Performance Dashboard"), + el("div", { className: "year-filter" }).append( + el("label", { htmlFor: "yearSelect", textContent: "Select Year:" }), + el("select", { id: "yearSelect" }, + on.defer(el=> el.value = selectedYear.get().toString()), + onYearChange + ).append( + ...years.map(year => el("option", { value: year, textContent: year })) + ) + ) + ), + + // Error message (only shown when there's an error) + S.el(error, errorMsg => !errorMsg + ? el() + : el("div", { className: "error-message" }).append( + el("p", errorMsg), + el("button", { textContent: "Retry", type: "button" }, on("click", loadData)), + ), + ), + + // Loading indicator + S.el(isLoading, loading => !loading + ? el() + : el("div", { className: "loading-spinner" }) + ), + + // Main dashboard content + el("div", { className: "dashboard-content" }).append( + // Metrics cards + el("div", { className: "metrics-container" }).append( + el("div", { className: "metric-card" }).append( + el("h3", "Total"), + el("#text", S(() => `${totalValue.get().toLocaleString()}${currentDataType.get().unit}`)), + ), + el("div", { className: "metric-card" }).append( + el("h3", "Average"), + el("#text", S(() => `${averageValue.get().toFixed(1)}${currentDataType.get().unit}`)), + ), + el("div", { className: "metric-card" }).append( + el("h3", "Highest"), + el("#text", S(() => `${highestValue.get()}${currentDataType.get().unit}`)), + ), + ), + + // Data type selection tabs + el("div", { className: "data-type-tabs" }).append( + ...dataTypes.map(type => + el("button", { + type: "button", + className: S(() => selectedDataType.get() === type.id ? 'active' : ''), + dataType: type.id, + textContent: type.label + }, onDataTypeChange) + ) + ), + + // Chart container + el("div", { className: "chart-container" }).append( + S.el(chart, chart => chart) + ) + ), + ); +} + +// Render the component +document.body.append( + el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append( + el(DataDashboard) + ), + el("style", ` + .dashboard { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + max-width: 1000px; + margin: 0 auto; + padding: 1rem; + background: #fff; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; + } + + .dashboard-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid #eee; + } + + .dashboard-header h1 { + font-size: 1.5rem; + margin: 0; + color: #333; + } + + .year-filter { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .year-filter select { + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; + } + + .metrics-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-bottom: 1.5rem; + } + + .metric-card { + background: #f9f9f9; + border-radius: 8px; + padding: 1rem; + text-align: center; + transition: transform 0.2s ease; + } + + .metric-card:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); + } + + .metric-card h3 { + margin-top: 0; + color: #666; + font-size: 0.9rem; + margin-bottom: 0.5rem; + } + + .metric-card p { + font-size: 1.5rem; + font-weight: bold; + color: #333; + margin: 0; + } + + .data-type-tabs { + display: flex; + border-bottom: 1px solid #eee; + margin-bottom: 1.5rem; + } + + .data-type-tabs button { + background: none; + border: none; + padding: 0.75rem 1.5rem; + font-size: 1rem; + cursor: pointer; + color: #666; + position: relative; + } + + .data-type-tabs button.active { + color: #4a90e2; + font-weight: 500; + } + + .data-type-tabs button.active::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + width: 100%; + height: 3px; + background: #4a90e2; + border-radius: 3px 3px 0 0; + } + + .chart-container { + background: #fff; + border-radius: 8px; + padding: 1rem; + margin-bottom: 1.5rem; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + } + + .loading-spinner { + display: flex; + justify-content: center; + align-items: center; + height: 100px; + } + + .loading-spinner::before { + content: ''; + width: 40px; + height: 40px; + border: 4px solid #f3f3f3; + border-top: 4px solid #4a90e2; + border-radius: 50%; + animation: spin 1s linear infinite; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + .error-message { + background: #ffecec; + color: #e74c3c; + padding: 1rem; + border-radius: 4px; + margin-bottom: 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .error-message p { + margin: 0; + } + + .error-message button { + background: #e74c3c; + color: white; + border: none; + border-radius: 4px; + padding: 0.5rem 1rem; + cursor: pointer; + } + + @media (max-width: 768px) { + .metrics-container { + grid-template-columns: 1fr; + } + + .dashboard-header { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .year-filter { + width: 100%; + } + + .year-filter select { + flex-grow: 1; + } + } + `) +); diff --git a/docs/components/examples/case-studies/image-gallery.js b/docs/components/examples/case-studies/image-gallery.js new file mode 100644 index 0000000..e4dcec7 --- /dev/null +++ b/docs/components/examples/case-studies/image-gallery.js @@ -0,0 +1,417 @@ +/** + * Case Study: Interactive Image Gallery + * + * This example demonstrates: + * - Dynamic loading of content + * - Lightbox functionality + * - Animation handling + * - Keyboard and gesture navigation + */ + +import { el, memo, on } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; + +// Sample image data +const imagesSample = (url=> [ + { id: 1, src: url+'nature', alt: 'Nature', title: 'Beautiful Landscape' }, + { id: 2, src: url+'places', alt: 'City', title: 'Urban Architecture' }, + { id: 3, src: url+'people', alt: 'People', title: 'Street Photography' }, + { id: 4, src: url+'food', alt: 'Food', title: 'Culinary Delights' }, + { id: 5, src: url+'animals', alt: 'Animals', title: 'Wildlife' }, + { id: 6, src: url+'travel', alt: 'Travel', title: 'Adventure Awaits' }, + { id: 7, src: url+'computer', alt: 'Technology', title: 'Modern Tech' }, + { id: 8, src: url+'music', alt: 'Art', title: 'Creative Expression' }, +])('https://api.algobook.info/v1/randomimage?category='); +/** + * Interactive Image Gallery Component + * @returns {HTMLElement} Gallery element + */ +export function ImageGallery(images= imagesSample) { + + // Application state + const selectedImageId = S(null); + const filterTag = S('all'); + const imagesToDisplay = S(() => { + const tag = filterTag.get(); + if (tag === 'all') return images; + else return images.filter(img => img.alt.toLowerCase() === tag); + }) + + // Derived state + const selectedImage = S(() => { + const id = selectedImageId.get(); + return id ? images.find(img => img.id === id) : null; + }); + + const isLightboxOpen = S(() => selectedImage.get() !== null); + + // Event handlers + const onImageClick = id => on("click", () => { + selectedImageId.set(id); + document.body.style.overflow = 'hidden'; // Prevent scrolling when lightbox is open + + // Add keyboard event listeners when lightbox opens + document.addEventListener('keydown', handleKeyDown); + }); + const closeLightbox = () => { + selectedImageId.set(null); + document.body.style.overflow = ''; // Restore scrolling + + // Remove keyboard event listeners when lightbox closes + document.removeEventListener('keydown', handleKeyDown); + }; + const onPrevImage = e => { + e.stopPropagation(); // Prevent closing the lightbox + const images = imagesToDisplay.get(); + const currentId = selectedImageId.get(); + const currentIndex = images.findIndex(img => img.id === currentId); + const prevIndex = (currentIndex - 1 + images.length) % images.length; + selectedImageId.set(images[prevIndex].id); + }; + const onNextImage = e => { + e.stopPropagation(); // Prevent closing the lightbox + const images = imagesToDisplay.get(); + const currentId = selectedImageId.get(); + const currentIndex = images.findIndex(img => img.id === currentId); + const nextIndex = (currentIndex + 1) % images.length; + selectedImageId.set(images[nextIndex].id); + }; + const onFilterChange = tag => on("click", () => { + filterTag.set(tag); + }); + + // Keyboard navigation handler + function handleKeyDown(e) { + switch(e.key) { + case 'Escape': + closeLightbox(); + break; + case 'ArrowLeft': + document.querySelector('.lightbox-prev-btn').click(); + break; + case 'ArrowRight': + document.querySelector('.lightbox-next-btn').click(); + break; + } + } + + // Build the gallery UI + return el("div", { className: "gallery-container" }).append( + // Gallery header + el("header", { className: "gallery-header" }).append( + el("h1", "Interactive Image Gallery"), + el("p", "Click on any image to view it in the lightbox. Use arrow keys for navigation.") + ), + + // Filter options + el("div", { className: "gallery-filters" }).append( + el("button", { + classList: { active: S(() => filterTag.get() === 'all') }, + textContent: "All" + }, onFilterChange('all')), + el("button", { + classList: { active: S(() => filterTag.get() === 'nature') }, + textContent: "Nature" + }, onFilterChange('nature')), + el("button", { + classList: { active: S(() => filterTag.get() === 'urban') }, + textContent: "Urban" + }, onFilterChange('urban')), + el("button", { + classList: { active: S(() => filterTag.get() === 'people') }, + textContent: "People" + }, onFilterChange('people')) + ), + + // Image grid + el("div", { className: "gallery-grid" }).append( + S.el(imagesToDisplay, images => + images.map(image => + memo(image.id, ()=> + el("div", { + className: "gallery-item", + dataTag: image.alt.toLowerCase() + }).append( + el("img", { + src: image.src, + alt: image.alt, + loading: "lazy" + }, onImageClick(image.id)), + el("div", { className: "gallery-item-caption" }).append( + el("h3", image.title), + el("p", image.alt) + ) + ) + ) + ) + ) + ), + + // Lightbox (only shown when an image is selected) + S.el(isLightboxOpen, open => !open + ? el() + : el("div", { className: "lightbox-overlay" }, on("click", closeLightbox)).append( + el("div", { + className: "lightbox-content", + onClick: e => e.stopPropagation() // Prevent closing when clicking inside + }).append( + el("button", { + className: "lightbox-close-btn", + "aria-label": "Close lightbox" + }, on("click", closeLightbox)).append("×"), + + el("button", { + className: "lightbox-prev-btn", + "aria-label": "Previous image" + }, on("click", onPrevImage)).append("❮"), + + el("button", { + className: "lightbox-next-btn", + "aria-label": "Next image" + }, on("click", onNextImage)).append("❯"), + + S.el(selectedImage, img => !img + ? el() + : el("div", { className: "lightbox-image-container" }).append( + el("img", { + src: img.src, + alt: img.alt, + className: "lightbox-image" + }), + el("div", { className: "lightbox-caption" }).append( + el("h2", img.title), + el("p", img.alt) + ) + ) + ) + ) + ) + ), + ); +} + +// Render the component +document.body.append( + el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append( + el(ImageGallery) + ), + el("style", ` + .gallery-container { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + max-width: 1200px; + margin: 0 auto; + padding: 2rem; + } + + .gallery-header { + text-align: center; + margin-bottom: 2rem; + } + + .gallery-header h1 { + margin-bottom: 0.5rem; + color: #333; + } + + .gallery-header p { + color: #666; + } + + .gallery-filters { + display: flex; + justify-content: center; + margin-bottom: 2rem; + flex-wrap: wrap; + } + + .gallery-filters button { + background: none; + border: none; + padding: 0.5rem 1.5rem; + margin: 0 0.5rem; + font-size: 1rem; + cursor: pointer; + border-radius: 30px; + transition: all 0.3s ease; + color: #555; + } + + .gallery-filters button:hover { + background: #f0f0f0; + } + + .gallery-filters button.active { + background: #4a90e2; + color: white; + } + + .gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 1.5rem; + } + + .gallery-item { + position: relative; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; + } + + .gallery-item:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); + } + + .gallery-item img { + width: 100%; + height: 200px; + object-fit: cover; + display: block; + transition: transform 0.5s ease; + } + + .gallery-item:hover img { + transform: scale(1.05); + } + + .gallery-item-caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); + color: white; + padding: 1rem; + transform: translateY(100%); + transition: transform 0.3s ease; + } + + .gallery-item:hover .gallery-item-caption { + transform: translateY(0); + } + + .gallery-item-caption h3 { + margin: 0 0 0.5rem; + font-size: 1.2rem; + } + + .gallery-item-caption p { + margin: 0; + font-size: 0.9rem; + opacity: 0.8; + } + + /* Lightbox styles */ + .lightbox-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + padding: 2rem; + } + + .lightbox-content { + position: relative; + max-width: 90%; + max-height: 90%; + } + + .lightbox-image-container { + overflow: hidden; + border-radius: 4px; + box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); + background: #000; + } + + .lightbox-image { + max-width: 100%; + max-height: 80vh; + display: block; + margin: 0 auto; + } + + .lightbox-caption { + background: #222; + color: white; + padding: 1rem; + text-align: center; + } + + .lightbox-caption h2 { + margin: 0 0 0.5rem; + } + + .lightbox-caption p { + margin: 0; + opacity: 0.8; + } + + .lightbox-close-btn, + .lightbox-prev-btn, + .lightbox-next-btn { + background: rgba(0, 0, 0, 0.5); + color: white; + border: none; + font-size: 1.5rem; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: background 0.3s ease; + position: absolute; + } + + .lightbox-close-btn:hover, + .lightbox-prev-btn:hover, + .lightbox-next-btn:hover { + background: rgba(0, 0, 0, 0.8); + } + + .lightbox-close-btn { + top: -25px; + right: -25px; + } + + .lightbox-prev-btn { + left: -25px; + top: 50%; + transform: translateY(-50%); + } + + .lightbox-next-btn { + right: -25px; + top: 50%; + transform: translateY(-50%); + } + + @media (max-width: 768px) { + .gallery-container { + padding: 1rem; + } + + .gallery-grid { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 1rem; + } + + .lightbox-prev-btn, + .lightbox-next-btn { + width: 40px; + height: 40px; + font-size: 1.2rem; + } + } + `) +); diff --git a/docs/components/examples/case-studies/interactive-form.js b/docs/components/examples/case-studies/interactive-form.js new file mode 100644 index 0000000..42b3ce1 --- /dev/null +++ b/docs/components/examples/case-studies/interactive-form.js @@ -0,0 +1,342 @@ +/** + * Case Study: Interactive Form with Validation + * + * This example demonstrates: + * - Form handling with real-time validation + * - Reactive UI updates based on input state + * - Complex form state management + * - Clean separation of concerns (data, validation, UI) + */ + +import { dispatchEvent, el, on, scope } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; + +/** + * @typedef {Object} FormState + * @property {string} name + * @property {string} email + * @property {string} password + * @property {string} confirmPassword + * @property {boolean} agreedToTerms + * */ +/** + * Interactive Form with Validation Component + * @returns {HTMLElement} Form element + */ +export function InteractiveForm() { + const submitted = S(false); + /** @type {FormState|null} */ + let formState = null; + /** @param {CustomEvent} event */ + const onSubmit = ({ detail }) => { + submitted.set(true); + formState = detail; + }; + const onAnotherAccount = () => { + submitted.set(false) + formState = null; + }; + + return el("div", { className: "form-container" }).append( + S.el(submitted, s => s + ? el("div", { className: "success-message" }).append( + el("h3", "Thank you for registering!"), + el("p", `Welcome, ${formState.name}! Your account has been created successfully.`), + el("button", { textContent: "Register another account", type: "button" }, + on("click", onAnotherAccount) + ), + ) + : el(Form, { initial: formState }, on("form:submit", onSubmit)) + ) + ); +} +/** + * Form Component + * @type {(props: { initial: FormState | null }) => HTMLElement} + * */ +export function Form({ initial }) { + const { host }= scope; + // Form state management + const formState = S(initial || { + name: '', + email: '', + password: '', + confirmPassword: '', + agreedToTerms: false + }, { + /** + * @template {keyof FormState} K + * @param {K} key + * @param {FormState[K]} value + * */ + update(key, value) { + this.value[key] = value; + } + }); + + // Derived signals for validation + const nameValid = S(() => formState.get().name.length >= 3); + const emailValid = S(() => { + const email = formState.get().email; + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + }); + const passwordValid = S(() => { + const password = formState.get().password; + return password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password); + }); + const passwordsMatch = S(() => { + const { password, confirmPassword } = formState.get(); + return password === confirmPassword && confirmPassword !== ''; + }); + const termsAgreed = S(() => formState.get().agreedToTerms); + + // Overall form validity + const formValid = S(() => + nameValid.get() && + emailValid.get() && + passwordValid.get() && + passwordsMatch.get() && + termsAgreed.get() + ); + + // Event handlers + /** + * Event handler for input events + * @param {"value"|"checked"} prop + * @returns {(ev: Event) => void} + * */ + const onChange= prop => ev => { + const input = /** @type {HTMLInputElement} */(ev.target); + S.action(formState, "update", /** @type {keyof FormState} */(input.id), input[prop]); + }; + const dispatcSubmit = dispatchEvent("form:submit", host); + const onSubmit = on("submit", e => { + e.preventDefault(); + if (!formValid.get()) { + return; + } + + dispatcSubmit(formState.get()); + }); + + // Component UI + return el("form", { className: "registration-form" }, onSubmit).append( + el("h2", "Create an Account"), + + // Name field + el("div", { classList: { + "form-group": true, + valid: nameValid, + invalid: S(()=> !nameValid.get() && formState.get().name) + }}).append( + el("label", { htmlFor: "name", textContent: "Full Name" }), + el("input", { + id: "name", + type: "text", + value: formState.get().name, + placeholder: "Enter your full name" + }, on("input", onChange("value"))), + el("div", { className: "validation-message", textContent: "Name must be at least 3 characters long" }), + ), + + // Email field + el("div", { classList: { + "form-group": true, + valid: emailValid, + invalid: S(()=> !emailValid.get() && formState.get().email) + }}).append( + el("label", { htmlFor: "email", textContent: "Email Address" }), + el("input", { + id: "email", + type: "email", + value: formState.get().email, + placeholder: "Enter your email address" + }, on("input", onChange("value"))), + el("div", { className: "validation-message", textContent: "Please enter a valid email address" }) + ), + + // Password field + el("div", { classList: { + "form-group": true, + valid: passwordValid, + invalid: S(()=> !passwordValid.get() && formState.get().password) + }}).append( + el("label", { htmlFor: "password", textContent: "Password" }), + el("input", { + id: "password", + type: "password", + value: formState.get().password, + placeholder: "Create a password" + }, on("input", onChange("value"))), + el("div", { + className: "validation-message", + textContent: "Password must be at least 8 characters with at least one uppercase letter and one number", + }), + ), + + // Confirm password field + el("div", { classList: { + "form-group": true, + valid: passwordsMatch, + invalid: S(()=> !passwordsMatch.get() && formState.get().confirmPassword) + }}).append( + el("label", { htmlFor: "confirmPassword", textContent: "Confirm Password" }), + el("input", { + id: "confirmPassword", + type: "password", + value: formState.get().confirmPassword, + placeholder: "Confirm your password" + }, on("input", onChange("value"))), + el("div", { className: "validation-message", textContent: "Passwords must match" }), + ), + + // Terms agreement + el("div", { className: "form-group checkbox-group" }).append( + el("input", { + id: "agreedToTerms", + type: "checkbox", + checked: formState.get().agreedToTerms + }, on("change", onChange("checked"))), + el("label", { htmlFor: "agreedToTerms", textContent: "I agree to the Terms and Conditions" }), + ), + + // Submit button + el("button", { + textContent: "Create Account", + type: "submit", + className: "submit-button", + disabled: S(() => !formValid.get()) + }), + ); +} + +// Render the component +document.body.append( + el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append( + el(InteractiveForm) + ), + el("style", ` + .form-container { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + max-width: 500px; + margin: 0 auto; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + background: #fff; + } + + h2 { + margin-top: 0; + color: #333; + margin-bottom: 1.5rem; + } + + .form-group { + margin-bottom: 1.5rem; + position: relative; + transition: all 0.3s ease; + } + + label { + display: block; + margin-bottom: 0.5rem; + color: #555; + font-weight: 500; + } + + input[type="text"], + input[type="email"], + input[type="password"] { + width: 100%; + padding: 0.75rem; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; + transition: border-color 0.3s ease; + } + + input:focus { + outline: none; + border-color: #4a90e2; + box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); + } + + .checkbox-group { + display: flex; + align-items: center; + } + + .checkbox-group label { + margin: 0 0 0 0.5rem; + } + + .validation-message { + font-size: 0.85rem; + color: #e74c3c; + margin-top: 0.5rem; + height: 0; + overflow: hidden; + opacity: 0; + transition: all 0.3s ease; + } + + .form-group.invalid .validation-message { + height: auto; + opacity: 1; + } + + .form-group.valid input { + border-color: #2ecc71; + } + + .form-group.invalid input { + border-color: #e74c3c; + } + + .submit-button { + background-color: #4a90e2; + color: white; + border: none; + border-radius: 4px; + padding: 0.75rem 1.5rem; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; + width: 100%; + } + + .submit-button:hover:not(:disabled) { + background-color: #3a7bc8; + } + + .submit-button:disabled { + background-color: #b5b5b5; + cursor: not-allowed; + } + + .success-message { + text-align: center; + color: #2ecc71; + } + + .success-message h3 { + margin-top: 0; + } + + .success-message button { + background-color: #2ecc71; + color: white; + border: none; + border-radius: 4px; + padding: 0.75rem 1.5rem; + font-size: 1rem; + cursor: pointer; + margin-top: 1rem; + } + + .success-message button:hover { + background-color: #27ae60; + } + `), +); diff --git a/docs/components/examples/case-studies/task-manager.js b/docs/components/examples/case-studies/task-manager.js new file mode 100644 index 0000000..b6d24b2 --- /dev/null +++ b/docs/components/examples/case-studies/task-manager.js @@ -0,0 +1,715 @@ +/** + * Case Study: Task Manager Application + * + * This example demonstrates: + * - Complex state management with signals + * - Drag and drop functionality + * - Local storage persistence + * - Responsive design for different devices + */ + +import { el, on, dispatchEvent, scope } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; + +/** @typedef {{ id: number, title: string, description: string, priority: string, status: string }} Task */ +/** + * Task Manager Component + * @returns {HTMLElement} Task manager UI + */ +export function TaskManager() { + // + const STORAGE_KEY = 'dde-task-manager'; + const STATUSES = { + TODO: 'todo', + IN_PROGRESS: 'in-progress', + DONE: 'done' + }; + /** @type {Task[]} */ + let initialTasks = []; + try { + const saved = localStorage.getItem(STORAGE_KEY); + if (saved) { + initialTasks = JSON.parse(saved); + } + } catch (e) { + console.error('Failed to load tasks from localStorage', e); + } + if (!initialTasks.length) { + initialTasks = [ + { id: 1, title: 'Create project structure', description: 'Set up folders and initial files', + status: STATUSES.DONE, priority: 'high' }, + { id: 2, title: 'Design UI components', description: 'Create mockups for main views', + status: STATUSES.IN_PROGRESS, priority: 'medium' }, + { id: 3, title: 'Implement authentication', description: 'Set up user login and registration', + status: STATUSES.TODO, priority: 'high' }, + { id: 4, title: 'Write documentation', description: 'Document API endpoints and usage examples', + status: STATUSES.TODO, priority: 'low' }, + ]; + } + const tasks = S(initialTasks, { + add(task) { this.value.push(task); }, + remove(id) { this.value = this.value.filter(task => task.id !== id); }, + update(id, task) { + const current= this.value.find(t => t.id === id); + if (current) Object.assign(current, task); + } + }); + S.on(tasks, value => { + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify(value)); + } catch (e) { + console.error('Failed to save tasks to localStorage', e); + } + }); + // + + const filterPriority = S('all'); + const searchQuery = S(''); + // Filtered tasks based on priority and search query + const filteredTasks = S(() => { + let filtered = tasks.get(); + + // Filter by priority + if (filterPriority.get() !== 'all') { + filtered = filtered.filter(task => task.priority === filterPriority.get()); + } + + // Filter by search query + const query = searchQuery.get().toLowerCase(); + if (query) { + filtered = filtered.filter(task => + task.title.toLowerCase().includes(query) || + task.description.toLowerCase().includes(query) + ); + } + + return filtered; + }); + /** Tasks grouped by status for display in columns */ + const tasksByStatus = S(() => { + const filtered = filteredTasks.get(); + return { + [STATUSES.TODO]: filtered.filter(t => t.status === STATUSES.TODO), + [STATUSES.IN_PROGRESS]: filtered.filter(t => t.status === STATUSES.IN_PROGRESS), + [STATUSES.DONE]: filtered.filter(t => t.status === STATUSES.DONE) + }; + }); + + // signals and handlers for adding new tasks + const newTask = { title: '', description: '', priority: 'medium' }; + const onAddTask = e => { + e.preventDefault(); + if (!newTask.title) return; + + S.action(tasks, "add", { + id: Date.now(), + status: STATUSES.TODO, + ...newTask + }); + e.target.reset(); + }; + // + const onCardEdit= on("card:edit", /** @param {CardEditEvent} ev */({ detail: [ id, task ] })=> + S.action(tasks, "update", id, task)); + const onCardDelete= on("card:delete", /** @param {CardDeleteEvent} ev */({ detail: id })=> + S.action(tasks, "remove", id)); + + const { onDragable, onDragArea }= moveElementAddon( + (id, status) => S.action(tasks, "update", id, { status }) + ); + + // Build the task manager UI + return el("div", { className: "task-manager" }).append( + el("header", { className: "app-header" }).append( + el("h1", "DDE Task Manager"), + el("div", { className: "app-controls" }).append( + el("input", { + type: "text", + placeholder: "Search tasks...", + value: searchQuery.get() + }, on("input", e => searchQuery.set(e.target.value))), + el("select", null, + on.defer(el=> el.value= filterPriority.get()), + on("change", e => filterPriority.set(e.target.value)) + ).append( + el("option", { value: "all", textContent: "All Priorities" }), + el("option", { value: "low", textContent: "Low Priority" }), + el("option", { value: "medium", textContent: "Medium Priority" }), + el("option", { value: "high", textContent: "High Priority" }) + ) + ) + ), + + // Add new task form + el("form", { className: "new-task-form" }, on("submit", onAddTask)).append( + el("div", { className: "form-row" }).append( + el("input", { + type: "text", + placeholder: "New task title", + value: newTask.title, + required: true + }, on("input", e => newTask.title= e.target.value.trim())), + el("select", null, + on.defer(el=> el.value= newTask.priority), + on("change", e => newTask.priority= e.target.value) + ).append( + el("option", { value: "low", textContent: "Low" }), + el("option", { value: "medium", textContent: "Medium" }), + el("option", { value: "high", textContent: "High" }) + ), + el("button", { type: "submit", className: "add-btn" }).append("Add Task") + ), + el("textarea", { + placeholder: "Task description (optional)", + value: newTask.description + }, on("input", e => newTask.description= e.target.value.trim())) + ), + + // Task board with columns + el("div", { className: "task-board" }).append( + // Todo column + el("div", { + id: `column-${STATUSES.TODO}`, + className: "task-column" + }, onDragArea(STATUSES.TODO)).append( + el("h2", { className: "column-header" }).append( + "To Do ", + el("span", { + textContent: S(() => tasksByStatus.get()[STATUSES.TODO].length), + className: "task-count" + }), + ), + S.el(S(() => tasksByStatus.get()[STATUSES.TODO]), tasks => + el("div", { className: "column-tasks" }).append( + ...tasks.map(task=> el(TaskCard, { task, onDragable }, onCardEdit, onCardDelete)) + ) + ) + ), + + // In Progress column + el("div", { + id: `column-${STATUSES.IN_PROGRESS}`, + className: "task-column" + }, onDragArea(STATUSES.IN_PROGRESS)).append( + el("h2", { className: "column-header" }).append( + "In Progress ", + el("span", { + textContent: S(() => tasksByStatus.get()[STATUSES.IN_PROGRESS].length), + className: "task-count", + }), + ), + S.el(S(() => tasksByStatus.get()[STATUSES.IN_PROGRESS]), tasks => + el("div", { className: "column-tasks" }).append( + ...tasks.map(task=> el(TaskCard, { task, onDragable }, onCardEdit, onCardDelete)) + ) + ) + ), + + // Done column + el("div", { + id: `column-${STATUSES.DONE}`, + className: "task-column" + }, onDragArea(STATUSES.DONE)).append( + el("h2", { className: "column-header" }).append( + "Done ", + el("span", { + textContent: S(() => tasksByStatus.get()[STATUSES.DONE].length), + className: "task-count", + }), + ), + S.el(S(() => tasksByStatus.get()[STATUSES.DONE]), tasks => + el("div", { className: "column-tasks" }).append( + ...tasks.map(task=> el(TaskCard, { task, onDragable }, onCardEdit, onCardDelete)) + ) + ) + ) + ), + ); +} +/** @typedef {CustomEvent<[ string, Task ]>} CardEditEvent */ +/** @typedef {CustomEvent} CardDeleteEvent */ +/** + * Task Card Component + * @type {(props: { task: Task, onDragable: (id: number) => ddeElementAddon }) => HTMLElement} + * @fires {CardEditEvent} card:edit + * @fires {CardDeleteEvent} card:delete + * */ +function TaskCard({ task, onDragable }){ + const { host }= scope; + const isEditing = S(false); + const onEditStart = () => isEditing.set(true); + + const dispatchEdit= dispatchEvent("card:edit", host); + const dispatchDelete= dispatchEvent("card:delete", host).bind(null, task.id); + + return el("div", { + id: `task-${task.id}`, + className: `task-card priority-${task.priority}`, + draggable: true + }, onDragable(task.id)).append( + S.el(isEditing, editing => editing + ? el(EditMode) + : el().append( + el("div", { className: "task-header" }).append( + el("h3", { className: "task-title", textContent: task.title }), + el("div", { className: "task-actions" }).append( + el("button", { + textContent: "✎", + className: "edit-btn", + ariaLabel: "Edit task" + }, on("click", onEditStart)), + el("button", { + textContent: "✕", + className: "delete-btn", + ariaLabel: "Delete task" + }, on("click", dispatchDelete)) + ) + ), + !task.description + ? el() + : el("p", { className: "task-description", textContent: task.description }), + el("div", { className: "task-meta" }).append( + el("span", { + className: `priority-badge priority-${task.priority}`, + textContent: task.priority.charAt(0).toUpperCase() + task.priority.slice(1) + }) + ) + ) + ) + ); + function EditMode(){ + const onSubmit = on("submit", e => { + e.preventDefault(); + const formData = new FormData(/** @type {HTMLFormElement} */(e.target)); + const title = formData.get("title"); + const description = formData.get("description"); + const priority = formData.get("priority"); + isEditing.set(false); + dispatchEdit([ task.id, { title, description, priority } ]); + }) + const onEditCancel = () => isEditing.set(false); + + return el("form", { className: "task-edit-form" }, onSubmit).append( + el("input", { + name: "title", + className: "task-title-input", + defaultValue: task.title, + placeholder: "Task title", + required: true, + autoFocus: true + }), + el("textarea", { + name: "description", + className: "task-desc-input", + defaultValue: task.description, + placeholder: "Description (optional)" + }), + el("select", { + name: "priority", + }, on.defer(el=> el.value = task.priority)).append( + el("option", { value: "low", textContent: "Low Priority" }), + el("option", { value: "medium", textContent: "Medium Priority" }), + el("option", { value: "high", textContent: "High Priority" }) + ), + el("div", { className: "task-edit-actions" }).append( + el("button", { + textContent: "Cancel", + type: "button", + className: "cancel-btn" + }, on("click", onEditCancel)), + el("button", { + textContent: "Save", + type: "submit", + className: "save-btn" + }) + ) + ); + } +} + +/** + * Helper function to handle move an element + * @param {(id: string, status: string) => void} onMoved + * */ +function moveElementAddon(onMoved){ + let draggedTaskId = null; + function onDragable(id) { + return element => { + on("dragstart", e => { + draggedTaskId= id; + e.dataTransfer.effectAllowed = 'move'; + + // Add some styling to the element being dragged + setTimeout(() => { + const el = document.getElementById(`task-${id}`); + if (el) el.classList.add('dragging'); + }, 0); + })(element); + + on("dragend", () => { + draggedTaskId= null; + + // Remove the styling + const el = document.getElementById(`task-${id}`); + if (el) el.classList.remove('dragging'); + })(element); + }; + } + function onDragArea(status) { + return element => { + on("dragover", e => { + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + + // Add a visual indicator for the drop target + const column = document.getElementById(`column-${status}`); + if (column) column.classList.add('drag-over'); + })(element); + + on("dragleave", () => { + // Remove the visual indicator + const column = document.getElementById(`column-${status}`); + if (column) column.classList.remove('drag-over'); + })(element); + + on("drop", e => { + e.preventDefault(); + const id = draggedTaskId; + if (id) onMoved(id, status); + // Remove the visual indicator + const column = document.getElementById(`column-${status}`); + if (column) column.classList.remove('drag-over'); + })(element); + }; + } + return { onDragable, onDragArea }; +} + +// Render the component +document.body.append( + el("div", { style: "padding: 20px; background: #f5f5f5; min-height: 100vh;" }).append( + el(TaskManager) + ), + el("style", ` + .task-manager { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + max-width: 1200px; + margin: 0 auto; + padding: 1rem; + color: #333; + } + + .app-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; + flex-wrap: wrap; + gap: 1rem; + } + + .app-header h1 { + margin: 0; + color: #2d3748; + } + + .app-controls { + display: flex; + gap: 1rem; + } + + .app-controls input, + .app-controls select { + padding: 0.5rem; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-size: 0.9rem; + } + + .new-task-form { + background: white; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + margin-bottom: 2rem; + } + + .form-row { + display: flex; + gap: 1rem; + margin-bottom: 1rem; + } + + .form-row input { + flex-grow: 1; + padding: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-size: 1rem; + } + + .form-row select { + width: 100px; + padding: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-size: 1rem; + } + + .add-btn { + background: #4a90e2; + color: white; + border: none; + border-radius: 4px; + padding: 0.75rem 1.5rem; + font-size: 1rem; + cursor: pointer; + transition: background 0.2s ease; + } + + .add-btn:hover { + background: #3a7bc8; + } + + .new-task-form textarea { + width: 100%; + padding: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-size: 1rem; + resize: vertical; + min-height: 80px; + } + + .task-board { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + } + + .task-column { + background: #f7fafc; + border-radius: 8px; + padding: 1rem; + min-height: 400px; + transition: background 0.2s ease; + } + + .column-header { + margin-top: 0; + padding-bottom: 0.75rem; + border-bottom: 2px solid #e2e8f0; + font-size: 1.25rem; + color: #2d3748; + display: flex; + align-items: center; + } + + .task-count { + display: inline-flex; + justify-content: center; + align-items: center; + background: #e2e8f0; + color: #4a5568; + border-radius: 50%; + width: 25px; + height: 25px; + font-size: 0.875rem; + margin-left: 0.5rem; + } + + .column-tasks { + margin-top: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; + min-height: 200px; + } + + .task-card { + background: white; + border-radius: 6px; + padding: 1rem; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); + cursor: grab; + transition: transform 0.2s ease, box-shadow 0.2s ease; + position: relative; + border-left: 4px solid #ccc; + } + + .task-card:hover { + transform: translateY(-3px); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + } + + .task-card.dragging { + opacity: 0.5; + cursor: grabbing; + } + + .task-card.priority-low { + border-left-color: #38b2ac; + } + + .task-card.priority-medium { + border-left-color: #ecc94b; + } + + .task-card.priority-high { + border-left-color: #e53e3e; + } + + .task-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 0.5rem; + } + + .task-title { + margin: 0; + font-size: 1.1rem; + color: #2d3748; + word-break: break-word; + } + + .task-description { + margin: 0.5rem 0; + font-size: 0.9rem; + color: #4a5568; + word-break: break-word; + } + + .task-actions { + display: flex; + gap: 0.5rem; + } + + .edit-btn, + .delete-btn { + background: none; + border: none; + font-size: 1rem; + cursor: pointer; + width: 24px; + height: 24px; + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 50%; + color: #718096; + transition: background 0.2s ease, color 0.2s ease; + } + + .edit-btn:hover { + background: #edf2f7; + color: #4a5568; + } + + .delete-btn:hover { + background: #fed7d7; + color: #e53e3e; + } + + .task-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 0.75rem; + } + + .priority-badge { + font-size: 0.75rem; + padding: 0.2rem 0.5rem; + border-radius: 4px; + font-weight: 500; + } + + .priority-badge.priority-low { + background: #e6fffa; + color: #2c7a7b; + } + + .priority-badge.priority-medium { + background: #fefcbf; + color: #975a16; + } + + .priority-badge.priority-high { + background: #fed7d7; + color: #c53030; + } + + .drag-over { + background: #f0f9ff; + border: 2px dashed #4a90e2; + } + + .task-edit-form { + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .task-title-input, + .task-desc-input { + width: 100%; + padding: 0.5rem; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-size: 0.9rem; + } + + .task-desc-input { + min-height: 60px; + resize: vertical; + } + + .task-edit-actions { + display: flex; + justify-content: flex-end; + gap: 0.5rem; + margin-top: 0.5rem; + } + + .cancel-btn, + .save-btn { + padding: 0.4rem 0.75rem; + border-radius: 4px; + font-size: 0.9rem; + cursor: pointer; + } + + .cancel-btn { + background: #edf2f7; + color: #4a5568; + border: 1px solid #e2e8f0; + } + + .save-btn { + background: #4a90e2; + color: white; + border: none; + } + + @media (max-width: 768px) { + .app-header { + flex-direction: column; + align-items: flex-start; + } + + .app-controls { + width: 100%; + flex-direction: column; + } + + .form-row { + flex-direction: column; + } + + .task-board { + grid-template-columns: 1fr; + } + } + `) +); diff --git a/docs/components/examples/debugging/debouncing.js b/docs/components/examples/debugging/debouncing.js index ccbb618..9ceaae3 100644 --- a/docs/components/examples/debugging/debouncing.js +++ b/docs/components/examples/debugging/debouncing.js @@ -1,5 +1,6 @@ import { S } from "deka-dom-el/signals"; -// Debouncing signal updates + +// ===== Approach 1: Traditional debouncing with utility function ===== function debounce(func, wait) { let timeout; return (...args)=> { @@ -8,8 +9,59 @@ function debounce(func, wait) { }; } -const inputSignal= S(""); -const debouncedSet= debounce(value => inputSignal.set(value), 300); +const inputSignal = S(""); +const debouncedSet = debounce(value => inputSignal.set(value), 300); // In your input handler -inputElement.addEventListener("input", e=> debouncedSet(e.target.value)); +inputElement.addEventListener("input", e => debouncedSet(e.target.value)); + +// ===== Approach 2: Signal debouncing utility ===== +/** + * Creates a debounced signal that only updates after delay + * @param {any} initialValue Initial signal value + * @param {number} delay Debounce delay in ms + */ +function createDebouncedSignal(initialValue, delay = 300) { + // Create two signals: one for immediate updates, one for debounced values + const immediateSignal = S(initialValue); + const debouncedSignal = S(initialValue); + + // Keep track of the timeout + let timeout = null; + + // Set up a listener on the immediate signal + S.on(immediateSignal, value => { + // Clear any existing timeout + if (timeout) clearTimeout(timeout); + + // Set a new timeout to update the debounced signal + timeout = setTimeout(() => { + debouncedSignal.set(value); + }, delay); + }); + + // Return an object with both signals and a setter function + return { + // The raw signal that updates immediately + raw: immediateSignal, + // The debounced signal that only updates after delay + debounced: debouncedSignal, + // Setter function to update the immediate signal + set: value => immediateSignal.set(value) + }; +} + +// Usage example +const searchInput = createDebouncedSignal("", 300); + +// Log immediate changes for demonstration +S.on(searchInput.raw, value => console.log("Input changed to:", value)); + +// Only perform expensive operations on the debounced value +S.on(searchInput.debounced, value => { + console.log("Performing search with:", value); + // Expensive operation would go here +}); + +// In your input handler +searchElement.addEventListener("input", e => searchInput.set(e.target.value)); diff --git a/docs/components/examples/events/live-cycle.js b/docs/components/examples/events/live-cycle.js index e24a9c8..ff01944 100644 --- a/docs/components/examples/events/live-cycle.js +++ b/docs/components/examples/events/live-cycle.js @@ -1,15 +1,28 @@ import { el, on } from "deka-dom-el"; -const paragraph= el("p", "See lifecycle events in console.", - el=> log({ type: "dde:created", detail: el }), - on.connected(log), - on.disconnected(log), -); +function allLifecycleEvents(){ + return el("form", null, + el=> log({ type: "dde:created", detail: el }), + on.connected(log), + on.disconnected(log), + ).append( + el("select", { id: "country" }, on.defer(select => { + // This runs when the select is ready with all its options + select.value = "cz"; // Pre-select Czechia + log({ type: "dde:on.defer", detail: select }); + })).append( + el("option", { value: "au", textContent: "Australia" }), + el("option", { value: "ca", textContent: "Canada" }), + el("option", { value: "cz", textContent: "Czechia" }), + ), + el("p", "See lifecycle events in console."), + ); +} document.body.append( - paragraph, - el("button", "Update attribute", on("click", ()=> paragraph.setAttribute("test", Math.random().toString()))), - " ", - el("button", "Remove", on("click", ()=> paragraph.remove())) + el(allLifecycleEvents), + el("button", "Remove Element", on("click", function(){ + this.previousSibling.remove(); + })) ); /** @param {Partial} event */ diff --git a/docs/components/examples/introducing/helloWorld.js b/docs/components/examples/introducing/helloWorld.js index 774dc44..560192a 100644 --- a/docs/components/examples/introducing/helloWorld.js +++ b/docs/components/examples/introducing/helloWorld.js @@ -7,20 +7,20 @@ function HelloWorld({ emoji = "🚀" }) { const clicks = S(0); return el().append( - // PART 2: Bind state to UI elements - el("p", { - className: "greeting", - // This paragraph automatically updates when clicks changes - textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`) - }), + // PART 2: Bind state to UI elements + el("p", { + className: "greeting", + // This paragraph automatically updates when clicks changes + textContent: S(() => `Hello World ${emoji.repeat(clicks.get())}`) + }), - // PART 3: Update state in response to events - el("button", { - type: "button", - textContent: "Add emoji", - // When clicked, update the state - onclick: () => clicks.set(clicks.get() + 1) - }) + // PART 3: Update state in response to events + el("button", { + type: "button", + textContent: "Add emoji", + // When clicked, update the state + onclick: () => clicks.set(clicks.get() + 1) + }) ); } diff --git a/docs/components/examples/ireland-test/counter.js b/docs/components/examples/ireland-test/counter.js index 9832883..4b995d5 100644 --- a/docs/components/examples/ireland-test/counter.js +++ b/docs/components/examples/ireland-test/counter.js @@ -9,7 +9,7 @@ document.body.append( padding: 1em; margin: 1em; } - `.trim()) +`.trim()) ); export function CounterStandard() { diff --git a/docs/components/examples/reallife/todomvc.js b/docs/components/examples/reallife/todomvc.js index daa56b3..b2c0985 100644 --- a/docs/components/examples/reallife/todomvc.js +++ b/docs/components/examples/reallife/todomvc.js @@ -13,41 +13,38 @@ import { S } from "deka-dom-el/signals"; * @returns {HTMLElement} The root TodoMVC application element */ function Todos(){ - const pageS = routerSignal(S); + const { signal } = scope; + const pageS = routerSignal(S, signal); const todosS = todosSignal(); /** Derived signal that filters todos based on current route */ - const filteredTodosS = S(()=> { + const todosFilteredS = S(()=> { const todos = todosS.get(); const filter = pageS.get(); + if (filter === "all") return todos; return todos.filter(todo => { if (filter === "active") return !todo.completed; if (filter === "completed") return todo.completed; - return true; // "all" }); }); - - // Setup hash change listener - window.addEventListener("hashchange", () => { - const hash = location.hash.replace("#", "") || "all"; - S.action(pageS, "set", /** @type {"all"|"active"|"completed"} */(hash)); - }); + const todosRemainingS = S(()=> todosS.get().filter(todo => !todo.completed).length); /** @type {ddeElementAddon} */ const onToggleAll = on("change", event => { const checked = /** @type {HTMLInputElement} */ (event.target).checked; S.action(todosS, "completeAll", checked); }); + const formNewTodo = "newTodo"; /** @type {ddeElementAddon} */ const onSubmitNewTodo = on("submit", event => { event.preventDefault(); const input = /** @type {HTMLInputElement} */( - /** @type {HTMLFormElement} */(event.target).elements.namedItem("newTodo") + /** @type {HTMLFormElement} */(event.target).elements.namedItem(formNewTodo) ); const title = input.value.trim(); - if (title) { - S.action(todosS, "add", title); - input.value = ""; - } + if (!title) return; + + S.action(todosS, "add", title); + input.value = ""; }); const onClearCompleted = on("click", () => S.action(todosS, "clearCompleted")); const onDelete = on("todo:delete", ev => @@ -61,15 +58,16 @@ function Todos(){ el("form", null, onSubmitNewTodo).append( el("input", { className: "new-todo", - name: "newTodo", + name: formNewTodo, placeholder: "What needs to be done?", autocomplete: "off", autofocus: true }) ) ), - S.el(todosS, todos => todos.length - ? el("main", { className: "main" }).append( + S.el(todosS, todos => !todos.length + ? el() + : el("main", { className: "main" }).append( el("input", { id: "toggle-all", className: "toggle-all", @@ -77,55 +75,48 @@ function Todos(){ }, onToggleAll), el("label", { htmlFor: "toggle-all", title: "Mark all as complete" }), el("ul", { className: "todo-list" }).append( - S.el(filteredTodosS, filteredTodos => filteredTodos.map(todo => + S.el(todosFilteredS, filteredTodos => filteredTodos.map(todo => memo(todo.id, ()=> el(TodoItem, todo, onDelete, onEdit))) ) ) ) - : el() ), - S.el(todosS, todos => memo(todos.length, length=> length - ? el("footer", { className: "footer" }).append( + S.el(todosS, todos => !todos.length + ? el() + : el("footer", { className: "footer" }).append( el("span", { className: "todo-count" }).append( - S.el(S(() => todosS.get().filter(todo => !todo.completed).length), - length=> el("strong").append( - length + " ", - length === 1 ? "item left" : "items left" + noOfLeft() + ), + memo("filters", ()=> + el("ul", { className: "filters" }).append( + ...[ "All", "Active", "Completed" ].map(textContent => + el("li").append( + el("a", { + textContent, + classList: { selected: S(()=> pageS.get() === textContent.toLowerCase()) }, + href: `#${textContent.toLowerCase()}` + }) + ) ) - ) - ), - el("ul", { className: "filters" }).append( - el("li").append( - el("a", { - textContent: "All", - className: S(()=> pageS.get() === "all" ? "selected" : ""), - href: "#" - }), ), - el("li").append( - el("a", { - textContent: "Active", - className: S(()=> pageS.get() === "active" ? "selected" : ""), - href: "#active" - }), - ), - el("li").append( - el("a", { - textContent: "Completed", - className: S(()=> pageS.get() === "completed" ? "selected" : ""), - href: "#completed" - }), - ) ), - S.el(S(() => todosS.get().some(todo => todo.completed)), - hasTodosCompleted=> hasTodosCompleted - ? el("button", { textContent: "Clear completed", className: "clear-completed" }, onClearCompleted) - : el() - ) + todos.length - todosRemainingS.get() === 0 + ? el() + : memo("delete", () => + el("button", + { textContent: "Clear completed", className: "clear-completed" }, + onClearCompleted) + ) ) - : el() - )) + ) ); + function noOfLeft(){ + const length = todosRemainingS.get(); + return el("strong").append( + length + " ", + length === 1 ? "item left" : "items left" + ) + } } /** @@ -177,10 +168,11 @@ function TodoItem({ id, title, completed }) { } isEditing.set(false); }); + const formEdit = "edit"; /** @type {ddeElementAddon} */ const onSubmitEdit = on("submit", event => { event.preventDefault(); - const input = /** @type {HTMLFormElement} */(event.target).elements.namedItem("edit"); + const input = /** @type {HTMLFormElement} */(event.target).elements.namedItem(formEdit); const value = /** @type {HTMLInputElement} */(input).value.trim(); if (value) { dispatchEdit({ id, title: value }); @@ -207,18 +199,17 @@ function TodoItem({ id, title, completed }) { checked: completed }, onToggleCompleted), el("label", { textContent: title }, onStartEdit), - el("button", { className: "destroy" }, onDelete) + el("button", { ariaLabel: "Delete todo", className: "destroy" }, onDelete) ), - S.el(isEditing, editing => editing - ? el("form", null, onSubmitEdit).append( + S.el(isEditing, editing => !editing + ? el() + : el("form", null, onSubmitEdit).append( el("input", { className: "edit", - name: "edit", + name: formEdit, value: title, - "data-id": id }, onBlurEdit, onKeyDown, addFocus) ) - : el() ) ); } @@ -342,6 +333,7 @@ function todosSignal(){ localStorage.setItem(store_key, JSON.stringify(value)); } catch (e) { console.error("Failed to save todos to localStorage", e); + // Optionally, provide user feedback } }); return out; @@ -350,20 +342,30 @@ function todosSignal(){ /** * Creates a signal for managing route state * - * @param {typeof S} signal - The signal constructor + * @param {typeof S} signal - The signal constructor from a library + * @param {AbortSignal} abortSignal */ -function routerSignal(signal){ +function routerSignal(signal, abortSignal){ const initial = location.hash.replace("#", "") || "all"; - return signal(initial, { + const out = signal(initial, { /** * Set the current route * @param {"all"|"active"|"completed"} hash - The route to set */ set(hash){ location.hash = hash; - this.value = hash; - } + //this.value = hash; + }, }); + + // Setup hash change listener + window.addEventListener("hashchange", () => { + const hash = location.hash.replace("#", "") || "all"; + //S.action(out, "set", /** @type {"all"|"active"|"completed"} */(hash)); + out.set(hash); + }, { signal: abortSignal }); + + return out; } /** diff --git a/docs/components/examples/signals/actions-todos.js b/docs/components/examples/signals/actions-todos.js index 9a15932..a69f824 100644 --- a/docs/components/examples/signals/actions-todos.js +++ b/docs/components/examples/signals/actions-todos.js @@ -7,7 +7,7 @@ const todos= S([], { const removed= this.value.pop(); if(removed) S.clear(removed); }, - [S.symbols.onclear](){ // this covers `O.clear(todos)` + [S.symbols.onclear](){ // this covers `S.clear(todos)` S.clear(...this.value); } }); diff --git a/docs/components/getLibraryUrl.html.js b/docs/components/getLibraryUrl.html.js new file mode 100644 index 0000000..9f02992 --- /dev/null +++ b/docs/components/getLibraryUrl.html.js @@ -0,0 +1,83 @@ +import { styles } from "../ssr.js"; + +styles.css` +#library-url-form { + display: flex; + flex-flow: column nowrap; + gap: 1rem; + padding: 1.5rem; + border-radius: var(--border-radius); + background-color: var(--bg-sidebar); + box-shadow: var(--shadow); + border: 1px solid var(--border); + margin: 1.5rem 0; +} + +#library-url-form .selectors { + display: flex; + flex-flow: row wrap; + gap: 0.75rem; +} + +#library-url-form output { + display: flex; + flex-flow: column nowrap; + gap: 0.75rem; + margin-top: 0.5rem; +} + +#library-url-form output p { + font-weight: 500; + margin: 0.25rem 0; + color: var(--text-light); +} + +#library-url-form .url-title { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: -0.25rem; +} + +#library-url-form .url-title strong { + font-family: var(--font-mono); + font-size: 0.95rem; +} + +#library-url-form .url-title span { + color: var(--text-light); + font-size: 0.9rem; +} + +#library-url-form .code { + margin-bottom: 1rem; +} + +#library-url-form .info-text { + font-size: 0.9rem; + font-style: italic; + margin-top: 1rem; + color: var(--text-light); +} + +@media (max-width: 768px) { + #library-url-form .selectors { + flex-direction: column; + } + + #library-url-form select { + width: 100%; + } +} +`; + +import { el } from "deka-dom-el"; +import { ireland } from "./ireland.html.js"; + +export function getLibraryUrl({ page_id }){ + return el(ireland, { + src: new URL("./getLibraryUrl.js.js", import.meta.url), + exportName: "getLibraryUrl", + page_id, + }); +} diff --git a/docs/components/getLibraryUrl.js.js b/docs/components/getLibraryUrl.js.js new file mode 100644 index 0000000..786ed3c --- /dev/null +++ b/docs/components/getLibraryUrl.js.js @@ -0,0 +1,92 @@ +import { el, on } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; + +const url_base= { + jsdeka: "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/", +}; + +export function getLibraryUrl(){ + const lib= S([ "esm", "-with-signals", ".min" ]); + const url= S(()=> url_base.jsdeka+lib.get().join("")); + const urlLabel= S(() => { + const [format, signalsPart, minified] = lib.get(); + const formatText = format === "esm" ? "ES Module" : "IIFE"; + const signalsText = signalsPart ? " with signals" : ""; + const minText = minified ? " (minified)" : ""; + return `${formatText}${signalsText}${minText}`; + }) + const onSubmit= on("submit", ev => { + ev.preventDefault(); + const form= new FormData(/** @type {HTMLFormElement} */ (ev.target)); + lib.set([ + "module", + "what", + "minified", + ].map(name => /** @type {string} */(form.get(name)))); + }); + const onChangeSubmit= on("change", + ev=> /** @type {HTMLSelectElement} */(ev.target).form.requestSubmit() + ); + + return el("form", { id: "library-url-form" }, onSubmit).append( + el("h4", "Select your preferred library format:"), + el("div", { className: "selectors" }).append( + el("select", { name: "module" }, onChangeSubmit, + on.defer(select => select.value = lib.get()[0]), + ).append( + el("option", { value: "esm", textContent: "ESM — modern JavaScript module" }), + el("option", { value: "iife", textContent: "IIFE — legacy JavaScript with DDE global variable" }), + ), + el("select", { name: "what" }, onChangeSubmit, + on.defer(select => select.value = lib.get()[1]), + ).append( + el("option", { value: "", textContent: "DOM part only" }), + el("option", { value: "-with-signals", textContent: "DOM + signals" }), + ), + el("select", { name: "minified" }, onChangeSubmit, + on.defer(select => select.value = lib.get()[2]), + ).append( + el("option", { value: "", textContent: "Unminified" }), + el("option", { value: ".min", textContent: "Minified" }), + ), + ), + el("output").append( + el("div", { className: "url-title" }).append( + el("strong", "JavaScript:"), + el("span", urlLabel), + ), + el(code, { value: S(()=> url.get()+".js") }), + el("div", { className: "url-title" }).append( + el("strong", "TypeScript definition:") + ), + el(code, { value: S(()=> url.get()+".d.ts") }), + el("p", { className: "info-text", + textContent: "Use the CDN URL in your HTML or import it in your JavaScript files." + }) + ) + ) +} +/** @param {{ value: ddeSignal }} props */ +function code({ value }){ + /** @type {ddeSignal<"Copy"|"Copied!">} */ + const textContent= S("Copy"); + const onCopy= on("click", () => { + navigator.clipboard.writeText(value.get()); + + textContent.set("Copied!"); + setTimeout(() => { + textContent.set("Copy"); + }, 1500); + }); + return el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append( + el("code").append( + el("pre", value), + ), + el("button", { + className: "copy-button", + textContent, + ariaLabel: "Copy code to clipboard", + }, onCopy) + ) + ; +} diff --git a/docs/components/ireland.html.js b/docs/components/ireland.html.js index 8387664..15b42e2 100644 --- a/docs/components/ireland.html.js +++ b/docs/components/ireland.html.js @@ -1,3 +1,33 @@ +import { styles } from "../ssr.js"; +styles.css` +[data-dde-mark] { + opacity: .5; + filter: grayscale(); + + @media (prefers-reduced-motion: no-preference) { + animation: fadein 2s infinite ease forwards;; + } + + position: relative; + &::after { + content: "Loading Ireland…"; + background-color: rgba(0, 0, 0, .5); + color: white; + font-weight: bold; + border-radius: 5px; + padding: 5px 10px; + position: absolute; + top: 3%; + left: 50%; + transform: translateX(-50%); + } +} +@keyframes fadein { + from { opacity: .5; } + to { opacity: .85; } +} +`; + import { el, queue } from "deka-dom-el"; import { addEventListener, registerClientFile } from "../ssr.js"; import { relative } from "node:path"; @@ -21,10 +51,17 @@ export function ireland({ src, exportName = "default", props = {} }) { const path= "./"+relative(dir, src.pathname); const id = "ireland-" + generateComponentId(src); const element = el.mark({ type: "later", name: ireland.name }); - queue(import(path).then(module => { - const component = module[exportName]; - element.replaceWith(el(component, props, mark(id))); - })); + queue( + import(path) + .then(module => { + const component = module[exportName]; + const content= el(component, props, mark(id)); + element.replaceWith(content); + content.querySelectorAll("input, textarea, button") + .forEach(el=> el.disabled= true); + }) + .catch(console.error) + ); if(!componentsRegistry.size) addEventListener("oneachrender", registerClientPart); diff --git a/docs/components/mnemonic/signals-init.js b/docs/components/mnemonic/signals-init.js index 2e29529..6e4429e 100644 --- a/docs/components/mnemonic/signals-init.js +++ b/docs/components/mnemonic/signals-init.js @@ -14,10 +14,6 @@ export function mnemonic(){ el("code", "S.on(, [, ])"), " — listen to the signal value changes", ), - el("li").append( - el("code", "S.clear(...)"), - " — off and clear signals", - ), el("li").append( el("code", "S(, )"), " — signal: pattern to create complex reactive objects/arrays", @@ -29,6 +25,11 @@ export function mnemonic(){ el("li").append( el("code", "S.el(, )"), " — render partial dom structure (template) based on the current signal value", - ) + ), + el("li").append( + el("code", "S.clear(...)"), + " — off and clear signals (most of the time it is not needed as reactive ", + "attributes and elements are cleared automatically)", + ), ); } diff --git a/docs/components/scrollTop.css.js b/docs/components/scrollTop.html.js similarity index 75% rename from docs/components/scrollTop.css.js rename to docs/components/scrollTop.html.js index da37671..152b851 100644 --- a/docs/components/scrollTop.css.js +++ b/docs/components/scrollTop.html.js @@ -37,3 +37,14 @@ styles.css` } } `; + +import { el } from "deka-dom-el"; +import { ireland } from "./ireland.html.js"; + +export function scrollTop(){ + return el(ireland, { + src: new URL("./scrollTop.js.js", import.meta.url), + exportName: "scrollTop", + page_id: "*", + }); +} diff --git a/docs/global.css.js b/docs/global.css.js index eca1342..11241cd 100644 --- a/docs/global.css.js +++ b/docs/global.css.js @@ -86,7 +86,7 @@ html { } :focus-visible { - outline: 3px solid hsl(231, 48%, 70%); + outline: 3px solid var(--primary-light); outline-offset: 2px; } @@ -193,6 +193,34 @@ pre code { background-color: transparent; padding: 0; } +figure { + width: 100%; + text-align: center; + color: var(--text-light); + border: 1px dashed var(--border); + border-radius: var(--border-radius); + + img { + object-fit: contain; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + max-width: 100%; + } +} +select { + padding: 0.5rem 0.75rem; + border-radius: var(--border-radius); + border: 1px solid var(--border); + background-color: var(--bg); + color: var(--text); + cursor: pointer; + font-size: 0.95rem; + font-family: var(--font-main); +} + +select:hover { + border-color: var(--primary); +} /* Layout */ body { @@ -234,7 +262,7 @@ body > main { } body > main > *, body > main slot > * { width: 100%; - max-width: 100%; + max-width: calc(var(--body-max-width) * 5/3); margin-inline: auto; grid-column: main; } @@ -267,9 +295,8 @@ body > main h3, body > main h4 { /* Boxes */ .illustration{ grid-column: full-main; - width: calc(100% - .75em); } -.illustration:not(:has( .comparison)){ +.illustration:not(:has( .comparison)):not(:has( .tabs)) { grid-column: main; pre { diff --git a/docs/index.html.js b/docs/index.html.js index bfcf6a8..b0bec30 100644 --- a/docs/index.html.js +++ b/docs/index.html.js @@ -1,3 +1,4 @@ +import "./components/getLibraryUrl.html.js"; import { t, T } from "./utils/index.js"; export const info= { href: "./", @@ -11,6 +12,7 @@ import { simplePage } from "./layout/simplePage.html.js"; import { h3 } from "./components/pageUtils.html.js"; import { example } from "./components/example.html.js"; import { code } from "./components/code.html.js"; +import { getLibraryUrl } from "./components/getLibraryUrl.html.js"; /** @param {string} url */ const fileURL= url=> new URL(url, import.meta.url); const references= { @@ -27,13 +29,13 @@ const references= { export function page({ pkg, info }){ const page_id= info.id; return el(simplePage, { info, pkg }).append( - el("p").append(...T` + el("p").append(T` Welcome to Deka DOM Elements (dd or DDE) — a lightweight library for building dynamic UIs with a declarative syntax that stays close to the native DOM API. dd gives you powerful reactive tools without the complexity and overhead of larger frameworks. `), el("div", { className: "callout" }).append( - el("h4", t`What Makes dd Special`), + el("h4", t`Key Benefits of dd`), el("ul").append( el("li", t`No build step required — use directly in the browser`), el("li", t`Lightweight core (~10–15kB minified) without unnecessary dependencies (0 at now 😇)`), @@ -44,8 +46,8 @@ export function page({ pkg, info }){ ), el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }), - el(h3, { textContent: t`The 3PS Pattern: A Better Way to Build UIs`, id: "h-3ps" }), - el("p").append(...T` + el(h3, { textContent: t`The 3PS Pattern: Simplified architecture pattern`, id: "h-3ps" }), + el("p").append(T` At the heart of dd is the 3PS (3-Part Separation) pattern. This simple yet powerful approach helps you organize your UI code into three distinct areas, making your applications more maintainable and easier to reason about. @@ -62,67 +64,98 @@ export function page({ pkg, info }){ ) ) ), - el("p").append(...T` + el("p").append(T` The 3PS pattern separates your code into three clear parts: `), el("ol").append( - el("li").append(...T` + el("li").append(T` ${el("strong", "Create State")}: Define your application’s reactive data using signals `), - el("li").append(...T` - ${el("strong", "Bind to Elements")}: Define how UI elements react to state changes + el("li").append(T` + ${el("strong", "React to Changes")}: Define how UI elements and other parts of your app react to state + changes `), - el("li").append(...T` + el("li").append(T` ${el("strong", "Update State")}: Modify state in response to user events or other triggers `) ), - el("p").append(...T` + el("p").append(T` By separating these concerns, your code becomes more modular, testable, and easier to maintain. This - approach shares principles with more formal patterns like ${el("a", { textContent: "MVVM", - ...references.w_mvv })} and ${el("a", { textContent: "MVC", ...references.w_mvc })}, but with less - overhead and complexity. + approach ${el("strong", "is not")} something new and/or special to dd. It’s based on ${el("a", { + textContent: "MVC", ...references.w_mvc })} (${el("a", { textContent: "MVVM", ...references.w_mvv })}), + but is there presented in simpler form. `), el("div", { className: "note" }).append( - el("p").append(...T` + el("p").append(T` The 3PS pattern becomes especially powerful when combined with components, allowing you to create reusable pieces of UI with encapsulated state and behavior. You’ll learn more about this in the following sections. + `), + el("p").append(T` + The 3PS pattern isn’t required to use with dd but it is good practice to follow it or some similar + software architecture. `) ), + el(h3, t`Getting Started`), + el("p").append(T` + There are multiple ways to include dd in your project. You can use npm for a full development setup, + or directly include it from a CDN for quick prototyping. + `), + el("h4", "npm installation"), + el(code, { content: "npm install deka-dom-el # Coming soon", language: "shell", page_id }), + el("h4", "CDN / Direct Script Usage"), + el("p").append(T` + Use the interactive selector below to choose your preferred format: + `), + el(getLibraryUrl, { page_id }), + el("div", { className: "note" }).append( + el("p").append(T` + Based on your selection, you can use dd in your project like this: + `), + el(code, { content: ` + // ESM format (modern JavaScript with import/export) + import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js"; + + // Or with IIFE format (creates a global DDE object) + // + const { el, on } = DDE; + `, language: "js", page_id }), + ), + el(h3, t`How to Use This Documentation`), - el("p").append(...T` + el("p").append(T` This guide will take you through dd’s features step by step: `), el("ol", { start: 2 }).append( - el("li").append(...T`${el("a", { href: "p02-elements.html" }).append(el("strong", "Elements"))} — Creating + el("li").append(T`${el("a", { href: "p02-elements.html" }).append(el("strong", "Elements"))} — Creating and manipulating DOM elements`), - el("li").append(...T`${el("a", { href: "p03-events.html" }).append(el("strong", "Events and Addons"))} — + el("li").append(T`${el("a", { href: "p03-events.html" }).append(el("strong", "Events and Addons"))} — Handling user interactions and lifecycle events`), - el("li").append(...T`${el("a", { href: "p04-signals.html" }).append(el("strong", "Signals"))} — Adding + el("li").append(T`${el("a", { href: "p04-signals.html" }).append(el("strong", "Signals"))} — Adding reactivity to your UI`), - el("li").append(...T`${el("a", { href: "p05-scopes.html" }).append(el("strong", "Scopes"))} — Managing + el("li").append(T`${el("a", { href: "p05-scopes.html" }).append(el("strong", "Scopes"))} — Managing component lifecycles`), - el("li").append(...T`${el("a", { href: "p06-customElement.html" }).append(el("strong", "Web Components"))} — + el("li").append(T`${el("a", { href: "p06-customElement.html" }).append(el("strong", "Web Components"))} — Building native custom elements`), - el("li").append(...T`${el("a", { href: "p07-debugging.html" }).append(el("strong", "Debugging"))} — Tools to + el("li").append(T`${el("a", { href: "p07-debugging.html" }).append(el("strong", "Debugging"))} — Tools to help you build and fix your apps`), - el("li").append(...T`${el("a", { href: "p08-extensions.html" }).append(el("strong", "Extensions"))} — + el("li").append(T`${el("a", { href: "p08-extensions.html" }).append(el("strong", "Extensions"))} — Integrating third-party functionalities`), - el("li").append(...T`${el("a", { href: "p09-optimization.html" }) + el("li").append(T`${el("a", { href: "p09-optimization.html" }) .append(el("strong", "Performance Optimization"))} — Techniques for optimizing your applications`), - el("li").append(...T`${el("a", { href: "p10-todomvc.html" }).append(el("strong", "TodoMVC"))} — A real-world + el("li").append(T`${el("a", { href: "p10-todomvc.html" }).append(el("strong", "TodoMVC"))} — A real-world application implementation`), - el("li").append(...T`${el("a", { href: "p11-ssr.html" }).append(el("strong", "SSR"))} — Server-side + el("li").append(T`${el("a", { href: "p11-ssr.html" }).append(el("strong", "SSR"))} — Server-side rendering with dd`), - el("li").append(...T`${el("a", { href: "p12-ireland.html" }).append(el("strong", "Ireland Components"))} — + el("li").append(T`${el("a", { href: "p12-ireland.html" }).append(el("strong", "Ireland Components"))} — Interactive demos with server-side pre-rendering`), - el("li").append(...T`${el("a", { href: "p13-appendix.html" }).append(el("strong", "Appendix & Summary"))} — + el("li").append(T`${el("a", { href: "p13-appendix.html" }).append(el("strong", "Appendix & Summary"))} — Comprehensive reference and best practices`), ), - el("p").append(...T` + el("p").append(T` Each section builds on the previous ones, so we recommend following them in order. Let’s get started with the basics of creating elements! `), diff --git a/docs/layout/simplePage.html.js b/docs/layout/simplePage.html.js index 1a603b0..328d469 100644 --- a/docs/layout/simplePage.html.js +++ b/docs/layout/simplePage.html.js @@ -3,10 +3,7 @@ import { el, simulateSlots } from "deka-dom-el"; import { header } from "./head.html.js"; import { prevNext } from "../components/pageUtils.html.js"; -import { ireland } from "../components/ireland.html.js"; -import "../components/scrollTop.css.js"; -/** @param {string} url */ -const fileURL= url=> new URL(url, import.meta.url); +import { scrollTop } from "../components/scrollTop.html.js"; /** @param {Pick} attrs */ export function simplePage({ pkg, info }){ @@ -33,6 +30,6 @@ export function simplePage({ pkg, info }){ ), // Scroll to top button - el(ireland, { src: fileURL("../components/scrollTop.js.js"), exportName: "scrollTop" }) + el(scrollTop), )); } diff --git a/docs/p02-elements.html.js b/docs/p02-elements.html.js index ab7b0cc..bda75bf 100644 --- a/docs/p02-elements.html.js +++ b/docs/p02-elements.html.js @@ -49,7 +49,7 @@ const references= { export function page({ pkg, info }){ const page_id= info.id; return el(simplePage, { info, pkg }).append( - el("p").append(...T` + el("p").append(T` Building user interfaces in JavaScript often involves creating and manipulating DOM elements. dd provides a simple yet powerful approach to element creation that is declarative, chainable, and maintains a clean syntax close to HTML structure. @@ -68,7 +68,7 @@ export function page({ pkg, info }){ el(code, { src: fileURL("./components/examples/elements/intro.js"), page_id }), el(h3, t`Creating Elements: Native vs dd`), - el("p").append(...T` + el("p").append(T` In standard JavaScript, you create DOM elements using the ${el("a", references.mdn_create).append(el("code", "document.createElement()"))} method and then set properties individually or with ${el("code", "Object.assign()")}: @@ -85,14 +85,14 @@ export function page({ pkg, info }){ ) ) ), - el("p").append(...T` + el("p").append(T` The ${el("code", "el")} function provides a simple wrapper around ${el("code", "document.createElement")} with enhanced property assignment. `), el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }), el(h3, t`Advanced Property Assignment`), - el("p").append(...T` + el("p").append(T` The ${el("code", "assign")} function is the heart of dd’s element property handling. It is internally used to assign properties using the ${el("code", "el")} function. ${el("code", "assign")} provides intelligent assignment of both ${el("a", { textContent: "properties (IDL)", ...references.mdn_idl })} @@ -104,28 +104,28 @@ export function page({ pkg, info }){ el("dd", t`Prefers IDL properties, falls back to setAttribute() when no writable property exists`), el("dt", t`Data and ARIA Attributes`), - el("dd").append(...T`Both ${el("code", "dataset")}.* and ${el("code", "data-")}* syntaxes supported - (same for ${el("em", "ARIA")})`), + el("dd").append(T`Both ${el("code", "dataset.keyName")} and ${el("code", "dataKeyName")} syntaxes are + supported (same for ${el("code", "aria")}/${el("code", "ariaset")})`), el("dt", t`Style Handling`), - el("dd").append(...T`Accepts string or object notation for ${el("code", "style")} property`), + el("dd").append(T`Accepts string or object notation for ${el("code", "style")} property`), el("dt", t`Class Management`), - el("dd").append(...T`Works with ${el("code", "className")}, ${el("code", "class")}, or ${el("code", + el("dd").append(T`Works with ${el("code", "className")} (${el("code", "class")}) and ${el("code", "classList")} object for toggling classes`), el("dt", t`Force Modes`), - el("dd").append(...T`Use ${el("code", "=")} prefix to force attribute mode, ${el("code", ".")} prefix to + el("dd").append(T`Use ${el("code", "=")} prefix to force attribute mode, ${el("code", ".")} prefix to force property mode`), el("dt", t`Attribute Removal`), - el("dd").append(...T`Pass ${el("code", "undefined")} to remove a property or attribute`) + el("dd").append(T`Pass ${el("code", "undefined")} to remove a property or attribute`) ) ), el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }), el("div", { className: "note" }).append( - el("p").append(...T` + el("p").append(T` You can explore standard HTML element properties in the MDN documentation for ${el("a", { textContent: "HTMLElement", ...references.mdn_el })} (base class) and specific element interfaces like ${el("a", { textContent: "HTMLParagraphElement", ...references.mdn_p })}. @@ -133,7 +133,7 @@ export function page({ pkg, info }){ ), el(h3, t`Building DOM Trees with Chainable Methods`), - el("p").append(...T` + el("p").append(T` One of the most powerful features of dd is its approach to building element trees. Unlike the native DOM API which doesn’t return the parent after ${el("code", "append()")}, dd’s ${el("code", "append()")} always returns the parent element: @@ -150,28 +150,28 @@ export function page({ pkg, info }){ ) ) ), - el("p").append(...T` + el("p").append(T` This chainable pattern is much cleaner and easier to follow, especially for deeply nested elements. It also makes it simple to add multiple children to a parent element in a single fluent expression. `), el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }), el(h3, t`Using Components to Build UI Fragments`), - el("p").append(...T` + el("p").append(T` The ${el("code", "el")} function is overloaded to support both tag names and function components. This lets you refactor complex UI trees into reusable pieces: `), el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }), - el("p").append(...T` + el("p").append(T` Component functions receive the properties object as their first argument, just like regular elements. This makes it easy to pass data down to components and create reusable UI fragments. `), el("div", { className: "tip" }).append( - el("p").append(...T` + el("p").append(T` It’s helpful to use naming conventions similar to native DOM elements for your components. This allows you to keeps your code consistent with the DOM API. `), - el("p").append(...T` + el("p").append(T` Use ${el("a", { textContent: "destructuring assignment", ...references.mdn_destruct })} to extract the properties from the ${el("code", "props")} and pass them to the component element: ${el("code", "function component({ className }){ return el(\"p\", { className }); }")} for make @@ -180,29 +180,29 @@ export function page({ pkg, info }){ ), el(h3, t`Working with SVG and Other Namespaces`), - el("p").append(...T` + el("p").append(T` For non-HTML elements like SVG, MathML, or custom namespaces, dd provides the ${el("code", "elNS")} function which corresponds to the native ${el("a", references.mdn_ns).append(el("code", "document.createElementNS"))}: `), el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }), - el("p").append(...T` + el("p").append(T` This function returns a namespace-specific element creator, allowing you to work with any element type using the same consistent interface. `), el(h3, t`Best Practices for Declarative DOM Creation`), el("ol").append( - el("li").append(...T` + el("li").append(T` ${el("strong", "Use component functions for reusable UI fragments:")} Extract common UI patterns into reusable functions that return elements. `), - el("li").append(...T` + el("li").append(T` ${el("strong", "Leverage destructuring for cleaner component code:")} Use ${el("a", { textContent: "destructuring", ...references.mdn_destruct })} to extract properties from the props object for cleaner component code. `), - el("li").append(...T` + el("li").append(T` ${el("strong", "Leverage chainable methods for better performance:")} Use chainable methods ${el("code", ".append()")} to build complex DOM trees for better performance and cleaner code. `), diff --git a/docs/p03-events.html.js b/docs/p03-events.html.js index 3e59a22..acbd302 100644 --- a/docs/p03-events.html.js +++ b/docs/p03-events.html.js @@ -41,7 +41,7 @@ const references= { export function page({ pkg, info }){ const page_id= info.id; return el(simplePage, { info, pkg }).append( - el("p").append(...T` + el("p").append(T` Events are at the core of interactive web applications. dd provides a clean, declarative approach to handling DOM events and extends this pattern with a powerful Addon system to incorporate additional functionalities into your UI templates. @@ -60,7 +60,7 @@ export function page({ pkg, info }){ el(code, { src: fileURL("./components/examples/events/intro.js"), page_id }), el(h3, t`Events and Listeners: Two Approaches`), - el("p").append(...T` + el("p").append(T` In JavaScript you can listen to native DOM events using ${el("a", references.mdn_listen).append(el("code", "element.addEventListener(type, listener, options)"))}. dd provides an alternative approach with arguments ordered differently to better fit its declarative @@ -78,7 +78,7 @@ export function page({ pkg, info }){ ) ) ), - el("p").append(...T` + el("p").append(T` The main benefit of dd’s approach is that it works as an Addon (see below), making it easy to integrate directly into element declarations. `), @@ -86,15 +86,15 @@ export function page({ pkg, info }){ el(h3, t`Removing Event Listeners`), el("div", { className: "note" }).append( - el("p").append(...T` - Unlike the native addEventListener/removeEventListener pattern, dd uses the ${el("a", { - textContent: "AbortSignal", ...references.mdn_abortListener })} for declarative approach for removal: + el("p").append(T` + Unlike the native addEventListener/removeEventListener pattern, dd uses ${el("strong", "only")} + ${el("a", { textContent: "AbortSignal", ...references.mdn_abortListener })} for declarative removal: `) ), el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }), - el("p").append(...T` + el("p").append(T` This is the same for signals (see next section) and works well with scopes and library extendability ( - see scopes and extensions section). + see scopes and extensions section — mainly ${el("code", "scope.signal")}). `), el(h3, t`Three Ways to Handle Events`), @@ -102,7 +102,7 @@ export function page({ pkg, info }){ el("div", { className: "tab", dataTab: "html-attr" }).append( el("h4", t`HTML Attribute Style`), el(code, { src: fileURL("./components/examples/events/attribute-event.js"), page_id }), - el("p").append(...T` + el("p").append(T` Forces usage as an HTML attribute. Corresponds to ${el("code", ``)}. This can be particularly useful for SSR scenarios. @@ -119,13 +119,13 @@ export function page({ pkg, info }){ el("p", t`Uses the addon pattern (so adds the event listener to the element), see above.`) ) ), - el("p").append(...T` + el("p").append(T` For a deeper comparison of these approaches, see ${el("a", { textContent: "WebReflection’s detailed analysis", ...references.web_events })}. `), el(h3, t`Understanding Addons`), - el("p").append(...T` + el("p").append(T` Addons are a powerful pattern in dd that extends beyond just event handling. An Addon is any function that accepts an HTML element as its first parameter. `), @@ -139,24 +139,24 @@ export function page({ pkg, info }){ el("li", t`Capture element references`) ) ), - el("p").append(...T` + el("p").append(T` You can use Addons as ≥3rd argument of the ${el("code", "el")} function, making it possible to extend your templates with additional functionality: `), el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }), - el("p").append(...T` + el("p").append(T` As the example shows, you can provide types in JSDoc+TypeScript using the global type ${el("code", "ddeElementAddon")}. Notice how Addons can also be used to get element references. `), el(h3, t`Lifecycle Events`), - el("p").append(...T` + el("p").append(T` Addons are called immediately when an element is created, even before it’s connected to the live DOM. - You can think of an Addon as an "oncreate" event handler. + You can think of an Addon as an “oncreate” event handler. `), - el("p").append(...T` + el("p").append(T` dd provides two additional lifecycle events that correspond to ${el("a", { textContent: - "custom element", ...references.mdn_customElements })} lifecycle callbacks: + "custom element", ...references.mdn_customElements })} lifecycle callbacks and component patterns: `), el("div", { className: "function-table" }).append( el("dl").append( @@ -170,7 +170,7 @@ export function page({ pkg, info }){ el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }), el("div", { className: "note" }).append( - el("p").append(...T` + el("p").append(T` For regular elements (non-custom elements), dd uses ${el("a", references.mdn_mutation).append(el("code", "MutationObserver"), " | MDN")} internally to track lifecycle events. @@ -179,28 +179,41 @@ export function page({ pkg, info }){ el("div", { className: "warning" }).append( el("ul").append( - el("li").append(...T` + el("li").append(T` Always use ${el("code", "on.*")} functions as library must ensure proper (MutationObserver) registration, not ${el("code", "on('dde:*', ...)")}, even the native event system is used with event names prefixed with ${el("code", "dde:")}. `), - el("li").append(...T` + el("li").append(T` Use lifecycle events sparingly, as they require internal tracking `), - el("li").append(...T` + el("li").append(T` Leverage parent-child relationships: when a parent is removed, all children are also removed `), - el("li").append(...T` + el("li").append(T` …see section later in documentation regarding hosts elements `), - el("li").append(...T` + el("li").append(T` dd ensures that connected/disconnected events fire only once for better predictability `) ) ), + el(h3, t`Utility Helpers`), + el("p").append(T` + You can use the ${el("code", "on.defer")} helper to defer execution to the next event loop. + This is useful for example when you wan to set some element properties based on the current element + body (typically the ${el("code", "