vue-unwrap 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -1,16 +1,17 @@
 import * as _$vue from "vue";
-import { ComponentPublicInstance, SetupContext } from "vue";
+import { ComponentPublicInstance, SetupContext, VNode, VNodeArrayChildren } from "vue";
 
 //#region src/useUnwrap.d.ts
 type NodeRef = Element | ComponentPublicInstance | null;
 declare function getNodeElement<N = NodeRef>(node: N): Element | null;
+declare function unwrapVNodes(vnodes: VNodeArrayChildren): VNode[];
 declare function useUnwrap<N = NodeRef, P = Record<string, any>>(propTypes?: Record<string, any>): {
   $el: _$vue.ShallowRef<Element | null, Element | null>;
   children: _$vue.ShallowReactive<N[]>;
   Unwrap: {
-    (props: P, context: SetupContext): _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+    (props: P, context: SetupContext): VNode<_$vue.RendererNode, _$vue.RendererElement, {
       [key: string]: any;
-    }> | _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+    }> | VNode<_$vue.RendererNode, _$vue.RendererElement, {
       [key: string]: any;
     }>[];
     inheritAttrs: boolean;
@@ -27,4 +28,4 @@ declare const __VLS_export: _$vue.DefineComponent<{}, {
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
-export { NodeRef, _default as Unwrap, getNodeElement, useUnwrap };
+export { NodeRef, _default as Unwrap, getNodeElement, unwrapVNodes, useUnwrap };

package/dist/index.js

@@ -1,9 +1,23 @@
-import { cloneVNode, createBlock, defineComponent, h, openBlock, shallowReactive, shallowRef, unref, useSlots } from "vue";
+import { Comment, Fragment, cloneVNode, createBlock, defineComponent, h, isVNode, openBlock, shallowReactive, shallowRef, unref, useSlots } from "vue";
 //#region src/useUnwrap.ts
 function getNodeElement(node) {
 	const el = node?.$el || node;
 	return el instanceof Element ? el : null;
 }
+function unwrapVNodes(vnodes) {
+	const nodes = [];
+	for (const node of vnodes) {
+		if (node == null || typeof node === "boolean") continue;
+		if (Array.isArray(node)) {
+			nodes.push(...unwrapVNodes(node));
+			continue;
+		}
+		if (!isVNode(node) || node.type === Comment) continue;
+		if (node.type === Fragment && Array.isArray(node.children)) nodes.push(...unwrapVNodes(node.children));
+		else nodes.push(node);
+	}
+	return nodes;
+}
 function useUnwrap(propTypes) {
 	const $el = shallowRef(null);
 	const children = shallowReactive([]);
@@ -12,7 +26,7 @@ function useUnwrap(propTypes) {
 	const trackWrapperRef = (node) => $el.value = getNodeElement(node);
 	function Unwrap(props, context) {
 		const { is, ...attrs } = context.attrs;
-		const nodes = (slots.default?.(props) ?? []).map((node, i) => cloneVNode(node, { ref: trackChildRef(i) }, true));
+		const nodes = unwrapVNodes(slots.default?.(props) ?? []).map((node, i) => cloneVNode(node, { ref: trackChildRef(i) }, true));
 		const wrapper = is ? cloneVNode(h(is, attrs, nodes), { ref: trackWrapperRef }, true) : null;
 		children.splice(nodes.length);
 		return wrapper || nodes;
@@ -41,4 +55,4 @@ var Unwrap_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { Unwrap_default as Unwrap, getNodeElement, useUnwrap };
+export { Unwrap_default as Unwrap, getNodeElement, unwrapVNodes, useUnwrap };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-unwrap",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Conditional wrapper component for Vue 3 with child ref aggregation.",
   "author": "Andrea 'Fiad' Fiadone <hello@fiad.one>",
   "license": "MIT",
@@ -30,7 +30,8 @@
     "test": "vitest",
     "typecheck": "vue-tsc --noEmit",
     "release": "bumpp",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "commit": "cz"
   },
   "peerDependencies": {
     "vue": "^3.5.0"