solid-ctrl-flow 7.0.0 → 7.0.2

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { Accessor } from 'solid-js';
+import { ComponentProps } from 'solid-js';
 import { Context } from 'solid-js';
 import { JSX } from 'solid-js';
 import { MemoOptions } from 'solid-js';
@@ -20,6 +21,9 @@ export declare function Case(props: ParentProps<{
  */
 export declare function disposeWithOwner<T>(outer: Owner, f: Accessor<T>): T;
 
+/** Handy type alias */
+declare type div = ComponentProps<"div">;
+
 /**
  * Eventually wraps its content into a template if a certain condition is met.
  * If you set {@link Standard.recycled} to `true`, the content will be memoized in the beginning and will be recycled even if the wrapper changes.
@@ -169,6 +173,15 @@ export declare namespace OrderedLinkedList {
     }
 }
 
+/**
+ * Simple {@link HTMLDivElement} that accepts another set of attributes to merge with the base ones.
+ * Specifically, {@link div.ref}, {@link div.class}, {@link div.classList}, and {@link div.style} are combined rather than overwritten by the second set of attributes.
+ * Used for customizable structural parts of components
+ */
+export declare function Part(props: {
+    props: div | undefined;
+} & div): JSX;
+
 /**
  * Executes {@link f} with the provided value for the specified {@link Context}.
  * You can pass `undefined` to {@link value} in order to get back the default value for {@link ctx}.
@@ -230,6 +243,21 @@ declare class State {
 /** Type of an element wrapping call-back which accepts an additional parameter */
 declare type Template<T> = (c: Accessor<JSX.Element>, x: T) => JSX.Element;
 
+/** Object that reactively tells whether a CSS transition is currently in progress */
+export declare class TransitionMonitor {
+    #private;
+    /** Whether a transition is currently in progress */
+    get pending(): boolean;
+    /**
+     * Starts waiting for the transition to end.
+     * This function should be called immediately before the transition is triggered.
+     * If a transition is already in progress, this function does nothing, allowing the object to keep monitoring the previous transition, but the returned {@link Promise} will not wait for the latter to complete
+     * @param ctrl The element on which the transition will occur
+     * @returns A {@link Promise} that resolves to whether monitoring completed successfully or was cancelled because a transition was already in progress
+     */
+    start(ctrl: HTMLElement): Promise<boolean>;
+}
+
 /** Parameters to pass to an unkeyed {@link Enfold} */
 declare type Unkeyed<T> = Standard<T> & {
     keyed?: false;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { untrack, getOwner, createRoot, runWithOwner, onCleanup, createMemo, Show, createContext, useContext, For, createRenderEffect, on, splitProps, createSignal, batch, createSelector, equalFn, Match } from "solid-js";
-import { createComponent, memo, mergeProps, spread } from "solid-js/web";
+import { untrack, getOwner, createRoot, runWithOwner, onCleanup, createMemo, Show, createContext, useContext, For, createRenderEffect, on, splitProps, createSignal, batch, mergeProps as mergeProps$1, createSelector, equalFn, Match } from "solid-js";
+import { createComponent, memo, mergeProps, use, spread, template } from "solid-js/web";
 function untrackCall(f, ...args) {
   return untrack(() => f.apply(this, args));
 }
@@ -226,30 +226,6 @@ function SameContextSource(props) {
     }
   }));
 }
-const ctx = createContext(void 0, {
-  name: "on-case"
-});
-function On(props) {
-  const memo2 = memoProps(props);
-  const selector = createSelector(() => memo2.value, (a, b) => (memo2.onCompare ?? equalFn)(a, b));
-  return createComponent(ctx.Provider, {
-    value: selector,
-    get children() {
-      return props.children;
-    }
-  });
-}
-function Case(props) {
-  const selector = useContext(ctx);
-  return createComponent(Match, {
-    get when() {
-      return selector(props.value);
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
 const memoProps = (obj, equals) => new Proxy(obj, new MemoPropsHandler(getOwner(), equals));
 const splitAndMemoProps = (obj, ...keys) => splitAndMemoSomeProps(obj, keys.length, ...keys);
 function splitAndMemoSomeProps(obj, n, ...keys) {
@@ -285,6 +261,90 @@ class MemoPropsHandler {
     return runWithOwner(this.owner, () => createMemo(() => t[k], void 0, opts));
   }
 }
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function Part(props) {
+  const [mine, first, second, other, user] = processProps(props);
+  return (() => {
+    var _el$ = _tmpl$();
+    use((x) => createComponent(Spread, {
+      target: x,
+      ref(r$) {
+        var _ref$ = mine.ref;
+        typeof _ref$ === "function" ? _ref$(r$) : mine.ref = r$;
+      },
+      get style() {
+        return mine.style;
+      }
+    }), _el$);
+    spread(_el$, mergeProps(other, user, {
+      get classList() {
+        return {
+          [first.class ?? ""]: true,
+          [second.class ?? ""]: true,
+          // A key containing only spaces breaks, so the optional classes are kept as separate properties
+          ...first.classList,
+          ...second.classList
+        };
+      }
+    }), false, false);
+    return _el$;
+  })();
+}
+function processProps(props) {
+  const [mine, temp, other] = splitProps(props, ["ref", "style", "props"], ["class", "classList"]), first = memoProps(temp);
+  const [second, user] = splitAndMemoProps(mergeProps$1(() => mine.props), ["class", "classList"]);
+  return [mine, first, second, other, user];
+}
+const ctx = createContext(void 0, {
+  name: "on-case"
+});
+function On(props) {
+  const memo2 = memoProps(props);
+  const selector = createSelector(() => memo2.value, (a, b) => (memo2.onCompare ?? equalFn)(a, b));
+  return createComponent(ctx.Provider, {
+    value: selector,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function Case(props) {
+  const selector = useContext(ctx);
+  return createComponent(Match, {
+    get when() {
+      return selector(props.value);
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+class TransitionMonitor {
+  #signal = createSignal(false);
+  /** Whether a transition is currently in progress */
+  get pending() {
+    return this.#signal[0]();
+  }
+  /**
+   * Starts waiting for the transition to end.
+   * This function should be called immediately before the transition is triggered.
+   * If a transition is already in progress, this function does nothing, allowing the object to keep monitoring the previous transition, but the returned {@link Promise} will not wait for the latter to complete
+   * @param ctrl The element on which the transition will occur
+   * @returns A {@link Promise} that resolves to whether monitoring completed successfully or was cancelled because a transition was already in progress
+   */
+  async start(ctrl) {
+    const [g, s] = this.#signal;
+    if (g())
+      return false;
+    s(true);
+    try {
+      await new Promise((t) => ctrl.addEventListener("transitionend", t, { once: true }));
+    } finally {
+      s(false);
+    }
+    return true;
+  }
+}
 function SameContext(props) {
   return createMemo(() => {
     getOwner().context = props.owner.context;
@@ -302,8 +362,10 @@ export {
   Extractor,
   On,
   OrderedLinkedList,
+  Part,
   SameContext,
   Spread,
+  TransitionMonitor,
   disposeWithOwner,
   memoProps,
   runWithContext,

package/dist/index.umd.js

@@ -228,30 +228,6 @@
       }
     }));
   }
-  const ctx = solidJs.createContext(void 0, {
-    name: "on-case"
-  });
-  function On(props) {
-    const memo = memoProps(props);
-    const selector = solidJs.createSelector(() => memo.value, (a, b) => (memo.onCompare ?? solidJs.equalFn)(a, b));
-    return web.createComponent(ctx.Provider, {
-      value: selector,
-      get children() {
-        return props.children;
-      }
-    });
-  }
-  function Case(props) {
-    const selector = solidJs.useContext(ctx);
-    return web.createComponent(solidJs.Match, {
-      get when() {
-        return selector(props.value);
-      },
-      get children() {
-        return props.children;
-      }
-    });
-  }
   const memoProps = (obj, equals) => new Proxy(obj, new MemoPropsHandler(solidJs.getOwner(), equals));
   const splitAndMemoProps = (obj, ...keys) => splitAndMemoSomeProps(obj, keys.length, ...keys);
   function splitAndMemoSomeProps(obj, n, ...keys) {
@@ -287,6 +263,90 @@
       return solidJs.runWithOwner(this.owner, () => solidJs.createMemo(() => t[k], void 0, opts));
     }
   }
+  var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
+  function Part(props) {
+    const [mine, first, second, other, user] = processProps(props);
+    return (() => {
+      var _el$ = _tmpl$();
+      web.use((x) => web.createComponent(Spread, {
+        target: x,
+        ref(r$) {
+          var _ref$ = mine.ref;
+          typeof _ref$ === "function" ? _ref$(r$) : mine.ref = r$;
+        },
+        get style() {
+          return mine.style;
+        }
+      }), _el$);
+      web.spread(_el$, web.mergeProps(other, user, {
+        get classList() {
+          return {
+            [first.class ?? ""]: true,
+            [second.class ?? ""]: true,
+            // A key containing only spaces breaks, so the optional classes are kept as separate properties
+            ...first.classList,
+            ...second.classList
+          };
+        }
+      }), false, false);
+      return _el$;
+    })();
+  }
+  function processProps(props) {
+    const [mine, temp, other] = solidJs.splitProps(props, ["ref", "style", "props"], ["class", "classList"]), first = memoProps(temp);
+    const [second, user] = splitAndMemoProps(solidJs.mergeProps(() => mine.props), ["class", "classList"]);
+    return [mine, first, second, other, user];
+  }
+  const ctx = solidJs.createContext(void 0, {
+    name: "on-case"
+  });
+  function On(props) {
+    const memo = memoProps(props);
+    const selector = solidJs.createSelector(() => memo.value, (a, b) => (memo.onCompare ?? solidJs.equalFn)(a, b));
+    return web.createComponent(ctx.Provider, {
+      value: selector,
+      get children() {
+        return props.children;
+      }
+    });
+  }
+  function Case(props) {
+    const selector = solidJs.useContext(ctx);
+    return web.createComponent(solidJs.Match, {
+      get when() {
+        return selector(props.value);
+      },
+      get children() {
+        return props.children;
+      }
+    });
+  }
+  class TransitionMonitor {
+    #signal = solidJs.createSignal(false);
+    /** Whether a transition is currently in progress */
+    get pending() {
+      return this.#signal[0]();
+    }
+    /**
+     * Starts waiting for the transition to end.
+     * This function should be called immediately before the transition is triggered.
+     * If a transition is already in progress, this function does nothing, allowing the object to keep monitoring the previous transition, but the returned {@link Promise} will not wait for the latter to complete
+     * @param ctrl The element on which the transition will occur
+     * @returns A {@link Promise} that resolves to whether monitoring completed successfully or was cancelled because a transition was already in progress
+     */
+    async start(ctrl) {
+      const [g, s] = this.#signal;
+      if (g())
+        return false;
+      s(true);
+      try {
+        await new Promise((t) => ctrl.addEventListener("transitionend", t, { once: true }));
+      } finally {
+        s(false);
+      }
+      return true;
+    }
+  }
   function SameContext(props) {
     return solidJs.createMemo(() => {
       solidJs.getOwner().context = props.owner.context;
@@ -303,8 +363,10 @@
   exports2.Extractor = Extractor;
   exports2.On = On;
   exports2.OrderedLinkedList = OrderedLinkedList;
+  exports2.Part = Part;
   exports2.SameContext = SameContext;
   exports2.Spread = Spread;
+  exports2.TransitionMonitor = TransitionMonitor;
   exports2.disposeWithOwner = disposeWithOwner;
   exports2.memoProps = memoProps;
   exports2.runWithContext = runWithContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-ctrl-flow",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "description": "Control flow components for solid-js",
   "author": "AFatNiBBa",
   "license": "ISC",