ddd-react 1.9.0 → 1.10.0

package/dist/component.d.ts

@@ -4,7 +4,9 @@ export declare abstract class Component<P = {}, S = {}, C = null> {
     vdom: VDOMNode | null;
     private hostEl;
     parent: Component | null;
+    private error;
     static defaultProps: any;
+    static getDerivedStateFromError?(error: Error): any;
     props: P & WithChildrenProps;
     state: S;
     context: C;
@@ -27,7 +29,8 @@ export declare abstract class Component<P = {}, S = {}, C = null> {
     didUpdate(prevProps: P, prevState: S): void | Promise<void>;
     willUnmount(): void | Promise<void>;
     didUnmount(): void | Promise<void>;
-    shouldComponentUpdate(oldProps: P, nextProps: P): boolean;
+    didCatch(error: Error, errorInfo: any): void | Promise<void>;
+    shouldComponentUpdate(prevProps: P, nextProps: P): boolean;
     abstract render(): VDOMNode;
     get elements(): HTMLElement[];
     get firstElement(): HTMLElement | undefined;
@@ -40,4 +43,6 @@ export declare abstract class Component<P = {}, S = {}, C = null> {
     private updateContext;
     private subscribeToProvider;
     getDefaultProps(): P;
+    private handleError;
+    private getComponentStack;
 }

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { D as c, e as v, a as x, A as E, b as U, h as F, c as I } from "./h-BbaMkkC7.mjs";
-import { d as Ot, f as mt } from "./h-BbaMkkC7.mjs";
-function g(e, t) {
+import { D as c, e as b, a as x, A as E, b as U, h as F, c as I } from "./h-BbaMkkC7.mjs";
+import { d as mt, f as Ot } from "./h-BbaMkkC7.mjs";
+function P(e, t) {
   if (e === null || t === null || e === void 0 || t === void 0)
     return e === t;
   if (typeof e != typeof t)
@@ -14,7 +14,7 @@ function g(e, t) {
       if (e.length !== t.length)
         return !1;
       for (let n = 0; n < e.length; ++n)
-        if (!g(e[n], t[n]))
+        if (!P(e[n], t[n]))
           return !1;
       return !0;
     }
@@ -32,7 +32,7 @@ function g(e, t) {
         return !1;
     for (let n = 0; n < r.length; ++n) {
       const s = r[n];
-      if (!(s === "_owner" && e.$$typeof) && !g(e[s], t[s]))
+      if (!(s === "_owner" && e.$$typeof) && !P(e[s], t[s]))
         return !1;
     }
     return !0;
@@ -62,7 +62,7 @@ function q(e = {}, t) {
     t.removeEventListener(r, n);
   });
 }
-function h(e) {
+function p(e) {
   const { type: t } = e;
   switch (t) {
     case c.TEXT: {
@@ -96,15 +96,15 @@ function G(e) {
 }
 function _(e) {
   const { el: t, children: r, listeners: n, props: s } = e;
-  s?.ref && typeof s.ref == "object" && "current" in s.ref && (s.ref.current = null), t && t.remove(), r && r.forEach(h), n && t && (q(n, t), delete e.listeners);
+  s?.ref && typeof s.ref == "object" && "current" in s.ref && (s.ref.current = null), t && t.remove(), r && r.forEach(p), n && t && (q(n, t), delete e.listeners);
 }
 function B(e) {
   const { children: t } = e;
-  t && t.forEach(h);
+  t && t.forEach(p);
 }
 function X(e) {
   const { children: t } = e;
-  t && t.forEach(h);
+  t && t.forEach(p);
 }
 function C(e, t, r) {
   e.style[t] = r.toString();
@@ -128,18 +128,18 @@ function W(e, t) {
   e.className = "", typeof t == "string" ? e.className = t : Array.isArray(t) && e.classList.add(...t);
 }
 function w(e, t, r) {
-  r == null ? L(e, t) : e.setAttribute(t, String(r));
+  r == null ? D(e, t) : e.setAttribute(t, String(r));
 }
-function L(e, t) {
+function D(e, t) {
   e[t] = null, e.removeAttribute(t);
 }
-let P = !1;
+let m = !1;
 const O = [];
 function d(e) {
   O.push(e), Y();
 }
 function Y() {
-  P || (P = !0, queueMicrotask(H));
+  m || (m = !0, queueMicrotask(H));
 }
 function H() {
   for (; O.length > 0; ) {
@@ -159,13 +159,13 @@ function H() {
       }
     );
   }
-  P = !1;
+  m = !1;
 }
 function A(e) {
   const { on: t = {}, ...r } = e.props;
   return delete r.key, { props: r, events: t };
 }
-function p(e, t, r = null, n = null) {
+function h(e, t, r = null, n = null) {
   switch (e.type) {
     case c.TEXT: {
       z(e, t, r);
@@ -195,19 +195,19 @@ function p(e, t, r = null, n = null) {
 }
 function z(e, t, r) {
   const { value: n } = e, s = document.createTextNode(n);
-  e.el = s, j(s, t, r);
+  e.el = s, L(s, t, r);
 }
 function Q(e, t, r, n) {
   const { children: s } = e;
   e.el = t, s?.forEach((i, o) => {
-    p(i, t, r != null ? r + o : null, n);
+    h(i, t, r != null ? r + o : null, n);
   });
 }
 function Z(e, t, r, n) {
   const { tag: s, children: i } = e, f = s === "svg" || t instanceof SVGElement ? document.createElementNS("http://www.w3.org/2000/svg", s) : document.createElement(s);
-  V(f, e, n), e.el = f, i?.forEach((l) => {
-    p(l, f, null, n);
-  }), j(f, t, r);
+  V(f, e, n), e.el = f, i?.forEach((a) => {
+    h(a, f, null, n);
+  }), L(f, t, r);
 }
 function V(e, t, r) {
   const { props: n, events: s } = A(t);
@@ -217,7 +217,7 @@ function tt(e, t, r, n) {
   const s = e.tag, { props: i } = A(e), o = new s(i, n);
   o.mount(t, r), e.component = o, e.el = o.firstElement || null;
 }
-function j(e, t, r) {
+function L(e, t, r) {
   if (r == null) {
     t.append(e);
     return;
@@ -230,10 +230,10 @@ function j(e, t, r) {
 function et(e, t) {
   const { children: r, container: n } = e;
   r?.forEach((s) => {
-    p(s, n, null, t);
+    h(s, n, null, t);
   });
 }
-function D(e, t) {
+function j(e, t) {
   if (e.type !== t.type)
     return !1;
   if (e.type === c.ELEMENT) {
@@ -272,10 +272,10 @@ function rt(e) {
 function N(e) {
   return rt(e.trim());
 }
-function m(e, t, r, n = null) {
-  if (!D(e, t)) {
+function v(e, t, r, n = null) {
+  if (!j(e, t)) {
     const s = nt(r, e.el);
-    return h(e), p(t, r, s, n), t;
+    return p(e), h(t, r, s, n), t;
   }
   switch (t.el = e.el, t.type) {
     case c.TEXT:
@@ -285,11 +285,11 @@ function m(e, t, r, n = null) {
       break;
     }
     case c.COMPONENT: {
-      lt(e, t);
+      at(e, t);
       break;
     }
     case c.PORTAL: {
-      at(e, t, n);
+      lt(e, t, n);
       break;
     }
   }
@@ -311,20 +311,20 @@ function ot(e, t, r) {
     on: o,
     ...f
   } = e.props ?? {}, {
-    class: l,
+    class: a,
     style: u,
-    on: a,
+    on: l,
     ...y
-  } = t.props ?? {}, { listeners: b } = e;
-  it(n, f, y), ct(n, s, l), ut(
+  } = t.props ?? {}, { listeners: g } = e;
+  it(n, f, y), ct(n, s, a), ut(
     n,
     i,
     u
   ), t.listeners = ft(
     n,
-    b,
+    g,
     o ?? {},
-    a ?? {},
+    l ?? {},
     r
   );
 }
@@ -333,17 +333,17 @@ function it(e, t = {}, r = {}) {
   n !== s && (n && typeof n == "object" && "current" in n && (n.current = null), s && typeof s == "object" && "current" in s && (s.current = e));
   const i = { ...t }, o = { ...r };
   delete i.ref, delete o.ref;
-  const { added: f, removed: l, updated: u } = T(i, o);
-  for (const a of l)
-    L(e, a);
-  for (const a of f.concat(u))
-    w(e, a, o[a]);
+  const { added: f, removed: a, updated: u } = T(i, o);
+  for (const l of a)
+    D(e, l);
+  for (const l of f.concat(u))
+    w(e, l, o[l]);
 }
 function ct(e, t, r) {
-  const n = M(t), s = M(r), { added: i, removed: o } = U(n, s);
+  const n = k(t), s = k(r), { added: i, removed: o } = U(n, s);
   o.length > 0 && e.classList.remove(...o), i.length > 0 && e.classList.add(...i);
 }
-function M(e = "") {
+function k(e = "") {
   return Array.isArray(e) ? e.filter(N) : String(e).split(/(\s+)/).filter(N);
 }
 function ut(e, t = {}, r = {}) {
@@ -356,62 +356,63 @@ function ut(e, t = {}, r = {}) {
 function ft(e, t = {}, r = {}, n = {}, s = null) {
   const { removed: i, added: o, updated: f } = T(r, n);
   for (const u of i.concat(f)) {
-    const a = t?.[u];
-    a && e.removeEventListener(u, a);
+    const l = t?.[u];
+    l && e.removeEventListener(u, l);
   }
-  const l = {};
+  const a = {};
   for (const u of o.concat(f))
-    l[u] = S(
+    a[u] = S(
       u,
       n[u],
       e,
       s
     );
-  return l;
+  return a;
 }
 function R(e, t, r) {
-  const n = v(e), s = v(t), i = e.el, o = x(n, s, D), f = r?.offset ?? 0;
-  for (const l of o)
-    if (l.op === E.NOOP) {
-      const { originalIndex: u, index: a } = l;
-      m(n[u], s[a], i, r);
+  const n = b(e), s = b(t), i = e.el, o = x(n, s, j), f = r?.offset ?? 0;
+  for (const a of o)
+    if (a.op === E.NOOP) {
+      const { originalIndex: u, index: l } = a;
+      v(n[u], s[l], i, r);
     }
-  for (const l of o)
-    switch (l.op) {
+  for (const a of o)
+    switch (a.op) {
       case E.MOVE: {
-        const { from: u, index: a } = l, y = n[u].el, b = i.childNodes[a + f];
-        y && (i.insertBefore(y, b), m(n[u], s[a], i, r));
+        const { from: u, index: l } = a, y = n[u].el, g = i.childNodes[l + f];
+        y && (i.insertBefore(y, g), v(n[u], s[l], i, r));
         break;
       }
       case E.REMOVE: {
-        const { item: u } = l;
-        h(u);
+        const { item: u } = a;
+        p(u);
         break;
       }
       case E.ADD: {
-        const { index: u, item: a } = l;
-        p(a, i, u + f, r);
+        const { index: u, item: l } = a;
+        h(l, i, u + f, r);
         break;
       }
     }
 }
-function lt(e, t) {
+function at(e, t) {
   const { component: r } = e, { props: n } = A(t);
   r.updateProps(n), t.component = r, t.el = r.firstElement;
 }
-function at(e, t, r) {
+function lt(e, t, r) {
   if (e.container !== t.container) {
-    h(e), p(t, document.body, null, r);
+    p(e), h(t, document.body, null, r);
     return;
   }
   R(e, t, r);
 }
-const pt = (e) => e.isProvider, ht = (e) => e.isConsumer;
-class k {
+const ht = (e) => e.isProvider, dt = (e) => e.isConsumer;
+class M {
   isMounted = !1;
   vdom = null;
   hostEl = null;
   parent = null;
+  error = null;
   static defaultProps = {};
   props;
   state = {};
@@ -453,11 +454,14 @@ class k {
   didUnmount() {
     return Promise.resolve();
   }
+  didCatch(t, r) {
+    return console.error("Uncaught error:", t, r), this.error = t, Promise.resolve();
+  }
   shouldComponentUpdate(t, r) {
-    return g(t, r);
+    return P(t, r);
   }
   get elements() {
-    return this.vdom == null ? [] : this.vdom.type === c.FRAGMENT ? v(this.vdom).flatMap((t) => t.type === c.COMPONENT && t.component ? t.component.elements : t.el ? [t.el] : []) : this.vdom.el ? [this.vdom.el] : [];
+    return this.vdom == null ? [] : this.vdom.type === c.FRAGMENT ? b(this.vdom).flatMap((t) => t.type === c.COMPONENT && t.component ? t.component.elements : t.el ? [t.el] : []) : this.vdom.el ? [this.vdom.el] : [];
   }
   get firstElement() {
     return this.elements[0];
@@ -467,7 +471,7 @@ class k {
   }
   updateProps(t) {
     const n = { ...this.getDefaultProps(), ...this.props, ...t }, s = this.props;
-    this.props = n, !this.shouldComponentUpdate(s, n) && (pt(this) && this.notify(), this.patch(s, this.state));
+    this.props = n, !this.shouldComponentUpdate(s, n) && (ht(this) && this.notify(), this.patch(s, this.state));
   }
   setState(t) {
     const r = this.state;
@@ -479,19 +483,28 @@ class k {
   mount(t, r = null) {
     if (this.isMounted)
       throw new Error("Component is already mounted");
-    ht(this) && !this.subscribedProvider && this.subscribeToProvider(), this.updateContext(), this.vdom = this.render(), p(this.vdom, t, r, this), this.hostEl = t, this.isMounted = !0;
+    dt(this) && !this.subscribedProvider && this.subscribeToProvider(), this.updateContext();
+    try {
+      this.vdom = this.render(), h(this.vdom, t, r, this), this.hostEl = t, this.isMounted = !0;
+    } catch (n) {
+      this.handleError(n, "mount");
+    }
   }
   unmount() {
     this.isMounted && (d(() => this.willUnmount()), this.subscribedProvider && this.subscribedProvider.removeDependency({ consumer: this }), this.dependencies.forEach(({ consumer: t }) => {
       t.subscribedProvider = null;
-    }), this.dependencies = [], this.vdom && h(this.vdom), d(() => this.didUnmount()), this.vdom = null, this.hostEl = null, this.isMounted = !1);
+    }), this.dependencies = [], this.vdom && p(this.vdom), d(() => this.didUnmount()), this.vdom = null, this.hostEl = null, this.isMounted = !1, this.error = null);
   }
   patch(t, r) {
-    if (!this.isMounted || !this.hostEl || !this.vdom)
-      return;
-    d(() => this.willUpdate(this.props, this.state));
-    const n = this.render();
-    this.vdom = m(this.vdom, n, this.hostEl, this), d(() => this.didUpdate(t, r));
+    if (!(!this.isMounted || !this.hostEl || !this.vdom) && !this.error) {
+      d(() => this.willUpdate(this.props, this.state));
+      try {
+        const n = this.render();
+        this.vdom = v(this.vdom, n, this.hostEl, this), d(() => this.didUpdate(t, r));
+      } catch (n) {
+        this.handleError(n, "patch");
+      }
+    }
   }
   updateContext() {
     const t = Object.getPrototypeOf(this).constructor.contextType;
@@ -522,16 +535,42 @@ class k {
   getDefaultProps() {
     return this.constructor.defaultProps || {};
   }
+  handleError(t, r) {
+    const n = this.constructor;
+    if (n.getDerivedStateFromError) {
+      const s = n.getDerivedStateFromError(t);
+      this.state = { ...this.state, ...s };
+    }
+    d(() => {
+      if (this.didCatch(t, {
+        phase: r,
+        componentStack: this.getComponentStack()
+      }), this.hostEl && this.isMounted)
+        try {
+          const s = this.render();
+          s && v(this.vdom, s, this.hostEl, this);
+        } catch (s) {
+          console.error("Error during error recovery render:", s);
+        }
+    });
+  }
+  getComponentStack() {
+    const t = [this.constructor.name];
+    let r = this.parent;
+    for (; r; )
+      t.push(r.constructor.name), r = r.parent;
+    return t.reverse();
+  }
 }
 function yt(e) {
-  class t extends k {
+  class t extends M {
     isProvider = !0;
     render() {
       let s = [];
       return Array.isArray(this.props.children) ? s = this.props.children : this.props.children ? s = [this.props.children] : s = [], F(s);
     }
   }
-  class r extends k {
+  class r extends M {
     static contextType = {
       Provider: t,
       defaultValue: e
@@ -560,24 +599,24 @@ function yt(e) {
 function Et(e, t) {
   if (!t)
     throw new Error("Container element is not provided for rendering.");
-  p(e, t);
+  h(e, t);
 }
-function bt(e = null) {
+function vt(e = null) {
   return {
     current: e
   };
 }
-function vt(e, t) {
+function gt(e, t) {
   const r = Array.isArray(e) ? e : [e];
   return I(r, t);
 }
 export {
-  k as Component,
+  M as Component,
   yt as createContext,
-  vt as createPortal,
-  bt as createRef,
-  Ot as h,
+  gt as createPortal,
+  vt as createRef,
+  mt as h,
   F as hFragment,
-  mt as hString,
+  Ot as hString,
   Et as render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ddd-react",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "type-check": "tsc --noEmit",