mirror of
https://github.com/jaandrle/deka-dom-el
synced 2026-10-25 16:51:48 +01:00
Compare commits
8
Commits
93b905e677
...
64566f17af
| Author | SHA1 | Date | |
|---|---|---|---|
 jaandrle
|
64566f17af
|
||
|
jaandrle
|
2fcec0551c
|
||
|
jaandrle
|
7ed2856298
|
||
|
jaandrle
|
a2b0223c4f
|
||
|
jaandrle
|
19b0e4666e
|
||
|
jaandrle
|
3823b66003
|
||
|
jaandrle
|
ba13055d7d
|
||
|
jaandrle
|
36fab5276d
|
No files matched your search
@@ -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,11 +93,23 @@ 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
|
||||
<!-- Example with IIFE build (creates a global DDE object) -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
|
||||
<script type="module">
|
||||
<script>
|
||||
const { el, S } = DDE;
|
||||
// Your code here
|
||||
</script>
|
||||
|
||||
<!-- Or with ES modules -->
|
||||
<script type="module">
|
||||
import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js";
|
||||
// Your code here
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+92
-88
@@ -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;
|
||||
@@ -321,10 +290,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 +365,61 @@ var scope = {
|
||||
return scopes.pop();
|
||||
}
|
||||
};
|
||||
on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
|
||||
|
||||
// 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;
|
||||
@@ -468,38 +489,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 +551,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 +574,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({
|
||||
@@ -1004,7 +1009,6 @@ export {
|
||||
dispatchEvent,
|
||||
createElement as el,
|
||||
createElementNS as elNS,
|
||||
elementAttribute,
|
||||
isSignal,
|
||||
lifecyclesToEvents,
|
||||
memo,
|
||||
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+4
-4
@@ -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(`<dde:mark ${t}${l.ssr}${n}>`);return e&&(r.end=l.D.createComment("</dde:mark>")),r};funct
Line truncated
|
||||
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 y(t){return typeof t>"u"}function rt(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 ot(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 Z(t,e){if(!t||!E(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function ct(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 p={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),!!y(n)){if(Reflect.deleteProperty(t,e),E(t,p.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var k="__dde_lifecyclesToEvents",A="dde:connected",R="dde:disconnected",F="dde:attributeChanged";var D=p.M?At():new Proxy({},{get(){return()=>{}}});function At(){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}C(f.removedNodes,!0)&&u()}},r=new p.M(n(i));return{observe(u){let a=new p.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(p.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 m(u){t.size>30&&await d();let a=[];if(!E(u,p.N))return a;for(let f of t.keys())f===u||!E(f,p.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let S of u){if(a&&m(S).then(h),!t.has(S))continue;let M=t.get(S);M.length_c&&(S.dispatchEvent(new Event(A)),M.connected=new WeakSet,M.length_c=0,M.length_d||t.delete(S),f=!0)}return f}function C(u,a){let f=!1;for(let S of u)a&&m(S).then(C),!(!t.has(S)||!t.get(S).length_d)&&((globalThis.queueMicrotask||setTimeout)(St(S)),f=!0);return f}function St(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,b({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 st=t=>b({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=st(e),function(r){return r.addEventListener(A,t,e),r[k]?r:r.isConnected?(r.dispatchEvent(new Event(A)),r):(Z(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=st(e),function(r){return r.addEventListener(R,t,e),r[k]||Z(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var O=[{get scope(){return p.D.body},host:t=>t?t(p.D.body):p.D.body,prevent:!0}],G=new WeakMap,g={get current(){return O[O.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(G.has(t))return G.get(t);let e=new AbortController;return G.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(b({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};w.host=(t,e=g.host)=>n=>e(()=>t(n));var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?b(j,t):(Object.setPrototypeOf(t,j),t)}function I(t){return ot(t,j)&&t!==j?t:j}function it(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,r)}function ut(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,r)}function K(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function ft(t,e,n,r){return E(t,p.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function se(t){return p.q(t)}function at(...t){return this.appendOriginal(...t),this}function Ot(t){return t.append===at||(t.appendOriginal=t.append,t.append=at),t}var $;function q(t,e,...n){let r=I(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(C=>C(s)),void 0):s;g.push({scope:t,host:i}),c=t(e||void 0);let d=E(c,p.F);if(c.nodeName==="#comment")break;let m=q.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(m),d&&(s=m);break}case t==="#text":c=U.call(this,p.D.createTextNode(""),e);break;case(t==="<>"||!t):c=U.call(this,p.D.createDocumentFragment(),e);break;case!!$:c=U.call(this,p.
Line truncated
|
||||
Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[tt][c];if(i)return v.action(i,"_set",s)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`).
|
||||
Investigate `__dde_attributes` key of the element. */v.clear(...Object.values(this[tt]))})(t),n};var bt={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 nt(n,o),xt(n,o,t,e),n.get()}};function xt(t,e,...n){let{current:r}=g;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 Mt=new FinalizationRegistry(function(t){v.clear({[l]:t})});function gt(t,e,n){let r=_(t?Lt:et),o=Et(r,e,n,t);return Mt.register(o,o[l]),o}var Pt=b(_(),{stopPropagation(){this.skip=!0}});function Et(t,e,n,r=!1){let o=[];rt(n)!=="[object Object]"&&(n={});let{onclear:c}=v.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=g;return Reflect.defineProperty(t,l,{value:b(_(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 vt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=jt();return r&&n.add(r),x.has(r)&&x.get(r).add(t),e}function _t(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,Y(t),e}function nt(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;v.clear(t);let s=x.get(r);if(!s)return c;let i=x.get(s);if(!i)return c;for(let d of i)N(d,s,!0);return c}V(bt);export{v as S,U as assign,dt as assignAttribute,Ot as chainableAppend,Ct as classListDeclarative,q as createElement,ue as createElementNS,ve as customElementRender,Dt as customElementWithDDE,Jt as dispatchEvent,q as el,ue as elNS,J as isSignal,Dt as lifecyclesToEvents,T as memo,w as on,se as queue,V as registerReactivity,g as scope,v as signal,ge as simulateSlots};
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+92
-88
@@ -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;
|
||||
@@ -292,10 +261,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 +336,61 @@ var scope = {
|
||||
return scopes.pop();
|
||||
}
|
||||
};
|
||||
on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
|
||||
|
||||
// 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;
|
||||
@@ -439,38 +460,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 +522,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 +545,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 +667,6 @@ export {
|
||||
dispatchEvent,
|
||||
createElement as el,
|
||||
createElementNS as elNS,
|
||||
elementAttribute,
|
||||
lifecyclesToEvents,
|
||||
memo,
|
||||
on,
|
||||
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+1
-1
@@ -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(Line truncated
|
||||
var $=(...t)=>Object.prototype.hasOwnProperty.call(...t);function g(t){return typeof t>"u"}function h(t,e){return t instanceof e}function H(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 j(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var a={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),!!g(n)){if(Reflect.deleteProperty(t,e),h(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",x="dde:connected",w="dde:disconnected",z="dde:attributeChanged";var O=a.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}_(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){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),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 p(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!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,a.N))return u;for(let i of t.keys())i===s||!h(i,a.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 y=t.get(b);y.length_c&&(b.dispatchEvent(new Event(x)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(b),i=!0)}return i}function _(s,u){let i=!1;for(let b of s)u&&m(b).then(_),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(et(b)),i=!0);return i}function et(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function vt(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}}var B=t=>v({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=B(e),function(r){return r.addEventListener(x,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(x)),r):(j(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=B(e),function(r){return r.addEventListener(w,t,e),r[C]||j(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};var E=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],q=new WeakMap,A={get current(){return E[E.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[...E]},push(t={}){return E.push(v({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};S.host=(t,e=A.host)=>n=>e(()=>t(n));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 H(t,D)&&t!==D?t:D}function Z(t,e,n,r){return t[(g(r)?"remove":"set")+e](n,r)}function G(t,e,n,r,o=null){return t[(g(r)?"remove":"set")+e+"NS"](o,n,r)}function W(t,e,n){if(Reflect.set(t,e,n),!!g(n))return Reflect.deleteProperty(t,e)}function J(t,e,n,r){return h(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Tt(t){return a.q(t)}function V(...t){return this.appendOriginal(...t),this}function ct(t){return t.append===V||(t.appendOriginal=t.append,t.append=V),t}var T;function I(t,e,...n){let r=L(this),o=0,c,p;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(_=>_(p)),void 0):p;A.push({scope:t,host:f}),c=t(e||void 0);let d=h(c,a.F);if(c.nodeName==="#comment")break;let m=I.mark({type:"component",name:t.name,host:d?"this":"parentElement"Line truncated
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+92
-88
@@ -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;
|
||||
@@ -367,10 +335,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 +410,61 @@ var DDE = (() => {
|
||||
return scopes.pop();
|
||||
}
|
||||
};
|
||||
on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
|
||||
|
||||
// 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;
|
||||
@@ -514,38 +534,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 +596,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 +619,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({
|
||||
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+4
-4
@@ -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(`<dde:mark ${t}${l.ssr}${n}>`);return e&&(r.end=l.D.createComment("</dde:mark>")),r};funct
Line truncated
|
||||
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 G=Object.defineProperty;var Ct=Object.getOwnPropertyDescriptor;var Rt=Object.getOwnPropertyNames;var Dt=Object.prototype.hasOwnProperty;var Lt=(t,e)=>{for(var n in e)G(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&&G(t,o,{get:()=>e[o],enumerable:!(r=Ct(e,o))||r.enumerable});return t};var kt=t=>Nt(G({},"__esModule",{value:!0}),t);var Vt={};Lt(Vt,{S:()=>v,assign:()=>W,assignAttribute:()=>Y,chainableAppend:()=>ht,classListDeclarative:()=>gt,createElement:()=>M,createElementNS:()=>Wt,customElementRender:()=>Ut,customElementWithDDE:()=>bt,dispatchEvent:()=>jt,el:()=>M,elNS:()=>Wt,isSignal:()=>F,lifecyclesToEvents:()=>bt,memo:()=>L,on:()=>S,queue:()=>qt,registerReactivity:()=>$,scope:()=>g,signal:()=>v,simulateSlots:()=>It});var I=(...t)=>Object.prototype.hasOwnProperty.call(...t);function y(t){return typeof t>"u"}function ct(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 st(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 V(t,e){if(!t||!E(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function it(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Tt(o)]=e(t,o),r},{})}function Tt(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 p={setDeleteAttr:Mt,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 Mt(t,e,n){if(Reflect.set(t,e,n),!!y(n)){if(Reflect.deleteProperty(t,e),E(t,p.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var T="__dde_lifecyclesToEvents",A="dde:connected",R="dde:disconnected",U="dde:attributeChanged";var D=p.M?Pt():new Proxy({},{get(){return()=>{}}});function Pt(){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}C(f.removedNodes,!0)&&u()}},r=new p.M(n(i));return{observe(u){let a=new p.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(p.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 m(u){t.size>30&&await d();let a=[];if(!E(u,p.N))return a;for(let f of t.keys())f===u||!E(f,p.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let w of u){if(a&&m(w).then(h),!t.has(w))continue;let P=t.get(w);P.length_c&&(w.dispatchEvent(new Event(A)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(w),f=!0)}return f}function C(u,a){let f=!1;for(let w of u)a&&m(w).then(C),!(!t.has(w)||!t.get(w).length_d)&&((globalThis.queueMicrotask||setTimeout)(Ot(w)),f=!0);return f}function Ot(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,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}}var ut=t=>b({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=ut(e),function(r){return r.addEventListener(A,t,e),r[T]?r:r.isConnected?(r.dispatchEvent(new Event(A)),r):(V(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=ut(e),function(r){return r.addEventListener(R,t,e),r[T]||V(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var O=[{get scope(){return p.D.body},host:t=>t?t(p.D.body):p.D.body,prevent:!0}],K=new WeakMap,g={get current(){return O[O.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(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()}};S.host=(t,e=g.host)=>n=>e(()=>t(n));var q={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function $(t,e=!0){return e?b(q,t):(Object.setPrototypeOf(t,q),t)}function z(t){return st(t,q)&&t!==q?t:q}function ft(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,r)}function at(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,r)}function Q(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function pt(t,e,n,r){return E(t,p.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function qt(t){return p.q(t)}function dt(...t){return this.appendOriginal(...t),this}function ht(t){return t.append===dt||(t.appendOriginal=t.append,t.append=dt),t}var H;function M(t,e,...n){let r=z(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(C=>C(s)),void 0):s;g.push({scope:t,host:i}),c=t(e||void 0);let d=E(c,p.F);if(c.nodeName==="#comment")break;let m=M.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(m),d&&(s=m);break}case t==="#text":c=W.call(this,p.D.createTextNode(""),e);break;case(t==="<>"||!t):c=W.call(this,p.D.createDocumentFragment(),e);break;case!!H:c=W.call(this,p.
Line truncated
|
||||
Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[nt][c];if(i)return v.action(i,"_set",s)})(t),S.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`).
|
||||
Investigate `__dde_attributes` key of the element. */v.clear(...Object.values(this[nt]))})(t),n};var St={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 ot(n,o),wt(n,o,t,e),n.get()}};function wt(t,e,...n){let{current:r}=g;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){v.clear({[l]:t})});function Et(t,e,n){let r=_(t?$t:rt),o=yt(r,e,n,t);return Bt.register(o,o[l]),o}var Zt=b(_(),{stopPropagation(){this.skip=!0}});function yt(t,e,n,r=!1){let o=[];ct(n)!=="[object Object]"&&(n={});let{onclear:c}=v.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=g;return Reflect.defineProperty(t,l,{value:b(_(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 _t(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 At(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,et(t),e}function ot(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;v.clear(t);let s=x.get(r);if(!s)return c;let i=x.get(s);if(!i)return c;for(let d of i)k(d,s,!0);return c}$(St);return kt(Vt);})();
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+92
-88
@@ -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;
|
||||
@@ -335,10 +303,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 +378,61 @@ var DDE = (() => {
|
||||
return scopes.pop();
|
||||
}
|
||||
};
|
||||
on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
|
||||
|
||||
// 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;
|
||||
@@ -482,38 +502,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 +564,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 +587,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({
|
||||
|
||||
Vendored
+20
-9
@@ -4,7 +4,7 @@ export interface Signal<V, A> {
|
||||
/** 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,28 @@ declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?
|
||||
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
|
||||
export interface On {
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
|
||||
<Event extends keyof DocumentEventMap, EL extends SupportedElement>(type: Event, listener: (this: EL, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
<EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: string, listener: (this: EE extends ddeElementAddon<infer El> ? 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
|
||||
connected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => 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<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
|
||||
string,
|
||||
string
|
||||
]>) => any, options?: AddEventListenerOptions): EE;
|
||||
disconnected<EL extends SupportedElement>(listener: (this: EL, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<EL extends SupportedElement>(listener: (element: EL) => any, host?: Host<SupportedElement>): ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
export type Scope = {
|
||||
|
||||
Vendored
+1
-1
@@ -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 thisLine truncated
|
||||
var DDE=(()=>{var W=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var ft=Object.prototype.hasOwnProperty;var at=(t,e)=>{for(var n in e)W(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&&W(t,o,{get:()=>e[o],enumerable:!(r=it(e,o))||r.enumerable});return t};var dt=t=>pt(W({},"__esModule",{value:!0}),t);var _t={};at(_t,{assign:()=>R,assignAttribute:()=>$,chainableAppend:()=>tt,classListDeclarative:()=>nt,createElement:()=>M,createElementNS:()=>vt,customElementRender:()=>Et,customElementWithDDE:()=>ot,dispatchEvent:()=>mt,el:()=>M,elNS:()=>vt,lifecyclesToEvents:()=>ot,memo:()=>q,on:()=>y,queue:()=>bt,registerReactivity:()=>J,scope:()=>_,simulateSlots:()=>xt});var z=(...t)=>Object.prototype.hasOwnProperty.call(...t);function g(t){return typeof t>"u"}function h(t,e){return t instanceof e}function B(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 k(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var a={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),!!g(n)){if(Reflect.deleteProperty(t,e),h(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",x="dde:connected",O="dde:disconnected",Z="dde:attributeChanged";var A=a.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}w(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){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),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 p(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!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,a.N))return u;for(let i of t.keys())i===s||!h(i,a.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(x)),S.connected=new WeakSet,S.length_c=0,S.length_d||t.delete(b),i=!0)}return i}function w(s,u){let i=!1;for(let b of s)u&&m(b).then(w),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(st(b)),i=!0);return i}function st(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(O)),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 y(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>v({},typeof t=="object"?t:null,{once:!0});y.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(x,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(x)),r):(k(e.signal,()=>A.offConnected(r,t))&&A.onConnected(r,t),r)}};y.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(O,t,e),r[C]||k(e.signal,()=>A.offDisconnected(r,t))&&A.onDisconnected(r,t),r}};var E=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],I=new WeakMap,_={get current(){return E[E.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(I.has(t))return I.get(t);let e=new AbortController;return I.set(t,e),t(y.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...E]},push(t={}){return E.push(v({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};y.host=(t,e=_.host)=>n=>e(()=>t(n));var D={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function J(t,e=!0){return e?v(D,t):(Object.setPrototypeOf(t,D),t)}function N(t){return B(t,D)&&t!==D?t:D}function V(t,e,n,r){return t[(g(r)?"remove"Line truncated
|
||||
@@ -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 }){
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
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: `<div class="card">
|
||||
<img src="image.jpg" alt="Card Image" class="card-image">
|
||||
<h2 class="card-title">Card Title</h2>
|
||||
<p class="card-text">This is a simple card component</p>
|
||||
<button aria-pressed="mixed" type="button" class="card-button">Click Me</button>
|
||||
</div>`
|
||||
},
|
||||
{
|
||||
name: "Navigation",
|
||||
html: `<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="/" class="active">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/services">Services</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>`
|
||||
},
|
||||
{
|
||||
name: "Form",
|
||||
html: `<form class="contact-form" onsubmit="submitForm(event)">
|
||||
<div class="form-group">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="4" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">Send Message</button>
|
||||
</form>`
|
||||
}
|
||||
];
|
||||
|
||||
// Convert HTML to dd<el> 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<el> 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<el> 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<el> Converter"),
|
||||
el("p", { className: "description" }).append(
|
||||
"Convert HTML markup to dd<el> 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<el> Output",
|
||||
el("div", { className: "button-group" }).append(
|
||||
el("button", {
|
||||
type: "button",
|
||||
className: "copy-button",
|
||||
title: "Copy to clipboard",
|
||||
disabled: S(() => !ddeOutput.get())
|
||||
}, onCopy).append("Copy")
|
||||
)
|
||||
),
|
||||
el("textarea", {
|
||||
id: "dde-output",
|
||||
readonly: true,
|
||||
spellcheck: false,
|
||||
placeholder: "The converted dd<el> 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")
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -1,13 +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.host(select => {
|
||||
// This runs when the host (select) is ready with all its options
|
||||
select.value = "cz"; // Pre-select Czechia
|
||||
log({ type: "dde:on.host", 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", "Remove", on("click", ()=> paragraph.remove()))
|
||||
el(allLifecycleEvents),
|
||||
el("button", "Remove Element", on("click", function(){
|
||||
this.previousSibling.remove();
|
||||
}))
|
||||
);
|
||||
|
||||
/** @param {Partial<CustomEvent>} event */
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
import { styles } from "../ssr.js";
|
||||
|
||||
styles.css`
|
||||
#library-url-form {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
`;
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
@@ -8,6 +8,13 @@ const url_base= {
|
||||
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));
|
||||
@@ -20,56 +27,66 @@ export function getLibraryUrl(){
|
||||
const onChangeSubmit= on("change",
|
||||
ev=> /** @type {HTMLSelectElement} */(ev.target).form.requestSubmit()
|
||||
);
|
||||
const onCopy= on("click", ev => {
|
||||
const code= /** @type {HTMLDivElement} */ (ev.target).previousElementSibling;
|
||||
navigator.clipboard.writeText(code.textContent);
|
||||
});
|
||||
|
||||
return el("form", { id: "library-url-form" }, onSubmit).append(
|
||||
el("select", { name: "module" }, onChangeSubmit).append(
|
||||
el("option", { value: "esm", textContent: "ESM — modern JavaScript module" },
|
||||
isSelected(lib.get()[0])),
|
||||
el("option", { value: "iife", textContent: "IIFE — legacy JavaScript with DDE global variable" },
|
||||
isSelected(lib.get()[0])),
|
||||
),
|
||||
el("select", { name: "what" }, onChangeSubmit).append(
|
||||
el("option", { value: "", textContent: "only DOM part" },
|
||||
isSelected(lib.get()[1])),
|
||||
el("option", { value: "-with-signals", textContent: "DOM part and signals library" },
|
||||
isSelected(lib.get()[1])),
|
||||
),
|
||||
el("select", { name: "minified" }, onChangeSubmit).append(
|
||||
el("option", { value: "", textContent: "unminified" },
|
||||
isSelected(lib.get()[2])),
|
||||
el("option", { value: ".min", textContent: "minified" },
|
||||
isSelected(lib.get()[2])),
|
||||
el("h4", "Select your preferred library format:"),
|
||||
el("div", { className: "selectors" }).append(
|
||||
el("select", { name: "module" }, onChangeSubmit,
|
||||
on.host(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.host(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.host(select => select.value = lib.get()[2]),
|
||||
).append(
|
||||
el("option", { value: "", textContent: "Unminified" }),
|
||||
el("option", { value: ".min", textContent: "Minified" }),
|
||||
),
|
||||
),
|
||||
el("output").append(
|
||||
el("p", "Library URL:"),
|
||||
el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append(
|
||||
el("code").append(
|
||||
el("pre", S(()=> url.get()+".js")),
|
||||
),
|
||||
el("button", {
|
||||
className: "copy-button",
|
||||
textContent: "Copy",
|
||||
ariaLabel: "Copy code to clipboard",
|
||||
}, onCopy),
|
||||
el("div", { className: "url-title" }).append(
|
||||
el("strong", "JavaScript:"),
|
||||
el("span", urlLabel),
|
||||
),
|
||||
el("p", "Library type definition:"),
|
||||
el("div", { className: "code", dataJs: "done", tabIndex: 0 }).append(
|
||||
el("code").append(
|
||||
el("pre", S(()=> url.get()+".d.ts")),
|
||||
),
|
||||
el("button", {
|
||||
className: "copy-button",
|
||||
textContent: "Copy",
|
||||
ariaLabel: "Copy code to clipboard",
|
||||
}, onCopy),
|
||||
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."
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
function isSelected(value){
|
||||
return element=> element.selected= element.value===value;
|
||||
/** @param {{ value: ddeSignal<string> }} 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)
|
||||
)
|
||||
;
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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: "*",
|
||||
});
|
||||
}
|
||||
+15
-1
@@ -86,7 +86,7 @@ html {
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid hsl(231, 48%, 70%);
|
||||
outline: 3px solid var(--primary-light);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -207,6 +207,20 @@ figure {
|
||||
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 {
|
||||
|
||||
+24
-8
@@ -1,4 +1,4 @@
|
||||
import "./components/getLibraryUrl.css.js";
|
||||
import "./components/getLibraryUrl.html.js";
|
||||
import { t, T } from "./utils/index.js";
|
||||
export const info= {
|
||||
href: "./",
|
||||
@@ -12,7 +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 { ireland } from "./components/ireland.html.js";
|
||||
import { getLibraryUrl } from "./components/getLibraryUrl.html.js";
|
||||
/** @param {string} url */
|
||||
const fileURL= url=> new URL(url, import.meta.url);
|
||||
const references= {
|
||||
@@ -101,13 +101,29 @@ export function page({ pkg, info }){
|
||||
|
||||
el(h3, t`Getting Started`),
|
||||
el("p").append(T`
|
||||
To get builded dd<el> to be used immediately in your browser, you can download the latest version from:
|
||||
There are multiple ways to include dd<el> in your project. You can use npm for a full development setup,
|
||||
or directly include it from a CDN for quick prototyping.
|
||||
`),
|
||||
el(ireland, {
|
||||
src: fileURL("./components/getLibraryUrl.js.js"),
|
||||
exportName: "getLibraryUrl",
|
||||
page_id,
|
||||
}),
|
||||
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<el> 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)
|
||||
// <script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
|
||||
const { el, on } = DDE;
|
||||
`, language: "js", page_id }),
|
||||
),
|
||||
|
||||
el(h3, t`How to Use This Documentation`),
|
||||
el("p").append(T`
|
||||
|
||||
@@ -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<import("../types.d.ts").PageAttrs, "pkg" | "info">} 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),
|
||||
));
|
||||
}
|
||||
@@ -155,8 +155,8 @@ export function page({ pkg, info }){
|
||||
You can think of an Addon as an “oncreate” event handler.
|
||||
`),
|
||||
el("p").append(T`
|
||||
dd<el> provides two additional lifecycle events that correspond to ${el("a", { textContent:
|
||||
"custom element", ...references.mdn_customElements })} lifecycle callbacks:
|
||||
dd<el> provides three additional lifecycle events that correspond to ${el("a", { textContent:
|
||||
"custom element", ...references.mdn_customElements })} lifecycle callbacks and component patterns:
|
||||
`),
|
||||
el("div", { className: "function-table" }).append(
|
||||
el("dl").append(
|
||||
@@ -165,6 +165,10 @@ export function page({ pkg, info }){
|
||||
|
||||
el("dt", t`on.disconnected(callback)`),
|
||||
el("dd", t`Fires when the element is removed from the DOM`),
|
||||
|
||||
el("dt", t`on.host(callback, host?)`),
|
||||
el("dd", t`Fires when the host element is "ready" and allows applying properties based on the fully
|
||||
built template`),
|
||||
)
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import "./components/converter.html.js";
|
||||
import { T, t } from "./utils/index.js";
|
||||
export const info= {
|
||||
title: t`Convert to dd<el>`,
|
||||
fullTitle: t`HTML to dd<el> Converter`,
|
||||
description: t`Convert your HTML markup to dd<el> JavaScript code with our interactive tool`,
|
||||
};
|
||||
|
||||
import { el } from "deka-dom-el";
|
||||
import { simplePage } from "./layout/simplePage.html.js";
|
||||
import { h3 } from "./components/pageUtils.html.js";
|
||||
import { code } from "./components/code.html.js";
|
||||
import { converter } from "./components/converter.html.js";
|
||||
|
||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||
export function page({ pkg, info }){
|
||||
const page_id= info.id;
|
||||
return el(simplePage, { info, pkg }).append(
|
||||
el("p").append(T`
|
||||
Transitioning from HTML to dd<el> is simple with our interactive converter. This tool helps you quickly
|
||||
transform existing HTML markup into dd<el> JavaScript code, making it easier to adopt dd<el> in your projects.
|
||||
`),
|
||||
|
||||
el("div", { className: "callout" }).append(
|
||||
el("h4", t`Features`),
|
||||
el("ul").append(
|
||||
el("li", t`Convert any HTML snippet to dd<el> code instantly`),
|
||||
el("li", t`Choose between different output formats (append vs arrays, style handling)`),
|
||||
el("li", t`Try pre-built examples or paste your own HTML`),
|
||||
el("li", t`Copy results to clipboard with one click`)
|
||||
)
|
||||
),
|
||||
|
||||
el("h3", t`How to Use the Converter`),
|
||||
el("ol").append(
|
||||
el("li").append(T`
|
||||
${el("strong", "Paste your HTML")} into the input box or select one of the example templates
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Configure options")} to match your preferred coding style:
|
||||
${el("ul").append(
|
||||
el("li", t`Convert inline styles to JavaScript objects`),
|
||||
el("li", t`Transform data-attributes/aria-attributes`),
|
||||
)}
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Click convert")} to generate dd<el> code
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Copy the result")} to your project
|
||||
`)
|
||||
),
|
||||
|
||||
// The actual converter component
|
||||
el(converter, { page_id }),
|
||||
|
||||
el("h3", t`How the Converter Works`),
|
||||
el("p").append(T`
|
||||
The converter uses a three-step process:
|
||||
`),
|
||||
el("ol").append(
|
||||
el("li").append(T`
|
||||
${el("strong", "Parsing:")} The HTML is parsed into a structured AST (Abstract Syntax Tree)
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Transformation:")} Each HTML node is converted to its dd<el> equivalent
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Code Generation:")} The final JavaScript code is properly formatted and indented
|
||||
`)
|
||||
),
|
||||
|
||||
el("div", { className: "warning" }).append(
|
||||
el("p").append(T`
|
||||
While the converter handles most basic HTML patterns, complex attributes or specialized elements might
|
||||
need manual adjustments. Always review the generated code before using it in production.
|
||||
`)
|
||||
),
|
||||
|
||||
el("h3", t`Next Steps`),
|
||||
el("p").append(T`
|
||||
After converting your HTML to dd<el>, you might want to:
|
||||
`),
|
||||
el("ul").append(
|
||||
el("li").append(T`
|
||||
Add signal bindings for dynamic content (see ${el("a", { href: "p04-signals.html",
|
||||
textContent: "Signals section" })})
|
||||
`),
|
||||
el("li").append(T`
|
||||
Organize your components with scopes (see ${el("a", { href: "p05-scopes.html",
|
||||
textContent: "Scopes section" })})
|
||||
`),
|
||||
el("li").append(T`
|
||||
Add event handlers for interactivity (see ${el("a", { href: "p03-events.html",
|
||||
textContent: "Events section" })})
|
||||
`)
|
||||
)
|
||||
);
|
||||
}
|
||||
Vendored
+30
-19
@@ -184,12 +184,12 @@ interface On{
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<
|
||||
Event extends keyof DocumentEventMap,
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
EL extends SupportedElement
|
||||
>(
|
||||
type: Event,
|
||||
listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
|
||||
listener: (this: EL, ev: DocumentEventMap[Event]) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
) : ddeElementAddon<EL>;
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
>(
|
||||
@@ -199,28 +199,39 @@ interface On{
|
||||
) : 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<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
EL extends SupportedElement
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<El>) => any,
|
||||
listener: (this: EL, event: CustomEvent<NoInfer<EL>>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
) : ddeElementAddon<EL>;
|
||||
/** 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<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
EL extends SupportedElement
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<void>) => any,
|
||||
listener: (this: EL, event: CustomEvent<void>) => 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<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
) : ddeElementAddon<EL>;
|
||||
/**
|
||||
* Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
|
||||
* This is handy to apply some property depending on full template such as:
|
||||
* ```js
|
||||
* const selected= "Z";
|
||||
* //...
|
||||
* return el("form").append(
|
||||
* el("select", null, on.host(e=> e.value=selected)).append(
|
||||
* el("option", { value: "A", textContent: "A" }),
|
||||
* //...
|
||||
* el("option", { value: "Z", textContent: "Z" }),
|
||||
* ),
|
||||
* );
|
||||
* ```
|
||||
* */
|
||||
host<
|
||||
EL extends SupportedElement
|
||||
>(
|
||||
listener: (element: EL) => any,
|
||||
host?: Host<SupportedElement>
|
||||
) : ddeElementAddon<EL>;
|
||||
}
|
||||
export const on: On;
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
export * from "./src/dom.js";
|
||||
export * from "./src/customElement.js";
|
||||
export * from "./src/events.js";
|
||||
export { registerReactivity } from "./src/signals-lib/common.js";
|
||||
export * from "./src/dom-lib/index.js";
|
||||
export { memo } from "./src/memo.js";
|
||||
export { registerReactivity } from "./src/signals-lib/common.js";
|
||||
@@ -1,4 +1,4 @@
|
||||
import { enviroment as env } from './src/dom-common.js';
|
||||
import { enviroment as env } from './src/dom-lib/common.js';
|
||||
env.ssr= " ssr";
|
||||
|
||||
const q_store= new Set();
|
||||
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@ export interface Signal<V, A> {
|
||||
/** 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;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export const enviroment= {
|
||||
M: globalThis.MutationObserver,
|
||||
q: p=> p || Promise.resolve(),
|
||||
};
|
||||
import { isInstance, isUndef } from './helpers.js';
|
||||
import { isInstance, isUndef } from '../helpers.js';
|
||||
|
||||
/**
|
||||
* Handles attribute setting with special undefined handling
|
||||
@@ -1,6 +1,47 @@
|
||||
import { keyLTE, evc, evd, eva } from "./dom-common.js";
|
||||
import { scope } from "./dom.js";
|
||||
import { keyLTE, evc, evd, eva } from "./common.js";
|
||||
import { scope } from "./scopes.js";
|
||||
import { c_ch_o } from "./events-observer.js";
|
||||
import { elementAttribute } from "./helpers.js";
|
||||
|
||||
/**
|
||||
* Simulates slot functionality for elements
|
||||
*
|
||||
* @param {HTMLElement} element - Parent element
|
||||
* @param {HTMLElement} [root=element] - Root element containing slots
|
||||
* @returns {HTMLElement} The root element
|
||||
*/
|
||||
export function simulateSlots(element, root= element){
|
||||
const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line
|
||||
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);
|
||||
//TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot }));
|
||||
}
|
||||
element.append= orig; //TODO?: better memory management, but non-native behavior!
|
||||
return element;
|
||||
}
|
||||
});
|
||||
if(element!==root){
|
||||
const els= Array.from(element.childNodes);
|
||||
//TODO?: els.forEach(el=> el.remove());
|
||||
element.append(...els);
|
||||
}
|
||||
return root;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders content into a custom element or shadow root
|
||||
@@ -1,7 +1,6 @@
|
||||
import { signals } from "./signals-lib/common.js";
|
||||
import { enviroment as env } from './dom-common.js';
|
||||
import { isInstance, isUndef, oAssign } from "./helpers.js";
|
||||
import { on } from "./events.js";
|
||||
import { signals } from "../signals-lib/common.js";
|
||||
import { enviroment as env } from './common.js';
|
||||
import { isInstance, isUndef, oAssign } from "../helpers.js";
|
||||
|
||||
/**
|
||||
* Queues a promise, this is helpful for crossplatform components (on server side we can wait for all registered
|
||||
@@ -11,84 +10,6 @@ import { on } from "./events.js";
|
||||
*/
|
||||
export function queue(promise){ return env.q(promise); }
|
||||
|
||||
/**
|
||||
* Array of scope contexts for tracking component hierarchies
|
||||
* @type {{ scope: object, prevent: boolean, host: function }[]}
|
||||
*/
|
||||
const scopes= [ {
|
||||
get scope(){ return env.D.body; },
|
||||
host: c=> c ? c(env.D.body) : env.D.body,
|
||||
prevent: true,
|
||||
} ];
|
||||
/** Store for disconnect abort controllers */
|
||||
const store_abort= new WeakMap();
|
||||
/**
|
||||
* Scope management utility for tracking component hierarchies
|
||||
*/
|
||||
export const scope= {
|
||||
/**
|
||||
* Gets the current scope
|
||||
* @returns {Object} Current scope context
|
||||
*/
|
||||
get current(){ return scopes[scopes.length-1]; },
|
||||
|
||||
/**
|
||||
* Gets the host element of the current scope
|
||||
* @returns {Function} Host accessor function
|
||||
*/
|
||||
get host(){ return this.current.host; },
|
||||
|
||||
/**
|
||||
* Creates/gets an AbortController that triggers when the element disconnects
|
||||
* */
|
||||
get signal(){
|
||||
const { host }= this;
|
||||
if(store_abort.has(host)) return store_abort.get(host);
|
||||
|
||||
const a= new AbortController();
|
||||
store_abort.set(host, a);
|
||||
host(on.disconnected(()=> a.abort()));
|
||||
return a.signal;
|
||||
},
|
||||
|
||||
/**
|
||||
* Prevents default behavior in the current scope
|
||||
* @returns {Object} Current scope context
|
||||
*/
|
||||
preventDefault(){
|
||||
const { current }= this;
|
||||
current.prevent= true;
|
||||
return current;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets a copy of the current scope stack
|
||||
* @returns {Array} Copy of scope stack
|
||||
*/
|
||||
get state(){ return [ ...scopes ]; },
|
||||
|
||||
/**
|
||||
* Pushes a new scope to the stack
|
||||
* @param {Object} [s={}] - Scope object to push
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); },
|
||||
|
||||
/**
|
||||
* Pushes the root scope to the stack
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
pushRoot(){ return scopes.push(scopes[0]); },
|
||||
|
||||
/**
|
||||
* Pops the current scope from the stack
|
||||
* @returns {Object|undefined} Popped scope or undefined if only one scope remains
|
||||
*/
|
||||
pop(){
|
||||
if(scopes.length===1) return;
|
||||
return scopes.pop();
|
||||
},
|
||||
};
|
||||
/**
|
||||
* Chainable append function for elements
|
||||
* @private
|
||||
@@ -107,6 +28,7 @@ export function chainableAppend(el){
|
||||
/** Current namespace for element creation */
|
||||
let namespace;
|
||||
|
||||
import { scope } from "./scopes.js";
|
||||
/**
|
||||
* Creates a DOM element with specified tag, attributes and addons
|
||||
*
|
||||
@@ -191,46 +113,6 @@ export function createElementNS(ns){
|
||||
/** Alias for createElementNS */
|
||||
export { createElementNS as elNS };
|
||||
|
||||
/**
|
||||
* Simulates slot functionality for elements
|
||||
*
|
||||
* @param {HTMLElement} element - Parent element
|
||||
* @param {HTMLElement} [root=element] - Root element containing slots
|
||||
* @returns {HTMLElement} The root element
|
||||
*/
|
||||
export function simulateSlots(element, root= element){
|
||||
const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line
|
||||
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);
|
||||
//TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot }));
|
||||
}
|
||||
element.append= orig; //TODO?: better memory management, but non-native behavior!
|
||||
return element;
|
||||
}
|
||||
});
|
||||
if(element!==root){
|
||||
const els= Array.from(element.childNodes);
|
||||
//TODO?: els.forEach(el=> el.remove());
|
||||
element.append(...els);
|
||||
}
|
||||
return root;
|
||||
}
|
||||
|
||||
/** Store for element assignment contexts */
|
||||
const assign_context= new WeakMap();
|
||||
const { setDeleteAttr }= env;
|
||||
@@ -251,6 +133,7 @@ export function assign(element, ...attributes){
|
||||
assign_context.delete(element);
|
||||
return element;
|
||||
}
|
||||
import { setDelete } from "./helpers.js";
|
||||
/**
|
||||
* Assigns a single attribute to an element
|
||||
*
|
||||
@@ -290,6 +173,7 @@ export function assignAttribute(element, key, value){
|
||||
}
|
||||
return isPropSetter(element, key) ? setDeleteAttr(element, key, value) : setRemoveAttr(key, value);
|
||||
}
|
||||
import { setRemove, setRemoveNS } from "./helpers.js";
|
||||
/**
|
||||
* Gets or creates assignment context for an element
|
||||
*
|
||||
@@ -320,21 +204,6 @@ export function classListDeclarative(element, toggle){
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generic element attribute manipulation
|
||||
*
|
||||
* @param {Element} element - Element to manipulate
|
||||
* @param {string} op - Operation ("set" or "remove")
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} [value] - Attribute value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function elementAttribute(element, op, key, value){
|
||||
if(isInstance(element, env.H))
|
||||
return element[op+"Attribute"](key, value);
|
||||
return element[op+"AttributeNS"](null, key, value);
|
||||
}
|
||||
|
||||
//TODO: add cache? `(Map/Set)<el.tagName+key,isUndef>`
|
||||
/**
|
||||
* Checks if a property can be set on an element
|
||||
@@ -385,45 +254,3 @@ function forEachEntries(s, target, element, obj, cb){
|
||||
cb(key, val);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or removes an attribute based on value
|
||||
*
|
||||
* @param {Element} obj - Element to modify
|
||||
* @param {string} prop - Property suffix ("Attribute")
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} val - Attribute value
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
function setRemove(obj, prop, key, val){
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or removes a namespaced attribute based on value
|
||||
*
|
||||
* @param {Element} obj - Element to modify
|
||||
* @param {string} prop - Property suffix ("Attribute")
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} val - Attribute value
|
||||
* @param {string|null} [ns=null] - Namespace URI
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
function setRemoveNS(obj, prop, key, val, ns= null){
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or deletes a property based on value
|
||||
*
|
||||
* @param {Object} obj - Object to modify
|
||||
* @param {string} key - Property name
|
||||
* @param {any} val - Property value
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
function setDelete(obj, key, val){
|
||||
Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { enviroment as env, evc, evd } from './dom-common.js';
|
||||
import { isInstance } from "./helpers.js";
|
||||
import { enviroment as env, evc, evd } from './common.js';
|
||||
import { isInstance } from "../helpers.js";
|
||||
|
||||
/**
|
||||
* Connection changes observer for tracking element connection/disconnection
|
||||
@@ -1,5 +1,5 @@
|
||||
import { keyLTE, evc, evd } from './dom-common.js';
|
||||
import { oAssign, onAbort } from './helpers.js';
|
||||
import { keyLTE, evc, evd } from './common.js';
|
||||
import { oAssign, onAbort } from '../helpers.js';
|
||||
|
||||
/**
|
||||
* Creates a function to dispatch events on elements
|
||||
@@ -0,0 +1,57 @@
|
||||
import { enviroment as env } from './common.js';
|
||||
import { isInstance, isUndef } from "../helpers.js";
|
||||
/**
|
||||
* Sets or removes an attribute based on value
|
||||
*
|
||||
* @param {Element} obj - Element to modify
|
||||
* @param {string} prop - Property suffix ("Attribute")
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} val - Attribute value
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
export function setRemove(obj, prop, key, val){
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or removes a namespaced attribute based on value
|
||||
*
|
||||
* @param {Element} obj - Element to modify
|
||||
* @param {string} prop - Property suffix ("Attribute")
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} val - Attribute value
|
||||
* @param {string|null} [ns=null] - Namespace URI
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
export function setRemoveNS(obj, prop, key, val, ns= null){
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or deletes a property based on value
|
||||
*
|
||||
* @param {Object} obj - Object to modify
|
||||
* @param {string} key - Property name
|
||||
* @param {any} val - Property value
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
export function setDelete(obj, key, val){
|
||||
Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key);
|
||||
}
|
||||
/**
|
||||
* Generic element attribute manipulation
|
||||
*
|
||||
* @param {Element} element - Element to manipulate
|
||||
* @param {string} op - Operation ("set" or "remove")
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} [value] - Attribute value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function elementAttribute(element, op, key, value){
|
||||
if(isInstance(element, env.H))
|
||||
return element[op+"Attribute"](key, value);
|
||||
return element[op+"AttributeNS"](null, key, value);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from "./scopes.js";
|
||||
export * from "./el.js";
|
||||
export * from "./events.js";
|
||||
export * from "./customElement.js";
|
||||
@@ -0,0 +1,84 @@
|
||||
import { enviroment as env } from './common.js';
|
||||
import { oAssign } from "../helpers.js";
|
||||
import { on } from "./events.js";
|
||||
|
||||
/**
|
||||
* Array of scope contexts for tracking component hierarchies
|
||||
* @type {{ scope: object, prevent: boolean, host: function }[]}
|
||||
*/
|
||||
const scopes= [ {
|
||||
get scope(){ return env.D.body; },
|
||||
host: c=> c ? c(env.D.body) : env.D.body,
|
||||
prevent: true,
|
||||
} ];
|
||||
/** Store for disconnect abort controllers */
|
||||
const store_abort= new WeakMap();
|
||||
/**
|
||||
* Scope management utility for tracking component hierarchies
|
||||
*/
|
||||
export const scope= {
|
||||
/**
|
||||
* Gets the current scope
|
||||
* @returns {Object} Current scope context
|
||||
*/
|
||||
get current(){ return scopes[scopes.length-1]; },
|
||||
|
||||
/**
|
||||
* Gets the host element of the current scope
|
||||
* @returns {Function} Host accessor function
|
||||
*/
|
||||
get host(){ return this.current.host; },
|
||||
|
||||
/**
|
||||
* Creates/gets an AbortController that triggers when the element disconnects
|
||||
* */
|
||||
get signal(){
|
||||
const { host }= this;
|
||||
if(store_abort.has(host)) return store_abort.get(host);
|
||||
|
||||
const a= new AbortController();
|
||||
store_abort.set(host, a);
|
||||
host(on.disconnected(()=> a.abort()));
|
||||
return a.signal;
|
||||
},
|
||||
|
||||
/**
|
||||
* Prevents default behavior in the current scope
|
||||
* @returns {Object} Current scope context
|
||||
*/
|
||||
preventDefault(){
|
||||
const { current }= this;
|
||||
current.prevent= true;
|
||||
return current;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets a copy of the current scope stack
|
||||
* @returns {Array} Copy of scope stack
|
||||
*/
|
||||
get state(){ return [ ...scopes ]; },
|
||||
|
||||
/**
|
||||
* Pushes a new scope to the stack
|
||||
* @param {Object} [s={}] - Scope object to push
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); },
|
||||
|
||||
/**
|
||||
* Pushes the root scope to the stack
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
pushRoot(){ return scopes.push(scopes[0]); },
|
||||
|
||||
/**
|
||||
* Pops the current scope from the stack
|
||||
* @returns {Object|undefined} Popped scope or undefined if only one scope remains
|
||||
*/
|
||||
pop(){
|
||||
if(scopes.length===1) return;
|
||||
return scopes.pop();
|
||||
},
|
||||
};
|
||||
// TODO: better place while no cross-import?
|
||||
on.host= (fn, host= scope.host)=> el=> host(()=> fn(el));
|
||||
@@ -159,10 +159,10 @@ signal.clear= function(...signals){
|
||||
};
|
||||
/** Property key for tracking reactive elements */
|
||||
const key_reactive= "__dde_reactive";
|
||||
import { enviroment as env, eva } from "../dom-common.js";
|
||||
import { el } from "../dom.js";
|
||||
import { scope } from "../dom.js";
|
||||
import { on } from "../events.js";
|
||||
import { enviroment as env, eva } from "../dom-lib/common.js";
|
||||
import { el } from "../dom-lib/index.js";
|
||||
import { scope } from "../dom-lib/scopes.js";
|
||||
import { on } from "../dom-lib/events.js";
|
||||
import { memo } from "../memo.js";
|
||||
|
||||
/**
|
||||
|
||||
Reference in new issue
Block a user