vue-unwrap 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -1,16 +1,21 @@
 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[]>;
+  dom: _$vue.ComputedRef<{
+    el: 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;
@@ -21,10 +26,29 @@ declare function useUnwrap<N = NodeRef, P = Record<string, any>>(propTypes?: Rec
 };
 //#endregion
 //#region src/Unwrap.vue.d.ts
-declare const __VLS_export: _$vue.DefineComponent<{}, {
+declare const dom: _$vue.ComputedRef<{
+  el: Element | null;
+  children: _$vue.ShallowReactive<NodeRef[]>;
+}>;
+type __VLS_Slots = {
+  default(props: {
+    dom: typeof dom;
+  }): any;
+};
+declare const __VLS_base: _$vue.DefineComponent<{}, {
   $el: _$vue.ShallowRef<Element | null, Element | null>;
   children: _$vue.ShallowReactive<NodeRef[]>;
+  dom: _$vue.ComputedRef<{
+    el: Element | null;
+    children: _$vue.ShallowReactive<NodeRef[]>;
+  }>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
 //#endregion
-export { NodeRef, _default as Unwrap, getNodeElement, useUnwrap };
+export { NodeRef, _default as Unwrap, getNodeElement, unwrapVNodes, useUnwrap };

package/dist/index.js

@@ -1,18 +1,36 @@
-import { cloneVNode, createBlock, defineComponent, h, openBlock, shallowReactive, shallowRef, unref, useSlots } from "vue";
+import { Comment, Fragment, cloneVNode, computed, 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([]);
+	const dom = computed(() => ({
+		el: $el.value,
+		children
+	}));
 	const slots = useSlots();
 	const trackChildRef = (index) => (node) => children[index] = node;
 	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;
@@ -22,6 +40,7 @@ function useUnwrap(propTypes) {
 	return {
 		$el,
 		children,
+		dom,
 		Unwrap
 	};
 }
@@ -30,15 +49,16 @@ function useUnwrap(propTypes) {
 var Unwrap_default = /* @__PURE__ */ defineComponent({
 	__name: "Unwrap",
 	setup(__props, { expose: __expose }) {
-		const { $el, children, Unwrap } = useUnwrap();
+		const { $el, children, dom, Unwrap } = useUnwrap();
 		__expose({
 			$el,
-			children
+			children,
+			dom
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Unwrap));
+			return openBlock(), createBlock(unref(Unwrap), { dom: unref(dom) }, null, 8, ["dom"]);
 		};
 	}
 });
 //#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.1.0",
   "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"