solid-ctrl-flow 7.0.1 → 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}.

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,64 @@ 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 */
@@ -328,6 +362,7 @@ export {
   Extractor,
   On,
   OrderedLinkedList,
+  Part,
   SameContext,
   Spread,
   TransitionMonitor,

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,64 @@
       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 */
@@ -329,6 +363,7 @@
   exports2.Extractor = Extractor;
   exports2.On = On;
   exports2.OrderedLinkedList = OrderedLinkedList;
+  exports2.Part = Part;
   exports2.SameContext = SameContext;
   exports2.Spread = Spread;
   exports2.TransitionMonitor = TransitionMonitor;

package/package.json

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